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

package/dist/elements.js

@@ -1,26 +1,26 @@
-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 { CheckboxControl, OdxOptionComponent } from '@odx/foundation/components';
 import { when } from 'lit/directives/when.js';
 import { PopoverPlacement, PopoverHost, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
-import { B as BaseLink, C as CheckboxControl$1 } from './checkbox-control-DjGOb6bn.js';
+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$C = ":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$s = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(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$s(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
@@ -69,18 +69,18 @@ let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
     `;
   }
 };
-__decorateClass$I([
+__decorateClass$C([
   property({ type: Boolean })
 ], OdxAccordionHeaderElement.prototype, "expanded", 1);
-OdxAccordionHeaderElement = __decorateClass$I([
-  customElement("odx-accordion-header", [styles$C])
+OdxAccordionHeaderElement = __decorateClass$C([
+  customElement("odx-accordion-header", [styles$z])
 ], OdxAccordionHeaderElement);
 
-const styles$B = ":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$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(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;
@@ -97,44 +97,44 @@ let OdxAccordionPanelElement = class extends CustomElement {
     `;
   }
 };
-OdxAccordionPanelElement = __decorateClass$H([
-  customElement("odx-accordion-panel", [styles$B])
+OdxAccordionPanelElement = __decorateClass$B([
+  customElement("odx-accordion-panel", [styles$y])
 ], OdxAccordionPanelElement);
 
-const styles$A = ":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$r = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __typeError$i = (msg) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __typeError$h = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(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$r(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-var __accessCheck$i = (obj, member, msg) => member.has(obj) || __typeError$i("Cannot " + msg);
-var __privateGet$g = (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 __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$i(this, _handleClick$4, (event) => {
+    __privateAdd$h(this, _handleClick$4, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement)) return;
       event.target.toggle();
     });
-    __privateAdd$i(this, _handleExpand, (event) => {
+    __privateAdd$h(this, _handleExpand, (event) => {
       event.stopPropagation();
       if (!(event.target instanceof OdxAccordionHeaderElement) || this.multiple) return;
       this.toggleAll(false, event.target);
     });
-    __privateAdd$i(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();
@@ -143,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) {
@@ -169,21 +169,21 @@ let OdxAccordionElement = class extends CustomElement {
 _handleClick$4 = new WeakMap();
 _handleExpand = new WeakMap();
 _handleKeyboardEvent$2 = new WeakMap();
-__decorateClass$G([
+__decorateClass$A([
   queryAssignedElements({ selector: OdxAccordionHeaderElement.selector, flatten: true })
 ], OdxAccordionElement.prototype, "controls", 2);
-__decorateClass$G([
+__decorateClass$A([
   property({ type: Boolean })
 ], OdxAccordionElement.prototype, "multiple", 2);
-OdxAccordionElement = __decorateClass$G([
-  customElement("odx-accordion", [styles$A])
+OdxAccordionElement = __decorateClass$A([
+  customElement("odx-accordion", [styles$x])
 ], OdxAccordionElement);
 
-const styles$z = ":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$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(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;
@@ -202,179 +202,23 @@ let CardElement = class extends CanBeDisabled(CustomElement) {
     `;
   }
 };
-CardElement = __decorateClass$F([
-  customElement("odx-card", [styles$z])
+CardElement = __decorateClass$z([
+  customElement("odx-card", [styles$w])
 ], CardElement);
 
-var __defProp$q = Object.defineProperty;
-var __decorateClass$E = (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$q(target, key, result);
-  return result;
-};
-const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
-const _CheckboxGroupControl = class _CheckboxGroupControl extends FormControl(CustomElement) {
-  constructor() {
-    super();
-    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
-      );
-    };
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChangeEvent);
-    }
-  }
-  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));
-  }
-  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$E([
-  queryAssignedElements({ flatten: true })
-], _CheckboxGroupControl.prototype, "elements");
-__decorateClass$E([
-  property({ type: Array })
-], _CheckboxGroupControl.prototype, "value");
-let CheckboxGroupControl = _CheckboxGroupControl;
+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)}";
 
-const styles$y = ":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)}";
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __typeError$h = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$D = (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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-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 _handleSlotChange$4, _handleGroupControlChange;
-let OdxCheckboxGroupElement = class extends CheckboxGroupControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd$h(this, _handleSlotChange$4, () => {
-      for (const control of this.groupControls) {
-        control.addEventListener("change", __privateGet$f(this, _handleGroupControlChange));
-      }
-    });
-    __privateAdd$h(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$D([
-  property({ reflect: true })
-], OdxCheckboxGroupElement.prototype, "variant", 2);
-OdxCheckboxGroupElement = __decorateClass$D([
-  customElement("odx-checkbox-group", [styles$y])
-], OdxCheckboxGroupElement);
-
-const CheckboxGroupVariant = {
-  LIST: "list"
-};
-
-const styles$x = ":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$o = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
 var __typeError$g = (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$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$o(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 var __accessCheck$g = (obj, member, msg) => member.has(obj) || __typeError$g("Cannot " + msg);
@@ -438,20 +282,20 @@ let OdxChipElement = class extends CanBeDisabled(CustomElement) {
 };
 _handleActionClick = new WeakMap();
 _handleClick$3 = new WeakMap();
-__decorateClass$C([
+__decorateClass$y([
   query('[part="action"]')
 ], OdxChipElement.prototype, "actionElement", 2);
-__decorateClass$C([
+__decorateClass$y([
   property({ type: Boolean, reflect: true })
 ], OdxChipElement.prototype, "removable", 2);
-__decorateClass$C([
+__decorateClass$y([
   property({ type: Boolean, reflect: true })
 ], OdxChipElement.prototype, "interactive", 2);
-__decorateClass$C([
+__decorateClass$y([
   property({ reflect: true })
 ], OdxChipElement.prototype, "variant", 2);
-OdxChipElement = __decorateClass$C([
-  customElement("odx-chip", [styles$x])
+OdxChipElement = __decorateClass$y([
+  customElement("odx-chip", [styles$v])
 ], OdxChipElement);
 
 const ChipVariant = {
@@ -463,7 +307,7 @@ const ChipVariant = {
   DANGER: "danger"
 };
 
-const styles$w = "@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",
@@ -471,17 +315,17 @@ const CircularProgressBarSize = {
   LARGE: "large"
 };
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
 var __typeError$f = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(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$n(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 var __accessCheck$f = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
@@ -571,32 +415,32 @@ normalizedStrokeWidth_get = function() {
   }
   return stroke;
 };
-__decorateClass$B([
+__decorateClass$x([
   property({ type: Number })
 ], OdxCircularProgressBarElement.prototype, "value", 1);
-__decorateClass$B([
+__decorateClass$x([
   property({ type: Number, reflect: true })
 ], OdxCircularProgressBarElement.prototype, "stroke", 2);
-__decorateClass$B([
+__decorateClass$x([
   property({ type: Boolean, reflect: true })
 ], OdxCircularProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$B([
+__decorateClass$x([
   property({ reflect: true })
 ], OdxCircularProgressBarElement.prototype, "size", 2);
-OdxCircularProgressBarElement = __decorateClass$B([
-  customElement("odx-circular-progress-bar", [styles$w])
+OdxCircularProgressBarElement = __decorateClass$x([
+  customElement("odx-circular-progress-bar", [styles$u])
 ], OdxCircularProgressBarElement);
 
-const styles$v = ":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$m = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(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$m(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let OdxGrid = class extends CustomElement {
@@ -604,14 +448,14 @@ let OdxGrid = class extends CustomElement {
     return html`<slot></slot>`;
   }
 };
-__decorateClass$A([
+__decorateClass$w([
   property({ type: Number })
 ], OdxGrid.prototype, "columns", 2);
-__decorateClass$A([
+__decorateClass$w([
   property()
 ], OdxGrid.prototype, "gap", 2);
-OdxGrid = __decorateClass$A([
-  customElement("odx-grid", [styles$v])
+OdxGrid = __decorateClass$w([
+  customElement("odx-grid", [styles$t])
 ], OdxGrid);
 
 const GridGap = {
@@ -621,24 +465,24 @@ const GridGap = {
   XL: "xl"
 };
 
-const styles$u = ":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$l = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
 var __typeError$e = (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$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$l(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 var __accessCheck$e = (obj, member, msg) => member.has(obj) || __typeError$e("Cannot " + msg);
@@ -728,32 +572,32 @@ updateAriaAttributes_fn$1 = function(referenceElement, id) {
 };
 _handleMouseEvent = new WeakMap();
 _handleKeyboardEvent$1 = new WeakMap();
-__decorateClass$z([
+__decorateClass$v([
   query("odx-popover", true)
 ], OdxDropdownElement.prototype, "popoverElement", 2);
-__decorateClass$z([
+__decorateClass$v([
   property({ type: Boolean, reflect: true })
 ], OdxDropdownElement.prototype, "matchReferenceWidth", 2);
-__decorateClass$z([
+__decorateClass$v([
   property({ type: String, reflect: true })
 ], OdxDropdownElement.prototype, "placement", 2);
-OdxDropdownElement = __decorateClass$z([
-  customElement("odx-dropdown", [styles$u])
+OdxDropdownElement = __decorateClass$v([
+  customElement("odx-dropdown", [styles$s])
 ], OdxDropdownElement);
 
-const styles$t = ":host{display:block}";
+const styles$r = ":host{display:block}";
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __typeError$d = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(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$k(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 var __accessCheck$d = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
@@ -791,23 +635,23 @@ let OdxFormFieldElement = class extends CustomElement {
   }
 };
 _handleSlotChange$3 = new WeakMap();
-__decorateClass$y([
+__decorateClass$u([
   queryAssignedElements({ flatten: true })
 ], OdxFormFieldElement.prototype, "elements", 2);
-OdxFormFieldElement = __decorateClass$y([
-  customElement("odx-form-field", [styles$t])
+OdxFormFieldElement = __decorateClass$u([
+  customElement("odx-form-field", [styles$r])
 ], OdxFormFieldElement);
 
-const styles$s = ":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$j = Object.defineProperty;
-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 __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$j(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let OdxInlineMessageElement = class extends CustomElement {
@@ -819,11 +663,11 @@ let OdxInlineMessageElement = class extends CustomElement {
     `;
   }
 };
-__decorateClass$x([
+__decorateClass$t([
   property({ reflect: true })
 ], OdxInlineMessageElement.prototype, "variant", 2);
-OdxInlineMessageElement = __decorateClass$x([
-  customElement("odx-inline-message", [styles$s])
+OdxInlineMessageElement = __decorateClass$t([
+  customElement("odx-inline-message", [styles$q])
 ], OdxInlineMessageElement);
 
 const InlineMessageVariant = {
@@ -835,11 +679,11 @@ const InlineMessageVariant = {
   DANGER: "danger"
 };
 
-const styles$r = ":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$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(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;
@@ -854,15 +698,15 @@ let OdxListItemElement = class extends BaseLink {
     `;
   }
 };
-OdxListItemElement = __decorateClass$w([
-  customElement("odx-list-item", [styles$r])
+OdxListItemElement = __decorateClass$s([
+  customElement("odx-list-item", [styles$p])
 ], OdxListItemElement);
 
-const styles$q = "";
+const styles$o = "";
 
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(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;
@@ -875,23 +719,23 @@ let OdxListElement = class extends CustomElement {
     `;
   }
 };
-OdxListElement = __decorateClass$v([
-  customElement("odx-list", [styles$q])
+OdxListElement = __decorateClass$r([
+  customElement("odx-list", [styles$o])
 ], OdxListElement);
 
-const styles$p = ":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$i = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
 var __typeError$c = (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$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$i(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
@@ -946,19 +790,19 @@ let OdxLoadingOverlayElement = class extends WithLoadingState(CustomElement) {
   }
 };
 _loadingContainerPosition = new WeakMap();
-__decorateClass$u([
+__decorateClass$q([
   query('[part="overlay"]', true)
 ], OdxLoadingOverlayElement.prototype, "overlay", 2);
-OdxLoadingOverlayElement = __decorateClass$u([
-  customElement("odx-loading-overlay", [styles$p])
+OdxLoadingOverlayElement = __decorateClass$q([
+  customElement("odx-loading-overlay", [styles$n])
 ], OdxLoadingOverlayElement);
 
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __typeError$b = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(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;
@@ -983,15 +827,15 @@ let OdxMainMenuButtonElement = class extends CustomElement {
   }
 };
 _handleClick$2 = new WeakMap();
-OdxMainMenuButtonElement = __decorateClass$t([
+OdxMainMenuButtonElement = __decorateClass$p([
   customElement("odx-main-menu-button", [])
 ], OdxMainMenuButtonElement);
 
-const styles$o = ":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$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(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;
@@ -999,13 +843,13 @@ var __decorateClass$s = (decorators, target, key, kind) => {
 };
 let OdxMainMenuLink = class extends BaseLink {
 };
-OdxMainMenuLink = __decorateClass$s([
-  customElement("odx-main-menu-link", [styles$o])
+OdxMainMenuLink = __decorateClass$o([
+  customElement("odx-main-menu-link", [styles$m])
 ], OdxMainMenuLink);
 
-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$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;
@@ -1024,13 +868,13 @@ let OdxMainMenuSubtitleElement = class extends CustomElement {
     `;
   }
 };
-OdxMainMenuSubtitleElement = __decorateClass$r([
+OdxMainMenuSubtitleElement = __decorateClass$n([
   customElement("odx-main-menu-subtitle")
 ], OdxMainMenuSubtitleElement);
 
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(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;
@@ -1049,23 +893,23 @@ let OdxMainMenuTitleElement = class extends CustomElement {
     `;
   }
 };
-OdxMainMenuTitleElement = __decorateClass$q([
+OdxMainMenuTitleElement = __decorateClass$m([
   customElement("odx-main-menu-title")
 ], OdxMainMenuTitleElement);
 
-const styles$n = ":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$h = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
 var __typeError$a = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(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$h(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
@@ -1124,18 +968,18 @@ let OdxMainMenuElement = class extends CustomElement {
 _focusTrap = new WeakMap();
 _handleSlotChange$2 = new WeakMap();
 _handleToggle = new WeakMap();
-__decorateClass$p([
+__decorateClass$l([
   queryAssignedElements({ selector: "odx-link", flatten: true })
 ], OdxMainMenuElement.prototype, "links", 2);
-OdxMainMenuElement = __decorateClass$p([
-  customElement("odx-main-menu", [styles$n])
+OdxMainMenuElement = __decorateClass$l([
+  customElement("odx-main-menu", [styles$l])
 ], OdxMainMenuElement);
 
-const styles$m = ":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$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(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;
@@ -1158,15 +1002,15 @@ OdxMenuItemElement.shadowRootOptions = {
   ...CustomElement.shadowRootOptions,
   delegatesFocus: true
 };
-OdxMenuItemElement = __decorateClass$o([
-  customElement("odx-menu-item", [styles$m])
+OdxMenuItemElement = __decorateClass$k([
+  customElement("odx-menu-item", [styles$k])
 ], OdxMenuItemElement);
 
-const styles$l = ".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$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(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;
@@ -1181,18 +1025,18 @@ let OdxMenuLabelElement = class extends CustomElement {
     `;
   }
 };
-OdxMenuLabelElement = __decorateClass$n([
-  customElement("odx-menu-label", [styles$l])
+OdxMenuLabelElement = __decorateClass$j([
+  customElement("odx-menu-label", [styles$j])
 ], OdxMenuLabelElement);
 
-const styles$k = "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$k = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
 var __typeError$9 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(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;
@@ -1285,8 +1129,8 @@ _handleReferenceInteraction = new WeakMap();
 _handleClick$1 = new WeakMap();
 _handleKeyDown = new WeakMap();
 _handleReferenceKeyDown = new WeakMap();
-OdxMenuElement = __decorateClass$m([
-  customElement("odx-menu", [styles$k])
+OdxMenuElement = __decorateClass$i([
+  customElement("odx-menu", [styles$i])
 ], OdxMenuElement);
 
 const ProgressState = {
@@ -1295,16 +1139,16 @@ const ProgressState = {
   ERROR: "error"
 };
 
-const styles$j = ":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$g = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(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$g(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let OdxProgressBarElement = class extends CustomElement {
@@ -1343,247 +1187,40 @@ let OdxProgressBarElement = class extends CustomElement {
     `;
   }
 };
-__decorateClass$l([
+__decorateClass$h([
   queryAssignedElements()
 ], OdxProgressBarElement.prototype, "content", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "min", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "max", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Number })
 ], OdxProgressBarElement.prototype, "value", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "condensed", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ reflect: true })
 ], OdxProgressBarElement.prototype, "state", 2);
-__decorateClass$l([
+__decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], OdxProgressBarElement.prototype, "hideValue", 2);
-__decorateClass$l([
+__decorateClass$h([
   property()
 ], OdxProgressBarElement.prototype, "label", 2);
-__decorateClass$l([
+__decorateClass$h([
   property()
 ], OdxProgressBarElement.prototype, "valueText", 2);
-OdxProgressBarElement = __decorateClass$l([
-  customElement("odx-progress-bar", [styles$j])
+OdxProgressBarElement = __decorateClass$h([
+  customElement("odx-progress-bar", [styles$h])
 ], OdxProgressBarElement);
 
-const styles$i = ":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$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (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;
-};
-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$k([
-  customElement("odx-radio-button", [styles$i])
-], OdxRadioButtonElement);
-
-const RadioGroupVariant = {
-  LIST: "list"
-};
-
-var __defProp$f = Object.defineProperty;
-var __decorateClass$j = (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$f(target, key, result);
-  return result;
-};
-class RadioGroupControl extends FormControl(CustomElement) {
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  constructor() {
-    super();
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChange, { capture: true });
-      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";
-  }
-  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$j([
-  queryAssignedElements({ flatten: true })
-], RadioGroupControl.prototype, "elements");
-
-const styles$h = ":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$e = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-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;
-};
-let OdxRadioGroupElement = class extends RadioGroupControl {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$i([
-  property({ reflect: true })
-], OdxRadioGroupElement.prototype, "variant", 2);
-OdxRadioGroupElement = __decorateClass$i([
-  customElement("odx-radio-group", [styles$h])
-], OdxRadioGroupElement);
-
-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: OdxOptionComponent.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;
@@ -1639,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()}`;
@@ -1647,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);
@@ -2271,7 +1911,7 @@ var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Ca
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod$3 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
 var _OdxTableHeaderElement_instances, handleChange_fn;
-let OdxTableHeaderElement = class extends CheckboxControl$1 {
+let OdxTableHeaderElement = class extends CheckboxControl {
   constructor() {
     super(...arguments);
     __privateAdd$3(this, _OdxTableHeaderElement_instances);
@@ -2705,4 +2345,4 @@ OdxTooltipElement = __decorateClass([
   customElement("odx-tooltip", [styles])
 ], OdxTooltipElement);
 
-export { CardElement, CheckboxGroupControl, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxCheckboxGroupElement, OdxChipElement, OdxCircularProgressBarElement, OdxDropdownElement, OdxFormFieldElement, OdxGrid, OdxInlineMessageElement, OdxListElement, OdxListItemElement, OdxLoadingOverlayElement, OdxMainMenuButtonElement, OdxMainMenuElement, OdxMainMenuLink, OdxMainMenuSubtitleElement, OdxMainMenuTitleElement, OdxMenuElement, OdxMenuItemElement, OdxMenuLabelElement, 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 };