@descope/flow-components 3.7.0 → 3.7.2

package/dist/index.cjs.js

@@ -79831,6 +79831,8 @@ function requireIndex_cjs () {
 	  });
 
 	  observer.observe(ele, { attributes: true });
+
+	  return { disconnect: () => observer.disconnect() };
 	};
 
 	// calling the callback with this object: { addedNodes, removedNodes }
@@ -79880,13 +79882,12 @@ function requireIndex_cjs () {
 
 	const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
 
-	const forwardAttrs = (source, dest, options = {}) => {
+	const forwardAttrs = (source, dest, options = {}) =>
 	  observeAttributes(
 	    source,
 	    createSyncAttrsCb(source, dest, options.mapAttrs),
 	    options,
 	  );
-	};
 
 	const forwardProps$2 = (src, target, props = []) => {
 	  if (!props.length) return;
@@ -79899,7 +79900,6 @@ function requireIndex_cjs () {
 	            return src[prop];
 	          },
 	          set(v) {
-	            // eslint-disable-next-line no-param-reassign
 	            src[prop] = v;
 	          },
 	        },
@@ -79914,8 +79914,9 @@ function requireIndex_cjs () {
 	  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 });
 	  }
@@ -82599,6 +82600,55 @@ function requireIndex_cjs () {
 	    }
 	  };
 
+	// 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 getFileExtension = (path) => {
 	  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
 	  return match ? match[1] : null;
@@ -82660,12 +82710,12 @@ function requireIndex_cjs () {
 
 	/* eslint-disable no-use-before-define */
 
-	const componentName$1k = getComponentName('image');
+	const componentName$1l = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
 
 	class RawImage extends createBaseClass$1({
-	  componentName: componentName$1k,
+	  componentName: componentName$1l,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -82793,7 +82843,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const componentName$1j = getComponentName('icon');
+	const componentName$1k = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -82814,7 +82864,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1j,
+	    componentName: componentName$1k,
 	  }),
 	);
 
@@ -82829,7 +82879,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1i = getComponentName('button');
+	const componentName$1j = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -82876,6 +82926,7 @@ function requireIndex_cjs () {
 	let loadingIndicatorStyles;
 
 	const ButtonClass = compose(
+	  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: { property: 'width' },
@@ -82949,7 +83000,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1i,
+	    componentName: componentName$1j,
 	  }),
 	);
 
@@ -82999,7 +83050,7 @@ function requireIndex_cjs () {
 
 	const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
 	  { mode },
-	  componentName$1i,
+	  componentName$1j,
 	);
 
 	const button = {
@@ -83124,10 +83175,10 @@ function requireIndex_cjs () {
 	  vars: vars$15
 	});
 
-	const componentName$1h = getComponentName('text');
+	const componentName$1i = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$1h,
+	  componentName: componentName$1i,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -83320,9 +83371,9 @@ function requireIndex_cjs () {
 	/* eslint-disable no-param-reassign */
 
 
-	const componentName$1g = getComponentName('enriched-text');
+	const componentName$1h = getComponentName('enriched-text');
 
-	class EnrichedText extends createBaseClass$1({ componentName: componentName$1g, baseSelector: ':host > div' }) {
+	class EnrichedText extends createBaseClass$1({ componentName: componentName$1h, baseSelector: ':host > div' }) {
 	  #origLinkRenderer;
 
 	  #origEmRenderer;
@@ -83527,12 +83578,12 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1
 	)(EnrichedText);
 
-	const componentName$1f = getComponentName('link');
+	const componentName$1g = getComponentName('link');
 
 	const observedAttrs$6 = ['href', 'readonly'];
 
 	class RawLink extends createBaseClass$1({
-	  componentName: componentName$1f,
+	  componentName: componentName$1g,
 	  baseSelector: ':host a',
 	}) {
 	  static get observedAttributes() {
@@ -83705,7 +83756,7 @@ function requireIndex_cjs () {
 	  vars: vars$12
 	});
 
-	const componentName$1e = getComponentName('combo-box');
+	const componentName$1f = getComponentName('combo-box');
 
 	const ComboBoxMixin = (superclass) =>
 	  class ComboBoxMixinClass extends superclass {
@@ -84398,12 +84449,12 @@ function requireIndex_cjs () {
 	    // 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$1e,
+	    componentName: componentName$1f,
 	    includeForwardProps: ['items', 'renderer', 'selectedItem'],
 	  }),
 	);
 
-	const componentName$1d = getComponentName('input-wrapper');
+	const componentName$1e = getComponentName('input-wrapper');
 	const globalRefs$D = getThemeRefs$1(globals);
 
 	const [theme$2, refs$1] = createHelperVars$1(
@@ -84529,7 +84580,7 @@ function requireIndex_cjs () {
 	      backgroundColor: globalRefs$D.colors.surface.main,
 	    },
 	  },
-	  componentName$1d,
+	  componentName$1e,
 	);
 
 	const globalRefs$C = getThemeRefs$1(globals);
@@ -84640,12 +84691,16 @@ function requireIndex_cjs () {
 	  vars: vars$11
 	});
 
