@odx/foundation 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components.js

@@ -1,18 +1,15 @@
-import { CanBeExpanded, CustomElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, fromAriaBooleanAttribute, getKeyboardEventInfo, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, DisabledContextProvider, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
-import { html, isServer, unsafeCSS, nothing, css } from 'lit';
-import { queryAssignedElements, property, query, queryAll, state } from 'lit/decorators.js';
+import { CanBeExpanded, CustomElement, fromToggleEventState, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, ExpandableItemManager, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, optionalSlot, toggleAttribute, getKeyboardEventInfo, queryAssignedElement, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, toPx, getAssignedElements, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
+import { html, isServer, css, nothing } from 'lit';
+import { property, queryAssignedElements, query, queryAll, state } from 'lit/decorators.js';
 import { signal, computed, effect, SignalWatcher } from '@lit-labs/preact-signals';
 import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { PopoverPlacement, PopoverHost, PopoverPlacementOptions, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
+import { InteractiveElement, CheckboxGroupFormControl, CheckboxFormControl, PopoverPlacement, PopoverHost, PopoverPlacementOptions, ListboxFormControl, OptionControl, RadioGroupFormControl, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
-import { g as clamp, R as RovingTabindexController, r as round, i as debounce, m as minBy, j as maxBy } from './vendor-C_WVAD3D.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import { R as RovingTabindexController, r as round, d as debounce } from './vendor-dJxQG085.js';
 import { createContext, consume, provide } from '@lit/context';
 
-const styles$1b = ":host{display:block}";
+const styles$1b = "@layer base{:host{display:block;odx-list-item{margin-block:var(--odx-size-37)}odx-list-item::part(separator){display:none}}}";
 
 var __defProp$1m = Object.defineProperty;
 var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
@@ -28,26 +25,29 @@ var __decorateClass$1m = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck$w = (obj, member, msg) => member.has(obj) || __typeError$w("Cannot " + msg);
+var __privateGet$r = (obj, member, getter) => (__accessCheck$w(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$w = (obj, member, value) => member.has(obj) ? __typeError$w("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$h = (obj, member, method) => (__accessCheck$w(obj, member, "access private method"), method);
-var _OdxAccordionHeader_instances, handleExpandedChange_fn;
+var __privateMethod$j = (obj, member, method) => (__accessCheck$w(obj, member, "access private method"), method);
+var _handleToggle$1, _OdxAccordionHeader_instances, updateAriaAttributes_fn$3;
 let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
   constructor() {
     super(...arguments);
     __privateAdd$w(this, _OdxAccordionHeader_instances);
+    __privateAdd$w(this, _handleToggle$1, (event) => {
+      this.expanded = fromToggleEventState(event.newState);
+    });
   }
   get panel() {
     return this.nextElementSibling;
   }
   connectedCallback() {
-    this.tabIndex = 0;
     super.connectedCallback();
     this.id ||= getUniqueId(this.localName);
     this.role ||= "button";
   }
   render() {
     return html`
-      <odx-list-item role="presentation" part="base" compact ?disabled=${this.disabled} with-expanded-indicator>
+      <odx-list-item part="base" exportparts="expand-control" compact ?disabled=${this.disabled} ?expanded=${this.expanded} @toggle=${__privateGet$r(this, _handleToggle$1)} with-expand-indicator role="presentation">
         <slot name="prefix" slot="prefix"></slot>
         <odx-text class="content" ?emphasized=${this.expanded}>
           <slot></slot>
@@ -56,30 +56,27 @@ let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
       </odx-list-item>
     `;
   }
-  willUpdate(props) {
-    super.willUpdate?.(props);
+  updated(props) {
+    super.updated?.(props);
     if (props.has("disabled") || props.has("expanded")) {
-      __privateMethod$h(this, _OdxAccordionHeader_instances, handleExpandedChange_fn).call(this);
+      __privateMethod$j(this, _OdxAccordionHeader_instances, updateAriaAttributes_fn$3).call(this);
     }
   }
 };
+_handleToggle$1 = new WeakMap();
 _OdxAccordionHeader_instances = new WeakSet();
-handleExpandedChange_fn = function() {
+updateAriaAttributes_fn$3 = function() {
   if (!this.panel) return;
   this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
   this.setAttribute("aria-controls", this.panel.id);
-  this.panel.ariaHidden = toAriaBooleanAttribute(this.disabled || !this.expanded);
+  this.panel.hidden = this.disabled || !this.expanded;
   this.panel.setAttribute("aria-labelledby", this.id);
 };
-OdxAccordionHeader.shadowRootOptions = {
-  ...CustomElement.shadowRootOptions,
-  delegatesFocus: true
-};
 OdxAccordionHeader = __decorateClass$1m([
   customElement("odx-accordion-header", [styles$1b])
 ], OdxAccordionHeader);
 
-const styles$1a = "@layer base{:host{display:block}odx-separator{margin:0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
+const styles$1a = "@layer base{:host{display:block}odx-separator{--margin-block: 0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
 
 var __defProp$1l = Object.defineProperty;
 var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
@@ -92,6 +89,10 @@ var __decorateClass$1l = (decorators, target, key, kind) => {
   return result;
 };
 let OdxAccordionPanel = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.hidden = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.id ||= getUniqueId(this.localName);
@@ -99,7 +100,7 @@ let OdxAccordionPanel = class extends CustomElement {
   }
   render() {
     return html`
-      <odx-toggle-content ?expanded=${!fromAriaBooleanAttribute(this.ariaHidden)}>
+      <odx-toggle-content ?hidden=${this.hidden}>
         <div class="content">
           <slot></slot>
         </div>
@@ -108,6 +109,9 @@ let OdxAccordionPanel = class extends CustomElement {
     `;
   }
 };
+__decorateClass$1l([
+  property({ type: Boolean, reflect: true })
+], OdxAccordionPanel.prototype, "hidden", 2);
 OdxAccordionPanel = __decorateClass$1l([
   requestUpdateOnAriaChange(["ariaHidden"]),
   customElement("odx-accordion-panel", [styles$1a])
@@ -117,9 +121,6 @@ const styles$19 = ":host{display:block}";
 
 var __defProp$1k = Object.defineProperty;
 var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
-var __typeError$v = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass$1k = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -128,65 +129,24 @@ var __decorateClass$1k = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1k(target, key, result);
   return result;
 };
-var __accessCheck$v = (obj, member, msg) => member.has(obj) || __typeError$v("Cannot " + msg);
-var __privateGet$q = (obj, member, getter) => (__accessCheck$v(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$v = (obj, member, value) => member.has(obj) ? __typeError$v("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleClick$7, _handleExpand, _handleCollapse, _handleKeyDownEvent;
 let OdxAccordion = class extends CustomElement {
   constructor() {
     super();
     this.multiple = false;
-    __privateAdd$v(this, _handleClick$7, ({ target }) => {
-      if (!this.controls.includes(target)) return;
-      target.toggle(void 0, true);
-    });
-    __privateAdd$v(this, _handleExpand, ({ target }) => {
-      if (this.multiple || !this.controls.includes(target)) return;
-      for (const control of this.controls) {
-        if (!control.expanded || control === target) continue;
-        control.toggle(false);
-      }
-    });
-    __privateAdd$v(this, _handleCollapse, ({ target }) => {
-      if (!this.controls.includes(target)) return;
-      const expandedNestedControls = target.panel?.querySelectorAll(OdxAccordionHeader.selector) ?? [];
-      for (const control of Array.from(expandedNestedControls)) {
-        if (!control.expanded) continue;
-        control.toggle(false);
-      }
-    });
-    __privateAdd$v(this, _handleKeyDownEvent, (event) => {
-      if (!this.controls.includes(event.target)) return;
-      const { actions } = getKeyboardEventInfo(event);
-      if (!(actions.enter || actions.space)) return;
-      event.preventDefault();
-      event.target.toggle(void 0, true);
-    });
-    if (!isServer) {
-      this.addEventListener("click", __privateGet$q(this, _handleClick$7));
-      this.addEventListener("expand", __privateGet$q(this, _handleExpand));
-      this.addEventListener("collapse", __privateGet$q(this, _handleCollapse));
-      this.addEventListener("keydown", __privateGet$q(this, _handleKeyDownEvent));
-    }
+    new ExpandableItemManager(this, { getItems: () => this.items });
   }
-  updated(props) {
-    super.updated(props);
-    if (props.has("multiple") && !this.multiple) {
-      const firstExpandedControl = this.controls.find((control) => control.expanded);
-      for (const control of this.controls) {
-        if (!control.expanded || control === firstExpandedControl) continue;
-        control.toggle(false);
-      }
+  toggleAll(force, emitEvent = false) {
+    for (const item of this.items) {
+      item.toggle(force, emitEvent);
     }
   }
 };
-_handleClick$7 = new WeakMap();
-_handleExpand = new WeakMap();
-_handleCollapse = new WeakMap();
-_handleKeyDownEvent = new WeakMap();
 __decorateClass$1k([
   queryAssignedElements({ selector: OdxAccordionHeader.selector, flatten: true })
-], OdxAccordion.prototype, "controls", 2);
+], OdxAccordion.prototype, "items", 2);
+__decorateClass$1k([
+  property({ reflect: true, attribute: "control-position" })
+], OdxAccordion.prototype, "controlPosition", 2);
 __decorateClass$1k([
   property({ type: Boolean })
 ], OdxAccordion.prototype, "multiple", 2);
@@ -198,7 +158,7 @@ const styles$18 = "@layer base{:host{display:flex;justify-content:flex-end;overf
 
 var __defProp$1j = Object.defineProperty;
 var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
-var __typeError$u = (msg) => {
+var __typeError$v = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$1j = (decorators, target, key, kind) => {
@@ -209,27 +169,27 @@ var __decorateClass$1j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1j(target, key, result);
   return result;
 };
-var __accessCheck$u = (obj, member, msg) => member.has(obj) || __typeError$u("Cannot " + msg);
-var __privateGet$p = (obj, member, getter) => (__accessCheck$u(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$u = (obj, member, value) => member.has(obj) ? __typeError$u("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$g = (obj, member, method) => (__accessCheck$u(obj, member, "access private method"), method);
-var _breakpoints, _position, _currentBreakpoint, _OdxActionGroup_instances, captureSize_fn, _handleSlotChange$7;
+var __accessCheck$v = (obj, member, msg) => member.has(obj) || __typeError$v("Cannot " + msg);
+var __privateGet$q = (obj, member, getter) => (__accessCheck$v(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$v = (obj, member, value) => member.has(obj) ? __typeError$v("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$i = (obj, member, method) => (__accessCheck$v(obj, member, "access private method"), method);
+var _breakpoints, _position, _currentBreakpoint, _OdxActionGroup_instances, captureSize_fn, _handleSlotChange$9;
 let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
-    __privateAdd$u(this, _OdxActionGroup_instances);
-    __privateAdd$u(this, _breakpoints, signal([]));
-    __privateAdd$u(this, _position, signal(0));
-    __privateAdd$u(this, _currentBreakpoint, computed(() => {
-      const position = __privateGet$p(this, _position).value;
-      const breakpoints = __privateGet$p(this, _breakpoints).value;
+    __privateAdd$v(this, _OdxActionGroup_instances);
+    __privateAdd$v(this, _breakpoints, signal([]));
+    __privateAdd$v(this, _position, signal(0));
+    __privateAdd$v(this, _currentBreakpoint, computed(() => {
+      const position = __privateGet$q(this, _position).value;
+      const breakpoints = __privateGet$q(this, _breakpoints).value;
       return this.assignedElements.findLast((_, index) => {
         return breakpoints[index] && position > breakpoints[index];
       });
     }));
     this.connected = false;
-    __privateAdd$u(this, _handleSlotChange$7, () => {
-      __privateMethod$g(this, _OdxActionGroup_instances, captureSize_fn).call(this);
+    __privateAdd$v(this, _handleSlotChange$9, () => {
+      __privateMethod$i(this, _OdxActionGroup_instances, captureSize_fn).call(this);
     });
   }
   connectedCallback() {
@@ -238,25 +198,23 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
       this,
       () => {
         const baseRect = this.base.getBoundingClientRect();
-        __privateGet$p(this, _position).value = baseRect.left;
+        __privateGet$q(this, _position).value = baseRect.left;
       },
       { fpsLimit: 5 }
     );
     effect(() => {
-      __privateGet$p(this, _currentBreakpoint).value;
+      __privateGet$q(this, _currentBreakpoint).value;
     });
   }
   render() {
     return html`
       <div class="base">
-        <odx-button-group ?connected=${this.connected} ?disabled=${this.disabled} size=${optionalAttr(this.size)} variant=${optionalAttr(this.variant)} class="container">
-          <slot @slotchange=${__privateGet$p(this, _handleSlotChange$7)}></slot>
+        <odx-stack class="container" horizontal>
+          <slot @slotchange=${__privateGet$q(this, _handleSlotChange$9)}></slot>
           <odx-icon-button id="action-menu" icon="core::chevron-down"></odx-icon-button>
-        </odx-button-group>
+        </odx-stack>
         <odx-menu anchor="action-menu" placement="bottom-end">
-          <odx-button-group variant="ghost">
-            <slot name="_fallback"></slot>
-          </odx-button-group>
+          <slot name="_fallback"></slot>
         </odx-menu>
       </div>
     `;
@@ -264,7 +222,7 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
   updated(props) {
     super.updated?.(props);
     if (props.has("connected") || props.has("size")) {
-      __privateMethod$g(this, _OdxActionGroup_instances, captureSize_fn).call(this);
+      __privateMethod$i(this, _OdxActionGroup_instances, captureSize_fn).call(this);
     }
   }
 };
@@ -278,12 +236,12 @@ captureSize_fn = async function() {
     element.slot = "";
   }
   await 0;
-  __privateGet$p(this, _breakpoints).value = this.assignedElements.map((element) => {
+  __privateGet$q(this, _breakpoints).value = this.assignedElements.map((element) => {
     return element.getBoundingClientRect().left;
   });
   this.container.classList.remove("measuring");
 };
-_handleSlotChange$7 = new WeakMap();
+_handleSlotChange$9 = new WeakMap();
 __decorateClass$1j([
   queryAssignedElements({ flatten: true })
 ], OdxActionGroup.prototype, "assignedElements", 2);
@@ -335,21 +293,20 @@ class BaseLink extends CanBeDisabled(CustomElement) {
       delegatesFocus: true
     };
   }
-  render(role) {
+  render() {
     const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
     return html`<a
-      class="base"
-      part="anchor"
+      part="base"
       aria-label="${optionalAttr(ariaLabel)}"
       aria-haspopup="${optionalAttr(ariaHasPopup)}"
       aria-expanded="${optionalAttr(ariaExpanded)}"
       aria-current="${optionalAttr(ariaCurrent)}"
       aria-hidden="${optionalAttr(ariaHidden)}"
       href=${optionalAttr(this.href)}
-      target=${optionalAttr(this.target)}
-      download=${ifDefined(this.download)}
-      rel=${optionalAttr(this.rel)}
-      role=${optionalAttr(role)}
+      target=${optionalAttr(this.href && this.target)}
+      download=${optionalAttr(this.href && this.download)}
+      rel=${optionalAttr(this.href && this.rel)}
+      role="button"
     >
       ${this.renderContent()}
     </a>`;
@@ -374,7 +331,7 @@ __decorateClass$1i([
   property()
 ], BaseLink.prototype, "download", 2);
 
-const styles$17 = ":host{--_color-foreground: var(--odx-palette-blue-50);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground-base);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
+const styles$17 = ":host{--_color-foreground: var(--odx-palette-blue-50);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}[part~=base]{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground-base);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);[part~=base]{cursor:default}}";
 
 var __defProp$1h = Object.defineProperty;
 var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
@@ -455,7 +412,7 @@ class AnchorObserver {
 
 var __defProp$1g = Object.defineProperty;
 var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
-var __typeError$t = (msg) => {
+var __typeError$u = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$1g = (decorators, target, key, kind) => {
@@ -466,32 +423,32 @@ var __decorateClass$1g = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1g(target, key, result);
   return result;
 };
-var __accessCheck$t = (obj, member, msg) => member.has(obj) || __typeError$t("Cannot " + msg);
-var __privateGet$o = (obj, member, getter) => (__accessCheck$t(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$t = (obj, member, value) => member.has(obj) ? __typeError$t("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$t(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod$f = (obj, member, method) => (__accessCheck$t(obj, member, "access private method"), method);
-var _anchorObserver, _OdxAnchorNavigation_instances, handleContainerChange_fn, _handleClick$6;
+var __accessCheck$u = (obj, member, msg) => member.has(obj) || __typeError$u("Cannot " + msg);
+var __privateGet$p = (obj, member, getter) => (__accessCheck$u(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$u = (obj, member, value) => member.has(obj) ? __typeError$u("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$u(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$h = (obj, member, method) => (__accessCheck$u(obj, member, "access private method"), method);
+var _anchorObserver, _OdxAnchorNavigation_instances, handleContainerChange_fn, _handleClick$7;
 let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
   constructor() {
     super();
-    __privateAdd$t(this, _OdxAnchorNavigation_instances);
-    __privateAdd$t(this, _anchorObserver);
+    __privateAdd$u(this, _OdxAnchorNavigation_instances);
+    __privateAdd$u(this, _anchorObserver);
     this.vertical = false;
-    __privateAdd$t(this, _handleClick$6, (event) => {
+    __privateAdd$u(this, _handleClick$7, (event) => {
       const target = getElementFromEvent(event, (node) => node instanceof OdxLink);
       if (!target) return;
       event.preventDefault();
       document.querySelector(target.href)?.scrollIntoView();
     });
-    this.addEventListener("click", __privateGet$o(this, _handleClick$6));
+    this.addEventListener("click", __privateGet$p(this, _handleClick$7));
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod$f(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
+    __privateMethod$h(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
   }
   disconnectedCallback() {
-    __privateGet$o(this, _anchorObserver)?.disconnect();
+    __privateGet$p(this, _anchorObserver)?.disconnect();
     super.disconnectedCallback();
   }
   renderAnchorLink(anchor, isActive = false) {
@@ -506,8 +463,8 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
     );
   }
   render() {
-    const anchors = __privateGet$o(this, _anchorObserver)?.anchors.value ?? [];
-    const visibleAnchors = __privateGet$o(this, _anchorObserver)?.visibleAnchors.value;
+    const anchors = __privateGet$p(this, _anchorObserver)?.anchors.value ?? [];
+    const visibleAnchors = __privateGet$p(this, _anchorObserver)?.visibleAnchors.value;
     return repeat(
       anchors,
       (anchor) => anchor.id,
@@ -516,7 +473,7 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
   }
   updated(props) {
     if (props.has("container")) {
-      __privateMethod$f(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
+      __privateMethod$h(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
     }
   }
 };
@@ -524,12 +481,12 @@ _anchorObserver = new WeakMap();
 _OdxAnchorNavigation_instances = new WeakSet();
 handleContainerChange_fn = function() {
   const root = this.container ? document.querySelector(this.container) : null;
-  if (root === __privateGet$o(this, _anchorObserver)?.root) return;
-  __privateGet$o(this, _anchorObserver)?.disconnect();
+  if (root === __privateGet$p(this, _anchorObserver)?.root) return;
+  __privateGet$p(this, _anchorObserver)?.disconnect();
   __privateSet$5(this, _anchorObserver, new AnchorObserver(root));
-  __privateGet$o(this, _anchorObserver)?.observe();
+  __privateGet$p(this, _anchorObserver)?.observe();
 };
-_handleClick$6 = new WeakMap();
+_handleClick$7 = new WeakMap();
 __decorateClass$1g([
   property()
 ], OdxAnchorNavigation.prototype, "container", 2);
@@ -756,7 +713,7 @@ const styles$10 = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(
 
 var __defProp$1a = Object.defineProperty;
 var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
-var __typeError$s = (msg) => {
+var __typeError$t = (msg) => {
   throw TypeError(msg);
 };
 var __decorateClass$1a = (decorators, target, key, kind) => {
@@ -767,14 +724,14 @@ var __decorateClass$1a = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1a(target, key, result);
   return result;
 };
-var __accessCheck$s = (obj, member, msg) => member.has(obj) || __typeError$s("Cannot " + msg);
-var __privateAdd$s = (obj, member, value) => member.has(obj) ? __typeError$s("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$e = (obj, member, method) => (__accessCheck$s(obj, member, "access private method"), method);
+var __accessCheck$t = (obj, member, msg) => member.has(obj) || __typeError$t("Cannot " + msg);
+var __privateAdd$t = (obj, member, value) => member.has(obj) ? __typeError$t("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$g = (obj, member, method) => (__accessCheck$t(obj, member, "access private method"), method);
 var _OdxBreadcrumbs_instances, isItemVisible_fn, renderItems_fn, updateContext_fn;
 let OdxBreadcrumbs = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$s(this, _OdxBreadcrumbs_instances);
+    __privateAdd$t(this, _OdxBreadcrumbs_instances);
     this.max = 4;
   }
   firstUpdated(props) {
@@ -784,14 +741,14 @@ let OdxBreadcrumbs = class extends CustomElement {
   }
   render() {
     if (Array.isArray(this.items)) {
-      return __privateMethod$e(this, _OdxBreadcrumbs_instances, renderItems_fn).call(this, this.items);
+      return __privateMethod$g(this, _OdxBreadcrumbs_instances, renderItems_fn).call(this, this.items);
     }
-    return html`<slot @slotchange=${__privateMethod$e(this, _OdxBreadcrumbs_instances, updateContext_fn)}></slot>`;
+    return html`<slot @slotchange=${__privateMethod$g(this, _OdxBreadcrumbs_instances, updateContext_fn)}></slot>`;
   }
   updated(props) {
     super.updated(props);
     if (props.has("max")) {
-      __privateMethod$e(this, _OdxBreadcrumbs_instances, updateContext_fn).call(this);
+      __privateMethod$g(this, _OdxBreadcrumbs_instances, updateContext_fn).call(this);
     }
   }
 };
@@ -802,7 +759,7 @@ isItemVisible_fn = function(_, index, items) {
 renderItems_fn = function(items) {
   return html`
       ${repeat(
-    items.filter(__privateMethod$e(this, _OdxBreadcrumbs_instances, isItemVisible_fn).bind(this)),
+    items.filter(__privateMethod$g(this, _OdxBreadcrumbs_instances, isItemVisible_fn).bind(this)),
     (item) => item.href,
     ({ label, href }) => html`
           <odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
@@ -812,7 +769,7 @@ renderItems_fn = function(items) {
 };
 updateContext_fn = function() {
   for (const [index, item] of this.itemElements.entries()) {
-    item.ariaHidden = toAriaBooleanAttribute(!__privateMethod$e(this, _OdxBreadcrumbs_instances, isItemVisible_fn).call(this, item, index, this.itemElements));
+    item.ariaHidden = toAriaBooleanAttribute(!__privateMethod$g(this, _OdxBreadcrumbs_instances, isItemVisible_fn).call(this, item, index, this.itemElements));
   }
   for (const [, item] of Array.from(this.renderedItemElements).entries()) {
     item.requestUpdate();
@@ -834,7 +791,7 @@ OdxBreadcrumbs = __decorateClass$1a([
   customElement("odx-breadcrumbs", [styles$10])
 ], OdxBreadcrumbs);
 
-const styles$$ = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
+const styles$$ = "@layer base{:host{display:inline-flex;align-items:center;gap:var(--odx-size-px)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}@layer variant{:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host(:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}}";
 
 var __defProp$19 = Object.defineProperty;
 var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
@@ -846,51 +803,32 @@ var __decorateClass$19 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$19(target, key, result);
   return result;
 };
-const buttonSelector = ":is(odx-button, odx-icon-button)";
 let OdxButtonGroup = class extends CanBeDisabled(CustomElement) {
   constructor() {
-    super();
+    super(...arguments);
     this.block = false;
-    this.connected = false;
     this.vertical = false;
-    new DisabledContextProvider(this);
-  }
-  updated(props) {
-    super.updated?.(props);
-    if (props.has("size") || props.has("variant")) {
-      for (const button of this.buttons) {
-        button.size = this.size;
-        button.variant = this.variant;
-      }
-    }
   }
 };
-__decorateClass$19([
-  queryAssignedElements({ selector: buttonSelector, flatten: true })
-], OdxButtonGroup.prototype, "buttons", 2);
 __decorateClass$19([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroup.prototype, "block", 2);
-__decorateClass$19([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroup.prototype, "connected", 2);
 __decorateClass$19([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroup.prototype, "vertical", 2);
-__decorateClass$19([
-  property({ reflect: true })
-], OdxButtonGroup.prototype, "size", 2);
-__decorateClass$19([
-  property({ reflect: true })
-], OdxButtonGroup.prototype, "variant", 2);
 OdxButtonGroup = __decorateClass$19([
   customElement("odx-button-group", [styles$$])
 ], OdxButtonGroup);
 
-const styles$_ = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto;inset:0}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}}@layer state{:host(:not([aria-busy=\"true\"])) .base:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) .base:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
+const BaseButtonStyles = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=base]{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-25))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
+
+const styles$_ = "@layer base{[part~=base]{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_margin-block: 0;--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_margin-icon: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0;::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}}";
 
 var __defProp$18 = Object.defineProperty;
 var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
+var __typeError$s = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass$18 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -899,97 +837,20 @@ var __decorateClass$18 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$18(target, key, result);
   return result;
 };
-class BaseButton extends WithLoadingState(BaseLink) {
-  constructor() {
-    super(...arguments);
-    this.lineClamp = 2;
-  }
-  static {
-    this.styles = unsafeCSS(styles$_);
-  }
-  render() {
-    return html`${when(
-      this.href,
-      () => super.render(),
-      () => this.renderButton()
-    )}`;
-  }
-  renderContent(withSpinner = true) {
-    return html`
-      ${this.renderSlot("prefix", !withSpinner)}
-      <odx-line-clamp class="content" .max=${this.lineClamp}>
-        <slot></slot>
-      </odx-line-clamp>
-      ${this.renderSlot("suffix", !withSpinner)}
-    `;
-  }
-  renderButton() {
-    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-    const type = "type" in this ? this.type : "button";
-    return html`
-      ${this.renderOverlay()}
-      <button
-        class="base"
-        part="anchor button"
-        aria-label="${optionalAttr(ariaLabel)}"
-        aria-haspopup="${optionalAttr(ariaHasPopup)}"
-        aria-expanded="${optionalAttr(ariaExpanded)}"
-        type=${type}
-        ?disabled=${this.disabled || this.loading}
-      >
-        ${this.renderContent()}
-      </button>
-    `;
-  }
-  renderSlot(name, force) {
-    if (!force && this.loading && getAssignedElements(this, name).length > 0) {
-      return this.renderSpinner();
-    }
-    return html`<slot name=${name}></slot>`;
-  }
-  renderOverlay() {
-    if (this.loading && getAssignedElements(this, "prefix", "suffix").length === 0) {
-      return this.renderSpinner(true);
-    }
-    return nothing;
-  }
-  renderSpinner(overlay = false) {
-    return html`<odx-loading-spinner class=${classMap({ spinner: true, overlay })}></odx-loading-spinner>`;
-  }
-}
-__decorateClass$18([
-  property({ type: Number, attribute: "line-clamp" })
-], BaseButton.prototype, "lineClamp", 2);
-
-const styles$Z = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}}";
-
-var __defProp$17 = Object.defineProperty;
-var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
-var __typeError$r = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$17 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$17(target, key, result);
-  return result;
-};
-var __accessCheck$r = (obj, member, msg) => member.has(obj) || __typeError$r("Cannot " + msg);
-var __privateGet$n = (obj, member, getter) => (__accessCheck$r(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$r = (obj, member, value) => member.has(obj) ? __typeError$r("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$d = (obj, member, method) => (__accessCheck$r(obj, member, "access private method"), method);
+var __accessCheck$s = (obj, member, msg) => member.has(obj) || __typeError$s("Cannot " + msg);
+var __privateGet$o = (obj, member, getter) => (__accessCheck$s(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$s = (obj, member, value) => member.has(obj) ? __typeError$s("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$f = (obj, member, method) => (__accessCheck$s(obj, member, "access private method"), method);
 var _internals, _OdxButton_instances, handleClick_fn;
-let OdxButton = class extends WithLoadingState(BaseButton) {
+let OdxButton = class extends InteractiveElement {
   constructor() {
     super();
-    __privateAdd$r(this, _OdxButton_instances);
-    __privateAdd$r(this, _internals, this.attachInternals());
+    __privateAdd$s(this, _OdxButton_instances);
+    __privateAdd$s(this, _internals, this.attachInternals());
     this.block = false;
     this.type = "button";
     if (!isServer) {
-      this.addEventListener("click", __privateMethod$d(this, _OdxButton_instances, handleClick_fn));
+      this.addEventListener("click", __privateMethod$f(this, _OdxButton_instances, handleClick_fn));
     }
   }
   render() {
@@ -1003,35 +864,36 @@ _internals = new WeakMap();
 _OdxButton_instances = new WeakSet();
 handleClick_fn = function(_event) {
   if (this.type === "submit") {
-    __privateGet$n(this, _internals).form?.requestSubmit();
+    __privateGet$o(this, _internals).form?.requestSubmit();
     return;
   }
   if (this.type === "reset") {
-    __privateGet$n(this, _internals).form?.reset();
+    __privateGet$o(this, _internals).form?.reset();
     return;
   }
 };
 OdxButton.formAssociated = true;
-__decorateClass$17([
+__decorateClass$18([
   property({ reflect: true, attribute: "align-badge" })
 ], OdxButton.prototype, "alignBadge", 2);
-__decorateClass$17([
+__decorateClass$18([
   property({ type: Boolean, reflect: true })
 ], OdxButton.prototype, "block", 2);
-__decorateClass$17([
+__decorateClass$18([
   property()
 ], OdxButton.prototype, "type", 2);
-__decorateClass$17([
+__decorateClass$18([
   property({ reflect: true })
 ], OdxButton.prototype, "size", 2);
-__decorateClass$17([
+__decorateClass$18([
   property({ reflect: true })
 ], OdxButton.prototype, "variant", 2);
-OdxButton = __decorateClass$17([
-  customElement("odx-button", [BaseButton.styles, styles$Z])
+OdxButton = __decorateClass$18([
+  customElement("odx-button", [BaseButtonStyles, styles$_])
 ], OdxButton);
 
 const ButtonSize = {
+  XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
@@ -1045,17 +907,26 @@ const ButtonVariant = {
   // SUCCESS: 'success',
   // CONFIRMATION: 'confirmation',
 };
+const ButtonLoaderSlot = {
+  PREFIX: "prefix",
+  SUFFIX: "suffix"
+};
+const ButtonBadgeAlign = {
+  START: "start",
+  CENTER: "center",
+  END: "end"
+};
 
-const styles$Y = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+const styles$Z = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
 
-var __defProp$16 = Object.defineProperty;
-var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
-var __decorateClass$16 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
+var __defProp$17 = Object.defineProperty;
+var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
+var __decorateClass$17 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$16(target, key, result);
+  if (kind && result) __defProp$17(target, key, result);
   return result;
 };
 let OdxCard = class extends CanBeDisabled(CustomElement) {
@@ -1071,38 +942,38 @@ let OdxCard = class extends CanBeDisabled(CustomElement) {
     `;
   }
 };
-OdxCard = __decorateClass$16([
-  customElement("odx-card", [styles$Y])
+OdxCard = __decorateClass$17([
+  customElement("odx-card", [styles$Z])
 ], OdxCard);
 
-const styles$X = "@layer base{:host{display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}";
+const styles$Y = "@layer base{:host{display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}";
 
-var __defProp$15 = Object.defineProperty;
-var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
-var __typeError$q = (msg) => {
+var __defProp$16 = Object.defineProperty;
+var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
+var __typeError$r = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$15 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
+var __decorateClass$16 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$15(target, key, result);
+  if (kind && result) __defProp$16(target, key, result);
   return result;
 };
-var __accessCheck$q = (obj, member, msg) => member.has(obj) || __typeError$q("Cannot " + msg);
-var __privateGet$m = (obj, member, getter) => (__accessCheck$q(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$q = (obj, member, value) => member.has(obj) ? __typeError$q("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$6, _handleGroupControlChange;
+var __accessCheck$r = (obj, member, msg) => member.has(obj) || __typeError$r("Cannot " + msg);
+var __privateGet$n = (obj, member, getter) => (__accessCheck$r(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$r = (obj, member, value) => member.has(obj) ? __typeError$r("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleSlotChange$8, _handleGroupControlChange;
 let OdxCheckboxGroup = class extends CheckboxGroupFormControl {
   constructor() {
     super(...arguments);
-    __privateAdd$q(this, _handleSlotChange$6, () => {
+    __privateAdd$r(this, _handleSlotChange$8, () => {
       for (const control of this.groupControls) {
-        control.addEventListener("change", __privateGet$m(this, _handleGroupControlChange));
+        control.addEventListener("change", __privateGet$n(this, _handleGroupControlChange));
       }
     });
-    __privateAdd$q(this, _handleGroupControlChange, (event) => {
+    __privateAdd$r(this, _handleGroupControlChange, (event) => {
       const { target } = event;
       if (!this.isControl(target)) return;
       event.stopImmediatePropagation();
@@ -1113,16 +984,16 @@ let OdxCheckboxGroup = class extends CheckboxGroupFormControl {
     });
   }
   render() {
-    return html`<slot @slotchange=${__privateGet$m(this, _handleSlotChange$6)}></slot>`;
+    return html`<slot @slotchange=${__privateGet$n(this, _handleSlotChange$8)}></slot>`;
   }
 };
-_handleSlotChange$6 = new WeakMap();
+_handleSlotChange$8 = new WeakMap();
 _handleGroupControlChange = new WeakMap();
-__decorateClass$15([
+__decorateClass$16([
   property({ reflect: true })
 ], OdxCheckboxGroup.prototype, "variant", 2);
-OdxCheckboxGroup = __decorateClass$15([
-  customElement("odx-checkbox-group", [styles$X])
+OdxCheckboxGroup = __decorateClass$16([
+  customElement("odx-checkbox-group", [styles$Y])
 ], OdxCheckboxGroup);
 
 const CheckboxGroupVariant = {
@@ -1130,16 +1001,16 @@ const CheckboxGroupVariant = {
   LIST: "list"
 };
 
-const styles$W = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);transition-property:background-color,border-color,outline-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}}";
+const styles$X = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin-block:var(--odx-size-37);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);transition-property:background-color,border-color,outline-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}}";
 
-var __defProp$14 = Object.defineProperty;
-var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
-var __decorateClass$14 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
+var __defProp$15 = Object.defineProperty;
+var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
+var __decorateClass$15 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$14(target, key, result);
+  if (kind && result) __defProp$15(target, key, result);
   return result;
 };
 let OdxCheckbox = class extends CheckboxFormControl {
@@ -1162,9 +1033,9 @@ let OdxCheckbox = class extends CheckboxFormControl {
       </div>
     `;
   }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("indeterminate")) {
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("indeterminate")) {
       if (this.indeterminate) {
         this.ariaChecked = "mixed";
       }
@@ -1176,44 +1047,44 @@ let OdxCheckbox = class extends CheckboxFormControl {
     this.indeterminate = false;
   }
 };
-__decorateClass$14([
+__decorateClass$15([
   property({ type: Boolean, reflect: true })
 ], OdxCheckbox.prototype, "indeterminate", 2);
-OdxCheckbox = __decorateClass$14([
-  customElement("odx-checkbox", [styles$W])
+OdxCheckbox = __decorateClass$15([
+  customElement("odx-checkbox", [styles$X])
 ], OdxCheckbox);
 
-const styles$V = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground-base)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
+const styles$W = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center;line-height:inherit}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground-base)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
 
-var __defProp$13 = Object.defineProperty;
-var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
-var __typeError$p = (msg) => {
+var __defProp$14 = Object.defineProperty;
+var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
+var __typeError$q = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$13 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
+var __decorateClass$14 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$13(target, key, result);
+  if (kind && result) __defProp$14(target, key, result);
   return result;
 };
-var __accessCheck$p = (obj, member, msg) => member.has(obj) || __typeError$p("Cannot " + msg);
-var __privateGet$l = (obj, member, getter) => (__accessCheck$p(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$p = (obj, member, value) => member.has(obj) ? __typeError$p("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleActionClick, _handleClick$5;
+var __accessCheck$q = (obj, member, msg) => member.has(obj) || __typeError$q("Cannot " + msg);
+var __privateGet$m = (obj, member, getter) => (__accessCheck$q(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$q = (obj, member, value) => member.has(obj) ? __typeError$q("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleActionClick, _handleClick$6;
 let OdxChip = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
     this.removable = false;
     this.interactive = false;
-    __privateAdd$p(this, _handleActionClick, (event) => {
+    __privateAdd$q(this, _handleActionClick, (event) => {
       const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
       if (!actionElement) return;
       event.stopPropagation();
       this.emit("remove");
     });
-    __privateAdd$p(this, _handleClick$5, (event) => {
+    __privateAdd$q(this, _handleClick$6, (event) => {
       if (this.removable) {
         const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
         if (actionElement) return;
@@ -1230,46 +1101,46 @@ let OdxChip = class extends CanBeDisabled(CustomElement) {
   }
   renderAction() {
     return html`
-      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$l(this, _handleActionClick)}>
+      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$m(this, _handleActionClick)}>
         <odx-icon class="action-icon" name="core::close"></odx-icon>
       </button>
     `;
   }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("interactive") || changes.has("disabled")) {
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("interactive") || props.has("disabled")) {
       if (!this.disabled) {
         toggleAttribute(this, "tabindex", this.interactive ? 0 : null);
         toggleAttribute(this.actionElement, "tabindex", this.interactive ? -1 : null);
       }
     }
   }
-  updated(changes) {
-    if (changes.has("removable") || changes.has("interactive") || changes.has("disabled")) {
+  updated(props) {
+    if (props.has("removable") || props.has("interactive") || props.has("disabled")) {
       if (this.removable || this.interactive) {
-        this.addEventListener("click", __privateGet$l(this, _handleClick$5), { capture: true });
+        this.addEventListener("click", __privateGet$m(this, _handleClick$6), { capture: true });
       } else {
-        this.removeEventListener("click", __privateGet$l(this, _handleClick$5));
+        this.removeEventListener("click", __privateGet$m(this, _handleClick$6));
       }
     }
   }
 };
 _handleActionClick = new WeakMap();
-_handleClick$5 = new WeakMap();
-__decorateClass$13([
+_handleClick$6 = new WeakMap();
+__decorateClass$14([
   query(".action")
 ], OdxChip.prototype, "actionElement", 2);
-__decorateClass$13([
+__decorateClass$14([
   property({ type: Boolean, reflect: true })
 ], OdxChip.prototype, "removable", 2);
-__decorateClass$13([
+__decorateClass$14([
   property({ type: Boolean, reflect: true })
 ], OdxChip.prototype, "interactive", 2);
-__decorateClass$13([
+__decorateClass$14([
   property({ reflect: true })
 ], OdxChip.prototype, "variant", 2);
-OdxChip = __decorateClass$13([
-  customElement("odx-chip", [styles$V])
+OdxChip = __decorateClass$14([
+  customElement("odx-chip", [styles$W])
 ], OdxChip);
 
 const ChipVariant = {
@@ -1287,31 +1158,31 @@ const CircularProgressBarSize = {
   LARGE: "large"
 };
 
-const styles$U = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
+const styles$V = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
 
-var __defProp$12 = Object.defineProperty;
-var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
-var __typeError$o = (msg) => {
+var __defProp$13 = Object.defineProperty;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __typeError$p = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$12 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+var __decorateClass$13 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$12(target, key, result);
+  if (kind && result) __defProp$13(target, key, result);
   return result;
 };
-var __accessCheck$o = (obj, member, msg) => member.has(obj) || __typeError$o("Cannot " + msg);
-var __privateGet$k = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$o = (obj, member, value) => member.has(obj) ? __typeError$o("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$o(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __accessCheck$p = (obj, member, msg) => member.has(obj) || __typeError$p("Cannot " + msg);
+var __privateGet$l = (obj, member, getter) => (__accessCheck$p(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$p = (obj, member, value) => member.has(obj) ? __typeError$p("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$p(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _value$1, _OdxCircularProgressBar_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
 let OdxCircularProgressBar = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$o(this, _OdxCircularProgressBar_instances);
-    __privateAdd$o(this, _value$1, 0);
+    __privateAdd$p(this, _OdxCircularProgressBar_instances);
+    __privateAdd$p(this, _value$1, 0);
     this.viewPortSize = 100;
     this.stroke = 4;
     this.indeterminate = false;
@@ -1327,7 +1198,7 @@ let OdxCircularProgressBar = class extends CustomElement {
     }
   }
   get value() {
-    return __privateGet$k(this, _value$1);
+    return __privateGet$l(this, _value$1);
   }
   firstUpdated(changes) {
     super.firstUpdated?.(changes);
@@ -1345,17 +1216,17 @@ let OdxCircularProgressBar = class extends CustomElement {
       <svg part="inner" viewBox="0 0 ${this.viewPortSize} ${this.viewPortSize}">
         <circle
           part="track"
-          stroke-width="${__privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$k(this, _OdxCircularProgressBar_instances, radius_get)}"
+          stroke-width="${__privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$l(this, _OdxCircularProgressBar_instances, radius_get)}"
           cx="50%"
           cy="50%"
         />
         <circle
           part="indicator"
-          stroke-dasharray="${__privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get)}"
-          stroke-dashoffset="${__privateGet$k(this, _OdxCircularProgressBar_instances, progressValue_get)}"
-          stroke-width="${__privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$k(this, _OdxCircularProgressBar_instances, radius_get)}"
+          stroke-dasharray="${__privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get)}"
+          stroke-dashoffset="${__privateGet$l(this, _OdxCircularProgressBar_instances, progressValue_get)}"
+          stroke-width="${__privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$l(this, _OdxCircularProgressBar_instances, radius_get)}"
           cx="50%"
           cy="50%"
         />
@@ -1372,13 +1243,13 @@ let OdxCircularProgressBar = class extends CustomElement {
 _value$1 = new WeakMap();
 _OdxCircularProgressBar_instances = new WeakSet();
 circumference_get = function() {
-  return Math.floor(2 * __privateGet$k(this, _OdxCircularProgressBar_instances, radius_get) * Math.PI);
+  return Math.floor(2 * __privateGet$l(this, _OdxCircularProgressBar_instances, radius_get) * Math.PI);
 };
 radius_get = function() {
-  return Math.max(0, this.viewPortSize / 2 - __privateGet$k(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get) / 2);
+  return Math.max(0, this.viewPortSize / 2 - __privateGet$l(this, _OdxCircularProgressBar_instances, normalizedStrokeWidth_get) / 2);
 };
 progressValue_get = function() {
-  return this.indeterminate ? __privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get) : Math.floor((1 - __privateGet$k(this, _value$1) / 100) * __privateGet$k(this, _OdxCircularProgressBar_instances, circumference_get));
+  return this.indeterminate ? __privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get) : Math.floor((1 - __privateGet$l(this, _value$1) / 100) * __privateGet$l(this, _OdxCircularProgressBar_instances, circumference_get));
 };
 normalizedStrokeWidth_get = function() {
   if (this.stroke < 0) return 0;
@@ -1389,84 +1260,63 @@ normalizedStrokeWidth_get = function() {
   }
   return stroke;
 };
-__decorateClass$12([
+__decorateClass$13([
   property({ type: Number })
 ], OdxCircularProgressBar.prototype, "value", 1);
-__decorateClass$12([
+__decorateClass$13([
   property({ type: Number, reflect: true })
 ], OdxCircularProgressBar.prototype, "stroke", 2);
-__decorateClass$12([
+__decorateClass$13([
   property({ type: Boolean, reflect: true })
 ], OdxCircularProgressBar.prototype, "indeterminate", 2);
-__decorateClass$12([
+__decorateClass$13([
   property({ reflect: true })
 ], OdxCircularProgressBar.prototype, "size", 2);
-OdxCircularProgressBar = __decorateClass$12([
-  customElement("odx-circular-progress-bar", [styles$U])
+OdxCircularProgressBar = __decorateClass$13([
+  customElement("odx-circular-progress-bar", [styles$V])
 ], OdxCircularProgressBar);
 
-const styles$T = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
-
-var __defProp$11 = Object.defineProperty;
-var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
-var __decorateClass$11 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$11(target, key, result);
-  return result;
-};
-let OdxContentBox = class extends CustomElement {
-  render() {
-    return html`
-      <slot name="header"></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
-    `;
-  }
-};
-OdxContentBox = __decorateClass$11([
-  customElement("odx-content-box", [styles$T])
-], OdxContentBox);
-
 const DropdownPlacement = {
   TOP: PopoverPlacement.TOP,
   BOTTOM: PopoverPlacement.BOTTOM
 };
 
-const styles$S = ":host{--_popover-offset: var(--odx-size-37);--_popover-color-background: var(--odx-color-background-main)}";
+const styles$U = ":host{--_popover-offset: var(--odx-size-37);--_popover-color-background: var(--odx-color-background-main)}";
 
-var __defProp$10 = Object.defineProperty;
-var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
-var __typeError$n = (msg) => {
+var __defProp$12 = Object.defineProperty;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __typeError$o = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$10 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+var __decorateClass$12 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$10(target, key, result);
+  if (kind && result) __defProp$12(target, key, result);
   return result;
 };
-var __accessCheck$n = (obj, member, msg) => member.has(obj) || __typeError$n("Cannot " + msg);
-var __privateGet$j = (obj, member, getter) => (__accessCheck$n(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$n = (obj, member, value) => member.has(obj) ? __typeError$n("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$c = (obj, member, method) => (__accessCheck$n(obj, member, "access private method"), method);
-var _OdxDropdown_instances, updateAriaAttributes_fn$1, _handleMouseEvent, _handleKeyboardEvent$1;
-let OdxDropdown = class extends PopoverHost(CanBeDisabled(CustomElement)) {
+var __accessCheck$o = (obj, member, msg) => member.has(obj) || __typeError$o("Cannot " + msg);
+var __privateGet$k = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$o = (obj, member, value) => member.has(obj) ? __typeError$o("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$e = (obj, member, method) => (__accessCheck$o(obj, member, "access private method"), method);
+var _OdxDropdown_instances, updateAriaAttributes_fn$2, _handleClick$5, _handleKeyboardEvent$1;
+let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
   constructor() {
     super(...arguments);
-    __privateAdd$n(this, _OdxDropdown_instances);
+    __privateAdd$o(this, _OdxDropdown_instances);
     this.matchReferenceWidth = false;
     this.placement = DropdownPlacement.BOTTOM;
-    __privateAdd$n(this, _handleMouseEvent, (_event) => {
+    __privateAdd$o(this, _handleClick$5, (_event) => {
       this.togglePopover();
     });
-    __privateAdd$n(this, _handleKeyboardEvent$1, (event) => {
-      if (event.key !== "Enter") return;
-      this.togglePopover();
+    __privateAdd$o(this, _handleKeyboardEvent$1, (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter) return;
+      if (!this.isPopoverOpen()) {
+        event.stopImmediatePropagation();
+      }
+      this.showPopover();
     });
   }
   get options() {
@@ -1482,15 +1332,29 @@ let OdxDropdown = class extends PopoverHost(CanBeDisabled(CustomElement)) {
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);
     if (this.disabled || !referenceElement) return;
-    __privateMethod$c(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, referenceElement, this.id);
-    referenceElement.addEventListener("click", __privateGet$j(this, _handleMouseEvent));
-    referenceElement.addEventListener("keydown", __privateGet$j(this, _handleKeyboardEvent$1));
+    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, this.id);
+    referenceElement.addEventListener("click", __privateGet$k(this, _handleClick$5));
+    referenceElement.addEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
+    this.emit("mount", { detail: { referenceElement } });
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
-    __privateMethod$c(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, referenceElement, null);
-    referenceElement.removeEventListener("click", __privateGet$j(this, _handleMouseEvent));
-    referenceElement.removeEventListener("keydown", __privateGet$j(this, _handleKeyboardEvent$1));
+    __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, null);
+    referenceElement.removeEventListener("click", __privateGet$k(this, _handleClick$5));
+    referenceElement.removeEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
+    this.emit("unmount", { detail: { referenceElement } });
+  }
+  onBeforePopoverShow() {
+    this.emit("before-show");
+  }
+  onPopoverShow() {
+    this.emit("show");
+  }
+  onBeforePopoverHide() {
+    this.emit("before-hide");
+  }
+  onPopoverHide() {
+    this.emit("hide");
   }
   render() {
     return html`
@@ -1499,12 +1363,12 @@ let OdxDropdown = class extends PopoverHost(CanBeDisabled(CustomElement)) {
       </odx-popover>
     `;
   }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("id")) {
-      __privateMethod$c(this, _OdxDropdown_instances, updateAriaAttributes_fn$1).call(this, this.referenceElement, this.id);
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("id")) {
+      __privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, this.referenceElement, this.id);
     }
-    if (changes.has("disabled")) {
+    if (props.has("disabled")) {
       if (this.disabled) {
         this.referenceElement && this.unmountPopover(this.referenceElement);
       } else {
@@ -1514,24 +1378,140 @@ let OdxDropdown = class extends PopoverHost(CanBeDisabled(CustomElement)) {
   }
 };
 _OdxDropdown_instances = new WeakSet();
-updateAriaAttributes_fn$1 = function(referenceElement, id) {
+updateAriaAttributes_fn$2 = function(referenceElement, id) {
   toggleAttribute(referenceElement, "aria-describedby", id);
 };
-_handleMouseEvent = new WeakMap();
+_handleClick$5 = new WeakMap();
 _handleKeyboardEvent$1 = new WeakMap();
-__decorateClass$10([
+__decorateClass$12([
   query("odx-popover", true)
 ], OdxDropdown.prototype, "popoverElement", 2);
-__decorateClass$10([
-  property({ type: Boolean, reflect: true })
+__decorateClass$12([
+  property({ type: Boolean, reflect: true, attribute: "match-reference-width" })
 ], OdxDropdown.prototype, "matchReferenceWidth", 2);
-__decorateClass$10([
+__decorateClass$12([
   property({ type: String, reflect: true })
 ], OdxDropdown.prototype, "placement", 2);
-OdxDropdown = __decorateClass$10([
-  customElement("odx-dropdown", [styles$S])
+OdxDropdown = __decorateClass$12([
+  customElement("odx-dropdown", [styles$U])
 ], OdxDropdown);
 
+const styles$T = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
+
+var __defProp$11 = Object.defineProperty;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __typeError$n = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$11 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$11(target, key, result);
+  return result;
+};
+var __accessCheck$n = (obj, member, msg) => member.has(obj) || __typeError$n("Cannot " + msg);
+var __privateGet$j = (obj, member, getter) => (__accessCheck$n(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$n = (obj, member, value) => member.has(obj) ? __typeError$n("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleSlotChange$7, _handleControlChange, _handleControlKeyboardEvent, _handleControlInput, _handleControlClear;
+let OdxCombobox = class extends ListboxFormControl {
+  constructor() {
+    super();
+    __privateAdd$n(this, _handleSlotChange$7, () => {
+      for (const option of this.options) {
+        option.type = this.multiple ? "checkbox" : null;
+      }
+    });
+    __privateAdd$n(this, _handleControlChange, () => {
+      if (!this.control) return;
+      this.control.addEventListener("clear", __privateGet$j(this, _handleControlClear));
+      this.control.addEventListener("input", __privateGet$j(this, _handleControlInput));
+      this.control.addEventListener("keydown", __privateGet$j(this, _handleControlKeyboardEvent));
+      this.dropdown.referenceElement = this.control;
+    });
+    __privateAdd$n(this, _handleControlKeyboardEvent, (event) => {
+      const { actions, direction } = getKeyboardEventInfo(event);
+      if (actions.enter || actions.space || actions.start || actions.end || direction.down || direction.up) {
+        event.preventDefault();
+        this.emit(new KeyboardEvent(event.type, { key: event.key }));
+      }
+      this.dropdown.showPopover();
+    });
+    __privateAdd$n(this, _handleControlInput, (event) => {
+      if (this.dropdown.isPopoverOpen()) return;
+      this.dropdown.showPopover();
+    });
+    __privateAdd$n(this, _handleControlClear, (event) => {
+      if (!this.dropdown.isPopoverOpen()) return;
+      this.dropdown.hidePopover();
+    });
+    if (!isServer) {
+      this.addEventListener("blur", () => this.dropdown.hidePopover());
+    }
+  }
+  canAutoSelect(option) {
+    return !this.dropdown.isPopoverOpen() && super.canAutoSelect(option);
+  }
+  render() {
+    return html`
+      <odx-highlight>
+        <slot name="control" @slotchange=${__privateGet$j(this, _handleControlChange)}>
+        </slot>
+      </odx-highlight>
+      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width>
+        <slot @slotchange=${__privateGet$j(this, _handleSlotChange$7)}></slot>
+      </odx-dropdown>
+    `;
+  }
+};
+_handleSlotChange$7 = new WeakMap();
+_handleControlChange = new WeakMap();
+_handleControlKeyboardEvent = new WeakMap();
+_handleControlInput = new WeakMap();
+_handleControlClear = new WeakMap();
+__decorateClass$11([
+  state(),
+  queryAssignedElement({ slot: "control" })
+], OdxCombobox.prototype, "control", 2);
+__decorateClass$11([
+  queryAssignedElements({ selector: '[role="option"]', flatten: true })
+], OdxCombobox.prototype, "options", 2);
+__decorateClass$11([
+  query(OdxDropdown.selector, true)
+], OdxCombobox.prototype, "dropdown", 2);
+__decorateClass$11([
+  query(".base")
+], OdxCombobox.prototype, "base", 2);
+OdxCombobox = __decorateClass$11([
+  customElement("odx-combobox", [styles$T])
+], OdxCombobox);
+
+const styles$S = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
+
+var __defProp$10 = Object.defineProperty;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __decorateClass$10 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$10(target, key, result);
+  return result;
+};
+let OdxContentBox = class extends CustomElement {
+  render() {
+    return html`
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  }
+};
+OdxContentBox = __decorateClass$10([
+  customElement("odx-content-box", [styles$S])
+], OdxContentBox);
+
 const styles$R = ":host{display:block}";
 
 var __defProp$$ = Object.defineProperty;
@@ -1550,12 +1530,12 @@ var __decorateClass$$ = (decorators, target, key, kind) => {
 var __accessCheck$m = (obj, member, msg) => member.has(obj) || __typeError$m("Cannot " + msg);
 var __privateGet$i = (obj, member, getter) => (__accessCheck$m(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$m = (obj, member, value) => member.has(obj) ? __typeError$m("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$5;
+var _handleSlotChange$6;
 const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
 let OdxFormField = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$m(this, _handleSlotChange$5, () => {
+    __privateAdd$m(this, _handleSlotChange$6, () => {
       this.control?.addEventListener("change", () => this.requestUpdate());
     });
   }
@@ -1568,7 +1548,7 @@ let OdxFormField = class extends CustomElement {
   render() {
     const isValid = this.control?.checkValidity();
     return html`
-      <slot @slotchange=${__privateGet$i(this, _handleSlotChange$5)}></slot>
+      <slot @slotchange=${__privateGet$i(this, _handleSlotChange$6)}></slot>
       ${when(isValid === false, () => this.renderErrorMessage())}
 
     `;
@@ -1581,7 +1561,7 @@ let OdxFormField = class extends CustomElement {
     `;
   }
 };
-_handleSlotChange$5 = new WeakMap();
+_handleSlotChange$6 = new WeakMap();
 __decorateClass$$([
   queryAssignedElements({ flatten: true })
 ], OdxFormField.prototype, "elements", 2);
@@ -1635,7 +1615,7 @@ let OdxFormatBytes = class extends BaseFormat {
   }
   transform(value) {
     const units = OdxFormatBytes.UNIT_PREFIXES[this.unit];
-    const index = clamp(Math.floor(Math.log10(value) / 3), 0, units.length - 1);
+    const index = Math.min(Math.max(0, Math.floor(Math.log10(value) / 3)), units.length - 1);
     const transformedValue = value / 1e3 ** index;
     return this.formatNumber(transformedValue, {
       maximumFractionDigits: 2,
@@ -1760,7 +1740,7 @@ var __accessCheck$l = (obj, member, msg) => member.has(obj) || __typeError$l("Ca
 var __privateGet$h = (obj, member, getter) => (__accessCheck$l(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$l = (obj, member, value) => member.has(obj) ? __typeError$l("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$l(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod$b = (obj, member, method) => (__accessCheck$l(obj, member, "access private method"), method);
+var __privateMethod$d = (obj, member, method) => (__accessCheck$l(obj, member, "access private method"), method);
 var _syncInterval, _OdxRelativeTime_instances, setupSyncInterval_fn;
 let OdxRelativeTime = class extends BaseFormat {
   constructor() {
@@ -1783,7 +1763,7 @@ let OdxRelativeTime = class extends BaseFormat {
   willUpdate(props) {
     super.willUpdate?.(props);
     if (props.has("syncInterval")) {
-      __privateMethod$b(this, _OdxRelativeTime_instances, setupSyncInterval_fn).call(this);
+      __privateMethod$d(this, _OdxRelativeTime_instances, setupSyncInterval_fn).call(this);
     }
   }
   transform(value) {
@@ -1817,7 +1797,7 @@ OdxRelativeTime = __decorateClass$W([
   customElement("odx-relative-time")
 ], OdxRelativeTime);
 
-const styles$Q = "@layer base{:host{display:flex;align-items:center;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--min-size: var(--odx-size-150);--inline-space: 0}}";
+const styles$Q = "@layer base{:host{display:flex;align-items:center;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}}";
 
 var __defProp$V = Object.defineProperty;
 var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
@@ -1894,11 +1874,11 @@ var __decorateClass$T = (decorators, target, key, kind) => {
 var __accessCheck$k = (obj, member, msg) => member.has(obj) || __typeError$k("Cannot " + msg);
 var __privateGet$g = (obj, member, getter) => (__accessCheck$k(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$k = (obj, member, value) => member.has(obj) ? __typeError$k("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$4;
+var _handleSlotChange$5;
 let OdxHeader = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$k(this, _handleSlotChange$4, () => {
+    __privateAdd$k(this, _handleSlotChange$5, () => {
       const [titleElement] = this.titleElements;
       if (!titleElement) return;
       titleElement.ariaLevel = "1";
@@ -1916,14 +1896,14 @@ let OdxHeader = class extends CustomElement {
       <div class="base">
         <slot name="prefix"></slot>
         <odx-logo size="sm"></odx-logo>
-        <slot @slotchange=${__privateGet$g(this, _handleSlotChange$4)}></slot>
+        <slot @slotchange=${__privateGet$g(this, _handleSlotChange$5)}></slot>
         <slot name="actions"></slot>
       </div>
       <div class="background"></div>
     `;
   }
 };
-_handleSlotChange$4 = new WeakMap();
+_handleSlotChange$5 = new WeakMap();
 __decorateClass$T([
   queryAssignedElements({ selector: OdxTitle.selector, flatten: true })
 ], OdxHeader.prototype, "titleElements", 2);
@@ -1966,7 +1946,7 @@ const HeadlineSize = {
   XL: "xl"
 };
 
-const styles$M = "::highlight(odx-highlight){background-color:var(--odx-color-highlight-rest);color:var(--odx-color-foreground-light)}";
+const styles$M = "@layer base{:host{--background-color: var(--odx-color-highlight-rest);--foreground-color: var(--odx-color-foreground-light)}::highlight(odx-highlight){background-color:var(--background-color);color:var(--foreground-color)}:host([subtle]){--background-color: transparent;--foreground-color: var(--odx-color-highlight-rest)}}";
 
 var __defProp$R = Object.defineProperty;
 var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
@@ -1982,16 +1962,22 @@ let OdxHighlight = class extends CustomElement {
   constructor() {
     super(...arguments);
     this.minlength = 0;
+    this.subtle = false;
+    this.disabled = false;
   }
   updated(props) {
     super.updated(props);
-    if (props.has("query") || props.has("minlength")) {
+    if (props.has("query") || props.has("selector") || props.has("minlength") && !this.disabled) {
       this.highlight();
     }
+    if (props.has("disabled") && this.disabled) {
+      CSS.highlights.delete("odx-highlight");
+      return;
+    }
   }
   highlight() {
     if (!CSS.highlights) return;
-    const result = searchTextContent({ root: this, minlength: this.minlength, query: this.query ?? "" });
+    const result = searchTextContent({ root: this, minlength: this.minlength, query: this.query ?? "", selector: this.selector });
     if (result.length > 0) {
       CSS.highlights.set("odx-highlight", new Highlight(...result));
     } else {
@@ -2002,13 +1988,24 @@ let OdxHighlight = class extends CustomElement {
 __decorateClass$R([
   property()
 ], OdxHighlight.prototype, "query", 2);
+__decorateClass$R([
+  property()
+], OdxHighlight.prototype, "selector", 2);
 __decorateClass$R([
   property({ type: Number })
 ], OdxHighlight.prototype, "minlength", 2);
+__decorateClass$R([
+  property({ type: Boolean, reflect: true })
+], OdxHighlight.prototype, "subtle", 2);
+__decorateClass$R([
+  property({ type: Boolean })
+], OdxHighlight.prototype, "disabled", 2);
 OdxHighlight = __decorateClass$R([
   customElement("odx-highlight", [styles$M])
 ], OdxHighlight);
 
+const styles$L = ":host{--icon-rotation: 0deg}[part=icon]{transition:inherit;transition-property:transform;transform:rotate(var(--icon-rotation))}";
+
 var __defProp$Q = Object.defineProperty;
 var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
@@ -2034,10 +2031,10 @@ __decorateClass$Q([
   property()
 ], OdxIconButton.prototype, "icon", 2);
 OdxIconButton = __decorateClass$Q([
-  customElement("odx-icon-button")
+  customElement("odx-icon-button", [styles$L])
 ], OdxIconButton);
 
-const styles$L = "@layer base{:host{display:block}}";
+const styles$K = "@layer base{:host{display:block}}";
 
 var __defProp$P = Object.defineProperty;
 var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
@@ -2054,7 +2051,7 @@ var __decorateClass$P = (decorators, target, key, kind) => {
 };
 var __accessCheck$j = (obj, member, msg) => member.has(obj) || __typeError$j("Cannot " + msg);
 var __privateAdd$j = (obj, member, value) => member.has(obj) ? __typeError$j("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$a = (obj, member, method) => (__accessCheck$j(obj, member, "access private method"), method);
+var __privateMethod$c = (obj, member, method) => (__accessCheck$j(obj, member, "access private method"), method);
 var _OdxImage_instances, handleDimensionChange_fn;
 class ResourceLoader {
   async load(resource) {
@@ -2100,7 +2097,7 @@ let OdxImage = class extends CustomElement {
       this.checkVisibility();
     }
     if (props.has("height") || props.has("width")) {
-      __privateMethod$a(this, _OdxImage_instances, handleDimensionChange_fn).call(this);
+      __privateMethod$c(this, _OdxImage_instances, handleDimensionChange_fn).call(this);
     }
   }
   async load(src) {
@@ -2144,10 +2141,10 @@ __decorateClass$P([
   property({ type: Number })
 ], OdxImage.prototype, "width", 2);
 OdxImage = __decorateClass$P([
-  customElement("odx-image", [styles$L])
+  customElement("odx-image", [styles$K])
 ], OdxImage);
 
-const styles$K = "@layer base{:host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-separator);--_icon-size: var(--odx-size-150);display:flex;align-items:flex-start;gap:var(--odx-size-75);padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-reduced);line-height:var(--odx-typography-line-height-base);transition-property:background-color,color,display,opacity;transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--_icon-size)}.base{flex:1 1 auto;font-size:var(--odx-typography-font-size-2);line-height:var(--odx-typography-line-height-base)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}}@layer state{:host([aria-hidden=\"true\"]){display:none;opacity:0}}@layer variant{:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host([emphasized]){border-inline-start:var(--odx-border-width-thickest) solid var(--_color-stroke);padding-inline-start:calc(var(--odx-size-75) - var(--odx-border-width-thickest))}}";
+const styles$J = "@layer base{:host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-separator);--_icon-size: var(--odx-size-150);display:flex;align-items:flex-start;gap:var(--odx-size-75);padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-reduced);line-height:var(--odx-typography-line-height-base);transition-property:background-color,color,display,opacity;transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--_icon-size)}.base{flex:1 1 auto;font-size:var(--odx-typography-font-size-2);line-height:var(--odx-typography-line-height-base)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}}@layer state{:host([aria-hidden=\"true\"]){display:none;opacity:0}}@layer variant{:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host([emphasized]){border-inline-start:var(--odx-border-width-thickest) solid var(--_color-stroke);padding-inline-start:calc(var(--odx-size-75) - var(--odx-border-width-thickest))}}";
 
 var __defProp$O = Object.defineProperty;
 var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
@@ -2204,7 +2201,7 @@ __decorateClass$O([
   property({ reflect: true })
 ], OdxInlineMessage.prototype, "variant", 2);
 OdxInlineMessage = __decorateClass$O([
-  customElement("odx-inline-message", [styles$K])
+  customElement("odx-inline-message", [styles$J])
 ], OdxInlineMessage);
 
 const InlineMessageVariant = {
@@ -2217,7 +2214,7 @@ const InlineMessageType = {
   BANNER: "banner"
 };
 
-const styles$J = ":host{--_color-stroke: var(--odx-color-input-control-stroke);--_color-background: var(--odx-color-input-control-fill);--_block-size: var(--odx-size-225);display:block}.base{display:flex;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_block-size);border-radius:var(--odx-border-radius-controls);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color;padding-inline:var(--odx-size-50);gap:var(--odx-size-50);&:has(:focus-visible){--_color-stroke: var(--odx-color-input-control-stroke-pressed)}&:has(.input:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}}.input{background-color:var(--odx-color-transparent);outline:none;border:none;flex:1 1 auto;block-size:100%;padding:0;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-muted);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}";
+const styles$I = "@layer base{:host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_control-size: var(--odx-size-225);display:inline-block;min-inline-size:16ch}[part=base]{display:flex;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_control-size);border-radius:var(--odx-border-radius-controls);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color;padding-inline:var(--odx-size-50);gap:var(--odx-size-37);&:has([part=input]:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}&:has([part=input]:focus-visible){--_color-stroke: var(--odx-focus-ring-color)}&:has(.clear){padding-inline-end:var(--odx-size-px)}}.clear{--_icon-size: var(--odx-typography-font-size-4);--_margin-icon: 0}[part=input]{background-color:var(--odx-color-transparent);outline:none;border:none;flex:1 1 auto;block-size:100%;padding:0;color:inherit;min-width:none;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-muted);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}}@layer variant{:host([block]){display:block}}";
 
 var __defProp$N = Object.defineProperty;
 var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
@@ -2235,13 +2232,19 @@ var __decorateClass$N = (decorators, target, key, kind) => {
 var __accessCheck$i = (obj, member, msg) => member.has(obj) || __typeError$i("Cannot " + msg);
 var __privateGet$f = (obj, member, getter) => (__accessCheck$i(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$i = (obj, member, value) => member.has(obj) ? __typeError$i("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleInput$1, _handleKeyDown$2, _handleClear$1;
+var __privateMethod$b = (obj, member, method) => (__accessCheck$i(obj, member, "access private method"), method);
+var _OdxInput_instances, isClearable_fn$1, _handleClear$2, _handleInput$1, _handleKeyDown$2;
 let OdxInput = class extends FormControl(CustomElement) {
   constructor() {
     super(...arguments);
-    this.clearable = true;
+    __privateAdd$i(this, _OdxInput_instances);
+    this.block = false;
+    this.clearable = false;
     this.placeholder = "";
     this.type = "text";
+    __privateAdd$i(this, _handleClear$2, () => {
+      this.clear();
+    });
     __privateAdd$i(this, _handleInput$1, (event) => {
       this.value = event.target.value;
     });
@@ -2249,31 +2252,33 @@ let OdxInput = class extends FormControl(CustomElement) {
       const { actions } = getKeyboardEventInfo(event);
       if (!actions.escape) return;
       event.preventDefault();
-      __privateGet$f(this, _handleClear$1).call(this);
-    });
-    __privateAdd$i(this, _handleClear$1, () => {
-      if (!this.clearable || this.emit("clear")) return;
       this.clear();
     });
   }
   clear() {
+    if (!__privateMethod$b(this, _OdxInput_instances, isClearable_fn$1).call(this) || this.emit("clear")) return;
     this.value = "";
+    this.focus();
+  }
+  focus() {
+    this.focusableElement.focus();
   }
   render() {
     const clearButton = when(
-      this.clearable && this.value,
-      () => html`<odx-icon-button icon="core::error"  @click=${__privateGet$f(this, _handleClear$1)} variant="ghost" tabindex="-1"></odx-icon-button>`
+      __privateMethod$b(this, _OdxInput_instances, isClearable_fn$1).call(this),
+      () => html`<odx-icon-button class="clear" icon="core::close" size="sm" tabindex="-1"  variant="ghost" @click=${__privateGet$f(this, _handleClear$2)}></odx-icon-button>`
     );
     return html`
-      <div class="base">
+      <div part="base">
         <slot name="prefix"></slot>
         <input
           placeholder=${this.placeholder}
-          class="input"
+          part="input"
           type=${this.type}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           .value=${this.value}
+          size="1"
           @keydown=${__privateGet$f(this, _handleKeyDown$2)}
           @change=${forwardEvent(this)}
           @input=${__privateGet$f(this, _handleInput$1)}
@@ -2285,10 +2290,20 @@ let OdxInput = class extends FormControl(CustomElement) {
     `;
   }
 };
+_OdxInput_instances = new WeakSet();
+isClearable_fn$1 = function() {
+  return this.clearable && !this.disabled && !this.readonly && !this.required && !!this.value;
+};
+_handleClear$2 = new WeakMap();
 _handleInput$1 = new WeakMap();
 _handleKeyDown$2 = new WeakMap();
-_handleClear$1 = new WeakMap();
 OdxInput.formAssociated = true;
+__decorateClass$N([
+  query("input")
+], OdxInput.prototype, "focusableElement", 2);
+__decorateClass$N([
+  property({ type: Boolean, reflect: true })
+], OdxInput.prototype, "block", 2);
 __decorateClass$N([
   property({ type: Boolean })
 ], OdxInput.prototype, "clearable", 2);
@@ -2302,7 +2317,7 @@ __decorateClass$N([
   property({ reflect: true })
 ], OdxInput.prototype, "variant", 2);
 OdxInput = __decorateClass$N([
-  customElement("odx-input", [styles$J])
+  customElement("odx-input", [styles$I])
 ], OdxInput);
 
 const InputVariant = {
@@ -2311,7 +2326,7 @@ const InputVariant = {
   LG: "lg"
 };
 
-const styles$I = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
+const styles$H = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
 
 var __defProp$M = Object.defineProperty;
 var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
@@ -2342,10 +2357,10 @@ __decorateClass$M([
   property({ type: Number })
 ], OdxLineClamp.prototype, "max", 2);
 OdxLineClamp = __decorateClass$M([
-  customElement("odx-line-clamp", [styles$I])
+  customElement("odx-line-clamp", [styles$H])
 ], OdxLineClamp);
 
-const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}.base,.spinner{padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200))}.spinner{padding-inline-end:var(--odx-size-100)}.base{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;line-height:var(--odx-typography-line-height-2)}.base:after{display:block;block-size:var(--odx-size-px);background-color:var(--odx-color-separator);position:absolute;inset:auto var(--odx-size-37) -1px;transition:var(--odx-transition-reduced);transition-property:opacity;z-index:0}:host(:is(:not(:last-of-type),[expanded]):not(:is([aria-current],[aria-disabled=\"true\"]))) .base:after{content:\"\"}.content{margin-inline-end:auto}.base>*{--odx-focus-ring-offset: 0}[part=control]::part(icon){transition:var(--odx-transition-reduced);transition-property:transform}}@layer variant{:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([aria-expanded=\"true\"]){[part=control]::part(icon){transform:rotate(180deg)}}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}}";
+const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}[part=base]{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=label]{flex:1 1 auto}[part=base]>*{--odx-focus-ring-offset: 0}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]{--icon-rotation: 180deg}}}";
 
 var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
@@ -2363,69 +2378,87 @@ var __decorateClass$L = (decorators, target, key, kind) => {
 var __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
 var __privateGet$e = (obj, member, getter) => (__accessCheck$h(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$h = (obj, member, value) => member.has(obj) ? __typeError$h("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleClick$4;
-let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
+var __privateMethod$a = (obj, member, method) => (__accessCheck$h(obj, member, "access private method"), method);
+var _OdxListItem_instances, updateAriaAttributes_fn$1, _handleClick$4;
+let OdxListItem = class extends CanBeSelected(CanBeExpanded(InteractiveElement)) {
   constructor() {
     super();
+    __privateAdd$h(this, _OdxListItem_instances);
     this.compact = false;
     this.muted = false;
-    this.withControl = false;
-    this.withExpandedIndicator = false;
+    this.withExpandControl = false;
+    this.withExpandIndicator = false;
     __privateAdd$h(this, _handleClick$4, (event) => {
-      const expandControl = this.shadowRoot?.querySelector(this.withControl ? ".expand-control" : ".base");
-      if (!getElementFromEvent(event, (node) => node === expandControl)) return;
+      const expandControl = this.shadowRoot?.querySelector(this.withExpandControl ? '[part="expand-control"]' : '[part="base"]');
+      if (!(this.withExpandIndicator || this.isExpandable()) || !getElementFromEvent(event, (node) => node === expandControl)) return;
       this.toggle();
-      if (!this.expanded) return;
-      for (const item of Array.from(this.querySelectorAll("odx-list-item"))) {
-        item.toggle(false);
-      }
     });
     if (!isServer) {
       this.addEventListener("click", __privateGet$e(this, _handleClick$4));
     }
   }
   isExpandable() {
-    return !this.disabled && !this.loading && this.querySelectorAll('[slot="expand"]').length > 0;
+    return !this.disabled && !this.loading && this.expandableItems.length > 0;
   }
   connectedCallback() {
     super.connectedCallback();
     this.role ||= "listitem";
   }
   render() {
-    const expandSlot = html`<slot name="expand"></slot>`;
+    const expandSlot = html`<slot name="expand" @slotchange=${() => this.requestUpdate()}></slot>`;
     return html`
-      ${when(this.loading, () => this.renderSpinner(true))}
       ${super.render()}
+      <odx-separator part="separator"></odx-separator>
       ${when(
       this.isExpandable(),
-      () => html`<odx-toggle-content class="expand-content" ?expanded=${this.expanded}>${expandSlot}</odx-toggle-content>`,
+      () => html`<odx-toggle-content part="content" id="list-item-content" role="region" ?hidden=${!this.expanded}>${expandSlot}</odx-toggle-content>`,
       () => html`<odx-visually-hidden>${expandSlot}</odx-visually-hidden>`
     )}
     `;
   }
   renderContent() {
+    const controlSize = this.compact ? ButtonSize.SM : void 0;
     return html`
-      ${super.renderContent(false)}
+      ${super.renderContent(true)}
       ${when(
-      this.withExpandedIndicator || this.isExpandable(),
+      this.withExpandIndicator || this.isExpandable(),
       () => html`
-          <odx-icon-button part="control" icon="core::chevron-down" size=${this.compact ? "sm" : "md"} variant="ghost" ?disabled=${this.disabled} ?inert=${!this.withControl}>
+          <odx-icon-button
+             id="expand-control"
+             part="expand-control"
+             icon="core::chevron-down"
+             variant="ghost"
+             size=${optionalAttr(controlSize)}
+             ?disabled=${this.disabled}
+             ?inert=${!this.withExpandControl}
+          >
           </odx-icon-button>
         `
     )}
     `;
   }
-  renderSpinner(overlay = false) {
-    return html`<odx-skeleton class=${classMap({ spinner: true, overlay })} size="sm"></odx-skeleton>`;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("expanded")) {
-      this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
+  updated(props) {
+    super.updated?.(props);
+    if (props.has("disabled") || props.has("expanded")) {
+      __privateMethod$a(this, _OdxListItem_instances, updateAriaAttributes_fn$1).call(this);
     }
   }
 };
+_OdxListItem_instances = new WeakSet();
+updateAriaAttributes_fn$1 = function() {
+  const region = this.shadowRoot?.getElementById("list-item-content");
+  if (!region) return;
+  const expandControl = this.shadowRoot?.querySelector(this.withExpandControl ? '[part="expand-control"]' : '[part="base"]');
+  if (!expandControl) return;
+  expandControl.ariaExpanded = toAriaBooleanAttribute(this.expanded);
+  expandControl.setAttribute("aria-controls", region.id);
+  region.setAttribute("aria-labelledby", "expand-control");
+  region.ariaHidden = toAriaBooleanAttribute(this.disabled || !this.expanded);
+};
 _handleClick$4 = new WeakMap();
+__decorateClass$L([
+  queryAssignedElements({ slot: "expand" })
+], OdxListItem.prototype, "expandableItems", 2);
 __decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], OdxListItem.prototype, "compact", 2);
@@ -2433,16 +2466,16 @@ __decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], OdxListItem.prototype, "muted", 2);
 __decorateClass$L([
-  property({ type: Boolean, attribute: "with-control" })
-], OdxListItem.prototype, "withControl", 2);
+  property({ type: Boolean, attribute: "with-expand-control" })
+], OdxListItem.prototype, "withExpandControl", 2);
 __decorateClass$L([
-  property({ type: Boolean, attribute: "with-expanded-indicator" })
-], OdxListItem.prototype, "withExpandedIndicator", 2);
+  property({ type: Boolean, attribute: "with-expand-indicator" })
+], OdxListItem.prototype, "withExpandIndicator", 2);
 OdxListItem = __decorateClass$L([
-  customElement("odx-list-item", [BaseButton.styles, styles$H])
+  customElement("odx-list-item", [styles$G])
 ], OdxListItem);
 
-const styles$G = "@layer base{:host{display:block;--item-indent-level: 0}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}}";
+const styles$F = "@layer base{:host{display:block;--item-indent-level: 0}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}}";
 
 var __defProp$K = Object.defineProperty;
 var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
@@ -2455,16 +2488,24 @@ var __decorateClass$K = (decorators, target, key, kind) => {
   return result;
 };
 let OdxList = class extends CustomElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    new ExpandableItemManager(this, { getItems: () => Array.from(this.querySelectorAll('[role="listitem"]')) });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.role = "list";
   }
 };
+__decorateClass$K([
+  property({ type: Boolean, reflect: true })
+], OdxList.prototype, "multiple", 2);
 OdxList = __decorateClass$K([
-  customElement("odx-list", [styles$G])
+  customElement("odx-list", [styles$F])
 ], OdxList);
 
-const styles$F = "@layer base{:host{--_overlay-fill-color: var(--odx-color-backdrop, rgba(255, 255, 255, .25));display:contents;overflow:hidden;border-radius:inherit}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden;border-radius:inherit}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}}@layer state{:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-size-12));pointer-events:all;visibility:visible}}";
+const styles$E = "@layer base{:host{--_overlay-fill-color: var(--odx-color-backdrop, rgba(255, 255, 255, .25));display:contents;overflow:hidden;border-radius:inherit}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden;border-radius:inherit}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}}@layer state{:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-size-12));pointer-events:all;visibility:visible}}";
 
 var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
@@ -2535,10 +2576,10 @@ __decorateClass$J([
   query('[part="overlay"]', true)
 ], OdxLoadingOverlay.prototype, "overlay", 2);
 OdxLoadingOverlay = __decorateClass$J([
-  customElement("odx-loading-overlay", [styles$F])
+  customElement("odx-loading-overlay", [styles$E])
 ], OdxLoadingOverlay);
 
-const styles$E = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}:not(svg){transform-origin:0px 0px}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:50%;block-size:calc(var(--_size) / 3);flex:0 0 calc(var(--_size) / 3);z-index:3;animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-transparent-pressed)}50%{transform:scale(1);background-color:currentColor}}";
+const styles$D = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}:not(svg){transform-origin:0px 0px}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:50%;block-size:calc(var(--_size) / 3);flex:0 0 calc(var(--_size) / 3);z-index:3;animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-transparent-pressed)}50%{transform:scale(1);background-color:currentColor}}";
 
 var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
@@ -2589,10 +2630,10 @@ __decorateClass$I([
   property({ reflect: true })
 ], OdxLoadingSpinner.prototype, "variant", 2);
 OdxLoadingSpinner = __decorateClass$I([
-  customElement("odx-loading-spinner", [styles$E])
+  customElement("odx-loading-spinner", [styles$D])
 ], OdxLoadingSpinner);
 
-const styles$D = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
+const styles$C = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
 
 var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
@@ -2624,7 +2665,7 @@ __decorateClass$H([
   property({ type: Boolean, reflect: true })
 ], OdxLogo.prototype, "compact", 2);
 OdxLogo = __decorateClass$H([
-  customElement("odx-logo", [styles$D])
+  customElement("odx-logo", [styles$C])
 ], OdxLogo);
 
 const LogoSize = {
@@ -2671,7 +2712,7 @@ OdxMainMenuButton = __decorateClass$G([
   customElement("odx-main-menu-button", [])
 ], OdxMainMenuButton);
 
-const styles$C = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}.base{display:flex;place-items:center;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--odx-size-50);block-size:var(--odx-size-300);padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-outline);transition:var(--odx-transition-default);text-decoration:none;&:focus-visible{--_color-outline: var(--odx-focus-ring-color)}}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
+const styles$B = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}[part=base]{display:flex;place-items:center;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--odx-size-50);block-size:var(--odx-size-300);padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-outline);transition:var(--odx-transition-default);text-decoration:none;&:focus-visible{--_color-outline: var(--odx-focus-ring-color)}}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
 
 var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
@@ -2686,7 +2727,7 @@ var __decorateClass$F = (decorators, target, key, kind) => {
 let OdxMainMenuLink = class extends BaseLink {
 };
 OdxMainMenuLink = __decorateClass$F([
-  customElement("odx-main-menu-link", [styles$C])
+  customElement("odx-main-menu-link", [styles$B])
 ], OdxMainMenuLink);
 
 var __defProp$E = Object.defineProperty;
@@ -2743,7 +2784,7 @@ OdxMainMenuTitle = __decorateClass$D([
   customElement("odx-main-menu-title")
 ], OdxMainMenuTitle);
 
-const styles$B = ":host{--odx-link-color: var(--odx-color-foreground-light);--odx-link-color-hover: var(--odx-color-foreground-light);--odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));border:none;background-color:var(--odx-color-background-draeger);color:var(--odx-color-foreground-light);margin:0;padding:0;transform:translate(-100%);box-shadow:var(--odx-shadow-level-2);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete}:host(:popover-open){display:grid;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(-100%)}}:host::backdrop{background-color:var(--odx-color-backdrop);backdrop-filter:blur(0);opacity:0;transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);cursor:default}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-inline:var(--odx-size-150);padding-block-start:var(--odx-size-75);padding-block-end:clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75))}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{padding-block-end:0;padding-block-start:var(--odx-size-75);column-gap:var(--odx-size-100)}";
+const styles$A = ":host{--odx-link-color: var(--odx-color-foreground-light);--odx-link-color-hover: var(--odx-color-foreground-light);--odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));border:none;background-color:var(--odx-color-background-draeger);color:var(--odx-color-foreground-light);margin:0;padding:0;transform:translate(-100%);box-shadow:var(--odx-shadow-level-2);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete}:host(:popover-open){display:grid;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(-100%)}}:host::backdrop{background-color:var(--odx-color-backdrop);backdrop-filter:blur(0);opacity:0;transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);cursor:default}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-inline:var(--odx-size-150);padding-block-start:var(--odx-size-75);padding-block-end:clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75))}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{padding-block-end:0;padding-block-start:var(--odx-size-75);column-gap:var(--odx-size-100)}";
 
 var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
@@ -2761,12 +2802,12 @@ var __decorateClass$C = (decorators, target, key, kind) => {
 var __accessCheck$d = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
 var __privateGet$b = (obj, member, getter) => (__accessCheck$d(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$d = (obj, member, value) => member.has(obj) ? __typeError$d("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _focusTrap, _handleSlotChange$3, _handleToggle;
+var _focusTrap, _handleSlotChange$4, _handleToggle;
 let OdxMainMenu = class extends CustomElement {
   constructor() {
     super();
     __privateAdd$d(this, _focusTrap, new FocusTrapController(this));
-    __privateAdd$d(this, _handleSlotChange$3, () => {
+    __privateAdd$d(this, _handleSlotChange$4, () => {
       for (const link of this.links) {
         link.slot ||= "link-navigation";
       }
@@ -2797,12 +2838,10 @@ let OdxMainMenu = class extends CustomElement {
         <slot name="title"></slot>
         <slot name="subtitle"></slot>
       </div>
-      <nav part="navigation">
-        <odx-stack gap="md" align="stretch" vertical>
-          <slot @slotchange=${__privateGet$b(this, _handleSlotChange$3)}></slot>
-        </odx-stack>
+      <nav part="navigation" class="odx-stack">
+        <slot @slotchange=${__privateGet$b(this, _handleSlotChange$4)}></slot>
       </nav>
-      <odx-stack part="link-navigation" gap="xs"  wrap horizontal justify="start">
+      <odx-stack part="link-navigation" gap="xs" horizontal wrap>
         <slot name="link-navigation"></slot>
       </odx-stack>
       <div part="footer">
@@ -2812,16 +2851,16 @@ let OdxMainMenu = class extends CustomElement {
   }
 };
 _focusTrap = new WeakMap();
-_handleSlotChange$3 = new WeakMap();
+_handleSlotChange$4 = new WeakMap();
 _handleToggle = new WeakMap();
 __decorateClass$C([
   queryAssignedElements({ selector: "odx-link", flatten: true })
 ], OdxMainMenu.prototype, "links", 2);
 OdxMainMenu = __decorateClass$C([
-  customElement("odx-main-menu", [styles$B])
+  customElement("odx-main-menu", [styles$A])
 ], OdxMainMenu);
 
-const styles$A = "@layer base{.base{place-content:flex-start}}";
+const styles$z = "@layer base{[part=base]{place-content:flex-start}}";
 
 var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
@@ -2833,11 +2872,11 @@ var __decorateClass$B = (decorators, target, key, kind) => {
   if (kind && result) __defProp$B(target, key, result);
   return result;
 };
-let OdxMenuItem = class extends BaseButton {
+let OdxMenuItem = class extends InteractiveElement {
   renderContent() {
     return html`
       ${when(!this.loading && this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
-      ${when(this.loading, () => this.renderSpinner())}
+      ${when(this.loading, () => this.renderLoader())}
       <odx-line-clamp class="content" .max=${2}>
         <slot></slot>
       </odx-line-clamp>
@@ -2848,18 +2887,15 @@ let OdxMenuItem = class extends BaseButton {
     super.connectedCallback();
     this.role ||= "menuitem";
   }
-  renderOverlay() {
-    return nothing;
-  }
 };
 __decorateClass$B([
   property()
 ], OdxMenuItem.prototype, "icon", 2);
 OdxMenuItem = __decorateClass$B([
-  customElement("odx-menu-item", [BaseButton.styles, styles$A])
+  customElement("odx-menu-item", [styles$z])
 ], OdxMenuItem);
 
-const styles$z = ":host{display:flex;place-items:center;padding-inline:var(--odx-size-50);user-select:none;font-weight:var(--odx-typography-font-weight-medium);gap:var(--odx-size-50)}@layer baes{odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5);margin-inline:}}";
+const styles$y = ":host{display:flex;place-items:center;padding-inline:var(--odx-size-50);user-select:none;font-weight:var(--odx-typography-font-weight-medium);gap:var(--odx-size-50)}@layer baes{odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5);margin-inline:}}";
 
 var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
@@ -2874,10 +2910,10 @@ var __decorateClass$A = (decorators, target, key, kind) => {
 let OdxMenuLabel = class extends CustomElement {
 };
 OdxMenuLabel = __decorateClass$A([
-  customElement("odx-menu-label", [styles$z])
+  customElement("odx-menu-label", [styles$y])
 ], OdxMenuLabel);
 
-const styles$y = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main);--_outer-padding: var(--odx-size-50)}.base{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size)}::slotted(odx-separator){--block-space: calc(-1 * var(--_gap) / 2)}::slotted(odx-button){inline-size:100%;margin:0}";
+const styles$x = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37);--_popover-color-background: var(--odx-color-background-main)}.base{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size)}::slotted(odx-separator){--margin-block: 0}";
 
 var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
@@ -2898,7 +2934,7 @@ var __privateAdd$c = (obj, member, value) => member.has(obj) ? __typeError$c("Ca
 var _tabindexController, _handleReferenceInteraction, _handleClick$2, _handleKeyDown$1, _handleReferenceKeyDown;
 const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
 const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
-let OdxMenu = class extends PopoverHost(CustomElement) {
+let OdxMenu = class extends PopoverHost {
   constructor() {
     super(...arguments);
     __privateAdd$c(this, _tabindexController, new RovingTabindexController(this, {
@@ -2937,7 +2973,7 @@ let OdxMenu = class extends PopoverHost(CustomElement) {
     });
   }
   getItems() {
-    return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR));
+    return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR)).filter((item) => !item.disabled);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2954,6 +2990,7 @@ let OdxMenu = class extends PopoverHost(CustomElement) {
     super.unmountPopover(referenceElement);
   }
   onBeforePopoverShow() {
+    __privateGet$a(this, _tabindexController).update({ elements: () => this.getItems() });
     __privateGet$a(this, _tabindexController).currentIndex = 0;
     __privateGet$a(this, _tabindexController).focus();
   }
@@ -2982,10 +3019,10 @@ _handleClick$2 = new WeakMap();
 _handleKeyDown$1 = new WeakMap();
 _handleReferenceKeyDown = new WeakMap();
 OdxMenu = __decorateClass$z([
-  customElement("odx-menu", [styles$y])
+  customElement("odx-menu", [styles$x])
 ], OdxMenu);
 
-const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150-responsive);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{background:transparent;border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);color:var(--odx-color-foreground-base);margin-block-start:var(--margin-block-start);overflow:unset;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;&::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));background-color:var(--odx-color-backdrop);transition-property:opacity}}.inner{display:flex;flex-direction:column;background-color:var(--odx-color-background-main);border-radius:inherit;padding:var(--odx-breakpoint-spacing-50) var(--odx-breakpoint-spacing-150-responsive);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-breakpoint-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150-responsive)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{&,&::backdrop{opacity:1;@starting-style{opacity:0}}transform:translate(0);@starting-style{transform:translateY(var(--odx-size-100))}}}";
+const styles$w = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150-responsive);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{background:transparent;border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);color:var(--odx-color-foreground-base);margin-block-start:var(--margin-block-start);overflow:unset;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;&::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));background-color:var(--odx-color-backdrop);transition-property:opacity}}.inner{display:flex;flex-direction:column;background-color:var(--odx-color-background-main);border-radius:inherit;padding:var(--odx-breakpoint-spacing-50) var(--odx-breakpoint-spacing-150-responsive);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-breakpoint-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150-responsive)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{&,&::backdrop{opacity:1;@starting-style{opacity:0}}transform:translate(0);@starting-style{transform:translateY(var(--odx-size-100))}}}";
 
 var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
@@ -3087,13 +3124,13 @@ let OdxModal = class extends CustomElement {
       this.dismissable,
       () => html`<odx-icon-button class="dismiss-action" icon="core::close" variant="ghost" @click=${this.dismiss}>×</odx-icon-button >`
     )}
-          <odx-stack class="header" align="center">
+          <odx-stack class="header" align="center" horizontal>
             <slot name="header"></slot>
           </odx-stack>
           <div class="content">
             <slot></slot>
           </div>
-          <odx-stack class="footer" align="center" justify="end">
+          <odx-stack class="footer" align="center" justify="end" horizontal>
             <slot name="footer"></slot>
           </odx-stack>
         </div>
@@ -3137,14 +3174,14 @@ __decorateClass$y([
   property({ reflect: true })
 ], OdxModal.prototype, "variant", 2);
 OdxModal = __decorateClass$y([
-  customElement("odx-modal", [styles$x])
+  customElement("odx-modal", [styles$w])
 ], OdxModal);
 
 const ModalVariant = {
   SIDESHEET: "sidesheet"
 };
 
-const styles$w = "@layer base{:host{flex:0 0 auto}.base{text-align:start;place-content:flex-start;outline-offset:0}.content{margin-inline-end:auto}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0}}";
+const styles$v = "@layer base{:host{flex:0 0 auto}[part=base]{text-align:start;place-content:flex-start;outline-offset:0}[part=label]{margin-inline-end:auto}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0;odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
 
 var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
@@ -3156,13 +3193,13 @@ var __decorateClass$x = (decorators, target, key, kind) => {
   if (kind && result) __defProp$x(target, key, result);
   return result;
 };
-let OdxNavigationItem = class extends CanBeSelected(BaseButton) {
+let OdxNavigationItem = class extends CanBeSelected(InteractiveElement) {
 };
 __decorateClass$x([
   property({ reflect: true })
 ], OdxNavigationItem.prototype, "size", 2);
 OdxNavigationItem = __decorateClass$x([
-  customElement("odx-navigation-item", [BaseButton.styles, styles$w])
+  customElement("odx-navigation-item", [styles$v])
 ], OdxNavigationItem);
 
 const NavigationItemSize = {
@@ -3170,7 +3207,7 @@ const NavigationItemSize = {
   LG: "lg"
 };
 
-const styles$v = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+const styles$u = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host([aria-selected=\"true\"][odx-active]),:host([aria-selected=\"true\"]:active){--_color-background: var(--odx-color-selected-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
 
 var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
@@ -3195,14 +3232,11 @@ let OdxOption = class extends OptionControl {
     `;
   }
 };
-__decorateClass$w([
-  property({ reflect: true })
-], OdxOption.prototype, "type", 2);
 OdxOption = __decorateClass$w([
-  customElement("odx-option", [styles$v])
+  customElement("odx-option", [styles$u])
 ], OdxOption);
 
-const styles$u = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0px,auto) minmax(0px,100%) minmax(0px,auto);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));max-block-size:var(--_size);inset-block-end:0;overflow:auto}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
+const styles$t = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0px,auto) minmax(0px,100%) minmax(0px,auto);grid-template-rows:minmax(0px,auto) minmax(0px,1fr) minmax(0px,auto);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";justify-content:start;padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));max-block-size:var(--_size);inset-block-end:0;overflow:auto}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
 
 var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
@@ -3223,14 +3257,15 @@ let OdxPageLayout = class extends CustomElement {
         <slot></slot>
       </div>
       ${optionalSlot(this, "sidebar")}
+      ${optionalSlot(this, "footer")}
     `;
   }
 };
 OdxPageLayout = __decorateClass$v([
-  customElement("odx-page-layout", [styles$u])
+  customElement("odx-page-layout", [styles$t])
 ], OdxPageLayout);
 
-const styles$t = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100dvh;grid-template-columns:100%;grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}::slotted(odx-page-layout){min-block-size:100%}";
+const styles$s = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100dvh;grid-template-columns:100%;grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}.footer{grid-area:footer}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}::slotted(odx-page-layout){min-block-size:100%}";
 
 var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
@@ -3260,6 +3295,9 @@ let OdxPage = class extends CustomElement {
       <div class="content" part="content">
         <slot></slot>
       </div>
+      <div class="footer" part="footer">
+        <slot name="footer"></slot>
+      </div>
     `;
   }
 };
@@ -3276,7 +3314,7 @@ __decorateClass$u([
   property({ reflect: true })
 ], OdxPage.prototype, "layout", 2);
 OdxPage = __decorateClass$u([
-  customElement("odx-page", [styles$t])
+  customElement("odx-page", [styles$s])
 ], OdxPage);
 
 const PageAlignment = {
@@ -3287,7 +3325,7 @@ const PageLayout = {
   WIDE: "wide"
 };
 
-const styles$s = "@layer base{:host{display:block}odx-icon-button::part(anchor){outline-offset:0}}";
+const styles$r = "@layer base{:host{display:block}odx-icon-button::part(base){outline-offset:0}}";
 
 var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
@@ -3317,9 +3355,9 @@ let OdxPagination = class extends IsLocalized(CustomElement) {
   }
   get paginationContext() {
     return {
-      pageStart: clamp(this.page * this.pageSize, 0, this.totalItems),
-      pageEnd: clamp((this.page + 1) * this.pageSize - 1, 0, this.totalItems),
-      page: clamp(this.page, 1, this.totalPages),
+      pageStart: Math.min(Math.max(0, this.page * this.pageSize), this.totalItems),
+      pageEnd: Math.min(Math.max(0, (this.page + 1) * this.pageSize - 1), this.totalItems),
+      page: Math.min(Math.max(1, this.page), this.totalPages),
       totalPages: this.totalPages,
       totalItems: this.totalItems,
       hasPreviousPage: this.page > 0,
@@ -3345,7 +3383,7 @@ let OdxPagination = class extends IsLocalized(CustomElement) {
   render() {
     const { hasPreviousPage, hasNextPage } = this.paginationContext;
     return html`
-      <odx-stack align="center" gap="xs" justify="end">
+      <odx-stack align="center" gap="xs" justify="end" horizontal>
         <span>${this.t("odx.pagination.summary", this.paginationContext)}</span>
         <odx-button-group ?disabled=${!hasPreviousPage} connected variant="ghost">
           <odx-icon-button  icon="core::chevron-left-end" @click=${() => this.firstPage()}></odx-icon-button>
@@ -3376,10 +3414,10 @@ __decorateClass$t([
   property({ type: Number })
 ], OdxPagination.prototype, "totalItems", 2);
 OdxPagination = __decorateClass$t([
-  customElement("odx-pagination", [styles$s])
+  customElement("odx-pagination", [styles$r])
 ], OdxPagination);
 
-const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;--_label-width: var(--odx-progress-label-width, 33.3%);--_value-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_color-foreground);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}.base,.indicator{inline-size:100%}.base{block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);overflow:hidden;position:relative;inline-size:100%}.indicator{block-size:100%;background-color:var(--_indicator-color);transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transition:var(--odx-transition-reduced);transition-property:background-color,transform;transform-origin:0% 50%}.label{text-align:start;overflow-x:clip;text-overflow:ellipsis;white-space:nowrap;max-inline-size:calc(100% - var(--_value-width) - var(--odx-size-75))}.value{text-align:end;margin-inline-start:auto}:host([condensed]){padding-block:0;flex-wrap:nowrap;.label{inline-size:var(--_label-width)}.value{width:var(--_value-width);order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-danger-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
+const styles$q = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_color-foreground);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}.base,.indicator{inline-size:100%}.base{block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);overflow:hidden;position:relative;inline-size:100%}.indicator{block-size:100%;background-color:var(--_indicator-color);transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transition:var(--odx-transition-reduced);transition-property:background-color,transform;transform-origin:0% 50%}[part=label]{flex:1;text-align:start;padding-block:var(--odx-size-25);margin-block:calc(-1 * var(--odx-size-25))}[part=value]{align-self:flex-end;text-align:end;margin-inline-start:auto}:host([condensed]){padding-block:0;flex-wrap:nowrap;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-danger-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
 
 var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
@@ -3402,7 +3440,7 @@ let OdxProgressBar = class extends CustomElement {
     this.hideValue = false;
   }
   get valuePercentage() {
-    return clamp(round(this.value - this.min / this.max - this.min, 2), this.min, this.max);
+    return Math.min(Math.max(this.min, round(this.value - this.min / this.max - this.min, 2)), this.max);
   }
   get valueHidden() {
     return this.hideValue || !this.valueText && this.indeterminate;
@@ -3410,7 +3448,7 @@ let OdxProgressBar = class extends CustomElement {
   render() {
     const valueText = this.valueText || `${this.valuePercentage}%`;
     return html`
-      ${when(this.label, (label) => html`<div part="label" aria-hidden="true">${label}</div>`)}
+      ${when(this.label, (label) => html`<div part="label" aria-hidden="true" odxPreventTextOverflow>${label}</div>`)}
       ${when(!this.valueHidden, () => html`<odx-text part="value" aria-hidden="true">${valueText}</odx-text>`)}
       <div
         class="base"
@@ -3420,7 +3458,7 @@ let OdxProgressBar = class extends CustomElement {
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${this.indeterminate ? 0 : this.value}
-        style=${styleMap({ "--_value-percentage": this.valuePercentage })}
+        style="--_value-percentage: ${this.valuePercentage}"
         >
         <div class="indicator"></div>
       </div>
@@ -3458,7 +3496,7 @@ __decorateClass$s([
   property()
 ], OdxProgressBar.prototype, "valueText", 2);
 OdxProgressBar = __decorateClass$s([
-  customElement("odx-progress-bar", [styles$r])
+  customElement("odx-progress-bar", [styles$q])
 ], OdxProgressBar);
 
 const ProgressState = {
@@ -3467,7 +3505,7 @@ const ProgressState = {
   ERROR: "error"
 };
 
-const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-light) inset}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-disabled-foreground-selected) inset}}}";
+const styles$p = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-light) inset}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-disabled-foreground-selected) inset}}}";
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -3502,10 +3540,10 @@ let OdxRadioButton = class extends CheckboxFormControl {
   }
 };
 OdxRadioButton = __decorateClass$r([
-  customElement("odx-radio-button", [styles$q])
+  customElement("odx-radio-button", [styles$p])
 ], OdxRadioButton);
 
-const styles$p = "@layer base{:host{display:flex}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}}";
+const styles$o = "@layer base{:host{display:flex}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}}";
 
 var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
@@ -3523,7 +3561,7 @@ __decorateClass$q([
   property({ reflect: true })
 ], OdxRadioGroup.prototype, "variant", 2);
 OdxRadioGroup = __decorateClass$q([
-  customElement("odx-radio-group", [styles$p])
+  customElement("odx-radio-group", [styles$o])
 ], OdxRadioGroup);
 
 const RadioGroupVariant = {
@@ -3531,7 +3569,7 @@ const RadioGroupVariant = {
   LIST: "list"
 };
 
-const styles$o = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
+const styles$n = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
 
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
@@ -3549,7 +3587,7 @@ var __decorateClass$p = (decorators, target, key, kind) => {
 var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
 var __privateGet$8 = (obj, member, getter) => (__accessCheck$a(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$2, _handleControlClick;
+var _handleSlotChange$3, _handleControlClick;
 setTranslation("en", {
   odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
 });
@@ -3560,7 +3598,7 @@ let OdxRailNavigation = class extends IsLocalized(CustomElement) {
   constructor() {
     super(...arguments);
     this.collapsed = false;
-    __privateAdd$a(this, _handleSlotChange$2, () => {
+    __privateAdd$a(this, _handleSlotChange$3, () => {
       for (const item of getAssignedElements(this)) {
         item.size = "lg";
       }
@@ -3571,7 +3609,7 @@ let OdxRailNavigation = class extends IsLocalized(CustomElement) {
   }
   render() {
     return html`
-      <slot @slotchange=${__privateGet$8(this, _handleSlotChange$2)}></slot>
+      <slot @slotchange=${__privateGet$8(this, _handleSlotChange$3)}></slot>
       <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet$8(this, _handleControlClick)} odxPreventTextOverflow>
         <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
         <odx-visually-hidden>
@@ -3584,7 +3622,7 @@ let OdxRailNavigation = class extends IsLocalized(CustomElement) {
     return this.navigationItems;
   }
 };
-_handleSlotChange$2 = new WeakMap();
+_handleSlotChange$3 = new WeakMap();
 _handleControlClick = new WeakMap();
 __decorateClass$p([
   queryAssignedElements({ selector: OdxNavigationItem.selector, flatten: true })
@@ -3593,7 +3631,7 @@ __decorateClass$p([
   property({ type: Boolean, reflect: true })
 ], OdxRailNavigation.prototype, "collapsed", 2);
 OdxRailNavigation = __decorateClass$p([
-  customElement("odx-rail-navigation", [styles$o])
+  customElement("odx-rail-navigation", [styles$n])
 ], OdxRailNavigation);
 
 class SearchEvent extends CustomEvent {
@@ -3607,7 +3645,7 @@ const SearchBarBehavior = {
   SUBMIT: "submit"
 };
 
-const styles$n = ":host{--odx-search-max-inline-size: 35em;display:block;max-width:var(--odx-search-max-inline-size)}";
+const styles$m = ":host{--odx-search-max-inline-size: 35em;display:block;max-width:var(--odx-search-max-inline-size)}";
 
 var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
@@ -3627,7 +3665,7 @@ var __privateGet$7 = (obj, member, getter) => (__accessCheck$9(obj, member, "rea
 var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$9(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$7 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
-var _value, _search, _OdxSearchBar_instances, inputValue_get, _handleSearch, _handleInput, _handleClear, updateValue_fn;
+var _value, _search, _OdxSearchBar_instances, inputValue_get, _handleSearch, _handleInput, _handleClear$1, updateValue_fn;
 let OdxSearchBar = class extends CustomElement {
   constructor() {
     super(...arguments);
@@ -3645,7 +3683,7 @@ let OdxSearchBar = class extends CustomElement {
       event.preventDefault();
       __privateGet$7(this, _search).call(this, __privateGet$7(this, _OdxSearchBar_instances, inputValue_get));
     });
-    __privateAdd$9(this, _handleClear, async (event) => {
+    __privateAdd$9(this, _handleClear$1, async (event) => {
       forwardEvent(this)(event);
       if (event.defaultPrevented) return;
       this.search("");
@@ -3672,12 +3710,13 @@ let OdxSearchBar = class extends CustomElement {
   render() {
     return html`
       <odx-input
+        clearable
         class="input"
         spellcheck="false"
         autocomplete="off"
         placeholder=${this.placeholder}
         type="search"
-        @clear=${__privateGet$7(this, _handleClear)}
+        @clear=${__privateGet$7(this, _handleClear$1)}
         @input=${__privateGet$7(this, _handleInput)}
         @search=${__privateGet$7(this, _handleSearch)}
       >
@@ -3694,7 +3733,7 @@ inputValue_get = function() {
 };
 _handleSearch = new WeakMap();
 _handleInput = new WeakMap();
-_handleClear = new WeakMap();
+_handleClear$1 = new WeakMap();
 updateValue_fn = function(value, updateInput = false) {
   __privateSet$1(this, _value, value);
   if (!updateInput) return;
@@ -3713,10 +3752,10 @@ __decorateClass$o([
   property()
 ], OdxSearchBar.prototype, "placeholder", 2);
 OdxSearchBar = __decorateClass$o([
-  customElement("odx-search-bar", [styles$n])
+  customElement("odx-search-bar", [styles$m])
 ], OdxSearchBar);
 
-const styles$m = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
+const styles$l = "@layer base{:host{--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;align-items:center;padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;block-size:var(--_control-size);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--_padding-block);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}}@layer state{:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);--_color-background: var(--odx-color-disabled-fill);--_color-stroke: var(--odx-color-disabled-stroke);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -3735,23 +3774,48 @@ var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Ca
 var __privateGet$6 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$6 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
-var _OdxSelect_instances, handleMultipleChange_fn, _handleDropdownToggle, _removeChip;
-let OdxSelect = class extends SelectFormControl {
+var _OdxSelect_instances, isClearable_fn, _handleSlotChange$2, _handleChipRemove, _handleClear;
+let OdxSelect = class extends ListboxFormControl {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd$8(this, _OdxSelect_instances);
-    __privateAdd$8(this, _handleDropdownToggle, (event) => {
-      if (event.newState === "open") {
-        this.options[0]?.setActive();
+    this.maxVisibleSelectedOptions = 2;
+    __privateAdd$8(this, _handleSlotChange$2, () => {
+      for (const option of this.options) {
+        option.type = this.multiple ? "checkbox" : null;
       }
     });
-    __privateAdd$8(this, _removeChip, async (option) => {
-      this.toggle(option, false, true);
+    __privateAdd$8(this, _handleChipRemove, (option) => {
+      this.toggleOption(option, false);
     });
+    __privateAdd$8(this, _handleClear, (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.clear();
+    });
+    if (!isServer) {
+      this.addEventListener("change", () => {
+        if (this.multiple || this.autoSelect) return;
+        this.dropdown.hidePopover();
+      });
+      this.addEventListener("blur", () => this.dropdown.hidePopover());
+    }
+  }
+  clear() {
+    if (!__privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this) || this.emit("clear")) return;
+    this.updateValue(void 0);
+    this.focus();
+  }
+  focus() {
+    this.focusableElement.focus();
   }
   render() {
+    const clearButton = when(
+      !this.multiple && __privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this),
+      () => html`<odx-icon-button icon="core::close" size="sm" tabindex="-1"  variant="ghost" @click=${__privateGet$6(this, _handleClear)}></odx-icon-button>`
+    );
     return html`
-      <div class="base" id="select-trigger" tabindex="0">
+      <div id="select-trigger" class="base" tabindex="0">
         <div class="value" odxPreventTextOverflow>
           ${when(
       Array.from(this.selectedOptions).length,
@@ -3759,56 +3823,50 @@ let OdxSelect = class extends SelectFormControl {
       () => html`<slot name="placeholder">Select options</slot>`
     )}
         </div>
+        ${clearButton}
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
       </div>
-      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} matchReferenceWidth @toggle=${__privateGet$6(this, _handleDropdownToggle)}>
-        <slot @slotchange=${__privateMethod$6(this, _OdxSelect_instances, handleMultipleChange_fn)}></slot>
+      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width>
+        <slot @slotchange=${__privateGet$6(this, _handleSlotChange$2)}></slot>
       </odx-dropdown>
     `;
   }
   renderSelectedOptions() {
     const selectedOptions = Array.from(this.selectedOptions);
-    if (this.multiple) {
-      const maxOptions = 2;
-      const visibleOptions = selectedOptions.slice(0, maxOptions);
-      const showExtra = selectedOptions.length > maxOptions;
-      return html`
-        ${repeat(
-        visibleOptions,
-        (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
-      )}
-        ${when(showExtra, () => html`<odx-chip>+${selectedOptions.length - maxOptions}</odx-chip>`)}
-      `;
-    }
-    this.dropdownElement.hidePopover();
-    return html`${selectedOptions[0]?.getTextLabel()}`;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("multiple")) {
-      __privateMethod$6(this, _OdxSelect_instances, handleMultipleChange_fn).call(this);
+    if (!this.multiple) {
+      return html`${selectedOptions[0]?.label}`;
     }
+    const renderChip = (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _handleChipRemove).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`;
+    return html`
+      ${repeat(selectedOptions.slice(0, this.maxVisibleSelectedOptions), renderChip)}
+      ${when(selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip>+${selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
+    `;
   }
 };
 _OdxSelect_instances = new WeakSet();
-handleMultipleChange_fn = function() {
-  for (const option of this.options) {
-    option.type = this.multiple ? "checkbox" : null;
-  }
+isClearable_fn = function() {
+  return !this.disabled && !this.readonly && !this.required && !!this.value;
 };
-_handleDropdownToggle = new WeakMap();
-_removeChip = new WeakMap();
+_handleSlotChange$2 = new WeakMap();
+_handleChipRemove = new WeakMap();
+_handleClear = new WeakMap();
 __decorateClass$n([
-  queryAssignedElements({ selector: OdxOption.selector, flatten: true })
+  query(".base", true)
+], OdxSelect.prototype, "focusableElement", 2);
+__decorateClass$n([
+  queryAssignedElements({ selector: '[role="option"]', flatten: true })
 ], OdxSelect.prototype, "options", 2);
 __decorateClass$n([
   query(OdxDropdown.selector, true)
-], OdxSelect.prototype, "dropdownElement", 2);
+], OdxSelect.prototype, "dropdown", 2);
+__decorateClass$n([
+  property({ type: Number })
+], OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
 OdxSelect = __decorateClass$n([
-  customElement("odx-select", [styles$m])
+  customElement("odx-select", [styles$l])
 ], OdxSelect);
 
-const styles$l = "@layer base{:host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-75);display:block;margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space)}.base{display:flex;align-items:center;column-gap:var(--odx-size-37);&:before,&:after{content:\"\";display:block;flex:1 1 auto;block-size:var(--size);background-color:var(--color);pointer-events:none}}}@layer variants{:host([vertical]){margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size));.base{flex-direction:column;&:after,&:before{min-block-size:calc(var(--min-size) / 2);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size)}}}:host(:not([vertical])){.base{&:after,&:before{min-inline-size:calc(var(--min-size) / 2)}}}:host([highlight]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}:host([empty-slot]) .base{gap:0}}";
+const styles$k = "@layer base{:host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--margin-block: var(--odx-size-75);--margin-inline: var(--odx-size-12);display:block;margin-block:calc(var(--margin-block) - .5 * var(--size));margin-inline:var(--margin-inline);transition:var(--odx-transition-default);transition-property:opacity}.base{display:flex;align-items:center;column-gap:var(--odx-size-37);&:before,&:after{content:\"\";display:block;flex:1 1 auto;block-size:var(--size);background-color:var(--color);pointer-events:none}}}@layer variants{:host([vertical]){margin-block:var(--margin-block);margin-inline:calc(var(--margin-inline) - .5 * var(--size));.base{flex-direction:column;&:after,&:before{min-block-size:calc(var(--min-size) / 2);block-size:calc(100% - var(--margin-block) * 2);inline-size:var(--size)}}}:host(:not([vertical])){.base{&:after,&:before{min-inline-size:calc(var(--min-size) / 2)}}}:host([highlight]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}:host([empty-slot]) .base{gap:0}}";
 
 var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -3850,7 +3908,7 @@ __decorateClass$m([
   property({ type: Boolean, reflect: true })
 ], OdxSeparator.prototype, "vertical", 2);
 OdxSeparator = __decorateClass$m([
-  customElement("odx-separator", [styles$l])
+  customElement("odx-separator", [styles$k])
 ], OdxSeparator);
 
 const SeparatorAlign = {
@@ -3858,7 +3916,7 @@ const SeparatorAlign = {
   END: "end"
 };
 
-const styles$k = "@layer base{:host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-disabled-fill);display:block;inline-size:var(--inline-size);block-size:var(--_block-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);block-size:100%;background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-palette-blue-80-15) 50%,transparent 66%);background-size:200% 100%;background-position:150% 100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([emphasized]){--_color-fill: var(--odx-color-disabled-fill-selected)}:host([muted]) .base{animation:none}}";
+const styles$j = "@layer base{:host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-disabled-fill);display:block;inline-size:var(--inline-size);block-size:var(--_block-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);block-size:100%;background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-palette-blue-80-15) 50%,transparent 66%);background-size:200% 100%;background-position:150% 100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([emphasized]){--_color-fill: var(--odx-color-disabled-fill-selected)}:host([muted]) .base{animation:none}}";
 
 var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
@@ -3893,7 +3951,7 @@ __decorateClass$l([
   property({ type: String, reflect: true })
 ], OdxSkeleton.prototype, "size", 2);
 OdxSkeleton = __decorateClass$l([
-  customElement("odx-skeleton", [styles$k])
+  customElement("odx-skeleton", [styles$j])
 ], OdxSkeleton);
 
 const SkeletonSize = {
@@ -3907,7 +3965,7 @@ const SkeletonShape = {
   RECTANGLE: "rectangle"
 };
 
-const styles$j = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
+const styles$i = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
 
 const SliderLabelVisibility = {
   AUTO: "auto",
@@ -4038,7 +4096,7 @@ findClosestValue_fn = function(value) {
   return __privateMethod$5(this, _OdxSliderHandle_instances, limitValue_fn).call(this, closestValue + (isNextValue ? this.context.step : 0));
 };
 updatePosition_fn = function(value) {
-  const valuePercentage = `${round(clamp((value - this.context.min) / this.context.range, 0, 1) * 100, 3)}%`;
+  const valuePercentage = `${round(Math.min(Math.max(0, (value - this.context.min) / this.context.range), 1) * 100, 3)}%`;
   this.style.setProperty("--_position", valuePercentage);
   __privateGet$5(this, _nextHandle)?.style.setProperty("--_previous-position", valuePercentage);
   __privateGet$5(this, _previousHandle)?.style.setProperty("--_next-position", valuePercentage);
@@ -4047,12 +4105,12 @@ getValueFromPosition_fn = function(position) {
   return __privateMethod$5(this, _OdxSliderHandle_instances, limitValue_fn).call(this, __privateMethod$5(this, _OdxSliderHandle_instances, calculateValue_fn).call(this, position.x));
 };
 calculateValue_fn = function(relativePosition) {
-  return clamp(relativePosition / 100, 0, 1) * this.context.range + this.context.min;
+  return Math.min(Math.max(0, relativePosition / 100), 1) * this.context.range + this.context.min;
 };
 limitValue_fn = function(value) {
   const startLimit = __privateGet$5(this, _previousHandle) ? Math.max(__privateGet$5(this, _previousHandle).value, this.min - this.minRange) + this.minRange : this.min;
   const endLimit = __privateGet$5(this, _nextHandle) ? Math.min(__privateGet$5(this, _nextHandle).value, this.max + this.minRange) - this.minRange : this.max;
-  return clamp(value, startLimit, endLimit);
+  return Math.min(Math.max(startLimit, value), endLimit);
 };
 findPreviousHandle_fn = function() {
   let sibling = this.previousElementSibling;
@@ -4077,10 +4135,10 @@ __decorateClass$k([
   property()
 ], OdxSliderHandle.prototype, "trackVisibility", 2);
 OdxSliderHandle = __decorateClass$k([
-  customElement("odx-slider-handle", [styles$j])
+  customElement("odx-slider-handle", [styles$i])
 ], OdxSliderHandle);
 
-const styles$i = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: var(--odx-size-12);display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
+const styles$h = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: var(--odx-size-12);display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
 
 var __defProp$j = Object.defineProperty;
 var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
@@ -4131,10 +4189,10 @@ __decorateClass$j([
   property({ type: Boolean, reflect: true })
 ], OdxSliderMarks.prototype, "showLabels", 2);
 OdxSliderMarks = __decorateClass$j([
-  customElement("odx-slider-marks", [styles$i])
+  customElement("odx-slider-marks", [styles$h])
 ], OdxSliderMarks);
 
-const styles$h = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;min-height:var(--odx-size-300);padding-block-start:var(--odx-size-75);padding-block-end:var(--odx-size-50);padding-inline:var(--odx-size-75);cursor:pointer}:host(:active){cursor:grabbing}:host::part(container){block-size:var(--_track-size);position:relative;background-color:var(--odx-palette-coolgray-40);border-radius:var(--odx-border-radius-sm)}";
+const styles$g = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;min-height:var(--odx-size-300);padding-block-start:var(--odx-size-75);padding-block-end:var(--odx-size-50);padding-inline:var(--odx-size-75);cursor:pointer}:host(:active){cursor:grabbing}:host::part(container){block-size:var(--_track-size);position:relative;background-color:var(--odx-palette-coolgray-40);border-radius:var(--odx-border-radius-sm)}";
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -4179,8 +4237,8 @@ let OdxSlider = class extends CustomElement {
     });
     __privateAdd$6(this, _handleSlotChange$1, async () => {
       const elements = this.dragController.draggableElements;
-      const min = minBy(elements, (elment) => elment.min)?.min ?? 0;
-      const max = maxBy(elements, (element) => element.max)?.max ?? 1;
+      const min = elements.reduce((min2, element) => Math.min(min2, element.min), Number.POSITIVE_INFINITY);
+      const max = elements.reduce((max2, element) => Math.max(max2, element.max ?? 0), Number.NEGATIVE_INFINITY);
       this.context = { ...this.context, min, max, range: Math.abs(max - min) };
     });
     if (!isServer) {
@@ -4241,10 +4299,10 @@ __decorateClass$i([
   property()
 ], OdxSlider.prototype, "unit", 1);
 OdxSlider = __decorateClass$i([
-  customElement("odx-slider", [styles$h])
+  customElement("odx-slider", [styles$g])
 ], OdxSlider);
 
-const styles$g = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}";
+const styles$f = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}";
 
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
@@ -4277,10 +4335,10 @@ __decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxSpacer.prototype, "fill", 2);
 OdxSpacer = __decorateClass$h([
-  customElement("odx-spacer", [styles$g])
+  customElement("odx-spacer", [styles$f])
 ], OdxSpacer);
 
-const styles$f = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground-base);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
+const styles$e = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground-base);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
 
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
@@ -4367,11 +4425,9 @@ __decorateClass$g([
   property({ type: Boolean, reflect: true })
 ], OdxSpinbox.prototype, "compact", 2);
 OdxSpinbox = __decorateClass$g([
-  customElement("odx-spinbox", [styles$f])
+  customElement("odx-spinbox", [styles$e])
 ], OdxSpinbox);
 
-const styles$e = ":host{--gap: 0;display:flex;flex-direction:row;max-inline-size:100%;inline-size:100%;gap:var(--gap)}:host([vertical]){flex-direction:column}:host([wrap]){flex-wrap:wrap}:host([gap=\"none\"]){--gap: 0}:host([gap=\"xs\"]){--gap: var(--odx-size-25)}:host([gap=\"sm\"]){--gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--gap: var(--odx-size-75)}:host([gap=\"lg\"]){--gap: var(--odx-size-150)}:host([gap=\"xl\"]){--gap: var(--odx-size-225)}:host,:host([align=\"start\"]){align-items:flex-start}:host([align=\"end\"]){align-items:end}:host([align=\"center\"]){align-items:center}:host([align=\"stretch\"]){align-items:stretch}:host([justify=\"center\"]){justify-content:center}:host,:host([justify=\"start\"]){justify-content:flex-start}:host([justify=\"end\"]){justify-content:flex-end}:host([justify=\"stretch\"]){justify-content:stretch}:host([justify=\"space-between\"]){justify-content:space-between}:host([justify=\"space-around\"]){justify-content:space-around}:host([justify=\"space-evenly\"]){justify-content:space-evenly}";
-
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$f = (decorators, target, key, kind) => {
@@ -4385,36 +4441,42 @@ var __decorateClass$f = (decorators, target, key, kind) => {
 let OdxStack = class extends CustomElement {
   constructor() {
     super(...arguments);
-    this.vertical = false;
+    this.horizontal = false;
     this.wrap = false;
   }
-  render() {
-    return html`<slot></slot>`;
+  updated(props) {
+    super.updated(props);
+    this.classList.toggle("odx-stack-wrap", this.wrap);
+    this.classList.toggle("odx-stack-horizontal", this.horizontal);
+    this.classList.toggle(`odx-align-${this.align}`, !!this.align);
+    this.classList.toggle(`odx-gap-${this.gap}`, !!this.gap);
+    this.classList.toggle(`odx-justify-${this.justify}`, !!this.justify);
+    this.classList.toggle("odx-stack", true);
   }
 };
 __decorateClass$f([
-  property({ attribute: "align-items", reflect: true })
+  property({ reflect: true })
 ], OdxStack.prototype, "align", 2);
 __decorateClass$f([
-  property({ attribute: "justify-content", reflect: true })
+  property({ reflect: true })
 ], OdxStack.prototype, "justify", 2);
 __decorateClass$f([
   property({ reflect: true })
 ], OdxStack.prototype, "gap", 2);
 __decorateClass$f([
   property({ type: Boolean, reflect: true })
-], OdxStack.prototype, "vertical", 2);
+], OdxStack.prototype, "horizontal", 2);
 __decorateClass$f([
   property({ type: Boolean, reflect: true })
 ], OdxStack.prototype, "wrap", 2);
 OdxStack = __decorateClass$f([
-  customElement("odx-stack", [styles$e])
+  customElement("odx-stack")
 ], OdxStack);
 
 const StackAlign = {
   START: "start",
-  END: "end",
-  CENTER: "center"
+  CENTER: "center",
+  END: "end"
 };
 const StackGap = {
   NONE: "none",
@@ -4711,12 +4773,12 @@ let OdxTableRow = class extends CanBeDisabled(CustomElement) {
       <slot @change=${__privateGet$2(this, _handleChange$1)} @slotchange=${__privateMethod$2(this, _OdxTableRow_instances, handleSlotchange_fn)}></slot>
     `;
   }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("selected")) {
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("selected")) {
       __privateMethod$2(this, _OdxTableRow_instances, handleSelectedChange_fn).call(this);
     }
-    if (changes.has("selectable")) {
+    if (props.has("selectable")) {
       __privateMethod$2(this, _OdxTableRow_instances, handleSelectableChange_fn).call(this);
     }
   }
@@ -4859,7 +4921,7 @@ const tableContext = {
   defaultValue: { hasCheckboxes: true }
 };
 
-const styles$5 = ":host{display:block;text-decoration:inherit;color:var(--_color, inherit);font-size:var(--_font-size, inherit);line-height:var(--_line-height, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}:host([size=\"lg\"]){--_font-size: var(--odx-typography-font-size-4);--_line-height: var(--odx-typography-line-height-4)}";
+const styles$5 = ":host{display:block;text-decoration:inherit;color:var(--_color, inherit);font-size:var(--_font-size, inherit);line-height:var(--_line-height, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}:host([size=\"lg\"]){--_font-size: var(--odx-typography-font-size-4);--_line-height: var(--odx-typography-line-height-4)}:host([variant=\"highlight\"]){--_color: var(--odx-color-highlight-rest)}";
 
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
@@ -4898,7 +4960,7 @@ const TextSize = {
 };
 const TextVariant = {
   HINT: "hint",
-  ACCENT: "info",
+  HIGHLIGHT: "highlight",
   DANGER: "danger"
 };
 
@@ -4933,7 +4995,7 @@ const ToastVariant = {
   DANGER: "danger"
 };
 
-const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground-base);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
+const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground-base);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}";
 
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
@@ -4981,7 +5043,7 @@ OdxToggleButton = __decorateClass$4([
   customElement("odx-toggle-button", [styles$3])
 ], OdxToggleButton);
 
-const styles$2 = "@layer base{:host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}.base{overflow:hidden}.content{transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}::slotted(*){background-color:transparent}}@layer state{:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}}";
+const styles$2 = "@layer base{:host{--offset-y: -100%;--transition: var(--odx-transition-default);display:grid;grid-template-rows:1fr;transition:var(--transition)}.base{overflow:hidden}.content{transition:var(--transition)}}@layer state{:host([hidden]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--offset-y));visibility:hidden}}}";
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -4996,7 +5058,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
 let OdxToggleContent = class extends CustomElement {
   constructor() {
     super(...arguments);
-    this.expanded = false;
+    this.hidden = false;
   }
   render() {
     return html`
@@ -5007,16 +5069,10 @@ let OdxToggleContent = class extends CustomElement {
       </div>
     `;
   }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("expanded")) {
-      this.ariaHidden = toAriaBooleanAttribute(!this.expanded);
-    }
-  }
 };
 __decorateClass$3([
   property({ type: Boolean, reflect: true })
-], OdxToggleContent.prototype, "expanded", 2);
+], OdxToggleContent.prototype, "hidden", 2);
 OdxToggleContent = __decorateClass$3([
   customElement("odx-toggle-content", [styles$2])
 ], OdxToggleContent);
@@ -5048,7 +5104,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _OdxTooltip_instances, addKeyboardListeners_fn, removeKeyboardListeners_fn, addMouseListeners_fn, removeMouseListeners_fn, updateAriaAttributes_fn, _handleReferenceMouseLeave, _handleMouseEvents, _handleKeyboardFocus;
-let OdxTooltip = class extends PopoverHost(CustomElement) {
+let OdxTooltip = class extends PopoverHost {
   constructor() {
     super(...arguments);
     __privateAdd(this, _OdxTooltip_instances);
@@ -5194,4 +5250,4 @@ OdxVisuallyHidden = __decorateClass([
   customElement("odx-visually-hidden", [styles])
 ], OdxVisuallyHidden);
 
-export { AnchorObserver, AreaHeaderSize, AreaHeaderVariant, AvatarSize, AvatarVariant, BadgeType, BadgeVariant, BaseButton, BaseFormat, BaseLink, ButtonSize, ButtonVariant, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageType, InlineMessageVariant, InputVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalVariant, NavigationItemSize, OdxAccordion, OdxAccordionHeader, OdxAccordionPanel, OdxActionGroup, OdxAnchorNavigation, OdxAreaHeader, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressState, RadioGroupVariant, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
+export { AnchorObserver, AreaHeaderSize, AreaHeaderVariant, AvatarSize, AvatarVariant, BadgeType, BadgeVariant, BaseFormat, BaseLink, ButtonBadgeAlign, ButtonLoaderSlot, ButtonSize, ButtonVariant, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageType, InlineMessageVariant, InputVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalVariant, NavigationItemSize, OdxAccordion, OdxAccordionHeader, OdxAccordionPanel, OdxActionGroup, OdxAnchorNavigation, OdxAreaHeader, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxCombobox, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressState, RadioGroupVariant, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };