@descope-ui/descope-user-passkeys 3.13.3 → 3.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-user-passkeys",
-  "version": "3.13.3",
+  "version": "3.14.1",
   "files": [
     "src",
     "stories"
@@ -18,18 +18,18 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.13.3",
-    "test-drivers": "3.13.3"
+    "e2e-utils": "3.14.1",
+    "test-drivers": "3.14.1"
   },
   "dependencies": {
-    "@descope-ui/theme-globals": "3.13.3",
-    "@descope-ui/descope-list": "3.13.3",
-    "@descope-ui/descope-text": "3.13.3",
-    "@descope-ui/descope-link": "3.13.3",
-    "@descope-ui/common": "3.13.3",
-    "@descope-ui/descope-icon": "3.13.3",
-    "@descope-ui/descope-button": "3.13.3",
-    "@descope-ui/descope-list-item": "3.13.3"
+    "@descope-ui/common": "3.14.1",
+    "@descope-ui/descope-list": "3.14.1",
+    "@descope-ui/theme-globals": "3.14.1",
+    "@descope-ui/descope-list-item": "3.14.1",
+    "@descope-ui/descope-text": "3.14.1",
+    "@descope-ui/descope-link": "3.14.1",
+    "@descope-ui/descope-icon": "3.14.1",
+    "@descope-ui/descope-button": "3.14.1"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/UserPasskeysClass.js

@@ -127,6 +127,7 @@ class RawUserPasskeysClass extends BaseClass {
       }
 
       .header {
+        width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -134,10 +135,19 @@ class RawUserPasskeysClass extends BaseClass {
 
       .header .method {
         display: flex;
+        flex: 1;
+        min-width: 0;
+      }
+
+      slot[name="method-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
       }
 
       .button {
         min-width: 0;
+        max-width: 50%;
+        flex-shrink: 1;
       }
 
       .add-passkey-button {
@@ -195,7 +205,7 @@ class RawUserPasskeysClass extends BaseClass {
 
       descope-text {
         display: flex;
-        align-items: center;        
+        align-items: center;
         min-width: 0;
       }
       descope-text::part(text-wrapper) {
@@ -217,7 +227,7 @@ class RawUserPasskeysClass extends BaseClass {
       .hidden {
         display: none
       }
-      
+
       `,
       this,
     );

package/src/component/helpers.js

@@ -1,3 +1,4 @@
+import { cloneSlottedNodes } from '@descope-ui/common/components-helpers';
 import onePasswordDark from './providers/1password-dark.svg';
 import onePasswordLight from './providers/1password-light.svg';
 import appleDark from './providers/apple-dark.svg';
@@ -140,21 +141,6 @@ export const iconMap = {
   },
 };
 
-export const cloneSlottedNodes = (element, slotName) => {
-  if (!element || !slotName) return null;
-  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
-  if (!sources.length) return null;
-  const fragment = document.createDocumentFragment();
-  sources.forEach((source) => {
-    const clone = source.content
-      ? source.content.cloneNode(true)
-      : source.cloneNode(true);
-    if (clone.removeAttribute) clone.removeAttribute('slot');
-    fragment.append(clone);
-  });
-  return fragment;
-};
-
 export const populateRemoveButton = (template, id, ref) => {
   const button = template.content.querySelector('.remove-button-content');
   button.dataset.passkeyId = id;