@descope/web-components-ui 3.22.3 → 3.23.0

package/dist/cjs/index.cjs.js

@@ -143,6 +143,40 @@ const syncAttrs$1 = (ele1, ele2, options) => {
   observeAttributes$1(ele2, createSyncAttrsCb$1(ele2, ele1), options);
 };
 
+// A custom element has no shadow root on the first tick, so anything reaching into one has to
+// wait for it. Takes a function rather than the element, because the element itself is often not
+// there yet either.
+//
+// On giving up it resolves the element it was given, not a shadow root. `portalMixin` relies on
+// that to carry on with something usable, so a caller that cannot use the element must check what
+// it got back.
+const waitForShadowRoot$1 = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
+    const MAX_RETRIES = 20;
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele?.shadowRoot) {
+        setTimeout(check);
+      } else {
+        res(ele.shadowRoot);
+      }
+    };
+    check();
+  });
+};
+
 const getComponentName$1 = (name) => kebabCaseJoin$1(DESCOPE_PREFIX$1, name);
 
 const getCssVarName$1 = (...args) => `--${kebabCaseJoin$1(...args)}`;
@@ -303,6 +337,39 @@ const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
+// A custom element has no shadow root on the first tick, so anything reaching into one has to
+// wait for it. Takes a function rather than the element, because the element itself is often not
+// there yet either.
+//
+// On giving up it resolves the element it was given, not a shadow root. `portalMixin` relies on
+// that to carry on with something usable, so a caller that cannot use the element must check what
+// it got back.
+const waitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
+    const MAX_RETRIES = 20;
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele?.shadowRoot) {
+        setTimeout(check);
+      } else {
+        res(ele.shadowRoot);
+      }
+    };
+    check();
+  });
+};
+
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
@@ -1371,7 +1438,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$1c = getThemeVars(globals$1);
+const vars$1d = getThemeVars(globals$1);
 
 const direction = 'ltr';
 