-	const componentName$1c = getComponentName('badge');
+	const componentName$1d = getComponentName('badge');
 
 	class RawBadge extends createBaseClass$1({
-	  componentName: componentName$1c,
+	  componentName: componentName$1d,
 	  baseSelector: ':host > div',
 	}) {
+	  static get observedAttributes() {
+	    return ['data-attachment-size', 'shrink-to-indicator-threshold'];
+	  }
+
 	  constructor() {
 	    super();
 
@@ -84671,6 +84726,24 @@ function requireIndex_cjs () {
 	      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(
@@ -84716,7 +84789,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$1c,
+	  componentName$1d,
 	);
 
 	const { shadowColor: shadowColor$6 } = helperRefs$6;
@@ -84759,18 +84832,26 @@ function requireIndex_cjs () {
 	    },
 	  },
 
-	  $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: {
@@ -84828,9 +84909,9 @@ function requireIndex_cjs () {
 	  vars: vars$10
 	});
 
-	const componentName$1b = getComponentName('avatar');
+	const componentName$1c = getComponentName('avatar');
 	class RawAvatar extends createBaseClass$1({
-	  componentName: componentName$1b,
+	  componentName: componentName$1c,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  constructor() {
@@ -85011,7 +85092,7 @@ function requireIndex_cjs () {
 	  vars: vars$Z
 	});
 
-	const componentName$1a = getComponentName('list-item');
+	const componentName$1b = getComponentName('list-item');
 
 	const customMixin$f = (superclass) =>
 	  class ListItemMixinClass extends superclass {
@@ -85068,12 +85149,12 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	  customMixin$f,
 	  activeableMixin,
-	)(createBaseClass$1({ componentName: componentName$1a, baseSelector: 'slot' }));
+	)(createBaseClass$1({ componentName: componentName$1b, baseSelector: 'slot' }));
 
-	const componentName$19 = getComponentName('list');
+	const componentName$1a = getComponentName('list');
 
 	class RawList extends createBaseClass$1({
-	  componentName: componentName$19,
+	  componentName: componentName$1a,
 	  baseSelector: '.wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -85244,7 +85325,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawList);
 
-	const componentName$18 = getComponentName('apps-list');
+	const componentName$19 = getComponentName('apps-list');
 
 	const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -85368,7 +85449,7 @@ function requireIndex_cjs () {
 	    slots: ['empty-state'],
 	    wrappedEleName: 'descope-list',
 	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-	    componentName: componentName$18,
+	    componentName: componentName$19,
 	    style: () => `
       :host {
         width: 100%;
@@ -85473,7 +85554,7 @@ function requireIndex_cjs () {
 
 	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$19,
+	  componentName$1a,
 	);
 
 	const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -85588,14 +85669,14 @@ function requireIndex_cjs () {
 	  vars: vars$W
 	});
 
-	const componentName$17 = getComponentName('autocomplete-field-internal');
+	const componentName$18 = getComponentName('autocomplete-field-internal');
 
 	createBaseInputClass$1({
-	  componentName: componentName$17,
+	  componentName: componentName$18,
 	  baseSelector: '',
 	});
 
-	const componentName$16 = getComponentName('autocomplete-field');
+	const componentName$17 = getComponentName('autocomplete-field');
 
 	const customMixin$d = (superclass) =>
 	  class AutocompleteFieldMixinClass extends superclass {
@@ -85616,15 +85697,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$17}
+      <${componentName$18}
         tabindex="-1"
-      ></${componentName$17}>
+      ></${componentName$18}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$17,
+	        componentName$18,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -85743,7 +85824,7 @@ function requireIndex_cjs () {
     }
   `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$16,
+	    componentName: componentName$17,
 	  }),
 	);
 
@@ -85997,7 +86078,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const componentName$15 = getComponentName('address-field-internal');
+	const componentName$16 = getComponentName('address-field-internal');
 
 	const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 	const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -86008,7 +86089,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseInputClass$5 = createBaseInputClass$1({
-	  componentName: componentName$15,
+	  componentName: componentName$16,
 	  baseSelector: '',
 	});
 	const initConnectorAttrs = ['public-api-key'];
@@ -86115,7 +86196,7 @@ function requireIndex_cjs () {
 	  connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 	)(RawAddressFieldInternal);
 
-	const componentName$14 = getComponentName('address-field');
+	const componentName$15 = getComponentName('address-field');
 
 	const customMixin$c = (superclass) =>
 	  class AddressFieldMixinClass extends superclass {
@@ -86144,15 +86225,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$15}
+      <${componentName$16}
         tabindex="-1"
-      ></${componentName$15}>
+      ></${componentName$16}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$15,
+	        componentName$16,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -86230,7 +86311,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$15} {
+  ${componentName$16} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -86238,12 +86319,12 @@ function requireIndex_cjs () {
     max-width: 100%;
   }
 
-  ${componentName$15} ::slotted {
+  ${componentName$16} ::slotted {
     padding: 0;
   }
 `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$14,
+	    componentName: componentName$15,
 	  }),
 	);
 
@@ -86283,24 +86364,24 @@ function requireIndex_cjs () {
 	  return timeParts.join(':');
 	};
 
-	const componentName$13 = getComponentName('timer');
+	const componentName$14 = getComponentName('timer');
 
 	const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
-	const BaseClass$7 = createBaseClass$1({
-	  componentName: componentName$13,
+	const BaseClass$6 = createBaseClass$1({
+	  componentName: componentName$14,
 	  baseSelector: ':host > .wrapper',
 	});
 
 	const DEFAULT_INTERVAL = 1000;
 
-	class RawTimer extends BaseClass$7 {
+	class RawTimer extends BaseClass$6 {
 	  #timeRemains = 0;
 
 	  #intervalId;
 
 	  static get observedAttributes() {
-	    return observedAttributes$5.concat(BaseClass$7.observedAttributes || []);
+	    return observedAttributes$5.concat(BaseClass$6.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -86509,7 +86590,7 @@ function requireIndex_cjs () {
 	  vars: vars$T
 	});
 
-	const componentName$12 = getComponentName('timer-button');
+	const componentName$13 = getComponentName('timer-button');
 
 	const buttonAttrs = [
 	  'button-variant',
@@ -86539,12 +86620,12 @@ function requireIndex_cjs () {
 	  'timer-paused': 'paused',
 	};
 
-	const BaseClass$6 = createBaseClass$1({
-	  componentName: componentName$12,
+	const BaseClass$5 = createBaseClass$1({
+	  componentName: componentName$13,
 	  baseSelector: ':host > div',
 	});
 
-	class RawTimerButton extends BaseClass$6 {
+	class RawTimerButton extends BaseClass$5 {
 	  constructor() {
 	    super();
 
@@ -86795,9 +86876,9 @@ function requireIndex_cjs () {
 	  vars: vars$S
 	});
 
-	const componentName$11 = getComponentName('password-strength');
+	const componentName$12 = getComponentName('password-strength');
 	class RawPasswordStrength extends createBaseClass$1({
-	  componentName: componentName$11,
+	  componentName: componentName$12,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -87000,10 +87081,10 @@ function requireIndex_cjs () {
 
 	var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-	const componentName$10 = getComponentName('collapsible-container');
+	const componentName$11 = getComponentName('collapsible-container');
 
 	class RawCollapsibleContainer extends createBaseClass$1({
-	  componentName: componentName$10,
+	  componentName: componentName$11,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -87238,7 +87319,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$10
+	  componentName$11
 	);
 
 	const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -87349,7 +87430,7 @@ function requireIndex_cjs () {
 	  vars: vars$Q
 	});
 
-	const componentName$$ = getComponentName('recovery-codes');
+	const componentName$10 = getComponentName('recovery-codes');
 
 	const itemRenderer$3 = ({ value }, _, ref) => {
 	  return `
@@ -87360,7 +87441,7 @@ function requireIndex_cjs () {
 	};
 
 	class RawRecoveryCodes extends createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$10,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -87528,7 +87609,7 @@ function requireIndex_cjs () {
 	  vars: vars$P
 	});
 
-	const componentName$_ = getComponentName('outbound-apps');
+	const componentName$$ = getComponentName('outbound-apps');
 
 	const itemRenderer$2 = (
 	  { name, description, logo, appId, isConnected },
@@ -87573,12 +87654,12 @@ function requireIndex_cjs () {
 `;
 	};
 
-	const BaseClass$5 = createBaseClass$1({
-	  componentName: componentName$_,
+	const BaseClass$4 = createBaseClass$1({
+	  componentName: componentName$$,
 	  baseSelector: 'descope-list',
 	});
 
-	class RawOutboundAppsClass extends BaseClass$5 {
+	class RawOutboundAppsClass extends BaseClass$4 {
 	  constructor() {
 	    super();
 
@@ -87790,10 +87871,10 @@ function requireIndex_cjs () {
 	  vars: vars$O
 	});
 
-	const componentName$Z = getComponentName('outbound-app-button');
+	const componentName$_ = getComponentName('outbound-app-button');
 
 	class RawOutboundAppButton extends createBaseClass$1({
-	  componentName: componentName$Z,
+	  componentName: componentName$_,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  static get observedAttributes() {
@@ -87975,7 +88056,7 @@ function requireIndex_cjs () {
 	  };
 	};
 
-	const componentName$Y = getComponentName('trusted-devices');
+	const componentName$Z = getComponentName('trusted-devices');
 
 	const itemRenderer$1 = (
 	  { id, name, lastLoginDate, deviceType, isCurrent },
@@ -88063,12 +88144,12 @@ function requireIndex_cjs () {
 	  return template;
 	};
 
-	const BaseClass$4 = createBaseClass$1({
-	  componentName: componentName$Y,
+	const BaseClass$3 = createBaseClass$1({
+	  componentName: componentName$Z,
 	  baseSelector: ListClass.componentName,
 	});
 
-	class RawTrustedDevicesClass extends BaseClass$4 {
+	class RawTrustedDevicesClass extends BaseClass$3 {
 	  constructor() {
 	    super();
 
@@ -88398,7 +88479,7 @@ function requireIndex_cjs () {
 	  vars: vars$M
 	});
 
-	const componentName$X = getComponentName('tooltip');
+	const componentName$Y = getComponentName('tooltip');
 
 	const tooltipAttrs = [
 	  'text',
@@ -88408,14 +88489,26 @@ function requireIndex_cjs () {
 	  'opened',
 	];
 
-	const BaseClass$3 = createBaseClass$1({
-	  componentName: componentName$X,
+	class RawTooltip extends createBaseClass$1({
+	  componentName: componentName$Y,
 	  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$3 {
 	  static get observedAttributes() {
-	    return tooltipAttrs.concat(BaseClass$3.observedAttributes || []);
+	    return tooltipAttrs.concat(super.observedAttributes || []);
 	  }
 
 	  get isOpened() {
@@ -88438,51 +88531,81 @@ function requireIndex_cjs () {
 	    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() {
@@ -88496,16 +88619,6 @@ function requireIndex_cjs () {
 	    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 = '';
 	  }
@@ -88519,10 +88632,6 @@ function requireIndex_cjs () {
 	    return enrichedText;
 	  }
 
-	  get srLabel() {
-	    return this.tooltip?.querySelector('[slot="sr-label"]');
-	  }
-
 	  #initTooltipTextComponent() {
 	    if (!this.overlayContentNode) return;
 
@@ -88545,25 +88654,35 @@ function requireIndex_cjs () {
 	    });
 	  }
 
-	  // 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?.();
+	      });
 	    }
 	  }
 
@@ -88605,11 +88724,6 @@ function requireIndex_cjs () {
 	  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(
 	  componentNameValidationMixin$1,
 	  portalMixin$1({
@@ -88664,7 +88778,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$X
+	  componentName$Y
 	);
 
 	const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -88762,7 +88876,7 @@ function requireIndex_cjs () {
 	const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
 	  fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-	const componentName$W = getComponentName(
+	const componentName$X = getComponentName(
 	  'country-subdivision-city-field-internal',
 	);
 
@@ -88822,7 +88936,7 @@ function requireIndex_cjs () {
 	// --- Base class ---
 
 	const BaseInputClass$4 = createBaseInputClass$1({
-	  componentName: componentName$W,
+	  componentName: componentName$X,
 	  baseSelector: '',
 	});
 
@@ -88998,7 +89112,7 @@ function requireIndex_cjs () {
 	      if (e.isTrusted) {
 	        const firstInvalidCombo = this.#allCombos.find(
 	          (combo) =>
-	            !combo.classList.contains(`${componentName$W}-hidden`) &&
+	            !combo.classList.contains(`${componentName$X}-hidden`) &&
 	            !combo.checkValidity(),
 	        );
 	        (firstInvalidCombo || this.#getFirstVisibleCombo())?.focus();
@@ -89095,7 +89209,7 @@ function requireIndex_cjs () {
 	  // 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$W}-hidden`)) continue;
+	      if (combo.classList.contains(`${componentName$X}-hidden`)) continue;
 	      if (!combo.checkValidity()) combo.reportValidity();
 	    }
 	  }
@@ -89368,7 +89482,7 @@ function requireIndex_cjs () {
 	      if (!this.#pendingValue && this.#defaultCountry)
 	        this.#onCountrySelected(this.#defaultCountry);
 	    } catch (e) {
-	      console.error(`[${componentName$W}] Failed to load countries`, e);
+	      console.error(`[${componentName$X}] Failed to load countries`, e);
 	    } finally {
 	      this.#countryComboBox.removeAttribute('loading');
 	    }
@@ -89393,7 +89507,7 @@ function requireIndex_cjs () {
 	      }
 	    } catch (e) {
 	      console.error(
-	        `[${componentName$W}] Failed to load subdivisions for ${countryIso2}`,
+	        `[${componentName$X}] Failed to load subdivisions for ${countryIso2}`,
 	        e,
 	      );
 	      this.#subdivisionVisible = false;
@@ -89421,7 +89535,7 @@ function requireIndex_cjs () {
 	      }
 	    } catch (e) {
 	      console.error(
-	        `[${componentName$W}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
+	        `[${componentName$X}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
 	        e,
 	      );
 	    } finally {
@@ -89513,7 +89627,7 @@ function requireIndex_cjs () {
 	  }
 
 	  #setVisible(el, visible) {
-	    el?.classList.toggle(`${componentName$W}-hidden`, !visible);
+	    el?.classList.toggle(`${componentName$X}-hidden`, !visible);
 	  }
 
 	  #updateRequiredOnCombos() {
@@ -89583,7 +89697,7 @@ function requireIndex_cjs () {
 
 	  #getFirstVisibleCombo() {
 	    return this.#allCombos.find(
-	      (combo) => !combo.classList.contains(`${componentName$W}-hidden`),
+	      (combo) => !combo.classList.contains(`${componentName$X}-hidden`),
 	    );
 	  }
 
@@ -89600,7 +89714,7 @@ function requireIndex_cjs () {
 	  RawCountrySubdivisionCityFieldInternal,
 	);
 
-	const componentName$V = getComponentName('country-subdivision-city-field');
+	const componentName$W = getComponentName('country-subdivision-city-field');
 
 	const customMixin$b = (superclass) =>
 	  class CountrySubdivisionCityFieldMixinClass extends superclass {
@@ -89610,15 +89724,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$W}
+      <${componentName$X}
         tabindex="-1"
-      ></${componentName$W}>
+      ></${componentName$X}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$W,
+	        componentName$X,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -89655,11 +89769,11 @@ function requireIndex_cjs () {
 	const host$l = { selector: () => ':host' };
 
 	const internalWrapper$2 = {
-	  selector: `${componentName$W} > .wrapper`,
+	  selector: `${componentName$X} > .wrapper`,
 	};
 
 	const internalComboBoxes = {
-	  selector: `${componentName$W} > .wrapper > descope-combo-box`,
+	  selector: `${componentName$X} > .wrapper > descope-combo-box`,
 	};
 
 	const CountrySubdivisionCityFieldClass = compose(
@@ -89709,7 +89823,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$W} {
+  ${componentName$X} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -89717,19 +89831,19 @@ function requireIndex_cjs () {
     max-width: 100%;
   }
 
-  ${componentName$W} > .wrapper {
+  ${componentName$X} > .wrapper {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
   }
 
-  .${componentName$W}-hidden {
+  .${componentName$X}-hidden {
     display: none;
   }
 
 `,
 	    excludeAttrsSync: ['tabindex', 'style', 'error-message'],
-	    componentName: componentName$V,
+	    componentName: componentName$W,
 	  }),
 	);
 
@@ -89760,7 +89874,7 @@ function requireIndex_cjs () {
 	  vars: vars$K
 	});
 
-	const componentName$U = getComponentName('attachment');
+	const componentName$V = getComponentName('attachment');
 
 	const ATTACHMENT_POSITIONS = [
 	  'top-end',
@@ -89774,19 +89888,19 @@ function requireIndex_cjs () {
 	const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
 
 	class RawAttachment extends createBaseClass$1({
-	  componentName: componentName$U,
-	  baseSelector: ':host > .wrapper',
+	  componentName: componentName$V,
+	  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])');
@@ -89795,6 +89909,10 @@ function requireIndex_cjs () {
 	    );
 	  }
 
+	  get #attachment() {
+	    return this.attachmentSlot?.assignedElements()[0];
+	  }
+
 	  static get observedAttributes() {
 	    return [...(super.observedAttributes || []), 'position'];
 	  }
@@ -89814,9 +89932,8 @@ function requireIndex_cjs () {
       :host {
         display: inline-block;
       }
-      .wrapper {
-        position: relative;
-        display: inline-flex;
+      :host(.hidden) {
+        display: none;
       }
       .attachment-container {
         position: absolute;
@@ -89827,24 +89944,43 @@ function requireIndex_cjs () {
         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(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() {
@@ -89853,16 +89989,14 @@ function requireIndex_cjs () {
 	  }
 
 	  #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() {
@@ -91590,7 +91724,7 @@ function requireIndex_cjs () {
 	  ],
 	};
 
-	const componentName$T = getComponentName$1('text-field');
+	const componentName$U = getComponentName$1('text-field');
 
 	const observedAttrs$3 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -91712,11 +91846,11 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$T,
+	    componentName: componentName$U,
 	  })
 	);
 
-	const componentName$S = getComponentName$1('input-wrapper');
+	const componentName$T = getComponentName$1('input-wrapper');
 	const globalRefs$p = getThemeRefs(globals$1);
 
 	const [theme$1, refs, vars$I] = createHelperVars(
@@ -91846,7 +91980,7 @@ function requireIndex_cjs () {
 	      inputTextSecurity: 'disc',
 	    },
 	  },
-	  componentName$S
+	  componentName$T
 	);
 
 	var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -91966,7 +92100,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$R = getComponentName$1('password');
+	const componentName$S = getComponentName$1('password');
 
 	const customMixin$9 = (superclass) =>
 	  class PasswordFieldMixinClass extends superclass {
@@ -92260,7 +92394,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$R,
+	    componentName: componentName$S,
 	  })
 	);
 
@@ -92323,7 +92457,7 @@ function requireIndex_cjs () {
 	  vars: vars$G
 	});
 
-	const componentName$Q = getComponentName$1('number-field');
+	const componentName$R = getComponentName$1('number-field');
 
 	const NumberFieldClass = compose$1(
 	  createStyleMixin({
@@ -92357,7 +92491,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$Q,
+	    componentName: componentName$R,
 	  })
 	);
 
@@ -92417,7 +92551,7 @@ function requireIndex_cjs () {
 	  vars: vars$F
 	});
 
-	const componentName$P = getComponentName$1('email-field');
+	const componentName$Q = getComponentName$1('email-field');
 
 	const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 	const defaultAutocomplete = 'username';
@@ -92486,7 +92620,7 @@ function requireIndex_cjs () {
       }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$P,
+	    componentName: componentName$Q,
 	  })
 	);
 
@@ -92546,7 +92680,7 @@ function requireIndex_cjs () {
 	  vars: vars$E
 	});
 
-	const componentName$O = getComponentName$1('text-area');
+	const componentName$P = getComponentName$1('text-area');
 
 	const {
 	  host: host$i,
@@ -92635,7 +92769,7 @@ function requireIndex_cjs () {
 			${resetInputCursor('vaadin-text-area')}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$O,
+	    componentName: componentName$P,
 	  })
 	);
 
@@ -92703,9 +92837,9 @@ function requireIndex_cjs () {
 	    inputEventsDispatchingMixin
 	  )(createBaseClass(...args));
 
-	const componentName$N = getComponentName$1('boolean-field-internal');
+	const componentName$O = getComponentName$1('boolean-field-internal');
 
-	createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
 
 	const booleanFieldMixin = (superclass) =>
 	  class BooleanFieldMixinClass extends superclass {
@@ -92714,14 +92848,14 @@ function requireIndex_cjs () {
 
 	      const template = document.createElement('template');
 	      template.innerHTML = `
-				<${componentName$N}
+				<${componentName$O}
 					tabindex="-1"
 					slot="input"
-				></${componentName$N}>
+				></${componentName$O}>
 			`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
-	      this.inputElement = this.shadowRoot.querySelector(componentName$N);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$O);
 	      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
 	      forwardAttrs$1(this, this.inputElement, {
@@ -92799,7 +92933,7 @@ descope-enriched-text {
 
 `;
 
-	const componentName$M = getComponentName$1('checkbox');
+	const componentName$N = getComponentName$1('checkbox');
 
 	const {
 	  host: host$h,
@@ -92935,7 +93069,7 @@ descope-enriched-text {
       }
     `,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$M,
+	    componentName: componentName$N,
 	  })
 	);
 
@@ -92980,7 +93114,7 @@ descope-enriched-text {
 	  vars: vars$C
 	});
 
-	const componentName$L = getComponentName$1('switch-toggle');
+	const componentName$M = getComponentName$1('switch-toggle');
 
 	const {
 	  host: host$g,
@@ -93124,7 +93258,7 @@ descope-enriched-text {
 			}
 		`,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$L,
+	    componentName: componentName$M,
 	  })
 	);
 
@@ -93205,9 +93339,9 @@ descope-enriched-text {
 	  vars: vars$B
 	});
 
-	const componentName$K = getComponentName$1('container');
+	const componentName$L = getComponentName$1('container');
 
-	class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
+	class RawContainer extends createBaseClass({ componentName: componentName$L, baseSelector: 'slot' }) {
 	  constructor() {
 	    super();
 
@@ -93292,7 +93426,7 @@ descope-enriched-text {
 	    horizontalAlignment,
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$K
+	  componentName$L
 	);
 
 	const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -93458,10 +93592,10 @@ descope-enriched-text {
 	  return CssVarImageClass;
 	};
 
-	const componentName$J = getComponentName$1('logo');
+	const componentName$K = getComponentName$1('logo');
 
 	const LogoClass = createCssVarImageClass({
-	  componentName: componentName$J,
+	  componentName: componentName$K,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -93478,10 +93612,10 @@ descope-enriched-text {
 	  vars: vars$z
 	});
 
-	const componentName$I = getComponentName$1('totp-image');
+	const componentName$J = getComponentName$1('totp-image');
 
 	const TotpImageClass = createCssVarImageClass({
-	  componentName: componentName$I,
+	  componentName: componentName$J,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -93498,10 +93632,10 @@ descope-enriched-text {
 	  vars: vars$y
 	});
 
-	const componentName$H = getComponentName$1('notp-image');
+	const componentName$I = getComponentName$1('notp-image');
 
 	const NotpImageClass = createCssVarImageClass({
-	  componentName: componentName$H,
+	  componentName: componentName$I,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -93518,8 +93652,8 @@ descope-enriched-text {
 	  vars: vars$x
 	});
 
-	const componentName$G = getComponentName$1('divider');
-	class RawDivider extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
+	const componentName$H = getComponentName$1('divider');
+	class RawDivider extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -93630,7 +93764,7 @@ descope-enriched-text {
 	    thickness: '2px',
 	    spacing: '10px',
 	  },
-	  componentName$G
+	  componentName$H
 	);
 
 	const divider = {
@@ -93672,13 +93806,13 @@ descope-enriched-text {
 	  vars: vars$w
 	});
 
-	const componentName$F = getComponentName$1('passcode-internal');
+	const componentName$G = getComponentName$1('passcode-internal');
 
-	createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
 
-	const componentName$E = getComponentName$1('loader-radial');
+	const componentName$F = getComponentName$1('loader-radial');
 
-	class RawLoaderRadial extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
+	class RawLoaderRadial extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -93726,7 +93860,7 @@ descope-enriched-text {
 	  componentNameValidationMixin
 	)(RawLoaderRadial);
 
-	const componentName$D = getComponentName$1('passcode');
+	const componentName$E = getComponentName$1('passcode');
 
 	const observedAttributes$3 = ['digits'];
 
@@ -93771,18 +93905,18 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$F}
+      <${componentName$G}
         bordered="true"
         name="code"
         tabindex="-1"
         slot="input"
         role="textbox"
-      ><slot></slot></${componentName$F}>
+      ><slot></slot></${componentName$G}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$F);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$G);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['digits', 'size', 'loading', 'disabled'],
@@ -93951,7 +94085,7 @@ descope-enriched-text {
 			${resetInputCursor('vaadin-text-field')}
     	`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$D,
+	    componentName: componentName$E,
 	  })
 	);
 
@@ -94007,11 +94141,11 @@ descope-enriched-text {
 	  vars: vars$v
 	});
 
-	const componentName$C = getComponentName$1('loader-linear');
+	const componentName$D = getComponentName$1('loader-linear');
 
-	class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+	class RawLoaderLinear extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
 	  static get componentName() {
-	    return componentName$C;
+	    return componentName$D;
 	  }
 
 	  constructor() {
@@ -94136,7 +94270,7 @@ descope-enriched-text {
 	      },
 	    },
 	  },
-	  componentName$E
+	  componentName$F
 	);
 
 	const loaderRadial = {
@@ -95387,14 +95521,14 @@ descope-enriched-text {
 	  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 	];
 
-	const componentName$B = getComponentName$1('phone-field-internal');
+	const componentName$C = getComponentName$1('phone-field-internal');
 
-	createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
 
 	const textVars$2 = TextFieldClass.cssVarList;
 	const comboVars = ComboBoxClass.cssVarList;
 
-	const componentName$A = getComponentName$1('phone-field');
+	const componentName$B = getComponentName$1('phone-field');
 
 	const customMixin$6 = (superclass) =>
 	  class PhoneFieldMixinClass extends superclass {
@@ -95408,15 +95542,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$B}
+				<${componentName$C}
 					tabindex="-1"
 					slot="input"
-				></${componentName$B}>
+				></${componentName$C}>
       		`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$B);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$C);
 
 	      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
 	        includeAttrs: [
@@ -95699,7 +95833,7 @@ descope-enriched-text {
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$A,
+	    componentName: componentName$B,
 	  })
 	);
 
@@ -95751,13 +95885,13 @@ descope-enriched-text {
 	  vars: vars$s
 	});
 
