@descope/web-components-ui 3.6.0 → 3.7.1

package/dist/cjs/index.cjs.js

@@ -256,6 +256,8 @@ const observeAttributes = (
   });
 
   observer.observe(ele, { attributes: true });
+
+  return { disconnect: () => observer.disconnect() };
 };
 
 // calling the callback with this object: { addedNodes, removedNodes }
@@ -305,13 +307,12 @@ const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 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;
@@ -324,7 +325,6 @@ const forwardProps$2 = (src, target, props = []) => {
             return src[prop];
           },
           set(v) {
-            // eslint-disable-next-line no-param-reassign
             src[prop] = v;
           },
         },
@@ -339,8 +339,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 });
   }
@@ -3024,6 +3025,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 getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
   return match ? match[1] : null;
@@ -3085,12 +3135,12 @@ const createImage = async (src, altText) => {
 
 /* 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() {
@@ -3218,7 +3268,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1j = getComponentName('icon');
+const componentName$1k = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3239,7 +3289,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1j,
+    componentName: componentName$1k,
   }),
 );
 
@@ -3254,7 +3304,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1i = getComponentName('button');
+const componentName$1j = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3301,6 +3351,7 @@ const { host: host$x, label: label$a, slottedIcon } = {
 let loadingIndicatorStyles;
 
 const ButtonClass = compose(
+  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),
   createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
@@ -3374,7 +3425,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1i,
+    componentName: componentName$1j,
   }),
 );
 
@@ -3424,7 +3475,7 @@ const mode = {
 
 const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1(
   { mode },
-  componentName$1i,
+  componentName$1j,
 );
 
 const button = {
@@ -3549,10 +3600,10 @@ var button$1 = /*#__PURE__*/Object.freeze({
   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() {
@@ -3745,9 +3796,9 @@ const decodeHTML = (html) => {
 /* 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;
@@ -3952,12 +4003,12 @@ const EnrichedTextClass = compose(
   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() {
@@ -4130,7 +4181,7 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$12
 });
 
-const componentName$1e = getComponentName('combo-box');
+const componentName$1f = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4823,12 +4874,12 @@ const ComboBoxClass = compose(
     // 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(
@@ -4954,7 +5005,7 @@ const [theme$2, refs$1] = createHelperVars$1(
       backgroundColor: globalRefs$D.colors.surface.main,
     },
   },
-  componentName$1d,
+  componentName$1e,
 );
 
 const globalRefs$C = getThemeRefs$1(globals);
@@ -5065,12 +5116,16 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   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();
 
@@ -5096,6 +5151,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(
@@ -5141,7 +5214,7 @@ const [helperTheme$6, helperRefs$6] = createHelperVars$1(
   {
     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;
@@ -5184,18 +5257,26 @@ const badge$2 = {
     },
   },
 
-  $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: {
@@ -5253,9 +5334,9 @@ var badge$3 = /*#__PURE__*/Object.freeze({
   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() {
@@ -5436,7 +5517,7 @@ var image$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Z
 });
 
-const componentName$1a = getComponentName('list-item');
+const componentName$1b = getComponentName('list-item');
 
 const customMixin$f = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -5493,12 +5574,12 @@ const ListItemClass = compose(
   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() {
@@ -5669,7 +5750,7 @@ const ListClass = compose(
   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"'}>
@@ -5793,7 +5874,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$18,
+    componentName: componentName$19,
     style: () => `
       :host {
         width: 100%;
@@ -5898,7 +5979,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$19,
+  componentName$1a,
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -6013,14 +6094,14 @@ var listItem$1 = /*#__PURE__*/Object.freeze({
   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 {
@@ -6041,15 +6122,15 @@ const customMixin$d = (superclass) =>
       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, {
@@ -6168,7 +6249,7 @@ const AutocompleteFieldClass = compose(
     }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$16,
+    componentName: componentName$17,
   }),
 );
 
@@ -6422,7 +6503,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-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';
@@ -6433,7 +6514,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$5 = createBaseInputClass$1({
-  componentName: componentName$15,
+  componentName: componentName$16,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -6540,7 +6621,7 @@ compose(
   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 {
@@ -6569,15 +6650,15 @@ const customMixin$c = (superclass) =>
       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, {
@@ -6655,7 +6736,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$15} {
+  ${componentName$16} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -6663,12 +6744,12 @@ const AddressFieldClass = compose(
     max-width: 100%;
   }
 
-  ${componentName$15} ::slotted {
+  ${componentName$16} ::slotted {
     padding: 0;
   }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$15,
   }),
 );
 
@@ -6708,24 +6789,24 @@ const formatTime = (ms = 0) => {
   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() {
@@ -6934,7 +7015,7 @@ var timer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$T
 });
 
-const componentName$12 = getComponentName('timer-button');
+const componentName$13 = getComponentName('timer-button');
 
 const buttonAttrs = [
   'button-variant',
@@ -6964,12 +7045,12 @@ const mapTimerAttrs = {
   '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();
 
@@ -7220,9 +7301,9 @@ var timerButton$1 = /*#__PURE__*/Object.freeze({
   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() {
@@ -7425,10 +7506,10 @@ var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 
 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() {
@@ -7663,7 +7744,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$10
+  componentName$11
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -7774,7 +7855,7 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Q
 });
 
-const componentName$$ = getComponentName('recovery-codes');
+const componentName$10 = getComponentName('recovery-codes');
 
 const itemRenderer$3 = ({ value }, _, ref) => {
   return `
@@ -7785,7 +7866,7 @@ const itemRenderer$3 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$$,
+  componentName: componentName$10,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -7953,7 +8034,7 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
   vars: vars$P
 });
 
-const componentName$_ = getComponentName('outbound-apps');
+const componentName$$ = getComponentName('outbound-apps');
 
 const itemRenderer$2 = (
   { name, description, logo, appId, isConnected },
@@ -7998,12 +8079,12 @@ const itemRenderer$2 = (
 `;
 };
 
-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();
 
@@ -8215,10 +8296,10 @@ var outboundApps$1 = /*#__PURE__*/Object.freeze({
   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() {
@@ -8400,7 +8481,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$Y = getComponentName('trusted-devices');
+const componentName$Z = getComponentName('trusted-devices');
 
 const itemRenderer$1 = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -8488,12 +8569,12 @@ const itemRenderer$1 = (
   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();
 
@@ -8823,7 +8904,7 @@ var trustedDevices = /*#__PURE__*/Object.freeze({
   vars: vars$M
 });
 
-const componentName$X = getComponentName('tooltip');
+const componentName$Y = getComponentName('tooltip');
 
 const tooltipAttrs = [
   'text',
@@ -8833,14 +8914,26 @@ const tooltipAttrs = [
   '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() {
@@ -8863,51 +8956,81 @@ class RawTooltip extends BaseClass$3 {
     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() {
@@ -8921,16 +9044,6 @@ class RawTooltip extends BaseClass$3 {
     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 = '';
   }
@@ -8944,10 +9057,6 @@ class RawTooltip extends BaseClass$3 {
     return enrichedText;
   }
 
-  get srLabel() {
-    return this.tooltip?.querySelector('[slot="sr-label"]');
-  }
-
   #initTooltipTextComponent() {
     if (!this.overlayContentNode) return;
 
@@ -8970,25 +9079,35 @@ class RawTooltip extends BaseClass$3 {
     });
   }
 
-  // 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?.();
+      });
     }
   }
 
@@ -9030,11 +9149,6 @@ const { overlay: overlay$1, 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(
   componentNameValidationMixin$1,
   portalMixin$1({
@@ -9089,7 +9203,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$X
+  componentName$Y
 );
 
 const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -9187,7 +9301,7 @@ const fetchLabels = async (baseUrl) => {
 const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
   fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-const componentName$W = getComponentName(
+const componentName$X = getComponentName(
   'country-subdivision-city-field-internal',
 );
 
@@ -9247,7 +9361,7 @@ const comboBoxHTML = (id) =>
 // --- Base class ---
 
 const BaseInputClass$4 = createBaseInputClass$1({
-  componentName: componentName$W,
+  componentName: componentName$X,
   baseSelector: '',
 });
 
@@ -9423,7 +9537,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       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();
@@ -9520,7 +9634,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   // 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();
     }
   }
@@ -9793,7 +9907,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       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');
     }
@@ -9818,7 +9932,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       }
     } catch (e) {
       console.error(
-        `[${componentName$W}] Failed to load subdivisions for ${countryIso2}`,
+        `[${componentName$X}] Failed to load subdivisions for ${countryIso2}`,
         e,
       );
       this.#subdivisionVisible = false;
@@ -9846,7 +9960,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       }
     } 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 {
@@ -9938,7 +10052,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   }
 
   #setVisible(el, visible) {
-    el?.classList.toggle(`${componentName$W}-hidden`, !visible);
+    el?.classList.toggle(`${componentName$X}-hidden`, !visible);
   }
 
   #updateRequiredOnCombos() {
@@ -10008,7 +10122,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
 
   #getFirstVisibleCombo() {
     return this.#allCombos.find(
-      (combo) => !combo.classList.contains(`${componentName$W}-hidden`),
+      (combo) => !combo.classList.contains(`${componentName$X}-hidden`),
     );
   }
 
@@ -10025,7 +10139,7 @@ compose()(
   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 {
@@ -10035,15 +10149,15 @@ const customMixin$b = (superclass) =>
       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, {
@@ -10080,11 +10194,11 @@ const customMixin$b = (superclass) =>
 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(
@@ -10134,7 +10248,7 @@ const CountrySubdivisionCityFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$W} {
+  ${componentName$X} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -10142,19 +10256,19 @@ const CountrySubdivisionCityFieldClass = compose(
     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,
   }),
 );
 
@@ -10185,7 +10299,7 @@ var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$K
 });
 
-const componentName$U = getComponentName('attachment');
+const componentName$V = getComponentName('attachment');
 
 const ATTACHMENT_POSITIONS = [
   'top-end',
@@ -10199,19 +10313,19 @@ const ATTACHMENT_POSITIONS = [
 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])');
@@ -10220,6 +10334,10 @@ class RawAttachment extends createBaseClass$1({
     );
   }
 
+  get #attachment() {
+    return this.attachmentSlot?.assignedElements()[0];
+  }
+
   static get observedAttributes() {
     return [...(super.observedAttributes || []), 'position'];
   }
@@ -10239,9 +10357,8 @@ class RawAttachment extends createBaseClass$1({
       :host {
         display: inline-block;
       }
-      .wrapper {
-        position: relative;
-        display: inline-flex;
+      :host(.hidden) {
+        display: none;
       }
       .attachment-container {
         position: absolute;
@@ -10252,24 +10369,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(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() {
@@ -10278,16 +10414,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() {
@@ -12015,7 +12149,7 @@ var textFieldMappings = {
   ],
 };
 
-const componentName$T = getComponentName$1('text-field');
+const componentName$U = getComponentName$1('text-field');
 
 const observedAttrs$3 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -12137,11 +12271,11 @@ const TextFieldClass = compose$1(
       }
 		`,
     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(
@@ -12271,7 +12405,7 @@ const [theme$1, refs, vars$I] = createHelperVars(
       inputTextSecurity: 'disc',
     },
   },
-  componentName$S
+  componentName$T
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -12391,7 +12525,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$R = getComponentName$1('password');
+const componentName$S = getComponentName$1('password');
 
 const customMixin$9 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -12685,7 +12819,7 @@ const PasswordClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$R,
+    componentName: componentName$S,
   })
 );
 
@@ -12748,7 +12882,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
   vars: vars$G
 });
 
-const componentName$Q = getComponentName$1('number-field');
+const componentName$R = getComponentName$1('number-field');
 
 const NumberFieldClass = compose$1(
   createStyleMixin({
@@ -12782,7 +12916,7 @@ const NumberFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$Q,
+    componentName: componentName$R,
   })
 );
 
@@ -12842,7 +12976,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
   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';
@@ -12911,7 +13045,7 @@ const EmailFieldClass = compose$1(
       }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$P,
+    componentName: componentName$Q,
   })
 );
 
@@ -12971,7 +13105,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$E
 });
 