@@ -1675,7 +1742,7 @@ const createClassSelectorSpecifier$1 = (className, numOfRepeats) => `.${classNam
 const STYLE_OVERRIDE_ATTR_PREFIX$1 = 'st';
 
 const createStyleMixin$1 =
-  ({ mappings = {}, componentNameOverride = '' }) =>
+  ({ mappings = {}, componentNameOverride = '', style = '' }) =>
   (superclass) => {
     const componentName = componentNameOverride || superclass.componentName;
 
@@ -1729,7 +1796,7 @@ const createStyleMixin$1 =
         );
       }
 
-      // eslint-disable-next-line class-methods-use-this
+       
       get #componentTheme() {
         return componentsThemeManager.currentTheme?.[componentName] || '';
       }
@@ -1765,6 +1832,7 @@ const createStyleMixin$1 =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
+            // eslint-disable-next-line no-undef
             classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
@@ -1812,6 +1880,14 @@ const createStyleMixin$1 =
         }
       }
 
+      // Rules the component needs wherever this mixin writes, which for a portal is a shadow root
+      // it does not own. Prepended after the mapping rules so those still win: the mapping is the
+      // themeable half, this is the structure underneath it.
+      #createStaticStyle() {
+        const css = isFunction(style) ? style() : style;
+        if (css) injectStyle(css, this.#rootElement, { prepend: true });
+      }
+
       #addClassName(className) {
         (
           this.#rootElement?.classList ||
@@ -1829,6 +1905,7 @@ const createStyleMixin$1 =
           this.#addClassName(componentName);
 
           this.#createMappingStyle();
+          this.#createStaticStyle();
           this.#createComponentTheme();
           this.#createOverridesStyle();
 
@@ -2781,46 +2858,31 @@ const DISPLAY_NAME_SEPARATOR$1 = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
-  const ele = await getRootElementFn(that);
-
-  return new Promise((res) => {
-    const MAX_RETRIES = 20;
-    let counter = 0;
-
-    const check = () => {
-      if (counter > MAX_RETRIES) {
-        // eslint-disable-next-line no-console
-        console.error('could not get shadow root for element', ele);
-        res(ele);
-        return;
-      }
-
-      counter++;
-
-      if (!ele?.shadowRoot) {
-        setTimeout(check);
-      } else {
-        res(ele.shadowRoot);
-        return;
-      }
-    };
-    check();
-  });
-};
-
 const portalMixin$1 =
   ({
     name,
     selector,
     mappings = {},
-    forward: { attributes = [], include = true } = {},
+    // Static css for the portal's own root, for rules that should not become themeable knobs.
+    style = '',
+    // `false` forwards nothing to the portal element. It needs its own value because an empty
+    // `attributes` list already means "no filter", so it forwards everything rather than nothing.
+    // Forwarding is wrong for a portal whose element is not a copy of the host, where attributes
+    // like `data` or `label` would land somewhere that does not expect them.
+    forward = {},
   }) =>
   (superclass) => {
+    // A function selector has no text to derive a name from, and an empty one would quietly
+    // produce empty css var names, so say so instead.
+    if (isFunction(selector) && !name) {
+      throw new Error('portalMixin: a function selector requires a name');
+    }
+
     const eleDisplayName = name || sanitizeSelector(selector);
 
     const BaseClass = createStyleMixin$1({
       mappings,
+      style,
     })(superclass);
 
     return class PortalMixinClass extends BaseClass {
@@ -2853,13 +2915,18 @@ const portalMixin$1 =
 
           // in case we have a selector, we should first wait for the base element shadow root
           //  and then look for the internal element
-          const baseEleShadowRoot = await withWaitForShadowRoot$1(() => baseEle)(
+          const baseEleShadowRoot = await waitForShadowRoot(() => baseEle)(
             that,
           );
-          return baseEleShadowRoot.querySelector(selector);
+
+          // a string selector only reaches inside that one shadow root. a portal that sits deeper
+          // takes a function instead, which receives the root and may await its own way down.
+          return isFunction(selector)
+            ? selector(baseEleShadowRoot)
+            : baseEleShadowRoot.querySelector(selector);
         };
 
-        const getPortalElement = withWaitForShadowRoot$1(getRootElement);
+        const getPortalElement = waitForShadowRoot(getRootElement);
 
         super({
           getRootElement: getPortalElement,
@@ -2894,9 +2961,12 @@ const portalMixin$1 =
         // Initialize portal element lookup here (deferred from constructor for React compatibility)
         this.#portalEle = this.#getPortalElement();
         const portalEle = await this.#portalEle;
-        forwardAttrs(this, portalEle, {
-          [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
-        });
+        if (forward !== false) {
+          const { attributes = [], include = true } = forward;
+          forwardAttrs(this, portalEle, {
+            [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+          });
+        }
 
         this.#handleHoverAttribute();
       }
@@ -3221,12 +3291,12 @@ const createImage = async (src, altText) => {
   }
 };
 
-const componentName$1t = getComponentName('image');
+const componentName$1u = getComponentName('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1t,
+  componentName: componentName$1u,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -3354,7 +3424,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1s = getComponentName('icon');
+const componentName$1t = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3379,7 +3449,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],
-    componentName: componentName$1s,
+    componentName: componentName$1t,
   }),
 );
 
@@ -3394,7 +3464,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1r = getComponentName('button');
+const componentName$1s = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3432,7 +3502,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$E, label: label$a, slottedIcon } = {
+const { host: host$F, label: label$a, slottedIcon } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   slottedIcon: { selector: () => '::slotted(descope-icon)' },
@@ -3445,9 +3515,9 @@ const ButtonClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
-      hostMaxWidth: { ...host$E, property: 'max-width' },
+      hostMaxWidth: { ...host$F, property: 'max-width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$E, property: 'direction' },
+      hostDirection: { ...host$F, property: 'direction' },
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
@@ -3516,7 +3586,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1r,
+    componentName: componentName$1s,
   }),
 );
 
@@ -3566,7 +3636,7 @@ const mode = {
 
 const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
   { mode },
-  componentName$1r,
+  componentName$1s,
 );
 
 const button = {
@@ -3686,7 +3756,7 @@ const button = {
   },
 };
 
-const vars$1b = {
+const vars$1c = {
   ...compVars$9,
   ...helperVars$6,
 };
@@ -3694,13 +3764,13 @@ const vars$1b = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$1b
+  vars: vars$1c
 });
 
-const componentName$1q = getComponentName('text');
+const componentName$1r = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1q,
+  componentName: componentName$1r,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -3739,15 +3809,15 @@ class RawText extends createBaseClass$1({
   }
 }
 
-const { host: host$D } = {
+const { host: host$E } = {
   host: { selector: () => ':host' },
 };
 
 const TextClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$D, property: 'width' },
-      hostDirection: { ...host$D, property: 'direction' },
+      hostWidth: { ...host$E, property: 'width' },
+      hostDirection: { ...host$E, property: 'direction' },
       fontSize: {},
       textColor: [{ property: 'color' }],
       textLineHeight: { property: 'line-height' },
@@ -3769,106 +3839,106 @@ const TextClass = compose(
 )(RawText);
 
 const globalRefs$J = getThemeRefs$1(globals);
-const vars$1a = TextClass.cssVarList;
+const vars$1b = TextClass.cssVarList;
 
 const text$3 = {
-  [vars$1a.hostDirection]: globalRefs$J.direction,
-  [vars$1a.textLineHeight]: '1.35em',
-  [vars$1a.textAlign]: 'start',
-  [vars$1a.textColor]: globalRefs$J.colors.surface.dark,
+  [vars$1b.hostDirection]: globalRefs$J.direction,
+  [vars$1b.textLineHeight]: '1.35em',
+  [vars$1b.textAlign]: 'start',
+  [vars$1b.textColor]: globalRefs$J.colors.surface.dark,
 
   variant: {
     h1: {
-      [vars$1a.fontSize]: globalRefs$J.typography.h1.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.h1.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.h1.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.h1.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.h1.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.h1.font,
     },
     h2: {
-      [vars$1a.fontSize]: globalRefs$J.typography.h2.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.h2.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.h2.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.h2.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.h2.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.h2.font,
     },
     h3: {
-      [vars$1a.fontSize]: globalRefs$J.typography.h3.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.h3.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.h3.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.h3.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.h3.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.h3.font,
     },
     subtitle1: {
-      [vars$1a.fontSize]: globalRefs$J.typography.subtitle1.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.subtitle1.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.subtitle1.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.subtitle1.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.subtitle1.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$1a.fontSize]: globalRefs$J.typography.subtitle2.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.subtitle2.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.subtitle2.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.subtitle2.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.subtitle2.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.subtitle2.font,
     },
     body1: {
-      [vars$1a.fontSize]: globalRefs$J.typography.body1.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.body1.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.body1.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.body1.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.body1.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.body1.font,
     },
     body2: {
-      [vars$1a.fontSize]: globalRefs$J.typography.body2.size,
-      [vars$1a.fontWeight]: globalRefs$J.typography.body2.weight,
-      [vars$1a.fontFamily]: globalRefs$J.typography.body2.font,
+      [vars$1b.fontSize]: globalRefs$J.typography.body2.size,
+      [vars$1b.fontWeight]: globalRefs$J.typography.body2.weight,
+      [vars$1b.fontFamily]: globalRefs$J.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$1a.textColor]: globalRefs$J.colors.surface.contrast,
+      [vars$1b.textColor]: globalRefs$J.colors.surface.contrast,
     },
     secondary: {
-      [vars$1a.textColor]: globalRefs$J.colors.surface.dark,
+      [vars$1b.textColor]: globalRefs$J.colors.surface.dark,
     },
     error: {
-      [vars$1a.textColor]: globalRefs$J.colors.error.main,
+      [vars$1b.textColor]: globalRefs$J.colors.error.main,
     },
     'error-dark': {
-      [vars$1a.textColor]: globalRefs$J.colors.error.dark,
+      [vars$1b.textColor]: globalRefs$J.colors.error.dark,
     },
     success: {
-      [vars$1a.textColor]: globalRefs$J.colors.success.main,
+      [vars$1b.textColor]: globalRefs$J.colors.success.main,
     },
     'success-dark': {
-      [vars$1a.textColor]: globalRefs$J.colors.success.dark,
+      [vars$1b.textColor]: globalRefs$J.colors.success.dark,
     },
     warning: {
-      [vars$1a.textColor]: globalRefs$J.colors.warning.main,
+      [vars$1b.textColor]: globalRefs$J.colors.warning.main,
     },
     'warning-dark': {
-      [vars$1a.textColor]: globalRefs$J.colors.warning.dark,
+      [vars$1b.textColor]: globalRefs$J.colors.warning.dark,
     },
   },
 
   textAlign: {
-    right: { [vars$1a.textAlign]: 'right' },
-    left: { [vars$1a.textAlign]: 'left' },
-    center: { [vars$1a.textAlign]: 'center' },
+    right: { [vars$1b.textAlign]: 'right' },
+    left: { [vars$1b.textAlign]: 'left' },
+    center: { [vars$1b.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$1a.hostWidth]: '100%',
+    [vars$1b.hostWidth]: '100%',
   },
 
   _italic: {
-    [vars$1a.fontStyle]: 'italic',
+    [vars$1b.fontStyle]: 'italic',
   },
 
   _uppercase: {
-    [vars$1a.textTransform]: 'uppercase',
+    [vars$1b.textTransform]: 'uppercase',
   },
 
   _lowercase: {
-    [vars$1a.textTransform]: 'lowercase',
+    [vars$1b.textTransform]: 'lowercase',
   },
 };
 
 var text$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$3,
-  vars: vars$1a
+  vars: vars$1b
 });
 
 const disableRules = [
@@ -3892,10 +3962,10 @@ const decodeHTML = (html) => {
   return textArea.value;
 };
 
-const componentName$1p = getComponentName('enriched-text');
+const componentName$1q = getComponentName('enriched-text');
 
 class EnrichedText extends createBaseClass$1({
-  componentName: componentName$1p,
+  componentName: componentName$1q,
   baseSelector: ':host > div',
 }) {
   #origLinkRenderer;
@@ -4139,12 +4209,12 @@ const EnrichedTextClass = compose(
   componentNameValidationMixin$1,
 )(EnrichedText);
 
-const componentName$1o = getComponentName('link');
+const componentName$1p = getComponentName('link');
 
 const observedAttrs$8 = ['href', 'readonly'];
 
 class RawLink extends createBaseClass$1({
-  componentName: componentName$1o,
+  componentName: componentName$1p,
   baseSelector: ':host a',
 }) {
   static get observedAttributes() {
@@ -4219,12 +4289,12 @@ const selectors$3 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$C, wrapper: wrapper$1, link: link$3 } = selectors$3;
+const { anchor, text: text$2, host: host$D, wrapper: wrapper$1, link: link$3 } = selectors$3;
 
 const LinkClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$C, property: 'width' },
+      hostWidth: { ...host$D, property: 'width' },
       hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textDecoration: {
@@ -4245,31 +4315,31 @@ const LinkClass = compose(
 )(RawLink);
 
 const globalRefs$I = getThemeRefs$1(globals);
-const vars$19 = LinkClass.cssVarList;
+const vars$1a = LinkClass.cssVarList;
 
 const link$1 = {
-  [vars$19.hostDirection]: globalRefs$I.direction,
-  [vars$19.cursor]: 'pointer',
+  [vars$1a.hostDirection]: globalRefs$I.direction,
+  [vars$1a.cursor]: 'pointer',
 
-  [vars$19.textColor]: globalRefs$I.colors.primary.main,
+  [vars$1a.textColor]: globalRefs$I.colors.primary.main,
 
   textAlign: {
-    right: { [vars$19.textAlign]: 'right' },
-    left: { [vars$19.textAlign]: 'left' },
-    center: { [vars$19.textAlign]: 'center' },
+    right: { [vars$1a.textAlign]: 'right' },
+    left: { [vars$1a.textAlign]: 'left' },
+    center: { [vars$1a.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$19.hostWidth]: '100%',
+    [vars$1a.hostWidth]: '100%',
   },
 
   _hover: {
-    [vars$19.textDecoration]: 'underline',
+    [vars$1a.textDecoration]: 'underline',
   },
 
   mode: {
     secondary: {
-      [vars$19.textColor]: globalRefs$I.colors.secondary.main,
+      [vars$1a.textColor]: globalRefs$I.colors.secondary.main,
     },
   },
 };
@@ -4277,37 +4347,37 @@ const link$1 = {
 var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link$1,
-  vars: vars$19
+  vars: vars$1a
 });
 
 const globalRefs$H = getThemeRefs$1(globals);
-const vars$18 = EnrichedTextClass.cssVarList;
+const vars$19 = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
-  [vars$18.hostDirection]: globalRefs$H.direction,
-  [vars$18.hostWidth]: useVar$1(vars$1a.hostWidth),
+  [vars$19.hostDirection]: globalRefs$H.direction,
+  [vars$19.hostWidth]: useVar$1(vars$1b.hostWidth),
 
-  [vars$18.textLineHeight]: useVar$1(vars$1a.textLineHeight),
-  [vars$18.textColor]: useVar$1(vars$1a.textColor),
-  [vars$18.textAlign]: useVar$1(vars$1a.textAlign),
+  [vars$19.textLineHeight]: useVar$1(vars$1b.textLineHeight),
+  [vars$19.textColor]: useVar$1(vars$1b.textColor),
+  [vars$19.textAlign]: useVar$1(vars$1b.textAlign),
 
-  [vars$18.fontSize]: useVar$1(vars$1a.fontSize),
-  [vars$18.fontWeight]: useVar$1(vars$1a.fontWeight),
-  [vars$18.fontFamily]: useVar$1(vars$1a.fontFamily),
+  [vars$19.fontSize]: useVar$1(vars$1b.fontSize),
+  [vars$19.fontWeight]: useVar$1(vars$1b.fontWeight),
+  [vars$19.fontFamily]: useVar$1(vars$1b.fontFamily),
 
-  [vars$18.linkColor]: useVar$1(vars$19.textColor),
-  [vars$18.linkTextDecoration]: 'none',
-  [vars$18.linkHoverTextDecoration]: 'underline',
+  [vars$19.linkColor]: useVar$1(vars$1a.textColor),
+  [vars$19.linkTextDecoration]: 'none',
+  [vars$19.linkHoverTextDecoration]: 'underline',
 
-  [vars$18.fontWeightBold]: '900',
-  [vars$18.minWidth]: '0.25em',
-  [vars$18.minHeight]: '1.35em',
+  [vars$19.fontWeightBold]: '900',
+  [vars$19.minWidth]: '0.25em',
+  [vars$19.minHeight]: '1.35em',
 
-  [vars$18.hostDisplay]: 'inline-block',
+  [vars$19.hostDisplay]: 'inline-block',
 
   _empty: {
     _hideWhenEmpty: {
-      [vars$18.hostDisplay]: 'none',
+      [vars$19.hostDisplay]: 'none',
     },
   },
 };
@@ -4315,10 +4385,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$18
+  vars: vars$19
 });
 
-const componentName$1n = getComponentName('combo-box');
+const componentName$1o = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4705,7 +4775,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$B,
+  host: host$C,
   inputField: inputField$6,
   inputElement: inputElement$3,
   placeholder: placeholder$3,
@@ -4737,10 +4807,10 @@ const {
 const ComboBoxClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$B, property: 'width' },
-      hostDirection: { ...host$B, property: 'direction' },
+      hostWidth: { ...host$C, property: 'width' },
+      hostDirection: { ...host$C, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$B],
+      fontSize: [{}, host$C],
       fontFamily: [label$9, placeholder$3, inputField$6, helperText$a, errorMessage$d],
       labelFontSize: { ...label$9, property: 'font-size' },
       labelFontWeight: { ...label$9, property: 'font-weight' },
@@ -5015,12 +5085,12 @@ const ComboBoxClass = compose(
       'loading',
       'style',
     ],
-    componentName: componentName$1n,
+    componentName: componentName$1o,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-const componentName$1m = getComponentName('input-wrapper');
+const componentName$1n = getComponentName('input-wrapper');
 const globalRefs$G = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
@@ -5150,120 +5220,120 @@ const [theme$2, refs$1] = createHelperVars$1(
       inputTextSecurity: 'disc',
     },
   },
-  componentName$1m,
+  componentName$1n,
 );
 
 const globalRefs$F = getThemeRefs$1(globals);
-const vars$17 = ComboBoxClass.cssVarList;
-
-const comboBox = {
-  [vars$17.hostWidth]: refs$1.width,
-  [vars$17.hostDirection]: refs$1.direction,
-  [vars$17.fontSize]: refs$1.fontSize,
-  [vars$17.fontFamily]: refs$1.fontFamily,
-  [vars$17.labelFontSize]: refs$1.labelFontSize,
-  [vars$17.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$17.inputValueFontWeight]: refs$1.inputValueFontWeight,
-  [vars$17.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-  [vars$17.helperTextFontWeight]: refs$1.helperTextFontWeight,
-  [vars$17.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-  [vars$17.labelTextColor]: refs$1.labelTextColor,
-  [vars$17.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$17.inputBorderColor]: refs$1.borderColor,
-  [vars$17.inputBorderWidth]: refs$1.borderWidth,
-  [vars$17.inputBorderStyle]: refs$1.borderStyle,
-  [vars$17.inputBorderRadius]: refs$1.borderRadius,
-  [vars$17.inputOutlineColor]: refs$1.outlineColor,
-  [vars$17.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$17.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$17.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$17.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$17.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$17.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$17.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$17.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$17.inputHeight]: refs$1.inputHeight,
-  [vars$17.inputDropdownButtonColor]: globalRefs$F.colors.surface.dark,
-  [vars$17.inputDropdownButtonCursor]: 'pointer',
-  [vars$17.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$17.inputDropdownButtonOffset]: globalRefs$F.spacing.xs,
-  [vars$17.overlayItemPaddingInlineStart]: globalRefs$F.spacing.xs,
-  [vars$17.overlayItemPaddingInlineEnd]: globalRefs$F.spacing.lg,
-  [vars$17.labelPosition]: refs$1.labelPosition,
-  [vars$17.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$17.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$17.inputTransformY]: refs$1.inputTransformY,
-  [vars$17.inputTransition]: refs$1.inputTransition,
-  [vars$17.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$17.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$17.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-  [vars$17.valueInputHeight]: refs$1.valueInputHeight,
-  [vars$17.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+const vars$18 = ComboBoxClass.cssVarList;
+
+const comboBox$1 = {
+  [vars$18.hostWidth]: refs$1.width,
+  [vars$18.hostDirection]: refs$1.direction,
+  [vars$18.fontSize]: refs$1.fontSize,
+  [vars$18.fontFamily]: refs$1.fontFamily,
+  [vars$18.labelFontSize]: refs$1.labelFontSize,
+  [vars$18.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$18.inputValueFontWeight]: refs$1.inputValueFontWeight,
+  [vars$18.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+  [vars$18.helperTextFontWeight]: refs$1.helperTextFontWeight,
+  [vars$18.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$18.labelTextColor]: refs$1.labelTextColor,
+  [vars$18.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$18.inputBorderColor]: refs$1.borderColor,
+  [vars$18.inputBorderWidth]: refs$1.borderWidth,
+  [vars$18.inputBorderStyle]: refs$1.borderStyle,
+  [vars$18.inputBorderRadius]: refs$1.borderRadius,
+  [vars$18.inputOutlineColor]: refs$1.outlineColor,
+  [vars$18.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$18.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$18.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$18.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$18.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$18.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$18.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$18.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$18.inputHeight]: refs$1.inputHeight,
+  [vars$18.inputDropdownButtonColor]: globalRefs$F.colors.surface.dark,
+  [vars$18.inputDropdownButtonCursor]: 'pointer',
+  [vars$18.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$18.inputDropdownButtonOffset]: globalRefs$F.spacing.xs,
+  [vars$18.overlayItemPaddingInlineStart]: globalRefs$F.spacing.xs,
+  [vars$18.overlayItemPaddingInlineEnd]: globalRefs$F.spacing.lg,
+  [vars$18.labelPosition]: refs$1.labelPosition,
+  [vars$18.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$18.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$18.inputTransformY]: refs$1.inputTransformY,
+  [vars$18.inputTransition]: refs$1.inputTransition,
+  [vars$18.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$18.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$18.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+  [vars$18.valueInputHeight]: refs$1.valueInputHeight,
+  [vars$18.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
   // error message icon
-  [vars$17.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$17.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$17.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$17.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$17.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$17.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$18.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$18.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$18.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$18.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$18.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$18.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _readonly: {
-    [vars$17.inputDropdownButtonCursor]: 'default',
+    [vars$18.inputDropdownButtonCursor]: 'default',
   },
 
   // Overlay theme exposed via the component:
-  [vars$17.overlayFontSize]: refs$1.fontSize,
-  [vars$17.overlayFontFamily]: refs$1.fontFamily,
-  [vars$17.overlayCursor]: 'pointer',
-  [vars$17.overlayItemBoxShadow]: 'none',
-  [vars$17.overlayBackground]: refs$1.backgroundColor,
-  [vars$17.overlayTextColor]: refs$1.valueTextColor,
-  [vars$17.overlayCheckmarkDisplay]: 'initial',
-  [vars$17.overlaySelectedItemBackground]: 'initial',
-  [vars$17.overlaySelectedItemHoverBackground]:
+  [vars$18.overlayFontSize]: refs$1.fontSize,
+  [vars$18.overlayFontFamily]: refs$1.fontFamily,
+  [vars$18.overlayCursor]: 'pointer',
+  [vars$18.overlayItemBoxShadow]: 'none',
+  [vars$18.overlayBackground]: refs$1.backgroundColor,
+  [vars$18.overlayTextColor]: refs$1.valueTextColor,
+  [vars$18.overlayCheckmarkDisplay]: 'initial',
+  [vars$18.overlaySelectedItemBackground]: 'initial',
+  [vars$18.overlaySelectedItemHoverBackground]:
     globalRefs$F.colors.primary.highlight,
-  [vars$17.overlaySelectedItemFocusBackground]:
+  [vars$18.overlaySelectedItemFocusBackground]:
     globalRefs$F.colors.primary.highlight,
-  [vars$17.overlayItemHoverBackground]: globalRefs$F.colors.primary.highlight,
-  [vars$17.overlayItemFocusBackground]: globalRefs$F.colors.primary.highlight,
+  [vars$18.overlayItemHoverBackground]: globalRefs$F.colors.primary.highlight,
+  [vars$18.overlayItemFocusBackground]: globalRefs$F.colors.primary.highlight,
 
   // Overlay direct theme:
-  [vars$17.overlay.margin]: '0',
+  [vars$18.overlay.margin]: '0',
 
-  [vars$17.overlay.contentHeight]: '100%',
-  [vars$17.overlay.contentOpacity]: '1',
-  [vars$17.overlay.scrollerMinHeight]: '1px',
+  [vars$18.overlay.contentHeight]: '100%',
+  [vars$18.overlay.contentOpacity]: '1',
+  [vars$18.overlay.scrollerMinHeight]: '1px',
   _loading: {
-    [vars$17.overlay.loaderTop]: '50%',
-    [vars$17.overlay.loaderLeft]: '50%',
-    [vars$17.overlay.loaderRight]: 'auto',
+    [vars$18.overlay.loaderTop]: '50%',
+    [vars$18.overlay.loaderLeft]: '50%',
+    [vars$18.overlay.loaderRight]: 'auto',
     // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
     // Margin has to be half of the width/height of the loader to center it
-    [vars$17.overlay.loaderMargin]: '-15px 0 0 -15px',
-    [vars$17.overlay.loaderWidth]: '30px',
-    [vars$17.overlay.loaderHeight]: '30px',
-    [vars$17.overlay.loaderBorder]: '2px solid transparent',
-    [vars$17.overlay.loaderBorderColor]:
+    [vars$18.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars$18.overlay.loaderWidth]: '30px',
+    [vars$18.overlay.loaderHeight]: '30px',
+    [vars$18.overlay.loaderBorder]: '2px solid transparent',
+    [vars$18.overlay.loaderBorderColor]:
       `${globalRefs$F.colors.primary.highlight} ${globalRefs$F.colors.primary.highlight} ${globalRefs$F.colors.primary.main} ${globalRefs$F.colors.primary.main}`,
-    [vars$17.overlay.loaderBorderRadius]: '50%',
-    [vars$17.overlay.contentHeight]: '100px',
-    [vars$17.overlay.scrollerMinHeight]: '100px',
-    [vars$17.overlay.contentOpacity]: '0',
+    [vars$18.overlay.loaderBorderRadius]: '50%',
+    [vars$18.overlay.contentHeight]: '100px',
+    [vars$18.overlay.scrollerMinHeight]: '100px',
+    [vars$18.overlay.contentOpacity]: '0',
   },
 };
 
-var comboBox$1 = /*#__PURE__*/Object.freeze({
+var comboBox$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  comboBox: comboBox,
-  default: comboBox,
-  vars: vars$17
+  comboBox: comboBox$1,
+  default: comboBox$1,
+  vars: vars$18
 });
 
-const componentName$1l = getComponentName('badge');
+const componentName$1m = getComponentName('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$1l,
+  componentName: componentName$1m,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -5359,46 +5429,46 @@ const [helperTheme$6, helperRefs$6] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$1l,
+  componentName$1m,
 );
 
 const { shadowColor: shadowColor$8 } = helperRefs$6;
 
-const vars$16 = BadgeClass.cssVarList;
+const vars$17 = BadgeClass.cssVarList;
 
 const badge$2 = {
   ...helperTheme$6,
 
-  [vars$16.hostWidth]: 'fit-content',
-  [vars$16.hostDirection]: globalRefs$E.direction,
+  [vars$17.hostWidth]: 'fit-content',
+  [vars$17.hostDirection]: globalRefs$E.direction,
 
-  [vars$16.textAlign]: 'center',
+  [vars$17.textAlign]: 'center',
 
-  [vars$16.fontFamily]: globalRefs$E.fonts.font1.family,
-  [vars$16.fontWeight]: '400',
+  [vars$17.fontFamily]: globalRefs$E.fonts.font1.family,
+  [vars$17.fontWeight]: '400',
 
-  [vars$16.verticalPadding]: '0.25em',
-  [vars$16.horizontalPadding]: '0.5em',
+  [vars$17.verticalPadding]: '0.25em',
+  [vars$17.horizontalPadding]: '0.5em',
 
-  [vars$16.borderWidth]: globalRefs$E.border.xs,
-  [vars$16.borderRadius]: globalRefs$E.radius.xs,
-  [vars$16.borderColor]: 'transparent',
-  [vars$16.borderStyle]: 'solid',
+  [vars$17.borderWidth]: globalRefs$E.border.xs,
+  [vars$17.borderRadius]: globalRefs$E.radius.xs,
+  [vars$17.borderColor]: 'transparent',
+  [vars$17.borderStyle]: 'solid',
 
   _fullWidth: {
-    [vars$16.hostWidth]: '100%',
+    [vars$17.hostWidth]: '100%',
   },
 
   size: {
-    xs: { [vars$16.fontSize]: '12px' },
-    sm: { [vars$16.fontSize]: '14px' },
-    md: { [vars$16.fontSize]: '16px' },
-    lg: { [vars$16.fontSize]: '18px' },
+    xs: { [vars$17.fontSize]: '12px' },
+    sm: { [vars$17.fontSize]: '14px' },
+    md: { [vars$17.fontSize]: '16px' },
+    lg: { [vars$17.fontSize]: '18px' },
   },
 
   variant: {
     contained: {
-      [vars$16.backgroundColor]: globalRefs$E.colors.surface.main,
+      [vars$17.backgroundColor]: globalRefs$E.colors.surface.main,
     },
   },
 
@@ -5417,58 +5487,58 @@ const badge$2 = {
   // },
 
   _shrinkToIndicator: {
-    [vars$16.hostWidth]: '13px',
-    [vars$16.hostHeight]: '13px',
-    [vars$16.borderRadius]: '50%',
-    [vars$16.fontSize]: '0',
-    [vars$16.textIndent]: '-9999px',
+    [vars$17.hostWidth]: '13px',
+    [vars$17.hostHeight]: '13px',
+    [vars$17.borderRadius]: '50%',
+    [vars$17.fontSize]: '0',
+    [vars$17.textIndent]: '-9999px',
   },
 
   mode: {
     default: {
-      [vars$16.textColor]: globalRefs$E.colors.surface.dark,
+      [vars$17.textColor]: globalRefs$E.colors.surface.dark,
       _bordered: {
-        [vars$16.borderColor]: globalRefs$E.colors.surface.light,
+        [vars$17.borderColor]: globalRefs$E.colors.surface.light,
       },
     },
     primary: {
-      [vars$16.textColor]: globalRefs$E.colors.primary.main,
+      [vars$17.textColor]: globalRefs$E.colors.primary.main,
       _bordered: {
-        [vars$16.borderColor]: globalRefs$E.colors.primary.light,
+        [vars$17.borderColor]: globalRefs$E.colors.primary.light,
       },
     },
     secondary: {
-      [vars$16.textColor]: globalRefs$E.colors.secondary.main,
+      [vars$17.textColor]: globalRefs$E.colors.secondary.main,
       _bordered: {
-        [vars$16.borderColor]: globalRefs$E.colors.secondary.light,
+        [vars$17.borderColor]: globalRefs$E.colors.secondary.light,
       },
     },
     error: {
-      [vars$16.textColor]: globalRefs$E.colors.error.main,
+      [vars$17.textColor]: globalRefs$E.colors.error.main,
       _bordered: {
-        [vars$16.borderColor]: globalRefs$E.colors.error.light,
+        [vars$17.borderColor]: globalRefs$E.colors.error.light,
       },
     },
     success: {
-      [vars$16.textColor]: globalRefs$E.colors.success.main,
+      [vars$17.textColor]: globalRefs$E.colors.success.main,
       _bordered: {
-        [vars$16.borderColor]: globalRefs$E.colors.success.light,
+        [vars$17.borderColor]: globalRefs$E.colors.success.light,
       },
     },
   },
 
   shadow: {
     sm: {
-      [vars$16.boxShadow]: `${globalRefs$E.shadow.wide.sm} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.sm} ${shadowColor$8}`,
+      [vars$17.boxShadow]: `${globalRefs$E.shadow.wide.sm} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.sm} ${shadowColor$8}`,
     },
     md: {
-      [vars$16.boxShadow]: `${globalRefs$E.shadow.wide.md} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.md} ${shadowColor$8}`,
+      [vars$17.boxShadow]: `${globalRefs$E.shadow.wide.md} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.md} ${shadowColor$8}`,
     },
     lg: {
-      [vars$16.boxShadow]: `${globalRefs$E.shadow.wide.lg} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.lg} ${shadowColor$8}`,
+      [vars$17.boxShadow]: `${globalRefs$E.shadow.wide.lg} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.lg} ${shadowColor$8}`,
     },
     xl: {
-      [vars$16.boxShadow]: `${globalRefs$E.shadow.wide.xl} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.xl} ${shadowColor$8}`,
+      [vars$17.boxShadow]: `${globalRefs$E.shadow.wide.xl} ${shadowColor$8}, ${globalRefs$E.shadow.narrow.xl} ${shadowColor$8}`,
     },
   },
 };
@@ -5476,12 +5546,12 @@ const badge$2 = {
 var badge$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge$2,
-  vars: vars$16
+  vars: vars$17
 });
 
-const componentName$1k = getComponentName('avatar');
+const componentName$1l = getComponentName('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$1k,
+  componentName: componentName$1l,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -5559,7 +5629,7 @@ class RawAvatar extends createBaseClass$1({
   }
 }
 
-const { host: host$A, editableBadge, avatar: avatar$2 } = {
+const { host: host$B, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -5569,12 +5639,12 @@ const AvatarClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$A, property: 'width' },
-        { ...host$A, property: 'min-width' },
+        { ...host$B, property: 'width' },
+        { ...host$B, property: 'min-width' },
       ],
-      hostHeight: { ...host$A, property: 'height' },
-      cursor: [avatar$2, host$A],
-      hostDirection: { ...host$A, property: 'direction' },
+      hostHeight: { ...host$B, property: 'height' },
+      cursor: [avatar$2, host$B],
+      hostDirection: { ...host$B, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -5632,39 +5702,39 @@ const avatar = {
   },
 };
 
-const vars$15 = {
+const vars$16 = {
   ...compVars$8,
 };
 
 var avatar$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: avatar,
-  vars: vars$15
+  vars: vars$16
 });
 
-const vars$14 = IconClass.cssVarList;
+const vars$15 = IconClass.cssVarList;
 
 const icon$3 = {};
 
 var icon$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$3,
-  vars: vars$14
+  vars: vars$15
 });
 
-const vars$13 = ImageClass.cssVarList;
+const vars$14 = ImageClass.cssVarList;
 
 const image = {};
 
 var image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: image,
-  vars: vars$13
+  vars: vars$14
 });
 
-const componentName$1j = getComponentName('list-item');
+const componentName$1k = getComponentName('list-item');
 
-const customMixin$f = (superclass) =>
+const customMixin$g = (superclass) =>
   class ListItemMixinClass extends superclass {
     constructor() {
       super();
@@ -5717,14 +5787,14 @@ const ListItemClass = compose(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$f,
+  customMixin$g,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$1j, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$1k, baseSelector: 'slot' }));
 
-const componentName$1i = getComponentName('list');
+const componentName$1j = getComponentName('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$1i,
+  componentName: componentName$1j,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -5906,7 +5976,7 @@ const ListClass = compose(
   componentNameValidationMixin$1,
 )(RawList);
 
-const componentName$1h = getComponentName('apps-list');
+const componentName$1i = getComponentName('apps-list');
 
 const itemRenderer$6 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -5926,7 +5996,7 @@ const itemRenderer$6 = ({ name, icon, url }, _, ref) => `
   </a>
 `;
 
-const customMixin$e = (superclass) =>
+const customMixin$f = (superclass) =>
   class AppsListMixinClass extends superclass {
     // size controls both item logo size and font size
     get size() {
@@ -6032,13 +6102,13 @@ const AppsListClass = compose(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$e,
+  customMixin$f,
 )(
   createProxy$1({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$1h,
+    componentName: componentName$1i,
     style: () => `
       :host {
         width: 100%;
@@ -6073,60 +6143,60 @@ const AppsListClass = compose(
   }),
 );
 