-	const componentName$z = getComponentName$1('phone-field-internal-input-box');
+	const componentName$A = getComponentName$1('phone-field-internal-input-box');
 
-	createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
 
 	const textVars$1 = TextFieldClass.cssVarList;
 
-	const componentName$y = getComponentName$1('phone-input-box-field');
+	const componentName$z = getComponentName$1('phone-input-box-field');
 
 	const customMixin$5 = (superclass) =>
 	  class PhoneFieldInputBoxMixinClass extends superclass {
@@ -95771,15 +95905,15 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-				<${componentName$z}
+				<${componentName$A}
 					tabindex="-1"
 					slot="input"
-				></${componentName$z}>
+				></${componentName$A}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$z);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$A);
 
 	      syncAttrs(this, this.inputElement, { includeAttrs: ['has-value'] });
 
@@ -95991,7 +96125,7 @@ descope-enriched-text {
     ${inputFloatingLabelStyle()}
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$y,
+	    componentName: componentName$z,
 	  })
 	);
 
@@ -96051,12 +96185,12 @@ descope-enriched-text {
 	  vars: vars$r
 	});
 
-	const componentName$x = getComponentName$1('new-password-internal');
+	const componentName$y = getComponentName$1('new-password-internal');
 
 	const interpolateString = (template, values) =>
 	  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
