@descope/web-components-ui 3.7.0 → 3.7.1

package/dist/index.esm.js

@@ -145,6 +145,8 @@ const observeAttributes$1 = (
   });
 
   observer.observe(ele, { attributes: true });
+
+  return { disconnect: () => observer.disconnect() };
 };
 
 // calling the callback with this object: { addedNodes, removedNodes }
@@ -194,13 +196,12 @@ const getComponentName$1 = (name) => kebabCaseJoin$1(DESCOPE_PREFIX$1, name);
 
 const getCssVarName$1 = (...args) => `--${kebabCaseJoin$1(...args)}`;
 
-const forwardAttrs$1 = (source, dest, options = {}) => {
+const forwardAttrs$1 = (source, dest, options = {}) =>
   observeAttributes$1(
     source,
     createSyncAttrsCb$1(source, dest, options.mapAttrs),
     options,
   );
-};
 
 const forwardProps$3 = (src, target, props = []) => {
   if (!props.length) return;
@@ -213,7 +214,6 @@ const forwardProps$3 = (src, target, props = []) => {
             return src[prop];
           },
           set(v) {
-            // eslint-disable-next-line no-param-reassign
             src[prop] = v;
           },
         },
@@ -228,8 +228,9 @@ const injectStyle = (cssString, ref, { prepend = false } = {}) => {
   let style;
 
   try {
+    // eslint-disable-next-line no-undef
     style = new CSSStyleSheet();
-  } catch (e) {
+  } catch {
     // fallback for browsers that don't support CSSStyleSheet
     return generateStyleTagFallback(cssString, ref, { prepend });
   }
@@ -2092,6 +2093,55 @@ const inputOverrideValidConstraintsMixin$1 = (superclass) =>
     }
   };
 
+// stretchMixin — manages the `[stretch]` attribute as a pure layout signal.
+// Consumers own the visual implementation (`:host([stretch])` CSS in their
+// own init styles, theme rules, etc.).
+//
+// triggers — for leaf components that own a "full size" attribute.
+//   Each entry maps an attribute/value pair; when the attribute matches the
+//   value, `[stretch]` is toggled on the host.
+//   Example: stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] })
+//   Use on components like descope-button that expose a full-width prop.
+//
+// Propagating `[stretch]` from slotted children (e.g. for anchored components)
+// is the consumer's responsibility. descope-anchored implements this correctly
+// via per-anchor MutationObservers on assignedElements({ flatten: true }),
+// which also handles React props set after init.
+
+const stretchMixin =
+  ({ triggers = [] } = {}) =>
+  (superclass) =>
+    class StretchMixinClass extends superclass {
+      static get observedAttributes() {
+        return [
+          ...(superclass.observedAttributes || []),
+          ...triggers.map(({ attr }) => attr),
+        ];
+      }
+
+      get #shouldStretch() {
+        return triggers.some(
+          ({ attr, value }) => this.getAttribute(attr) === value,
+        );
+      }
+
+      #syncStretch = () => {
+        this.toggleAttribute('stretch', this.#shouldStretch);
+      };
+
+      attributeChangedCallback(name, oldVal, newVal) {
+        super.attributeChangedCallback?.(name, oldVal, newVal);
+        if (oldVal !== newVal) {
+          this.#syncStretch();
+        }
+      }
+
+      init() {
+        super.init?.();
+        this.#syncStretch();
+      }
+    };
+
 const disableRules = [
   'blockquote',
   'list',
@@ -2116,9 +2166,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$1p = getComponentName$1('enriched-text');
+const componentName$1q = getComponentName$1('enriched-text');
 
-class EnrichedText extends createBaseClass$1({ componentName: componentName$1p, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$1q, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -4418,11 +4468,11 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$1o = getComponentName('boolean-field-internal');
+const componentName$1p = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'invalid', 'readonly'];
 
-const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1o, baseSelector: 'div' });
+const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1p, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$e {
   static get observedAttributes() {
@@ -4521,14 +4571,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$1o}
+				<${componentName$1p}
 					tabindex="-1"
 					slot="input"
-				></${componentName$1o}>
+				></${componentName$1p}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$1o);
+      this.inputElement = this.shadowRoot.querySelector(componentName$1p);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -4606,7 +4656,7 @@ descope-enriched-text {
 
 `;
 
-const componentName$1n = getComponentName('checkbox');
+const componentName$1o = getComponentName('checkbox');
 
 const {
   host: host$x,
@@ -4742,14 +4792,14 @@ const CheckboxClass = compose(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1n,
+    componentName: componentName$1o,
   })
 );
 
-const componentName$1m = getComponentName$1('text');
+const componentName$1n = getComponentName$1('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$1m,
+  componentName: componentName$1n,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -4815,12 +4865,12 @@ const TextClass = compose$1(
   componentNameValidationMixin$1,
 )(RawText);
 
-const componentName$1l = getComponentName$1('link');
+const componentName$1m = getComponentName$1('link');
 
 const observedAttrs$7 = ['href', 'readonly'];
 
 class RawLink extends createBaseClass$1({
-  componentName: componentName$1l,
+  componentName: componentName$1m,
   baseSelector: ':host a',
 }) {
   static get observedAttributes() {
@@ -4919,17 +4969,17 @@ const LinkClass = compose$1(
   componentNameValidationMixin$1,
 )(RawLink);
 
-customElements.define(componentName$1m, TextClass);
+customElements.define(componentName$1n, TextClass);
 
-customElements.define(componentName$1l, LinkClass);
+customElements.define(componentName$1m, LinkClass);
 
-customElements.define(componentName$1p, EnrichedTextClass);
+customElements.define(componentName$1q, EnrichedTextClass);
 
-customElements.define(componentName$1o, BooleanInputInternal);
+customElements.define(componentName$1p, BooleanInputInternal);
 
-customElements.define(componentName$1n, CheckboxClass);
+customElements.define(componentName$1o, CheckboxClass);
 
-const componentName$1k = getComponentName('switch-toggle');
+const componentName$1l = getComponentName('switch-toggle');
 
 const {
   host: host$u,
@@ -5073,17 +5123,17 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$1k,
+    componentName: componentName$1l,
   })
 );
 
-customElements.define(componentName$1k, SwitchToggleClass);
+customElements.define(componentName$1l, SwitchToggleClass);
 
-const componentName$1j = getComponentName('loader-linear');
+const componentName$1k = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$1j, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$1k, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$1j;
+    return componentName$1k;
   }
 
   constructor() {
@@ -5148,11 +5198,11 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$1j, LoaderLinearClass);
+customElements.define(componentName$1k, LoaderLinearClass);
 
-const componentName$1i = getComponentName('loader-radial');
+const componentName$1j = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$1i, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$1j, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -5200,11 +5250,11 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$1i, LoaderRadialClass);
+customElements.define(componentName$1j, LoaderRadialClass);
 
-const componentName$1h = getComponentName('container');
+const componentName$1i = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$1h, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$1i, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5267,9 +5317,9 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$1h, ContainerClass);
+customElements.define(componentName$1i, ContainerClass);
 
-const componentName$1g = getComponentName$1('combo-box');
+const componentName$1h = getComponentName$1('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -5962,12 +6012,12 @@ const ComboBoxClass = compose$1(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-    componentName: componentName$1g,
+    componentName: componentName$1h,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
 );
 
-customElements.define(componentName$1g, ComboBoxClass);
+customElements.define(componentName$1h, ComboBoxClass);
 
 const getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
@@ -6030,12 +6080,12 @@ const createImage = async (src, altText) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$1f = getComponentName$1('image');
+const componentName$1g = getComponentName$1('image');
 
 const srcAttrs = ['src', 'src-dark'];
 
 class RawImage extends createBaseClass$1({
-  componentName: componentName$1f,
+  componentName: componentName$1g,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -6163,7 +6213,7 @@ const ImageClass = compose$1(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1e = getComponentName$1('icon');
+const componentName$1f = getComponentName$1('icon');
 
 const IconClass = compose$1(
   createStyleMixin$1({
@@ -6184,7 +6234,7 @@ const IconClass = compose$1(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1e,
+    componentName: componentName$1f,
   }),
 );
 
@@ -6199,7 +6249,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1d = getComponentName$1('button');
+const componentName$1e = getComponentName$1('button');
 
 const resetStyles = `
 	:host {
@@ -6246,6 +6296,7 @@ const { host: host$r, label: label$9, slottedIcon } = {
 let loadingIndicatorStyles;
 
 const ButtonClass = compose$1(
+  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),
   createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
@@ -6319,7 +6370,7 @@ const ButtonClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1d,
+    componentName: componentName$1e,
   }),
 );
 
@@ -6356,7 +6407,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$1d, ButtonClass);
+customElements.define(componentName$1e, ButtonClass);
 
 const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
 
