@odx/foundation 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/elements.js

@@ -1,4 +1,4 @@
-import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, optionalSlot, FormControl, toggleAttribute, getElementFromEvent, SharedResizeObserver, getUniqueId, WithLoadingState, waitForAnimations, emptySlotFallbackFix, FocusTrapController, RovingTabindexController, optionalAttr, NumberControl } from '@odx/foundation';
+import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, optionalSlot, toggleAttribute, getElementFromEvent, SharedResizeObserver, getUniqueId, WithLoadingState, waitForAnimations, emptySlotFallbackFix, FocusTrapController, RovingTabindexController, optionalAttr, SelectControl, NumberControl, CheckboxControl } from '@odx/foundation';
 import { html, isServer, nothing } from 'lit';
 import { property, queryAssignedElements, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
@@ -6,20 +6,21 @@ import { PopoverPlacement, PopoverHost, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, D
 import { B as BaseLink } from './base-link-CvZZE13a.js';
 import { clamp, round } from 'es-toolkit';
 import { styleMap } from 'lit/directives/style-map.js';
+import { OdxOptionComponent } from '@odx/foundation/components';
 import { repeat } from 'lit/directives/repeat.js';
 import { createContext, consume, provide } from '@lit/context';
 import { minBy, maxBy } from 'es-toolkit/array';
 
-const styles$E = ":host{--_fill-color: transparent;display:flex;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-sm);background-color:var(--_fill-color);margin-block:calc(.5 * var(--odx-size-75));padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);cursor:pointer;transition:var(--odx-transition-default);user-select:none;place-items:center;outline:var(--odx-border-width-md) solid transparent;outline-offset:var(--odx-size-px)}:host::part(indicator){display:block;margin-inline-start:auto;block-size:var(--odx-size-150);aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform;font-size:var(--odx-size-150)}:host(:not([disabled]):hover){--_fill-color: var(--odx-color-misc-transparent-hover)}:host([disabled]:not([disabled=\"false\"])){cursor:default;color:var(--odx-color-disabled-foreground)}:host([aria-expanded]:not([aria-expanded=\"false\"])){margin-block-end:0;[part=indicator]{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-color-focus-outer)}";
+const styles$z = ":host{--_fill-color: transparent;display:flex;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-sm);background-color:var(--_fill-color);margin-block:calc(.5 * var(--odx-size-75));padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);cursor:pointer;transition:var(--odx-transition-default);user-select:none;place-items:center;outline:var(--odx-border-width-md) solid transparent;outline-offset:var(--odx-size-px)}:host::part(indicator){display:block;margin-inline-start:auto;block-size:var(--odx-size-150);aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform;font-size:var(--odx-size-150)}:host(:not([disabled]):hover){--_fill-color: var(--odx-color-misc-transparent-hover)}:host([disabled]:not([disabled=\"false\"])){cursor:default;color:var(--odx-color-disabled-foreground)}:host([aria-expanded]:not([aria-expanded=\"false\"])){margin-block-end:0;[part=indicator]{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-color-focus-outer)}";
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(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$v(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
@@ -68,18 +69,18 @@ let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
     `;
   }
 };
-__decorateClass$L([
+__decorateClass$C([
   property({ type: Boolean })
 ], OdxAccordionHeaderElement.prototype, "expanded", 1);
-OdxAccordionHeaderElement = __decorateClass$L([
-  customElement("odx-accordion-header", [styles$E])
+OdxAccordionHeaderElement = __decorateClass$C([
+  customElement("odx-accordion-header", [styles$z])
 ], OdxAccordionHeaderElement);
 
-const styles$D = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow);border-bottom:var(--odx-border-width-sm) solid transparent;margin-block-start:calc(-1 * var(--odx-border-width-sm))}:host::part(container){overflow:hidden}:host::part(content){padding:var(--odx-size-50);transition:var(--odx-transition-slow)}:host(:not(:last-of-type)){border-bottom-color:var(--odx-color-selection-control-stroke)}:host([aria-hidden]:not([aria-hidden=\"false\"])){grid-template-rows:0fr;[part=content]{opacity:0;transform:translateY(calc(-1 * var(--odx-size-75)));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+const styles$y = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow);border-bottom:var(--odx-border-width-sm) solid transparent;margin-block-start:calc(-1 * var(--odx-border-width-sm))}:host::part(container){overflow:hidden}:host::part(content){padding:var(--odx-size-50);transition:var(--odx-transition-slow)}:host(:not(:last-of-type)){border-bottom-color:var(--odx-color-selection-control-stroke)}:host([aria-hidden]:not([aria-hidden=\"false\"])){grid-template-rows:0fr;[part=content]{opacity:0;transform:translateY(calc(-1 * var(--odx-size-75)));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
 
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -96,44 +97,44 @@ let OdxAccordionPanelElement = class extends CustomElement {
     `;
   }
 };
-OdxAccordionPanelElement = __decorateClass$K([
-  customElement("odx-accordion-panel", [styles$D])
+OdxAccordionPanelElement = __decorateClass$B([
+  customElement("odx-accordion-panel", [styles$y])
 ], OdxAccordionPanelElement);
 
-const styles$C = ":host{display:block;overflow:hidden}:host-context(odx-accordion-panel){margin-block:calc(-.5 * var(--odx-size-75));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+const styles$x = ":host{display:block;overflow:hidden}:host-context(odx-accordion-panel){margin-block:calc(-.5 * var(--odx-size-75));margin-inline-end:calc(-1 * var(--odx-size-50))}";
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __typeError$k = (msg) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __typeError$h = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(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$u(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-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 __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
+var __privateGet$f = (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, _handleExpand, _handleKeyboardEvent$2;
 let OdxAccordionElement = class extends CustomElement {
   constructor() {
     super();
     this.multiple = false;
-    __privateAdd$k(this, _handleClick$4, (event) => {
+    __privateAdd$h(this, _handleClick$4, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement)) return;
       event.target.toggle();
     });
-    __privateAdd$k(this, _handleExpand, (event) => {
+    __privateAdd$h(this, _handleExpand, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement) || this.multiple) return;
       this.toggleAll(false, event.target);
     });
-    __privateAdd$k(this, _handleKeyboardEvent$2, (event) => {
+    __privateAdd$h(this, _handleKeyboardEvent$2, (event) => {
       const { actions } = getKeyboardEventInfo(event);
       if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderElement)) return;
       event.preventDefault();
@@ -142,10 +143,10 @@ let OdxAccordionElement = class extends CustomElement {
       event.target.toggle();
     });
     if (!isServer) {
-      this.addEventListener("click", __privateGet$g(this, _handleClick$4));
-      this.addEventListener("expand", __privateGet$g(this, _handleExpand));
-      this.addEventListener("keydown", __privateGet$g(this, _handleKeyboardEvent$2));
-      this.addEventListener("keyup", __privateGet$g(this, _handleKeyboardEvent$2));
+      this.addEventListener("click", __privateGet$f(this, _handleClick$4));
+      this.addEventListener("expand", __privateGet$f(this, _handleExpand));
+      this.addEventListener("keydown", __privateGet$f(this, _handleKeyboardEvent$2));
+      this.addEventListener("keyup", __privateGet$f(this, _handleKeyboardEvent$2));
     }
   }
   toggleAll(forceState, ...exceptElements) {
@@ -168,21 +169,21 @@ let OdxAccordionElement = class extends CustomElement {
 _handleClick$4 = new WeakMap();
 _handleExpand = new WeakMap();
 _handleKeyboardEvent$2 = new WeakMap();
-__decorateClass$J([
+__decorateClass$A([
   queryAssignedElements({ selector: OdxAccordionHeaderElement.selector, flatten: true })
 ], OdxAccordionElement.prototype, "controls", 2);
-__decorateClass$J([
+__decorateClass$A([
   property({ type: Boolean })
 ], OdxAccordionElement.prototype, "multiple", 2);
-OdxAccordionElement = __decorateClass$J([
-  customElement("odx-accordion", [styles$C])
+OdxAccordionElement = __decorateClass$A([
+  customElement("odx-accordion", [styles$x])
 ], OdxAccordionElement);
 
-const styles$B = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-surface);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\"}:host::part(header-actions),:host::part(title-container){display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}:host::part(title-container){grid-area:title}:host::part(header-actions){grid-area:header-actions}:host::part(avatar-container){display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}:host::part(image-container){grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}:host::part(image-container):after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-fill-focus);opacity:0;pointer-events:none;transition:var(--odx-transition-base);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)::part(image-container):after{opacity:1}";
+const styles$w = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-surface);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\"}:host::part(header-actions),:host::part(title-container){display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}:host::part(title-container){grid-area:title}:host::part(header-actions){grid-area:header-actions}:host::part(avatar-container){display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}:host::part(image-container){grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}:host::part(image-container):after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-fill-focus);opacity:0;pointer-events:none;transition:var(--odx-transition-base);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)::part(image-container):after{opacity:1}";
 
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -201,351 +202,41 @@ let CardElement = class extends CanBeDisabled(CustomElement) {
     `;
   }
 };
-CardElement = __decorateClass$I([
-  customElement("odx-card", [styles$B])
+CardElement = __decorateClass$z([
+  customElement("odx-card", [styles$w])
 ], CardElement);
 
-var __defProp$t = Object.defineProperty;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$t(target, key, result);
-  return result;
-};
-const CHECKED_STATE_KEY = "checked";
-const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
-class CheckboxControl extends FormControl(CustomElement) {
-  constructor() {
-    super();
-    this.checked = false;
-    this.#handleClick = ({ target }) => {
-      const { localName } = target;
-      if (LINK_SELECTORS.has(localName)) return;
-      this.toggle(void 0, true);
-    };
-    this.#handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
-      const { localName } = event.target;
-      event.preventDefault();
-      if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
-      this.toggle(void 0, true);
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeyboardEvent);
-      this.addEventListener("keyup", this.#handleKeyboardEvent);
-    }
-  }
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: false
-    };
-  }
-  toggle(state, emitEvent = false) {
-    const currentState = this.checked;
-    const newState = state ?? !currentState;
-    if (this.disabled || this.readonly || newState === currentState) return;
-    this.checked = newState;
-    if (!emitEvent || !this.emit("change")) return;
-    this.checked = currentState;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.internals.role = "checkbox";
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("checked")) {
-      this.#handleCheckedChange();
-    }
-    if (changes.has("value")) {
-      this.#handleValueChange();
-    }
-  }
-  #handleCheckedChange() {
-    if (this.checked) {
-      this.states.add(CHECKED_STATE_KEY);
-    } else {
-      this.states.delete(CHECKED_STATE_KEY);
-    }
-    this.internals.ariaChecked = toAriaBooleanAttribute(this.checked);
-    this.ariaChecked = toAriaBooleanAttribute(this.checked);
-  }
-  #handleValueChange() {
-    if (this.value) {
-      this.internals.setFormValue(this.checked ? this.value : null);
-    } else {
-      this.internals.setFormValue(this.checked ? "on" : null);
-    }
-  }
-  #handleClick;
-  #handleKeyboardEvent;
-}
-__decorateClass$H([
-  property({ type: Boolean, reflect: true })
-], CheckboxControl.prototype, "checked");
-
-const styles$A = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-selection-control-color-fill);--_indicator-color-border: var(--odx-selection-control-color-border);--_indicator-color-text: transparent;--_label-color-text: 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-selection-control-border-radius);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(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-selection-control-border-radius);background-color:var(--_indicator-color-fill);border:var(--odx-selection-control-border);border-color:var(--_indicator-color-border);color:var(--_indicator-color-text);font-size:var(--odx-font-size-text-lg);transition-property:background-color,border-color}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-fill: var(--odx-selection-control-color-fill-hover)}:host(:active){--_indicator-color-fill: var(--odx-selection-control-color-fill-down)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host(:is(:state(checked),:state(indeterminate))){--_indicator-color-fill: var(--odx-selection-control-color-fill-selected);--_indicator-color-text: var(--odx-selection-control-color-text-selected);--_indicator-color-border: var(--_indicator-color-fill)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-selection-control-color-fill-disabled);--_indicator-color-text: var(--odx-selection-control-color-text-disabled);--_indicator-color-border: var(--odx-selection-control-color-border-disabled);--_label-color-text: var(--odx-color-text-disabled)}:host([disabled]:not([disabled=\"false\"]):is(:state(checked),:state(indeterminate))){--_indicator-color-fill: var(--odx-selection-control-color-fill-disabled-selected);--_indicator-color-text: var(--odx-selection-control-color-text-disabled-selected);--_indicator-color-border: var(--_indicator-color-fill)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-selection-control-color-fill-readonly);--_indicator-color-text: var(--odx-selection-control-color-text-readonly);--_indicator-color-border: var(--odx-selection-control-color-border);cursor:default}:host([readonly]:not([readonly=\"false\"]):is(:state(checked),:state(indeterminate))){--_indicator-color-fill: var(--odx-selection-control-color-fill-readonly-selected);--_indicator-color-text: var(--odx-selection-control-color-text-readonly-selected);--_indicator-color-border: var(--odx-selection-control-color-border)}";
-
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __typeError$j = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(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$s(target, key, result);
-  return result;
-};
-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$8 = (obj, member, method) => (__accessCheck$j(obj, member, "access private method"), method);
-var _OdxCheckboxElement_instances, handleIndeterminateChange_fn;
-const INDETERMINATE_STATE_KEY = "indeterminate";
-let OdxCheckboxElement = class extends CheckboxControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd$j(this, _OdxCheckboxElement_instances);
-    this.indeterminate = false;
-  }
-  render() {
-    return html`
-      <div part="indicator">
-        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
-      </div>
-      <div part="content">
-        <div part="label">
-          <slot></slot>
-        </div>
-        <div part="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("indeterminate")) {
-      __privateMethod$8(this, _OdxCheckboxElement_instances, handleIndeterminateChange_fn).call(this);
-    }
-  }
-  toggle(state, dispatchEvent = false) {
-    super.toggle(state, dispatchEvent);
-    if (this.disabled || this.readonly) return;
-    this.indeterminate = false;
-  }
-};
-_OdxCheckboxElement_instances = new WeakSet();
-handleIndeterminateChange_fn = function() {
-  if (this.indeterminate) {
-    this.internals.states.add(INDETERMINATE_STATE_KEY);
-    this.internals.ariaChecked = "mixed";
-  } else {
-    this.internals.states.delete(INDETERMINATE_STATE_KEY);
-  }
-};
-__decorateClass$G([
-  property({ type: Boolean, reflect: true })
-], OdxCheckboxElement.prototype, "indeterminate", 2);
-OdxCheckboxElement = __decorateClass$G([
-  customElement("odx-checkbox", [styles$A])
-], OdxCheckboxElement);
-
-var __defProp$r = Object.defineProperty;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$r(target, key, result);
-  return result;
-};
-const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
-const _CheckboxGroupControl = class _CheckboxGroupControl extends FormControl(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.value = [];
-    this.#handleChangeEvent = (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      if (target.checked) {
-        this.updateValue([...this.value, target.value], true);
-        return;
-      }
-      this.updateValue(
-        this.value.filter((value) => value !== target.value),
-        true
-      );
-    };
-  }
-  get childGroups() {
-    return this.elements.filter((element) => element instanceof _CheckboxGroupControl);
-  }
-  get controls() {
-    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
-  }
-  get groupControls() {
-    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.addEventListener("change", this.#handleChangeEvent);
-  }
-  toFormValue() {
-    const formData = new FormData();
-    this.value.forEach((value, index) => {
-      formData.append(`${this.name}[${index}]`, value);
-    });
-    return formData;
-  }
-  isIndeterminate() {
-    return this.value.length > 0 && this.value.length < this.controls.length;
-  }
-  isControl(element) {
-    return element instanceof CheckboxControl;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
-      });
-      for (const groupControl of this.groupControls) {
-        if (groupControl instanceof CheckboxControl && "indeterminate" in groupControl) {
-          groupControl.indeterminate = this.isIndeterminate();
-          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
-        }
-      }
-    }
-    if (props.has("name")) {
-      this.updateCheckboxControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (props.has("disabled")) {
-      this.updateCheckboxControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (props.has("readonly")) {
-      this.updateCheckboxControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-  }
-  updateCheckboxControls(updateFn) {
-    this.controls.forEach(updateFn);
-  }
-  updateValue(value, dispatchEvent) {
-    this.value = value;
-    if (!dispatchEvent) return;
-    this.emit("change");
-  }
-  #handleChangeEvent;
-  #findCheckboxControls(predicate) {
-    return this.elements.filter((element) => this.isControl(element) && predicate(element));
-  }
-};
-__decorateClass$F([
-  queryAssignedElements({ flatten: true })
-], _CheckboxGroupControl.prototype, "elements");
-__decorateClass$F([
-  property({ type: Array })
-], _CheckboxGroupControl.prototype, "value");
-let CheckboxGroupControl = _CheckboxGroupControl;
-
-const styles$z = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-sm);border-color:var(--odx-color-fill-disabled);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
+const styles$v = ":host{--color-fill: var(--odx-color-neutral);--color-fill-hover: var(--odx-color-neutral-hover);--color-text: 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-fill);color:var(--color-text);cursor:default;padding-inline:var(--odx-size-50);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);transition:var(--odx-transition-reduced)}:host::part(content){min-inline-size:var(--odx-size-150);user-select:none}[part=action],::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;transition:var(--odx-transition-reduced)}[part=action]{background-color:transparent;border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}[part=action]:hover{background-color:var(--odx-color-fill-focus)}:host([variant=\"primary\"]){--color-fill: var(--odx-color-primary);--color-text: var(--odx-color-primary-text)}:host([variant=\"neutral\"]){--color-fill: var(--odx-color-neutral);--color-text: var(--odx-color-neutral-text)}:host([variant=\"accent\"]){--color-fill: var(--odx-color-accent);--color-text: var(--odx-color-accent-text)}:host([variant=\"success\"]){--color-fill: var(--odx-color-success);--color-text: var(--odx-color-success-text)}:host([variant=\"warning\"]){--color-fill: var(--odx-color-warning);--color-text: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--color-fill: var(--odx-color-danger);--color-text: var(--odx-color-danger-text)}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--color-fill: var(--color-fill-hover)}";
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __typeError$i = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(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$q(target, key, result);
-  return result;
-};
-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 _handleSlotChange$4, _handleGroupControlChange;
-let OdxCheckboxGroupElement = class extends CheckboxGroupControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd$i(this, _handleSlotChange$4, () => {
-      for (const control of this.groupControls) {
-        control.addEventListener("change", __privateGet$f(this, _handleGroupControlChange));
-      }
-    });
-    __privateAdd$i(this, _handleGroupControlChange, (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      event.stopImmediatePropagation();
-      this.updateValue(target.checked ? this.controls.map((control) => control.value) : [], true);
-      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
-        groupControl.checked = target.checked;
-      }
-    });
-  }
-  render() {
-    return html`<slot @slotchange=${__privateGet$f(this, _handleSlotChange$4)}></slot>`;
-  }
-};
-_handleSlotChange$4 = new WeakMap();
-_handleGroupControlChange = new WeakMap();
-__decorateClass$E([
-  property({ reflect: true })
-], OdxCheckboxGroupElement.prototype, "variant", 2);
-OdxCheckboxGroupElement = __decorateClass$E([
-  customElement("odx-checkbox-group", [styles$z])
-], OdxCheckboxGroupElement);
-
-const CheckboxGroupVariant = {
-  LIST: "list"
-};
-
-const styles$y = ":host{--color-fill: var(--odx-color-neutral);--color-fill-hover: var(--odx-color-neutral-hover);--color-text: 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-fill);color:var(--color-text);cursor:default;padding-inline:var(--odx-size-50);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);transition:var(--odx-transition-reduced)}:host::part(content){min-inline-size:var(--odx-size-150);user-select:none}[part=action],::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;transition:var(--odx-transition-reduced)}[part=action]{background-color:transparent;border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}[part=action]:hover{background-color:var(--odx-color-fill-focus)}:host([variant=\"primary\"]){--color-fill: var(--odx-color-primary);--color-text: var(--odx-color-primary-text)}:host([variant=\"neutral\"]){--color-fill: var(--odx-color-neutral);--color-text: var(--odx-color-neutral-text)}:host([variant=\"accent\"]){--color-fill: var(--odx-color-accent);--color-text: var(--odx-color-accent-text)}:host([variant=\"success\"]){--color-fill: var(--odx-color-success);--color-text: var(--odx-color-success-text)}:host([variant=\"warning\"]){--color-fill: var(--odx-color-warning);--color-text: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--color-fill: var(--odx-color-danger);--color-text: var(--odx-color-danger-text)}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--color-fill: var(--color-fill-hover)}";
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __typeError$h = (msg) => {
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __typeError$g = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(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$p(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-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 __accessCheck$g = (obj, member, msg) => member.has(obj) || __typeError$g("Cannot " + msg);
+var __privateGet$e = (obj, member, getter) => (__accessCheck$g(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$g = (obj, member, value) => member.has(obj) ? __typeError$g("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleActionClick, _handleClick$3;
 let OdxChipElement = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
     this.removable = false;
     this.interactive = false;
-    __privateAdd$h(this, _handleActionClick, (event) => {
+    __privateAdd$g(this, _handleActionClick, (event) => {
       const actionElement = getElementFromEvent(event, (node) => node.getAttribute("part") === "action");
       if (!actionElement) return;
       event.stopPropagation();
       this.emit("remove");
     });
-    __privateAdd$h(this, _handleClick$3, (event) => {
+    __privateAdd$g(this, _handleClick$3, (event) => {
       if (this.removable) {
         const actionElement = getElementFromEvent(event, (node) => node.getAttribute("part") === "action");
         if (actionElement) return;
@@ -591,20 +282,20 @@ let OdxChipElement = class extends CanBeDisabled(CustomElement) {
 };
 _handleActionClick = new WeakMap();
 _handleClick$3 = new WeakMap();
-__decorateClass$D([
+__decorateClass$y([
   query('[part="action"]')
 ], OdxChipElement.prototype, "actionElement", 2);
-__decorateClass$D([
+__decorateClass$y([
   property({ type: Boolean, reflect: true })
 ], OdxChipElement.prototype, "removable", 2);
-__decorateClass$D([
+__decorateClass$y([
   property({ type: Boolean, reflect: true })
 ], OdxChipElement.prototype, "interactive", 2);
-__decorateClass$D([
+__decorateClass$y([
   property({ reflect: true })
 ], OdxChipElement.prototype, "variant", 2);
-OdxChipElement = __decorateClass$D([
-  customElement("odx-chip", [styles$y])
+OdxChipElement = __decorateClass$y([
+  customElement("odx-chip", [styles$v])
 ], OdxChipElement);
 
 const ChipVariant = {
@@ -616,7 +307,7 @@ const ChipVariant = {
   DANGER: "danger"
 };
 
-const styles$x = "@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);--_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) 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$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);--_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) 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 CircularProgressBarSize = {
   SMALL: "small",
@@ -624,29 +315,29 @@ const CircularProgressBarSize = {
   LARGE: "large"
 };
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __typeError$g = (msg) => {
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __typeError$f = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(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$o(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
-var __accessCheck$g = (obj, member, msg) => member.has(obj) || __typeError$g("Cannot " + msg);
-var __privateGet$d = (obj, member, getter) => (__accessCheck$g(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$g = (obj, member, value) => member.has(obj) ? __typeError$g("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$g(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$f = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
+var __privateGet$d = (obj, member, getter) => (__accessCheck$f(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$f = (obj, member, value) => member.has(obj) ? __typeError$f("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$f(obj, member, "write to private field"), member.set(obj, value), value);
 var _value, _OdxCircularProgressBarElement_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
 let OdxCircularProgressBarElement = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$g(this, _OdxCircularProgressBarElement_instances);
-    __privateAdd$g(this, _value, 0);
+    __privateAdd$f(this, _OdxCircularProgressBarElement_instances);
+    __privateAdd$f(this, _value, 0);
     this.viewPortSize = 100;
     this.stroke = 1;
     this.indeterminate = false;
@@ -724,32 +415,32 @@ normalizedStrokeWidth_get = function() {
   }
   return stroke;
 };
-__decorateClass$C([
+__decorateClass$x([
   property({ type: Number })
 ], OdxCircularProgressBarElement.prototype, "value", 1);
-__decorateClass$C([
+__decorateClass$x([
   property({ type: Number, reflect: true })
 ], OdxCircularProgressBarElement.prototype, "stroke", 2);
-__decorateClass$C([
+__decorateClass$x([
   property({ type: Boolean, reflect: true })
 ], OdxCircularProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$C([
+__decorateClass$x([
   property({ reflect: true })
 ], OdxCircularProgressBarElement.prototype, "size", 2);
-OdxCircularProgressBarElement = __decorateClass$C([
-  customElement("odx-circular-progress-bar", [styles$x])
+OdxCircularProgressBarElement = __decorateClass$x([
+  customElement("odx-circular-progress-bar", [styles$u])
 ], OdxCircularProgressBarElement);
 
-const styles$w = ":host{--columns: 1;--column-min-size: 300px;--column-max-size: auto;--_gutter: var(--odx-grid-gutter, var(--odx-size-75))}:host{display:grid;container:odx-grid inline-size;gap:var(--_gutter);grid-template-columns:repeat(auto-fit,minmax(min(var(--column-min-size),100%),1fr))}:host ::slotted(*){max-inline-size:var(--column-max-size);justify-self:center}:host([columns]){--column-min-size: calc(100% / (var(--columns) + 1))}:host([columns=\"2\"]){--columns: 2}:host([columns=\"3\"]){--columns: 3}:host([columns=\"4\"]){--columns: 4}:host([columns=\"6\"]){--columns: 6}:host([gap=\"none\"]){gap:0}:host([gap=\"block\"]){column-gap:0}:host([gap=\"inline\"]){row-gap:0}";
+const styles$t = ":host{--columns: 1;--column-min-size: 300px;--column-max-size: auto;--_gutter: var(--odx-grid-gutter, var(--odx-size-75))}:host{display:grid;container:odx-grid inline-size;gap:var(--_gutter);grid-template-columns:repeat(auto-fit,minmax(min(var(--column-min-size),100%),1fr))}:host ::slotted(*){max-inline-size:var(--column-max-size);justify-self:center}:host([columns]){--column-min-size: calc(100% / (var(--columns) + 1))}:host([columns=\"2\"]){--columns: 2}:host([columns=\"3\"]){--columns: 3}:host([columns=\"4\"]){--columns: 4}:host([columns=\"6\"]){--columns: 6}:host([gap=\"none\"]){gap:0}:host([gap=\"block\"]){column-gap:0}:host([gap=\"inline\"]){row-gap:0}";
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(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$n(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let OdxGrid = class extends CustomElement {
@@ -757,14 +448,14 @@ let OdxGrid = class extends CustomElement {
     return html`<slot></slot>`;
   }
 };
-__decorateClass$B([
+__decorateClass$w([
   property({ type: Number })
 ], OdxGrid.prototype, "columns", 2);
-__decorateClass$B([
+__decorateClass$w([
   property()
 ], OdxGrid.prototype, "gap", 2);
-OdxGrid = __decorateClass$B([
-  customElement("odx-grid", [styles$w])
+OdxGrid = __decorateClass$w([
+  customElement("odx-grid", [styles$t])
 ], OdxGrid);
 
 const GridGap = {
@@ -774,41 +465,41 @@ const GridGap = {
   XL: "xl"
 };
 
-const styles$v = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-fill: var(--odx-color-surface)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
+const styles$s = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-fill: var(--odx-color-surface)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
 
 const DropdownPlacement = {
   TOP: PopoverPlacement.TOP,
   BOTTOM: PopoverPlacement.BOTTOM
 };
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __typeError$f = (msg) => {
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __typeError$e = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(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$m(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
-var __accessCheck$f = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
-var __privateGet$c = (obj, member, getter) => (__accessCheck$f(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$f = (obj, member, value) => member.has(obj) ? __typeError$f("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$7 = (obj, member, method) => (__accessCheck$f(obj, member, "access private method"), method);
+var __accessCheck$e = (obj, member, msg) => member.has(obj) || __typeError$e("Cannot " + msg);
+var __privateGet$c = (obj, member, getter) => (__accessCheck$e(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$e = (obj, member, value) => member.has(obj) ? __typeError$e("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$e(obj, member, "access private method"), method);
 var _OdxDropdownElement_instances, observeReferenceElement_fn, unobserveReferenceElement_fn, updateAriaAttributes_fn$1, _handleMouseEvent, _handleKeyboardEvent$1;
 let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement)) {
   constructor() {
     super(...arguments);
-    __privateAdd$f(this, _OdxDropdownElement_instances);
+    __privateAdd$e(this, _OdxDropdownElement_instances);
     this.matchReferenceWidth = false;
     this.placement = DropdownPlacement.BOTTOM;
-    __privateAdd$f(this, _handleMouseEvent, (event) => {
+    __privateAdd$e(this, _handleMouseEvent, (event) => {
       this.togglePopover();
     });
-    __privateAdd$f(this, _handleKeyboardEvent$1, (event) => {
+    __privateAdd$e(this, _handleKeyboardEvent$1, (event) => {
       if (event.key !== "Enter") return;
       this.togglePopover();
     });
@@ -820,19 +511,19 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);
     if (this.disabled || !referenceElement) return;
-    __privateMethod$7(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, referenceElement, this.id);
+    __privateMethod$6(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, referenceElement, this.id);
     referenceElement.addEventListener("click", __privateGet$c(this, _handleMouseEvent));
     referenceElement.addEventListener("keydown", __privateGet$c(this, _handleKeyboardEvent$1));
     if (this.matchReferenceWidth) {
-      __privateMethod$7(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
+      __privateMethod$6(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
     }
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
-    __privateMethod$7(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, referenceElement, null);
+    __privateMethod$6(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, referenceElement, null);
     referenceElement.removeEventListener("click", __privateGet$c(this, _handleMouseEvent));
     referenceElement.removeEventListener("keydown", __privateGet$c(this, _handleKeyboardEvent$1));
-    __privateMethod$7(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
+    __privateMethod$6(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
   }
   render() {
     return html`
@@ -844,7 +535,7 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
   willUpdate(changes) {
     super.willUpdate?.(changes);
     if (changes.has("id")) {
-      __privateMethod$7(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, this.referenceElement, this.id);
+      __privateMethod$6(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, this.referenceElement, this.id);
     }
     if (changes.has("disabled")) {
       if (this.disabled) {
@@ -855,9 +546,9 @@ let OdxDropdownElement = class extends PopoverHost(CanBeDisabled(CustomElement))
     }
     if (changes.has("matchReferenceWidth")) {
       if (this.matchReferenceWidth) {
-        __privateMethod$7(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
+        __privateMethod$6(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
       } else {
-        __privateMethod$7(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
+        __privateMethod$6(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
       }
     }
   }
@@ -881,43 +572,43 @@ updateAriaAttributes_fn$1 = function(referenceElement, id) {
 };
 _handleMouseEvent = new WeakMap();
 _handleKeyboardEvent$1 = new WeakMap();
-__decorateClass$A([
+__decorateClass$v([
   query("odx-popover", true)
 ], OdxDropdownElement.prototype, "popoverElement", 2);
-__decorateClass$A([
+__decorateClass$v([
   property({ type: Boolean, reflect: true })
 ], OdxDropdownElement.prototype, "matchReferenceWidth", 2);
-__decorateClass$A([
+__decorateClass$v([
   property({ type: String, reflect: true })
 ], OdxDropdownElement.prototype, "placement", 2);
-OdxDropdownElement = __decorateClass$A([
-  customElement("odx-dropdown", [styles$v])
+OdxDropdownElement = __decorateClass$v([
+  customElement("odx-dropdown", [styles$s])
 ], OdxDropdownElement);
 
-const styles$u = ":host{display:block}";
+const styles$r = ":host{display:block}";
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __typeError$e = (msg) => {
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __typeError$d = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(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$l(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-var __accessCheck$e = (obj, member, msg) => member.has(obj) || __typeError$e("Cannot " + msg);
-var __privateGet$b = (obj, member, getter) => (__accessCheck$e(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$e = (obj, member, value) => member.has(obj) ? __typeError$e("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+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 _handleSlotChange$3;
 const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
 let OdxFormFieldElement = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$e(this, _handleSlotChange$3, () => {
+    __privateAdd$d(this, _handleSlotChange$3, () => {
       this.control?.addEventListener("change", () => this.requestUpdate());
     });
   }
@@ -944,23 +635,23 @@ let OdxFormFieldElement = class extends CustomElement {
   }
 };
 _handleSlotChange$3 = new WeakMap();
-__decorateClass$z([
+__decorateClass$u([
   queryAssignedElements({ flatten: true })
 ], OdxFormFieldElement.prototype, "elements", 2);
-OdxFormFieldElement = __decorateClass$z([
-  customElement("odx-form-field", [styles$u])
+OdxFormFieldElement = __decorateClass$u([
+  customElement("odx-form-field", [styles$r])
 ], OdxFormFieldElement);
 
-const styles$t = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-fill-focus)}";
+const styles$q = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-fill-focus)}";
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(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$k(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let OdxInlineMessageElement = class extends CustomElement {
@@ -972,11 +663,11 @@ let OdxInlineMessageElement = class extends CustomElement {
     `;
   }
 };
-__decorateClass$y([
+__decorateClass$t([
   property({ reflect: true })
 ], OdxInlineMessageElement.prototype, "variant", 2);
-OdxInlineMessageElement = __decorateClass$y([
-  customElement("odx-inline-message", [styles$t])
+OdxInlineMessageElement = __decorateClass$t([
+  customElement("odx-inline-message", [styles$q])
 ], OdxInlineMessageElement);
 
 const InlineMessageVariant = {
@@ -988,11 +679,11 @@ const InlineMessageVariant = {
   DANGER: "danger"
 };
 
-const styles$s = ":host{display:flex;flex-direction:column;padding:var(--odx-size-75);border-block-end:var(--odx-border-sm)}";
+const styles$p = ":host{display:flex;flex-direction:column;padding:var(--odx-size-75);border-block-end:var(--odx-border-sm)}";
 
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1007,15 +698,15 @@ let OdxListItemElement = class extends BaseLink {
     `;
   }
 };
-OdxListItemElement = __decorateClass$x([
-  customElement("odx-list-item", [styles$s])
+OdxListItemElement = __decorateClass$s([
+  customElement("odx-list-item", [styles$p])
 ], OdxListItemElement);
 
-const styles$r = "";
+const styles$o = "";
 
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1028,35 +719,35 @@ let OdxListElement = class extends CustomElement {
     `;
   }
 };
-OdxListElement = __decorateClass$w([
-  customElement("odx-list", [styles$r])
+OdxListElement = __decorateClass$r([
+  customElement("odx-list", [styles$o])
 ], OdxListElement);
 
-const styles$q = ":host{--_overlay-fill-color: var(--odx-color-fill-overlay, transparent);display:contents}: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-base) allow-discrete;overflow:hidden}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-elevation-blur)) grayscale(.8);pointer-events:all;visibility:visible}";
+const styles$n = ":host{--_overlay-fill-color: var(--odx-color-fill-overlay, transparent);display:contents}: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-base) allow-discrete;overflow:hidden}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-elevation-blur)) grayscale(.8);pointer-events:all;visibility:visible}";
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __typeError$d = (msg) => {
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __typeError$c = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(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$j(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
-var __accessCheck$d = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
-var __privateGet$a = (obj, member, getter) => (__accessCheck$d(obj, member, "read from private field"), 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 __privateSet$1 = (obj, member, value, setter) => (__accessCheck$d(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
+var __privateGet$a = (obj, member, getter) => (__accessCheck$c(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$c = (obj, member, value) => member.has(obj) ? __typeError$c("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$c(obj, member, "write to private field"), member.set(obj, value), value);
 var _loadingContainerPosition;
 const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
 let OdxLoadingOverlayElement = class extends WithLoadingState(CustomElement) {
   constructor() {
     super(...arguments);
-    __privateAdd$d(this, _loadingContainerPosition, "");
+    __privateAdd$c(this, _loadingContainerPosition, "");
   }
   get loadingContainer() {
     return this.parentElement ?? this;
@@ -1099,32 +790,32 @@ let OdxLoadingOverlayElement = class extends WithLoadingState(CustomElement) {
   }
 };
 _loadingContainerPosition = new WeakMap();
-__decorateClass$v([
+__decorateClass$q([
   query('[part="overlay"]', true)
 ], OdxLoadingOverlayElement.prototype, "overlay", 2);
-OdxLoadingOverlayElement = __decorateClass$v([
-  customElement("odx-loading-overlay", [styles$q])
+OdxLoadingOverlayElement = __decorateClass$q([
+  customElement("odx-loading-overlay", [styles$n])
 ], OdxLoadingOverlayElement);
 
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __typeError$c = (msg) => {
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __typeError$b = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
   return result;
 };
-var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
-var __privateGet$9 = (obj, member, getter) => (__accessCheck$c(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$c = (obj, member, value) => member.has(obj) ? __typeError$c("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
+var __privateGet$9 = (obj, member, getter) => (__accessCheck$b(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _handleClick$2;
 let OdxMainMenuButtonElement = class extends CustomElement {
   constructor() {
     super(...arguments);
-    __privateAdd$c(this, _handleClick$2, (event) => {
+    __privateAdd$b(this, _handleClick$2, (event) => {
       document.querySelector("odx-main-menu")?.open();
     });
   }
@@ -1136,15 +827,15 @@ let OdxMainMenuButtonElement = class extends CustomElement {
   }
 };
 _handleClick$2 = new WeakMap();
-OdxMainMenuButtonElement = __decorateClass$u([
+OdxMainMenuButtonElement = __decorateClass$p([
   customElement("odx-main-menu-button", [])
 ], OdxMainMenuButtonElement);
 
-const styles$p = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}:host::part(anchor){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}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host::part(anchor):focus-visible{--_color-outline: var(--odx-focus-ring-color)}:host([disabled]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
+const styles$m = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}:host::part(anchor){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}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host::part(anchor):focus-visible{--_color-outline: var(--odx-focus-ring-color)}:host([disabled]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
 
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1152,13 +843,13 @@ var __decorateClass$t = (decorators, target, key, kind) => {
 };
 let OdxMainMenuLink = class extends BaseLink {
 };
-OdxMainMenuLink = __decorateClass$t([
-  customElement("odx-main-menu-link", [styles$p])
+OdxMainMenuLink = __decorateClass$o([
+  customElement("odx-main-menu-link", [styles$m])
 ], OdxMainMenuLink);
 
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1177,13 +868,13 @@ let OdxMainMenuSubtitleElement = class extends CustomElement {
     `;
   }
 };
-OdxMainMenuSubtitleElement = __decorateClass$s([
+OdxMainMenuSubtitleElement = __decorateClass$n([
   customElement("odx-main-menu-subtitle")
 ], OdxMainMenuSubtitleElement);
 
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1202,46 +893,48 @@ let OdxMainMenuTitleElement = class extends CustomElement {
     `;
   }
 };
-OdxMainMenuTitleElement = __decorateClass$r([
+OdxMainMenuTitleElement = __decorateClass$m([
   customElement("odx-main-menu-title")
 ], OdxMainMenuTitleElement);
 
-const styles$o = ":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$l = ":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$i = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __typeError$b = (msg) => {
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __typeError$a = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(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$i(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
-var __privateGet$8 = (obj, member, getter) => (__accessCheck$b(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+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 _focusTrap, _handleSlotChange$2, _handleToggle;
 let OdxMainMenuElement = class extends CustomElement {
   constructor() {
-    super(...arguments);
-    __privateAdd$b(this, _focusTrap, new FocusTrapController(this));
-    __privateAdd$b(this, _handleSlotChange$2, () => {
+    super();
+    __privateAdd$a(this, _focusTrap, new FocusTrapController(this));
+    __privateAdd$a(this, _handleSlotChange$2, () => {
       for (const link of this.links) {
         link.slot ||= "link-navigation";
       }
     });
-    __privateAdd$b(this, _handleToggle, ({ newState }) => {
+    __privateAdd$a(this, _handleToggle, ({ newState }) => {
       __privateGet$8(this, _focusTrap).toggle(newState === "open");
     });
+    if (!isServer) {
+      this.addEventListener("toggle", __privateGet$8(this, _handleToggle));
+    }
   }
   connectedCallback() {
     super.connectedCallback?.();
     this.popover = "auto";
-    this.addEventListener("toggle", __privateGet$8(this, _handleToggle));
   }
   toggle() {
     this.togglePopover();
@@ -1275,18 +968,18 @@ let OdxMainMenuElement = class extends CustomElement {
 _focusTrap = new WeakMap();
 _handleSlotChange$2 = new WeakMap();
 _handleToggle = new WeakMap();
-__decorateClass$q([
+__decorateClass$l([
   queryAssignedElements({ selector: "odx-link", flatten: true })
 ], OdxMainMenuElement.prototype, "links", 2);
-OdxMainMenuElement = __decorateClass$q([
-  customElement("odx-main-menu", [styles$o])
+OdxMainMenuElement = __decorateClass$l([
+  customElement("odx-main-menu", [styles$l])
 ], OdxMainMenuElement);
 
-const styles$n = ":host{--_color-fill: Var(--odx-color-surface)}.menu-item{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);background-color:var(--_color-fill);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);transition:var(--odx-motion-duration);transition-property:background-color,outline-color;cursor:pointer;border-radius:var(--odx-border-radius-sm)}:host(:hover){--_color-fill: var(--odx-color-surface-hover)}.menu-item:focus-visible{--_color-fill: var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}::slotted(odx-icon){margin-inline-end:var(--odx-size-37);margin-inline-start:calc(-1 * var(--odx-size-25))}";
+const styles$k = ":host{--_color-fill: Var(--odx-color-surface)}.menu-item{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);background-color:var(--_color-fill);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);transition:var(--odx-motion-duration);transition-property:background-color,outline-color;cursor:pointer;border-radius:var(--odx-border-radius-sm)}:host(:hover){--_color-fill: var(--odx-color-surface-hover)}.menu-item:focus-visible{--_color-fill: var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}::slotted(odx-icon){margin-inline-end:var(--odx-size-37);margin-inline-start:calc(-1 * var(--odx-size-25))}";
 
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1309,15 +1002,15 @@ OdxMenuItemElement.shadowRootOptions = {
   ...CustomElement.shadowRootOptions,
   delegatesFocus: true
 };
-OdxMenuItemElement = __decorateClass$p([
-  customElement("odx-menu-item", [styles$n])
+OdxMenuItemElement = __decorateClass$k([
+  customElement("odx-menu-item", [styles$k])
 ], OdxMenuItemElement);
 
-const styles$m = ".menu-label{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);user-select:none;border-radius:var(--odx-border-radius-sm);padding-block-start:var(--odx-size-50);padding-block-end:var(--odx-size-25)}:host(:first-child) .menu-label{padding-block-start:calc(var(--odx-size-37) - var(--odx-size-25))}";
+const styles$j = ".menu-label{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);user-select:none;border-radius:var(--odx-border-radius-sm);padding-block-start:var(--odx-size-50);padding-block-end:var(--odx-size-25)}:host(:first-child) .menu-label{padding-block-start:calc(var(--odx-size-37) - var(--odx-size-25))}";
 
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -1332,40 +1025,40 @@ let OdxMenuLabelElement = class extends CustomElement {
     `;
   }
 };
-OdxMenuLabelElement = __decorateClass$o([
-  customElement("odx-menu-label", [styles$m])
+OdxMenuLabelElement = __decorateClass$j([
+  customElement("odx-menu-label", [styles$j])
 ], OdxMenuLabelElement);
 
-const styles$l = "odx-popover{--color-fill: var(--odx-color-surface)}:host{--min-inline-size: 160px;--max-inline-size: 280px}odx-popover{--_outer-padding: var(--odx-size-37)}::slotted(odx-separator){--block-space: var(--odx-size-50)}::slotted(odx-button){width:100%}";
+const styles$i = "odx-popover{--color-fill: var(--odx-color-surface)}:host{--min-inline-size: 160px;--max-inline-size: 280px}odx-popover{--_outer-padding: var(--odx-size-37)}::slotted(odx-separator){--block-space: var(--odx-size-50)}::slotted(odx-button){width:100%}";
 
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$a = (msg) => {
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __typeError$9 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
   return result;
 };
-var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
-var __privateGet$7 = (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 __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
+var __privateGet$7 = (obj, member, getter) => (__accessCheck$9(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 _tabindexController, _handleReferenceInteraction, _handleClick$1, _handleKeyDown, _handleReferenceKeyDown;
 const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
 const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
 let OdxMenuElement = class extends PopoverHost(CustomElement) {
   constructor() {
     super(...arguments);
-    __privateAdd$a(this, _tabindexController, new RovingTabindexController(this, {
+    __privateAdd$9(this, _tabindexController, new RovingTabindexController(this, {
       elements: () => this.getItems(),
       direction: "vertical"
     }));
-    __privateAdd$a(this, _handleReferenceInteraction, () => {
+    __privateAdd$9(this, _handleReferenceInteraction, () => {
       this.togglePopover();
     });
-    __privateAdd$a(this, _handleClick$1, (event) => {
+    __privateAdd$9(this, _handleClick$1, (event) => {
       const eventPath = event.composedPath();
       const closestMenu = eventPath.find((element) => element.localName === this.localName);
       if (this !== closestMenu) return;
@@ -1374,7 +1067,7 @@ let OdxMenuElement = class extends PopoverHost(CustomElement) {
       this.emit("select", { detail: { item } });
       this.hidePopover();
     });
-    __privateAdd$a(this, _handleKeyDown, (event) => {
+    __privateAdd$9(this, _handleKeyDown, (event) => {
       const { actions } = getKeyboardEventInfo(event);
       if ((actions.tab || actions.backTab) && this.isPopoverOpen()) {
         event?.preventDefault();
@@ -1387,7 +1080,7 @@ let OdxMenuElement = class extends PopoverHost(CustomElement) {
       if (!activeItem) return;
       activeItem.click();
     });
-    __privateAdd$a(this, _handleReferenceKeyDown, (event) => {
+    __privateAdd$9(this, _handleReferenceKeyDown, (event) => {
       const { direction } = getKeyboardEventInfo(event);
       if (!direction.down) return;
       this.showPopover();
@@ -1436,8 +1129,8 @@ _handleReferenceInteraction = new WeakMap();
 _handleClick$1 = new WeakMap();
 _handleKeyDown = new WeakMap();
 _handleReferenceKeyDown = new WeakMap();
-OdxMenuElement = __decorateClass$n([
-  customElement("odx-menu", [styles$l])
+OdxMenuElement = __decorateClass$i([
+  customElement("odx-menu", [styles$i])
 ], OdxMenuElement);
 
 const ProgressState = {
@@ -1446,16 +1139,16 @@ const ProgressState = {
   ERROR: "error"
 };
 
-const styles$k = ":host{--_indicator-color: var(--odx-color-primary);--_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-color: var(--odx-color-text-hint);--_value-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_indicator-color);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}:host::part(base),:host::part(indicator){inline-size:100%}:host::part(base){block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);outline:var(--odx-outline-default);outline-offset:var(--odx-outline-offset-default);overflow:hidden;position:relative;inline-size:100%}:host::part(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%}:host::part(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))}:host::part(value){text-align:end;margin-inline-start:auto}:host([condensed]:not([condensed=\"false\"])){padding-block:0;flex-wrap:nowrap}:host([condensed]:not([condensed=\"false\"]))::part(label){inline-size:var(--_label-width)}:host([condensed]:not([condensed=\"false\"]))::part(value){width:var(--_value-width);order:99}:host([state=\"confirm\"]){--_indicator-color: orange;--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: red;--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: green;--_value-color: var(--_indicator-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(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$h = ":host{--_indicator-color: var(--odx-color-primary);--_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-color: var(--odx-color-text-hint);--_value-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_indicator-color);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}:host::part(base),:host::part(indicator){inline-size:100%}:host::part(base){block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);outline:var(--odx-outline-default);outline-offset:var(--odx-outline-offset-default);overflow:hidden;position:relative;inline-size:100%}:host::part(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%}:host::part(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))}:host::part(value){text-align:end;margin-inline-start:auto}:host([condensed]:not([condensed=\"false\"])){padding-block:0;flex-wrap:nowrap}:host([condensed]:not([condensed=\"false\"]))::part(label){inline-size:var(--_label-width)}:host([condensed]:not([condensed=\"false\"]))::part(value){width:var(--_value-width);order:99}:host([state=\"confirm\"]){--_indicator-color: orange;--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: red;--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: green;--_value-color: var(--_indicator-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(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$h = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(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$h(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let OdxProgressBarElement = class extends CustomElement {
@@ -1494,313 +1187,40 @@ let OdxProgressBarElement = class extends CustomElement {
     `;
   }
 };
-__decorateClass$m([
+__decorateClass$h([
   queryAssignedElements()
 ], OdxProgressBarElement.prototype, "content", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "min", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "max", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "value", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "condensed", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ reflect: true })
 ], OdxProgressBarElement.prototype, "state", 2);
-__decorateClass$m([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "hideValue", 2);
-__decorateClass$m([
+__decorateClass$h([
   property()
 ], OdxProgressBarElement.prototype, "label", 2);
-__decorateClass$m([
+__decorateClass$h([
   property()
 ], OdxProgressBarElement.prototype, "valueText", 2);
-OdxProgressBarElement = __decorateClass$m([
-  customElement("odx-progress-bar", [styles$k])
+OdxProgressBarElement = __decorateClass$h([
+  customElement("odx-progress-bar", [styles$h])
 ], OdxProgressBarElement);
 
-const styles$j = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-selection-control-color-fill);--_indicator-color-border: var(--odx-selection-control-color-border);--_indicator-border-width: var(--odx-border-width-sm);--_label-color-text: 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-selection-control-border-radius);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(indicator){display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:50%;background-color:var(--_indicator-color-fill);border:var(--odx-selection-control-border);border-color:var(--_indicator-color-border);border-width:var(--_indicator-border-width);font-size:var(--odx-font-size-text-lg);transition-property:background-color,border,outline}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-fill: var(--odx-selection-control-color-fill-hover)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host(:is(:state(checked),:state(indeterminate))){--_indicator-color-fill: var(--odx-selection-control-color-fill);--_indicator-border-width: var(--odx-size-50)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-selection-control-color-fill);--_indicator-color-border: var(--odx-selection-control-color-border-disabled);--_label-color-text: var(--odx-color-text-disabled);cursor:default}:host([disabled]:not([disabled=\"false\"]):is(:state(checked),:state(indeterminate))){--_indicator-color-border: var(--odx-selection-control-color-fill-disabled-selected)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-selection-control-color-fill-readonly);--_indicator-color-border: var(--odx-selection-control-color-border);cursor:default}:host([readonly]:not([readonly=\"false\"]):is(:state(checked),:state(indeterminate))){--_indicator-color-fill: var(--odx-selection-control-color-border);--_indicator-color-border: var(--odx-selection-control-color-border);--_indicator-color-border: var(--odx-selection-control-color-fill);[part=indicator]{outline:var(--odx-outline-sm);outline-color:var(--odx-selection-control-color-border);outline-offset:calc(-1 * var(--odx-outline-width-sm))}}";
-
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxRadioButtonElement = class extends CheckboxControl {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.internals.role = "radio";
-  }
-  render() {
-    return html`
-      <div part="indicator" role="presentation">
-      </div>
-      <div part="content">
-        <div part="label">
-          <slot></slot>
-        </div>
-        <div part="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-  toggle(state, emitEvent = false) {
-    super.toggle(state ?? true, emitEvent);
-  }
-};
-OdxRadioButtonElement = __decorateClass$l([
-  customElement("odx-radio-button", [styles$j])
-], OdxRadioButtonElement);
-
-const RadioGroupVariant = {
-  LIST: "list"
-};
-
-var __defProp$g = Object.defineProperty;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$g(target, key, result);
-  return result;
-};
-class RadioGroupControl extends FormControl(CustomElement) {
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  constructor() {
-    super();
-    this.addEventListener("change", this.#handleChange);
-    new RovingTabindexController(this, {
-      elements: () => this.getControls(),
-      elementEnterAction: (element) => element.click(),
-      direction: "both"
-    });
-  }
-  getControls() {
-    return this.elements.filter((element) => this.isControl(element));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.internals.role = "radiogroup";
-    this.addEventListener("change", this.#handleChange, { capture: true });
-  }
-  isControl(element) {
-    return element instanceof CheckboxControl;
-  }
-  update(changes) {
-    super.update?.(changes);
-    if (changes.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
-      });
-    }
-    if (changes.has("name")) {
-      this.updateCheckboxControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (changes.has("disabled")) {
-      this.updateCheckboxControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (changes.has("readonly")) {
-      this.updateCheckboxControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-    if (changes.has("required") || changes.has("value")) {
-      const [firstControl] = this.getControls();
-      if (!firstControl) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
-    }
-  }
-  async updateCheckboxControls(updateFn) {
-    await 0;
-    this.getControls().forEach(updateFn);
-  }
-  #handleChange = ({ target }) => {
-    if (!this.isControl(target) || this.value === target.value) return;
-    this.value = target.value;
-  };
-}
-__decorateClass$k([
-  queryAssignedElements({ flatten: true })
-], RadioGroupControl.prototype, "elements");
-
-const styles$i = ":host{display:flex;flex-direction:column}::slotted(:is(odx-radio-button,odx-switch)){border-block-end:0;border-color:transparent;width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch)){border-block-end:var(--odx-border-sm);border-color:var(--odx-color-fill-disabled);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0;outline-offset:0}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch):last-of-type){border-block-end:none}";
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(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$f(target, key, result);
-  return result;
-};
-let OdxRadioGroupElement = class extends RadioGroupControl {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$j([
-  property({ reflect: true })
-], OdxRadioGroupElement.prototype, "variant", 2);
-OdxRadioGroupElement = __decorateClass$j([
-  customElement("odx-radio-group", [styles$i])
-], OdxRadioGroupElement);
-
-const styles$h = ":host{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-sm);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);transition-property:background-color,color,outline-color;user-select:none}:host(:hover){background-color:var(--odx-color-surface-lowered)}:host([aria-selected=\"true\"]){background-color:var(--odx-color-surface-raised)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
-
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __typeError$9 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(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$e(target, key, result);
-  return result;
-};
-var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
-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 __privateMethod$6 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
-var _OdxOptionElement_instances, getCheckboxControl_fn, handleCheckboxSlotChange_fn;
-let OdxOptionElement = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$9(this, _OdxOptionElement_instances);
-    this.selected = false;
-    this.value = "";
-  }
-  getTextLabel() {
-    return this.textContent?.trim() ?? "";
-  }
-  render() {
-    return html`
-        <slot name="_checkbox" @slotchange=${__privateMethod$6(this, _OdxOptionElement_instances, handleCheckboxSlotChange_fn)}></slot>
-        <slot name="start"></slot>
-        <slot></slot>
-        <slot name="end"></slot>
-    `;
-  }
-  willUpdate(changes) {
-    if (changes.has("selected")) {
-      this.ariaSelected = toAriaBooleanAttribute(this.selected);
-      __privateMethod$6(this, _OdxOptionElement_instances, getCheckboxControl_fn).call(this)?.toggle(this.selected);
-    }
-  }
-};
-_OdxOptionElement_instances = new WeakSet();
-getCheckboxControl_fn = function() {
-  return this.checkboxSlot?.assignedElements().find((element) => element instanceof CheckboxControl);
-};
-handleCheckboxSlotChange_fn = function() {
-  const checkboxControl = __privateMethod$6(this, _OdxOptionElement_instances, getCheckboxControl_fn).call(this);
-  if (!checkboxControl) return;
-  checkboxControl.inert = true;
-  checkboxControl.tabIndex = -1;
-};
-__decorateClass$i([
-  query('slot[name="_checkbox"]')
-], OdxOptionElement.prototype, "checkboxSlot", 2);
-__decorateClass$i([
-  property({ type: Boolean, attribute: false })
-], OdxOptionElement.prototype, "selected", 2);
-__decorateClass$i([
-  property()
-], OdxOptionElement.prototype, "value", 2);
-OdxOptionElement = __decorateClass$i([
-  customElement("odx-option", [styles$h])
-], OdxOptionElement);
-
-var __defProp$d = Object.defineProperty;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$d(target, key, result);
-  return result;
-};
-class SelectControl extends FormControl(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.#selectedOptions = /* @__PURE__ */ new Map();
-    this.multiple = false;
-    this.value = "";
-  }
-  #selectedOptions;
-  get selectedOptions() {
-    return this.#selectedOptions.values();
-  }
-  toggle(option) {
-    if (this.multiple) {
-      const value = typeof this.value === "string" ? [this.value] : this.value;
-      this.value = option.selected ? value.filter((value2) => value2 !== option.value) : [...value, option.value];
-    } else {
-      this.value = option.value;
-    }
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("value")) {
-      this.updateSelection();
-    }
-    if (changes.has("required") || changes.has("value")) {
-      const [selectedOption] = this.#selectedOptions.values();
-      if (!selectedOption?.selected) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
-    }
-  }
-  async updateSelection() {
-    if (this.disabled) return;
-    await 0;
-    for (const option of this.options ?? []) {
-      if (option.disabled) continue;
-      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
-      if (option.selected) {
-        this.#selectedOptions.set(option.value, option);
-      } else {
-        this.#selectedOptions.delete(option.value);
-      }
-    }
-    this.requestUpdate();
-  }
-}
-__decorateClass$h([
-  queryAssignedElements({ selector: OdxOptionElement.selector, flatten: true })
-], SelectControl.prototype, "options");
-__decorateClass$h([
-  property({ type: Boolean, reflect: true })
-], SelectControl.prototype, "multiple");
-__decorateClass$h([
-  property()
-], SelectControl.prototype, "value");
-
 const styles$g = ":host{display:block}[part=trigger]{display:flex;cursor:pointer;text-align:left;padding:var(--odx-size-37) var(--odx-size-75);min-width:200px;outline:var(--odx-outline-input);outline-offset:var(--odx-outline-offset-input);outline-color:var(--odx-color-outline-control);border-radius:var(--odx-border-radius-sm);min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,outline-color;gap:var(--odx-size-37)}[part=trigger]:focus-visible{background-color:var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}[part=indicator]{font-size:var(--odx-size-150);margin-left:auto}[part=trigger] odx-chip{--_border-radius: var(--odx-border-radius-sm)}";
 
 var __defProp$c = Object.defineProperty;
@@ -1856,7 +1276,7 @@ let OdxSelectElement = class extends SelectControl {
     if (this.multiple) {
       return html`${repeat(
         selectedOptions,
-        (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _removeChip).call(this, option)} @click=${console.log} interactive removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
+        (option) => html`<odx-chip @remove=${() => __privateGet$6(this, _removeChip).call(this, option)} interactive removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
       )}`;
     }
     return html`${selectedOptions[0]?.getTextLabel()}`;
@@ -1864,6 +1284,9 @@ let OdxSelectElement = class extends SelectControl {
 };
 _removeChip = new WeakMap();
 _handleDropdownClick = new WeakMap();
+__decorateClass$g([
+  queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
+], OdxSelectElement.prototype, "options", 2);
 __decorateClass$g([
   query(OdxDropdownElement.selector, true)
 ], OdxSelectElement.prototype, "dropdownElement", 2);
@@ -2922,4 +2345,4 @@ OdxTooltipElement = __decorateClass([
   customElement("odx-tooltip", [styles])
 ], OdxTooltipElement);
 
-export { CardElement, CheckboxControl, CheckboxGroupControl, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxCheckboxElement, OdxCheckboxGroupElement, OdxChipElement, OdxCircularProgressBarElement, OdxDropdownElement, OdxFormFieldElement, OdxGrid, OdxInlineMessageElement, OdxListElement, OdxListItemElement, OdxLoadingOverlayElement, OdxMainMenuButtonElement, OdxMainMenuElement, OdxMainMenuLink, OdxMainMenuSubtitleElement, OdxMainMenuTitleElement, OdxMenuElement, OdxMenuItemElement, OdxMenuLabelElement, OdxOptionElement, OdxProgressBarElement, OdxRadioButtonElement, OdxRadioGroupElement, OdxSelectElement, OdxSkeletonElement, OdxSliderElement, OdxSliderHandleElement, OdxSliderMarksElement, OdxSpinboxElement, OdxSwitchElement, OdxTableBodyElement, OdxTableCellElement, OdxTableCheckboxCellElement, OdxTableElement, OdxTableHeaderCellElement, OdxTableHeaderElement, OdxTableRowElement, OdxToastElement, OdxToggleButtonElement, OdxTooltipElement, ProgressState, RadioGroupControl, RadioGroupVariant, SliderLabelVisibility, SliderTrackVisibility, ToastVariant, TooltipPlacement };
+export { CardElement, ChipVariant, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxChipElement, OdxCircularProgressBarElement, OdxDropdownElement, OdxFormFieldElement, OdxGrid, OdxInlineMessageElement, OdxListElement, OdxListItemElement, OdxLoadingOverlayElement, OdxMainMenuButtonElement, OdxMainMenuElement, OdxMainMenuLink, OdxMainMenuSubtitleElement, OdxMainMenuTitleElement, OdxMenuElement, OdxMenuItemElement, OdxMenuLabelElement, OdxProgressBarElement, OdxSelectElement, OdxSkeletonElement, OdxSliderElement, OdxSliderHandleElement, OdxSliderMarksElement, OdxSpinboxElement, OdxSwitchElement, OdxTableBodyElement, OdxTableCellElement, OdxTableCheckboxCellElement, OdxTableElement, OdxTableHeaderCellElement, OdxTableHeaderElement, OdxTableRowElement, OdxToastElement, OdxToggleButtonElement, OdxTooltipElement, ProgressState, SliderLabelVisibility, SliderTrackVisibility, ToastVariant, TooltipPlacement };