@descope/web-components-ui 3.22.3 → 3.23.0

package/dist/index.esm.js

@@ -24,8 +24,8 @@ import '@vaadin/dialog';
 import '@vaadin/notification';
 import '@vaadin/custom-field';
 import '@vaadin/radio-group';
-import '@vaadin/avatar';
 import '@vaadin/multi-select-combo-box';
+import '@vaadin/avatar';
 import '@vaadin/tooltip';
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
@@ -219,6 +219,39 @@ 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) {
+        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)}`;
@@ -770,7 +803,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;
 
@@ -824,7 +857,7 @@ const createStyleMixin$1 =
         );
       }
 
-      // eslint-disable-next-line class-methods-use-this
+       
       get #componentTheme() {
         return componentsThemeManager.currentTheme?.[componentName] || '';
       }
@@ -860,6 +893,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)}`;
           }
 
@@ -907,6 +941,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$1(style) ? style() : style;
+        if (css) injectStyle(css, this.#rootElement, { prepend: true });
+      }
+
       #addClassName(className) {
         (
           this.#rootElement?.classList ||
@@ -924,6 +966,7 @@ const createStyleMixin$1 =
           this.#addClassName(componentName);
 
           this.#createMappingStyle();
+          this.#createStaticStyle();
           this.#createComponentTheme();
           this.#createOverridesStyle();
 
@@ -1876,46 +1919,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$1(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 {
@@ -1948,13 +1976,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$1(() => 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$1(selector)
+            ? selector(baseEleShadowRoot)
+            : baseEleShadowRoot.querySelector(selector);
         };
 
-        const getPortalElement = withWaitForShadowRoot$1(getRootElement);
+        const getPortalElement = waitForShadowRoot$1(getRootElement);
 
         super({
           getRootElement: getPortalElement,
@@ -1989,9 +2022,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$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();
       }
@@ -2278,10 +2314,10 @@ const decodeHTML = (html) => {
   return textArea.value;
 };
 
-const componentName$1y = getComponentName$1('enriched-text');
+const componentName$1z = getComponentName$1('enriched-text');
 
 class EnrichedText extends createBaseClass$1({
-  componentName: componentName$1y,
+  componentName: componentName$1z,
   baseSelector: ':host > div',
 }) {
   #origLinkRenderer;
@@ -2637,6 +2673,40 @@ 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) {
+        // 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 = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
@@ -3233,7 +3303,7 @@ const createClassSelectorSpecifier = (className, numOfRepeats) =>
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
 const createStyleMixin =
-  ({ mappings = {}, componentNameOverride = '' }) =>
+  ({ mappings = {}, componentNameOverride = '', style = '' }) =>
   (superclass) => {
     const componentName = componentNameOverride || superclass.componentName;
 
@@ -3355,6 +3425,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(style) ? style() : style;
+        if (css) injectStyle(css, this.#rootElement, { prepend: true });
+      }
+
       #addClassName(className) {
         (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
       }
@@ -3367,6 +3445,7 @@ const createStyleMixin =
           this.#addClassName(componentName);
 
           this.#createMappingStyle();
+          this.#createStaticStyle();
           this.#createComponentTheme();
           this.#createOverridesStyle();
 
@@ -4110,40 +4189,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 {
@@ -4169,7 +4234,7 @@ const portalMixin =
           }
         };
 
-        const getPortalElement = withWaitForShadowRoot(getRootElement);
+        const getPortalElement = waitForShadowRoot(getRootElement);
 
         super({
           getRootElement: getPortalElement,
@@ -4200,9 +4265,12 @@ const portalMixin =
         // 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();
       }
@@ -4582,11 +4650,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$1x = getComponentName('boolean-field-internal');
+const componentName$1y = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'invalid', 'readonly'];
 
-const BaseInputClass$h = createBaseInputClass({ componentName: componentName$1x, baseSelector: 'div' });
+const BaseInputClass$h = createBaseInputClass({ componentName: componentName$1y, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$h {
   static get observedAttributes() {
@@ -4685,14 +4753,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$1x}
+				<${componentName$1y}
 					tabindex="-1"
 					slot="input"
-				></${componentName$1x}>
+				></${componentName$1y}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$1x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$1y);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4770,10 +4838,10 @@ descope-enriched-text {
 
 `;
 
-const componentName$1w = getComponentName('checkbox');
+const componentName$1x = getComponentName('checkbox');
 
 const {
-  host: host$E,
+  host: host$F,
   component: component$1,
   checkboxElement,
   checkboxSurface,
@@ -4797,10 +4865,10 @@ const {
 const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$E, property: 'width' },
-      hostDirection: { ...host$E, property: 'direction' },
+      hostWidth: { ...host$F, property: 'width' },
+      hostDirection: { ...host$F, property: 'direction' },
 
-      fontSize: [host$E, checkboxElement, checkboxLabel$1],
+      fontSize: [host$F, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$a, errorMessage$d],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -4906,14 +4974,14 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1w,
+    componentName: componentName$1x,
   })
 );
 
-const componentName$1v = getComponentName$1('text');
+const componentName$1w = getComponentName$1('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1v,
+  componentName: componentName$1w,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -4952,15 +5020,15 @@ class RawText extends createBaseClass$1({
   }
 }
 
-const { host: host$D } = {
+const { host: host$E } = {
   host: { selector: () => ':host' },
 };
 
 const TextClass = compose$1(
   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' },
@@ -4981,12 +5049,12 @@ const TextClass = compose$1(
   componentNameValidationMixin$1,
 )(RawText);
 
-const componentName$1u = getComponentName$1('link');
+const componentName$1v = getComponentName$1('link');
 
 const observedAttrs$9 = ['href', 'readonly'];
 
 class RawLink extends createBaseClass$1({
-  componentName: componentName$1u,
+  componentName: componentName$1v,
   baseSelector: ':host a',
 }) {
   static get observedAttributes() {
@@ -5061,12 +5129,12 @@ const selectors$3 = {
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$4, host: host$C, wrapper: wrapper$1, link: link$3 } = selectors$3;
+const { anchor, text: text$4, host: host$D, wrapper: wrapper$1, link: link$3 } = selectors$3;
 
 const LinkClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$C, property: 'width' },
+      hostWidth: { ...host$D, property: 'width' },
       hostDirection: { ...text$4, property: 'direction' },
       textAlign: wrapper$1,
       textDecoration: {
@@ -5086,20 +5154,20 @@ const LinkClass = compose$1(
   componentNameValidationMixin$1,
 )(RawLink);
 
-customElements.define(componentName$1v, TextClass);
+customElements.define(componentName$1w, TextClass);
 
-customElements.define(componentName$1u, LinkClass);
+customElements.define(componentName$1v, LinkClass);
 
-customElements.define(componentName$1y, EnrichedTextClass);
+customElements.define(componentName$1z, EnrichedTextClass);
 
-customElements.define(componentName$1x, BooleanInputInternal);
+customElements.define(componentName$1y, BooleanInputInternal);
 
-customElements.define(componentName$1w, CheckboxClass);
+customElements.define(componentName$1x, CheckboxClass);
 
-const componentName$1t = getComponentName('switch-toggle');
+const componentName$1u = getComponentName('switch-toggle');
 
 const {
-  host: host$B,
+  host: host$C,
   component,
   checkboxElement: track,
   checkboxSurface: knob,
@@ -5123,8 +5191,8 @@ const {
 const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$B, property: 'width' },
-      hostDirection: { ...host$B, property: 'direction' },
+      hostWidth: { ...host$C, property: 'width' },
+      hostDirection: { ...host$C, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$9, errorMessage$c],
@@ -5240,17 +5308,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1t,
+    componentName: componentName$1u,
   })
 );
 
-customElements.define(componentName$1t, SwitchToggleClass);
+customElements.define(componentName$1u, SwitchToggleClass);
 
-const componentName$1s = getComponentName('loader-linear');
+const componentName$1t = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$1s, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$1t, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$1s;
+    return componentName$1t;
   }
 
   constructor() {
@@ -5290,18 +5358,18 @@ const selectors$2 = {
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$A } = selectors$2;
+const { after: after$1, host: host$B } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
     mappings: {
       hostDisplay: {},
-      hostWidth: { ...host$A, property: 'width' },
+      hostWidth: { ...host$B, property: 'width' },
       barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
       barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
       verticalPadding: [
-        { ...host$A, property: 'padding-top' },
-        { ...host$A, property: 'padding-bottom' },
+        { ...host$B, property: 'padding-top' },
+        { ...host$B, property: 'padding-bottom' },
       ],
       barBackgroundColor: { property: 'background-color' },
       barColor: { ...after$1, property: 'background-color' },
@@ -5315,11 +5383,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$1s, LoaderLinearClass);
+customElements.define(componentName$1t, LoaderLinearClass);
 
-const componentName$1r = getComponentName('loader-radial');
+const componentName$1s = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$1r, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$1s, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5367,11 +5435,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$1r, LoaderRadialClass);
+customElements.define(componentName$1s, LoaderRadialClass);
 
-const componentName$1q = getComponentName('container');
+const componentName$1r = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$1q, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$1r, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5434,9 +5502,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$1q, ContainerClass);
+customElements.define(componentName$1r, ContainerClass);
 
-const componentName$1p = getComponentName$1('combo-box');
+const componentName$1q = getComponentName$1('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5823,7 +5891,7 @@ const ComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$z,
+  host: host$A,
   inputField: inputField$6,
   inputElement: inputElement$3,
   placeholder: placeholder$3,
@@ -5855,10 +5923,10 @@ const {
 const ComboBoxClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$z, property: 'width' },
-      hostDirection: { ...host$z, property: 'direction' },
+      hostWidth: { ...host$A, property: 'width' },
+      hostDirection: { ...host$A, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$z],
+      fontSize: [{}, host$A],
       fontFamily: [label$a, placeholder$3, inputField$6, helperText$8, errorMessage$b],
       labelFontSize: { ...label$a, property: 'font-size' },
       labelFontWeight: { ...label$a, property: 'font-weight' },
@@ -6133,12 +6201,12 @@ const ComboBoxClass = compose$1(
       'loading',
       'style',
     ],
-    componentName: componentName$1p,
+    componentName: componentName$1q,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-customElements.define(componentName$1p, ComboBoxClass);
+customElements.define(componentName$1q, ComboBoxClass);
 
 const getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
@@ -6199,12 +6267,12 @@ const createImage = async (src, altText) => {
   }
 };
 
-const componentName$1o = getComponentName$1('image');
+const componentName$1p = getComponentName$1('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1o,
+  componentName: componentName$1p,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -6332,7 +6400,7 @@ const ImageClass = compose$1(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1n = getComponentName$1('icon');
+const componentName$1o = getComponentName$1('icon');
 
 const IconClass = compose$1(
   createStyleMixin$1({
@@ -6357,7 +6425,7 @@ const IconClass = compose$1(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],
-    componentName: componentName$1n,
+    componentName: componentName$1o,
   }),
 );
 
@@ -6372,7 +6440,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1m = getComponentName$1('button');
+const componentName$1n = getComponentName$1('button');
 
 const resetStyles = `
 	:host {
@@ -6410,7 +6478,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$y, label: label$9, slottedIcon } = {
+const { host: host$z, label: label$9, slottedIcon } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   slottedIcon: { selector: () => '::slotted(descope-icon)' },
@@ -6423,9 +6491,9 @@ const ButtonClass = compose$1(
   createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
-      hostMaxWidth: { ...host$y, property: 'max-width' },
+      hostMaxWidth: { ...host$z, property: 'max-width' },
       hostHeight: { property: 'height' },
-      hostDirection: { ...host$y, property: 'direction' },
+      hostDirection: { ...host$z, property: 'direction' },
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
@@ -6494,7 +6562,7 @@ const ButtonClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1m,
+    componentName: componentName$1n,
   }),
 );
 
@@ -6531,7 +6599,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$1m, ButtonClass);
+customElements.define(componentName$1n, ButtonClass);
 
 const SUPPORTED_FORMATS$1 = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -6887,7 +6955,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$1l = getComponentName('calendar');
+const componentName$1m = getComponentName('calendar');
 
 const observedAttrs$8 = [
   'initial-value',
@@ -6904,7 +6972,7 @@ const observedAttrs$8 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$g = createBaseInputClass({ componentName: componentName$1l, baseSelector: 'div' });
+const BaseInputClass$g = createBaseInputClass({ componentName: componentName$1m, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$g {
   static get observedAttributes() {
@@ -7525,10 +7593,10 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
 
-customElements.define(componentName$1l, CalendarClass);
+customElements.define(componentName$1m, CalendarClass);
 
 const {
-  host: host$x,
+  host: host$y,
   label: label$8,
   placeholder: placeholder$2,
   requiredIndicator: requiredIndicator$8,
@@ -7572,7 +7640,7 @@ const {
 
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host$x],
+  fontSize: [{}, host$y],
   fontFamily: [label$8, inputField$5, helperText$7, errorMessage$a],
 
   labelFontSize: { ...label$8, property: 'font-size' },
@@ -7599,9 +7667,9 @@ var textFieldMappings = {
     { ...requiredIndicator$8, property: '-webkit-text-fill-color' },
   ],
 
-  hostWidth: { ...host$x, property: 'width' },
-  hostMinWidth: { ...host$x, property: 'min-width' },
-  hostDirection: { ...host$x, property: 'direction' },
+  hostWidth: { ...host$y, property: 'width' },
+  hostMinWidth: { ...host$y, property: 'min-width' },
+  hostDirection: { ...host$y, property: 'direction' },
   inputDirection: { ...input$2, property: 'direction' },
 
   inputBackgroundColor: [
@@ -7710,11 +7778,11 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$1k = getComponentName$1('text-field');
+const componentName$1l = getComponentName$1('text-field');
 
 const observedAttrs$7 = ['type', 'label-type', 'copy-to-clipboard'];
 
-const customMixin$f = (superclass) =>
+const customMixin$g = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs$7.concat(superclass.observedAttributes || []);
@@ -7805,7 +7873,7 @@ const TextFieldClass = compose$1(
     useProxyTargets: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$f,
+  customMixin$g,
 )(
   createProxy$1({
     slots: ['prefix', 'suffix'],
@@ -7839,11 +7907,11 @@ const TextFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style', 'placeholder'],
-    componentName: componentName$1k,
+    componentName: componentName$1l,
   }),
 );
 
-customElements.define(componentName$1k, TextFieldClass);
+customElements.define(componentName$1l, TextFieldClass);
 
 // DateCounterClass allows us to add several counters to the input, and use them seperately.
 // For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
@@ -7963,12 +8031,12 @@ class DateCounter {
   }
 }
 
-const componentName$1j = getComponentName('date-field');
+const componentName$1k = getComponentName('date-field');
 
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR$2 = 'vaadin-popover';
-const BaseInputClass$f = createBaseInputClass({ componentName: componentName$1j, baseSelector: BASE_SELECTOR$2 });
+const BaseInputClass$f = createBaseInputClass({ componentName: componentName$1k, baseSelector: BASE_SELECTOR$2 });
 
 const dateFieldAttrs = [
   'format',
@@ -8803,7 +8871,7 @@ class RawDateFieldClass extends BaseInputClass$f {
 }
 
 const textVars$6 = TextFieldClass.cssVarList;
-const { host: host$w, input: input$1, inputEleRTL: inputEleRTL$1, toggleButton: toggleButton$1, overlay: overlay$3, backdrop: backdrop$2} = {
+const { host: host$x, input: input$1, inputEleRTL: inputEleRTL$1, toggleButton: toggleButton$1, overlay: overlay$3, backdrop: backdrop$2} = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
@@ -8817,8 +8885,8 @@ const DateFieldClass = compose(
   createStyleMixin({
     mappings: {
       iconMargin: { ...toggleButton$1, property: 'margin-inline-end' },
-      hostWidth: { ...host$w, property: 'width' },
-      hostDirection: { ...host$w, property: 'direction' },
+      hostWidth: { ...host$x, property: 'width' },
+      hostDirection: { ...host$x, property: 'direction' },
       textAlign: { ...input$1, property: 'text-align' },
       rtlInputDirection: { ...inputEleRTL$1, property: textVars$6.inputDirection },
       rtlInputAlignment: { ...inputEleRTL$1, property: textVars$6.inputTextAlign },
@@ -8906,10 +8974,10 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
 
-customElements.define(componentName$1j, DateFieldClass);
+customElements.define(componentName$1k, DateFieldClass);
 
-const componentName$1i = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$1i, baseSelector: ':host > div' }) {
+const componentName$1j = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$1j, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8959,7 +9027,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$1i, base
 }
 
 const textVars$5 = TextClass.cssVarList;
-const { host: host$v, before, after, text: text$3 } = {
+const { host: host$w, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
   after: { selector: '::after' },
@@ -8969,8 +9037,8 @@ const { host: host$v, before, after, text: text$3 } = {
 const DividerClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$v, property: 'width' },
-      hostPadding: { ...host$v, property: 'padding' },
+      hostWidth: { ...host$w, property: 'width' },
+      hostPadding: { ...host$w, property: 'padding' },
       hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
@@ -9012,7 +9080,7 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$1i, DividerClass);
+customElements.define(componentName$1j, DividerClass);
 
 // Kept in its own module (with no imports) so it can be unit tested without
 // pulling in the whole component / vaadin dependency chain.
@@ -9022,12 +9090,12 @@ const asciiPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const unicodePattern =
   "^[\\p{L}\\p{M}\\p{N}._%+'\\-]+@[\\p{L}\\p{M}\\p{N}.\\-]+\\.[\\p{L}\\p{M}][\\p{L}\\p{M}\\p{N}\\-]+$";
 
-const componentName$1h = getComponentName('email-field');
+const componentName$1i = getComponentName('email-field');
 
 const defaultAutocomplete = 'username';
 const defaultInputMode = 'email';
 
-const customMixin$e = (superclass) =>
+const customMixin$f = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     // On by default - `accept-unicode="false"` restores the pre-unicode field:
     // native `type="email"` validation and the ASCII pattern.
@@ -9103,7 +9171,7 @@ const EmailFieldClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
-  customMixin$e
+  customMixin$f
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -9138,11 +9206,11 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1h,
+    componentName: componentName$1i,
   })
 );
 
-customElements.define(componentName$1h, EmailFieldClass);
+customElements.define(componentName$1i, EmailFieldClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -9198,37 +9266,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$1g = getComponentName('logo');
+const componentName$1h = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$1g,
+  componentName: componentName$1h,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$1g, LogoClass);
+customElements.define(componentName$1h, LogoClass);
 
-const componentName$1f = getComponentName('totp-image');
+const componentName$1g = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$1f,
+  componentName: componentName$1g,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$1f, TotpImageClass);
+customElements.define(componentName$1g, TotpImageClass);
 
-const componentName$1e = getComponentName('notp-image');
+const componentName$1f = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$1e,
+  componentName: componentName$1f,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$1e, NotpImageClass);
+customElements.define(componentName$1f, NotpImageClass);
 
-const componentName$1d = getComponentName('number-field');
+const componentName$1e = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -9262,11 +9330,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
   })
 );
 
-customElements.define(componentName$1d, NumberFieldClass);
+customElements.define(componentName$1e, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -9289,7 +9357,7 @@ const toggleMaskVisibility = (input, value) => {
   }
 };
 
-const componentName$1c = getComponentName('passcode-internal');
+const componentName$1d = getComponentName('passcode-internal');
 
 const observedAttributes$6 = ['digits', 'loading'];
 
@@ -9302,7 +9370,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1c, baseSelector: 'div' });
+const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1d, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$e {
   static get observedAttributes() {
@@ -9543,11 +9611,11 @@ class PasscodeInternal extends BaseInputClass$e {
   }
 }
 
-const componentName$1b = getComponentName('passcode');
+const componentName$1c = getComponentName('passcode');
 
 const observedAttributes$5 = ['digits'];
 
-const customMixin$d = (superclass) =>
+const customMixin$e = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$5.concat(superclass.observedAttributes || []);
@@ -9588,18 +9656,18 @@ const customMixin$d = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$1c}
+      <${componentName$1d}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$1c}>
+      ><slot></slot></${componentName$1d}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$1c);
+      this.inputElement = this.shadowRoot.querySelector(componentName$1d);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -9616,7 +9684,7 @@ const customMixin$d = (superclass) =>
   };
 
 const {
-  host: host$u,
+  host: host$v,
   digitField,
   label: label$7,
   requiredIndicator: requiredIndicator$7,
@@ -9639,10 +9707,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$4.fontSize }, host$u],
+      fontSize: [{ ...digitField, property: textVars$4.fontSize }, host$v],
       hostWidth: { property: 'width' },
-      hostDirection: { ...host$u, property: 'direction' },
-      fontFamily: [host$u, { ...label$7 }],
+      hostDirection: { ...host$v, property: 'direction' },
+      fontFamily: [host$v, { ...label$7 }],
       labelFontWeight: { ...label$7, property: 'font-weight' },
       errorMessageFontWeight: { ...errorMessage$9, property: 'font-weight' },
       digitValueFontWeight: {
@@ -9687,7 +9755,7 @@ const PasscodeClass = compose(
   inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$d
+  customMixin$e
 )(
   createProxy({
     slots: [],
@@ -9768,13 +9836,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1b,
+    componentName: componentName$1c,
   })
 );
 
-customElements.define(componentName$1c, PasscodeInternal);
+customElements.define(componentName$1d, PasscodeInternal);
 
-customElements.define(componentName$1b, PasscodeClass);
+customElements.define(componentName$1c, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -9815,9 +9883,9 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$1a = getComponentName('password');
+const componentName$1b = getComponentName('password');
 
-const customMixin$c = (superclass) =>
+const customMixin$d = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
     static get observedAttributes() {
       return ['manual-visibility-toggle'];
@@ -9935,7 +10003,7 @@ const customMixin$c = (superclass) =>
   };
 
 const {
-  host: host$t,
+  host: host$u,
   inputField: inputField$4,
   inputElement: inputElement$2,
   inputElementPlaceholder,
@@ -9961,10 +10029,10 @@ const {
 const PasswordClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$t, property: 'width' },
-      hostMinWidth: { ...host$t, property: 'min-width' },
-      hostDirection: { ...host$t, property: 'direction' },
-      fontSize: [{}, host$t],
+      hostWidth: { ...host$u, property: 'width' },
+      hostMinWidth: { ...host$u, property: 'min-width' },
+      hostDirection: { ...host$u, property: 'direction' },
+      fontSize: [{}, host$u],
       fontFamily: [label$6, inputField$4, errorMessage$8, helperText$6],
       inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
@@ -10053,7 +10121,7 @@ const PasswordClass = compose(
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   passwordDraggableMixin,
-  customMixin$c
+  customMixin$d
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -10120,16 +10188,16 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1a,
+    componentName: componentName$1b,
   })
 );
 
-customElements.define(componentName$1a, PasswordClass);
+customElements.define(componentName$1b, PasswordClass);
 
-const componentName$19 = getComponentName('text-area');
+const componentName$1a = getComponentName('text-area');
 
 const {
-  host: host$s,
+  host: host$t,
   label: label$5,
   placeholder: placeholder$1,
   inputField: inputField$3,
@@ -10151,10 +10219,10 @@ const {
 const TextAreaClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$s, property: 'width' },
-      hostMinWidth: { ...host$s, property: 'min-width' },
-      hostDirection: { ...host$s, property: 'direction' },
-      fontSize: [host$s, textArea$2],
+      hostWidth: { ...host$t, property: 'width' },
+      hostMinWidth: { ...host$t, property: 'min-width' },
+      hostDirection: { ...host$t, property: 'direction' },
+      fontSize: [host$t, textArea$2],
       fontFamily: [label$5, inputField$3, helperText$5, errorMessage$7],
       labelFontSize: { ...label$5, property: 'font-size' },
       labelFontWeight: { ...label$5, property: 'font-weight' },
@@ -10215,11 +10283,11 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$19,
+    componentName: componentName$1a,
   })
 );
 
-customElements.define(componentName$19, TextAreaClass);
+customElements.define(componentName$1a, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -11456,7 +11524,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$18 = getComponentName('phone-field-internal');
+const componentName$19 = getComponentName('phone-field-internal');
 
 const commonAttrs$2 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -11477,7 +11545,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$2, countryAttrs, phoneAttrs, labelTypeAttrs$1);
 
-const BaseInputClass$d = createBaseInputClass({ componentName: componentName$18, baseSelector: 'div' });
+const BaseInputClass$d = createBaseInputClass({ componentName: componentName$19, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$d {
   static get observedAttributes() {
@@ -11857,14 +11925,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$d {
   }
 };
 
-customElements.define(componentName$18, PhoneFieldInternal$1);
+customElements.define(componentName$19, PhoneFieldInternal$1);
 
 const textVars$3 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$17 = getComponentName('phone-field');
+const componentName$18 = getComponentName('phone-field');
 
-const customMixin$b = (superclass) =>
+const customMixin$c = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -11876,10 +11944,10 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$18}
+				<${componentName$19}
 					tabindex="-1"
 					slot="input"
-				></${componentName$18}>
+				></${componentName$19}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
@@ -11890,7 +11958,7 @@ const customMixin$b = (superclass) =>
       // disable Vaadin's write-back.
       this.baseElement._forwardInputValue = () => {};
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$18);
+      this.inputElement = this.shadowRoot.querySelector(componentName$19);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11935,7 +12003,7 @@ const customMixin$b = (superclass) =>
   };
 
 const {
-  host: host$r,
+  host: host$s,
   label: label$4,
   requiredIndicator: requiredIndicator$4,
   inputField: inputField$2,
@@ -11962,7 +12030,7 @@ const PhoneFieldClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$r,
+        host$s,
         inputField$2,
         {
           selector: TextFieldClass.componentName,
@@ -11983,11 +12051,11 @@ const PhoneFieldClass = compose(
         },
       ],
       hostWidth: [
-        { ...host$r, property: 'width' },
+        { ...host$s, property: 'width' },
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
-      hostDirection: { ...host$r, property: 'direction' },
+      hostDirection: { ...host$s, property: 'direction' },
 
       inputBorderStyle: [
         { ...internalAfter, property: 'border-style' },
@@ -12072,7 +12140,7 @@ const PhoneFieldClass = compose(
   draggableMixin,
   inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$b
+  customMixin$c
 )(
   createProxy({
     slots: [],
@@ -12173,11 +12241,11 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$18,
   })
 );
 
-customElements.define(componentName$17, PhoneFieldClass);
+customElements.define(componentName$18, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) =>
   CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -12188,7 +12256,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$16 = getComponentName('phone-field-internal-input-box');
+const componentName$17 = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$4 = [
   'disabled',
@@ -12206,7 +12274,7 @@ const mapAttrs = {
   'phone-input-type': 'type',
 };
 
-const BaseInputClass$c = createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+const BaseInputClass$c = createBaseInputClass({ componentName: componentName$17, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$c {
   static get observedAttributes() {
@@ -12459,13 +12527,13 @@ class PhoneFieldInternal extends BaseInputClass$c {
   }
 }
 
-customElements.define(componentName$16, PhoneFieldInternal);
+customElements.define(componentName$17, PhoneFieldInternal);
 
 const textVars$2 = TextFieldClass.cssVarList;
 
-const componentName$15 = getComponentName('phone-input-box-field');
+const componentName$16 = getComponentName('phone-input-box-field');
 
-const customMixin$a = (superclass) =>
+const customMixin$b = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
@@ -12477,15 +12545,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$16}
+				<${componentName$17}
 					tabindex="-1"
 					slot="input"
-				></${componentName$16}>
+				></${componentName$17}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$16);
+      this.inputElement = this.shadowRoot.querySelector(componentName$17);
 
       syncAttrs$1(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -12515,7 +12583,7 @@ const customMixin$a = (superclass) =>
   };
 
 const {
-  host: host$q,
+  host: host$r,
   label: label$3,
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
@@ -12546,7 +12614,7 @@ const PhoneFieldInputBoxClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$q,
+        host$r,
         inputField$1,
         {
           selector: TextFieldClass.componentName,
@@ -12554,9 +12622,9 @@ const PhoneFieldInputBoxClass = compose(
         },
       ],
       fontFamily: [label$3, errorMessage$5, helperText$3],
-      hostWidth: { ...host$q, property: 'width' },
-      hostMinWidth: { ...host$q, property: 'min-width' },
-      hostDirection: { ...host$q, property: 'direction' },
+      hostWidth: { ...host$r, property: 'width' },
+      hostMinWidth: { ...host$r, property: 'min-width' },
+      hostDirection: { ...host$r, property: 'direction' },
 
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
@@ -12620,7 +12688,7 @@ const PhoneFieldInputBoxClass = compose(
   draggableMixin,
   inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$a
+  customMixin$b
 )(
   createProxy({
     slots: [],
@@ -12697,18 +12765,18 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$15,
+    componentName: componentName$16,
   })
 );
 
-customElements.define(componentName$15, PhoneFieldInputBoxClass);
+customElements.define(componentName$16, PhoneFieldInputBoxClass);
 
-const componentName$14 = getComponentName('new-password-internal');
+const componentName$15 = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
-const componentName$13 = getComponentName('policy-validation');
+const componentName$14 = getComponentName('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -12720,7 +12788,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$13, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$14, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -13017,7 +13085,7 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
   }
 }
 
-const { host: host$p, item, symbolDefault, symbolSuccess, symbolError } = {
+const { host: host$q, item, symbolDefault, symbolSuccess, symbolError } = {
   host: { selector: () => ':host > div' },
   item: { selector: () => '.item' },
   symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
@@ -13033,13 +13101,13 @@ const PolicyValidationClass = compose(
       fontSize: {},
       fontFamily: {},
       padding: {},
-      borderWidth: { ...host$p, property: 'border-width' },
-      borderStyle: { ...host$p, property: 'border-style' },
-      borderColor: { ...host$p, property: 'border-color' },
-      borderRadius: { ...host$p, property: 'border-radius' },
-      backgroundColor: { ...host$p, property: 'background-color' },
+      borderWidth: { ...host$q, property: 'border-width' },
+      borderStyle: { ...host$q, property: 'border-style' },
+      borderColor: { ...host$q, property: 'border-color' },
+      borderRadius: { ...host$q, property: 'border-radius' },
+      backgroundColor: { ...host$q, property: 'background-color' },
       textColor: { property: 'color' },
-      labelMargin: { ...host$p, property: 'gap' },
+      labelMargin: { ...host$q, property: 'gap' },
       itemsSpacing: { ...item, property: 'line-height' },
       itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
       itemSymbolErrorColor: { ...symbolError, property: 'color' },
@@ -13052,11 +13120,11 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$12 = getComponentName('new-password');
+const componentName$13 = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
-const customMixin$9 = (superclass) =>
+const customMixin$a = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
       super.init?.();
@@ -13066,18 +13134,18 @@ const customMixin$9 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$14}
+			<${componentName$15}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$14}>
+      </${componentName$15}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$14);
+      this.inputElement = this.shadowRoot.querySelector(componentName$15);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -13143,7 +13211,7 @@ const customMixin$9 = (superclass) =>
   };
 
 const {
-  host: host$o,
+  host: host$p,
   label: label$2,
   internalInputsWrapper,
   errorMessage: errorMessage$4,
@@ -13164,7 +13232,7 @@ const NewPasswordClass = compose(
   createStyleMixin({
     mappings: {
       fontSize: [
-        host$o,
+        host$p,
         {},
         {
           selector: PasswordClass.componentName,
@@ -13192,13 +13260,13 @@ const NewPasswordClass = compose(
       errorMessageIconRepeat: { ...errorMessage$4, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$4, property: 'background-position' },
       errorMessageFontSize: { ...errorMessage$4, property: 'font-size' },
-      hostWidth: { ...host$o, property: 'width' },
-      hostMinWidth: { ...host$o, property: 'min-width' },
+      hostWidth: { ...host$p, property: 'width' },
+      hostMinWidth: { ...host$p, property: 'min-width' },
       hostDirection: [
-        { ...host$o, property: 'direction' },
+        { ...host$p, property: 'direction' },
         { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
       ],
-      inputsRequiredIndicator: { ...host$o, property: 'content' },
+      inputsRequiredIndicator: { ...host$p, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
       policyPreviewBackgroundColor: {
         ...policyPreview,
@@ -13215,7 +13283,7 @@ const NewPasswordClass = compose(
   }),
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  customMixin$9
+  customMixin$a
 )(
   createProxy({
     slots: [],
@@ -13274,11 +13342,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$12,
+    componentName: componentName$13,
   })
 );
 
-customElements.define(componentName$13, PolicyValidationClass);
+customElements.define(componentName$14, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -13320,7 +13388,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$b = createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
+const BaseInputClass$b = createBaseInputClass({ componentName: componentName$15, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$b {
   static get observedAttributes() {
@@ -13563,11 +13631,11 @@ class NewPasswordInternal extends BaseInputClass$b {
   }
 }
 
-customElements.define(componentName$14, NewPasswordInternal);
+customElements.define(componentName$15, NewPasswordInternal);
 
-customElements.define(componentName$12, NewPasswordClass);
+customElements.define(componentName$13, NewPasswordClass);
 
-const componentName$11 = getComponentName('recaptcha');
+const componentName$12 = getComponentName('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
@@ -13575,7 +13643,7 @@ const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise', 'va
 const DEFAULT_FIELD_NAME = 'recaptcha';
 
 const BaseInputClass$a = createBaseInputClass({
-  componentName: componentName$11,
+  componentName: componentName$12,
   baseSelector: ':host > div',
 });
 class RawRecaptcha extends BaseInputClass$a {
@@ -13903,7 +13971,7 @@ class RawRecaptcha extends BaseInputClass$a {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$11, RecaptchaClass);
+customElements.define(componentName$12, RecaptchaClass);
 
 const getFileBase64 = (fileObj) =>
   new Promise((resolve) => {
@@ -13914,7 +13982,7 @@ const getFileBase64 = (fileObj) =>
 
 const getFilename = (fileObj) => fileObj.name.replace(/^.*\\/, '');
 
-const componentName$10 = getComponentName('upload-file');
+const componentName$11 = getComponentName('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -13929,7 +13997,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$10, baseSelector: ':host > div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$11, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -14105,7 +14173,7 @@ class RawUploadFile extends BaseInputClass$9 {
 }
 
 const buttonVars = ButtonClass.cssVarList;
-const { host: host$n, wrapper, icon: icon$4, title: title$1, description, requiredIndicator: requiredIndicator$2 } = {
+const { host: host$o, wrapper, icon: icon$4, title: title$1, description, requiredIndicator: requiredIndicator$2 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '::slotted(*)' },
@@ -14124,11 +14192,11 @@ const UploadFileClass = compose(
       borderWidth: {},
       borderStyle: {},
       borderRadius: {},
-      hostHeight: { ...host$n, property: 'height' },
-      hostWidth: { ...host$n, property: 'width' },
+      hostHeight: { ...host$o, property: 'height' },
+      hostWidth: { ...host$o, property: 'width' },
       hostPadding: { property: 'padding' },
       hostDirection: [
-        { ...host$n, property: 'direction' },
+        { ...host$o, property: 'direction' },
         { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
       ],
       gap: { ...wrapper },
@@ -14148,7 +14216,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$10, UploadFileClass);
+customElements.define(componentName$11, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -14236,10 +14304,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$$ = getComponentName('button-selection-group-internal');
+const componentName$10 = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$$
+  componentName$10
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -14393,7 +14461,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$m, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper: internalWrapper$1, errorMessage: errorMessage$3 } = {
+const { host: host$n, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper: internalWrapper$1, errorMessage: errorMessage$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -14402,9 +14470,9 @@ const { host: host$m, label: label$1, requiredIndicator: requiredIndicator$1, in
 };
 
 const buttonSelectionGroupMappings = {
-  hostWidth: { ...host$m, property: 'width' },
-  hostDirection: { ...host$m, property: 'direction' },
-  fontFamily: host$m,
+  hostWidth: { ...host$n, property: 'width' },
+  hostDirection: { ...host$n, property: 'direction' },
+  fontFamily: host$n,
   labelTextColor: [
     { ...label$1, property: 'color' },
     { ...requiredIndicator$1, property: 'color' },
@@ -14482,7 +14550,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$_ = getComponentName('button-selection-group');
+const componentName$$ = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14491,19 +14559,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$$}
+      <${componentName$10}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$$}>
+      </${componentName$10}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$$);
+      this.inputElement = this.shadowRoot.querySelector(componentName$10);
 
       // the inner *-internal dispatches a non-bubbling, non-composed `change`,
       // which never reaches the flow runtime. Re-emit standard input/change from
@@ -14536,16 +14604,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$_,
+    componentName: componentName$$,
   })
 );
 
-customElements.define(componentName$$, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$10, ButtonSelectionGroupInternalClass);
 
-const componentName$Z = getComponentName('button-selection-group-item');
+const componentName$_ = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$Z,
+  componentName: componentName$_,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -14656,14 +14724,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$Z, ButtonSelectionGroupItemClass);
+customElements.define(componentName$_, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$_, ButtonSelectionGroupClass);
+customElements.define(componentName$$, ButtonSelectionGroupClass);
 
-const componentName$Y = getComponentName('button-multi-selection-group-internal');
+const componentName$Z = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$Y
+  componentName$Z
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -14765,7 +14833,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$X = getComponentName('button-multi-selection-group');
+const componentName$Y = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14774,19 +14842,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$Y}
+      <${componentName$Z}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$Y}>
+      </${componentName$Z}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
 
       // the inner *-internal dispatches a non-bubbling, non-composed `change`,
       // which never reaches the flow runtime. Re-emit standard input/change from
@@ -14819,13 +14887,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$X,
+    componentName: componentName$Y,
   })
 );
 
-customElements.define(componentName$Y, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$Z, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$X, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$Y, ButtonMultiSelectionGroupClass);
 
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
@@ -14851,9 +14919,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$W = getComponentName('grid-text-column');
+const componentName$X = getComponentName('grid-text-column');
 
-customElements.define(componentName$W, GridTextColumnClass);
+customElements.define(componentName$X, GridTextColumnClass);
 
 class GridCustomColumnClass extends GridTextColumnClass {
   _defaultRenderer(cell, _col, model) {
@@ -14884,9 +14952,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
   }
 }
 
-const componentName$V = getComponentName('grid-custom-column');
+const componentName$W = getComponentName('grid-custom-column');
 
-customElements.define(componentName$V, GridCustomColumnClass);
+customElements.define(componentName$W, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -14942,9 +15010,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$U = getComponentName('grid-selection-column');
+const componentName$V = getComponentName('grid-selection-column');
 
-customElements.define(componentName$U, GridSelectionColumnClass);
+customElements.define(componentName$V, GridSelectionColumnClass);
 
 class GridItemDetailsColumnClass extends GridSortColumn {
   get sortable() {
@@ -14980,13 +15048,13 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$T = getComponentName('grid-item-details-column');
+const componentName$U = getComponentName('grid-item-details-column');
 
-customElements.define(componentName$T, GridItemDetailsColumnClass);
+customElements.define(componentName$U, GridItemDetailsColumnClass);
 
-customElements.define(componentName$1o, ImageClass);
+customElements.define(componentName$1p, ImageClass);
 
-customElements.define(componentName$1n, IconClass);
+customElements.define(componentName$1o, IconClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -15000,9 +15068,9 @@ var copyIconSrc = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
 var checkIconSrc = "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iY2hlY2staWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT4KPC9zdmc+Cg==";
 
-const componentName$S = getComponentName('code-snippet');
+const componentName$T = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$S, baseSelector: ':host > .wrapper' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$T, baseSelector: ':host > .wrapper' }) {
   static get observedAttributes() {
     return ['lang', 'inline', 'copy-button'];
   }
@@ -15338,7 +15406,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-customElements.define(componentName$S, CodeSnippetClass);
+customElements.define(componentName$T, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -15426,7 +15494,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
 </div>
   `;
 
-const componentName$R = getComponentName('grid');
+const componentName$S = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -15647,7 +15715,7 @@ const GridMixin = (superclass) =>
   };
 
 const {
-  host: host$l,
+  host: host$m,
   headerRow,
   headerRowCell,
   contentRow,
@@ -15700,15 +15768,15 @@ const GridClass = compose(
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
       backgroundColor: [
-        { ...host$l, property: 'background-color' },
+        { ...host$m, property: 'background-color' },
         { ...contentRow, property: 'background-color' },
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      borderColor: { ...host$l, property: 'border-color' },
-      borderWidth: { ...host$l, property: 'border-width' },
-      borderStyle: { ...host$l, property: 'border-style' },
-      borderRadius: { ...host$l, property: 'border-radius' },
+      borderColor: { ...host$m, property: 'border-color' },
+      borderWidth: { ...host$m, property: 'border-width' },
+      borderStyle: { ...host$m, property: 'border-style' },
+      borderRadius: { ...host$m, property: 'border-radius' },
       selectedBackgroundColor: [
         { ...selectedRow, property: 'background-color' },
         { ...selectedRowCell, property: 'background-color' },
@@ -15719,7 +15787,7 @@ const GridClass = compose(
         { ...rowSeparator, property: 'border-top-color' },
       ],
       resizeHandleColor: { ...resizeHandle, property: 'background-color' },
-      hostDirection: { ...host$l, property: 'direction', fallback: 'ltr' },
+      hostDirection: { ...host$m, property: 'direction', fallback: 'ltr' },
       toggleDetailsPanelButtonSize: [
         { ...toggleDetailsPanelButton, property: 'width' },
         { ...toggleDetailsPanelButton, property: 'height' },
@@ -15795,17 +15863,17 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
-customElements.define(componentName$R, GridClass);
+customElements.define(componentName$S, GridClass);
 
-const componentName$Q = getComponentName('modal');
+const componentName$R = getComponentName('modal');
 
 const observedAttrs$5 = ['opened'];
 
-const customMixin$8 = (superclass) =>
+const customMixin$9 = (superclass) =>
   class ModalMixinClass extends superclass {
     static get observedAttributes() {
       return [].concat(superclass.observedAttributes || [], observedAttrs$5);
@@ -15965,7 +16033,7 @@ const ModalClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  customMixin$8
+  customMixin$9
 )(
   createProxy({
     slots: [''],
@@ -15976,11 +16044,11 @@ const ModalClass = compose(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
-customElements.define(componentName$Q, ModalClass);
+customElements.define(componentName$R, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -15991,7 +16059,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$P = getComponentName('notification-card');
+const componentName$Q = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -16099,13 +16167,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
-customElements.define(componentName$P, NotificationCardClass);
+customElements.define(componentName$Q, NotificationCardClass);
 
-const componentName$O = getComponentName('notification');
+const componentName$P = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -16198,15 +16266,15 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$O, NotificationClass);
+customElements.define(componentName$P, NotificationClass);
 
-const componentName$N = getComponentName('mappings-field-internal');
+const componentName$O = getComponentName('mappings-field-internal');
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$8 {
   #errorItem;
@@ -16452,9 +16520,9 @@ class MappingsFieldInternal extends BaseInputClass$8 {
   }
 }
 
-const componentName$M = getComponentName('mappings-field');
+const componentName$N = getComponentName('mappings-field');
 
-const customMixin$7 = (superclass) =>
+const customMixin$8 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
     get defaultValues() {
       const defaultValuesAttr = this.getAttribute('default-values');
@@ -16481,14 +16549,14 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$N}
+      <${componentName$O}
         tabindex="-1"
-      ></${componentName$N}>
+      ></${componentName$O}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$N);
+      this.inputElement = this.shadowRoot.querySelector(componentName$O);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -16518,7 +16586,7 @@ const customMixin$7 = (superclass) =>
   };
 
 const {
-  host: host$k,
+  host: host$l,
   helperText: helperText$1,
   errorMessage: errorMessage$2,
   mappingItem,
@@ -16546,10 +16614,10 @@ const {
 const MappingsFieldClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$k, property: 'width' },
-      hostDirection: { ...host$k, property: 'direction' },
+      hostWidth: { ...host$l, property: 'width' },
+      hostDirection: { ...host$l, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host$k, { ...separator, property: 'margin-top' }],
+      fontSize: [{}, host$l, { ...separator, property: 'margin-top' }],
       fontFamily: [helperText$1, errorMessage$2, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
       labelsFontSize: { ...labelsText, property: 'font-size' },
@@ -16576,7 +16644,7 @@ const MappingsFieldClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin,
-  customMixin$7
+  customMixin$8
 )(
   createProxy({
     slots: [],
@@ -16624,13 +16692,13 @@ const MappingsFieldClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
-customElements.define(componentName$N, MappingsFieldInternal);
+customElements.define(componentName$O, MappingsFieldInternal);
 
-const componentName$L = getComponentName('mapping-item');
+const componentName$M = getComponentName('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -16643,7 +16711,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$L, baseSelector: 'div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -16798,14 +16866,14 @@ class MappingItem extends BaseInputClass$7 {
   }
 }
 
-customElements.define(componentName$L, MappingItem);
+customElements.define(componentName$M, MappingItem);
 
-customElements.define(componentName$M, MappingsFieldClass);
+customElements.define(componentName$N, MappingsFieldClass);
 
-const componentName$K = getComponentName$1('badge');
+const componentName$L = getComponentName$1('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$K,
+  componentName: componentName$L,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -16903,9 +16971,9 @@ var copyIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIH
 
 var checkIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOSAxNi4xNyA0LjgzIDEybC0xLjQyIDEuNDFMOSAxOSAyMSA3bC0xLjQxLTEuNDF6IiBmaWxsPSJjdXJyZW50Y29sb3IiLz4KPC9zdmc+Cg==";
 
-const componentName$J = getComponentName('user-attribute');
+const componentName$K = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$J,
+  componentName: componentName$K,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17272,7 +17340,7 @@ class RawUserAttribute extends createBaseClass({
   }
 }
 
-const { host: host$j, textFields, buttons: buttons$1, badge: badge$3, labelText, contentWrapper } = {
+const { host: host$k, textFields, buttons: buttons$1, badge: badge$3, labelText, contentWrapper } = {
   host: { selector: () => ':host' },
   textFields: { selector: 'descope-text' },
   labelText: { selector: 'descope-text[data-id="label-text"]' },
@@ -17284,11 +17352,11 @@ const { host: host$j, textFields, buttons: buttons$1, badge: badge$3, labelText,
 const UserAttributeClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$j, property: 'width' },
-      hostMinWidth: { ...host$j, property: 'min-width' },
-      hostMaxWidth: { ...host$j, property: 'max-width' },
+      hostWidth: { ...host$k, property: 'width' },
+      hostMinWidth: { ...host$k, property: 'min-width' },
+      hostMaxWidth: { ...host$k, property: 'max-width' },
       hostDirection: [
-        { ...host$j, property: 'direction' },
+        { ...host$k, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$3, property: BadgeClass.cssVarList.hostDirection },
@@ -17309,15 +17377,15 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$K, BadgeClass);
+customElements.define(componentName$L, BadgeClass);
 
-customElements.define(componentName$J, UserAttributeClass);
+customElements.define(componentName$K, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$I = getComponentName('user-auth-method');
+const componentName$J = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$I,
+  componentName: componentName$J,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17535,7 +17603,7 @@ class RawUserAuthMethod extends createBaseClass({
   }
 }
 
-const { host: host$i, textField: textField$2, buttons, badge: badge$2, textWrapper, methodIconSlot } = {
+const { host: host$j, textField: textField$2, buttons, badge: badge$2, textWrapper, methodIconSlot } = {
   host: { selector: () => ':host' },
   textField: { selector: 'descope-text' },
   buttons: { selector: 'descope-button' },
@@ -17547,11 +17615,11 @@ const { host: host$i, textField: textField$2, buttons, badge: badge$2, textWrapp
 const UserAuthMethodClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$i, property: 'width' },
-      hostMinWidth: { ...host$i, property: 'min-width' },
-      hostMaxWidth: { ...host$i, property: 'max-width' },
+      hostWidth: { ...host$j, property: 'width' },
+      hostMinWidth: { ...host$j, property: 'min-width' },
+      hostMaxWidth: { ...host$j, property: 'max-width' },
       hostDirection: [
-        { ...host$i, property: 'direction' },
+        { ...host$j, property: 'direction' },
         { ...textField$2, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$2, property: BadgeClass.cssVarList.hostDirection },
@@ -17568,11 +17636,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$I, UserAuthMethodClass);
+customElements.define(componentName$J, UserAuthMethodClass);
 
-const componentName$H = getComponentName('saml-group-mappings-internal');
+const componentName$I = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$H, baseSelector: '' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$I, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$6 {
   static get observedAttributes() {
@@ -17698,9 +17766,9 @@ class SamlGroupMappingsInternal extends BaseInputClass$6 {
   }
 }
 
-const componentName$G = getComponentName('saml-group-mappings');
+const componentName$H = getComponentName('saml-group-mappings');
 
-const customMixin$6 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
     init() {
       super.init?.();
@@ -17708,14 +17776,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$H}
+      <${componentName$I}
         tabindex="-1"
-      ></${componentName$H}>
+      ></${componentName$I}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$H);
+      this.inputElement = this.shadowRoot.querySelector(componentName$I);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -17736,7 +17804,7 @@ const customMixin$6 = (superclass) =>
     }
   };
 
-const { host: host$h, groupInput, errorMessage: errorMessage$1 } = {
+const { host: host$i, groupInput, errorMessage: errorMessage$1 } = {
   host: { selector: () => ':host' },
   groupInput: { selector: 'descope-text-field' },
   errorMessage: { selector: '::part(error-message)' },
@@ -17745,8 +17813,8 @@ const { host: host$h, groupInput, errorMessage: errorMessage$1 } = {
 const SamlGroupMappingsClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$h, property: 'width' },
-      hostDirection: { ...host$h, property: 'direction' },
+      hostWidth: { ...host$i, property: 'width' },
+      hostDirection: { ...host$i, property: 'direction' },
       groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
       errorMessageIcon: { ...errorMessage$1, property: 'background-image' },
       errorMessageIconSize: { ...errorMessage$1, property: 'background-size' },
@@ -17764,7 +17832,7 @@ const SamlGroupMappingsClass = compose(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$7
 )(
   createProxy({
     slots: [],
@@ -17800,17 +17868,17 @@ const SamlGroupMappingsClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
-customElements.define(componentName$H, SamlGroupMappingsInternal);
+customElements.define(componentName$I, SamlGroupMappingsInternal);
 
-customElements.define(componentName$G, SamlGroupMappingsClass);
+customElements.define(componentName$H, SamlGroupMappingsClass);
 
-const componentName$F = getComponentName('radio-button');
+const componentName$G = getComponentName('radio-button');
 
-const customMixin$5 = (superclass) =>
+const customMixin$6 = (superclass) =>
   class CustomMixin extends superclass {
     constructor() {
       super();
@@ -17867,18 +17935,18 @@ const RadioButtonClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
   componentNameValidationMixin,
-  customMixin$5
+  customMixin$6
 )(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-const componentName$E = getComponentName('radio-group');
+const componentName$F = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -17892,12 +17960,12 @@ const RadioGroupMixin = (superclass) =>
 
       // we are overriding vaadin children getter so it will run on our custom elements
       Object.defineProperty(this.baseElement, 'children', {
-        get: () => this.querySelectorAll(componentName$F),
+        get: () => this.querySelectorAll(componentName$G),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) =>
-        nodes.filter((node) => node.localName === componentName$F);
+        nodes.filter((node) => node.localName === componentName$G);
 
       // vaadin radio group missing some input properties
       this.baseElement.setCustomValidity = () => {};
@@ -18072,14 +18140,14 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$E,
+    componentName: componentName$F,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$F, RadioButtonClass);
+customElements.define(componentName$G, RadioButtonClass);
 
-customElements.define(componentName$E, RadioGroupClass);
+customElements.define(componentName$F, RadioGroupClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -18179,7 +18247,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$D = getComponentName('scopes-list');
+const componentName$E = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$6 = ({ id, desc, required = false }, _, ref) => {
@@ -18198,7 +18266,7 @@ const itemRenderer$6 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$D, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$E, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18303,9 +18371,9 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
 
-const componentName$C = getComponentName$1('list-item');
+const componentName$D = getComponentName$1('list-item');
 
-const customMixin$4 = (superclass) =>
+const customMixin$5 = (superclass) =>
   class ListItemMixinClass extends superclass {
     constructor() {
       super();
@@ -18358,16 +18426,16 @@ const ListItemClass = compose$1(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$4,
+  customMixin$5,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$C, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$D, baseSelector: 'slot' }));
 
-customElements.define(componentName$C, ListItemClass);
+customElements.define(componentName$D, ListItemClass);
 
-const componentName$B = getComponentName$1('list');
+const componentName$C = getComponentName$1('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$B,
+  componentName: componentName$C,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18549,15 +18617,15 @@ const ListClass = compose$1(
   componentNameValidationMixin$1,
 )(RawList);
 
-customElements.define(componentName$B, ListClass);
+customElements.define(componentName$C, ListClass);
 
-customElements.define(componentName$D, ScopesListClass);
+customElements.define(componentName$E, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$A = getComponentName('third-party-app-logo');
+const componentName$B = getComponentName('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$A,
+  componentName: componentName$B,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -18654,9 +18722,9 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$A, ThirdPartyAppLogoClass);
+customElements.define(componentName$B, ThirdPartyAppLogoClass);
 
-const componentName$z = getComponentName('security-questions-setup');
+const componentName$A = getComponentName('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -18675,7 +18743,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$z, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$A, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18783,7 +18851,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$z, 'Error parsing questions attribute', e);
+      console.error(componentName$A, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18890,9 +18958,9 @@ const SecurityQuestionsSetupClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$z, SecurityQuestionsSetupClass);
+customElements.define(componentName$A, SecurityQuestionsSetupClass);
 
-const componentName$y = getComponentName('security-questions-verify');
+const componentName$z = getComponentName('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -18916,7 +18984,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$y, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$z, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18990,7 +19058,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$y, 'Error parsing questions attribute', e);
+      console.error(componentName$z, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -19124,7 +19192,7 @@ const SecurityQuestionsVerifyClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$y, SecurityQuestionsVerifyClass);
+customElements.define(componentName$z, SecurityQuestionsVerifyClass);
 
 // Matches any character that is not a digit, whitespace, or phone formatting character (+, -, (, ))
 const INVALID_PHONE_CHARS_RE = /[^\d\s+\-()]/;
@@ -19133,7 +19201,7 @@ const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$x = getComponentName('hybrid-field');
+const componentName$y = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
@@ -19200,7 +19268,7 @@ const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 const BaseClass$9 = createBaseClass({
-  componentName: componentName$x,
+  componentName: componentName$y,
   baseSelector: 'div',
 });
 
@@ -19591,11 +19659,11 @@ const HybridFieldClass = compose(
   componentNameValidationMixin
 )(RawHybridField);
 
-customElements.define(componentName$x, HybridFieldClass);
+customElements.define(componentName$y, HybridFieldClass);
 
-const componentName$w = getComponentName('alert');
+const componentName$x = getComponentName('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -19716,13 +19784,13 @@ const AlertClass = compose(
   componentNameValidationMixin
 )(RawAlert);
 
-customElements.define(componentName$w, AlertClass);
+customElements.define(componentName$x, AlertClass);
 
-const componentName$v = getComponentName('hcaptcha');
+const componentName$w = getComponentName('hcaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key'];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: ':host > div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$5 {
   static get observedAttributes() {
     return observedAttributes$1.concat(BaseInputClass$5.observedAttributes || []);
@@ -19850,7 +19918,7 @@ const HcaptchaClass = compose(
   componentNameValidationMixin
 )(RawHcaptcha);
 
-customElements.define(componentName$v, HcaptchaClass);
+customElements.define(componentName$w, HcaptchaClass);
 
 const direction$1 = 'ltr';
 
@@ -20034,7 +20102,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';
 
@@ -20233,7 +20301,7 @@ const mode = {
 
 const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
   { mode },
-  componentName$1m,
+  componentName$1n,
 );
 
 const button = {
@@ -20353,7 +20421,7 @@ const button = {
   },
 };
 
-const vars$1b = {
+const vars$1c = {
   ...compVars$9,
   ...helperVars$6,
 };
@@ -20361,138 +20429,138 @@ const vars$1b = {
 var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: button,
-  vars: vars$1b
+  vars: vars$1c
 });
 
 const globalRefs$J = getThemeRefs$1(globals);
-const vars$1a = TextClass.cssVarList;
+const vars$1b = TextClass.cssVarList;
 
 const text$1 = {
-  [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$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: text$1,
-  vars: vars$1a
+  vars: vars$1b
 });
 
 const globalRefs$I = getThemeRefs$1(globals);
-const vars$19 = LinkClass.cssVarList;
+const vars$1a = LinkClass.cssVarList;
 
 const link = {
-  [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,
     },
   },
 };
@@ -20500,37 +20568,37 @@ const link = {
 var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: link,
-  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',
     },
   },
 };
@@ -20538,10 +20606,10 @@ const enrichedText = {
 var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: enrichedText,
-  vars: vars$18
+  vars: vars$19
 });
 
-const componentName$u = getComponentName$1('input-wrapper');
+const componentName$v = getComponentName$1('input-wrapper');
 const globalRefs$G = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
@@ -20671,114 +20739,114 @@ const [theme$2, refs$1] = createHelperVars$1(
       inputTextSecurity: 'disc',
     },
   },
-  componentName$u,
+  componentName$v,
 );
 
 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 globalRefs$E = getThemeRefs$1(globals);
@@ -20787,46 +20855,46 @@ const [helperTheme$6, helperRefs$6] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$K,
+  componentName$L,
 );
 
 const { shadowColor: shadowColor$8 } = helperRefs$6;
 
-const vars$16 = BadgeClass.cssVarList;
+const vars$17 = BadgeClass.cssVarList;
 
 const badge = {
   ...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,
     },
   },
 
@@ -20845,58 +20913,58 @@ const badge = {
   // },
 
   _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}`,
     },
   },
 };
@@ -20904,12 +20972,12 @@ const badge = {
 var badge$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: badge,
-  vars: vars$16
+  vars: vars$17
 });
 
-const componentName$t = getComponentName$1('avatar');
+const componentName$u = getComponentName$1('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$t,
+  componentName: componentName$u,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -20987,7 +21055,7 @@ class RawAvatar extends createBaseClass$1({
   }
 }
 
-const { host: host$g, editableBadge, avatar: avatar$2 } = {
+const { host: host$h, editableBadge, avatar: avatar$2 } = {
   host: { selector: () => ':host' },
   editableBadge: { selector: '> .editableBadge' },
   avatar: { selector: 'vaadin-avatar' },
@@ -20997,12 +21065,12 @@ const AvatarClass = compose$1(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$g, property: 'width' },
-        { ...host$g, property: 'min-width' },
+        { ...host$h, property: 'width' },
+        { ...host$h, property: 'min-width' },
       ],
-      hostHeight: { ...host$g, property: 'height' },
-      cursor: [avatar$2, host$g],
-      hostDirection: { ...host$g, property: 'direction' },
+      hostHeight: { ...host$h, property: 'height' },
+      cursor: [avatar$2, host$h],
+      hostDirection: { ...host$h, property: 'direction' },
       avatarTextColor: { ...avatar$2, property: 'color' },
       avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
       editableIconColor: { ...editableBadge, property: 'color' },
@@ -21060,37 +21128,37 @@ 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$1 = {};
 
 var icon$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: icon$1,
-  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$s = getComponentName$1('apps-list');
+const componentName$t = getComponentName$1('apps-list');
 
 const itemRenderer$5 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -21110,7 +21178,7 @@ const itemRenderer$5 = ({ name, icon, url }, _, ref) => `
   </a>
 `;
 
-const customMixin$3 = (superclass) =>
+const customMixin$4 = (superclass) =>
   class AppsListMixinClass extends superclass {
     // size controls both item logo size and font size
     get size() {
@@ -21216,13 +21284,13 @@ const AppsListClass = compose$1(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$3,
+  customMixin$4,
 )(
   createProxy$1({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$s,
+    componentName: componentName$t,
     style: () => `
       :host {
         width: 100%;
@@ -21257,60 +21325,60 @@ const AppsListClass = compose$1(
   }),
 );
 
-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,
     },
   },
 };
@@ -21318,7 +21386,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);
@@ -21327,7 +21395,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$B,
+  componentName$C,
 );
 
 const { shadowColor: shadowColor$7 } = helperRefs$5;
@@ -21388,7 +21456,7 @@ const list = {
   },
 };
 
-const vars$11 = {
+const vars$12 = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -21396,53 +21464,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$r = getComponentName$1('multi-select-combo-box');
+const componentName$s = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -21550,9 +21618,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() {
@@ -21821,7 +21915,7 @@ const multiSelectComboBoxMixin = (superclass) =>
   };
 
 const {
-  host: host$f,
+  host: host$g,
   inputField,
   inputElement,
   placeholder,
@@ -21861,9 +21955,9 @@ const {
 const MultiSelectComboBoxClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$f, property: 'width' },
-      hostDirection: { ...host$f, property: 'direction' },
-      fontSize: [{}, host$f],
+      hostWidth: { ...host$g, property: 'width' },
+      hostDirection: { ...host$g, property: 'direction' },
+      fontSize: [{}, host$g],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [
         label,
@@ -22105,13 +22199,13 @@ const MultiSelectComboBoxClass = compose$1(
 
 		`,
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-    componentName: componentName$r,
+    componentName: componentName$s,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   }),
 );
 
-const componentName$q = getComponentName$1('multi-line-mappings');
-const BaseClass$8 = createBaseClass$1({ componentName: componentName$q });
+const componentName$r = getComponentName$1('multi-line-mappings');
+const BaseClass$8 = createBaseClass$1({ componentName: componentName$r });
 
 const parseJSON = (value, fallback, source = 'unknown') => {
   if (typeof value !== 'string' || !value?.trim()) {
@@ -22818,7 +22912,7 @@ class RawMultiLineMappingsClass extends BaseClass$8 {
   }
 }
 
-const host$e = { selector: () => ':host' };
+const host$f = { selector: () => ':host' };
 const rows = { selector: '.rows' };
 const row = { selector: '.row' };
 const addAction = { selector: '.add-action' };
@@ -22826,9 +22920,9 @@ const addAction = { selector: '.add-action' };
 const MultiLineMappingsClass = compose$1(
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$e, property: 'width' },
+      hostWidth: { ...host$f, property: 'width' },
       hostDirection: [
-        { ...host$e, property: 'direction' },
+        { ...host$f, property: 'direction' },
         {
           selector: MultiSelectComboBoxClass.componentName,
           property: MultiSelectComboBoxClass.cssVarList.hostDirection,
@@ -22849,122 +22943,122 @@ const MultiLineMappingsClass = compose$1(
   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$p = getComponentName$1('autocomplete-field-internal');
+const componentName$q = getComponentName$1('autocomplete-field-internal');
 
 const BaseInputClass$4 = createBaseInputClass$1({
-  componentName: componentName$p,
+  componentName: componentName$q,
   baseSelector: '',
 });
 const observedAttrs$4 = [];
@@ -23169,9 +23263,9 @@ class AutocompleteFieldInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$o = getComponentName$1('autocomplete-field');
+const componentName$p = getComponentName$1('autocomplete-field');
 
-const customMixin$2 = (superclass) =>
+const customMixin$3 = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -23190,15 +23284,15 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$p}
+      <${componentName$q}
         tabindex="-1"
-      ></${componentName$p}>
+      ></${componentName$q}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$p,
+        componentName$q,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -23238,7 +23332,7 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$d } = {
+const { host: host$e } = {
   host: { selector: () => ':host' },
 };
 
@@ -23248,9 +23342,9 @@ const AutocompleteFieldClass = compose$1(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$d, property: 'width' },
-      hostDirection: { ...host$d, property: 'direction' },
-      fontSize: { ...host$d },
+      hostWidth: { ...host$e, property: 'width' },
+      hostDirection: { ...host$e, property: 'direction' },
+      fontSize: { ...host$e },
       checkmarkDisplay: {
         selector: ComboBoxClass.componentName,
         property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
@@ -23288,7 +23382,7 @@ const AutocompleteFieldClass = compose$1(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$2,
+  customMixin$3,
 )(
   createProxy$1({
     slots: [],
@@ -23317,34 +23411,34 @@ const AutocompleteFieldClass = compose$1(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   }),
 );
 
-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) => {
@@ -23571,7 +23665,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$n = getComponentName$1('address-field-internal');
+const componentName$o = getComponentName$1('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -23582,7 +23676,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$3 = createBaseInputClass$1({
-  componentName: componentName$n,
+  componentName: componentName$o,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -23689,9 +23783,9 @@ const AddressFieldInternal = compose$1(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$m = getComponentName$1('address-field');
+const componentName$n = getComponentName$1('address-field');
 
-const customMixin$1 = (superclass) =>
+const customMixin$2 = (superclass) =>
   class AddressFieldMixinClass extends superclass {
     get defaultValue() {
       return this.getAttribute('default-value');
@@ -23718,15 +23812,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$n}
+      <${componentName$o}
         tabindex="-1"
-      ></${componentName$n}>
+      ></${componentName$o}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$n,
+        componentName$o,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -23767,7 +23861,7 @@ const customMixin$1 = (superclass) =>
     }
   };
 
-const { host: host$c } = {
+const { host: host$d } = {
   host: { selector: () => ':host' },
 };
 
@@ -23777,8 +23871,8 @@ const AddressFieldClass = compose$1(
   }),
   createStyleMixin$1({
     mappings: {
-      hostWidth: { ...host$c, property: 'width' },
-      hostDirection: { ...host$c, property: 'direction' },
+      hostWidth: { ...host$d, property: 'width' },
+      hostDirection: { ...host$d, property: 'direction' },
     },
   }),
   draggableMixin$1,
@@ -23788,7 +23882,7 @@ const AddressFieldClass = compose$1(
     proxyParentValidation: true,
   }),
   componentNameValidationMixin$1,
-  customMixin$1,
+  customMixin$2,
 )(
   createProxy$1({
     slots: [],
@@ -23804,7 +23898,7 @@ const AddressFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$n} {
+  ${componentName$o} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -23812,30 +23906,30 @@ const AddressFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$n} ::slotted {
+  ${componentName$o} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$m,
+    componentName: componentName$n,
   }),
 );
 
-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=";
@@ -23857,12 +23951,12 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$l = getComponentName$1('timer');
+const componentName$m = getComponentName$1('timer');
 
 const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$7 = createBaseClass$1({
-  componentName: componentName$l,
+  componentName: componentName$m,
   baseSelector: ':host > .wrapper',
 });
 
@@ -24015,7 +24109,7 @@ class RawTimer extends BaseClass$7 {
   }
 }
 
-const { host: host$b, icon, timer: timer$2 } = {
+const { host: host$c, icon, timer: timer$2 } = {
   host: { selector: () => ':host' },
   icon: { selector: () => '.icon' },
   timer: { selector: () => '.timer' },
@@ -24036,8 +24130,8 @@ const TimerClass = compose$1(
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
-      hostWidth: { ...host$b, property: 'width' },
-      hostDirection: { ...host$b, property: 'direction' },
+      hostWidth: { ...host$c, property: 'width' },
+      hostDirection: { ...host$c, property: 'direction' },
       iconColor: { ...icon, property: IconClass.cssVarList.fill },
     },
   }),
@@ -24046,44 +24140,44 @@ const TimerClass = compose$1(
 )(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$k = getComponentName$1('timer-button');
+const componentName$l = getComponentName$1('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -24114,7 +24208,7 @@ const mapTimerAttrs = {
 };
 
 const BaseClass$6 = createBaseClass$1({
-  componentName: componentName$k,
+  componentName: componentName$l,
   baseSelector: ':host > div',
 });
 
@@ -24266,7 +24360,7 @@ class RawTimerButton extends BaseClass$6 {
 }
 
 const {
-  host: host$a,
+  host: host$b,
   nestedTimer,
   nestedButton,
   timerInsideNotReversed,
@@ -24291,8 +24385,8 @@ const TimerButtonClass = compose$1(
     mappings: {
       gap: {},
       flexDirection: {},
-      hostWidth: { ...host$a, property: 'width' },
-      hostDirection: { ...host$a, property: 'direction' },
+      hostWidth: { ...host$b, property: 'width' },
+      hostDirection: { ...host$b, property: 'direction' },
       timerTextColor: {
         ...nestedTimer,
         property: TimerClass.cssVarList.textColor,
@@ -24324,40 +24418,40 @@ const TimerButtonClass = compose$1(
 )(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})`,
       },
     },
   },
@@ -24366,12 +24460,12 @@ const timerButton = {
 var timerButton$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: timerButton,
-  vars: vars$W
+  vars: vars$X
 });
 
-const componentName$j = getComponentName$1('password-strength');
+const componentName$k = getComponentName$1('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$j,
+  componentName: componentName$k,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -24485,7 +24579,7 @@ class RawPasswordStrength extends createBaseClass$1({
   }
 }
 
-const { host: host$9, bar, filledBar, barsContainer, text } = {
+const { host: host$a, bar, filledBar, barsContainer, text } = {
   host: { selector: () => ':host' },
   bar: { selector: ' .bar' },
   barsContainer: { selector: ' .bars-container' },
@@ -24498,11 +24592,11 @@ const PasswordStrengthClass = compose$1(
   createStyleMixin$1({
     mappings: {
       hostWidth: [
-        { ...host$9, property: 'width' },
-        { ...host$9, property: 'min-width' },
+        { ...host$a, property: 'width' },
+        { ...host$a, property: 'min-width' },
       ],
-      hostDirection: { ...host$9, property: 'direction' },
-      hostMinWidth: { ...host$9, property: 'min-width' },
+      hostDirection: { ...host$a, property: 'direction' },
+      hostMinWidth: { ...host$a, property: 'min-width' },
       barHeight: { ...bar, property: 'height' },
       barBorderRadius: { ...bar, property: 'border-radius' },
       emptyBarColor: { ...bar, property: 'background-color' },
@@ -24562,22 +24656,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$i = getComponentName$1('collapsible-container');
+const componentName$j = getComponentName$1('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$i,
+  componentName: componentName$j,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -24828,7 +24922,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$i,
+  componentName$j,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$4;
@@ -24929,7 +25023,7 @@ const collapsibleContainer = {
   },
 };
 
-const vars$U = {
+const vars$V = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -24937,10 +25031,10 @@ const vars$U = {
 var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: collapsibleContainer,
-  vars: vars$U
+  vars: vars$V
 });
 
-const componentName$h = getComponentName$1('recovery-codes');
+const componentName$i = getComponentName$1('recovery-codes');
 
 const NO_ACTION = 'none';
 const DEFAULT_ERROR_MESSAGE =
@@ -24982,7 +25076,7 @@ const itemRenderer$4 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$h,
+  componentName: componentName$i,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -25395,60 +25489,388 @@ const RecoveryCodesClass = compose$1(
 )(RawRecoveryCodes);
 
 const globalRefs$t = getThemeRefs$1(globals);
-const vars$T = RecoveryCodesClass.cssVarList;
+const vars$U = RecoveryCodesClass.cssVarList;
 const textVars$1 = TextClass.cssVarList;
 
 const recoveryCodes = {
-  [vars$T.hostMinWidth]: '190px',
-  [vars$T.hostDirection]: globalRefs$t.direction,
-  [vars$T.iconColor]: useVar$1(textVars$1.textColor),
-  [vars$T.iconSize]: useVar$1(textVars$1.fontSize),
+  [vars$U.hostMinWidth]: '190px',
+  [vars$U.hostDirection]: globalRefs$t.direction,
+  [vars$U.iconColor]: useVar$1(textVars$1.textColor),
+  [vars$U.iconSize]: useVar$1(textVars$1.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$h = getComponentName$1('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$1(() => 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$1 = (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$9 = { 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$1(
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: [
+        { ...host$9, property: 'width' },
+        {
+          ...comboBox,
+          property: MultiSelectComboBoxClass.cssVarList.hostWidth,
+        },
+      ],
+      hostDirection: [
+        { ...host$9, 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$1,
+)(
+  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$h,
+  }),
+);
+
+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
 });
 
@@ -33337,7 +33759,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$1q
+  componentName$1r
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -33493,7 +33915,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$1i
+  componentName$1j
 );
 
 const divider = {
@@ -33647,7 +34069,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$1r
+  componentName$1s
 );
 
 const loaderRadial = {
@@ -34739,7 +35161,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: {
@@ -34850,7 +35272,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,
@@ -34897,6 +35319,7 @@ const components = {
   passwordStrength: passwordStrength$1,
   collapsibleContainer: collapsibleContainer$1,
   recoveryCodes: recoveryCodes$1,
+  activeSessions: activeSessions$1,
   hcaptcha: hcaptcha$1,
   outboundApps: outboundApps$1,
   outboundAppButton: outboundAppButton$1,
@@ -34918,7 +35341,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: {
@@ -34974,13 +35397,17 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-customElements.define(componentName$p, AutocompleteFieldInternal);
+customElements.define(componentName$s, MultiSelectComboBoxClass);
+
+customElements.define(componentName$h, ActiveSessionsClass);
 
-customElements.define(componentName$o, AutocompleteFieldClass);
+customElements.define(componentName$q, AutocompleteFieldInternal);
 
-customElements.define(componentName$n, AddressFieldInternal);
+customElements.define(componentName$p, AutocompleteFieldClass);
 
-customElements.define(componentName$m, AddressFieldClass);
+customElements.define(componentName$o, AddressFieldInternal);
+
+customElements.define(componentName$n, AddressFieldClass);
 
 const componentName$1 = getComponentName$1('anchored');
 
@@ -35179,20 +35606,18 @@ const AnchoredClass = compose$1(componentNameValidationMixin$1)(RawAnchored);
 
 customElements.define(componentName$1, AnchoredClass);
 
-customElements.define(componentName$t, AvatarClass);
+customElements.define(componentName$u, AvatarClass);
 
-customElements.define(componentName$s, AppsListClass);
+customElements.define(componentName$t, AppsListClass);
 
 customElements.define(componentName$9, AttachmentClass);
 
-customElements.define(componentName$i, CollapsibleContainerClass);
+customElements.define(componentName$j, CollapsibleContainerClass);
 
 customElements.define(componentName$b, CountrySubdivisionCityFieldInternal);
 
 customElements.define(componentName$a, CountrySubdivisionCityFieldClass);
 
-customElements.define(componentName$r, MultiSelectComboBoxClass);
-
 customElements.define(componentName$5, FilterRowClass);
 
 customElements.define(componentName$4, FilterRowsClass);
@@ -35203,7 +35628,7 @@ customElements.define(componentName$6, MonthDayFieldPickerClass);
 
 customElements.define(componentName$7, MonthDayFieldClass);
 
-customElements.define(componentName$q, MultiLineMappingsClass);
+customElements.define(componentName$r, MultiLineMappingsClass);
 
 customElements.define(componentName$d, MultiSsoClass);
 
@@ -35211,12 +35636,12 @@ customElements.define(componentName$f, OutboundAppButtonClass);
 
 customElements.define(componentName$g, OutboundAppsClass);
 
-customElements.define(componentName$j, PasswordStrengthClass);
+customElements.define(componentName$k, PasswordStrengthClass);
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   PasswordStrengthClass: PasswordStrengthClass,
-  componentName: componentName$j
+  componentName: componentName$k
 });
 
 // NOTICE: This component registers with a DIFFERENT name than its file name
@@ -35323,11 +35748,11 @@ const HoneypotClass = compose$1(componentNameValidationMixin$1)(RawHoneypot);
 
 customElements.define(componentName, HoneypotClass);
 
-customElements.define(componentName$h, RecoveryCodesClass);
+customElements.define(componentName$i, RecoveryCodesClass);
 
-customElements.define(componentName$l, TimerClass);
+customElements.define(componentName$m, TimerClass);
 
-customElements.define(componentName$k, TimerButtonClass);
+customElements.define(componentName$l, TimerButtonClass);
 
 customElements.define(componentName$c, TooltipClass);
 
@@ -35351,5 +35776,5 @@ var calcScore = /*#__PURE__*/Object.freeze({
   options: options
 });
 
-export { AddressFieldClass, AlertClass, AnchoredClass, AppsListClass, AttachmentClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, FilterClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MonthDayFieldClass, MonthDayFieldPickerClass, MultiLineMappingsClass, MultiSelectComboBoxClass, MultiSsoClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, UserPasskeysClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { ActiveSessionsClass, AddressFieldClass, AlertClass, AnchoredClass, AppsListClass, AttachmentClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, FilterClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MonthDayFieldClass, MonthDayFieldPickerClass, MultiLineMappingsClass, MultiSelectComboBoxClass, MultiSsoClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, OutboundAppButtonClass, OutboundAppsClass, PasscodeClass, PasswordClass, PasswordStrengthClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, RecoveryCodesClass, SamlGroupMappingsClass, ScopesListClass, SecurityQuestionsSetupClass, SecurityQuestionsVerifyClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, ThirdPartyAppLogoClass, TimerButtonClass, TimerClass, TooltipClass, TotpImageClass, TrustedDevicesClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, UserPasskeysClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map