-const vars$12 = AppsListClass.cssVarList;
+const vars$13 = AppsListClass.cssVarList;
 const globalRefs$C = getThemeRefs$1(globals);
 
 const defaultHeight = '400px';
 
 const appsList = {
-  [vars$12.itemsTextAlign]: 'start',
-  [vars$12.hostDirection]: globalRefs$C.direction,
-  [vars$12.maxHeight]: defaultHeight,
-  [vars$12.itemHoverBackgroundColor]: globalRefs$C.colors.surface.highlight,
+  [vars$13.itemsTextAlign]: 'start',
+  [vars$13.hostDirection]: globalRefs$C.direction,
+  [vars$13.maxHeight]: defaultHeight,
+  [vars$13.itemHoverBackgroundColor]: globalRefs$C.colors.surface.highlight,
 
   _empty: {
-    [vars$12.minHeight]: defaultHeight,
+    [vars$13.minHeight]: defaultHeight,
   },
 
   size: {
     xs: {
-      [vars$12.itemsFontSize]: '14px',
-      [vars$12.itemsFontWeight]: 'normal',
+      [vars$13.itemsFontSize]: '14px',
+      [vars$13.itemsFontWeight]: 'normal',
     },
     sm: {
-      [vars$12.itemsFontSize]: '14px',
-      [vars$12.itemsFontWeight]: 'normal',
+      [vars$13.itemsFontSize]: '14px',
+      [vars$13.itemsFontWeight]: 'normal',
     },
     md: {
-      [vars$12.itemsFontSize]: '16px',
-      [vars$12.itemsFontWeight]: 'normal',
+      [vars$13.itemsFontSize]: '16px',
+      [vars$13.itemsFontWeight]: 'normal',
     },
     lg: {
-      [vars$12.itemsFontSize]: '20px',
-      [vars$12.itemsFontWeight]: 'normal',
+      [vars$13.itemsFontSize]: '20px',
+      [vars$13.itemsFontWeight]: 'normal',
     },
   },
 
   itemPadding: {
     xs: {
-      [vars$12.itemVerticalPadding]: globalRefs$C.spacing.xs,
-      [vars$12.itemHorizontalPadding]: globalRefs$C.spacing.xs,
+      [vars$13.itemVerticalPadding]: globalRefs$C.spacing.xs,
+      [vars$13.itemHorizontalPadding]: globalRefs$C.spacing.xs,
     },
     sm: {
-      [vars$12.itemVerticalPadding]: globalRefs$C.spacing.sm,
-      [vars$12.itemHorizontalPadding]: globalRefs$C.spacing.sm,
+      [vars$13.itemVerticalPadding]: globalRefs$C.spacing.sm,
+      [vars$13.itemHorizontalPadding]: globalRefs$C.spacing.sm,
     },
     md: {
-      [vars$12.itemVerticalPadding]: globalRefs$C.spacing.md,
-      [vars$12.itemHorizontalPadding]: globalRefs$C.spacing.md,
+      [vars$13.itemVerticalPadding]: globalRefs$C.spacing.md,
+      [vars$13.itemHorizontalPadding]: globalRefs$C.spacing.md,
     },
     lg: {
-      [vars$12.itemVerticalPadding]: globalRefs$C.spacing.lg,
-      [vars$12.itemHorizontalPadding]: globalRefs$C.spacing.lg,
+      [vars$13.itemVerticalPadding]: globalRefs$C.spacing.lg,
+      [vars$13.itemHorizontalPadding]: globalRefs$C.spacing.lg,
     },
     xl: {
-      [vars$12.itemVerticalPadding]: globalRefs$C.spacing.xl,
-      [vars$12.itemHorizontalPadding]: globalRefs$C.spacing.xl,
+      [vars$13.itemVerticalPadding]: globalRefs$C.spacing.xl,
+      [vars$13.itemHorizontalPadding]: globalRefs$C.spacing.xl,
     },
   },
 };