-	const componentName$w = getComponentName$1('policy-validation');
+	const componentName$x = getComponentName$1('policy-validation');
 
 	const overrideAttrs = [
 	  'data-password-policy-value-minlength',
@@ -96066,7 +96200,7 @@ descope-enriched-text {
 	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 = [];
@@ -96338,7 +96472,7 @@ descope-enriched-text {
 	  componentNameValidationMixin
 	)(RawPolicyValidation);
 
-	const componentName$v = getComponentName$1('new-password');
+	const componentName$w = getComponentName$1('new-password');
 
 	const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -96352,18 +96486,18 @@ descope-enriched-text {
 	      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();
@@ -96558,7 +96692,7 @@ descope-enriched-text {
     }
 		`,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$v,
+	    componentName: componentName$w,
 	  })
 	);
 
@@ -96615,7 +96749,7 @@ descope-enriched-text {
 
 	const getFilename = (fileObj) => fileObj.name.replace(/^.*\\/, '');
 
-	const componentName$u = getComponentName$1('upload-file');
+	const componentName$v = getComponentName$1('upload-file');
 
 	const observedAttributes$2 = [
 	  'title',
@@ -96630,7 +96764,7 @@ descope-enriched-text {
 	  'icon',
 	];
 
-	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$u, baseSelector: ':host > div' });
+	const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$v, baseSelector: ':host > div' });
 
 	class RawUploadFile extends BaseInputClass$3 {
 	  static get observedAttributes() {
@@ -96916,10 +97050,10 @@ descope-enriched-text {
 	  vars: vars$p
 	});
 
-	const componentName$t = getComponentName$1('button-selection-group-item');
+	const componentName$u = getComponentName$1('button-selection-group-item');
 
 	class RawSelectItem extends createBaseClass({
-	  componentName: componentName$t,
+	  componentName: componentName$u,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  get size() {
@@ -97151,10 +97285,10 @@ descope-enriched-text {
 	  return BaseButtonSelectionGroupInternalClass;
 	};
 
-	const componentName$s = getComponentName$1('button-selection-group-internal');
+	const componentName$t = getComponentName$1('button-selection-group-internal');
 
 	class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$s
+	  componentName$t
 	) {
 	  getSelectedNode() {
 	    return this.items.find((item) => item.hasAttribute('selected'));
@@ -97397,7 +97531,7 @@ descope-enriched-text {
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-	const componentName$r = getComponentName$1('button-selection-group');
+	const componentName$s = getComponentName$1('button-selection-group');
 
 	const buttonSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -97406,19 +97540,19 @@ descope-enriched-text {
 	      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$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -97443,7 +97577,7 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$r,
+	    componentName: componentName$s,
 	  })
 	);
 
@@ -97480,10 +97614,10 @@ descope-enriched-text {
 	  vars: vars$n
 	});
 
-	const componentName$q = getComponentName$1('button-multi-selection-group-internal');
+	const componentName$r = getComponentName$1('button-multi-selection-group-internal');
 
 	class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
-	  componentName$q
+	  componentName$r
 	) {
 	  #getSelectedNodes() {
 	    return this.items.filter((item) => item.hasAttribute('selected'));
@@ -97585,7 +97719,7 @@ descope-enriched-text {
 	  }
 	}
 
-	const componentName$p = getComponentName$1('button-multi-selection-group');
+	const componentName$q = getComponentName$1('button-multi-selection-group');
 
 	const buttonMultiSelectionGroupMixin = (superclass) =>
 	  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -97594,19 +97728,19 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$q}
+      <${componentName$r}
       	name="button-selection-group"
       	slot="input"
         tabindex="-1"
         part="internal-component"
       >
         <slot></slot>
-      </${componentName$q}>
+      </${componentName$r}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$q);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$r);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -97631,7 +97765,7 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => buttonSelectionGroupStyles,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$p,
+	    componentName: componentName$q,
 	  })
 	);
 
@@ -97647,7 +97781,7 @@ descope-enriched-text {
 	  vars: vars$m
 	});
 
-	const componentName$o = getComponentName$1('modal');
+	const componentName$p = getComponentName$1('modal');
 
 	const observedAttrs$2 = ['opened'];
 
@@ -97796,7 +97930,7 @@ descope-enriched-text {
       }
     `,
 	    excludeAttrsSync: ['tabindex', 'opened', 'style'],
-	    componentName: componentName$o,
+	    componentName: componentName$p,
 	  })
 	);
 