-const componentName$O = getComponentName$1('text-area');
+const componentName$P = getComponentName$1('text-area');
 
 const {
   host: host$i,
@@ -13060,7 +13194,7 @@ const TextAreaClass = compose$1(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$O,
+    componentName: componentName$P,
   })
 );
 
@@ -13128,9 +13262,9 @@ const createBaseInputClass = (...args) =>
     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 {
@@ -13139,14 +13273,14 @@ const booleanFieldMixin = (superclass) =>
 
       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, {
@@ -13224,7 +13358,7 @@ descope-enriched-text {
 
 `;
 
-const componentName$M = getComponentName$1('checkbox');
+const componentName$N = getComponentName$1('checkbox');
 
 const {
   host: host$h,
@@ -13360,7 +13494,7 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$M,
+    componentName: componentName$N,
   })
 );
 
@@ -13405,7 +13539,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$C
 });
 
-const componentName$L = getComponentName$1('switch-toggle');
+const componentName$M = getComponentName$1('switch-toggle');
 
 const {
   host: host$g,
@@ -13549,7 +13683,7 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$L,
+    componentName: componentName$M,
   })
 );
 
@@ -13630,9 +13764,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   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();
 
@@ -13717,7 +13851,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$K
+  componentName$L
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -13883,10 +14017,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   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',
 });
@@ -13903,10 +14037,10 @@ var logo$3 = /*#__PURE__*/Object.freeze({
   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',
 });
@@ -13923,10 +14057,10 @@ var totpImage = /*#__PURE__*/Object.freeze({
   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',
 });
@@ -13943,8 +14077,8 @@ var notpImage = /*#__PURE__*/Object.freeze({
   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();
 
@@ -14055,7 +14189,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$G
+  componentName$H
 );
 
 const divider = {
@@ -14097,13 +14231,13 @@ var divider$1 = /*#__PURE__*/Object.freeze({
   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();
 
@@ -14151,7 +14285,7 @@ const LoaderRadialClass = compose$1(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const componentName$D = getComponentName$1('passcode');
+const componentName$E = getComponentName$1('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -14196,18 +14330,18 @@ const customMixin$7 = (superclass) =>
       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'],
@@ -14376,7 +14510,7 @@ const PasscodeClass = compose$1(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$D,
+    componentName: componentName$E,
   })
 );
 
@@ -14432,11 +14566,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   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() {
@@ -14561,7 +14695,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
       },
     },
   },
-  componentName$E
+  componentName$F
 );
 
 const loaderRadial = {
@@ -15812,14 +15946,14 @@ var CountryCodes = [
   ].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 {
@@ -15833,15 +15967,15 @@ const customMixin$6 = (superclass) =>
       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: [
@@ -16124,7 +16258,7 @@ const PhoneFieldClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$A,
+    componentName: componentName$B,
   })
 );
 
@@ -16176,13 +16310,13 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   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 {
@@ -16196,15 +16330,15 @@ const customMixin$5 = (superclass) =>
       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'] });
 
@@ -16416,7 +16550,7 @@ const PhoneFieldInputBoxClass = compose$1(
     ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$y,
+    componentName: componentName$z,
   })
 );
 
@@ -16476,12 +16610,12 @@ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   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',
@@ -16491,7 +16625,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 = [];
@@ -16763,7 +16897,7 @@ const PolicyValidationClass = compose$1(
   componentNameValidationMixin
 )(RawPolicyValidation);
 
-const componentName$v = getComponentName$1('new-password');
+const componentName$w = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -16777,18 +16911,18 @@ const customMixin$4 = (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();
@@ -16983,7 +17117,7 @@ const NewPasswordClass = compose$1(
     }
 		`,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$v,
+    componentName: componentName$w,
   })
 );
 