@@ -6134,7 +6204,7 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$12
+  vars: vars$13
 });
 
 const globalRefs$B = getThemeRefs$1(globals);
@@ -6143,7 +6213,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$1i,
+  componentName$1j,
 );
 
 const { shadowColor: shadowColor$7 } = helperRefs$5;
@@ -6204,7 +6274,7 @@ const list = {
   },
 };
 
-const vars$11 = {
+const vars$12 = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -6212,53 +6282,53 @@ const vars$11 = {
 var list$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: list,
-  vars: vars$11
+  vars: vars$12
 });
 
 const globalRefs$A = getThemeRefs$1(globals);
 
-const vars$10 = ListItemClass.cssVarList;
+const vars$11 = ListItemClass.cssVarList;
 
 const listItem = {
-  [vars$10.backgroundColor]: globalRefs$A.colors.surface.main,
-  [vars$10.verticalPadding]: globalRefs$A.spacing.lg,
-  [vars$10.horizontalPadding]: globalRefs$A.spacing.lg,
-  [vars$10.gap]: globalRefs$A.spacing.md,
-  [vars$10.borderStyle]: 'solid',
-  [vars$10.borderWidth]: globalRefs$A.border.xs,
-  [vars$10.borderColor]: globalRefs$A.colors.surface.main,
-  [vars$10.borderRadius]: globalRefs$A.radius.sm,
-  [vars$10.cursor]: 'pointer',
-  [vars$10.alignItems]: 'center',
-  [vars$10.flexDirection]: 'row',
-  [vars$10.transition]: 'border-color 0.2s, background-color 0.2s',
+  [vars$11.backgroundColor]: globalRefs$A.colors.surface.main,
+  [vars$11.verticalPadding]: globalRefs$A.spacing.lg,
+  [vars$11.horizontalPadding]: globalRefs$A.spacing.lg,
+  [vars$11.gap]: globalRefs$A.spacing.md,
+  [vars$11.borderStyle]: 'solid',
+  [vars$11.borderWidth]: globalRefs$A.border.xs,
+  [vars$11.borderColor]: globalRefs$A.colors.surface.main,
+  [vars$11.borderRadius]: globalRefs$A.radius.sm,
+  [vars$11.cursor]: 'pointer',
+  [vars$11.alignItems]: 'center',
+  [vars$11.flexDirection]: 'row',
+  [vars$11.transition]: 'border-color 0.2s, background-color 0.2s',
 
   variant: {
     tile: {
-      [vars$10.alignItems]: 'flex-start',
-      [vars$10.flexDirection]: 'column',
-      [vars$10.borderColor]: globalRefs$A.colors.surface.light,
+      [vars$11.alignItems]: 'flex-start',
+      [vars$11.flexDirection]: 'column',
+      [vars$11.borderColor]: globalRefs$A.colors.surface.light,
     },
   },
 
   _hover: {
-    [vars$10.backgroundColor]: globalRefs$A.colors.surface.highlight,
+    [vars$11.backgroundColor]: globalRefs$A.colors.surface.highlight,
   },
 
   _active: {
-    [vars$10.backgroundColor]: globalRefs$A.colors.surface.main,
-    [vars$10.borderColor]: globalRefs$A.colors.primary.light,
-    [vars$10.outline]: `1px solid ${globalRefs$A.colors.primary.light}`,
+    [vars$11.backgroundColor]: globalRefs$A.colors.surface.main,
+    [vars$11.borderColor]: globalRefs$A.colors.primary.light,
+    [vars$11.outline]: `1px solid ${globalRefs$A.colors.primary.light}`,
   },
 };
 
 var listItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: listItem,
-  vars: vars$10
+  vars: vars$11
 });
 
-const componentName$1g = getComponentName('multi-select-combo-box');
+const componentName$1h = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -6366,9 +6436,35 @@ const multiSelectComboBoxMixin = (superclass) =>
       );
     }
 
