@descope-ui/descope-user-passkeys 3.11.4 → 3.11.5

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.11.5](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.4...web-components-ui-3.11.5) (2026-05-21)
+
+
+### Bug Fixes
+
+* **user-passkeys:** icon color and size fixes ([#1037](https://github.com/descope/web-components-ui/issues/1037)) ([ef98108](https://github.com/descope/web-components-ui/commit/ef981082884d9ee6f17b987900f13a3b1e454652))
+
 ## [3.11.4](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.3...web-components-ui-3.11.4) (2026-05-20)
 
 ## [3.11.3](https://github.com/descope/web-components-ui/compare/web-components-ui-3.11.2...web-components-ui-3.11.3) (2026-05-19)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-user-passkeys",
-  "version": "3.11.4",
+  "version": "3.11.5",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,18 +14,18 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.11.4",
-    "test-drivers": "3.11.4"
+    "e2e-utils": "3.11.5",
+    "test-drivers": "3.11.5"
   },
   "dependencies": {
-    "@descope-ui/common": "3.11.4",
-    "@descope-ui/theme-globals": "3.11.4",
-    "@descope-ui/descope-list": "3.11.4",
-    "@descope-ui/descope-list-item": "3.11.4",
-    "@descope-ui/descope-text": "3.11.4",
-    "@descope-ui/descope-link": "3.11.4",
-    "@descope-ui/descope-icon": "3.11.4",
-    "@descope-ui/descope-button": "3.11.4"
+    "@descope-ui/common": "3.11.5",
+    "@descope-ui/descope-list": "3.11.5",
+    "@descope-ui/descope-text": "3.11.5",
+    "@descope-ui/descope-list-item": "3.11.5",
+    "@descope-ui/theme-globals": "3.11.5",
+    "@descope-ui/descope-link": "3.11.5",
+    "@descope-ui/descope-icon": "3.11.5",
+    "@descope-ui/descope-button": "3.11.5"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/UserPasskeysClass.js

@@ -16,6 +16,7 @@ import { ListItemClass } from '@descope-ui/descope-list-item/class';
 import { getIcon, parseDate, populateRemoveButton, sortFn } from './helpers';
 import checkmark from './icons/checkmark.svg';
 import { LinkClass } from '@descope-ui/descope-link/class';
+import { ButtonClass } from '@descope-ui/descope-button/class';
 
 export const componentName = getComponentName('user-passkeys');
 
@@ -38,7 +39,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">
@@ -110,6 +118,10 @@ class RawUserPasskeysClass extends BaseClass {
 
     injectStyle(
       `
+      .remove-button-content {
+        display: flex;
+        align-items: center;
+      }
       :host {
         display: inline-block;
       }
@@ -139,11 +151,6 @@ class RawUserPasskeysClass extends BaseClass {
         white-space: nowrap;
       }
 
-      slot[name="method-icon"] {
-        display: inline-flex;
-        align-items: center;
-      }
-
       .descope-list-item {
         min-width: 0;
       }
@@ -207,7 +214,6 @@ class RawUserPasskeysClass extends BaseClass {
         display: flex;
         width: 100%;
       }
-
       .hidden {
         display: none
       }
@@ -329,8 +335,10 @@ class RawUserPasskeysClass extends BaseClass {
   }
 }
 
-const { host } = {
+const { host, methodIconSlotted, addIconSlotted } = {
   host: { selector: () => ':host' },
+  methodIconSlotted: { selector: () => 'slot[name="method-icon"]::slotted(*)' },
+  addIconSlotted: { selector: () => 'slot[name="button-icon"]::slotted(*)' },
 };
 
 export const UserPasskeysClass = compose(
@@ -454,10 +462,19 @@ export const UserPasskeysClass = compose(
       },
 
       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,

package/src/component/helpers.js

@@ -156,7 +156,7 @@ export const cloneSlottedNodes = (element, slotName) => {
 };
 
 export 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);

package/src/theme.js

@@ -36,6 +36,9 @@ const userPasskeys = {
 
   [vars.removeButtonGap]: globals.spacing.sm,
 
+  [vars.iconSize]: '1.5em',
+  [vars.iconColor]: 'currentcolor',
+
   _fullWidth: {
     [vars.hostWidth]: '100%',
   },

package/stories/descope-user-passkeys.stories.js

@@ -69,9 +69,9 @@ const Template = ({
     st-item-horizontal-padding="${stItemHorizontalPadding || ''}"
     st-item-vertical-padding="${stItemVerticalPadding || ''}"
   >
-    ${showMethodIcon && `<img src="${methodIcon}" slot="method-icon" />`}
-    ${showButtonIcon && `<img src="${buttonIcon}" slot="button-icon" />`}
-    ${allowRemove && showRemoveIcon ? `<img src="${removeIcon}" slot="remove-button" />` : ''}
+    ${showMethodIcon ? `<descope-icon st-fill="currentcolor" src="${methodIcon}" slot="method-icon"></descope-icon>` : ''}
+    ${showButtonIcon ? `<descope-icon st-fill="currentcolor" src="${buttonIcon}" slot="button-icon"></descope-icon>` : ''}
+    ${allowRemove && showRemoveIcon ? `<descope-icon st-fill="currentcolor" st-height="1.5em" src="${removeIcon}" slot="remove-button"></descope-icon>` : ''}
     ${allowRemove ? `<span slot="remove-button">${removeButtonLabel || 'Remove'}</span>` : ''}
   </descope-user-passkeys>
 `;