@@ -17040,7 +17174,7 @@ const getFileBase64 = (fileObj) =>
 
 const getFilename = (fileObj) => fileObj.name.replace(/^.*\\/, '');
 
-const componentName$u = getComponentName$1('upload-file');
+const componentName$v = getComponentName$1('upload-file');
 
 const observedAttributes$2 = [
   'title',
@@ -17055,7 +17189,7 @@ const observedAttributes$2 = [
   '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() {
@@ -17341,10 +17475,10 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
   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() {
@@ -17576,10 +17710,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   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'));
@@ -17822,7 +17956,7 @@ const buttonSelectionGroupStyles = `
 			${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 {
@@ -17831,19 +17965,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$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -17868,7 +18002,7 @@ const ButtonSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$r,
+    componentName: componentName$s,
   })
 );
 
@@ -17905,10 +18039,10 @@ var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   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'));
@@ -18010,7 +18144,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-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 {
@@ -18019,19 +18153,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
       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'],
@@ -18056,7 +18190,7 @@ const ButtonMultiSelectionGroupClass = compose$1(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$p,
+    componentName: componentName$q,
   })
 );
 
@@ -18072,7 +18206,7 @@ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$m
 });
 
-const componentName$o = getComponentName$1('modal');
+const componentName$p = getComponentName$1('modal');
 
 const observedAttrs$2 = ['opened'];
 
@@ -18221,7 +18355,7 @@ const ModalClass = compose$1(
       }
     `,
     excludeAttrsSync: ['tabindex', 'opened', 'style'],
-    componentName: componentName$o,
+    componentName: componentName$p,
   })
 );
 
