@descope/flow-components 3.11.4 → 3.11.6

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.11.4",
+      "buildVersion": "3.11.6",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.11.4",
+      "buildVersion": "3.11.6",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -82715,8 +82715,6 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	/* eslint-disable no-use-before-define */
-
 	const componentName$1n = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
@@ -82796,7 +82794,7 @@ function requireIndex_cjs () {
 
 	  // 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]')];
@@ -82856,6 +82854,8 @@ function requireIndex_cjs () {
 	  createStyleMixin$1({
 	    mappings: {
 	      fill: [{}, { property: ImageClass.cssVarList.fill }],
+	      height: { selector: () => ':host' },
+	      width: { selector: () => ':host' },
 	    },
 	  }),
 	  draggableMixin$1,
@@ -82867,10 +82867,12 @@ function requireIndex_cjs () {
 	    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$1m,
 	  }),
 	);
@@ -91860,7 +91862,7 @@ function requireIndex_cjs () {
 	};
 
 	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);
@@ -91897,7 +91899,14 @@ function requireIndex_cjs () {
             <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">
@@ -91969,6 +91978,10 @@ function requireIndex_cjs () {
 
 	    injectStyle(
 	      `
+      .remove-button-content {
+        display: flex;
+        align-items: center;
+      }
       :host {
         display: inline-block;
       }
@@ -91998,11 +92011,6 @@ function requireIndex_cjs () {
         white-space: nowrap;
       }
 
-      slot[name="method-icon"] {
-        display: inline-flex;
-        align-items: center;
-      }
-
       .descope-list-item {
         min-width: 0;
       }
@@ -92066,7 +92074,6 @@ function requireIndex_cjs () {
         display: flex;
         width: 100%;
       }
-
       .hidden {
         display: none
       }
@@ -92188,8 +92195,10 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$k } = {
+	const { host: host$k, methodIconSlotted, addIconSlotted } = {
 	  host: { selector: () => ':host' },
+	  methodIconSlotted: { selector: () => 'slot[name="method-icon"]::slotted(*)' },
+	  addIconSlotted: { selector: () => 'slot[name="button-icon"]::slotted(*)' },
 	};
 
 	const UserPasskeysClass = compose(
@@ -92313,10 +92322,19 @@ function requireIndex_cjs () {
 	      },
 
 	      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,
@@ -92363,6 +92381,9 @@ function requireIndex_cjs () {
 
 	  [vars$I.removeButtonGap]: globals.spacing.sm,
 
+	  [vars$I.iconSize]: '1.5em',
+	  [vars$I.iconColor]: 'currentcolor',
+
 	  _fullWidth: {
 	    [vars$I.hostWidth]: '100%',
 	  },
@@ -108314,9 +108335,9 @@ const LastAuthBadge = React__default.default.forwardRef(({ children, offsetX, of
 });
 
 const UserPasskeys = React__default.default.forwardRef(({ allowRemove, createdAtLabel, addButtonLabel, removeButtonLabel, methodIcon, methodIconDark, buttonIcon, buttonIconDark, removeIcon, removeIconDark, ...props }, ref) => (React__default.default.createElement("descope-user-passkeys", { "allow-remove": allowRemove, "created-at-label": createdAtLabel, "add-passkey-button-label": addButtonLabel, ...props, ref: ref },
-    methodIcon && methodIconDark && (React__default.default.createElement(Icon, { icon: methodIcon, "src-dark": methodIconDark, slot: "method-icon" })),
-    buttonIcon && buttonIconDark && (React__default.default.createElement(Icon, { icon: buttonIcon, "src-dark": buttonIconDark, slot: "button-icon" })),
-    allowRemove && removeIcon && removeIconDark && (React__default.default.createElement(Icon, { icon: removeIcon, "src-dark": removeIconDark, slot: "remove-button" })),
+    methodIcon && methodIconDark && (React__default.default.createElement(Icon, { icon: methodIcon, "src-dark": methodIconDark, slot: "method-icon", "st-fill": "currentcolor", "st-height": "1.5em" })),
+    buttonIcon && buttonIconDark && (React__default.default.createElement(Icon, { icon: buttonIcon, "src-dark": buttonIconDark, slot: "button-icon", "st-fill": "currentcolor", "st-height": "1.5em" })),
+    allowRemove && removeIcon && removeIconDark && (React__default.default.createElement(Icon, { icon: removeIcon, "src-dark": removeIconDark, slot: "remove-button", "st-fill": "currentcolor", "st-height": "1.5em" })),
     allowRemove && React__default.default.createElement("span", { slot: "remove-button" }, removeButtonLabel))));
 
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;

package/dist/index.esm.js

@@ -677,9 +677,9 @@ const LastAuthBadge = React.forwardRef(({ children, offsetX, offsetY, badgeLabel
 });
 
 const UserPasskeys = React.forwardRef(({ allowRemove, createdAtLabel, addButtonLabel, removeButtonLabel, methodIcon, methodIconDark, buttonIcon, buttonIconDark, removeIcon, removeIconDark, ...props }, ref) => (React.createElement("descope-user-passkeys", { "allow-remove": allowRemove, "created-at-label": createdAtLabel, "add-passkey-button-label": addButtonLabel, ...props, ref: ref },
-    methodIcon && methodIconDark && (React.createElement(Icon, { icon: methodIcon, "src-dark": methodIconDark, slot: "method-icon" })),
-    buttonIcon && buttonIconDark && (React.createElement(Icon, { icon: buttonIcon, "src-dark": buttonIconDark, slot: "button-icon" })),
-    allowRemove && removeIcon && removeIconDark && (React.createElement(Icon, { icon: removeIcon, "src-dark": removeIconDark, slot: "remove-button" })),
+    methodIcon && methodIconDark && (React.createElement(Icon, { icon: methodIcon, "src-dark": methodIconDark, slot: "method-icon", "st-fill": "currentcolor", "st-height": "1.5em" })),
+    buttonIcon && buttonIconDark && (React.createElement(Icon, { icon: buttonIcon, "src-dark": buttonIconDark, slot: "button-icon", "st-fill": "currentcolor", "st-height": "1.5em" })),
+    allowRemove && removeIcon && removeIconDark && (React.createElement(Icon, { icon: removeIcon, "src-dark": removeIconDark, slot: "remove-button", "st-fill": "currentcolor", "st-height": "1.5em" })),
     allowRemove && React.createElement("span", { slot: "remove-button" }, removeButtonLabel))));
 
 const globalsThemeToStyle = globalsThemeToStyle$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.11.4",
+  "version": "3.11.6",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -97,7 +97,7 @@
     "webpack-subresource-integrity": "5.2.0-rc.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "3.11.4"
+    "@descope/web-components-ui": "3.11.6"
   },
   "peerDependencies": {
     "react": ">= 18"