@odx/foundation 0.1.0-alpha.0

package/dist/elements.js

@@ -0,0 +1,3029 @@
+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, () => {
+      document.querySelector("odx-main-menu")?.open();
+    });
+  }
+  render() {
+    return html`
+      <odx-button aria-label="Open main menu" variant="ghost" @click=${__privateGet$9(this, _handleClick$2)}>
+        <odx-icon name="menu"></odx-icon>
+      </odx-button>
+    `;
+  }
+};
+_handleClick$2 = new WeakMap();
+OdxMainMenuButtonElement = __decorateClass$u([
+  customElement("odx-main-menu-button", [])
+], OdxMainMenuButtonElement);
+
+const styles$p = ":host{--_color-fill: transparent;--_color-text: inherit;--_color-outline: 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);text-decoration:none;padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);outline-color:var(--_color-outline);transition:var(--odx-transition-base)}:host(:hover){--_color-fill: var(--odx-palette-cyan-70)}:host(:is([active],:active)){--_color-fill: var(--odx-color-fill-focus)}:host::part(anchor):focus-visible{--_color-fill: var(--odx-color-fill-focus);--_color-outline: var(--odx-color-outline-focus)}:host([disabled]){--_color-text: var(--odx-color-text-disabled);pointer-events:none}:host(:not(:last-of-type))::part(anchor){margin-block-end:var(--odx-size-100)}";
+
+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="md">
+        <slot></slot>
+      </odx-title>
+    `;
+  }
+};
+OdxMainMenuTitleElement = __decorateClass$r([
+  customElement("odx-main-menu-title")
+], OdxMainMenuTitleElement);
+
+const styles$o = ":host{--_transition-duration: var(--odx-motion-duration);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-main-menu-color-fill, var(--odx-color-primary));color:var(--odx-main-menu-color-text, var(--odx-color-primary-text));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-fill-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">
+        <slot @slotchange=${__privateGet$8(this, _handleSlotChange$2)}></slot>
+      </nav>
+      <odx-stack part="link-navigation" gap="xs"  wrap horizontal>
+        <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 };