feat: ✨ add sd-flipcard

packages/components/src/components/flipcard/flipcard.stories.ts

@@ -285,7 +285,7 @@ export const Sample = {
             Lorem ipsum dolor sit amet per niente da faremmasds nonnummy dolore lorem ipsum dolor sit amet consectuer
           </p>
 
-          <sd-link size="inherit" href="#">Link</sd-link>
+          <sd-link size="inherit" href="#" target="_blank">Link</sd-link>
         </div>
       </sd-flipcard>
     `;
@@ -322,7 +322,7 @@ export const AspectRatio = {
             Lorem ipsum dolor sit amet per niente da faremmasds nonnummy dolore lorem ipsum dolor sit amet consectuer
           </p>
 
-          <sd-link size="inherit" href="#" tabindex="0">Link</sd-link>
+          <sd-link size="inherit" href="#" target="_blank">Link</sd-link>
         </div>
       </sd-flipcard>
     `;

packages/components/src/components/flipcard/flipcard.ts

@@ -86,18 +86,20 @@ export default class SdFlipcard extends SolidElement {
   }
 
   private handleFrontKeydown(event: KeyboardEvent) {
-    if (event.code === 'Enter' || event.code === 'Space') {
+    console.log(event.target, this.front, this.front === event.target);
+    console.log('handleFrontKeydown');
+    console.log(this.back === event.target, event.type, event.view, event.ctrlKey);
+
+    if (event.code === 'Enter' && this.front === event.target) {
       event.preventDefault();
-      console.log('front keydown', event.code);
 
       this.flipFront();
     }
   }
 
   private handleBackKeydown(event: KeyboardEvent) {
-    if (event.code === 'Enter' || event.code === 'Space') {
+    if (event.code === 'Enter' && this.back === event.target) {
       event.preventDefault();
-      console.log('back keydown', event.code);
 
       this.flipBack();
     }