@descope/web-components-ui 3.11.4 → 3.11.6

package/dist/index.esm.js

@@ -6107,8 +6107,6 @@ const createImage = async (src, altText) => {
   }
 };
 
-/* eslint-disable no-use-before-define */
-
 const componentName$1i = getComponentName$1('image');
 
 const srcAttrs = ['src', 'src-dark'];
@@ -6188,7 +6186,7 @@ class RawImage extends createBaseClass$1({
 
   // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
   // with the value from the `st-fill` attribute
-  // eslint-disable-next-line class-methods-use-this
+   
   updateFillColor(node) {
     // set fill to root node and all its relevant selectors
     const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
@@ -6248,6 +6246,8 @@ const IconClass = compose$1(
   createStyleMixin$1({
     mappings: {
       fill: [{}, { property: ImageClass.cssVarList.fill }],
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
     },
   }),
   draggableMixin$1,
@@ -6259,10 +6259,12 @@ const IconClass = compose$1(
     style: () => `
       :host {
         display: inline-flex;
+        align-items: center;
+        justify-content: center;
         max-height: 100%;
       }
       `,
-    excludeAttrsSync: ['tabindex', 'class', 'style'],
+    excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],
     componentName: componentName$1h,
   }),
 );
@@ -27325,7 +27327,7 @@ const cloneSlottedNodes = (element, slotName) => {
 };
 
 const populateRemoveButton = (template, id, ref) => {
-  const button = template.content.querySelector('.remove-button');
+  const button = template.content.querySelector('.remove-button-content');
   button.dataset.passkeyId = id;
   const clonedSlottedContent = cloneSlottedNodes(ref, 'remove-button');
   if (clonedSlottedContent) button.append(clonedSlottedContent);
@@ -27362,7 +27364,14 @@ const itemRenderer = ({ id, name, createdAt, passkeyType }, _, ref) => {
             <descope-text class="item-name" variant="body1" mode="primary"></descope-text>
           </span>
           <span class="item-panel">
-            ${ref.allowRemove ? `<descope-link variant="text" mode="primary" size="md" ellipsis="true" data-action="remove-passkey" class="remove-button"></descope-link>` : `<descope-icon src="${checkmark}"></descope-icon>`}
+            ${
+              ref.allowRemove
+                ? `<descope-link variant="text" mode="primary" size="md" ellipsis="true" data-action="remove-passkey" class="remove-button">
+                <div class="remove-button-content">
+                </div>
+              </descope-link>`
+                : `<descope-icon src="${checkmark}"></descope-icon>`
+            }
           </span>
         </div>
         <div class="meta">
@@ -27434,6 +27443,10 @@ class RawUserPasskeysClass extends BaseClass$1 {
 
     injectStyle(
       `
+      .remove-button-content {
+        display: flex;
+        align-items: center;
+      }
       :host {
         display: inline-block;
       }
@@ -27463,11 +27476,6 @@ class RawUserPasskeysClass extends BaseClass$1 {
         white-space: nowrap;
       }
 
-      slot[name="method-icon"] {
-        display: inline-flex;
-        align-items: center;
-      }
-
       .descope-list-item {
         min-width: 0;
       }
@@ -27531,7 +27539,6 @@ class RawUserPasskeysClass extends BaseClass$1 {
         display: flex;
         width: 100%;
       }
-
       .hidden {
         display: none
       }
@@ -27653,8 +27660,10 @@ class RawUserPasskeysClass extends BaseClass$1 {
   }
 }
 
-const { host } = {
+const { host, methodIconSlotted, addIconSlotted } = {
   host: { selector: () => ':host' },
+  methodIconSlotted: { selector: () => 'slot[name="method-icon"]::slotted(*)' },
+  addIconSlotted: { selector: () => 'slot[name="button-icon"]::slotted(*)' },
 };
 
 const UserPasskeysClass = compose$1(
@@ -27778,10 +27787,19 @@ const UserPasskeysClass = compose$1(
       },
 
       removeButtonGap: {
-        selector: () =>
-          `${LinkClass.componentName}.remove-button > *:not(:last-child)`,
-        property: 'margin-inline-end',
+        selector: () => '.remove-button-content',
+        property: 'gap',
       },
+
+      iconColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.iconColor,
+      },
+
+      iconSize: [
+        { ...methodIconSlotted, property: 'height' },
+        { ...addIconSlotted, property: 'height' },
+      ],
     },
   }),
   draggableMixin$1,
@@ -27828,6 +27846,9 @@ const userPasskeys = {
 
   [vars$I.removeButtonGap]: globals.spacing.sm,
 
+  [vars$I.iconSize]: '1.5em',
+  [vars$I.iconColor]: 'currentcolor',
+
   _fullWidth: {
     [vars$I.hostWidth]: '100%',
   },