@@ -18332,7 +18466,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
 </div>
   `;
 
-const componentName$n = getComponentName$1('grid');
+const componentName$o = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -18701,7 +18835,7 @@ const GridClass = compose$1(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex', 'style'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
@@ -18757,7 +18891,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$k
 });
 
-const componentName$m = getComponentName$1('notification-card');
+const componentName$n = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -18865,7 +18999,7 @@ const NotificationCardClass = compose$1(
     }
     `,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$m,
+    componentName: componentName$n,
   })
 );
 
@@ -18923,7 +19057,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
   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 {
@@ -19578,7 +19712,7 @@ const MultiSelectComboBoxClass = compose$1(
     // 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'],
   })
 );
@@ -19674,11 +19808,11 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   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 {
@@ -19707,14 +19841,14 @@ const customMixin$2 = (superclass) =>
       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: [
@@ -19850,7 +19984,7 @@ const MappingsFieldClass = compose$1(
       'error-message',
       'style',
     ],
-    componentName: componentName$j,
+    componentName: componentName$k,
   })
 );
 
@@ -19888,9 +20022,9 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 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() {
@@ -19903,12 +20037,12 @@ class RawUserAttribute extends createBaseClass({
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-            <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <slot name="edit-icon"></slot>
-            </descope-button>
-            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">
               <slot name="delete-icon"></slot>
             </descope-button>
+            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">
+              <slot name="edit-icon"></slot>
+            </descope-button>
           </div>
         </div>
       </div>
@@ -19927,7 +20061,7 @@ class RawUserAttribute extends createBaseClass({
           height: 100%;
           align-items: center;
         }
-        
+
         ::slotted(*) {
           display: flex;
           align-items: center;
@@ -19945,6 +20079,14 @@ class RawUserAttribute extends createBaseClass({
           justify-content: space-between;
           align-items: center;
           flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        slot[name="edit-icon"],
+        slot[name="delete-icon"] {
+          display: inline-flex;
+          flex-shrink: 0;
+          align-items: center;
         }
 
         .content-wrapper {
@@ -19981,6 +20123,7 @@ class RawUserAttribute extends createBaseClass({
 
         .hidden {
           visibility: hidden;
+          width: 0;
         }
 
         descope-text[data-id="label-text"].required:after {
@@ -19990,6 +20133,7 @@ class RawUserAttribute extends createBaseClass({
 
         :host([readonly="true"]) descope-button {
           visibility: hidden;
+          width: 0;
         }
           `,
       this
@@ -20029,6 +20173,21 @@ class RawUserAttribute extends createBaseClass({
     this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
   }
 
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span.btn-label');
+
+    if (label) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        textSpanEle.classList.add('btn-label');
+        btnRef.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = label;
+    } else {
+      textSpanEle?.remove();
+    }
+  }
+
   onIsRequiredChange() {
     this.labelText.classList.toggle('required', this.isRequired);
   }
@@ -20057,12 +20216,26 @@ class RawUserAttribute extends createBaseClass({
     return this.getAttribute('badge-tooltip-text') || '';
   }
 
+  get editButtonLabel() {
+    return this.getAttribute('edit-button-label') || '';
+  }
+
+  get deleteButtonLabel() {
+    return this.getAttribute('delete-button-label') || '';
+  }
+
+  get isDeleteHidden() {
+    return this.getAttribute('hide-delete') === 'true';
+  }
+
   init() {
     this.onLabelChange();
     this.onValueOrPlaceholderChange();
     this.onIsRequiredChange();
     this.onBadgeLabelChange();
     this.onBadgeTooltipTextChange();
+    this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     this.handleDeleteButtonVisibility();
 
     this.deleteButton.addEventListener('click', () =>
@@ -20098,11 +20271,17 @@ class RawUserAttribute extends createBaseClass({
       'required',
       'badge-label',
       'badge-tooltip-text',
+      'edit-button-label',
+      'delete-button-label',
+      'hide-delete',
     ].concat(super.observedAttributes);
   }
 
   handleDeleteButtonVisibility() {
-    this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
+    this.deleteButton.classList.toggle(
+      'hidden',
+      this.isRequired || !this.value || this.isDeleteHidden
+    );
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -20122,9 +20301,13 @@ class RawUserAttribute extends createBaseClass({
       this.onBadgeLabelChange();
     } else if (name === 'badge-tooltip-text') {
       this.onBadgeTooltipTextChange();
+    } else if (name === 'edit-button-label') {
+      this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    } else if (name === 'delete-button-label') {
+      this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     }
 
-    if (name === 'value' || name === 'required') {
+    if (name === 'value' || name === 'required' || name === 'hide-delete') {
       this.handleDeleteButtonVisibility();
     }
   }
@@ -20155,6 +20338,7 @@ const UserAttributeClass = compose$1(
       contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge$1, property: 'max-width' },
       itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
+      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
     },
   }),
   draggableMixin,
@@ -20173,6 +20357,7 @@ const userAttribute = {
   [vars$g.hostMinWidth]: '310px',
   [vars$g.hostWidth]: '530px',
   [vars$g.hostMaxWidth]: '100%',
+  [vars$g.iconColor]: 'currentcolor',
 
   _fullWidth: {
     [vars$g.hostWidth]: '100%',
@@ -20187,9 +20372,9 @@ var userAttribute$1 = /*#__PURE__*/Object.freeze({
 
 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() {
@@ -20462,11 +20647,11 @@ var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   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 {
@@ -20476,14 +20661,14 @@ const customMixin$1 = (superclass) =>
       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: [
@@ -20568,7 +20753,7 @@ const SamlGroupMappingsClass = compose$1(
       'error-message',
       'style',
     ],
-    componentName: componentName$f,
+    componentName: componentName$g,
   })
 );
 
@@ -20635,9 +20820,9 @@ var copyIconSrc = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
 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'];
   }
@@ -21120,7 +21305,7 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   vars: vars$c
 });
 
-const componentName$d = getComponentName$1('radio-button');
+const componentName$e = getComponentName$1('radio-button');
 
 const customMixin = (superclass) =>
   class CustomMixin extends superclass {
@@ -21185,11 +21370,11 @@ const RadioButtonClass = compose$1(
     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 {
@@ -21203,12 +21388,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$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 = () => {};
@@ -21354,7 +21539,7 @@ const RadioGroupClass = compose$1(
     `,
 
     excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
-    componentName: componentName$c,
+    componentName: componentName$d,
     includeForwardProps: ['value'],
   })
 );
@@ -21800,7 +21985,7 @@ const nextMonth = (epoch) => {
   return date;
 };
 
-const componentName$b = getComponentName$1('calendar');
+const componentName$c = getComponentName$1('calendar');
 
 const observedAttrs$1 = [
   'initial-value',
@@ -21817,7 +22002,7 @@ const observedAttrs$1 = [
 
 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() {
@@ -22646,12 +22831,12 @@ class DateCounter {
   }
 }
 
-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',
@@ -23731,7 +23916,7 @@ const createDynamicDataMixin =
       }
     };
 
-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) => {
@@ -23750,7 +23935,7 @@ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$9, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass({ componentName: componentName$a, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -23874,9 +24059,9 @@ var scopesList$1 = /*#__PURE__*/Object.freeze({
 
 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() {
@@ -24009,7 +24194,7 @@ var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$7 = getComponentName$1('security-questions-setup');
+const componentName$8 = getComponentName$1('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -24028,7 +24213,7 @@ const attrsToSync$1 = [
 ];
 
 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();
 
@@ -24136,7 +24321,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
       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 [];
     }
   }
@@ -24258,7 +24443,7 @@ var securityQuestionsSetup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$5
 });
 
-const componentName$6 = getComponentName$1('security-questions-verify');
+const componentName$7 = getComponentName$1('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -24282,7 +24467,7 @@ const attrMappings = {
 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();
 
@@ -24356,7 +24541,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
       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 [];
     }
   }
@@ -24515,7 +24700,7 @@ const isNumericValue = (val) => !!val && !INVALID_PHONE_CHARS_RE.test(val);
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$5 = getComponentName$1('hybrid-field');
+const componentName$6 = getComponentName$1('hybrid-field');
 
 const attrs = {
   shared: [
@@ -24582,7 +24767,7 @@ const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
 const BaseClass$2 = createBaseClass({
-  componentName: componentName$5,
+  componentName: componentName$6,
   baseSelector: 'div',
 });
 
@@ -24993,9 +25178,9 @@ var hybridField$1 = /*#__PURE__*/Object.freeze({
   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();
 
@@ -25203,11 +25388,11 @@ var alert$1 = /*#__PURE__*/Object.freeze({
   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 || []);
@@ -25489,12 +25674,12 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-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 {
@@ -25792,7 +25977,7 @@ class RawRecaptcha extends BaseClass$1 {
 
 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 {
@@ -25885,10 +26070,169 @@ const NotificationClass = compose$1(
   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: 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(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');
 
@@ -26009,6 +26353,7 @@ var calcScore = /*#__PURE__*/Object.freeze({
 
 exports.AddressFieldClass = AddressFieldClass;
 exports.AlertClass = AlertClass;
+exports.AnchoredClass = AnchoredClass;
 exports.AppsListClass = AppsListClass;
 exports.AttachmentClass = AttachmentClass;
 exports.AutocompleteFieldClass = AutocompleteFieldClass;