@@ -97907,7 +98041,7 @@ descope-enriched-text {
 </div>
   `;
 
-	const componentName$n = getComponentName$1('grid');
+	const componentName$o = getComponentName$1('grid');
 
 	const GridMixin = (superclass) =>
 	  class GridMixinClass extends superclass {
@@ -98276,7 +98410,7 @@ descope-enriched-text {
     /*!css*/
 		`,
 	    excludeAttrsSync: ['columns', 'tabindex', 'style'],
-	    componentName: componentName$n,
+	    componentName: componentName$o,
 	  })
 	);
 
@@ -98332,7 +98466,7 @@ descope-enriched-text {
 	  vars: vars$k
 	});
 
-	const componentName$m = getComponentName$1('notification-card');
+	const componentName$n = getComponentName$1('notification-card');
 
 	const notificationCardMixin = (superclass) =>
 	  class NotificationCardMixinClass extends superclass {
@@ -98440,7 +98574,7 @@ descope-enriched-text {
     }
     `,
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$m,
+	    componentName: componentName$n,
 	  })
 	);
 
@@ -98498,7 +98632,7 @@ descope-enriched-text {
 	  vars: vars$j
 	});
 
-	const componentName$l = getComponentName$1('multi-select-combo-box');
+	const componentName$m = getComponentName$1('multi-select-combo-box');
 
 	const multiSelectComboBoxMixin = (superclass) =>
 	  class MultiSelectComboBoxMixinClass extends superclass {
@@ -99153,7 +99287,7 @@ descope-enriched-text {
 	    // 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$l,
+	    componentName: componentName$m,
 	    includeForwardProps: ['items', 'renderer', 'selectedItems'],
 	  })
 	);
@@ -99249,11 +99383,11 @@ descope-enriched-text {
 	  vars: vars$i
 	});
 
-	const componentName$k = getComponentName$1('mappings-field-internal');
+	const componentName$l = getComponentName$1('mappings-field-internal');
 
-	createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
-	const componentName$j = getComponentName$1('mappings-field');
+	const componentName$k = getComponentName$1('mappings-field');
 
 	const customMixin$2 = (superclass) =>
 	  class MappingsFieldMixinClass extends superclass {
@@ -99282,14 +99416,14 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$k}
+      <${componentName$l}
         tabindex="-1"
-      ></${componentName$k}>
+      ></${componentName$l}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$k);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: [
@@ -99425,7 +99559,7 @@ descope-enriched-text {
 	      'error-message',
 	      'style',
 	    ],
-	    componentName: componentName$j,
+	    componentName: componentName$k,
 	  })
 	);
 
@@ -99463,9 +99597,9 @@ descope-enriched-text {
 
 	var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
-	const componentName$i = getComponentName$1('user-attribute');
+	const componentName$j = getComponentName$1('user-attribute');
 	class RawUserAttribute extends createBaseClass({
-	  componentName: componentName$i,
+	  componentName: componentName$j,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -99813,9 +99947,9 @@ descope-enriched-text {
 
 	var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-	const componentName$h = getComponentName$1('user-auth-method');
+	const componentName$i = getComponentName$1('user-auth-method');
 	class RawUserAuthMethod extends createBaseClass({
-	  componentName: componentName$h,
+	  componentName: componentName$i,
 	  baseSelector: ':host > .root',
 	}) {
 	  constructor() {
@@ -100088,11 +100222,11 @@ descope-enriched-text {
 	  vars: vars$f
 	});
 
-	const componentName$g = getComponentName$1('saml-group-mappings-internal');
+	const componentName$h = getComponentName$1('saml-group-mappings-internal');
 
-	createBaseInputClass({ componentName: componentName$g, baseSelector: '' });
+	createBaseInputClass({ componentName: componentName$h, baseSelector: '' });
 
-	const componentName$f = getComponentName$1('saml-group-mappings');
+	const componentName$g = getComponentName$1('saml-group-mappings');
 
 	const customMixin$1 = (superclass) =>
 	  class SamlGroupMappingsMixinClass extends superclass {
@@ -100102,14 +100236,14 @@ descope-enriched-text {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$g}
+      <${componentName$h}
         tabindex="-1"
-      ></${componentName$g}>
+      ></${componentName$h}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
-	      this.inputElement = this.shadowRoot.querySelector(componentName$g);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
 	      forwardAttrs$1(this, this.inputElement, {
 	        includeAttrs: [
@@ -100194,7 +100328,7 @@ descope-enriched-text {
 	      'error-message',
 	      'style',
 	    ],
-	    componentName: componentName$f,
+	    componentName: componentName$g,
 	  })
 	);
 
@@ -100261,9 +100395,9 @@ descope-enriched-text {
 
 	var checkIconSrc = "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iY2hlY2staWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT4KPC9zdmc+Cg==";
 
-	const componentName$e = getComponentName$1('code-snippet');
+	const componentName$f = getComponentName$1('code-snippet');
 
-	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
+	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > .wrapper' }) {
 	  static get observedAttributes() {
 	    return ['lang', 'inline', 'copy-button'];
 	  }
@@ -100746,7 +100880,7 @@ descope-enriched-text {
 	  vars: vars$c
 	});
 
-	const componentName$d = getComponentName$1('radio-button');
+	const componentName$e = getComponentName$1('radio-button');
 
 	const customMixin = (superclass) =>
 	  class CustomMixin extends superclass {
@@ -100811,11 +100945,11 @@ descope-enriched-text {
 	    wrappedEleName: 'vaadin-radio-button',
 	    excludeAttrsSync: ['tabindex', 'data', 'style'],
 	    includeForwardProps: ['checked', 'name', 'disabled'],
-	    componentName: componentName$d,
+	    componentName: componentName$e,
 	  })
 	);
 
-	const componentName$c = getComponentName$1('radio-group');
+	const componentName$d = getComponentName$1('radio-group');
 
 	const RadioGroupMixin = (superclass) =>
 	  class RadioGroupMixinClass extends superclass {
@@ -100829,12 +100963,12 @@ descope-enriched-text {
 
 	      // we are overriding vaadin children getter so it will run on our custom elements
 	      Object.defineProperty(this.baseElement, 'children', {
-	        get: () => this.querySelectorAll(componentName$d),
+	        get: () => this.querySelectorAll(componentName$e),
 	      });
 
 	      // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
 	      this.baseElement.__filterRadioButtons = (nodes) =>
-	        nodes.filter((node) => node.localName === componentName$d);
+	        nodes.filter((node) => node.localName === componentName$e);
 
 	      // vaadin radio group missing some input properties
 	      this.baseElement.setCustomValidity = () => {};
@@ -100980,7 +101114,7 @@ descope-enriched-text {
     `,
 
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-	    componentName: componentName$c,
+	    componentName: componentName$d,
 	    includeForwardProps: ['value'],
 	  })
 	);
