@odx/foundation 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/elements.js

@@ -1,3030 +0,0 @@
-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 { html, isServer, nothing } from 'lit';
-import { property, queryAssignedElements, query } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { PopoverPlacement, PopoverHost, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
-import { B as BaseLink } from './base-link-CvZZE13a.js';
-import { OdxLinkComponent } from '@odx/foundation/components';
-import { clamp, round } from 'es-toolkit';
-import { styleMap } from 'lit/directives/style-map.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { createContext, consume, provide } from '@lit/context';
-import { minBy, maxBy } from 'es-toolkit/array';
-
-const styles$H = ":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$y = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
-  return result;
-};
-let OdxAccordionHeaderElement = class extends WithAriaControls(CustomElement) {
-  set expanded(value) {
-    if (this.disabled) return;
-    this.ariaExpanded = toAriaBooleanAttribute(value);
-  }
-  get expanded() {
-    return fromAriaBooleanAttribute(this.ariaExpanded);
-  }
-  updateA11yAttributes() {
-    if (!this.region) return;
-    this.region.ariaHidden = toAriaBooleanAttribute(!this.expanded);
-    this.region.inert = !this.expanded;
-    super.updateA11yAttributes();
-  }
-  toggle(force) {
-    if (this.disabled) return;
-    const state = force ?? !this.expanded;
-    if (this.expanded === state) return;
-    this.expanded = state;
-    if (state) {
-      this.emit("expand");
-    } else {
-      this.emit("collapse");
-    }
-    if (this.expanded) return;
-    const childAccordion = this.region?.querySelector("odx-accordion");
-    childAccordion?.toggleAll(false);
-  }
-  update(props) {
-    super.update(props);
-    if (props.has("expanded")) {
-      this.updateA11yAttributes();
-    }
-  }
-  render() {
-    return html`
-      <div part="label">
-        <odx-text ?emphasized=${this.expanded}>
-          <slot></slot>
-        </odx-text>
-        <slot name="end"></slot>
-      </div>
-      <odx-icon part="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
-    `;
-  }
-};
-__decorateClass$O([
-  property({ type: Boolean })
-], OdxAccordionHeaderElement.prototype, "expanded", 1);
-OdxAccordionHeaderElement = __decorateClass$O([
-  customElement("odx-accordion-header", [styles$H])
-], OdxAccordionHeaderElement);
-
-const styles$G = ":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$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (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 OdxAccordionPanelElement = class extends CustomElement {
-  render() {
-    return html`
-      <div part="container">
-        <div part="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-OdxAccordionPanelElement = __decorateClass$N([
-  customElement("odx-accordion-panel", [styles$G])
-], OdxAccordionPanelElement);
-
-const styles$F = ":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$x = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __typeError$k = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$M = (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$x(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 _handleClick$4, _handleExpand, _handleKeyboardEvent$2;
-let OdxAccordionElement = class extends CustomElement {
-  constructor() {
-    super();
-    this.multiple = false;
-    __privateAdd$k(this, _handleClick$4, (event) => {
-      event.stopPropagation();
-      if (!(event.target instanceof OdxAccordionHeaderElement)) return;
-      event.target.toggle();
-    });
-    __privateAdd$k(this, _handleExpand, (event) => {
-      event.stopPropagation();
-      if (!(event.target instanceof OdxAccordionHeaderElement) || this.multiple) return;
-      this.toggleAll(false, event.target);
-    });
-    __privateAdd$k(this, _handleKeyboardEvent$2, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderElement)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.type === "keydown") return;
-      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));
-    }
-  }
-  toggleAll(forceState, ...exceptElements) {
-    for (const control of this.controls) {
-      if (control.expanded === forceState || exceptElements.includes(control)) continue;
-      control.toggle(forceState);
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("multiple") && !this.multiple) {
-      const expandedControls = this.controls.find((control) => control.expanded);
-      this.toggleAll(false, expandedControls);
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-_handleClick$4 = new WeakMap();
-_handleExpand = new WeakMap();
-_handleKeyboardEvent$2 = new WeakMap();
-__decorateClass$M([
-  queryAssignedElements({ selector: OdxAccordionHeaderElement.selector, flatten: true })
-], OdxAccordionElement.prototype, "controls", 2);
-__decorateClass$M([
-  property({ type: Boolean })
-], OdxAccordionElement.prototype, "multiple", 2);
-OdxAccordionElement = __decorateClass$M([
-  customElement("odx-accordion", [styles$F])
-], OdxAccordionElement);
-
-const styles$E = ":host{--_background-color: var(--odx-avatar-background, var(--odx-palette-coolgray-20));--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_background-color);transition:var(--odx-transition-base);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-font-size-text-sm)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-font-size-text-md)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-font-size-text-xl)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-font-size-heading-lg)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
-
-var __defProp$w = 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;
-  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$w(target, key, result);
-  return result;
-};
-let OdxAvatarElement = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$L([
-  property({ reflect: true })
-], OdxAvatarElement.prototype, "size", 2);
-__decorateClass$L([
-  property({ reflect: true })
-], OdxAvatarElement.prototype, "variant", 2);
-OdxAvatarElement = __decorateClass$L([
-  customElement("odx-avatar", [styles$E])
-], OdxAvatarElement);
-
-const AvatarSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-
-const AvatarVariant = {
-  CIRCLE: "circle",
-  RECTANGLE: "rectangle"
-};
-
-const styles$D = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-outline-sm);border-color:var(--odx-color-surface)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
-
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(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);
-  return result;
-};
-let OdxAvatarGroupElement = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$K([
-  property({ reflect: true })
-], OdxAvatarGroupElement.prototype, "size", 2);
-__decorateClass$K([
-  property({ reflect: true })
-], OdxAvatarGroupElement.prototype, "variant", 2);
-OdxAvatarGroupElement = __decorateClass$K([
-  customElement("odx-avatar-group", [styles$D])
-], OdxAvatarGroupElement);
-
-const styles$C = ":host{--color-fill: var(--odx-color-surface);--color-text: var(--odx-color-text);--__font-size: var(--odx-font-size-text-sm);display:inline-block;line-height:0}:host::part(content){block-size:var(--odx-size-150);line-height:var(--odx-size-150);min-inline-size:var(--odx-size-150);border-radius:var(--odx-size-150);background-color:var(--color-fill);color:var(--color-text);cursor:default;user-select:none;padding-inline:var(--odx-size-50)}:host([variant=\"primary\"])::part(content){--color-fill: var(--odx-color-primary);--color-text: var(--odx-color-primary-text)}:host([variant=\"neutral\"])::part(content){--color-fill: var(--odx-color-neutral);--color-text: var(--odx-color-neutral-text)}:host([variant=\"accent\"])::part(content){--color-fill: var(--odx-color-accent);--color-text: var(--odx-color-accent-text)}:host([variant=\"success\"])::part(content){--color-fill: var(--odx-color-success);--color-text: var(--odx-color-success-text)}:host([variant=\"warning\"])::part(content){--color-fill: var(--odx-color-warning);--color-text: var(--odx-color-warning-text)}:host([variant=\"danger\"])::part(content){--color-fill: var(--odx-color-danger);--color-text: var(--odx-color-danger-text)}";
-
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(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);
-  return result;
-};
-let OdxBadgeElement = class extends CustomElement {
-  render() {
-    return html`
-      <odx-text size="sm" highlight part="content" odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-__decorateClass$J([
-  property({ reflect: true })
-], OdxBadgeElement.prototype, "variant", 2);
-OdxBadgeElement = __decorateClass$J([
-  customElement("odx-badge", [styles$C])
-], OdxBadgeElement);
-
-const BadgeVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-
-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}";
-
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let CardElement = class extends CanBeDisabled(CustomElement) {
-  render() {
-    return html`
-      ${optionalSlot(this, "header")}
-      ${optionalSlot(this, "image")}
-      ${optionalSlot(this, "avatar")}
-      ${optionalSlot(this, "title")}
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-CardElement = __decorateClass$I([
-  customElement("odx-card", [styles$B])
-], 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)}";
-
-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) => {
-  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$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 _handleActionClick, _handleClick$3;
-let OdxChipElement = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.interactive = false;
-    __privateAdd$h(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) => {
-      if (this.removable) {
-        const actionElement = getElementFromEvent(event, (node) => node.getAttribute("part") === "action");
-        if (actionElement) return;
-      }
-      if (!this.interactive) {
-        event.stopPropagation();
-      }
-    });
-  }
-  render() {
-    return html`
-      <odx-text part="content" size="sm" highlight odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-      ${when(this.removable, () => this.renderAction())}
-    `;
-  }
-  renderAction() {
-    return html`
-      <button part="action" @click=${__privateGet$e(this, _handleActionClick)}>
-        <odx-icon name="close" set="core"></odx-icon>
-      </button>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("interactive") || changes.has("disabled")) {
-      if (!this.disabled) {
-        toggleAttribute(this, "tabindex", this.interactive ? 0 : null);
-        toggleAttribute(this.actionElement, "tabindex", this.interactive ? -1 : null);
-      }
-    }
-  }
-  updated(changes) {
-    if (changes.has("removable") || changes.has("interactive") || changes.has("disabled")) {
-      if (this.removable || this.interactive) {
-        this.addEventListener("click", __privateGet$e(this, _handleClick$3), { capture: true });
-      } else {
-        this.removeEventListener("click", __privateGet$e(this, _handleClick$3));
-      }
-    }
-  }
-};
-_handleActionClick = new WeakMap();
-_handleClick$3 = new WeakMap();
-__decorateClass$D([
-  query('[part="action"]')
-], OdxChipElement.prototype, "actionElement", 2);
-__decorateClass$D([
-  property({ type: Boolean, reflect: true })
-], OdxChipElement.prototype, "removable", 2);
-__decorateClass$D([
-  property({ type: Boolean, reflect: true })
-], OdxChipElement.prototype, "interactive", 2);
-__decorateClass$D([
-  property({ reflect: true })
-], OdxChipElement.prototype, "variant", 2);
-OdxChipElement = __decorateClass$D([
-  customElement("odx-chip", [styles$y])
-], OdxChipElement);
-
-const ChipVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  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 CircularProgressBarSize = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large"
-};
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$A = 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;
-  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);
-  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 _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);
-    this.viewPortSize = 100;
-    this.stroke = 1;
-    this.indeterminate = false;
-    this.size = CircularProgressBarSize.MEDIUM;
-  }
-  set value(val) {
-    if (val >= -1 && val <= 100) {
-      __privateSet$2(this, _value, val);
-      this.indeterminate = val === -1;
-      this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : val}`);
-    } else {
-      console.warn(`Invalid value (${val}). Value must be between -1 and 100.`);
-    }
-  }
-  get value() {
-    return __privateGet$d(this, _value);
-  }
-  firstUpdated(changes) {
-    super.firstUpdated?.(changes);
-    SharedResizeObserver.observe(this, () => {
-      this.requestUpdate();
-    });
-    this.setAttributes();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback?.();
-    SharedResizeObserver.unobserve(this);
-  }
-  render() {
-    return html`
-      <svg part="inner" viewBox="0 0 ${this.viewPortSize} ${this.viewPortSize}">
-        <circle
-          part="track"
-          stroke-width="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, radius_get)}"
-          cx="50%"
-          cy="50%"
-        />
-        <circle
-          part="indicator"
-          stroke-dasharray="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, circumference_get)}"
-          stroke-dashoffset="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, progressValue_get)}"
-          stroke-width="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get)}"
-          r="${__privateGet$d(this, _OdxCircularProgressBarElement_instances, radius_get)}"
-          cx="50%"
-          cy="50%"
-        />
-      </svg>
-    `;
-  }
-  setAttributes() {
-    this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : this.value}`);
-    this.setAttribute("aria-valuemax", "100");
-    this.setAttribute("aria-valuemin", "0");
-    this.setAttribute("role", "meter");
-  }
-};
-_value = new WeakMap();
-_OdxCircularProgressBarElement_instances = new WeakSet();
-circumference_get = function() {
-  return Math.floor(2 * __privateGet$d(this, _OdxCircularProgressBarElement_instances, radius_get) * Math.PI);
-};
-radius_get = function() {
-  return Math.max(0, this.viewPortSize / 2 - __privateGet$d(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get) / 2);
-};
-progressValue_get = function() {
-  return this.indeterminate ? __privateGet$d(this, _OdxCircularProgressBarElement_instances, circumference_get) : Math.floor((1 - __privateGet$d(this, _value) / 100) * __privateGet$d(this, _OdxCircularProgressBarElement_instances, circumference_get));
-};
-normalizedStrokeWidth_get = function() {
-  if (this.stroke < 0) return 0;
-  const normalizeFactor = this.viewPortSize / (this.offsetWidth || 1);
-  let stroke = normalizeFactor * this.stroke;
-  if (normalizeFactor >= 3) {
-    stroke = Math.max(0, stroke - normalizeFactor);
-  }
-  return stroke;
-};
-__decorateClass$C([
-  property({ type: Number })
-], OdxCircularProgressBarElement.prototype, "value", 1);
-__decorateClass$C([
-  property({ type: Number, reflect: true })
-], OdxCircularProgressBarElement.prototype, "stroke", 2);
-__decorateClass$C([
-  property({ type: Boolean, reflect: true })
-], OdxCircularProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$C([
-  property({ reflect: true })
-], OdxCircularProgressBarElement.prototype, "size", 2);
-OdxCircularProgressBarElement = __decorateClass$C([
-  customElement("odx-circular-progress-bar", [styles$x])
-], 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}";
-
-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;
-  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);
-  return result;
-};
-let OdxGrid = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$B([
-  property({ type: Number })
-], OdxGrid.prototype, "columns", 2);
-__decorateClass$B([
-  property()
-], OdxGrid.prototype, "gap", 2);
-OdxGrid = __decorateClass$B([
-  customElement("odx-grid", [styles$w])
-], OdxGrid);
-
-const GridGap = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  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 DropdownPlacement = {
-  TOP: PopoverPlacement.TOP,
-  BOTTOM: PopoverPlacement.BOTTOM
-};
-
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __typeError$f = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$A = (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$m(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 _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);
-    this.matchReferenceWidth = false;
-    this.placement = DropdownPlacement.BOTTOM;
-    __privateAdd$f(this, _handleMouseEvent, (event) => {
-      this.togglePopover();
-    });
-    __privateAdd$f(this, _handleKeyboardEvent$1, (event) => {
-      if (event.key !== "Enter") return;
-      this.togglePopover();
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.id ||= getUniqueId("odx-dropdown");
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    if (this.disabled || !referenceElement) return;
-    __privateMethod$7(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);
-    }
-  }
-  unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
-    __privateMethod$7(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);
-  }
-  render() {
-    return html`
-      <odx-popover>
-        <slot></slot>
-      </odx-popover>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("id")) {
-      __privateMethod$7(this, _OdxDropdownElement_instances, updateAriaAttributes_fn$1).call(this, this.referenceElement, this.id);
-    }
-    if (changes.has("disabled")) {
-      if (this.disabled) {
-        this.referenceElement && this.unmountPopover(this.referenceElement);
-      } else {
-        this.mountPopover(this.referenceElement);
-      }
-    }
-    if (changes.has("matchReferenceWidth")) {
-      if (this.matchReferenceWidth) {
-        __privateMethod$7(this, _OdxDropdownElement_instances, observeReferenceElement_fn).call(this);
-      } else {
-        __privateMethod$7(this, _OdxDropdownElement_instances, unobserveReferenceElement_fn).call(this);
-      }
-    }
-  }
-};
-_OdxDropdownElement_instances = new WeakSet();
-observeReferenceElement_fn = function() {
-  if (!this.referenceElement) return;
-  SharedResizeObserver.observe(this.referenceElement, () => {
-    const referenceWidth = this.referenceElement?.offsetWidth ?? null;
-    if (referenceWidth !== null) {
-      this.popoverElement.style.setProperty("--_reference-inline-size", `${referenceWidth}px`);
-    }
-  });
-};
-unobserveReferenceElement_fn = function() {
-  if (!this.referenceElement) return;
-  SharedResizeObserver.unobserve(this.referenceElement);
-};
-updateAriaAttributes_fn$1 = function(referenceElement, id) {
-  toggleAttribute(referenceElement, "aria-describedby", id);
-};
-_handleMouseEvent = new WeakMap();
-_handleKeyboardEvent$1 = new WeakMap();
-__decorateClass$A([
-  query("odx-popover", true)
-], OdxDropdownElement.prototype, "popoverElement", 2);
-__decorateClass$A([
-  property({ type: Boolean, reflect: true })
-], OdxDropdownElement.prototype, "matchReferenceWidth", 2);
-__decorateClass$A([
-  property({ type: String, reflect: true })
-], OdxDropdownElement.prototype, "placement", 2);
-OdxDropdownElement = __decorateClass$A([
-  customElement("odx-dropdown", [styles$v])
-], OdxDropdownElement);
-
-const styles$u = ":host{display:block}";
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$x = 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;
-  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);
-  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 _handleSlotChange$3;
-const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
-let OdxFormFieldElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$e(this, _handleSlotChange$3, () => {
-      this.control?.addEventListener("change", () => this.requestUpdate());
-    });
-  }
-  get control() {
-    return this.elements.find((element) => element.hasAttribute(FORM_FIELD_CONTROL_SELECTOR));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-  }
-  render() {
-    const isValid = this.control?.checkValidity();
-    return html`
-      <slot @slotchange=${__privateGet$b(this, _handleSlotChange$3)}></slot>
-      ${when(isValid === false, () => this.renderErrorMessage())} 
-      
-    `;
-  }
-  renderErrorMessage() {
-    return html`
-      <odx-inline-message variant="danger">
-        ${this.control?.validationMessage}
-      </odx-inline-message>
-    `;
-  }
-};
-_handleSlotChange$3 = new WeakMap();
-__decorateClass$z([
-  queryAssignedElements({ flatten: true })
-], OdxFormFieldElement.prototype, "elements", 2);
-OdxFormFieldElement = __decorateClass$z([
-  customElement("odx-form-field", [styles$u])
-], OdxFormFieldElement);
-
-const styles$t = ":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;
-  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);
-  return result;
-};
-let OdxInlineMessageElement = class extends CustomElement {
-  render() {
-    return html`
-      <odx-text size="sm">
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-__decorateClass$y([
-  property({ reflect: true })
-], OdxInlineMessageElement.prototype, "variant", 2);
-OdxInlineMessageElement = __decorateClass$y([
-  customElement("odx-inline-message", [styles$t])
-], OdxInlineMessageElement);
-
-const InlineMessageVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-
-const styles$s = ":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;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxListItemElement = class extends BaseLink {
-  render() {
-    return html`
-      <slot name="start"></slot>
-      ${this.href ? super.render() : html`<slot></slot>`}
-      <slot name="end"></slot>
-    `;
-  }
-};
-OdxListItemElement = __decorateClass$x([
-  customElement("odx-list-item", [styles$s])
-], OdxListItemElement);
-
-const styles$r = "";
-
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (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 = (decorator(result)) || result;
-  return result;
-};
-let OdxListElement = class extends CustomElement {
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-};
-OdxListElement = __decorateClass$w([
-  customElement("odx-list", [styles$r])
-], 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}";
-
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __typeError$d = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$v = (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);
-  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 _loadingContainerPosition;
-const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-let OdxLoadingOverlayElement = class extends WithLoadingState(CustomElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$d(this, _loadingContainerPosition, "");
-  }
-  get loadingContainer() {
-    return this.parentElement ?? this;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback?.();
-    this.hideOverlay();
-  }
-  async updated(props) {
-    if (props.has("loading")) {
-      if (this.loading) {
-        this.showOverlay();
-      } else {
-        await waitForAnimations(this.overlay);
-        this.hideOverlay();
-      }
-    }
-  }
-  render() {
-    return html`
-      <div part="overlay">
-        <div part="content">
-          <slot ${emptySlotFallbackFix()}>
-            <odx-loading-indicator></odx-loading-indicator>
-          </slot>
-        </div>
-      </div>
-    `;
-  }
-  showOverlay() {
-    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, true);
-    __privateSet$1(this, _loadingContainerPosition, window.getComputedStyle(this.loadingContainer).position);
-    if (__privateGet$a(this, _loadingContainerPosition) !== "static") return;
-    this.loadingContainer.style.position = "relative";
-  }
-  hideOverlay() {
-    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
-    if (__privateGet$a(this, _loadingContainerPosition) !== "static") return;
-    this.loadingContainer.style.position = "";
-  }
-};
-_loadingContainerPosition = new WeakMap();
-__decorateClass$v([
-  query('[part="overlay"]', true)
-], OdxLoadingOverlayElement.prototype, "overlay", 2);
-OdxLoadingOverlayElement = __decorateClass$v([
-  customElement("odx-loading-overlay", [styles$q])
-], OdxLoadingOverlayElement);
-
-var __getOwnPropDesc$s = 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;
-  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 _handleClick$2;
-let OdxMainMenuButtonElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$c(this, _handleClick$2, (event) => {
-      document.querySelector("odx-main-menu")?.open();
-    });
-  }
-  render() {
-    return html`
-      <odx-icon-button aria-label="Open main menu" icon="core::menu" variant="ghost" @click=${__privateGet$9(this, _handleClick$2)}>
-      </odx-icon-button>
-    `;
-  }
-};
-_handleClick$2 = new WeakMap();
-OdxMainMenuButtonElement = __decorateClass$u([
-  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}";
-
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (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;
-  return result;
-};
-let OdxMainMenuLink = class extends BaseLink {
-};
-OdxMainMenuLink = __decorateClass$t([
-  customElement("odx-main-menu-link", [styles$p])
-], 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;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxMainMenuSubtitleElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.slot = "subtitle";
-  }
-  render() {
-    return html`
-      <odx-text size="md">
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-OdxMainMenuSubtitleElement = __decorateClass$s([
-  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;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxMainMenuTitleElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.slot = "title";
-  }
-  render() {
-    return html`
-      <odx-title size="sm">
-        <slot></slot>
-      </odx-title>
-    `;
-  }
-};
-OdxMainMenuTitleElement = __decorateClass$r([
-  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)}";
-
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __typeError$b = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$q = (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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(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 _focusTrap, _handleSlotChange$2, _handleToggle;
-const LINK_NAVIGATION_SLOT = "link-navigation";
-let OdxMainMenuElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$b(this, _focusTrap, new FocusTrapController(this));
-    __privateAdd$b(this, _handleSlotChange$2, () => {
-      for (const link of this.links) {
-        link.slot = LINK_NAVIGATION_SLOT;
-      }
-    });
-    __privateAdd$b(this, _handleToggle, ({ newState }) => {
-      __privateGet$8(this, _focusTrap).toggle(newState === "open");
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.popover = "auto";
-    this.addEventListener("toggle", __privateGet$8(this, _handleToggle));
-  }
-  toggle() {
-    this.togglePopover();
-  }
-  open() {
-    this.showPopover();
-  }
-  close() {
-    this.hidePopover();
-  }
-  render() {
-    return html`
-      <div part="header">
-        <slot name="title"></slot>
-        <slot name="subtitle"></slot>
-      </div>
-      <nav part="navigation">
-        <odx-stack gap="md" align-items="stretch">
-          <slot @slotchange=${__privateGet$8(this, _handleSlotChange$2)}></slot>
-        </odx-stack>
-      </nav>
-      <odx-stack part="link-navigation" gap="xs"  wrap horizontal justify-content="start">
-        <slot name="${LINK_NAVIGATION_SLOT}"></slot>
-      </odx-stack>
-      <div part="footer">
-        <odx-logo size="sm"></odx-logo>
-      </div>
-    `;
-  }
-};
-_focusTrap = new WeakMap();
-_handleSlotChange$2 = new WeakMap();
-_handleToggle = new WeakMap();
-__decorateClass$q([
-  queryAssignedElements({ selector: OdxLinkComponent.selector, flatten: true })
-], OdxMainMenuElement.prototype, "links", 2);
-OdxMainMenuElement = __decorateClass$q([
-  customElement("odx-main-menu", [styles$o])
-], 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))}";
-
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (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;
-  return result;
-};
-let OdxMenuItemElement = class extends CustomElement {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role ||= "menuitem";
-  }
-  render() {
-    return html`
-      <odx-text part="base" class="menu-item" tabindex="0">
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-OdxMenuItemElement.shadowRootOptions = {
-  ...CustomElement.shadowRootOptions,
-  delegatesFocus: true
-};
-OdxMenuItemElement = __decorateClass$p([
-  customElement("odx-menu-item", [styles$n])
-], 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))}";
-
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (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;
-  return result;
-};
-let OdxMenuLabelElement = class extends CustomElement {
-  render() {
-    return html`
-      <odx-title part="base" class="menu-label" size="xs">
-        <slot></slot>
-      </odx-title>
-    `;
-  }
-};
-OdxMenuLabelElement = __decorateClass$o([
-  customElement("odx-menu-label", [styles$m])
-], 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%}";
-
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$a = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$n = (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 = (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 _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, {
-      elements: () => this.getItems(),
-      direction: "vertical"
-    }));
-    __privateAdd$a(this, _handleReferenceInteraction, () => {
-      this.togglePopover();
-    });
-    __privateAdd$a(this, _handleClick$1, (event) => {
-      const eventPath = event.composedPath();
-      const closestMenu = eventPath.find((element) => element.localName === this.localName);
-      if (this !== closestMenu) return;
-      const item = eventPath.find((element) => this.isMenuItem(element));
-      if (!item) return;
-      this.emit("select", { detail: { item } });
-      this.hidePopover();
-    });
-    __privateAdd$a(this, _handleKeyDown, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if ((actions.tab || actions.backTab) && this.isPopoverOpen()) {
-        event?.preventDefault();
-        event.stopPropagation();
-        this.hidePopover();
-        return;
-      }
-      if (!actions.enter && !actions.space) return;
-      const [activeItem] = this.getItems().filter((item) => item.tabIndex === 0);
-      if (!activeItem) return;
-      activeItem.click();
-    });
-    __privateAdd$a(this, _handleReferenceKeyDown, (event) => {
-      const { direction } = getKeyboardEventInfo(event);
-      if (!direction.down) return;
-      this.showPopover();
-    });
-  }
-  getItems() {
-    return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role ||= "menu";
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    referenceElement?.addEventListener("click", __privateGet$7(this, _handleReferenceInteraction));
-    referenceElement?.addEventListener("keydown", __privateGet$7(this, _handleReferenceKeyDown));
-  }
-  unmountPopover(referenceElement) {
-    referenceElement.removeEventListener("keydown", __privateGet$7(this, _handleReferenceKeyDown));
-    referenceElement.removeEventListener("click", __privateGet$7(this, _handleReferenceInteraction));
-    super.unmountPopover(referenceElement);
-  }
-  onBeforePopoverShow() {
-    __privateGet$7(this, _tabindexController).currentIndex = 0;
-    __privateGet$7(this, _tabindexController).focus();
-  }
-  onPopoverShow() {
-    this.addEventListener("keydown", __privateGet$7(this, _handleKeyDown));
-  }
-  onBeforePopoverHide() {
-    this.removeEventListener("keydown", __privateGet$7(this, _handleKeyDown));
-  }
-  isMenuItem(element) {
-    return MENU_ITEM_ROLES.includes(element.getAttribute?.("role") ?? "");
-  }
-  render() {
-    return html`
-      <odx-popover>
-        <slot @click=${__privateGet$7(this, _handleClick$1)}></slot>
-      </odx-popover>
-    `;
-  }
-};
-_tabindexController = new WeakMap();
-_handleReferenceInteraction = new WeakMap();
-_handleClick$1 = new WeakMap();
-_handleKeyDown = new WeakMap();
-_handleReferenceKeyDown = new WeakMap();
-OdxMenuElement = __decorateClass$n([
-  customElement("odx-menu", [styles$l])
-], OdxMenuElement);
-
-const ProgressState = {
-  CONFIRM: "confirm",
-  SUCCESS: "success",
-  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)}}";
-
-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;
-  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);
-  return result;
-};
-let OdxProgressBarElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.indeterminate = false;
-    this.min = 0;
-    this.max = 100;
-    this.value = 0;
-    this.condensed = false;
-    this.hideValue = false;
-  }
-  get valuePercentage() {
-    return clamp(round(this.value - this.min / this.max - this.min, 2), this.min, this.max);
-  }
-  get valueHidden() {
-    return this.hideValue || !this.valueText && this.indeterminate;
-  }
-  render() {
-    return html`
-      ${when(this.label, (label) => html`<div part="label" aria-hidden="true">${label}</div>`)}
-      ${when(!this.valueHidden, () => html`<odx-text part="value" aria-hidden="true">${this.valuePercentage}%</odx-text>`)}
-      <div
-        part="base"
-        role="progressbar"
-        title=${optionalAttr(this.title)}
-        aria-label=${optionalAttr(this.label)}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow=${this.indeterminate ? 0 : this.value}
-        style=${styleMap({ "--_value-percentage": this.valuePercentage })}
-        >
-
-        <div part="indicator"></div>
-      </div>
-    `;
-  }
-};
-__decorateClass$m([
-  queryAssignedElements()
-], OdxProgressBarElement.prototype, "content", 2);
-__decorateClass$m([
-  property({ type: Boolean, reflect: true })
-], OdxProgressBarElement.prototype, "indeterminate", 2);
-__decorateClass$m([
-  property({ type: Number })
-], OdxProgressBarElement.prototype, "min", 2);
-__decorateClass$m([
-  property({ type: Number })
-], OdxProgressBarElement.prototype, "max", 2);
-__decorateClass$m([
-  property({ type: Number })
-], OdxProgressBarElement.prototype, "value", 2);
-__decorateClass$m([
-  property({ type: Boolean, reflect: true })
-], OdxProgressBarElement.prototype, "condensed", 2);
-__decorateClass$m([
-  property({ reflect: true })
-], OdxProgressBarElement.prototype, "state", 2);
-__decorateClass$m([
-  property({ type: Boolean, reflect: true })
-], OdxProgressBarElement.prototype, "hideValue", 2);
-__decorateClass$m([
-  property()
-], OdxProgressBarElement.prototype, "label", 2);
-__decorateClass$m([
-  property()
-], OdxProgressBarElement.prototype, "valueText", 2);
-OdxProgressBarElement = __decorateClass$m([
-  customElement("odx-progress-bar", [styles$k])
-], 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;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __typeError$8 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(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$c(target, key, result);
-  return result;
-};
-var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
-var __privateGet$6 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _removeChip, _handleDropdownClick;
-let OdxSelectElement = class extends SelectControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd$8(this, _removeChip, async (option) => {
-      this.toggle(option);
-    });
-    __privateAdd$8(this, _handleDropdownClick, (event) => {
-      const option = getElementFromEvent(event, (node) => !!this.options?.some((option2) => option2 === node));
-      if (!option) return;
-      event.stopPropagation();
-      if (option.disabled) return;
-      this.toggle(option);
-      if (this.multiple) return;
-      this.dropdownElement.hidePopover();
-    });
-  }
-  render() {
-    return html`
-        <div part="trigger" id="select-trigger" tabindex="0">
-            ${when(
-      Array.from(this.selectedOptions).length,
-      () => this.renderSelectedOptions(),
-      () => html`<slot name="placeholder">Select options</slot>`
-    )}
-          <odx-icon part="indicator" name="chevron-down" set="core"></odx-icon>
-        </div>
-        <odx-dropdown part="dropdown" anchor="select-trigger" ?disabled=${this.disabled} matchReferenceWidth @click=${__privateGet$6(this, _handleDropdownClick)}>
-          <slot></slot>
-        </odx-dropdown>
-    `;
-  }
-  renderSelectedOptions() {
-    const selectedOptions = Array.from(this.selectedOptions);
-    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>`
-      )}`;
-    }
-    return html`${selectedOptions[0]?.getTextLabel()}`;
-  }
-};
-_removeChip = new WeakMap();
-_handleDropdownClick = new WeakMap();
-__decorateClass$g([
-  query(OdxDropdownElement.selector, true)
-], OdxSelectElement.prototype, "dropdownElement", 2);
-OdxSelectElement = __decorateClass$g([
-  customElement("odx-select", [styles$g])
-], OdxSelectElement);
-
-const styles$f = "@keyframes odx-skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host{--_color-fill: var(--odx-color-fill-control-disabled);display:block;background:var(--_color-fill);block-size:var(--odx-size-150);inline-size:100%;&:after{content:\"\";display:block;block-size:100%;inline-size:100%;background:linear-gradient(90deg,transparent 33%,white 66%,transparent 75%);background-size:200% 100%;animation:odx-skeleton-loading 5s infinite linear;opacity:.25}}:host([rounded]:not([rounded=\"false\"])){border-radius:var(--odx-border-radius-md)}";
-
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(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$b(target, key, result);
-  return result;
-};
-let OdxSkeletonElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.rounded = false;
-  }
-  render() {
-    return html``;
-  }
-};
-__decorateClass$f([
-  property({ type: Boolean, reflect: true })
-], OdxSkeletonElement.prototype, "rounded", 2);
-OdxSkeletonElement = __decorateClass$f([
-  customElement("odx-skeleton", [styles$f])
-], OdxSkeletonElement);
-
-const SliderLabelVisibility = {
-  AUTO: "auto",
-  HIDDEN: "hidden"
-};
-
-const SliderTrackVisibility = {
-  AUTO: "auto",
-  HIDDEN: "hidden",
-  VISIBLE: "visible"
-};
-
-const sliderContext = {
-  context: createContext("odx-slider::context"),
-  defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
-};
-
-const styles$e = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-primary-text);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-palette-cyan-50)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([disabled]){pointer-events:none}:host([disabled])::part(thumb){--_thumb-color: var(--odx-color-primary-disabled);z-index:var(--_layer-interactive-disabled)}";
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __typeError$7 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(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$a(target, key, result);
-  return result;
-};
-var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$7(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck$7(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod$5 = (obj, member, method) => (__accessCheck$7(obj, member, "access private method"), method);
-var _previousHandle, _nextHandle, _OdxSliderHandleElement_instances, isLabelVisible_fn, isTrackVisible_fn, findClosestValue_fn, updatePosition_fn, getValueFromPosition_fn, calculateValue_fn, limitValue_fn, findPreviousHandle_fn, findNextHandle_fn;
-let OdxSliderHandleElement = class extends IsDraggable(NumberControl(CustomElement)) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$7(this, _OdxSliderHandleElement_instances);
-    this.context = sliderContext.defaultValue;
-    __privateAdd$7(this, _previousHandle, null);
-    __privateAdd$7(this, _nextHandle, null);
-  }
-  get minRange() {
-    return Math.ceil(this.context.minRange / this.context.step) * this.context.step;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "slider";
-    this.slot = "thumbs";
-    this.tabIndex = 0;
-  }
-  beforeDragStart(event) {
-    super.beforeDragStart?.(event);
-    __privateGet$5(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    this.value = __privateMethod$5(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, __privateMethod$5(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position));
-    this.focus();
-  }
-  dragStart(event) {
-    super.dragStart?.(event);
-    __privateMethod$5(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position));
-  }
-  dragMove(event) {
-    super.dragMove?.(event);
-    const value = __privateMethod$5(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position);
-    const closestValue = __privateMethod$5(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, value);
-    if (this.value !== closestValue) {
-      this.value = closestValue;
-    }
-    __privateMethod$5(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, value);
-  }
-  afterDragEnd(event) {
-    super.afterDragEnd?.(event);
-    __privateGet$5(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    __privateMethod$5(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, this.value));
-  }
-  getDistance(containerElement, event) {
-    const rect = containerElement.getBoundingClientRect();
-    const relativePosition = round((event.x - rect.x) / rect.width) * 100;
-    return Math.abs(this.value - __privateMethod$5(this, _OdxSliderHandleElement_instances, calculateValue_fn).call(this, relativePosition));
-  }
-  getValueText() {
-    return this.context.unit ? `${this.value}${this.context.unit}` : super.getValueText();
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("value")) {
-      this.value = __privateMethod$5(this, _OdxSliderHandleElement_instances, limitValue_fn).call(this, this.value);
-      this.ariaValueNow = String(this.value);
-    }
-    if (props.has("disabled")) {
-      this.dragDisabled = this.disabled;
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (this.isDragActive) return;
-    __privateSet(this, _previousHandle, __privateMethod$5(this, _OdxSliderHandleElement_instances, findPreviousHandle_fn).call(this));
-    __privateSet(this, _nextHandle, __privateMethod$5(this, _OdxSliderHandleElement_instances, findNextHandle_fn).call(this));
-    __privateMethod$5(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, this.value));
-  }
-  render() {
-    const label = this.getValueText() || this.value;
-    return html`
-      ${when(__privateMethod$5(this, _OdxSliderHandleElement_instances, isTrackVisible_fn).call(this), () => html`<div part="track with-motion"></div>`)}
-      <div part="thumb with-motion" tabindex="0"></div>
-      ${when(__privateMethod$5(this, _OdxSliderHandleElement_instances, isLabelVisible_fn).call(this), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
-    `;
-  }
-};
-_previousHandle = new WeakMap();
-_nextHandle = new WeakMap();
-_OdxSliderHandleElement_instances = new WeakSet();
-isLabelVisible_fn = function() {
-  return this.context.labelVisibility !== SliderLabelVisibility.HIDDEN;
-};
-isTrackVisible_fn = function() {
-  if (this.trackVisibility === SliderTrackVisibility.VISIBLE) {
-    return true;
-  }
-  if (this.trackVisibility === SliderTrackVisibility.HIDDEN) {
-    return false;
-  }
-  return !!__privateGet$5(this, _previousHandle) || !__privateGet$5(this, _previousHandle) && !__privateGet$5(this, _nextHandle);
-};
-findClosestValue_fn = function(value) {
-  const closestValue = value - value % this.context.step;
-  const isNextValue = value - closestValue > this.context.step / 2;
-  return __privateMethod$5(this, _OdxSliderHandleElement_instances, limitValue_fn).call(this, closestValue + (isNextValue ? this.context.step : 0));
-};
-updatePosition_fn = function(value) {
-  const valuePercentage = `${round(clamp((value - this.context.min) / this.context.range, 0, 1) * 100, 3)}%`;
-  this.style.setProperty("--_position", valuePercentage);
-  __privateGet$5(this, _nextHandle)?.style.setProperty("--_previous-position", valuePercentage);
-  __privateGet$5(this, _previousHandle)?.style.setProperty("--_next-position", valuePercentage);
-};
-getValueFromPosition_fn = function(position) {
-  return __privateMethod$5(this, _OdxSliderHandleElement_instances, limitValue_fn).call(this, __privateMethod$5(this, _OdxSliderHandleElement_instances, calculateValue_fn).call(this, position.x));
-};
-calculateValue_fn = function(relativePosition) {
-  return clamp(relativePosition / 100, 0, 1) * this.context.range + this.context.min;
-};
-limitValue_fn = function(value) {
-  const startLimit = __privateGet$5(this, _previousHandle) ? Math.max(__privateGet$5(this, _previousHandle).value, this.min - this.minRange) + this.minRange : this.min;
-  const endLimit = __privateGet$5(this, _nextHandle) ? Math.min(__privateGet$5(this, _nextHandle).value, this.max + this.minRange) - this.minRange : this.max;
-  return clamp(value, startLimit, endLimit);
-};
-findPreviousHandle_fn = function() {
-  let sibling = this.previousElementSibling;
-  while (sibling) {
-    if (sibling instanceof OdxSliderHandleElement) return sibling;
-    sibling = sibling.previousElementSibling;
-  }
-  return null;
-};
-findNextHandle_fn = function() {
-  let sibling = this.nextElementSibling;
-  while (sibling) {
-    if (sibling instanceof OdxSliderHandleElement) return sibling;
-    sibling = sibling.nextElementSibling;
-  }
-  return null;
-};
-__decorateClass$e([
-  consume({ context: sliderContext.context, subscribe: true })
-], OdxSliderHandleElement.prototype, "context", 2);
-__decorateClass$e([
-  property()
-], OdxSliderHandleElement.prototype, "trackVisibility", 2);
-OdxSliderHandleElement = __decorateClass$e([
-  customElement("odx-slider-handle", [styles$e])
-], OdxSliderHandleElement);
-
-const styles$d = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: 2px;display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark]:hover{color:var(--odx-color-text-hint)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
-
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (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$9(target, key, result);
-  return result;
-};
-let OdxSliderMarksElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.context = sliderContext.defaultValue;
-    this.showLabels = false;
-  }
-  async connectedCallback() {
-    super.connectedCallback?.();
-    this.slot = "marks";
-  }
-  render() {
-    const step = this.step ?? this.context.step;
-    const markCount = Math.floor(this.context.range / step);
-    const marks = new Array(markCount).fill(null).map((_, index) => step * index + this.context.min);
-    return html`
-      ${repeat(marks, (value) => this.renderMark(value))}
-      ${this.renderMark(this.context.max, true)}
-    `;
-  }
-  renderMark(value, last = false) {
-    const label = this.showLabels ? html`<odx-text part="mark-label" size="xs" highlight>${value}</odx-text>` : nothing;
-    return html`
-      <div part="mark" ?last=${last}>
-        <span part="mark-tick"></span>
-        ${label}
-      </div>
-    `;
-  }
-};
-__decorateClass$d([
-  consume({ context: sliderContext.context, subscribe: true })
-], OdxSliderMarksElement.prototype, "context", 2);
-__decorateClass$d([
-  property({ type: Number })
-], OdxSliderMarksElement.prototype, "step", 2);
-__decorateClass$d([
-  property({ type: Boolean, reflect: true })
-], OdxSliderMarksElement.prototype, "showLabels", 2);
-OdxSliderMarksElement = __decorateClass$d([
-  customElement("odx-slider-marks", [styles$d])
-], OdxSliderMarksElement);
-
-const styles$c = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;min-height:var(--odx-size-300);padding-block-start:var(--odx-size-75);padding-block-end:var(--odx-size-50);padding-inline:var(--odx-size-75);cursor:pointer}:host(:active){cursor:grabbing}:host::part(container){block-size:var(--_track-size);position:relative;background-color:var(--odx-palette-coolgray-40);border-radius:var(--odx-border-radius-sm)}";
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __typeError$6 = (msg) => {
-  throw TypeError(msg);
-};
-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$8(target, key, result);
-  return result;
-};
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleKeyboardEvent, _handleSlotChange$1;
-let OdxSliderElement = class extends CustomElement {
-  constructor() {
-    super();
-    this.dragController = new DragController(this, {
-      getDraggableElements: () => Array.from(this.querySelectorAll(OdxSliderHandleElement.selector)),
-      getContainer: () => this.container
-    });
-    this.context = sliderContext.defaultValue;
-    __privateAdd$6(this, _handleKeyboardEvent, (event) => {
-      const { actions, direction } = getKeyboardEventInfo(event);
-      const target = event.target;
-      if (target.localName !== OdxSliderHandleElement.selector || actions.tab || actions.backTab || target.disabled) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (direction.left || direction.down) {
-        target.value -= this.step;
-      } else if (direction.right || direction.up) {
-        target.value += this.step;
-      } else if (actions.start) {
-        target.value = this.context.min;
-      } else if (actions.end) {
-        target.value = this.context.max;
-      }
-    });
-    __privateAdd$6(this, _handleSlotChange$1, async () => {
-      const elements = this.dragController.draggableElements;
-      const min = minBy(elements, (elment) => elment.min)?.min ?? 0;
-      const max = maxBy(elements, (element) => element.max)?.max ?? 1;
-      this.context = { ...this.context, min, max, range: Math.abs(max - min) };
-    });
-    if (!isServer) {
-      this.addEventListener("keydown", __privateGet$4(this, _handleKeyboardEvent));
-    }
-  }
-  set step(value) {
-    this.context = { ...this.context, step: Math.max(1, value) };
-  }
-  get step() {
-    return this.context.step;
-  }
-  set minRange(value) {
-    this.context = { ...this.context, minRange: Math.max(0, value) };
-  }
-  get minRange() {
-    return this.context.minRange;
-  }
-  set labelVisibility(value) {
-    this.context = { ...this.context, labelVisibility: value };
-  }
-  get labelVisibility() {
-    return this.context.labelVisibility;
-  }
-  set unit(value) {
-    this.context = { ...this.context, unit: value.trim() };
-  }
-  get unit() {
-    return this.context.unit;
-  }
-  render() {
-    return html`
-      <div part="container" role="presentation">
-        <slot name="thumbs" @slotchange=${__privateGet$4(this, _handleSlotChange$1)}></slot>
-        <slot name="marks"></slot>
-      </div>
-    `;
-  }
-};
-_handleKeyboardEvent = new WeakMap();
-_handleSlotChange$1 = new WeakMap();
-__decorateClass$c([
-  provide({ context: sliderContext.context })
-], OdxSliderElement.prototype, "context", 2);
-__decorateClass$c([
-  query('[part="container"]', true)
-], OdxSliderElement.prototype, "container", 2);
-__decorateClass$c([
-  property({ type: Number })
-], OdxSliderElement.prototype, "step", 1);
-__decorateClass$c([
-  property({ type: Number })
-], OdxSliderElement.prototype, "minRange", 1);
-__decorateClass$c([
-  property()
-], OdxSliderElement.prototype, "labelVisibility", 1);
-__decorateClass$c([
-  property()
-], OdxSliderElement.prototype, "unit", 1);
-OdxSliderElement = __decorateClass$c([
-  customElement("odx-slider", [styles$c])
-], OdxSliderElement);
-
-const styles$b = ":host{display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-sm);background-color:var(--odx-color-fill-control);border-color:var(--odx-color-outline-control);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);block-size:var(--odx-size-225);color:inherit}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-font-weight-medium)!important;transition:var(--odx-transition-base);transition-property:background-color,outline-color}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-sm);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-base)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:disabled{opacity:.85;cursor:default;color:var(--odx-color-text-disabled)}[part~=action]:focus-visible,::slotted(input:focus-visible){background-color:var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-font-size-text-sm);border-radius:var(--odx-border-radius-sm);border-inline-end:var(--odx-border-sm);border-inline-start:none;border-color:var(--odx-color-outline-control)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-sm);border-end-start-radius:var(--odx-border-radius-sm)}}";
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __typeError$5 = (msg) => {
-  throw TypeError(msg);
-};
-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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
-};
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange, _handleInputFocus;
-let OdxSpinboxElement = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-    __privateAdd$5(this, _handleSlotChange, () => {
-      this.inputElement?.removeEventListener("focus", __privateGet$3(this, _handleInputFocus));
-      if (!this.inputElement) return;
-      this.inputElement.type = "number";
-      this.inputElement.value = this.inputElement.value || this.inputElement.min;
-      this.inputElement.addEventListener("focus", __privateGet$3(this, _handleInputFocus));
-      this.requestUpdate();
-    });
-    __privateAdd$5(this, _handleInputFocus, () => {
-      this.inputElement?.select();
-    });
-  }
-  get inputElement() {
-    return this.inputElements[0] ?? null;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role ||= "presentation";
-  }
-  render() {
-    const min = this.inputElement?.min ? Number(this.inputElement.min) : null;
-    const max = this.inputElement?.max ? Number(this.inputElement.max) : null;
-    const value = this.inputElement?.value ? Number(this.inputElement.value) : null;
-    const canStepDown = min === null || value === null || value > min;
-    const canStepUp = max === null || value === null || value < max;
-    if (this.inputElement) {
-      this.inputElement.disabled = this.disabled;
-    }
-    const decrementAction = html`
-      <button part="action action-decrement" @click=${this.stepDown} ?disabled=${this.disabled || !canStepDown}>
-        <odx-icon name="minus"></odx-icon>
-      </button>
-    `;
-    const incrementAction = html`
-      <button part="action action-increment" @click=${this.stepUp} ?disabled=${this.disabled || !canStepUp}>
-        <odx-icon name="plus"></odx-icon>
-      </button>
-    `;
-    const slot = html`<slot @slotchange=${__privateGet$3(this, _handleSlotChange)}></slot>`;
-    if (this.compact) {
-      return html`${slot}${incrementAction}${decrementAction}`;
-    }
-    return html`${decrementAction}${slot}${incrementAction}`;
-  }
-  stepUp() {
-    if (!this.inputElement) return;
-    this.inputElement.stepUp();
-    this.requestUpdate();
-  }
-  stepDown() {
-    if (!this.inputElement) return;
-    this.inputElement.stepDown();
-    this.requestUpdate();
-  }
-};
-_handleSlotChange = new WeakMap();
-_handleInputFocus = new WeakMap();
-OdxSpinboxElement.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-__decorateClass$b([
-  queryAssignedElements({ selector: "input", flatten: true })
-], OdxSpinboxElement.prototype, "inputElements", 2);
-__decorateClass$b([
-  property({ type: Boolean, reflect: true })
-], OdxSpinboxElement.prototype, "compact", 2);
-OdxSpinboxElement = __decorateClass$b([
-  customElement("odx-spinbox", [styles$b])
-], OdxSpinboxElement);
-
-const styles$a = "*{box-sizing:border-box}:host{--_indicator-spacing: var(--odx-size-25);--_indicator-color-fill: var(--odx-selection-control-color-fill-hover);--_indicator-track-color-fill: var(--odx-selection-control-color-border-disabled);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);transition-property:background-color outline-color;color:var(--odx-color-text)}:host,:host::part(indicator){transition:var(--odx-transition-reduced)}[part=indicator]{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}[part=indicator]:before,[part=indicator]:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit}[part=indicator]:before{background-color:var(--_indicator-track-color-fill);block-size:var(--odx-size-37);inline-size:var(--odx-size-225);border-radius:var(--odx-border-radius-pill)}[part=indicator]:after{background-color:var(--_indicator-color-fill);block-size:calc(var(--odx-size-150) - var(--odx-size-25));inline-size:calc(var(--odx-size-150) - var(--odx-size-25));border-radius:50%;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}:host::part(label){display:inline-block;cursor:inherit}:host::part(content){margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-fill: var(--odx-selection-control-color-fill-selected)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host(:state(checked)){--_indicator-color-fill: var(--odx-selection-control-color-fill-selected);--_indicator-track-color-fill: var(--odx-selection-control-color-fill-selected)}:host(:state(checked)) [part=indicator]:after{transform:translate(var(--odx-size-225)) translate(-100%)}";
-
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-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 = (decorator(result)) || result;
-  return result;
-};
-let OdxSwitchElement = class extends CheckboxControl {
-  render() {
-    return html`
-      <div part="indicator"></div>
-      <div part="content">
-        <div part="label">
-          <slot></slot>
-        </div>
-        <div part="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-OdxSwitchElement = __decorateClass$a([
-  customElement("odx-switch", [styles$a])
-], OdxSwitchElement);
-
-const styles$9 = ":host{display:block;flex-grow:1}";
-
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxTableBodyElement = class extends CustomElement {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "rowgroup";
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-OdxTableBodyElement = __decorateClass$9([
-  customElement("odx-table-body", [styles$9])
-], OdxTableBodyElement);
-
-const styles$8 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}";
-
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxTableCellElement = class extends CustomElement {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "gridcell";
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-OdxTableCellElement = __decorateClass$8([
-  customElement("odx-table-cell", [styles$8])
-], OdxTableCellElement);
-
-const styles$7 = ":host{display:block;block-size:auto;flex:0 0 auto;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}.checkbox{padding:var(--odx-size-37)}";
-
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __typeError$4 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$6(target, key, result);
-  return result;
-};
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$4 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
-var _OdxTableCheckboxCellElement_instances, handleChange_fn$1;
-let OdxTableCheckboxCellElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$4(this, _OdxTableCheckboxCellElement_instances);
-    this.checked = false;
-    this.disabled = false;
-    this.indeterminate = false;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "gridcell";
-  }
-  click() {
-    this.control.click();
-  }
-  render() {
-    return html`<odx-checkbox class="checkbox" ?checked=${this.checked} ?disabled=${this.disabled} ?indeterminate=${this.indeterminate} @change=${__privateMethod$4(this, _OdxTableCheckboxCellElement_instances, handleChange_fn$1)}></odx-checkbox>`;
-  }
-};
-_OdxTableCheckboxCellElement_instances = new WeakSet();
-handleChange_fn$1 = function(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  this.checked = event.target.checked;
-  this.indeterminate = false;
-  this.emit("change");
-};
-__decorateClass$7([
-  query(".checkbox")
-], OdxTableCheckboxCellElement.prototype, "control", 2);
-__decorateClass$7([
-  property({ type: Boolean })
-], OdxTableCheckboxCellElement.prototype, "checked", 2);
-__decorateClass$7([
-  property({ type: Boolean })
-], OdxTableCheckboxCellElement.prototype, "disabled", 2);
-__decorateClass$7([
-  property({ type: Boolean })
-], OdxTableCheckboxCellElement.prototype, "indeterminate", 2);
-OdxTableCheckboxCellElement = __decorateClass$7([
-  customElement("odx-table-checkbox-cell", [styles$7])
-], OdxTableCheckboxCellElement);
-
-const styles$6 = ":host{display:flex;align-items:center;border-block-end:var(--odx-border-sm);border-color:var(--odx-color-outline-surface);padding-inline:var(--odx-size-75)}odx-checkbox{pointer-events:none;margin-inline-start:var(--odx-size-75)}";
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __typeError$3 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$5(target, key, result);
-  return result;
-};
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-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 {
-  constructor() {
-    super(...arguments);
-    __privateAdd$3(this, _OdxTableHeaderElement_instances);
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "row";
-  }
-  render() {
-    return html` <slot @change=${__privateMethod$3(this, _OdxTableHeaderElement_instances, handleChange_fn)}></slot>`;
-  }
-};
-_OdxTableHeaderElement_instances = new WeakSet();
-handleChange_fn = async function(event) {
-  if (event.target.localName !== OdxTableCheckboxCellElement.selector) return;
-  this.selected = event.target.checked;
-  await 0;
-  if (!event.defaultPrevented) return;
-  this.selected = !this.selected;
-};
-__decorateClass$6([
-  property({ type: Boolean, reflect: true })
-], OdxTableHeaderElement.prototype, "selected", 2);
-OdxTableHeaderElement = __decorateClass$6([
-  customElement("odx-table-header", [styles$6])
-], OdxTableHeaderElement);
-
-const styles$5 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-225)}";
-
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$4(target, key, result);
-  return result;
-};
-let OdxTableHeaderCellElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.sortable = false;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "columnheader";
-  }
-  render() {
-    return html`
-      <odx-title size="xs">
-        <slot></slot> (${this.sortable ? "sortable" : "not sortable"})
-      </odx-title>
-    `;
-  }
-};
-__decorateClass$5([
-  property({ type: Boolean })
-], OdxTableHeaderCellElement.prototype, "sortable", 2);
-OdxTableHeaderCellElement = __decorateClass$5([
-  customElement("odx-table-header-cell", [styles$5])
-], OdxTableHeaderCellElement);
-
-const styles$4 = ":host{--_color-fill: transparent;display:flex;align-items:center;inline-size:100%;border-block-end:var(--odx-border-sm);background-color:var(--_color-fill);transition:var(--odx-transition-reduced);transition-property:background-color;padding-inline:var(--odx-size-75);cursor:pointer}:host(:not(:last-of-type)){border-color:var(--odx-color-outline-surface)}:host([selectable]:not([selectable=\"false\"]):hover){--_color-fill: var(--odx-color-surface-raised)}:host([selected]:not([selected=\"false\"])){--_color-fill: var(--odx-color-surface-raised)}odx-checkbox{pointer-events:none;margin-inline-start:var(--odx-size-75)}";
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __typeError$2 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$3(target, key, result);
-  return result;
-};
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
-var _OdxTableRowElement_instances, handleSelectedChange_fn, handleSelectableChange_fn, _handleClick, _handleChange$1, handleSlotchange_fn, isCheckboxCell_fn;
-let OdxTableRowElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$2(this, _OdxTableRowElement_instances);
-    this.disabled = false;
-    this.selected = false;
-    this.selectable = true;
-    this.value = "";
-    __privateAdd$2(this, _handleClick, (event) => {
-      const isCheckboxCell = event.composedPath().some((node) => node.localName === OdxTableCheckboxCellElement.selector);
-      if (isCheckboxCell) return;
-      const [checkboxCell] = this.checkboxCells;
-      checkboxCell?.click();
-    });
-    __privateAdd$2(this, _handleChange$1, async (event) => {
-      this.selected = event.target.checked;
-      await 0;
-      if (!event.defaultPrevented) return;
-      this.selected = !this.selected;
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "row";
-  }
-  render() {
-    return html`
-      <slot @change=${__privateGet$2(this, _handleChange$1)} @slotchange=${__privateMethod$2(this, _OdxTableRowElement_instances, handleSlotchange_fn)}></slot>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("selected")) {
-      __privateMethod$2(this, _OdxTableRowElement_instances, handleSelectedChange_fn).call(this);
-    }
-    if (changes.has("selectable")) {
-      __privateMethod$2(this, _OdxTableRowElement_instances, handleSelectableChange_fn).call(this);
-    }
-  }
-};
-_OdxTableRowElement_instances = new WeakSet();
-handleSelectedChange_fn = async function() {
-  await this.updateComplete;
-  if (this.selectable) {
-    this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
-  } else {
-    this.ariaSelected = null;
-  }
-  const [checkboxCell] = this.checkboxCells;
-  if (!checkboxCell) return;
-  checkboxCell.checked = this.selected;
-};
-handleSelectableChange_fn = function() {
-  if (this.selectable) {
-    this.addEventListener("click", __privateGet$2(this, _handleClick));
-  } else {
-    this.removeEventListener("click", __privateGet$2(this, _handleClick));
-  }
-};
-_handleClick = new WeakMap();
-_handleChange$1 = new WeakMap();
-handleSlotchange_fn = function({ target }) {
-  this.selectable = target.assignedElements().some(__privateMethod$2(this, _OdxTableRowElement_instances, isCheckboxCell_fn));
-};
-isCheckboxCell_fn = function(element) {
-  return element.localName === OdxTableCheckboxCellElement.selector;
-};
-__decorateClass$4([
-  queryAssignedElements({ selector: OdxTableCheckboxCellElement.selector, flatten: true })
-], OdxTableRowElement.prototype, "checkboxCells", 2);
-__decorateClass$4([
-  property({ type: Boolean, reflect: true })
-], OdxTableRowElement.prototype, "disabled", 2);
-__decorateClass$4([
-  property({ type: Boolean, reflect: true })
-], OdxTableRowElement.prototype, "selected", 2);
-__decorateClass$4([
-  property({ type: Boolean, reflect: true })
-], OdxTableRowElement.prototype, "selectable", 2);
-__decorateClass$4([
-  property({ type: String })
-], OdxTableRowElement.prototype, "value", 2);
-OdxTableRowElement = __decorateClass$4([
-  customElement("odx-table-row", [styles$4])
-], OdxTableRowElement);
-
-const styles$3 = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-surface)}";
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$2(target, key, result);
-  return result;
-};
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _selectedSet, _OdxTableElement_instances, selectAllRows_fn, deselectAllRows_fn, _handleChange;
-let OdxTableElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$1(this, _OdxTableElement_instances);
-    __privateAdd$1(this, _selectedSet, /* @__PURE__ */ new Set());
-    this.mode = "selection";
-    this.selected = [];
-    this.items = [];
-    __privateAdd$1(this, _handleChange, (event) => {
-      if (event.target.localName !== OdxTableCheckboxCellElement.selector) return;
-      event.stopPropagation();
-      const rowElement = event.target.parentElement;
-      if (!rowElement) return;
-      const isSelected = event.target.checked;
-      if (rowElement.localName === OdxTableHeaderElement.selector) {
-        if (event.target.checked) {
-          __privateMethod$1(this, _OdxTableElement_instances, selectAllRows_fn).call(this);
-        } else {
-          __privateMethod$1(this, _OdxTableElement_instances, deselectAllRows_fn).call(this);
-        }
-      } else if (isSelected) {
-        __privateGet$1(this, _selectedSet).add(rowElement.value);
-      } else {
-        __privateGet$1(this, _selectedSet).delete(rowElement.value);
-      }
-    });
-  }
-  get headerElements() {
-    return Array.from(this.querySelectorAll(OdxTableHeaderElement.selector));
-  }
-  get rowElements() {
-    return Array.from(this.querySelectorAll(OdxTableRowElement.selector));
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "grid";
-  }
-  render() {
-    return html`<slot @change=${__privateGet$1(this, _handleChange)}></slot>`;
-  }
-};
-_selectedSet = new WeakMap();
-_OdxTableElement_instances = new WeakSet();
-selectAllRows_fn = function() {
-  for (const row of this.rowElements) {
-    row.selected = true;
-    __privateGet$1(this, _selectedSet).add(row.value);
-  }
-};
-deselectAllRows_fn = function() {
-  __privateGet$1(this, _selectedSet).clear();
-  for (const row of this.rowElements) {
-    if (!row.selected) continue;
-    row.selected = false;
-  }
-};
-_handleChange = new WeakMap();
-__decorateClass$3([
-  property()
-], OdxTableElement.prototype, "mode", 2);
-__decorateClass$3([
-  property({ type: Array })
-], OdxTableElement.prototype, "selected", 2);
-__decorateClass$3([
-  property({ type: Array })
-], OdxTableElement.prototype, "items", 2);
-OdxTableElement = __decorateClass$3([
-  customElement("odx-table", [styles$3])
-], OdxTableElement);
-
-const ToastVariant = {
-  DANGER: "danger"
-};
-
-const styles$2 = "";
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$1(target, key, result);
-  return result;
-};
-let OdxToastElement = class extends CustomElement {
-  render() {
-    return html`
-      <slot name="title"></slot>
-      <slot></slot>
-    `;
-  }
-};
-__decorateClass$2([
-  property({ reflect: true })
-], OdxToastElement.prototype, "variant", 2);
-OdxToastElement = __decorateClass$2([
-  customElement("odx-toast", [styles$2])
-], OdxToastElement);
-
-const styles$1 = ":host{--_border-radius: var(--odx-border-radius-sm);--_space: var(--odx-size-75);--_size: var(--odx-size-225);--_color-fill: transparent;--_color-fill-checked: var(--odx-color-fill-control-accent);--_color-outline: transparent;--_color-outline-checked: var(--odx-color-fill-focus);--_color-text-checked: var(--odx-color-text-control-accent);--_color-text: var(--odx-color-text-control);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-sm);outline:var(--odx-outline-focus);padding-inline:var(--_space);transition:var(--odx-transition-base);transition-property:color,background-color,outline-color;background-color:var(--_color-fill);outline-color:var(--_color-outline);block-size:var(--_size);place-items:center;color:var(--_color-text)}:host::part(label),:host::part(indicator){cursor:pointer}:host::part(label){display:inline-block;cursor:pointer}:host(:empty)::part(content){display:none}:host(:state(checked)){--_color-outline: var(--_color-fill-checked);--_color-fill: var(--_color-fill-checked);--_color-outline: var(--_color-outline-checked);--_color-text: var(--_color-text-checked);font-weight:var(--odx-font-weight-medium)}:host(:focus-visible){--_color-outline: var(--odx-color-outline-focus)}";
-
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxToggleButtonElement = class extends CheckboxControl {
-  render() {
-    return html`
-      <div part="indicator"></div>
-      <div part="label"><slot></slot></div>
-    `;
-  }
-};
-OdxToggleButtonElement = __decorateClass$1([
-  customElement("odx-toggle-button", [styles$1])
-], OdxToggleButtonElement);
-
-const TooltipPlacement = {
-  TOP: PopoverPlacement.TOP,
-  RIGHT: PopoverPlacement.RIGHT,
-  BOTTOM: PopoverPlacement.BOTTOM,
-  LEFT: PopoverPlacement.LEFT
-};
-
-const styles = ":host(:not([interactive])){pointer-events:none}odx-popover{--color-fill: var(--odx-palette-blue-90);--color-text: var(--odx-color-text-inverse)}::slotted(odx-button[disabled]){pointer-events:auto}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _OdxTooltipElement_instances, addKeyboardListeners_fn, removeKeyboardListeners_fn, addMouseListeners_fn, removeMouseListeners_fn, updateAriaAttributes_fn, _handleReferenceMouseLeave, _handleMouseEvents, _handleKeyboardFocus;
-let OdxTooltipElement = class extends PopoverHost(CustomElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _OdxTooltipElement_instances);
-    this.placement = TooltipPlacement.TOP;
-    this.interactive = false;
-    this.id = "test";
-    __privateAdd(this, _handleReferenceMouseLeave, (event) => {
-      if (event.relatedTarget === this) return;
-      __privateGet(this, _handleMouseEvents).call(this, event);
-    });
-    __privateAdd(this, _handleMouseEvents, ({ type }) => {
-      if (type !== "mouseenter" && type !== "mouseleave") return;
-      this.togglePopover(type === "mouseenter");
-    });
-    __privateAdd(this, _handleKeyboardFocus, ({ type, key }) => {
-      if (key !== "Tab") return;
-      this.togglePopover(type !== "keydown");
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.id ||= getUniqueId("odx-tooltip");
-    this.role = "tooltip";
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    if (!referenceElement) return;
-    __privateMethod(this, _OdxTooltipElement_instances, updateAriaAttributes_fn).call(this, referenceElement, this.id);
-    __privateMethod(this, _OdxTooltipElement_instances, addKeyboardListeners_fn).call(this, referenceElement);
-    __privateMethod(this, _OdxTooltipElement_instances, addMouseListeners_fn).call(this, referenceElement);
-  }
-  unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
-    __privateMethod(this, _OdxTooltipElement_instances, updateAriaAttributes_fn).call(this, referenceElement, null);
-    __privateMethod(this, _OdxTooltipElement_instances, removeKeyboardListeners_fn).call(this, referenceElement);
-    __privateMethod(this, _OdxTooltipElement_instances, removeMouseListeners_fn).call(this, referenceElement);
-  }
-  render() {
-    return html`
-      <odx-popover showArrow>
-        <slot></slot>
-      </odx-popover>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate?.(props);
-    if (props.has("id")) {
-      __privateMethod(this, _OdxTooltipElement_instances, updateAriaAttributes_fn).call(this, this.referenceElement, this.id);
-    }
-  }
-};
-_OdxTooltipElement_instances = new WeakSet();
-addKeyboardListeners_fn = function(referenceElement) {
-  referenceElement.addEventListener("keyup", __privateGet(this, _handleKeyboardFocus));
-  referenceElement.addEventListener("keydown", __privateGet(this, _handleKeyboardFocus));
-};
-removeKeyboardListeners_fn = function(referenceElement) {
-  referenceElement.removeEventListener("keyup", __privateGet(this, _handleKeyboardFocus));
-  referenceElement.removeEventListener("keydown", __privateGet(this, _handleKeyboardFocus));
-};
-addMouseListeners_fn = function(referenceElement) {
-  this.addEventListener("mouseleave", __privateGet(this, _handleMouseEvents));
-  referenceElement.addEventListener("mouseenter", __privateGet(this, _handleMouseEvents));
-  referenceElement.addEventListener("mouseleave", __privateGet(this, _handleReferenceMouseLeave));
-  referenceElement.addEventListener("keyup", __privateGet(this, _handleKeyboardFocus));
-  referenceElement.addEventListener("keydown", __privateGet(this, _handleKeyboardFocus));
-};
-removeMouseListeners_fn = function(referenceElement) {
-  this.removeEventListener("mouseleave", __privateGet(this, _handleMouseEvents));
-  referenceElement.removeEventListener("mouseenter", __privateGet(this, _handleMouseEvents));
-  referenceElement.removeEventListener("mouseleave", __privateGet(this, _handleReferenceMouseLeave));
-  referenceElement.removeEventListener("keyup", __privateGet(this, _handleKeyboardFocus));
-  referenceElement.removeEventListener("keydown", __privateGet(this, _handleKeyboardFocus));
-};
-updateAriaAttributes_fn = function(referenceElement, id) {
-  toggleAttribute(referenceElement, "aria-describedby", id);
-};
-_handleReferenceMouseLeave = new WeakMap();
-_handleMouseEvents = new WeakMap();
-_handleKeyboardFocus = new WeakMap();
-__decorateClass([
-  property({ reflect: true })
-], OdxTooltipElement.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxTooltipElement.prototype, "interactive", 2);
-__decorateClass([
-  property({ reflect: true })
-], OdxTooltipElement.prototype, "id", 2);
-OdxTooltipElement = __decorateClass([
-  customElement("odx-tooltip", [styles])
-], OdxTooltipElement);
-
-export { AvatarSize, AvatarVariant, BadgeVariant, CardElement, CheckboxControl, CheckboxGroupControl, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, GridGap, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, OdxAccordionElement, OdxAccordionHeaderElement, OdxAccordionPanelElement, OdxAvatarElement, OdxAvatarGroupElement, OdxBadgeElement, 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 };