@@ -6712,7 +6763,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$1c = getComponentName('calendar');
+const componentName$1d = getComponentName('calendar');
 
 const observedAttrs$6 = [
   'initial-value',
@@ -6729,7 +6780,7 @@ const observedAttrs$6 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1c, baseSelector: 'div' });
+const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1d, baseSelector: 'div' });
 
 class RawCalendar extends BaseInputClass$d {
   static get observedAttributes() {
@@ -7350,7 +7401,7 @@ const CalendarClass = compose(
   componentNameValidationMixin
 )(RawCalendar);
 
-customElements.define(componentName$1c, CalendarClass);
+customElements.define(componentName$1d, CalendarClass);
 
 const {
   host: host$q,
@@ -7522,7 +7573,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$1b = getComponentName('text-field');
+const componentName$1c = getComponentName('text-field');
 
 const observedAttrs$5 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -7644,11 +7695,11 @@ const TextFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$1b,
+    componentName: componentName$1c,
   })
 );
 
-customElements.define(componentName$1b, TextFieldClass);
+customElements.define(componentName$1c, 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
@@ -7768,12 +7819,12 @@ class DateCounter {
   }
 }
 
-const componentName$1a = getComponentName('date-field');
+const componentName$1b = 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 = 'vaadin-popover';
-const BaseInputClass$c = createBaseInputClass({ componentName: componentName$1a, baseSelector: BASE_SELECTOR });
+const BaseInputClass$c = createBaseInputClass({ componentName: componentName$1b, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = [
   'format',
@@ -8711,10 +8762,10 @@ const DateFieldClass = compose(
   componentNameValidationMixin
 )(RawDateFieldClass);
 
-customElements.define(componentName$1a, DateFieldClass);
+customElements.define(componentName$1b, DateFieldClass);
 
-const componentName$19 = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$19, baseSelector: ':host > div' }) {
+const componentName$1a = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$1a, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -8817,9 +8868,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$19, DividerClass);
+customElements.define(componentName$1a, DividerClass);
 
-const componentName$18 = getComponentName('email-field');
+const componentName$19 = getComponentName('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -8888,11 +8939,11 @@ const EmailFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$18,
+    componentName: componentName$19,
   })
 );
 
-customElements.define(componentName$18, EmailFieldClass);
+customElements.define(componentName$19, EmailFieldClass);
 
 const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -8948,37 +8999,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$17 = getComponentName('logo');
+const componentName$18 = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$17,
+  componentName: componentName$18,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$17, LogoClass);
+customElements.define(componentName$18, LogoClass);
 
-const componentName$16 = getComponentName('totp-image');
+const componentName$17 = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$16,
+  componentName: componentName$17,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$16, TotpImageClass);
+customElements.define(componentName$17, TotpImageClass);
 
-const componentName$15 = getComponentName('notp-image');
+const componentName$16 = getComponentName('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$15,
+  componentName: componentName$16,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
 
-customElements.define(componentName$15, NotpImageClass);
+customElements.define(componentName$16, NotpImageClass);
 
-const componentName$14 = getComponentName('number-field');
+const componentName$15 = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -9012,11 +9063,11 @@ const NumberFieldClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$15,
   })
 );
 
-customElements.define(componentName$14, NumberFieldClass);
+customElements.define(componentName$15, NumberFieldClass);
 
 const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
 const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
@@ -9039,7 +9090,7 @@ const toggleMaskVisibility = (input, value) => {
   }
 };
 
-const componentName$13 = getComponentName('passcode-internal');
+const componentName$14 = getComponentName('passcode-internal');
 
 const observedAttributes$6 = ['digits', 'loading'];
 
@@ -9052,7 +9103,7 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$b = createBaseInputClass({ componentName: componentName$13, baseSelector: 'div' });
+const BaseInputClass$b = createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass$b {
   static get observedAttributes() {
@@ -9265,7 +9316,7 @@ class PasscodeInternal extends BaseInputClass$b {
   }
 }
 
-const componentName$12 = getComponentName('passcode');
+const componentName$13 = getComponentName('passcode');
 
 const observedAttributes$5 = ['digits'];
 
@@ -9310,18 +9361,18 @@ const customMixin$d = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$13}
+      <${componentName$14}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$13}>
+      ><slot></slot></${componentName$14}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$13);
+      this.inputElement = this.shadowRoot.querySelector(componentName$14);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -9490,13 +9541,13 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$12,
+    componentName: componentName$13,
   })
 );
 
-customElements.define(componentName$13, PasscodeInternal);
+customElements.define(componentName$14, PasscodeInternal);
 
-customElements.define(componentName$12, PasscodeClass);
+customElements.define(componentName$13, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) =>
   class PasswordDraggableMixinClass extends superclass {
@@ -9537,7 +9588,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$11 = getComponentName('password');
+const componentName$12 = getComponentName('password');
 
 const customMixin$c = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -9831,13 +9882,13 @@ const PasswordClass = compose(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$11,
+    componentName: componentName$12,
   })
 );
 
-customElements.define(componentName$11, PasswordClass);
+customElements.define(componentName$12, PasswordClass);
 
-const componentName$10 = getComponentName('text-area');
+const componentName$11 = getComponentName('text-area');
 
 const {
   host: host$l,
@@ -9926,11 +9977,11 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$10,
+    componentName: componentName$11,
   })
 );
 
-customElements.define(componentName$10, TextAreaClass);
+customElements.define(componentName$11, TextAreaClass);
 
 var CountryCodes = [
   // United States should be the first option
@@ -11167,7 +11218,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 	</div>
 `;
 
-const componentName$$ = getComponentName('phone-field-internal');
+const componentName$10 = getComponentName('phone-field-internal');
 
 const commonAttrs$2 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
@@ -11188,7 +11239,7 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$2, countryAttrs, phoneAttrs, labelTypeAttrs$1);
 
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$$, baseSelector: 'div' });
+const BaseInputClass$a = createBaseInputClass({ componentName: componentName$10, baseSelector: 'div' });
 
 let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
   static get observedAttributes() {
@@ -11545,12 +11596,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
   }
 };
 
-customElements.define(componentName$$, PhoneFieldInternal$1);
+customElements.define(componentName$10, PhoneFieldInternal$1);
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$_ = getComponentName('phone-field');
+const componentName$$ = getComponentName('phone-field');
 
 const customMixin$b = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -11564,15 +11615,15 @@ const customMixin$b = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$$}
+				<${componentName$10}
 					tabindex="-1"
 					slot="input"
-				></${componentName$$}>
+				></${componentName$10}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$$);
+      this.inputElement = this.shadowRoot.querySelector(componentName$10);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -11855,11 +11906,11 @@ const PhoneFieldClass = compose(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$_,
+    componentName: componentName$$,
   })
 );
 
-customElements.define(componentName$_, PhoneFieldClass);
+customElements.define(componentName$$, PhoneFieldClass);
 
 const getCountryByCodeId = (countryCode) =>
   CountryCodes.find((c) => c.code === countryCode)?.dialCode;
@@ -11870,7 +11921,7 @@ const matchingParenthesis = (val) => {
   return openParenMatches?.length === closeParenMatches?.length;
 };
 
-const componentName$Z = getComponentName('phone-field-internal-input-box');
+const componentName$_ = getComponentName('phone-field-internal-input-box');
 
 const observedAttributes$4 = [
   'disabled',
@@ -11888,7 +11939,7 @@ const mapAttrs = {
   'phone-input-type': 'type',
 };
 
-const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Z, baseSelector: 'div' });
+const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$_, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass$9 {
   static get observedAttributes() {
@@ -12141,11 +12192,11 @@ class PhoneFieldInternal extends BaseInputClass$9 {
   }
 }
 
-customElements.define(componentName$Z, PhoneFieldInternal);
+customElements.define(componentName$_, PhoneFieldInternal);
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$Y = getComponentName('phone-input-box-field');
+const componentName$Z = getComponentName('phone-input-box-field');
 
 const customMixin$a = (superclass) =>
   class PhoneFieldInputBoxMixinClass extends superclass {
@@ -12159,15 +12210,15 @@ const customMixin$a = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$Z}
+				<${componentName$_}
 					tabindex="-1"
 					slot="input"
-				></${componentName$Z}>
+				></${componentName$_}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$Z);
+      this.inputElement = this.shadowRoot.querySelector(componentName$_);
 
       syncAttrs$1(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -12379,18 +12430,18 @@ const PhoneFieldInputBoxClass = compose(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Y,
+    componentName: componentName$Z,
   })
 );
 
-customElements.define(componentName$Y, PhoneFieldInputBoxClass);
+customElements.define(componentName$Z, PhoneFieldInputBoxClass);
 
-const componentName$X = getComponentName('new-password-internal');
+const componentName$Y = getComponentName('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
-const componentName$W = getComponentName('policy-validation');
+const componentName$X = getComponentName('policy-validation');
 
 const overrideAttrs = [
   'data-password-policy-value-minlength',
@@ -12400,7 +12451,7 @@ const overrideAttrs = [
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$W, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass({ componentName: componentName$X, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -12672,7 +12723,7 @@ const PolicyValidationClass = compose(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$V = getComponentName('new-password');
+const componentName$W = getComponentName('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -12686,18 +12737,18 @@ const customMixin$9 = (superclass) =>
       const externalInputAttr = this.getAttribute('external-input');
 
       template.innerHTML = `
-			<${componentName$X}
+			<${componentName$Y}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
         external-input="${externalInputAttr}"
 			>
-      </${componentName$X}>
+      </${componentName$Y}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$X);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Y);
 
       if (this.getAttribute('external-input') === 'true') {
         this.initExternalInput();
@@ -12892,11 +12943,11 @@ const NewPasswordClass = compose(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$V,
+    componentName: componentName$W,
   })
 );
 