@@ -101426,7 +101560,7 @@ descope-enriched-text {
 	  return date;
 	};
 
-	const componentName$b = getComponentName$1('calendar');
+	const componentName$c = getComponentName$1('calendar');
 
 	const observedAttrs$1 = [
 	  'initial-value',
@@ -101443,7 +101577,7 @@ descope-enriched-text {
 
 	const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-	const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
+	const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
 
 	class RawCalendar extends BaseInputClass$2 {
 	  static get observedAttributes() {
@@ -102272,12 +102406,12 @@ descope-enriched-text {
 	  }
 	}
 
-	const componentName$a = getComponentName$1('date-field');
+	const componentName$b = getComponentName$1('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$1 = createBaseInputClass({ componentName: componentName$a, baseSelector: BASE_SELECTOR });
+	const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$b, baseSelector: BASE_SELECTOR });
 
 	const dateFieldAttrs = [
 	  'format',
@@ -103357,7 +103491,7 @@ descope-enriched-text {
 	      }
 	    };
 
-	const componentName$9 = getComponentName$1('scopes-list');
+	const componentName$a = getComponentName$1('scopes-list');
 	const variants = ['checkbox', 'switch'];
 
 	const itemRenderer = ({ id, desc, required = false }, _, ref) => {
@@ -103376,7 +103510,7 @@ descope-enriched-text {
 `;
 	};
 
-	class RawScopesList extends createBaseClass({ componentName: componentName$9, baseSelector: 'div' }) {
+	class RawScopesList extends createBaseClass({ componentName: componentName$a, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -103500,9 +103634,9 @@ descope-enriched-text {
 
 	var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-	const componentName$8 = getComponentName$1('third-party-app-logo');
+	const componentName$9 = getComponentName$1('third-party-app-logo');
 	class RawThirdPartyAppLogoClass extends createBaseClass({
-	  componentName: componentName$8,
+	  componentName: componentName$9,
 	  baseSelector: '.wrapper',
 	}) {
 	  constructor() {
@@ -103635,7 +103769,7 @@ descope-enriched-text {
 	  vars: vars$6
 	});
 
-	const componentName$7 = getComponentName$1('security-questions-setup');
+	const componentName$8 = getComponentName$1('security-questions-setup');
 
 	const attrsToSync$1 = [
 	  'full-width',
@@ -103654,7 +103788,7 @@ descope-enriched-text {
 	];
 
 	const attrsToReRender$1 = ['count', 'questions'];
-	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$7, baseSelector: 'div' }) {
+	class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$8, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -103762,7 +103896,7 @@ descope-enriched-text {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$7, 'Error parsing questions attribute', e);
+	      console.error(componentName$8, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -103884,7 +104018,7 @@ descope-enriched-text {
 	  vars: vars$5
 	});
 
-	const componentName$6 = getComponentName$1('security-questions-verify');
+	const componentName$7 = getComponentName$1('security-questions-verify');
 
 	const textFieldsAttrs = [
 	  'full-width',
@@ -103908,7 +104042,7 @@ descope-enriched-text {
 	const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 	const attrsToReRender = ['questions'];
-	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$6, baseSelector: 'div' }) {
+	class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$7, baseSelector: 'div' }) {
 	  constructor() {
 	    super();
 
@@ -103982,7 +104116,7 @@ descope-enriched-text {
 	      return JSON.parse(this.getAttribute('questions')) || [];
 	    } catch (e) {
 	      // eslint-disable-next-line no-console
-	      console.error(componentName$6, 'Error parsing questions attribute', e);
+	      console.error(componentName$7, 'Error parsing questions attribute', e);
 	      return [];
 	    }
 	  }
@@ -104141,7 +104275,7 @@ descope-enriched-text {
 
 	const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-	const componentName$5 = getComponentName$1('hybrid-field');
+	const componentName$6 = getComponentName$1('hybrid-field');
 
 	const attrs = {
 	  shared: [
@@ -104208,7 +104342,7 @@ descope-enriched-text {
 	const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 	const BaseClass$2 = createBaseClass({
-	  componentName: componentName$5,
+	  componentName: componentName$6,
 	  baseSelector: 'div',
 	});
 
@@ -104619,9 +104753,9 @@ descope-enriched-text {
 	  vars: vars$3
 	});
 
-	const componentName$4 = getComponentName$1('alert');
+	const componentName$5 = getComponentName$1('alert');
 
-	class RawAlert extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
+	class RawAlert extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > div' }) {
 	  constructor() {
 	    super();
 
@@ -104829,11 +104963,11 @@ descope-enriched-text {
 	  vars: vars$2
 	});
 
-	const componentName$3 = getComponentName$1('hcaptcha');
+	const componentName$4 = getComponentName$1('hcaptcha');
 
 	const observedAttributes$1 = ['enabled', 'site-key'];
 
-	const BaseInputClass = createBaseInputClass({ componentName: componentName$3, baseSelector: ':host > div' });
+	const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
 	class RawHcaptcha extends BaseInputClass {
 	  static get observedAttributes() {
 	    return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
@@ -105115,12 +105249,12 @@ descope-enriched-text {
 	  },
 	});
 
-	const componentName$2 = getComponentName$1('recaptcha');
+	const componentName$3 = getComponentName$1('recaptcha');
 
 	const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
 	const BaseClass$1 = createBaseClass({
-	  componentName: componentName$2,
+	  componentName: componentName$3,
 	  baseSelector: ':host > div',
 	});
 	class RawRecaptcha extends BaseClass$1 {
@@ -105418,7 +105552,7 @@ descope-enriched-text {
 
 	const RecaptchaClass = compose$1(draggableMixin)(RawRecaptcha);
 
-	const componentName$1 = getComponentName$1('notification');
+	const componentName$2 = getComponentName$1('notification');
 
 	const NotificationMixin = (superclass) =>
 	  class NotificationMixinClass extends superclass {
@@ -105511,10 +105645,169 @@ descope-enriched-text {
 	  createProxy({
 	    wrappedEleName: 'vaadin-notification',
 	    excludeAttrsSync: ['tabindex', 'style'],
-	    componentName: componentName$1,
+	    componentName: componentName$2,
 	  })
 	);
 
+	const componentName$1 = getComponentName('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;
+      }
+
+      /* 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: auto;     /* defer to width:100% on the main axis; avoids forcing 100% height in column-flex parents */
+        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(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);
+	  }
+	}
+
+	const AnchoredClass = compose(componentNameValidationMixin$1)(RawAnchored);
+
 	// NOTICE: This component registers with a DIFFERENT name than its file name
 	const componentName = getComponentName('ponyhot');
 
@@ -105635,6 +105928,7 @@ descope-enriched-text {
 
 	index_cjs$4.AddressFieldClass = AddressFieldClass;
 	index_cjs$4.AlertClass = AlertClass;
+	index_cjs$4.AnchoredClass = AnchoredClass;
 	index_cjs$4.AppsListClass = AppsListClass;
 	index_cjs$4.AttachmentClass = AttachmentClass;
 	index_cjs$4.AutocompleteFieldClass = AutocompleteFieldClass;