+    // Whether `data` is what this combo box builds its items from. Items can instead be given as
+    // light DOM children (see the observeChildren call in init), and those are the consumer's to
+    // manage - so an absent, empty or unparseable `data` attribute means "not my items".
+    #hasDataSource() {
+      if (this.#data) return true;
+
+      const dataAttr = this.getAttribute('data');
+      if (!dataAttr) return false;
+
+      try {
+        return Array.isArray(JSON.parse(dataAttr));
+      } catch {
+        // Already reported by the `data` getter, and a broken attribute is no reason to throw
+        // away items that are on screen.
+        return false;
+      }
+    }
+
     renderItems() {
       const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
+      if (template) {
+        this.innerHTML = template;
+        return;
+      }
+
+      // An empty list has to empty the dropdown. Without this the previous items stayed on screen
+      // after the data said there were none, so a picker refreshed with nothing left would still
+      // offer the old rows.
+      if (this.#hasDataSource()) this.innerHTML = '';
     }
 
     updateSelectedItems() {
@@ -6637,7 +6733,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$z,
+  host: host$A,
   inputField: inputField$5,
   inputElement: inputElement$2,
   placeholder: placeholder$2,
@@ -6677,9 +6773,9 @@ const {
 const MultiSelectComboBoxClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$z, property: 'width' },
-      hostDirection: { ...host$z, property: 'direction' },
-      fontSize: [{}, host$z],
+      hostWidth: { ...host$A, property: 'width' },
+      hostDirection: { ...host$A, property: 'direction' },
+      fontSize: [{}, host$A],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [
         label$8,
@@ -6921,13 +7017,13 @@ const MultiSelectComboBoxClass = compose(
 
 		`,
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-    componentName: componentName$1g,
+    componentName: componentName$1h,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   }),
 );
 
-const componentName$1f = getComponentName('multi-line-mappings');
-const BaseClass$9 = createBaseClass$1({ componentName: componentName$1f });
+const componentName$1g = getComponentName('multi-line-mappings');
+const BaseClass$9 = createBaseClass$1({ componentName: componentName$1g });
 
 const parseJSON = (value, fallback, source = 'unknown') => {
   if (typeof value !== 'string' || !value?.trim()) {
@@ -7634,7 +7730,7 @@ class RawMultiLineMappingsClass extends BaseClass$9 {
   }
 }
 
-const host$y = { selector: () => ':host' };
+const host$z = { selector: () => ':host' };
 const rows = { selector: '.rows' };
 const row = { selector: '.row' };
 const addAction = { selector: '.add-action' };
@@ -7642,9 +7738,9 @@ const addAction = { selector: '.add-action' };
 const MultiLineMappingsClass = compose(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$y, property: 'width' },
+      hostWidth: { ...host$z, property: 'width' },
       hostDirection: [
-        { ...host$y, property: 'direction' },
+        { ...host$z, property: 'direction' },
         {
           selector: MultiSelectComboBoxClass.componentName,
           property: MultiSelectComboBoxClass.cssVarList.hostDirection,
@@ -7665,128 +7761,128 @@ const MultiLineMappingsClass = compose(
   draggableMixin$1,
 )(RawMultiLineMappingsClass);
 
-const vars$$ = MultiLineMappingsClass.cssVarList;
+const vars$10 = MultiLineMappingsClass.cssVarList;
 
 const multiLineMappings = {
-  [vars$$.hostDirection]: refs$1.direction,
+  [vars$10.hostDirection]: refs$1.direction,
 
-  [vars$$.rowsGap]: globals.spacing.sm,
-  [vars$$.rowGap]: globals.spacing.sm,
-  [vars$$.rowAlignItems]: 'flex-end',
-  [vars$$.rowWrap]: 'nowrap',
+  [vars$10.rowsGap]: globals.spacing.sm,
+  [vars$10.rowGap]: globals.spacing.sm,
+  [vars$10.rowAlignItems]: 'flex-end',
+  [vars$10.rowWrap]: 'nowrap',
 
-  [vars$$.addActionJustifyContent]: 'flex-start',
-  [vars$$.addActionMarginTop]: globals.spacing.xs,
+  [vars$10.addActionJustifyContent]: 'flex-start',
+  [vars$10.addActionMarginTop]: globals.spacing.xs,
 
   _fullWidth: {
-    [vars$$.hostWidth]: '100%',
+    [vars$10.hostWidth]: '100%',
   },
 };
 
 var multiLineMappings$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiLineMappings,
-  vars: vars$$
+  vars: vars$10
 });
 
 const globalRefs$z = getThemeRefs$1(globals);
-const vars$_ = MultiSelectComboBoxClass.cssVarList;
+const vars$$ = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
-  [vars$_.hostWidth]: refs$1.width,
-  [vars$_.hostDirection]: refs$1.direction,
-  [vars$_.fontSize]: refs$1.fontSize,
-  [vars$_.fontFamily]: refs$1.fontFamily,
-  [vars$_.labelFontSize]: refs$1.labelFontSize,
-  [vars$_.labelFontWeight]: refs$1.labelFontWeight,
-  [vars$_.inputValueFontWeight]: refs$1.inputValueFontWeight,
-  [vars$_.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-  [vars$_.helperTextFontWeight]: refs$1.helperTextFontWeight,
-  [vars$_.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-  [vars$_.labelTextColor]: refs$1.labelTextColor,
-  [vars$_.errorMessageTextColor]: refs$1.errorMessageTextColor,
-  [vars$_.inputBorderColor]: refs$1.borderColor,
-  [vars$_.inputBorderWidth]: refs$1.borderWidth,
-  [vars$_.inputBorderStyle]: refs$1.borderStyle,
-  [vars$_.inputBorderRadius]: refs$1.borderRadius,
-  [vars$_.inputOutlineColor]: refs$1.outlineColor,
-  [vars$_.inputOutlineOffset]: refs$1.outlineOffset,
-  [vars$_.inputOutlineWidth]: refs$1.outlineWidth,
-  [vars$_.inputOutlineStyle]: refs$1.outlineStyle,
-  [vars$_.labelRequiredIndicator]: refs$1.requiredIndicator,
-  [vars$_.inputValueTextColor]: refs$1.valueTextColor,
-  [vars$_.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-  [vars$_.inputBackgroundColor]: refs$1.backgroundColor,
-  [vars$_.inputHorizontalPadding]: refs$1.horizontalPadding,
-  [vars$_.inputVerticalPadding]: refs$1.verticalPadding,
-  [vars$_.inputHeight]: refs$1.inputHeight,
-  [vars$_.inputDropdownButtonColor]: globalRefs$z.colors.surface.dark,
-  [vars$_.inputDropdownButtonCursor]: 'pointer',
-  [vars$_.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-  [vars$_.inputDropdownButtonOffset]: globalRefs$z.spacing.xs,
-  [vars$_.overlayItemPaddingInlineStart]: globalRefs$z.spacing.xs,
-  [vars$_.overlayItemPaddingInlineEnd]: globalRefs$z.spacing.lg,
-  [vars$_.chipFontSize]: refs$1.chipFontSize,
-  [vars$_.chipTextColor]: globalRefs$z.colors.surface.contrast,
-  [vars$_.chipBackgroundColor]: globalRefs$z.colors.surface.light,
-  [vars$_.labelPosition]: refs$1.labelPosition,
-  [vars$_.labelTopPosition]: refs$1.labelTopPosition,
-  [vars$_.labelLeftPosition]: refs$1.labelLeftPosition,
-  [vars$_.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-  [vars$_.inputTransformY]: refs$1.inputTransformY,
-  [vars$_.inputTransition]: refs$1.inputTransition,
-  [vars$_.marginInlineStart]: refs$1.marginInlineStart,
-  [vars$_.placeholderOpacity]: refs$1.placeholderOpacity,
-  [vars$_.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-
-  [vars$_.errorMessageIcon]: refs$1.errorMessageIcon,
-  [vars$_.errorMessageIconSize]: refs$1.errorMessageIconSize,
-  [vars$_.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-  [vars$_.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-  [vars$_.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-  [vars$_.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$$.hostWidth]: refs$1.width,
+  [vars$$.hostDirection]: refs$1.direction,
+  [vars$$.fontSize]: refs$1.fontSize,
+  [vars$$.fontFamily]: refs$1.fontFamily,
+  [vars$$.labelFontSize]: refs$1.labelFontSize,
+  [vars$$.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$$.inputValueFontWeight]: refs$1.inputValueFontWeight,
+  [vars$$.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+  [vars$$.helperTextFontWeight]: refs$1.helperTextFontWeight,
+  [vars$$.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$$.labelTextColor]: refs$1.labelTextColor,
+  [vars$$.errorMessageTextColor]: refs$1.errorMessageTextColor,
+  [vars$$.inputBorderColor]: refs$1.borderColor,
+  [vars$$.inputBorderWidth]: refs$1.borderWidth,
+  [vars$$.inputBorderStyle]: refs$1.borderStyle,
+  [vars$$.inputBorderRadius]: refs$1.borderRadius,
+  [vars$$.inputOutlineColor]: refs$1.outlineColor,
+  [vars$$.inputOutlineOffset]: refs$1.outlineOffset,
+  [vars$$.inputOutlineWidth]: refs$1.outlineWidth,
+  [vars$$.inputOutlineStyle]: refs$1.outlineStyle,
+  [vars$$.labelRequiredIndicator]: refs$1.requiredIndicator,
+  [vars$$.inputValueTextColor]: refs$1.valueTextColor,
+  [vars$$.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+  [vars$$.inputBackgroundColor]: refs$1.backgroundColor,
+  [vars$$.inputHorizontalPadding]: refs$1.horizontalPadding,
+  [vars$$.inputVerticalPadding]: refs$1.verticalPadding,
+  [vars$$.inputHeight]: refs$1.inputHeight,
+  [vars$$.inputDropdownButtonColor]: globalRefs$z.colors.surface.dark,
+  [vars$$.inputDropdownButtonCursor]: 'pointer',
+  [vars$$.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+  [vars$$.inputDropdownButtonOffset]: globalRefs$z.spacing.xs,
+  [vars$$.overlayItemPaddingInlineStart]: globalRefs$z.spacing.xs,
+  [vars$$.overlayItemPaddingInlineEnd]: globalRefs$z.spacing.lg,
+  [vars$$.chipFontSize]: refs$1.chipFontSize,
+  [vars$$.chipTextColor]: globalRefs$z.colors.surface.contrast,
+  [vars$$.chipBackgroundColor]: globalRefs$z.colors.surface.light,
+  [vars$$.labelPosition]: refs$1.labelPosition,
+  [vars$$.labelTopPosition]: refs$1.labelTopPosition,
+  [vars$$.labelLeftPosition]: refs$1.labelLeftPosition,
+  [vars$$.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+  [vars$$.inputTransformY]: refs$1.inputTransformY,
+  [vars$$.inputTransition]: refs$1.inputTransition,
+  [vars$$.marginInlineStart]: refs$1.marginInlineStart,
+  [vars$$.placeholderOpacity]: refs$1.placeholderOpacity,
+  [vars$$.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+
+  [vars$$.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$$.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$$.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$$.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$$.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$$.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   labelType: {
     floating: {
-      [vars$_.inputHorizontalPadding]: '0.25em',
+      [vars$$.inputHorizontalPadding]: '0.25em',
       _hasValue: {
-        [vars$_.inputHorizontalPadding]: '0.45em',
+        [vars$$.inputHorizontalPadding]: '0.45em',
       },
     },
   },
 
   _readonly: {
-    [vars$_.inputDropdownButtonCursor]: 'default',
+    [vars$$.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$_.overlayFontSize]: refs$1.fontSize,
-  [vars$_.overlayFontFamily]: refs$1.fontFamily,
-  [vars$_.overlayCursor]: 'pointer',
-  [vars$_.overlayItemBoxShadow]: 'none',
-  [vars$_.overlayBackground]: refs$1.backgroundColor,
-  [vars$_.overlayTextColor]: refs$1.valueTextColor,
+  [vars$$.overlayFontSize]: refs$1.fontSize,
+  [vars$$.overlayFontFamily]: refs$1.fontFamily,
+  [vars$$.overlayCursor]: 'pointer',
+  [vars$$.overlayItemBoxShadow]: 'none',
+  [vars$$.overlayBackground]: refs$1.backgroundColor,
+  [vars$$.overlayTextColor]: refs$1.valueTextColor,
 
-  [vars$_.overlay.minHeight]: '400px',
-  [vars$_.overlay.margin]: '0',
+  [vars$$.overlay.minHeight]: '400px',
+  [vars$$.overlay.margin]: '0',
 };
 
 var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: multiSelectComboBox,
   multiSelectComboBox: multiSelectComboBox,
-  vars: vars$_
+  vars: vars$$
 });
 
-const componentName$1e = getComponentName('autocomplete-field-internal');
+const componentName$1f = getComponentName('autocomplete-field-internal');
 
 createBaseInputClass$1({
-  componentName: componentName$1e,
+  componentName: componentName$1f,
   baseSelector: '',
 });
 
-const componentName$1d = getComponentName('autocomplete-field');
+const componentName$1e = getComponentName('autocomplete-field');
 
-const customMixin$d = (superclass) =>
+const customMixin$e = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -7805,15 +7901,15 @@ const customMixin$d = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$1e}
+      <${componentName$1f}
         tabindex="-1"
-      ></${componentName$1e}>
+      ></${componentName$1f}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$1e,
+        componentName$1f,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -7853,7 +7949,7 @@ const customMixin$d = (superclass) =>
     }
   };
 
-const { host: host$x } = {
+const { host: host$y } = {
   host: { selector: () => ':host' },
 };
 
@@ -7863,9 +7959,9 @@ const AutocompleteFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$x, property: 'width' },
-      hostDirection: { ...host$x, property: 'direction' },
-      fontSize: { ...host$x },
+      hostWidth: { ...host$y, property: 'width' },
+      hostDirection: { ...host$y, property: 'direction' },
+      fontSize: { ...host$y },
       checkmarkDisplay: {
         selector: ComboBoxClass.componentName,
         property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
@@ -7903,7 +7999,7 @@ const AutocompleteFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$d,
+  customMixin$e,
 )(
   createProxy$1({
     slots: [],
@@ -7932,34 +8028,34 @@ const AutocompleteFieldClass = compose(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
   }),
 );
 
-const vars$Z = AutocompleteFieldClass.cssVarList;
+const vars$_ = AutocompleteFieldClass.cssVarList;
 const globalRefs$y = getThemeRefs$1(globals);
 
 const autocompleteField = {
-  [vars$Z.hostWidth]: refs$1.width,
-  [vars$Z.hostDirection]: refs$1.direction,
-  [vars$Z.fontSize]: refs$1.fontSize,
-  [vars$Z.checkmarkDisplay]: 'none',
-  [vars$Z.itemPaddingInlineStart]: globalRefs$y.spacing.lg,
-  [vars$Z.itemPaddingInlineEnd]: globalRefs$y.spacing.lg,
-  [vars$Z.selectedItemBackground]: globalRefs$y.colors.primary.light,
-  [vars$Z.selectedItemHoverBackground]: globalRefs$y.colors.primary.light,
-  [vars$Z.selectedItemFocusBackground]: globalRefs$y.colors.primary.light,
-  [vars$Z.itemHoverBackground]: globalRefs$y.colors.primary.highlight,
+  [vars$_.hostWidth]: refs$1.width,
+  [vars$_.hostDirection]: refs$1.direction,
+  [vars$_.fontSize]: refs$1.fontSize,
+  [vars$_.checkmarkDisplay]: 'none',
+  [vars$_.itemPaddingInlineStart]: globalRefs$y.spacing.lg,
+  [vars$_.itemPaddingInlineEnd]: globalRefs$y.spacing.lg,
+  [vars$_.selectedItemBackground]: globalRefs$y.colors.primary.light,
+  [vars$_.selectedItemHoverBackground]: globalRefs$y.colors.primary.light,
+  [vars$_.selectedItemFocusBackground]: globalRefs$y.colors.primary.light,
+  [vars$_.itemHoverBackground]: globalRefs$y.colors.primary.highlight,
 
   _fullWidth: {
-    [vars$Z.hostWidth]: '100%',
+    [vars$_.hostWidth]: '100%',
   },
 };
 
 var autocompleteField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: autocompleteField,
-  vars: vars$Z
+  vars: vars$_
 });
 
 const initGoogleMapsLoader = (apiKey) => {
@@ -8186,7 +8282,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$1c = getComponentName('address-field-internal');
+const componentName$1d = getComponentName('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -8197,7 +8293,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$8 = createBaseInputClass$1({
-  componentName: componentName$1c,
+  componentName: componentName$1d,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -8304,9 +8400,9 @@ compose(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$1b = getComponentName('address-field');
+const componentName$1c = getComponentName('address-field');
 
-const customMixin$c = (superclass) =>
+const customMixin$d = (superclass) =>
   class AddressFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -8333,15 +8429,15 @@ const customMixin$c = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$1c}
+      <${componentName$1d}
         tabindex="-1"
-      ></${componentName$1c}>
+      ></${componentName$1d}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$1c,
+        componentName$1d,
       );
 
       forwardAttrs(this, this.inputElement, {
@@ -8382,7 +8478,7 @@ const customMixin$c = (superclass) =>
     }
   };
 
-const { host: host$w } = {
+const { host: host$x } = {
   host: { selector: () => ':host' },
 };
 
@@ -8392,8 +8488,8 @@ const AddressFieldClass = compose(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$w, property: 'width' },
-      hostDirection: { ...host$w, property: 'direction' },
+      hostWidth: { ...host$x, property: 'width' },
+      hostDirection: { ...host$x, property: 'direction' },
     },
   }),
   draggableMixin$1,
@@ -8403,7 +8499,7 @@ const AddressFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$c,
+  customMixin$d,
 )(
   createProxy$1({
     slots: [],
@@ -8419,7 +8515,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$1c} {
+  ${componentName$1d} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -8427,30 +8523,30 @@ const AddressFieldClass = compose(
     max-width: 100%;
   }
 
-  ${componentName$1c} ::slotted {
+  ${componentName$1d} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$1b,
+    componentName: componentName$1c,
   }),
 );
 
-const vars$Y = AddressFieldClass.cssVarList;
+const vars$Z = AddressFieldClass.cssVarList;
 
 const addressField = {
-  [vars$Y.hostWidth]: refs$1.width,
-  [vars$Y.hostDirection]: refs$1.direction,
+  [vars$Z.hostWidth]: refs$1.width,
+  [vars$Z.hostDirection]: refs$1.direction,
 
   _fullWidth: {
-    [vars$Y.hostWidth]: '100%',
+    [vars$Z.hostWidth]: '100%',
   },
 };
 
 var addressField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: addressField,
-  vars: vars$Y
+  vars: vars$Z
 });
 
 var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -8472,12 +8568,12 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$1a = getComponentName('timer');
+const componentName$1b = getComponentName('timer');
 
 const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$8 = createBaseClass$1({
-  componentName: componentName$1a,
+  componentName: componentName$1b,
   baseSelector: ':host > .wrapper',
 });
 
@@ -8630,7 +8726,7 @@ class RawTimer extends BaseClass$8 {
   }
 }
 
-const { host: host$v, icon: icon$2, timer: timer$2 } = {
+const { host: host$w, icon: icon$2, timer: timer$2 } = {
   host: { selector: () => ':host' },
   icon: { selector: () => '.icon' },
   timer: { selector: () => '.timer' },
@@ -8651,8 +8747,8 @@ const TimerClass = compose(
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
-      hostWidth: { ...host$v, property: 'width' },
-      hostDirection: { ...host$v, property: 'direction' },
+      hostWidth: { ...host$w, property: 'width' },
+      hostDirection: { ...host$w, property: 'direction' },
       iconColor: { ...icon$2, property: IconClass.cssVarList.fill },
     },
   }),
@@ -8661,44 +8757,44 @@ const TimerClass = compose(
 )(RawTimer);
 
 const globalRefs$x = getThemeRefs$1(globals);
-const vars$X = TimerClass.cssVarList;
+const vars$Y = TimerClass.cssVarList;
 
 const timer = {
-  [vars$X.hostDirection]: globalRefs$x.direction,
-  [vars$X.gap]: '0.25em',
-  [vars$X.fontFamily]: globalRefs$x.fonts.font1.family,
-  [vars$X.minHeight]: '1.5em',
-  [vars$X.lineHeight]: '1em',
-  [vars$X.fontWeight]: globalRefs$x.fonts.font1.fontWeight,
-  [vars$X.textColor]: globalRefs$x.colors.surface.contrast,
-  [vars$X.iconColor]: globalRefs$x.colors.surface.contrast,
-  [vars$X.iconSize]: '1em',
+  [vars$Y.hostDirection]: globalRefs$x.direction,
+  [vars$Y.gap]: '0.25em',
+  [vars$Y.fontFamily]: globalRefs$x.fonts.font1.family,
+  [vars$Y.minHeight]: '1.5em',
+  [vars$Y.lineHeight]: '1em',
+  [vars$Y.fontWeight]: globalRefs$x.fonts.font1.fontWeight,
+  [vars$Y.textColor]: globalRefs$x.colors.surface.contrast,
+  [vars$Y.iconColor]: globalRefs$x.colors.surface.contrast,
+  [vars$Y.iconSize]: '1em',
 
   size: {
-    xs: { [vars$X.fontSize]: '12px' },
-    sm: { [vars$X.fontSize]: '14px' },
-    md: { [vars$X.fontSize]: '16px' },
-    lg: { [vars$X.fontSize]: '18px' },
+    xs: { [vars$Y.fontSize]: '12px' },
+    sm: { [vars$Y.fontSize]: '14px' },
+    md: { [vars$Y.fontSize]: '16px' },
+    lg: { [vars$Y.fontSize]: '18px' },
   },
 
   textAlign: {
-    right: { [vars$X.textAlign]: 'right' },
-    left: { [vars$X.textAlign]: 'left' },
-    center: { [vars$X.textAlign]: 'center' },
+    right: { [vars$Y.textAlign]: 'right' },
+    left: { [vars$Y.textAlign]: 'left' },
+    center: { [vars$Y.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$X.hostWidth]: '100%',
+    [vars$Y.hostWidth]: '100%',
   },
 };
 
 var timer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timer,
-  vars: vars$X
+  vars: vars$Y
 });
 
-const componentName$19 = getComponentName('timer-button');
+const componentName$1a = getComponentName('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -8729,7 +8825,7 @@ const mapTimerAttrs = {
 };
 
 const BaseClass$7 = createBaseClass$1({
-  componentName: componentName$19,
+  componentName: componentName$1a,
   baseSelector: ':host > div',
 });
 
@@ -8881,7 +8977,7 @@ class RawTimerButton extends BaseClass$7 {
 }
 
 const {
-  host: host$u,
+  host: host$v,
   nestedTimer,
   nestedButton,
   timerInsideNotReversed,
@@ -8906,8 +9002,8 @@ const TimerButtonClass = compose(
     mappings: {
       gap: {},
       flexDirection: {},
-      hostWidth: { ...host$u, property: 'width' },
-      hostDirection: { ...host$u, property: 'direction' },
+      hostWidth: { ...host$v, property: 'width' },
+      hostDirection: { ...host$v, property: 'direction' },
       timerTextColor: {
         ...nestedTimer,
         property: TimerClass.cssVarList.textColor,
@@ -8939,40 +9035,40 @@ const TimerButtonClass = compose(
 )(RawTimerButton);
 
 const globalRefs$w = getThemeRefs$1(globals);
-const vars$W = TimerButtonClass.cssVarList;
+const vars$X = TimerButtonClass.cssVarList;
 
 const timerButton = {
-  [vars$W.gap]: globalRefs$w.spacing.sm,
-  [vars$W.flexDirection]: 'column',
+  [vars$X.gap]: globalRefs$w.spacing.sm,
+  [vars$X.flexDirection]: 'column',
 
   _horizontal: {
-    [vars$W.flexDirection]: 'row',
+    [vars$X.flexDirection]: 'row',
     timerPosition: {
       end: {
-        [vars$W.flexDirection]: 'row-reverse',
+        [vars$X.flexDirection]: 'row-reverse',
       },
     },
   },
 
   timerPosition: {
     end: {
-      [vars$W.flexDirection]: 'column-reverse',
+      [vars$X.flexDirection]: 'column-reverse',
     },
   },
 
   _fullWidth: {
-    [vars$W.hostWidth]: '100%',
+    [vars$X.hostWidth]: '100%',
   },
 
   _timerInside: {
-    [vars$W.timerTextColor]: 'currentColor',
-    [vars$W.timerIconColor]: 'currentColor',
-    [vars$W.timerHostWidth]: 'auto',
-    [vars$W.buttonLabelSpacing]: '0',
-    [vars$W.timerInsideGapEnd]: `var(${vars$W.gap})`,
+    [vars$X.timerTextColor]: 'currentColor',
+    [vars$X.timerIconColor]: 'currentColor',
+    [vars$X.timerHostWidth]: 'auto',
+    [vars$X.buttonLabelSpacing]: '0',
+    [vars$X.timerInsideGapEnd]: `var(${vars$X.gap})`,
     timerPosition: {
       end: {
-        [vars$W.timerInsideGapStart]: `var(${vars$W.gap})`,
+        [vars$X.timerInsideGapStart]: `var(${vars$X.gap})`,
       },
     },
   },
@@ -8981,12 +9077,12 @@ const timerButton = {
 var timerButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timerButton,
-  vars: vars$W
+  vars: vars$X
 });
 
-const componentName$18 = getComponentName('password-strength');
+const componentName$19 = getComponentName('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$18,
+  componentName: componentName$19,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -9100,7 +9196,7 @@ class RawPasswordStrength extends createBaseClass$1({
   }
 }
 
-const { host: host$t, bar, filledBar, barsContainer, text: text$1 } = {
+const { host: host$u, bar, filledBar, barsContainer, text: text$1 } = {
   host: { selector: () => ':host' },
   bar: { selector: ' .bar' },
   barsContainer: { selector: ' .bars-container' },
@@ -9113,11 +9209,11 @@ const PasswordStrengthClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$t, property: 'width' },
-        { ...host$t, property: 'min-width' },
+        { ...host$u, property: 'width' },
+        { ...host$u, property: 'min-width' },
       ],
-      hostDirection: { ...host$t, property: 'direction' },
-      hostMinWidth: { ...host$t, property: 'min-width' },
+      hostDirection: { ...host$u, property: 'direction' },
+      hostMinWidth: { ...host$u, property: 'min-width' },
       barHeight: { ...bar, property: 'height' },
       barBorderRadius: { ...bar, property: 'border-radius' },
       emptyBarColor: { ...bar, property: 'background-color' },
@@ -9177,22 +9273,22 @@ const passwordStrength = {
   }
 };
 
-const vars$V = {
+const vars$W = {
   ...compVars$6,
 };
 
 var passwordStrength$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: passwordStrength,
-  vars: vars$V
+  vars: vars$W
 });
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02Ljc4MDcgMTQuNzI3MkM2LjM0MTYgMTUuMTIwOSA1LjY2NjYgMTUuMDg0MSA1LjI3MjggMTQuNjQ1MUM0Ljg3OTEgMTQuMjA2IDQuOTE1OSAxMy41MzA5IDUuMzU0OSAxMy4xMzcyQzUuMzU0OSAxMy4xMzcyIDEwLjk1NDMgNy45OTc4IDExLjM2IDcuNjM0QzExLjc2NTcgNy4yNzAyIDEyLjIzOTIgNy4yNzAyIDEyLjY0NDggNy42MzRMMTguNjQ1MSAxMy4xMzcyQzE5LjA4NDEgMTMuNTMwOSAxOS4xMjA5IDE0LjIwNiAxOC43MjcyIDE0LjY0NTFDMTguMzMzNCAxNS4wODQxIDE3LjY1ODQgMTUuMTIwOSAxNy4yMTkzIDE0LjcyNzJMMTIgOS44NjMyTDYuNzgwNyAxNC43MjcyWiIvPgo8L3N2Zz4K";
 
-const componentName$17 = getComponentName('collapsible-container');
+const componentName$18 = getComponentName('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$17,
+  componentName: componentName$18,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -9443,7 +9539,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$17,
+  componentName$18,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$4;
@@ -9544,7 +9640,7 @@ const collapsibleContainer = {
   },
 };
 
-const vars$U = {
+const vars$V = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -9552,10 +9648,10 @@ const vars$U = {
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: collapsibleContainer,
-  vars: vars$U
+  vars: vars$V
 });
 
-const componentName$16 = getComponentName('recovery-codes');
+const componentName$17 = getComponentName('recovery-codes');
 
 const NO_ACTION = 'none';
 const DEFAULT_ERROR_MESSAGE =
@@ -9597,7 +9693,7 @@ const itemRenderer$5 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$16,
+  componentName: componentName$17,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -10010,60 +10106,388 @@ const RecoveryCodesClass = compose(
 )(RawRecoveryCodes);
 
 const globalRefs$t = getThemeRefs$1(globals);
-const vars$T = RecoveryCodesClass.cssVarList;
+const vars$U = RecoveryCodesClass.cssVarList;
 const textVars$6 = TextClass.cssVarList;
 
 const recoveryCodes = {
-  [vars$T.hostMinWidth]: '190px',
-  [vars$T.hostDirection]: globalRefs$t.direction,
-  [vars$T.iconColor]: useVar$1(textVars$6.textColor),
-  [vars$T.iconSize]: useVar$1(textVars$6.fontSize),
+  [vars$U.hostMinWidth]: '190px',
+  [vars$U.hostDirection]: globalRefs$t.direction,
+  [vars$U.iconColor]: useVar$1(textVars$6.textColor),
+  [vars$U.iconSize]: useVar$1(textVars$6.fontSize),
   // gap between the codes and the icon column
-  [vars$T.iconGap]: '8px',
+  [vars$U.iconGap]: '8px',
   // gap between the stacked copy and download icons
-  [vars$T.iconStackGap]: '16px',
+  [vars$U.iconStackGap]: '16px',
   // gap between the copy and download buttons (buttons variant)
-  [vars$T.buttonsGap]: '8px',
+  [vars$U.buttonsGap]: '8px',
   // gap between the codes, the error message and the buttons
-  [vars$T.sectionsGap]: '8px',
-  [vars$T.bulletGap]: '0.35em',
+  [vars$U.sectionsGap]: '8px',
+  [vars$U.bulletGap]: '0.35em',
 
   // no padding by default so the current look is unchanged; the editor overrides per instance
-  [vars$T.verticalPadding]: '0',
-  [vars$T.horizontalPadding]: '0',
+  [vars$U.verticalPadding]: '0',
+  [vars$U.horizontalPadding]: '0',
 
   // error ring is transparent until the component is marked invalid (see _invalid below).
   // message color/font + border come from the shared input-wrapper tokens, so customizing
   // inputs in the console updates the recovery-codes error styling from the same place.
-  [vars$T.errorBorderColor]: 'transparent',
-  [vars$T.errorBorderWidth]: refs$1.borderWidth,
-  [vars$T.boxBorderRadius]: refs$1.borderRadius,
+  [vars$U.errorBorderColor]: 'transparent',
+  [vars$U.errorBorderWidth]: refs$1.borderWidth,
+  [vars$U.boxBorderRadius]: refs$1.borderRadius,
   // local default; can later map to the input-wrapper border style if it exposes one
-  [vars$T.boxBorderStyle]: 'solid',
-  [vars$T.errorMessageColor]: refs$1.errorMessageTextColor,
-  [vars$T.errorMessageFontSize]: refs$1.errorMessageFontSize,
-  [vars$T.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-  [vars$T.errorMessageFontFamily]: refs$1.fontFamily,
+  [vars$U.boxBorderStyle]: 'solid',
+  [vars$U.errorMessageColor]: refs$1.errorMessageTextColor,
+  [vars$U.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$U.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$U.errorMessageFontFamily]: refs$1.fontFamily,
 
   textAlign: {
-    right: { [vars$T.textAlign]: 'flex-end' },
-    left: { [vars$T.textAlign]: 'flex-start' },
-    center: { [vars$T.textAlign]: 'center' },
+    right: { [vars$U.textAlign]: 'flex-end' },
+    left: { [vars$U.textAlign]: 'flex-start' },
+    center: { [vars$U.textAlign]: 'center' },
   },
 
   _fullWidth: {
-    [vars$T.hostWidth]: '100%',
+    [vars$U.hostWidth]: '100%',
   },
 
   // reflected `invalid` attribute (set by the component on a failed submit)
   _invalid: {
-    [vars$T.errorBorderColor]: refs$1.errorMessageTextColor,
+    [vars$U.errorBorderColor]: refs$1.errorMessageTextColor,
   },
 };
 
 var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: recoveryCodes,
+  vars: vars$U
+});
+
+var desktopDeviceIconLight$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
+
+var mobileDeviceIconLight$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDFIOEM2LjM0IDEgNSAyLjM0IDUgNFYyMEM1IDIxLjY2IDYuMzQgMjMgOCAyM0gxNkMxNy42NiAyMyAxOSAyMS42NiAxOSAyMFY0QzE5IDIuMzQgMTcuNjYgMSAxNiAxWk0xNyAxOEg3VjRIMTdWMThaTTE0IDIxSDEwVjIwSDE0VjIxWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
+
+var tabletDeviceIconLight$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUyNTJfNzY4KSI+CjxwYXRoIGQ9Ik0xOC41IDAuNUg0LjVDMy4xMiAwLjUgMiAxLjYyIDIgM1YyMkMyIDIzLjM4IDMuMTIgMjQuNSA0LjUgMjQuNUgxOC41QzE5Ljg4IDI0LjUgMjEgMjMuMzggMjEgMjJWM0MyMSAxLjYyIDE5Ljg4IDAuNSAxOC41IDAuNVpNMTEuNSAyMy41QzEwLjY3IDIzLjUgMTAgMjIuODMgMTAgMjJDMTAgMjEuMTcgMTAuNjcgMjAuNSAxMS41IDIwLjVDMTIuMzMgMjAuNSAxMyAyMS4xNyAxMyAyMkMxMyAyMi44MyAxMi4zMyAyMy41IDExLjUgMjMuNVpNMTkgMTkuNUg0VjMuNUgxOVYxOS41WiIgZmlsbD0iIzYzNkM3NCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzUyNTJfNzY4Ij4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwLjUpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
+
+var unknownDeviceIconLight$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNi41SDIyVjQuNUg0QzIuOSA0LjUgMiA1LjQgMiA2LjVWMTcuNUgwVjIwLjVIMTRWMTcuNUg0VjYuNVpNMjMgOC41SDE3QzE2LjQ1IDguNSAxNiA4Ljk1IDE2IDkuNVYxOS41QzE2IDIwLjA1IDE2LjQ1IDIwLjUgMTcgMjAuNUgyM0MyMy41NSAyMC41IDI0IDIwLjA1IDI0IDE5LjVWOS41QzI0IDguOTUgMjMuNTUgOC41IDIzIDguNVpNMjIgMTcuNUgxOFYxMC41SDIyVjE3LjVaIiBmaWxsPSIjNjM2Qzc0Ii8+Cjwvc3ZnPgo=";
+
+var desktopDeviceIconDark$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4LjVDMjEuMSAxOC41IDIxLjk5IDE3LjYgMjEuOTkgMTYuNUwyMiA2LjVDMjIgNS40IDIxLjEgNC41IDIwIDQuNUg0QzIuOSA0LjUgMiA1LjQgMiA2LjVWMTYuNUMyIDE3LjYgMi45IDE4LjUgNCAxOC41SDBWMjAuNUgyNFYxOC41SDIwWk00IDYuNUgyMFYxNi41SDRWNi41WiIgZmlsbD0iI0Y0RjVGNiIvPgo8L3N2Zz4K";
+
+var mobileDeviceIconDark$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDEuNUg4QzYuMzQgMS41IDUgMi44NCA1IDQuNVYyMC41QzUgMjIuMTYgNi4zNCAyMy41IDggMjMuNUgxNkMxNy42NiAyMy41IDE5IDIyLjE2IDE5IDIwLjVWNC41QzE5IDIuODQgMTcuNjYgMS41IDE2IDEuNVpNMTcgMTguNUg3VjQuNUgxN1YxOC41Wk0xNCAyMS41SDEwVjIwLjVIMTRWMjEuNVoiIGZpbGw9IiNGNEY1RjYiLz4KPC9zdmc+Cg==";
+
+var tabletDeviceIconDark$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUzMDNfODYzKSI+CjxwYXRoIGQ9Ik0xOC41IDAuNUg0LjVDMy4xMiAwLjUgMiAxLjYyIDIgM1YyMkMyIDIzLjM4IDMuMTIgMjQuNSA0LjUgMjQuNUgxOC41QzE5Ljg4IDI0LjUgMjEgMjMuMzggMjEgMjJWM0MyMSAxLjYyIDE5Ljg4IDAuNSAxOC41IDAuNVpNMTEuNSAyMy41QzEwLjY3IDIzLjUgMTAgMjIuODMgMTAgMjJDMTAgMjEuMTcgMTAuNjcgMjAuNSAxMS41IDIwLjVDMTIuMzMgMjAuNSAxMyAyMS4xNyAxMyAyMkMxMyAyMi44MyAxMi4zMyAyMy41IDExLjUgMjMuNVpNMTkgMTkuNUg0VjMuNUgxOVYxOS41WiIgZmlsbD0iI0Y0RjVGNiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzUzMDNfODYzIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwLjUpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
+
+var unknownDeviceIconDark$1 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkgyMlY0SDRDMi45IDQgMiA0LjkgMiA2VjE3SDBWMjBIMTRWMTdINFY2Wk0yMyA4SDE3QzE2LjQ1IDggMTYgOC40NSAxNiA5VjE5QzE2IDE5LjU1IDE2LjQ1IDIwIDE3IDIwSDIzQzIzLjU1IDIwIDI0IDE5LjU1IDI0IDE5VjlDMjQgOC40NSAyMy41NSA4IDIzIDhaTTIyIDE3SDE4VjEwSDIyVjE3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
+
+// Same four device types userservice records. A session created before those columns existed
+// carries an empty type, so everything unrecognised falls back to the unknown icon rather than
+// rendering a broken image.
+const deviceIconMap$1 = {
+  desktop: { light: desktopDeviceIconLight$1, dark: desktopDeviceIconDark$1 },
+  mobile: { light: mobileDeviceIconLight$1, dark: mobileDeviceIconDark$1 },
+  tablet: { light: tabletDeviceIconLight$1, dark: tabletDeviceIconDark$1 },
+  unknown: { light: unknownDeviceIconLight$1, dark: unknownDeviceIconDark$1 },
+};
+
+const getDeviceIcon$1 = (deviceType) => {
+  const icon = deviceIconMap$1[deviceType] || deviceIconMap$1.unknown;
+  return { iconSrc: icon.light, iconSrcDark: icon.dark };
+};
+
+// "Tel Aviv, IL". Either half may be missing - geo lookup is best effort - so show whichever we
+// have, and nothing at all when we have neither.
+const formatLocation = ({ country, city }) =>
+  [city, country].filter(Boolean).join(', ');
+
+// The login time arrives as epoch SECONDS (userservice stores it that way and the flow passes it
+// through untouched), while Date wants milliseconds. Getting this wrong shows 1970.
+const SECONDS_TO_MS = 1000;
+
+// Rendered in the viewer's own locale and timezone rather than a fixed order, so the same session
+// reads correctly for someone in Tel Aviv and someone in New York. The offset is spelled out
+// because the point of this list is telling two of your own sessions apart, and the hour is what
+// does that.
+const formatLastLogin = (loginTime) => {
+  const seconds = parseInt(loginTime, 10);
+  if (Number.isNaN(seconds) || seconds <= 0) return '';
+
+  const date = new Date(seconds * SECONDS_TO_MS);
+  // Spelled out as individual components rather than dateStyle/timeStyle: Intl rejects mixing
+  // those with timeZoneName, and the rejection is a throw, so the offset would be silently lost to
+  // the fallback below.
+  const parts = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+  try {
+    return date.toLocaleString(undefined, {
+      ...parts,
+      timeZoneName: 'shortOffset',
+    });
+  } catch {
+    // `shortOffset` is not understood everywhere; the time matters more than the offset.
+    return date.toLocaleString(undefined, parts);
+  }
+};
+
+const componentName$16 = getComponentName('active-sessions');
+
+const comboBoxName = MultiSelectComboBoxClass.componentName;
+
+// Structure only, handed to the portal mixin below, which writes it into the overlay root
+// alongside the themeable mappings. These are the rules no theme should change, and they have to
+// be a stylesheet because a `style` attribute would be dropped by the flow runtime's CSP.
+const OVERLAY_ITEM_STYLE = `
+  .session {
+    display: flex;
+    flex-direction: column;
+  }
+  /* descope-text and its slot are both inline-blocks, which would leave a baseline gap under the
+     title and widen the space to the location line. */
+  .session .device descope-text,
+  .session .device descope-text::part(text-wrapper) {
+    display: block;
+  }
+  /* The flex row has to sit inside descope-text, not around it: descope-text slots its children,
+     so a container outside would only ever see the slot as its single item. */
+  .session .device-row {
+    display: flex;
+    align-items: center;
+  }
+  .session .device-icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+`;
+
+// None of the shadow roots down to the rows exists on the first tick. `waitForShadowRoot` is the
+// same wait `portalMixin` uses, and it resolves the element rather than a root when it gives up,
+// so anything that is not a shadow root means stop.
+const shadowRootOf = async (ele) => {
+  if (!ele) return null;
+  const root = await waitForShadowRoot(() => ele)();
+  return root instanceof ShadowRoot ? root : null;
+};
+
+// From the combo box's shadow root down to the element whose own root holds the rows.
+// the portal mixin takes it as its selector and writes both its mappings and the static css there.
+const findOverlayElement = async (comboBoxRoot) => {
+  const vaadinRoot = await shadowRootOf(
+    comboBoxRoot?.querySelector('vaadin-multi-select-combo-box'),
+  );
+  return vaadinRoot?.querySelector('vaadin-multi-select-combo-box-internal');
+};
+
+// The row's shape, written once as markup so it reads like the thing it produces. Every value is
+// filled in afterwards with textContent and setAttribute: the combo box assigns the result to
+// innerHTML, and `deviceName` comes from a user agent the client controls, so interpolating it
+// into this string would be an HTML injection.
+// Built on first render rather than at import. This module is the `./class` entry, which has to
+// stay free of side effects so a server with no `document` can import the bundle.
+let rowTemplate;
+const getRowTemplate = () => {
+  if (rowTemplate) return rowTemplate;
+
+  rowTemplate = document.createElement('template');
+  rowTemplate.innerHTML = `
+  <div class="session">
+    <div class="device">
+      <descope-text variant="body1" mode="primary" st-font-size="1em">
+        <div class="device-row">
+          <descope-icon class="device-icon" aria-hidden="true"></descope-icon>
+          <span class="device-name"></span>
+        </div>
+      </descope-text>
+    </div>
+    <div class="location">
+      <descope-text
+          variant="body2"
+          mode="secondary"
+          st-font-size="0.875em"
+        ></descope-text>
+    </div>
+    <div class="last-login">
+      <descope-text
+          variant="body2"
+          mode="secondary"
+          st-font-size="0.875em"
+        ></descope-text>
+      </div>
+    </div>
+  `;
+
+  return rowTemplate;
+};
+
+const renderItem =
+  (ref) =>
+  ({ value, deviceName, deviceType, city, country, loginTime } = {}) => {
+    const name = deviceName || ref.unknownDeviceLabel;
+    const row = getRowTemplate().content.cloneNode(true).firstElementChild;
+
+    row.setAttribute('data-id', value ?? '');
+    // The chip shows this once the row is picked.
+    row.setAttribute('data-name', name);
+
+    row.querySelector('.device-name').textContent = name;
+
+    const { iconSrc, iconSrcDark } = getDeviceIcon$1(deviceType);
+    const icon = row.querySelector('.device-icon');
+    icon.setAttribute('src', iconSrc);
+    icon.setAttribute('src-dark', iconSrcDark);
+
+    // Both detail lines are optional, and an empty one would still take up space, so the line is
+    // removed rather than left blank.
+    const fill = (selector, text) => {
+      const ele = row.querySelector(selector);
+      if (text) ele.firstElementChild.textContent = text;
+      else ele.remove();
+    };
+
+    fill('.location', formatLocation({ country, city }));
+
+    const lastLogin = formatLastLogin(loginTime);
+    fill(
+      '.last-login',
+      lastLogin && ref.lastLoginLabel
+        ? `${ref.lastLoginLabel} ${lastLogin}`
+        : lastLogin,
+    );
+
+    return row.outerHTML;
+  };
+
+const customMixin$c = (superclass) =>
+  class ActiveSessionsMixinClass extends superclass {
+    get lastLoginLabel() {
+      return this.getAttribute('last-login-label') ?? 'Last login:';
+    }
+
+    get unknownDeviceLabel() {
+      return this.getAttribute('unknown-device-label') ?? 'Unknown device';
+    }
+
+    init() {
+      super.init?.();
+
+      this.inputElement = this.baseElement;
+
+      // Set before any `data` arrives, so the list is never painted with the stock one-line rows
+      // first. The SDK sets `data` on a detached fragment, so that first paint is the real one.
+      this.inputElement.renderItem = renderItem(this);
+
+      // The picker never invents a session, so a typed value must not become one.
+      this.inputElement.setAttribute('allow-custom-value', 'false');
+      this.inputElement.setAttribute('item-label-path', 'data-name');
+      this.inputElement.setAttribute('item-value-path', 'data-id');
+    }
+  };
+
+const host$t = { selector: () => ':host' };
+const comboBox = { selector: () => comboBoxName };
+
+// Only the knobs that can actually reach their target. The dropdown row's themeable values are
+// mapped through the portal below, which writes its rules into the overlay root. Better a small
+// honest set of variables than knobs that silently do nothing.
+const ActiveSessionsClass = compose(
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: [
+        { ...host$t, property: 'width' },
+        {
+          ...comboBox,
+          property: MultiSelectComboBoxClass.cssVarList.hostWidth,
+        },
+      ],
+      hostDirection: [
+        { ...host$t, property: 'direction' },
+        {
+          ...comboBox,
+          property: MultiSelectComboBoxClass.cssVarList.hostDirection,
+        },
+      ],
+    },
+  }),
+  draggableMixin$1,
+  // The rows are drawn four shadow roots down, deeper than a query string reaches, so the portal
+  // is found with a function. This puts their themeable values through the normal mapping path:
+  // the style mixin writes its rules into that same root. Nothing is forwarded, because the
+  // element there is vaadin's internal, not a copy of this host, and attributes like `data` would
+  // stop the list rendering.
+  portalMixin$1({
+    name: 'overlay',
+    forward: false,
+    selector: findOverlayElement,
+    style: OVERLAY_ITEM_STYLE,
+    mappings: {
+      rowGap: { selector: '.session', property: 'gap' },
+      deviceRowGap: { selector: '.device-row', property: 'gap' },
+    },
+  }),
+  composedProxyInputMixin$1({
+    proxyProps: ['value'],
+    inputEvent: 'change',
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin$1,
+  customMixin$c,
+)(
+  createProxy$1({
+    slots: [],
+    // The combo box is wrapped directly. It draws its own label, so there is nothing for an outer
+    // field element to add here, and its label follows the input theme instead of vaadin's.
+    wrappedEleName: comboBoxName,
+    style: () => `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+      }
+      ${comboBoxName} {
+        width: 100%;
+        max-width: 100%;
+      }
+    `,
+    // `name` stays on the host only: that is the element the SDK collects the value from, and a
+    // second match would post the field twice. `error-message` deliberately does reach the combo
+    // box, which is what draws the message under the field. Without it the field only turns red
+    // and the browser's own bubble appears instead.
+    // `class` must not sync: the wrapped element carries its own component classes, and syncing
+    // is two way, so they would land on the host and push off `descope-active-sessions`. Every
+    // theme rule is written as `:host(.descope-active-sessions...)`, so losing that class turns
+    // off all of this component's theming, direction included. descope-apps-list excludes it for
+    // the same reason.
+    excludeAttrsSync: ['tabindex', 'style', 'name', 'class'],
+    componentName: componentName$16,
+  }),
+);
+
+const vars$T = ActiveSessionsClass.cssVarList;
+
+// The dropdown rows are styled by the stylesheet `ActiveSessionsClass` adopts into vaadin's
+// overlay root (`OVERLAY_ITEM_STYLE`), which no theme variable reaches. A `style` attribute would
+// not work there either, because the flow runtime's CSP drops it. What is left to theme here is
+// the field itself.
+const activeSessions = {
+  [vars$T.hostWidth]: refs$1.width,
+  [vars$T.hostDirection]: refs$1.direction,
+
+  // Spacing inside a dropdown row. These reach the row as custom properties, because the rows are
+  // rendered inside vaadin's overlay where no selector from here applies.
+  [vars$T.overlay.rowGap]: '0.125em',
+  [vars$T.overlay.deviceRowGap]: '0.5em',
+
+  _fullWidth: {
+    [vars$T.hostWidth]: '100%',
+  },
+};
+
+var activeSessions$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: activeSessions,
   vars: vars$T
 });
 
@@ -17881,7 +18305,7 @@ const createClassSelectorSpecifier = (className, numOfRepeats) =>
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
 const createStyleMixin =
-  ({ mappings = {}, componentNameOverride = '' }) =>
+  ({ mappings = {}, componentNameOverride = '', style = '' }) =>
   (superclass) => {
     const componentName = componentNameOverride || superclass.componentName;
 
@@ -18003,6 +18427,14 @@ const createStyleMixin =
         }
       }
 
+      // Rules the component needs wherever this mixin writes, which for a portal is a shadow root
+      // it does not own. Prepended after the mapping rules so those still win: the mapping is the
+      // themeable half, this is the structure underneath it.
+      #createStaticStyle() {
+        const css = isFunction$1(style) ? style() : style;
+        if (css) injectStyle(css, this.#rootElement, { prepend: true });
+      }
+
       #addClassName(className) {
         (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
       }
@@ -18015,6 +18447,7 @@ const createStyleMixin =
           this.#addClassName(componentName);
 
           this.#createMappingStyle();
+          this.#createStaticStyle();
           this.#createComponentTheme();
           this.#createOverridesStyle();
 
@@ -18758,40 +19191,26 @@ const composedProxyInputMixin = (proxyInputMixinConfig) =>
 // because of that, we are adding this separator that is also used as a differentiator
 const DISPLAY_NAME_SEPARATOR = '_';
 
-const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
-  const ele = await getRootElementFn(that);
-
-  return new Promise((res) => {
-    const MAX_RETRIES = 20;
-    let counter = 0;
-
-    const check = () => {
-      if (counter > MAX_RETRIES) {
-        // eslint-disable-next-line no-console
-        console.error('could not get shadow root for element', ele);
-        res(ele);
-        return;
-      }
-
-      counter++;
-
-      if (!ele?.shadowRoot) {
-        setTimeout(check);
-      } else {
-        res(ele.shadowRoot);
-      }
-    };
-    check();
-  });
-};
-
 const portalMixin =
-  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  ({
+    name,
+    selector,
+    mappings = {},
+    // Static css for the portal's own root, for rules that should not become themeable knobs.
+    style = '',
+    // `false` forwards nothing to the portal element. It needs its own value because an empty
+    // `attributes` list already means "no filter", so it forwards everything rather than nothing.
+    // Forwarding is wrong for a portal whose element is not a copy of the host, where attributes
+    // like `data` or `label` would land somewhere that does not expect them.
+    forward = {},
+  }) =>
   (superclass) => {
+
     const eleDisplayName = name;
 
     const BaseClass = createStyleMixin({
       mappings,
+      style,
     })(superclass);
 
     return class PortalMixinClass extends BaseClass {
@@ -18817,7 +19236,7 @@ const portalMixin =
           }
         };
 
-        const getPortalElement = withWaitForShadowRoot(getRootElement);
+        const getPortalElement = waitForShadowRoot$1(getRootElement);
 
         super({
           getRootElement: getPortalElement,
@@ -18848,9 +19267,12 @@ const portalMixin =
         // Initialize portal element lookup here (deferred from constructor for React compatibility)
         this.#portalEle = this.#getPortalElement();
         const portalEle = await this.#portalEle;
-        forwardAttrs$1(this, portalEle, {
-          [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
-        });
+        if (forward !== false) {
+          const { attributes = [], include = true } = forward;
+          forwardAttrs$1(this, portalEle, {
+            [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+          });
+        }
 
         this.#handleHoverAttribute();
       }
@@ -31749,7 +32171,7 @@ const alert = {
   [vars$2.horizontalPadding]: '0',
   [vars$2.verticalPadding]: '0',
   [vars$2.gap]: `0.5em`,
-  [vars$2.fontSize]: useVar(vars$1a.fontSize),
+  [vars$2.fontSize]: useVar(vars$1b.fontSize),
 
   mode: {
     error: {
@@ -31992,7 +32414,7 @@ const components = {
   passcode: passcode$1,
   loaderRadial: loaderRadial$1,
   loaderLinear: loaderLinear$1,
-  comboBox: comboBox$1,
+  comboBox: comboBox$2,
   phoneField: phoneField$1,
   phoneInputBoxField: phoneInputBoxField$1,
   newPassword: newPassword$1,
@@ -32039,6 +32461,7 @@ const components = {
   passwordStrength: passwordStrength$1,
   collapsibleContainer: collapsibleContainer$1,
   recoveryCodes: recoveryCodes$1,
+  activeSessions: activeSessions$1,
   hcaptcha: hcaptcha$1,
   outboundApps: outboundApps$1,
   outboundAppButton: outboundAppButton$1,
@@ -32060,7 +32483,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$1c, components: vars };
+const themeVars = { globals: vars$1d, components: vars };
 
 const colors = {
   surface: {
@@ -32862,6 +33285,7 @@ var calcScore = /*#__PURE__*/Object.freeze({
   options: options
 });
 
+exports.ActiveSessionsClass = ActiveSessionsClass;
 exports.AddressFieldClass = AddressFieldClass;
 exports.AlertClass = AlertClass;
 exports.AnchoredClass = AnchoredClass;