-customElements.define(componentName$W, PolicyValidationClass);
+customElements.define(componentName$X, PolicyValidationClass);
 
 const passwordAttrPrefixRegex = /^password-/;
 const confirmAttrPrefixRegex = /^confirm-/;
@@ -12936,7 +12987,7 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$X, baseSelector: 'div' });
+const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$Y, baseSelector: 'div' });
 
 class NewPasswordInternal extends BaseInputClass$8 {
   static get observedAttributes() {
@@ -13179,21 +13230,21 @@ class NewPasswordInternal extends BaseInputClass$8 {
   }
 }
 
-customElements.define(componentName$X, NewPasswordInternal);
+customElements.define(componentName$Y, NewPasswordInternal);
 
-customElements.define(componentName$V, NewPasswordClass);
+customElements.define(componentName$W, NewPasswordClass);
 
-const componentName$U = getComponentName('recaptcha');
+const componentName$V = getComponentName('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
-const BaseClass$7 = createBaseClass({
-  componentName: componentName$U,
+const BaseClass$6 = createBaseClass({
+  componentName: componentName$V,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass$7 {
+class RawRecaptcha extends BaseClass$6 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseClass$7.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$6.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -13486,7 +13537,7 @@ class RawRecaptcha extends BaseClass$7 {
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
-customElements.define(componentName$U, RecaptchaClass);
+customElements.define(componentName$V, RecaptchaClass);
 
 const getFileBase64 = (fileObj) =>
   new Promise((resolve) => {
@@ -13497,7 +13548,7 @@ const getFileBase64 = (fileObj) =>
 
 const getFilename = (fileObj) => fileObj.name.replace(/^.*\\/, '');
 
-const componentName$T = getComponentName('upload-file');
+const componentName$U = getComponentName('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -13512,7 +13563,7 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$T, baseSelector: ':host > div' });
+const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$U, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass$7 {
   static get observedAttributes() {
@@ -13731,7 +13782,7 @@ const UploadFileClass = compose(
   componentNameValidationMixin
 )(RawUploadFile);
 
-customElements.define(componentName$T, UploadFileClass);
+customElements.define(componentName$U, UploadFileClass);
 
 const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
@@ -13819,10 +13870,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$S = getComponentName('button-selection-group-internal');
+const componentName$T = getComponentName('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$S
+  componentName$T
 ) {
   getSelectedNode() {
     return this.items.find((item) => item.hasAttribute('selected'));
@@ -14065,7 +14116,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$R = getComponentName('button-selection-group');
+const componentName$S = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14074,19 +14125,19 @@ const buttonSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$S}
+      <${componentName$T}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$S}>
+      </${componentName$T}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$S);
+      this.inputElement = this.shadowRoot.querySelector(componentName$T);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -14111,16 +14162,16 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
-customElements.define(componentName$S, ButtonSelectionGroupInternalClass);
+customElements.define(componentName$T, ButtonSelectionGroupInternalClass);
 
-const componentName$Q = getComponentName('button-selection-group-item');
+const componentName$R = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
-  componentName: componentName$Q,
+  componentName: componentName$R,
   baseSelector: ':host > descope-button',
 }) {
   get size() {
@@ -14231,14 +14282,14 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-customElements.define(componentName$Q, ButtonSelectionGroupItemClass);
+customElements.define(componentName$R, ButtonSelectionGroupItemClass);
 
-customElements.define(componentName$R, ButtonSelectionGroupClass);
+customElements.define(componentName$S, ButtonSelectionGroupClass);
 
-const componentName$P = getComponentName('button-multi-selection-group-internal');
+const componentName$Q = getComponentName('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-  componentName$P
+  componentName$Q
 ) {
   #getSelectedNodes() {
     return this.items.filter((item) => item.hasAttribute('selected'));
@@ -14340,7 +14391,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$O = getComponentName('button-multi-selection-group');
+const componentName$P = getComponentName('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14349,19 +14400,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$P}
+      <${componentName$Q}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$P}>
+      </${componentName$Q}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$P);
+      this.inputElement = this.shadowRoot.querySelector(componentName$Q);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -14386,13 +14437,13 @@ const ButtonMultiSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
-customElements.define(componentName$P, ButtonMultiSelectionGroupInternalClass);
+customElements.define(componentName$Q, ButtonMultiSelectionGroupInternalClass);
 
-customElements.define(componentName$O, ButtonMultiSelectionGroupClass);
+customElements.define(componentName$P, ButtonMultiSelectionGroupClass);
 
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
@@ -14418,9 +14469,9 @@ class GridTextColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$N = getComponentName('grid-text-column');
+const componentName$O = getComponentName('grid-text-column');
 
-customElements.define(componentName$N, GridTextColumnClass);
+customElements.define(componentName$O, GridTextColumnClass);
 
 class GridCustomColumnClass extends GridTextColumnClass {
   _defaultRenderer(cell, _col, model) {
@@ -14451,9 +14502,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
   }
 }
 
-const componentName$M = getComponentName('grid-custom-column');
+const componentName$N = getComponentName('grid-custom-column');
 
-customElements.define(componentName$M, GridCustomColumnClass);
+customElements.define(componentName$N, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -14509,9 +14560,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
-const componentName$L = getComponentName('grid-selection-column');
+const componentName$M = getComponentName('grid-selection-column');
 
-customElements.define(componentName$L, GridSelectionColumnClass);
+customElements.define(componentName$M, GridSelectionColumnClass);
 
 class GridItemDetailsColumnClass extends GridSortColumn {
   get sortable() {
@@ -14547,13 +14598,13 @@ class GridItemDetailsColumnClass extends GridSortColumn {
   }
 }
 
-const componentName$K = getComponentName('grid-item-details-column');
+const componentName$L = getComponentName('grid-item-details-column');
 
-customElements.define(componentName$K, GridItemDetailsColumnClass);
+customElements.define(componentName$L, GridItemDetailsColumnClass);
 
-customElements.define(componentName$1f, ImageClass);
+customElements.define(componentName$1g, ImageClass);
 
-customElements.define(componentName$1e, IconClass);
+customElements.define(componentName$1f, IconClass);
 
 const decode = (input) => {
   const txt = document.createElement('textarea');
@@ -14567,9 +14618,9 @@ var copyIconSrc = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
 var checkIconSrc = "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iY2hlY2staWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT4KPC9zdmc+Cg==";
 
-const componentName$J = getComponentName('code-snippet');
+const componentName$K = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > .wrapper' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > .wrapper' }) {
   static get observedAttributes() {
     return ['lang', 'inline', 'copy-button'];
   }
@@ -14905,7 +14956,7 @@ const CodeSnippetClass = compose(
   componentNameValidationMixin
 )(CodeSnippet$1);
 
-customElements.define(componentName$J, CodeSnippetClass);
+customElements.define(componentName$K, CodeSnippetClass);
 
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
@@ -14993,7 +15044,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
 </div>
   `;
 
-const componentName$I = getComponentName('grid');
+const componentName$J = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -15362,13 +15413,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$I,
+    componentName: componentName$J,
   })
 );
 
-customElements.define(componentName$I, GridClass);
+customElements.define(componentName$J, GridClass);
 
-const componentName$H = getComponentName('multi-select-combo-box');
+const componentName$I = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -16023,14 +16074,14 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-    componentName: componentName$H,
+    componentName: componentName$I,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$H, MultiSelectComboBoxClass);
+customElements.define(componentName$I, MultiSelectComboBoxClass);
 
-const componentName$G = getComponentName('modal');
+const componentName$H = getComponentName('modal');
 
 const observedAttrs$3 = ['opened'];
 
@@ -16179,11 +16230,11 @@ const ModalClass = compose(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$G,
+    componentName: componentName$H,
   })
 );
 
-customElements.define(componentName$G, ModalClass);
+customElements.define(componentName$H, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -16194,7 +16245,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$F = getComponentName('notification-card');
+const componentName$G = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -16302,13 +16353,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$F,
+    componentName: componentName$G,
   })
 );
 
-customElements.define(componentName$F, NotificationCardClass);
+customElements.define(componentName$G, NotificationCardClass);
 
-const componentName$E = getComponentName('notification');
+const componentName$F = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -16401,15 +16452,15 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$E,
+    componentName: componentName$F,
   })
 );
 
-customElements.define(componentName$E, NotificationClass);
+customElements.define(componentName$F, NotificationClass);
 
-const componentName$D = getComponentName('mappings-field-internal');
+const componentName$E = getComponentName('mappings-field-internal');
 
-const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$6 {
   #errorItem;
@@ -16655,7 +16706,7 @@ class MappingsFieldInternal extends BaseInputClass$6 {
   }
 }
 
-const componentName$C = getComponentName('mappings-field');
+const componentName$D = getComponentName('mappings-field');
 
 const customMixin$7 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -16684,14 +16735,14 @@ const customMixin$7 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$D}
+      <${componentName$E}
         tabindex="-1"
-      ></${componentName$D}>
+      ></${componentName$E}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$D);
+      this.inputElement = this.shadowRoot.querySelector(componentName$E);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -16827,13 +16878,13 @@ const MappingsFieldClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$C,
+    componentName: componentName$D,
   })
 );
 
-customElements.define(componentName$D, MappingsFieldInternal);
+customElements.define(componentName$E, MappingsFieldInternal);
 
-const componentName$B = getComponentName('mapping-item');
+const componentName$C = getComponentName('mapping-item');
 
 const inputAttrs = [
   'size',
@@ -16846,7 +16897,7 @@ const inputAttrs = [
   'st-error-message-icon-padding',
 ];
 
-const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
+const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$5 {
   static get observedAttributes() {
@@ -17001,16 +17052,20 @@ class MappingItem extends BaseInputClass$5 {
   }
 }
 
-customElements.define(componentName$B, MappingItem);
+customElements.define(componentName$C, MappingItem);
 
-customElements.define(componentName$C, MappingsFieldClass);
+customElements.define(componentName$D, MappingsFieldClass);
 
-const componentName$A = getComponentName$1('badge');
+const componentName$B = getComponentName$1('badge');
 
 class RawBadge extends createBaseClass$1({
-  componentName: componentName$A,
+  componentName: componentName$B,
   baseSelector: ':host > div',
 }) {
+  static get observedAttributes() {
+    return ['data-attachment-size', 'shrink-to-indicator-threshold'];
+  }
+
   constructor() {
     super();
 
@@ -17036,6 +17091,24 @@ class RawBadge extends createBaseClass$1({
       this,
     );
   }
+
+  get shrinkToIndicatorThreshold() {
+    return this.getAttribute('shrink-to-indicator-threshold') || 65;
+  }
+
+  #handleShrinkToIndicator(value) {
+    this.toggleAttribute(
+      'shrink-to-indicator',
+      parseFloat(value) < this.shrinkToIndicatorThreshold,
+    );
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback?.(name, oldVal, newVal);
+    if (name === 'data-attachment-size' && oldVal !== newVal) {
+      this.#handleShrinkToIndicator(newVal);
+    }
+  }
 }
 
 const BadgeClass = compose$1(
@@ -17079,9 +17152,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-const componentName$z = getComponentName('user-attribute');
+const componentName$A = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$z,
+  componentName: componentName$A,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17402,15 +17475,15 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$A, BadgeClass);
+customElements.define(componentName$B, BadgeClass);
 
-customElements.define(componentName$z, UserAttributeClass);
+customElements.define(componentName$A, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$y = getComponentName('user-auth-method');
+const componentName$z = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$y,
+  componentName: componentName$z,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -17661,11 +17734,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$y, UserAuthMethodClass);
+customElements.define(componentName$z, UserAuthMethodClass);
 
-const componentName$x = getComponentName('saml-group-mappings-internal');
+const componentName$y = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$x, baseSelector: '' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$y, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass$4 {
   static get observedAttributes() {
@@ -17791,7 +17864,7 @@ class SamlGroupMappingsInternal extends BaseInputClass$4 {
   }
 }
 
-const componentName$w = getComponentName('saml-group-mappings');
+const componentName$x = getComponentName('saml-group-mappings');
 
 const customMixin$6 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -17801,14 +17874,14 @@ const customMixin$6 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$x}
+      <${componentName$y}
         tabindex="-1"
-      ></${componentName$x}>
+      ></${componentName$y}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$x);
+      this.inputElement = this.shadowRoot.querySelector(componentName$y);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -17893,15 +17966,15 @@ const SamlGroupMappingsClass = compose(
       'error-message',
       'style',
     ],
-    componentName: componentName$w,
+    componentName: componentName$x,
   })
 );
 
-customElements.define(componentName$x, SamlGroupMappingsInternal);
+customElements.define(componentName$y, SamlGroupMappingsInternal);
 
-customElements.define(componentName$w, SamlGroupMappingsClass);
+customElements.define(componentName$x, SamlGroupMappingsClass);
 
-const componentName$v = getComponentName('radio-button');
+const componentName$w = getComponentName('radio-button');
 
 const customMixin$5 = (superclass) =>
   class CustomMixin extends superclass {
@@ -17966,11 +18039,11 @@ const RadioButtonClass = compose(
     wrappedEleName: 'vaadin-radio-button',
     excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
-const componentName$u = getComponentName('radio-group');
+const componentName$v = getComponentName('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -17984,12 +18057,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$v),
+        get: () => this.querySelectorAll(componentName$w),
       });
 
       // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
       this.baseElement.__filterRadioButtons = (nodes) =>
-        nodes.filter((node) => node.localName === componentName$v);
+        nodes.filter((node) => node.localName === componentName$w);
 
       // vaadin radio group missing some input properties
       this.baseElement.setCustomValidity = () => {};
@@ -18135,13 +18208,13 @@ const RadioGroupClass = compose(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$u,
+    componentName: componentName$v,
     includeForwardProps: ['value'],
   })
 );
 
-customElements.define(componentName$u, RadioGroupClass);
-customElements.define(componentName$v, RadioButtonClass);
+customElements.define(componentName$v, RadioGroupClass);
+customElements.define(componentName$w, RadioButtonClass);
 
 const defaultValidateSchema = () => true;
 const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
@@ -18241,7 +18314,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$t = getComponentName('scopes-list');
+const componentName$u = getComponentName('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
@@ -18260,7 +18333,7 @@ const itemRenderer$4 = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$t, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$u, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18365,7 +18438,7 @@ const ScopesListClass = compose(
   componentNameValidationMixin
 )(RawScopesList);
 
-const componentName$s = getComponentName$1('list-item');
+const componentName$t = getComponentName$1('list-item');
 
 const customMixin$4 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -18422,14 +18495,14 @@ const ListItemClass = compose$1(
   componentNameValidationMixin$1,
   customMixin$4,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$s, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$t, baseSelector: 'slot' }));
 
-customElements.define(componentName$s, ListItemClass);
+customElements.define(componentName$t, ListItemClass);
 
-const componentName$r = getComponentName$1('list');
+const componentName$s = getComponentName$1('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$r,
+  componentName: componentName$s,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18600,15 +18673,15 @@ const ListClass = compose$1(
   componentNameValidationMixin$1,
 )(RawList);
 
-customElements.define(componentName$r, ListClass);
+customElements.define(componentName$s, ListClass);
 
-customElements.define(componentName$t, ScopesListClass);
+customElements.define(componentName$u, ScopesListClass);
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$q = getComponentName('third-party-app-logo');
+const componentName$r = getComponentName('third-party-app-logo');
 class RawThirdPartyAppLogoClass extends createBaseClass({
-  componentName: componentName$q,
+  componentName: componentName$r,
   baseSelector: '.wrapper',
 }) {
   constructor() {
@@ -18705,9 +18778,9 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$q, ThirdPartyAppLogoClass);
+customElements.define(componentName$r, ThirdPartyAppLogoClass);
 
-const componentName$p = getComponentName('security-questions-setup');
+const componentName$q = getComponentName('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -18726,7 +18799,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$p, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$q, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -18834,7 +18907,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$p, 'Error parsing questions attribute', e);
+      console.error(componentName$q, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -18941,9 +19014,9 @@ const SecurityQuestionsSetupClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsSetup);
 
-customElements.define(componentName$p, SecurityQuestionsSetupClass);
+customElements.define(componentName$q, SecurityQuestionsSetupClass);
 
-const componentName$o = getComponentName('security-questions-verify');
+const componentName$p = getComponentName('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -18967,7 +19040,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$o, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$p, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -19041,7 +19114,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       return JSON.parse(this.getAttribute('questions')) || [];
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.error(componentName$o, 'Error parsing questions attribute', e);
+      console.error(componentName$p, 'Error parsing questions attribute', e);
       return [];
     }
   }
@@ -19175,7 +19248,7 @@ const SecurityQuestionsVerifyClass = compose(
   componentNameValidationMixin
 )(RawSecurityQuestionsVerify);
 
-customElements.define(componentName$o, SecurityQuestionsVerifyClass);
+customElements.define(componentName$p, SecurityQuestionsVerifyClass);
 
 // Matches any character that is not a digit, whitespace, or phone formatting character (+, -, (, ))
 const INVALID_PHONE_CHARS_RE = /[^\d\s+\-()]/;
@@ -19184,7 +19257,7 @@ const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$n = getComponentName('hybrid-field');
+const componentName$o = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
@@ -19250,12 +19323,12 @@ const EMAIL_FIELD = 'descope-email-field';
 const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-const BaseClass$6 = createBaseClass({
-  componentName: componentName$n,
+const BaseClass$5 = createBaseClass({
+  componentName: componentName$o,
   baseSelector: 'div',
 });
 
-class RawHybridField extends BaseClass$6 {
+class RawHybridField extends BaseClass$5 {
   #isReportedValidity = false;
 
   #selectionStart;
@@ -19633,11 +19706,11 @@ const HybridFieldClass = compose(
   componentNameValidationMixin
 )(RawHybridField);
 
-customElements.define(componentName$n, HybridFieldClass);
+customElements.define(componentName$o, HybridFieldClass);
 
-const componentName$m = getComponentName('alert');
+const componentName$n = getComponentName('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -19758,13 +19831,13 @@ const AlertClass = compose(
   componentNameValidationMixin
 )(RawAlert);
 
-customElements.define(componentName$m, AlertClass);
+customElements.define(componentName$n, AlertClass);
 
-const componentName$l = getComponentName('hcaptcha');
+const componentName$m = getComponentName('hcaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key'];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: ':host > div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$3 {
   static get observedAttributes() {
     return observedAttributes$1.concat(BaseInputClass$3.observedAttributes || []);
@@ -19892,7 +19965,7 @@ const HcaptchaClass = compose(
   componentNameValidationMixin
 )(RawHcaptcha);
 
-customElements.define(componentName$l, HcaptchaClass);
+customElements.define(componentName$m, HcaptchaClass);
 
 const direction$1 = 'ltr';
 
@@ -20275,7 +20348,7 @@ const mode = {
 
 const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
   { mode },
-  componentName$1d,
+  componentName$1e,
 );
 
 const button = {
@@ -20577,7 +20650,7 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$12
 });
 
-const componentName$k = getComponentName$1('input-wrapper');
+const componentName$l = getComponentName$1('input-wrapper');
 const globalRefs$D = getThemeRefs$1(globals);
 
 const [theme$2, refs$1] = createHelperVars$1(
@@ -20703,7 +20776,7 @@ const [theme$2, refs$1] = createHelperVars$1(
       backgroundColor: globalRefs$D.colors.surface.main,
     },
   },
-  componentName$k,
+  componentName$l,
 );
 
 const globalRefs$C = getThemeRefs$1(globals);
@@ -20820,7 +20893,7 @@ const [helperTheme$6, helperRefs$6] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$A,
+  componentName$B,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$6;
@@ -20863,18 +20936,26 @@ const badge = {
     },
   },
 
-  $breakpoints: {
-    indicator: '(max-width: 65px)',
-  },
+  // Container Query example:
+  // $breakpoints: {
+  //   indicator: '(max-width: 65px)',
+  // },
+  // _shrinkToIndicator: {
+  //   '$breakpoints.indicator': {
+  //     [vars.hostWidth]: '13px',
+  //     [vars.hostHeight]: '13px',
+  //     [vars.borderRadius]: '50%',
+  //     [vars.fontSize]: '0',
+  //     [vars.textIndent]: '-9999px',
+  //   },
+  // },
 
   _shrinkToIndicator: {
-    '$breakpoints.indicator': {
-      [vars$10.hostWidth]: '13px',
-      [vars$10.hostHeight]: '13px',
-      [vars$10.borderRadius]: '50%',
-      [vars$10.fontSize]: '0',
-      [vars$10.textIndent]: '-9999px',
-    },
+    [vars$10.hostWidth]: '13px',
+    [vars$10.hostHeight]: '13px',
+    [vars$10.borderRadius]: '50%',
+    [vars$10.fontSize]: '0',
+    [vars$10.textIndent]: '-9999px',
   },
 
   mode: {
@@ -20932,9 +21013,9 @@ var badge$1 = /*#__PURE__*/Object.freeze({
   vars: vars$10
 });
 
-const componentName$j = getComponentName$1('avatar');
+const componentName$k = getComponentName$1('avatar');
 class RawAvatar extends createBaseClass$1({
-  componentName: componentName$j,
+  componentName: componentName$k,
   baseSelector: ':host > .wrapper',
 }) {
   constructor() {
@@ -21115,7 +21196,7 @@ var image$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Z
 });
 
-const componentName$i = getComponentName$1('apps-list');
+const componentName$j = getComponentName$1('apps-list');
 
 const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -21239,7 +21320,7 @@ const AppsListClass = compose$1(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$i,
+    componentName: componentName$j,
     style: () => `
       :host {
         width: 100%;
@@ -21344,7 +21425,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$r,
+  componentName$s,
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -21459,10 +21540,10 @@ var listItem$1 = /*#__PURE__*/Object.freeze({
   vars: vars$W
 });
 
-const componentName$h = getComponentName$1('autocomplete-field-internal');
+const componentName$i = getComponentName$1('autocomplete-field-internal');
 
 const BaseInputClass$2 = createBaseInputClass$1({
-  componentName: componentName$h,
+  componentName: componentName$i,
   baseSelector: '',
 });
 const observedAttrs$2 = [];
@@ -21667,7 +21748,7 @@ class AutocompleteFieldInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$g = getComponentName$1('autocomplete-field');
+const componentName$h = getComponentName$1('autocomplete-field');
 
 const customMixin$2 = (superclass) =>
   class AutocompleteFieldMixinClass extends superclass {
@@ -21688,15 +21769,15 @@ const customMixin$2 = (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,
+        componentName$i,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -21815,7 +21896,7 @@ const AutocompleteFieldClass = compose$1(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$g,
+    componentName: componentName$h,
   }),
 );
 
@@ -22069,7 +22150,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-const componentName$f = getComponentName$1('address-field-internal');
+const componentName$g = getComponentName$1('address-field-internal');
 
 const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -22080,7 +22161,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$1 = createBaseInputClass$1({
-  componentName: componentName$f,
+  componentName: componentName$g,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -22187,7 +22268,7 @@ const AddressFieldInternal = compose$1(
   connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 )(RawAddressFieldInternal);
 
-const componentName$e = getComponentName$1('address-field');
+const componentName$f = getComponentName$1('address-field');
 
 const customMixin$1 = (superclass) =>
   class AddressFieldMixinClass extends superclass {
@@ -22216,15 +22297,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$f}
+      <${componentName$g}
         tabindex="-1"
-      ></${componentName$f}>
+      ></${componentName$g}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$f,
+        componentName$g,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -22302,7 +22383,7 @@ const AddressFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$f} {
+  ${componentName$g} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -22310,12 +22391,12 @@ const AddressFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$f} ::slotted {
+  ${componentName$g} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$e,
+    componentName: componentName$f,
   }),
 );
 
@@ -22355,24 +22436,24 @@ const formatTime = (ms = 0) => {
   return timeParts.join(':');
 };
 
-const componentName$d = getComponentName$1('timer');
+const componentName$e = getComponentName$1('timer');
 
 const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
-const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$d,
+const BaseClass$4 = createBaseClass$1({
+  componentName: componentName$e,
   baseSelector: ':host > .wrapper',
 });
 
 const DEFAULT_INTERVAL = 1000;
 
-class RawTimer extends BaseClass$5 {
+class RawTimer extends BaseClass$4 {
   #timeRemains = 0;
 
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes.concat(BaseClass$5.observedAttributes || []);
+    return observedAttributes.concat(BaseClass$4.observedAttributes || []);
   }
 
   constructor() {
@@ -22581,7 +22662,7 @@ var timer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$T
 });
 
-const componentName$c = getComponentName$1('timer-button');
+const componentName$d = getComponentName$1('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -22611,12 +22692,12 @@ const mapTimerAttrs = {
   'timer-paused': 'paused',
 };
 
-const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$c,
+const BaseClass$3 = createBaseClass$1({
+  componentName: componentName$d,
   baseSelector: ':host > div',
 });
 
-class RawTimerButton extends BaseClass$4 {
+class RawTimerButton extends BaseClass$3 {
   constructor() {
     super();
 
@@ -22867,9 +22948,9 @@ var timerButton$1 = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const componentName$b = getComponentName$1('password-strength');
+const componentName$c = getComponentName$1('password-strength');
 class RawPasswordStrength extends createBaseClass$1({
-  componentName: componentName$b,
+  componentName: componentName$c,
   baseSelector: ':host > .wrapper',
 }) {
   static get observedAttributes() {
@@ -23072,10 +23153,10 @@ var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 
 var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-const componentName$a = getComponentName$1('collapsible-container');
+const componentName$b = getComponentName$1('collapsible-container');
 
 class RawCollapsibleContainer extends createBaseClass$1({
-  componentName: componentName$a,
+  componentName: componentName$b,
   baseSelector: 'slot',
 }) {
   static get observedAttributes() {
@@ -23310,7 +23391,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$a
+  componentName$b
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -23421,7 +23502,7 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Q
 });
 
-const componentName$9 = getComponentName$1('recovery-codes');
+const componentName$a = getComponentName$1('recovery-codes');
 
 const itemRenderer$2 = ({ value }, _, ref) => {
   return `
@@ -23432,7 +23513,7 @@ const itemRenderer$2 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$9,
+  componentName: componentName$a,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -23600,7 +23681,7 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   vars: vars$P
 });
 
-const componentName$8 = getComponentName$1('outbound-apps');
+const componentName$9 = getComponentName$1('outbound-apps');
 
 const itemRenderer$1 = (
   { name, description, logo, appId, isConnected },
@@ -23645,12 +23726,12 @@ const itemRenderer$1 = (
 `;
 };
 
-const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$8,
+const BaseClass$2 = createBaseClass$1({
+  componentName: componentName$9,
   baseSelector: 'descope-list',
 });
 
-class RawOutboundAppsClass extends BaseClass$3 {
+class RawOutboundAppsClass extends BaseClass$2 {
   constructor() {
     super();
 
@@ -23862,10 +23943,10 @@ var outboundApps$1 = /*#__PURE__*/Object.freeze({
   vars: vars$O
 });
 
-const componentName$7 = getComponentName$1('outbound-app-button');
+const componentName$8 = getComponentName$1('outbound-app-button');
 
 class RawOutboundAppButton extends createBaseClass$1({
-  componentName: componentName$7,
+  componentName: componentName$8,
   baseSelector: ':host > descope-button',
 }) {
   static get observedAttributes() {
@@ -24047,7 +24128,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$6 = getComponentName$1('trusted-devices');
+const componentName$7 = getComponentName$1('trusted-devices');
 
 const itemRenderer = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -24135,12 +24216,12 @@ const itemRenderer = (
   return template;
 };
 
-const BaseClass$2 = createBaseClass$1({
-  componentName: componentName$6,
+const BaseClass$1 = createBaseClass$1({
+  componentName: componentName$7,
   baseSelector: ListClass.componentName,
 });
 
-class RawTrustedDevicesClass extends BaseClass$2 {
+class RawTrustedDevicesClass extends BaseClass$1 {
   constructor() {
     super();
 
@@ -24470,7 +24551,7 @@ var trustedDevices = /*#__PURE__*/Object.freeze({
   vars: vars$M
 });
 
-const componentName$5 = getComponentName$1('tooltip');
+const componentName$6 = getComponentName$1('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -24480,14 +24561,26 @@ const tooltipAttrs = [
   'opened',
 ];
 
-const BaseClass$1 = createBaseClass$1({
-  componentName: componentName$5,
+class RawTooltip extends createBaseClass$1({
+  componentName: componentName$6,
   baseSelector: 'vaadin-tooltip',
-});
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-anchored>
+        <slot></slot>
+        <vaadin-tooltip slot="anchored"></vaadin-tooltip>
+      </descope-anchored>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+    this.tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
+  }
 
-class RawTooltip extends BaseClass$1 {
   static get observedAttributes() {
-    return tooltipAttrs.concat(BaseClass$1.observedAttributes || []);
+    return tooltipAttrs.concat(super.observedAttributes || []);
   }
 
   get isOpened() {
@@ -24510,51 +24603,81 @@ class RawTooltip extends BaseClass$1 {
     return this.getAttribute('static-display') === 'true';
   }
 
+  get srLabel() {
+    return this.tooltip?.querySelector('[slot="sr-label"]');
+  }
+
   // We use `static-display` for presentation purposes, to show the tooltip content.
   // This should be used only when `opened` is `true`. Once `static-display` is set,
-  // the overlay would become a `static` element, and will have layout in the presenting page.
-  // This is mainly aimed to solve the presentation problem on our Styles Page in the Console.
+  // the overlay flows in-line and has layout in the presenting page. Mainly aimed
+  // to solve the presentation problem on our Styles Page in the Console.
   #handleStaticDisplay() {
     if (this.isStaticDisplay) {
-      this.#revealWrappedParts();
+      this.#revealOverlay();
       this.setAttribute('inert', 'true');
     } else {
-      this.#hideWrappedParts();
       this.removeAttribute('inert');
     }
   }
 
-  init() {
-    super.init();
+  #revealOverlay() {
+    if (!this.overlay) return;
+    // Keep the overlay in vaadin-tooltip.shadowRoot so adopted stylesheets from
+    // portalMixin continue to apply (they are scoped to that shadow root).
+    // Layout is handled via CSS: anchored-root becomes a column, vaadin-tooltip
+    // becomes a visible block below the anchor, and the sr-label is hidden.
+    this.overlay.style.display = 'block';
+    this.overlay.style.position = 'static';
+  }
 
-    // Create the vaadin-tooltip here instead of constructor (for React compatibility)
-    this.style.display = 'contents';
-    this.insertAdjacentHTML('beforeend', '<vaadin-tooltip></vaadin-tooltip>');
-    this.tooltip = this.querySelector('vaadin-tooltip');
+  init() {
+    super.init?.();
 
-    this.#hideWrappedParts();
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+      vaadin-tooltip {
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+      /* Stack anchor above the anchored element so the tooltip flows below it inline. */
+      :host([static-display="true"]) descope-anchored::part(root) {
+        flex-direction: column;
+      }
+      :host([static-display="true"]) descope-anchored::part(anchored) {
+        position: static;
+        inset: unset;
+      }
+      :host([static-display="true"]) vaadin-tooltip {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+      }
+      :host([static-display="true"]) vaadin-tooltip [slot="sr-label"] {
+        display: none;
+      }
+`,
+      this,
+    );
 
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.#setTooltipTarget(),
+    );
     this.#setTooltipTarget();
 
     setTimeout(() => this.#onOverlayReady());
   }
 
-  #hideWrappedParts() {
-    this.tooltip.style.width = '0';
-    this.tooltip.style.height = '0';
-    this.tooltip.style.display = 'block';
-    this.tooltip.style.overflow = 'hidden';
-    this.tooltip.style.position = 'absolute';
-  }
-
-  #revealWrappedParts() {
-    this.tooltip.style.width = '100%';
-    this.tooltip.style.height = '100%';
-    this.tooltip.style.position = 'static';
-    this.tooltip.style.overflow = 'visible';
-    this.tooltip.textContent = '';
-    this.overlay.style.display = 'block';
-    this.overlay.style.position = 'static';
+  #setTooltipTarget() {
+    const target = this.defaultSlot?.assignedElements()?.[0];
+    if (!target) return;
+    this.tooltip.target = target;
   }
 
   #onOverlayReady() {
@@ -24568,16 +24691,6 @@ class RawTooltip extends BaseClass$1 {
     this.#handleTooltipVisibility();
   }
 
-  #setTooltipTarget() {
-    if (!this.children?.length) return;
-
-    let ele = Array.from(this.children).find((child) => child !== this.tooltip);
-
-    if (!ele) return;
-
-    this.tooltip.target = ele;
-  }
-
   #clearOverlayContentNode() {
     this.overlayContentNode.innerHTML = '';
   }
@@ -24591,10 +24704,6 @@ class RawTooltip extends BaseClass$1 {
     return enrichedText;
   }
 
-  get srLabel() {
-    return this.tooltip?.querySelector('[slot="sr-label"]');
-  }
-
   #initTooltipTextComponent() {
     if (!this.overlayContentNode) return;
 
@@ -24617,25 +24726,35 @@ class RawTooltip extends BaseClass$1 {
     });
   }
 
-  // the default vaadin behavior is to attach the overlay to the body when opened
-  // we do not want that because it's difficult to style the overlay in this way
-  // so we override it to open inside the shadow DOM
+  // The default vaadin behavior is to attach the overlay to the body when opened,
+  // which makes it hard to style. We move the overlay into our shadow root instead.
+  // Critical: vaadin computes position against the overlay's offsetParent — moving
+  // it changes that context, so we must call `_updatePosition()` afterwards.
+  // That's vaadin's own position-recompute method (the same one its resize/scroll
+  // listeners use internally), so we get the right reposition without dispatching
+  // global events.
   #overrideAttachOverlay() {
     if (!this.overlay) return;
 
-    if (this.isOpened) {
-      // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
-      // and the overlay element is rendered outside the component, on the top
-      // level. We need to move it back to the local component's DOM.
+    const originalAttach = this.overlay._attachOverlay?.bind(this.overlay);
+
+    this.overlay._detachOverlay = () => {};
+    this.overlay._attachOverlay = () => {
+      originalAttach?.();
       setTimeout(() => {
         this.tooltip.shadowRoot.appendChild(this.overlay);
-        this.#handleStaticDisplay();
+        this.overlay._updatePosition?.();
       });
-    } else {
-      this.overlay._detachOverlay = () => {};
+    };
 
-      this.overlay._attachOverlay = () =>
+    if (this.isOpened) {
+      // When `opened` attr is set at init, vaadin renders the overlay at the top
+      // level without calling `_attachOverlay`. Move it back into our shadow root.
+      setTimeout(() => {
         this.tooltip.shadowRoot.appendChild(this.overlay);
+        this.#handleStaticDisplay();
+        this.overlay._updatePosition?.();
+      });
     }
   }
 
@@ -24677,11 +24796,6 @@ const { overlay, content } = {
   content: { selector: () => 'vaadin-tooltip-overlay::part(content)' },
 };
 
-/**
- * This component has no Shadow DOM of its own, so we can't add styles to it
- * (otherwise it would affect the rest of the DOM).
- * Note that all styles are within PortalMixin.
- */
 const TooltipClass = compose$1(
   componentNameValidationMixin$1,
   portalMixin$1({
@@ -24736,7 +24850,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$5
+  componentName$6
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -24834,7 +24948,7 @@ const fetchLabels = async (baseUrl) => {
 const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
   fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-const componentName$4 = getComponentName$1(
+const componentName$5 = getComponentName$1(
   'country-subdivision-city-field-internal',
 );
 
@@ -24894,7 +25008,7 @@ const comboBoxHTML = (id) =>
 // --- Base class ---
 
 const BaseInputClass = createBaseInputClass$1({
-  componentName: componentName$4,
+  componentName: componentName$5,
   baseSelector: '',
 });
 
@@ -25070,7 +25184,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (e.isTrusted) {
         const firstInvalidCombo = this.#allCombos.find(
           (combo) =>
-            !combo.classList.contains(`${componentName$4}-hidden`) &&
+            !combo.classList.contains(`${componentName$5}-hidden`) &&
             !combo.checkValidity(),
         );
         (firstInvalidCombo || this.#getFirstVisibleCombo())?.focus();
@@ -25167,7 +25281,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   // Iterate in reverse so reportValidity's focus() lands on the first invalid combo last.
   #handleInvalidCombos() {
     for (const combo of [...this.#allCombos].reverse()) {
-      if (combo.classList.contains(`${componentName$4}-hidden`)) continue;
+      if (combo.classList.contains(`${componentName$5}-hidden`)) continue;
       if (!combo.checkValidity()) combo.reportValidity();
     }
   }
@@ -25440,7 +25554,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (!this.#pendingValue && this.#defaultCountry)
         this.#onCountrySelected(this.#defaultCountry);
     } catch (e) {
-      console.error(`[${componentName$4}] Failed to load countries`, e);
+      console.error(`[${componentName$5}] Failed to load countries`, e);
     } finally {
       this.#countryComboBox.removeAttribute('loading');
     }
@@ -25465,7 +25579,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       }
     } catch (e) {
       console.error(
-        `[${componentName$4}] Failed to load subdivisions for ${countryIso2}`,
+        `[${componentName$5}] Failed to load subdivisions for ${countryIso2}`,
         e,
       );
       this.#subdivisionVisible = false;
@@ -25493,7 +25607,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       }
     } catch (e) {
       console.error(
-        `[${componentName$4}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
+        `[${componentName$5}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
         e,
       );
     } finally {
@@ -25585,7 +25699,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   }
 
   #setVisible(el, visible) {
-    el?.classList.toggle(`${componentName$4}-hidden`, !visible);
+    el?.classList.toggle(`${componentName$5}-hidden`, !visible);
   }
 
   #updateRequiredOnCombos() {
@@ -25655,7 +25769,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
 
   #getFirstVisibleCombo() {
     return this.#allCombos.find(
-      (combo) => !combo.classList.contains(`${componentName$4}-hidden`),
+      (combo) => !combo.classList.contains(`${componentName$5}-hidden`),
     );
   }
 
@@ -25672,7 +25786,7 @@ const CountrySubdivisionCityFieldInternal = compose$1()(
   RawCountrySubdivisionCityFieldInternal,
 );
 
-const componentName$3 = getComponentName$1('country-subdivision-city-field');
+const componentName$4 = getComponentName$1('country-subdivision-city-field');
 
 const customMixin = (superclass) =>
   class CountrySubdivisionCityFieldMixinClass extends superclass {
@@ -25682,15 +25796,15 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$4}
+      <${componentName$5}
         tabindex="-1"
-      ></${componentName$4}>
+      ></${componentName$5}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(
-        componentName$4,
+        componentName$5,
       );
 
       forwardAttrs$1(this, this.inputElement, {
@@ -25727,11 +25841,11 @@ const customMixin = (superclass) =>
 const host = { selector: () => ':host' };
 
 const internalWrapper = {
-  selector: `${componentName$4} > .wrapper`,
+  selector: `${componentName$5} > .wrapper`,
 };
 
 const internalComboBoxes = {
-  selector: `${componentName$4} > .wrapper > descope-combo-box`,
+  selector: `${componentName$5} > .wrapper > descope-combo-box`,
 };
 
 const CountrySubdivisionCityFieldClass = compose$1(
@@ -25781,7 +25895,7 @@ const CountrySubdivisionCityFieldClass = compose$1(
     width: 100%;
   }
 
-  ${componentName$4} {
+  ${componentName$5} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -25789,19 +25903,19 @@ const CountrySubdivisionCityFieldClass = compose$1(
     max-width: 100%;
   }
 
-  ${componentName$4} > .wrapper {
+  ${componentName$5} > .wrapper {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
   }
 
-  .${componentName$4}-hidden {
+  .${componentName$5}-hidden {
     display: none;
   }
 
 `,
     excludeAttrsSync: ['tabindex', 'style', 'error-message'],
-    componentName: componentName$3,
+    componentName: componentName$4,
   }),
 );
 
@@ -25832,7 +25946,7 @@ var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$K
 });
 
-const componentName$2 = getComponentName$1('attachment');
+const componentName$3 = getComponentName$1('attachment');
 
 const ATTACHMENT_POSITIONS = [
   'top-end',
@@ -25846,19 +25960,19 @@ const ATTACHMENT_POSITIONS = [
 const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
 
 class RawAttachment extends createBaseClass$1({
-  componentName: componentName$2,
-  baseSelector: ':host > .wrapper',
+  componentName: componentName$3,
+  baseSelector: 'descope-anchored',
 }) {
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-      <div class="wrapper">
+      <descope-anchored>
         <slot></slot>
-        <div class="attachment-container">
+        <div slot="anchored" class="attachment-container">
           <slot name="attachment"></slot>
         </div>
-      </div>
+      </descope-anchored>
     `;
 
     this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
@@ -25867,6 +25981,10 @@ class RawAttachment extends createBaseClass$1({
     );
   }
 
+  get #attachment() {
+    return this.attachmentSlot?.assignedElements()[0];
+  }
+
   static get observedAttributes() {
     return [...(super.observedAttributes || []), 'position'];
   }
@@ -25886,9 +26004,8 @@ class RawAttachment extends createBaseClass$1({
       :host {
         display: inline-block;
       }
-      .wrapper {
-        position: relative;
-        display: inline-flex;
+      :host(.hidden) {
+        display: none;
       }
       .attachment-container {
         position: absolute;
@@ -25899,24 +26016,43 @@ class RawAttachment extends createBaseClass$1({
         align-items: center;
         container-type: inline-size;
       }
-      :host(.hidden) {
-        display: none;
-      }
-      `,
+`,
       this,
     );
 
     this.#handlePositionChange();
 
-    this.defaultSlot.addEventListener('slotchange', () => {
-      this.#setVisibility();
-      this.#syncDirection();
+    // When descope-anchored forwards st-host-direction from the anchor to this container,
+    // propagate it to the attachment elements.
+    const container = this.shadowRoot.querySelector('.attachment-container');
+    observeAttributes$1(container, () => this.#syncDirection(), {
+      includeAttrs: ['st-host-direction'],
     });
 
-    window.requestAnimationFrame(() => {
+    // Re-sync direction when new elements are slotted into the attachment slot.
+    this.attachmentSlot.addEventListener('slotchange', () =>
+      this.#syncDirection(),
+    );
+
+    this.defaultSlot.addEventListener('slotchange', () => {
       this.#setVisibility();
-      this.#syncDirection();
+      window.requestAnimationFrame(() => this.#syncAvailableSizeAttr());
     });
+
+    window.requestAnimationFrame(() => this.#setVisibility());
+  }
+
+  #syncAvailableSizeAttr() {
+    const anchor = this.defaultSlot?.assignedElements()?.[0];
+
+    const anchorRect = anchor?.getBoundingClientRect();
+    if (anchorRect) {
+      const availableWidth = anchorRect.width;
+      this.#attachment?.setAttribute(
+        'data-attachment-size',
+        Number(availableWidth),
+      );
+    }
   }
 
   #setVisibility() {
@@ -25925,16 +26061,14 @@ class RawAttachment extends createBaseClass$1({
   }
 
   #syncDirection() {
-    const child = this.defaultSlot?.assignedElements()?.[0];
-    if (!child) return;
-
-    const { direction } = window.getComputedStyle(child);
+    const direction = this.shadowRoot
+      .querySelector('.attachment-container')
+      ?.getAttribute('st-host-direction');
 
+    if (!direction) return;
     // currently we support direction sync only for web-components-ui
     // elements, which support st-host-direction attribute.
-    this.attachmentSlot?.assignedElements().forEach((el) => {
-      el.setAttribute('st-host-direction', direction);
-    });
+    this.#attachment?.setAttribute('st-host-direction', direction);
   }
 
   get offsetX() {
@@ -26026,7 +26160,7 @@ var attachment$1 = /*#__PURE__*/Object.freeze({
   default: attachment
 });
 
-const componentName$1 = getComponentName('input-wrapper');
+const componentName$2 = getComponentName('input-wrapper');
 const globalRefs$p = getThemeRefs(globals$1);
 
 const [theme$1, refs, vars$I] = createHelperVars(
@@ -26156,7 +26290,7 @@ const [theme$1, refs, vars$I] = createHelperVars(
       inputTextSecurity: 'disc',
     },
   },
-  componentName$1
+  componentName$2
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -26604,7 +26738,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$1h
+  componentName$1i
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -26760,7 +26894,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$19
+  componentName$1a
 );
 
 const divider = {
@@ -26914,7 +27048,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$1i
+  componentName$1j
 );
 
 const loaderRadial = {
@@ -28319,36 +28453,197 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-customElements.define(componentName$h, AutocompleteFieldInternal);
+customElements.define(componentName$i, AutocompleteFieldInternal);
+
+customElements.define(componentName$h, AutocompleteFieldClass);
+
+customElements.define(componentName$g, AddressFieldInternal);
+
+customElements.define(componentName$f, AddressFieldClass);
+
+const componentName$1 = getComponentName$1('anchored');
+
+class RawAnchored extends createBaseClass$1({
+  componentName: componentName$1,
+  baseSelector: '.anchored-root',
+}) {
+  #stretchObserver = null;
+
+  #directionObserver = null;
+
+  #hostStretchSheet = null;
+
+  get #anchor() {
+    return this.defaultSlot.assignedElements({ flatten: true })[0];
+  }
+
+  get #anchored() {
+    return this.shadowRoot
+      .querySelector('slot[name="anchored"]')
+      ?.assignedElements()[0];
+  }
+
+  get #outerHost() {
+    return this.getRootNode().host;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="anchored-root" part="root">
+        <slot></slot>
+        <div class="anchored-host" part="anchored">
+          <slot name="anchored"></slot>
+        </div>
+      </div>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+  }
+
+  init() {
+    super.init?.();
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      :host(:not([has-anchor])) {
+        display: none;
+      }
+
+      .anchored-root {
+        position: relative;
+        display: flex;
+        width: 100%;
+        min-width: 0;
+      }
 
-customElements.define(componentName$g, AutocompleteFieldClass);
+      /* Make anchor fill the flex row and allow it to shrink. */
+      ::slotted(*:not([slot])) {
+        flex-grow: 1;       /* fill the flex row */
+        flex-shrink: 1;     /* compress when constrained */
+        flex-basis: auto;   /* start from the anchor's natural size */
+        min-width: 0;       /* flex items won't shrink below content size without this */
+      }
+
+      /* Anchored container covers the anchor but is invisible to pointer events. */
+      .anchored-host {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      /* Restore interactivity for actual anchored content. */
+      ::slotted([slot="anchored"]) {
+        pointer-events: auto;
+      }
+      `,
+      this,
+    );
+
+    this.#syncStretchCSS();
+
+    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());
+
+    this.#syncAnchor();
+  }
+
+  #syncAnchor() {
+    this.#onAnchorChanged();
+
+    this.#stretchObserver = this.#forwardAttr(
+      this.#stretchObserver,
+      this.#outerHost,
+      'stretch',
+    );
+
+    this.#directionObserver = this.#forwardAttr(
+      this.#directionObserver,
+      this.#anchored,
+      'st-host-direction',
+    );
+  }
+
+  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)
+  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.
+  #syncStretchCSS() {
+    const css = `
+      descope-anchored {
+        width: 100%;          /* fill the outer host so the anchored element spans the full anchor width */
+      }
+      :host([stretch]) {
+        display: inline-flex; /* switch from inline-block so internal children are flex items */
+        width: 100%;          /* fill non-flex parents */
+        flex-grow: 1;         /* absorb extra space in flex parents */
+        flex-shrink: 0;       /* hold full width — shrink:1 would let siblings squeeze it below 100% */
+        flex-basis: 100%;     /* start at full width before grow/shrink */
+        min-width: 0;         /* prevent overflow when the outer host is itself inside a constrained flex row */
+      }
+    `;
+
+    if (this.#hostStretchSheet) {
+      this.#hostStretchSheet.replaceSync(css);
+    } else if (this.#outerHost) {
+      this.#hostStretchSheet = injectStyle(css, this.#outerHost);
+    }
+  }
+
+  // Reconnects forwarding to the current anchor. Disconnects the old observer and
+  // removes the stale attr from target first — forwardAttrs only sets attrs present
+  // on the source, so absent attrs won't be removed automatically.
+  #forwardAttr(observer, target, attr) {
+    observer?.disconnect();
+    target?.removeAttribute(attr);
+    if (!this.#anchor || !target) return null;
+    return forwardAttrs$1(this.#anchor, target, { includeAttrs: [attr] });
+  }
+
+  // Prevent stale callbacks from firing on a detached anchor after removal.
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#stretchObserver?.disconnect();
+    this.#directionObserver?.disconnect();
+  }
+
+  // Track whether anything is slotted, so the host display rule can hide an
+  // empty host rather than reserving its layout box.
+  #onAnchorChanged() {
+    this.toggleAttribute('has-anchor', !!this.#anchor);
+  }
+}
 
-customElements.define(componentName$f, AddressFieldInternal);
+const AnchoredClass = compose$1(componentNameValidationMixin$1)(RawAnchored);
 
-customElements.define(componentName$e, AddressFieldClass);
+customElements.define(componentName$1, AnchoredClass);
 
-customElements.define(componentName$j, AvatarClass);
+customElements.define(componentName$k, AvatarClass);
 
-customElements.define(componentName$i, AppsListClass);
+customElements.define(componentName$j, AppsListClass);
 
-customElements.define(componentName$2, AttachmentClass);
+customElements.define(componentName$3, AttachmentClass);
 
-customElements.define(componentName$a, CollapsibleContainerClass);
+customElements.define(componentName$b, CollapsibleContainerClass);
 
-customElements.define(componentName$4, CountrySubdivisionCityFieldInternal);
+customElements.define(componentName$5, CountrySubdivisionCityFieldInternal);
 
-customElements.define(componentName$3, CountrySubdivisionCityFieldClass);
+customElements.define(componentName$4, CountrySubdivisionCityFieldClass);
 
-customElements.define(componentName$7, OutboundAppButtonClass);
+customElements.define(componentName$8, OutboundAppButtonClass);
 
-customElements.define(componentName$8, OutboundAppsClass);
+customElements.define(componentName$9, OutboundAppsClass);
 
-customElements.define(componentName$b, PasswordStrengthClass);
+customElements.define(componentName$c, PasswordStrengthClass);
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   PasswordStrengthClass: PasswordStrengthClass,
-  componentName: componentName$b
+  componentName: componentName$c
 });
 
 // NOTICE: This component registers with a DIFFERENT name than its file name
@@ -28455,15 +28750,15 @@ const HoneypotClass = compose$1(componentNameValidationMixin$1)(RawHoneypot);
 
 customElements.define(componentName, HoneypotClass);
 
-customElements.define(componentName$9, RecoveryCodesClass);
+customElements.define(componentName$a, RecoveryCodesClass);
 
-customElements.define(componentName$d, TimerClass);
+customElements.define(componentName$e, TimerClass);
 
-customElements.define(componentName$c, TimerButtonClass);
+customElements.define(componentName$d, TimerButtonClass);
 
-customElements.define(componentName$5, TooltipClass);
+customElements.define(componentName$6, TooltipClass);
 
-customElements.define(componentName$6, TrustedDevicesClass);
+customElements.define(componentName$7, TrustedDevicesClass);
 
 const options = {
   translations: zxcvbnEnPackage.translations,
@@ -28481,5 +28776,5 @@ var calcScore = /*#__PURE__*/Object.freeze({
   options: options
 });
 
-export { AddressFieldClass, AlertClass, AppsListClass, AttachmentClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, 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, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AddressFieldClass, AlertClass, AnchoredClass, AppsListClass, AttachmentClass, AutocompleteFieldClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, CheckboxClass, CodeSnippetClass, CollapsibleContainerClass, ComboBoxClass, ContainerClass, CountrySubdivisionCityFieldClass, DateFieldClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, HcaptchaClass, HoneypotClass, HybridFieldClass, IconClass, ImageClass, LinkClass, ListClass, ListItemClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, 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, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map