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

package/dist/components.js

@@ -0,0 +1,4284 @@
+import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, CanBeDisabled, requestUpdateOnAriaChange, optionalAttr, WithLoadingState, getAssignedElements, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, getElementFromEvent, toggleAttribute, SharedResizeObserver, getUniqueId, parseDate, FormControl, waitForAnimations, FocusTrapController, RovingTabindexController, OptionControl, toPx, RadioGroupFormControl, SelectFormControl, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
+import { html, isServer, nothing, css } from 'lit';
+import { property, queryAssignedElements, query, queryAll } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { PopoverPlacement, PopoverHost, IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation/cdk';
+import { IsLocalized, setTranslation, translate } from '@odx/foundation/i18n';
+import { g as clamp, r as round, i as debounce, m as minBy, j as maxBy } from './vendor.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { watch } from '@lit-labs/signals';
+import { createContext, consume, provide } from '@lit/context';
+
+const styles$14 = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+
+var __defProp$1e = Object.defineProperty;
+var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
+var __decorateClass$1e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1e(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$1e(target, key, result);
+  return result;
+};
+let OdxAccordionHeaderComponent = 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 class="label">
+        <odx-text ?emphasized=${this.expanded}>
+          <slot></slot>
+        </odx-text>
+        <slot name="suffix"></slot>
+      </div>
+      <odx-icon class="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
+    `;
+  }
+};
+__decorateClass$1e([
+  property({ type: Boolean })
+], OdxAccordionHeaderComponent.prototype, "expanded", 1);
+OdxAccordionHeaderComponent = __decorateClass$1e([
+  customElement("odx-accordion-header", [styles$14])
+], OdxAccordionHeaderComponent);
+
+const styles$13 = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}odx-separator{margin:0}.container{overflow:hidden}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12);transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+
+var __defProp$1d = Object.defineProperty;
+var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
+var __decorateClass$1d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1d(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$1d(target, key, result);
+  return result;
+};
+let OdxAccordionPanelComponent = class extends CustomElement {
+  render() {
+    return html`
+      <div class="container">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+      <odx-separator></odx-separator>
+    `;
+  }
+};
+OdxAccordionPanelComponent = __decorateClass$1d([
+  customElement("odx-accordion-panel", [styles$13])
+], OdxAccordionPanelComponent);
+
+const styles$12 = ":host{display:block}:host-context(odx-accordion-panel){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+
+var __defProp$1c = Object.defineProperty;
+var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
+var __typeError$q = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$1c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1c(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$1c(target, key, result);
+  return result;
+};
+var __accessCheck$q = (obj, member, msg) => member.has(obj) || __typeError$q("Cannot " + msg);
+var __privateGet$m = (obj, member, getter) => (__accessCheck$q(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$q = (obj, member, value) => member.has(obj) ? __typeError$q("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleClick$4, _handleExpand, _handleKeyboardEvent$2;
+let OdxAccordionComponent = class extends CustomElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    __privateAdd$q(this, _handleClick$4, (event) => {
+      event.stopPropagation();
+      if (!(event.target instanceof OdxAccordionHeaderComponent)) return;
+      event.target.toggle();
+    });
+    __privateAdd$q(this, _handleExpand, (event) => {
+      event.stopPropagation();
+      if (!(event.target instanceof OdxAccordionHeaderComponent) || this.multiple) return;
+      this.toggleAll(false, event.target);
+    });
+    __privateAdd$q(this, _handleKeyboardEvent$2, (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderComponent)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.type === "keydown") return;
+      event.target.toggle();
+    });
+    if (!isServer) {
+      this.addEventListener("click", __privateGet$m(this, _handleClick$4));
+      this.addEventListener("expand", __privateGet$m(this, _handleExpand));
+      this.addEventListener("keydown", __privateGet$m(this, _handleKeyboardEvent$2));
+      this.addEventListener("keyup", __privateGet$m(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$1c([
+  queryAssignedElements({ selector: OdxAccordionHeaderComponent.selector, flatten: true })
+], OdxAccordionComponent.prototype, "controls", 2);
+__decorateClass$1c([
+  property({ type: Boolean })
+], OdxAccordionComponent.prototype, "multiple", 2);
+OdxAccordionComponent = __decorateClass$1c([
+  customElement("odx-accordion", [styles$12])
+], OdxAccordionComponent);
+
+const styles$11 = ":host{display:flex;justify-content:space-between;align-items:center;gap:var(--odx-size-150);padding:var(--odx-size-75)}.content{margin-inline-end:auto}::slotted(odx-avatar){flex:0 0 auto}";
+
+var __defProp$1b = Object.defineProperty;
+var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
+var __decorateClass$1b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1b(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$1b(target, key, result);
+  return result;
+};
+let OdxAreaHeaderComponent = class extends CustomElement {
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      <div class="content">
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+  }
+};
+__decorateClass$1b([
+  property({ reflect: true })
+], OdxAreaHeaderComponent.prototype, "size", 2);
+__decorateClass$1b([
+  property({ reflect: true })
+], OdxAreaHeaderComponent.prototype, "variant", 2);
+OdxAreaHeaderComponent = __decorateClass$1b([
+  customElement("odx-area-header", [styles$11])
+], OdxAreaHeaderComponent);
+
+const AreaHeaderSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const AreaHeaderVariant = {
+  DEFAULT: "default"
+};
+
+const styles$10 = ":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-border-width-thin) solid var(--odx-color-separator)}::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$1a = Object.defineProperty;
+var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
+var __decorateClass$1a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1a(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$1a(target, key, result);
+  return result;
+};
+let OdxAvatarGroupComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass$1a([
+  property({ reflect: true })
+], OdxAvatarGroupComponent.prototype, "size", 2);
+__decorateClass$1a([
+  property({ reflect: true })
+], OdxAvatarGroupComponent.prototype, "variant", 2);
+OdxAvatarGroupComponent = __decorateClass$1a([
+  customElement("odx-avatar-group", [styles$10])
+], OdxAvatarGroupComponent);
+
+const styles$$ = "@layer base{:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: inherit;--_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(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);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-typography-font-size-1)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:host-context(odx-navigation-item),:host-context(odx-button){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}:host-context(odx-button[size=\"sm\"]){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}:host-context(odx-button[size=\"lg\"]){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}:host-context(odx-navigation-item[size=\"lg\"]){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}}";
+
+var __defProp$19 = Object.defineProperty;
+var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
+var __decorateClass$19 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$19(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$19(target, key, result);
+  return result;
+};
+let OdxAvatarComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass$19([
+  property({ reflect: true })
+], OdxAvatarComponent.prototype, "size", 2);
+__decorateClass$19([
+  property({ reflect: true })
+], OdxAvatarComponent.prototype, "variant", 2);
+OdxAvatarComponent = __decorateClass$19([
+  customElement("odx-avatar", [styles$$])
+], OdxAvatarComponent);
+
+const AvatarSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const AvatarVariant = {
+  CIRCLE: "circle",
+  RECTANGLE: "rectangle"
+};
+
+const styles$_ = ":host{--_color-background: var(--odx-color-surface);--_color-foreground: var(--odx-color-text);display:inline-block;line-height:0}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}";
+
+var __defProp$18 = Object.defineProperty;
+var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
+var __decorateClass$18 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$18(target, key, result);
+  return result;
+};
+let OdxBadgeComponent = class extends CustomElement {
+  render() {
+    return html`
+      <odx-text size="sm" highlight class="content" odxPreventTextOverflow>
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+__decorateClass$18([
+  property({ reflect: true })
+], OdxBadgeComponent.prototype, "variant", 2);
+OdxBadgeComponent = __decorateClass$18([
+  customElement("odx-badge", [styles$_])
+], OdxBadgeComponent);
+
+const BadgeVariant = {
+  NEUTRAL: "neutral",
+  PRIMARY: "primary",
+  ACCENT: "accent",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+
+var __defProp$17 = Object.defineProperty;
+var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
+var __decorateClass$17 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$17(target, key, result);
+  return result;
+};
+class BaseLink extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.target = "";
+    this.rel = "noreferrer noopener";
+  }
+  static {
+    requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded", "ariaCurrent", "ariaHidden"]);
+  }
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  render(role) {
+    const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
+    return html`<a
+      class="base"
+      part="anchor"
+      aria-label="${optionalAttr(ariaLabel)}"
+      aria-haspopup="${optionalAttr(ariaHasPopup)}"
+      aria-expanded="${optionalAttr(ariaExpanded)}"
+      aria-current="${optionalAttr(ariaCurrent)}"
+      aria-hidden="${optionalAttr(ariaHidden)}"
+      href=${optionalAttr(this.href)}
+      target=${optionalAttr(this.target)}
+      download=${ifDefined(this.download)}
+      rel=${optionalAttr(this.rel)}
+      role=${optionalAttr(role)}
+    >
+      ${this.renderContent()}
+    </a>`;
+  }
+  renderContent() {
+    return html`<slot></slot>`;
+  }
+}
+__decorateClass$17([
+  query('[part~="anchor"]', true)
+], BaseLink.prototype, "interactiveElement", 2);
+__decorateClass$17([
+  property()
+], BaseLink.prototype, "href", 2);
+__decorateClass$17([
+  property()
+], BaseLink.prototype, "target", 2);
+__decorateClass$17([
+  property()
+], BaseLink.prototype, "rel", 2);
+__decorateClass$17([
+  property()
+], BaseLink.prototype, "download", 2);
+
+const styles$Z = ":host{--_color-foreground: var(--odx-palette-blue-50);display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
+
+var __defProp$16 = Object.defineProperty;
+var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
+var __decorateClass$16 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$16(target, key, result);
+  return result;
+};
+let OdxLinkComponent = class extends BaseLink {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+    this.subtle = false;
+  }
+};
+__decorateClass$16([
+  property({ type: Boolean, reflect: true })
+], OdxLinkComponent.prototype, "emphasized", 2);
+__decorateClass$16([
+  property({ type: Boolean, reflect: true })
+], OdxLinkComponent.prototype, "subtle", 2);
+OdxLinkComponent = __decorateClass$16([
+  customElement("odx-link", [styles$Z])
+], OdxLinkComponent);
+
+const styles$Y = ":host{display:contents}.separator{--size: var(--odx-size-75);color:var(--odx-color-foreground-muted);margin:var(--odx-size-37)}:host([aria-hidden=\"true\"]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-muted)!important}::slotted(*){margin:0}";
+
+var __defProp$15 = Object.defineProperty;
+var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
+var __decorateClass$15 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$15(target, key, result);
+  return result;
+};
+let OdxBreadcrumbsItemComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.fallback = false;
+  }
+  isLast() {
+    return !this.nextElementSibling;
+  }
+  get interactiveElement() {
+    return this.linkElements[0] ?? null;
+  }
+  render() {
+    return html`
+      <slot></slot>
+      ${when(!this.isLast(), () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}
+    `;
+  }
+  updated(props) {
+    super.updated?.(props);
+    if (this.interactiveElement) {
+      this.interactiveElement.subtle = true;
+      this.interactiveElement.emphasized = this.isLast();
+      this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
+    }
+  }
+};
+__decorateClass$15([
+  queryAssignedElements({ selector: OdxLinkComponent.selector, flatten: true })
+], OdxBreadcrumbsItemComponent.prototype, "linkElements", 2);
+__decorateClass$15([
+  property({ type: Boolean })
+], OdxBreadcrumbsItemComponent.prototype, "fallback", 2);
+OdxBreadcrumbsItemComponent = __decorateClass$15([
+  requestUpdateOnAriaChange(["ariaHidden"]),
+  customElement("odx-breadcrumbs-item", [styles$Y])
+], OdxBreadcrumbsItemComponent);
+
+const styles$X = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
+
+var __defProp$14 = Object.defineProperty;
+var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
+var __typeError$p = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$14 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$14(target, key, result);
+  return result;
+};
+var __accessCheck$p = (obj, member, msg) => member.has(obj) || __typeError$p("Cannot " + msg);
+var __privateAdd$p = (obj, member, value) => member.has(obj) ? __typeError$p("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$c = (obj, member, method) => (__accessCheck$p(obj, member, "access private method"), method);
+var _OdxBreadcrumbsComponent_instances, isItemVisible_fn, renderItems_fn, updateContext_fn;
+let OdxBreadcrumbsComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$p(this, _OdxBreadcrumbsComponent_instances);
+    this.max = 4;
+  }
+  firstUpdated(props) {
+    super.firstUpdated?.(props);
+    this.role = "navigation";
+    this.ariaLabel ||= "Breadcrumbs";
+  }
+  render() {
+    if (Array.isArray(this.items)) {
+      return __privateMethod$c(this, _OdxBreadcrumbsComponent_instances, renderItems_fn).call(this, this.items);
+    }
+    return html`<slot @slotchange=${__privateMethod$c(this, _OdxBreadcrumbsComponent_instances, updateContext_fn)}></slot>`;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("max")) {
+      __privateMethod$c(this, _OdxBreadcrumbsComponent_instances, updateContext_fn).call(this);
+    }
+  }
+};
+_OdxBreadcrumbsComponent_instances = new WeakSet();
+isItemVisible_fn = function(_, index, items) {
+  return index === 0 || index > items.length - this.max;
+};
+renderItems_fn = function(items) {
+  return html`
+      ${repeat(
+    items.filter(__privateMethod$c(this, _OdxBreadcrumbsComponent_instances, isItemVisible_fn).bind(this)),
+    (item) => item.href,
+    ({ label, href }) => html`
+          <odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
+        `
+  )}
+    `;
+};
+updateContext_fn = function() {
+  for (const [index, item] of this.itemElements.entries()) {
+    item.ariaHidden = toAriaBooleanAttribute(!__privateMethod$c(this, _OdxBreadcrumbsComponent_instances, isItemVisible_fn).call(this, item, index, this.itemElements));
+  }
+  for (const [, item] of Array.from(this.renderedItemElements).entries()) {
+    item.requestUpdate();
+  }
+};
+__decorateClass$14([
+  queryAssignedElements({ selector: OdxBreadcrumbsItemComponent.selector, flatten: true })
+], OdxBreadcrumbsComponent.prototype, "itemElements", 2);
+__decorateClass$14([
+  queryAll(OdxBreadcrumbsItemComponent.selector)
+], OdxBreadcrumbsComponent.prototype, "renderedItemElements", 2);
+__decorateClass$14([
+  property({ type: Number })
+], OdxBreadcrumbsComponent.prototype, "max", 2);
+__decorateClass$14([
+  property({ attribute: false })
+], OdxBreadcrumbsComponent.prototype, "items", 2);
+OdxBreadcrumbsComponent = __decorateClass$14([
+  customElement("odx-breadcrumbs", [styles$X])
+], OdxBreadcrumbsComponent);
+
+const styles$W = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
+
+var __defProp$13 = Object.defineProperty;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __decorateClass$13 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$13(target, key, result);
+  return result;
+};
+let OdxButtonGroupComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.block = false;
+    this.connected = false;
+    this.vertical = false;
+  }
+  onDisabledChanged(disabled) {
+    for (const button of Array.from(this.querySelectorAll("odx-button"))) {
+      button._contextDisabled = disabled;
+    }
+  }
+};
+__decorateClass$13([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "block", 2);
+__decorateClass$13([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "connected", 2);
+__decorateClass$13([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "vertical", 2);
+__decorateClass$13([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "size", 2);
+__decorateClass$13([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "variant", 2);
+OdxButtonGroupComponent = __decorateClass$13([
+  customElement("odx-button-group", [styles$W])
+], OdxButtonGroupComponent);
+
+const styles$V = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground);--_color-foreground-hover: var(--odx-color-foreground);--_color-foreground-pressed: var(--odx-color-foreground);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-5);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding:inherit}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"]):hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
+
+var __defProp$12 = Object.defineProperty;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __decorateClass$12 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$12(target, key, result);
+  return result;
+};
+let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
+  render() {
+    return html`${when(
+      this.href,
+      () => super.render(),
+      () => this.renderButton()
+    )}`;
+  }
+  renderContent() {
+    return html`
+      ${this.renderSlot("prefix")}
+      <odx-line-clamp class="content" .max=${2}>
+        <slot></slot>
+      </odx-line-clamp>
+      ${this.renderSlot("suffix")}
+    `;
+  }
+  renderButton() {
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+    const type = "type" in this ? this.type : "button";
+    return html`
+      ${this.renderOverlay()}
+      <button
+        class="base"
+        part="anchor button"
+        aria-label="${optionalAttr(ariaLabel)}"
+        aria-haspopup="${optionalAttr(ariaHasPopup)}"
+        aria-expanded="${optionalAttr(ariaExpanded)}"
+        type=${type}
+        ?disabled=${this.disabled || this.loading}
+      >
+        ${this.renderContent()}
+      </button>
+    `;
+  }
+  renderSlot(name) {
+    if (this.loading && getAssignedElements(this, name).length > 0) {
+      return this.renderSpinner();
+    }
+    return html`<slot name=${name}></slot>`;
+  }
+  renderOverlay() {
+    if (this.loading && getAssignedElements(this, "prefix", "suffix").length === 0) {
+      return this.renderSpinner(true);
+    }
+    return nothing;
+  }
+  renderSpinner(overlay = false) {
+    return html`<odx-loading-spinner class=${classMap({ spinner: true, overlay })}></odx-loading-spinner>`;
+  }
+};
+BaseButtonComponent = __decorateClass$12([
+  customElement(void 0, [styles$V])
+], BaseButtonComponent);
+
+const styles$U = "@layer base{:host{--_margin-block: var(--odx-size-37)}.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
+
+var __defProp$11 = Object.defineProperty;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __typeError$o = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$11 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$11(target, key, result);
+  return result;
+};
+var __accessCheck$o = (obj, member, msg) => member.has(obj) || __typeError$o("Cannot " + msg);
+var __privateGet$l = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$o = (obj, member, value) => member.has(obj) ? __typeError$o("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$b = (obj, member, method) => (__accessCheck$o(obj, member, "access private method"), method);
+var _internals, _OdxButtonComponent_instances, handleClick_fn;
+let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
+  constructor() {
+    super();
+    __privateAdd$o(this, _OdxButtonComponent_instances);
+    __privateAdd$o(this, _internals, this.attachInternals());
+    this.block = false;
+    this.type = "button";
+    if (!isServer) {
+      this.addEventListener("click", __privateMethod$b(this, _OdxButtonComponent_instances, handleClick_fn));
+    }
+  }
+};
+_internals = new WeakMap();
+_OdxButtonComponent_instances = new WeakSet();
+handleClick_fn = function(_event) {
+  if (this.type === "submit") {
+    __privateGet$l(this, _internals).form?.requestSubmit();
+    return;
+  }
+  if (this.type === "reset") {
+    __privateGet$l(this, _internals).form?.reset();
+    return;
+  }
+};
+OdxButtonComponent.formAssociated = true;
+__decorateClass$11([
+  property({ type: Boolean, reflect: true })
+], OdxButtonComponent.prototype, "block", 2);
+__decorateClass$11([
+  property()
+], OdxButtonComponent.prototype, "type", 2);
+__decorateClass$11([
+  property({ reflect: true })
+], OdxButtonComponent.prototype, "size", 2);
+__decorateClass$11([
+  property({ reflect: true })
+], OdxButtonComponent.prototype, "variant", 2);
+OdxButtonComponent = __decorateClass$11([
+  customElement("odx-button", [styles$U])
+], OdxButtonComponent);
+
+const ButtonSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+const ButtonVariant = {
+  PRIMARY: "primary",
+  HIGHLIGHT: "highlight",
+  SECONDARY: "secondary",
+  GHOST: "ghost",
+  DANGER: "danger"
+  // SUCCESS: 'success',
+  // CONFIRMATION: 'confirmation',
+};
+
+const styles$T = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+
+var __defProp$10 = Object.defineProperty;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __decorateClass$10 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$10(target, key, result);
+  return result;
+};
+let OdxCardComponent = 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>
+    `;
+  }
+};
+OdxCardComponent = __decorateClass$10([
+  customElement("odx-card", [styles$T])
+], OdxCardComponent);
+
+const styles$S = ":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-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto}: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$$ = Object.defineProperty;
+var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
+var __typeError$n = (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$n = (obj, member, msg) => member.has(obj) || __typeError$n("Cannot " + msg);
+var __privateGet$k = (obj, member, getter) => (__accessCheck$n(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$n = (obj, member, value) => member.has(obj) ? __typeError$n("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleSlotChange$6, _handleGroupControlChange;
+let OdxCheckboxGroupComponent = class extends CheckboxGroupFormControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd$n(this, _handleSlotChange$6, () => {
+      for (const control of this.groupControls) {
+        control.addEventListener("change", __privateGet$k(this, _handleGroupControlChange));
+      }
+    });
+    __privateAdd$n(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$k(this, _handleSlotChange$6)}></slot>`;
+  }
+};
+_handleSlotChange$6 = new WeakMap();
+_handleGroupControlChange = new WeakMap();
+__decorateClass$$([
+  property({ reflect: true })
+], OdxCheckboxGroupComponent.prototype, "variant", 2);
+OdxCheckboxGroupComponent = __decorateClass$$([
+  customElement("odx-checkbox-group", [styles$S])
+], OdxCheckboxGroupComponent);
+
+const CheckboxGroupVariant = {
+  LIST: "list"
+};
+
+const styles$R = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
+
+var __defProp$_ = Object.defineProperty;
+var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
+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;
+};
+let OdxCheckboxComponent = class extends CheckboxFormControl {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+  }
+  render() {
+    return html`
+      <div class="indicator">
+        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
+      </div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("indeterminate")) {
+      if (this.indeterminate) {
+        this.ariaChecked = "mixed";
+      }
+    }
+  }
+  toggle(state, dispatchEvent = false) {
+    super.toggle(state, dispatchEvent);
+    if (this.disabled || this.readonly) return;
+    this.indeterminate = false;
+  }
+};
+__decorateClass$_([
+  property({ type: Boolean, reflect: true })
+], OdxCheckboxComponent.prototype, "indeterminate", 2);
+OdxCheckboxComponent = __decorateClass$_([
+  customElement("odx-checkbox", [styles$R])
+], OdxCheckboxComponent);
+
+const styles$Q = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
+
+var __defProp$Z = Object.defineProperty;
+var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
+var __typeError$m = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$Z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$Z(target, key, result);
+  return result;
+};
+var __accessCheck$m = (obj, member, msg) => member.has(obj) || __typeError$m("Cannot " + msg);
+var __privateGet$j = (obj, member, getter) => (__accessCheck$m(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$m = (obj, member, value) => member.has(obj) ? __typeError$m("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleActionClick, _handleClick$3;
+let OdxChipComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.interactive = false;
+    __privateAdd$m(this, _handleActionClick, (event) => {
+      const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
+      if (!actionElement) return;
+      event.stopPropagation();
+      this.emit("remove");
+    });
+    __privateAdd$m(this, _handleClick$3, (event) => {
+      if (this.removable) {
+        const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
+        if (actionElement) return;
+      }
+    });
+  }
+  render() {
+    return html`
+      <odx-text class="content" size="sm" highlight odxPreventTextOverflow>
+        <slot></slot>
+      </odx-text>
+      ${when(this.removable, () => this.renderAction())}
+    `;
+  }
+  renderAction() {
+    return html`
+      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$j(this, _handleActionClick)}>
+        <odx-icon class="action-icon" name="core::close"></odx-icon>
+      </button>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("interactive") || changes.has("disabled")) {
+      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$j(this, _handleClick$3), { capture: true });
+      } else {
+        this.removeEventListener("click", __privateGet$j(this, _handleClick$3));
+      }
+    }
+  }
+};
+_handleActionClick = new WeakMap();
+_handleClick$3 = new WeakMap();
+__decorateClass$Z([
+  query(".action")
+], OdxChipComponent.prototype, "actionElement", 2);
+__decorateClass$Z([
+  property({ type: Boolean, reflect: true })
+], OdxChipComponent.prototype, "removable", 2);
+__decorateClass$Z([
+  property({ type: Boolean, reflect: true })
+], OdxChipComponent.prototype, "interactive", 2);
+__decorateClass$Z([
+  property({ reflect: true })
+], OdxChipComponent.prototype, "variant", 2);
+OdxChipComponent = __decorateClass$Z([
+  customElement("odx-chip", [styles$Q])
+], OdxChipComponent);
+
+const ChipVariant = {
+  NEUTRAL: "neutral",
+  PRIMARY: "primary",
+  HIGHLIGHT: "highlight",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+
+const styles$P = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
+
+const CircularProgressBarSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+
+var __defProp$Y = Object.defineProperty;
+var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
+var __typeError$l = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$Y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$Y(target, key, result);
+  return result;
+};
+var __accessCheck$l = (obj, member, msg) => member.has(obj) || __typeError$l("Cannot " + msg);
+var __privateGet$i = (obj, member, getter) => (__accessCheck$l(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$l = (obj, member, value) => member.has(obj) ? __typeError$l("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$l(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _value$1, _OdxCircularProgressBarComponent_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
+let OdxCircularProgressBarComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$l(this, _OdxCircularProgressBarComponent_instances);
+    __privateAdd$l(this, _value$1, 0);
+    this.viewPortSize = 100;
+    this.stroke = 4;
+    this.indeterminate = false;
+    this.size = CircularProgressBarSize.MEDIUM;
+  }
+  set value(val) {
+    if (val >= -1 && val <= 100) {
+      __privateSet$4(this, _value$1, 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$i(this, _value$1);
+  }
+  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$i(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$i(this, _OdxCircularProgressBarComponent_instances, radius_get)}"
+          cx="50%"
+          cy="50%"
+        />
+        <circle
+          part="indicator"
+          stroke-dasharray="${__privateGet$i(this, _OdxCircularProgressBarComponent_instances, circumference_get)}"
+          stroke-dashoffset="${__privateGet$i(this, _OdxCircularProgressBarComponent_instances, progressValue_get)}"
+          stroke-width="${__privateGet$i(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet$i(this, _OdxCircularProgressBarComponent_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$1 = new WeakMap();
+_OdxCircularProgressBarComponent_instances = new WeakSet();
+circumference_get = function() {
+  return Math.floor(2 * __privateGet$i(this, _OdxCircularProgressBarComponent_instances, radius_get) * Math.PI);
+};
+radius_get = function() {
+  return Math.max(0, this.viewPortSize / 2 - __privateGet$i(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get) / 2);
+};
+progressValue_get = function() {
+  return this.indeterminate ? __privateGet$i(this, _OdxCircularProgressBarComponent_instances, circumference_get) : Math.floor((1 - __privateGet$i(this, _value$1) / 100) * __privateGet$i(this, _OdxCircularProgressBarComponent_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$Y([
+  property({ type: Number })
+], OdxCircularProgressBarComponent.prototype, "value", 1);
+__decorateClass$Y([
+  property({ type: Number, reflect: true })
+], OdxCircularProgressBarComponent.prototype, "stroke", 2);
+__decorateClass$Y([
+  property({ type: Boolean, reflect: true })
+], OdxCircularProgressBarComponent.prototype, "indeterminate", 2);
+__decorateClass$Y([
+  property({ reflect: true })
+], OdxCircularProgressBarComponent.prototype, "size", 2);
+OdxCircularProgressBarComponent = __decorateClass$Y([
+  customElement("odx-circular-progress-bar", [styles$P])
+], OdxCircularProgressBarComponent);
+
+const styles$O = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
+
+var __defProp$X = Object.defineProperty;
+var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
+var __decorateClass$X = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$X(target, key, result);
+  return result;
+};
+let OdxContentBoxComponent = class extends CustomElement {
+  render() {
+    return html`
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  }
+};
+OdxContentBoxComponent = __decorateClass$X([
+  customElement("odx-content-box", [styles$O])
+], OdxContentBoxComponent);
+
+const styles$N = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main)}: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$W = Object.defineProperty;
+var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
+var __typeError$k = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$W = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$W(target, key, result);
+  return result;
+};
+var __accessCheck$k = (obj, member, msg) => member.has(obj) || __typeError$k("Cannot " + msg);
+var __privateGet$h = (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 __privateMethod$a = (obj, member, method) => (__accessCheck$k(obj, member, "access private method"), method);
+var _OdxDropdownComponent_instances, observeReferenceElement_fn, unobserveReferenceElement_fn, updateAriaAttributes_fn$1, _handleMouseEvent, _handleKeyboardEvent$1;
+let OdxDropdownComponent = class extends PopoverHost(CanBeDisabled(CustomElement)) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$k(this, _OdxDropdownComponent_instances);
+    this.matchReferenceWidth = false;
+    this.placement = DropdownPlacement.BOTTOM;
+    __privateAdd$k(this, _handleMouseEvent, (event) => {
+      this.togglePopover();
+    });
+    __privateAdd$k(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$a(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn$1).call(this, referenceElement, this.id);
+    referenceElement.addEventListener("click", __privateGet$h(this, _handleMouseEvent));
+    referenceElement.addEventListener("keydown", __privateGet$h(this, _handleKeyboardEvent$1));
+    if (this.matchReferenceWidth) {
+      __privateMethod$a(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
+    }
+  }
+  unmountPopover(referenceElement) {
+    super.unmountPopover(referenceElement);
+    __privateMethod$a(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn$1).call(this, referenceElement, null);
+    referenceElement.removeEventListener("click", __privateGet$h(this, _handleMouseEvent));
+    referenceElement.removeEventListener("keydown", __privateGet$h(this, _handleKeyboardEvent$1));
+    __privateMethod$a(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
+  }
+  render() {
+    return html`
+      <odx-popover>
+        <slot></slot>
+      </odx-popover>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("id")) {
+      __privateMethod$a(this, _OdxDropdownComponent_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$a(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
+      } else {
+        __privateMethod$a(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
+      }
+    }
+  }
+};
+_OdxDropdownComponent_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$W([
+  query("odx-popover", true)
+], OdxDropdownComponent.prototype, "popoverElement", 2);
+__decorateClass$W([
+  property({ type: Boolean, reflect: true })
+], OdxDropdownComponent.prototype, "matchReferenceWidth", 2);
+__decorateClass$W([
+  property({ type: String, reflect: true })
+], OdxDropdownComponent.prototype, "placement", 2);
+OdxDropdownComponent = __decorateClass$W([
+  customElement("odx-dropdown", [styles$N])
+], OdxDropdownComponent);
+
+var __defProp$V = Object.defineProperty;
+var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
+var __decorateClass$V = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$V(target, key, result);
+  return result;
+};
+class FormatComponent extends IsLocalized(CustomElement) {
+  static {
+    this.styles = [css`:host { display: inline; }`];
+  }
+  render() {
+    if (this.value !== null && this.value !== void 0) {
+      try {
+        return html`${this.transform(this.value) || this.fallbackValue}`;
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+    return html`${this.fallbackValue ?? nothing}`;
+  }
+}
+__decorateClass$V([
+  property()
+], FormatComponent.prototype, "fallbackValue", 2);
+
+var __defProp$U = Object.defineProperty;
+var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
+var __decorateClass$U = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$U(target, key, result);
+  return result;
+};
+let OdxFormatBytesComponent = class extends FormatComponent {
+  constructor() {
+    super(...arguments);
+    this.unit = "byte";
+  }
+  transform(value) {
+    const units = OdxFormatBytesComponent.UNIT_PREFIXES[this.unit];
+    const index = clamp(Math.floor(Math.log10(value) / 3), 0, units.length - 1);
+    const transformedValue = value / 1e3 ** index;
+    return this.formatNumber(transformedValue, {
+      maximumFractionDigits: 2,
+      style: "unit",
+      unit: units[index]
+    });
+  }
+};
+OdxFormatBytesComponent.UNIT_PREFIXES = {
+  bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
+  byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
+};
+__decorateClass$U([
+  property({ type: Number })
+], OdxFormatBytesComponent.prototype, "value", 2);
+__decorateClass$U([
+  property()
+], OdxFormatBytesComponent.prototype, "unit", 2);
+OdxFormatBytesComponent = __decorateClass$U([
+  customElement("odx-format-bytes")
+], OdxFormatBytesComponent);
+
+var __defProp$T = Object.defineProperty;
+var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
+var __decorateClass$T = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$T(target, key, result);
+  return result;
+};
+let OdxFormatDateComponent = class extends FormatComponent {
+  get valueAsDate() {
+    if (this.value === null || this.value === void 0) {
+      return null;
+    }
+    return parseDate(this.value);
+  }
+  transform(value) {
+    return this.formatDate(value, { dateStyle: this.dateStyle });
+  }
+};
+__decorateClass$T([
+  property()
+], OdxFormatDateComponent.prototype, "value", 2);
+__decorateClass$T([
+  property()
+], OdxFormatDateComponent.prototype, "dateStyle", 2);
+OdxFormatDateComponent = __decorateClass$T([
+  customElement("odx-format-date")
+], OdxFormatDateComponent);
+
+var __defProp$S = Object.defineProperty;
+var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
+var __decorateClass$S = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$S(target, key, result);
+  return result;
+};
+let OdxFormatNumberComponent = class extends FormatComponent {
+  transform(value) {
+    return this.formatNumber(value, {
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      unit: this.unit,
+      style: this.type
+    });
+  }
+};
+__decorateClass$S([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "value", 2);
+__decorateClass$S([
+  property()
+], OdxFormatNumberComponent.prototype, "currency", 2);
+__decorateClass$S([
+  property()
+], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
+__decorateClass$S([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
+__decorateClass$S([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
+__decorateClass$S([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
+__decorateClass$S([
+  property()
+], OdxFormatNumberComponent.prototype, "type", 2);
+__decorateClass$S([
+  property()
+], OdxFormatNumberComponent.prototype, "unit", 2);
+__decorateClass$S([
+  property()
+], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
+OdxFormatNumberComponent = __decorateClass$S([
+  customElement("odx-format-number")
+], OdxFormatNumberComponent);
+
+var __defProp$R = Object.defineProperty;
+var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
+var __typeError$j = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$R = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$R(target, key, result);
+  return result;
+};
+var __accessCheck$j = (obj, member, msg) => member.has(obj) || __typeError$j("Cannot " + msg);
+var __privateGet$g = (obj, member, getter) => (__accessCheck$j(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 __privateSet$3 = (obj, member, value, setter) => (__accessCheck$j(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$9 = (obj, member, method) => (__accessCheck$j(obj, member, "access private method"), method);
+var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
+let OdxRelativeTimeComponent = class extends FormatComponent {
+  constructor() {
+    super(...arguments);
+    __privateAdd$j(this, _OdxRelativeTimeComponent_instances);
+    __privateAdd$j(this, _syncInterval);
+    this.value = Date.now();
+    this.syncInterval = null;
+  }
+  get valueAsDate() {
+    if (this.value === null || this.value === void 0) {
+      return null;
+    }
+    return parseDate(this.value);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(__privateGet$g(this, _syncInterval));
+  }
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("syncInterval")) {
+      __privateMethod$9(this, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn).call(this);
+    }
+  }
+  transform(value) {
+    const relativeTime = this.formatRelativeTime(value, { style: this.format, numeric: this.numeric, minUnit: this.minUnit });
+    return html`<time datetime=${optionalAttr(this.valueAsDate?.toISOString())}>${relativeTime}</time>`;
+  }
+};
+_syncInterval = new WeakMap();
+_OdxRelativeTimeComponent_instances = new WeakSet();
+setupSyncInterval_fn = function() {
+  clearInterval(__privateGet$g(this, _syncInterval));
+  if (typeof this.syncInterval !== "number") return;
+  __privateSet$3(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
+};
+__decorateClass$R([
+  property()
+], OdxRelativeTimeComponent.prototype, "value", 2);
+__decorateClass$R([
+  property()
+], OdxRelativeTimeComponent.prototype, "format", 2);
+__decorateClass$R([
+  property()
+], OdxRelativeTimeComponent.prototype, "minUnit", 2);
+__decorateClass$R([
+  property()
+], OdxRelativeTimeComponent.prototype, "numeric", 2);
+__decorateClass$R([
+  property({ type: Number })
+], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
+OdxRelativeTimeComponent = __decorateClass$R([
+  customElement("odx-relative-time")
+], OdxRelativeTimeComponent);
+
+const styles$M = ":host{display:flex;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}";
+
+var __defProp$Q = Object.defineProperty;
+var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$Q(target, key, result);
+  return result;
+};
+let OdxHeaderActionsComponent = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.slot = "actions";
+  }
+};
+OdxHeaderActionsComponent = __decorateClass$Q([
+  customElement("odx-header-actions", [styles$M])
+], OdxHeaderActionsComponent);
+
+const styles$L = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
+
+var __defProp$P = Object.defineProperty;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$P(target, key, result);
+  return result;
+};
+let OdxTitleComponent = class extends CustomElement {
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("ariaLevel")) {
+      this.role = this.ariaLevel !== null ? "heading" : null;
+    }
+  }
+};
+__decorateClass$P([
+  property({ reflect: true })
+], OdxTitleComponent.prototype, "size", 2);
+OdxTitleComponent = __decorateClass$P([
+  requestUpdateOnAriaChange(["ariaLevel"]),
+  customElement("odx-title", [styles$L])
+], OdxTitleComponent);
+
+const TitleSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "xxl"
+};
+
+const styles$K = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
+
+var __defProp$O = Object.defineProperty;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __typeError$i = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$O(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$5;
+let OdxHeaderComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$i(this, _handleSlotChange$5, () => {
+      const [titleElement] = this.titleElements;
+      if (!titleElement) return;
+      titleElement.ariaLevel = "1";
+      titleElement.role = "heading";
+      titleElement.size = TitleSize.XS;
+      titleElement.setAttribute("odxPreventTextOverflow", "true");
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "banner";
+  }
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      <odx-logo size="sm"></odx-logo>
+      <slot @slotchange=${__privateGet$f(this, _handleSlotChange$5)}></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+};
+_handleSlotChange$5 = new WeakMap();
+__decorateClass$O([
+  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
+], OdxHeaderComponent.prototype, "titleElements", 2);
+OdxHeaderComponent = __decorateClass$O([
+  customElement("odx-header", [styles$K])
+], OdxHeaderComponent);
+
+const styles$J = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
+
+var __defProp$N = Object.defineProperty;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$N(target, key, result);
+  return result;
+};
+let OdxHeadlineComponent = class extends CustomElement {
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("ariaLevel")) {
+      this.role = this.ariaLevel !== null ? "heading" : null;
+    }
+  }
+};
+__decorateClass$N([
+  property({ reflect: true })
+], OdxHeadlineComponent.prototype, "size", 2);
+OdxHeadlineComponent = __decorateClass$N([
+  requestUpdateOnAriaChange(["ariaLevel"]),
+  customElement("odx-headline", [styles$J])
+], OdxHeadlineComponent);
+
+const HeadlineSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+var __defProp$M = Object.defineProperty;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$M(target, key, result);
+  return result;
+};
+let OdxIconButtonComponent = class extends OdxButtonComponent {
+  renderContent() {
+    return html`
+      <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
+      <odx-visually-hidden>
+        <slot></slot>
+      </odx-visually-hidden>
+    `;
+  }
+};
+__decorateClass$M([
+  property()
+], OdxIconButtonComponent.prototype, "icon", 2);
+OdxIconButtonComponent = __decorateClass$M([
+  customElement("odx-icon-button")
+], OdxIconButtonComponent);
+
+const styles$I = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
+
+var __defProp$L = Object.defineProperty;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$L(target, key, result);
+  return result;
+};
+let OdxInlineMessageComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+  }
+  render() {
+    return html`
+      <odx-text size="sm">
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+__decorateClass$L([
+  property({ type: Boolean, reflect: true })
+], OdxInlineMessageComponent.prototype, "emphasized", 2);
+__decorateClass$L([
+  property({ reflect: true })
+], OdxInlineMessageComponent.prototype, "variant", 2);
+OdxInlineMessageComponent = __decorateClass$L([
+  customElement("odx-inline-message", [styles$I])
+], OdxInlineMessageComponent);
+
+const InlineMessageVariant = {
+  NEUTRAL: "neutral",
+  INFO: "info",
+  DANGER: "danger",
+  WARNING: "warning",
+  SUCCESS: "success"
+};
+
+const styles$H = ":host{--_color-stroke: var(--odx-color-input-control-stroke);--_color-background: var(--odx-color-input-control-fill);--_block-size: var(--odx-size-225);display:block}.base{display:flex;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_block-size);border-radius:var(--odx-border-radius-controls);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color;padding-inline:var(--odx-size-50);gap:var(--odx-size-50);&:has(:focus-visible){--_color-stroke: var(--odx-color-input-control-stroke-pressed)}&:has(.input:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}}.input{background-color:var(--odx-color-transparent);outline:none;border:none;flex:1 1 auto;block-size:100%;padding:0;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-muted);font-weight:var(--odx-typography-font-weight-normal)}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}";
+
+var __defProp$K = Object.defineProperty;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __typeError$h = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$K(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 _handleInput, _clearInput;
+let OdxInputComponent = class extends FormControl(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.clearable = true;
+    this.placeholder = "";
+    this.type = "text";
+    __privateAdd$h(this, _handleInput, (event) => {
+      this.value = event.target.value;
+      this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true, detail: event }));
+    });
+    __privateAdd$h(this, _clearInput, () => {
+      this.value = "";
+    });
+  }
+  render() {
+    const clearButton = when(
+      this.clearable && this.value,
+      () => html`<odx-icon-button icon="core::error"  @click=${__privateGet$e(this, _clearInput)} variant="ghost" tabindex="-1"></odx-icon-button>`
+    );
+    return html`
+      <div class="base">
+        <slot name="prefix"></slot>
+        <input placeholder=${this.placeholder} class="input" .type=${this.type} ?disabled=${this.disabled} ?readonly=${this.readonly} .value=${this.value} @input=${__privateGet$e(this, _handleInput)} />
+        ${clearButton}
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+};
+_handleInput = new WeakMap();
+_clearInput = new WeakMap();
+OdxInputComponent.formAssociated = true;
+__decorateClass$K([
+  property({ type: Boolean })
+], OdxInputComponent.prototype, "clearable", 2);
+__decorateClass$K([
+  property()
+], OdxInputComponent.prototype, "placeholder", 2);
+__decorateClass$K([
+  property()
+], OdxInputComponent.prototype, "type", 2);
+__decorateClass$K([
+  property({ reflect: true })
+], OdxInputComponent.prototype, "variant", 2);
+OdxInputComponent = __decorateClass$K([
+  customElement("odx-input", [styles$H])
+], OdxInputComponent);
+
+const InputVariant = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+
+const styles$G = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
+
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$J(target, key, result);
+  return result;
+};
+let OdxLineClampComponent = class extends CustomElement {
+  updated(props) {
+    super.updated(props);
+    if (typeof this.max === "number" && this.max > 0) {
+      this.style.setProperty("--max", String(this.max));
+    } else {
+      this.style.removeProperty("--max");
+    }
+    if (typeof this.max === "number" && this.max > 0) {
+      this.style.setProperty("--min", String(this.max));
+    } else {
+      this.style.removeProperty("--max");
+    }
+  }
+};
+__decorateClass$J([
+  property({ type: Number })
+], OdxLineClampComponent.prototype, "max", 2);
+OdxLineClampComponent = __decorateClass$J([
+  customElement("odx-line-clamp", [styles$G])
+], OdxLineClampComponent);
+
+const styles$F = ":host{display:flex;flex-direction:column;padding:var(--odx-size-75);border-block-end:var(--odx-border-sm)}";
+
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$I(target, key, result);
+  return result;
+};
+let OdxListItemComponent = class extends BaseLink {
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      ${when(
+      this.href,
+      () => super.render(),
+      () => html`<slot></slot>`
+    )}
+      <slot name="suffix"></slot>
+    `;
+  }
+};
+OdxListItemComponent = __decorateClass$I([
+  customElement("odx-list-item", [styles$F])
+], OdxListItemComponent);
+
+const styles$E = "";
+
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$H(target, key, result);
+  return result;
+};
+let OdxListComponent = class extends CustomElement {
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+};
+OdxListComponent = __decorateClass$H([
+  customElement("odx-list", [styles$E])
+], OdxListComponent);
+
+const styles$D = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgba(255, 255, 255, .25));display:contents;overflow:hidden;border-radius:inherit}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden;border-radius:inherit}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-size-12));pointer-events:all;visibility:visible}";
+
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __typeError$g = (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$G(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"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _loadingContainerPosition;
+const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
+let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$g(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 class="content">
+          <odx-loading-spinner></odx-loading-spinner>
+        </div>
+      </div>
+    `;
+  }
+  showOverlay() {
+    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, true);
+    __privateSet$2(this, _loadingContainerPosition, window.getComputedStyle(this.loadingContainer).position);
+    if (__privateGet$d(this, _loadingContainerPosition) !== "static") return;
+    this.loadingContainer.style.position = "relative";
+    this.loadingContainer.inert = true;
+  }
+  hideOverlay() {
+    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
+    if (__privateGet$d(this, _loadingContainerPosition) !== "static") return;
+    this.loadingContainer.style.position = "";
+    this.loadingContainer.inert = false;
+  }
+};
+_loadingContainerPosition = new WeakMap();
+__decorateClass$G([
+  query('[part="overlay"]', true)
+], OdxLoadingOverlayComponent.prototype, "overlay", 2);
+OdxLoadingOverlayComponent = __decorateClass$G([
+  customElement("odx-loading-overlay", [styles$D])
+], OdxLoadingOverlayComponent);
+
+const styles$C = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}:not(svg){transform-origin:0px 0px}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:50%;block-size:calc(var(--_size) / 3);flex:0 0 calc(var(--_size) / 3);z-index:3;animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-transparent-pressed)}50%{transform:scale(1);background-color:currentColor}}";
+
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __typeError$f = (msg) => {
+  throw TypeError(msg);
+};
+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$F(target, key, result);
+  return result;
+};
+var __accessCheck$f = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
+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$8 = (obj, member, method) => (__accessCheck$f(obj, member, "access private method"), method);
+var _OdxLoadingSpinnerComponent_instances, renderSpinner_fn, renderDots_fn;
+let OdxLoadingSpinnerComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$f(this, _OdxLoadingSpinnerComponent_instances);
+  }
+  render() {
+    if (this.variant === "dots") {
+      return __privateMethod$8(this, _OdxLoadingSpinnerComponent_instances, renderDots_fn).call(this);
+    }
+    return __privateMethod$8(this, _OdxLoadingSpinnerComponent_instances, renderSpinner_fn).call(this);
+  }
+};
+_OdxLoadingSpinnerComponent_instances = new WeakSet();
+renderSpinner_fn = function() {
+  return html`
+      <svg class="base" role="progressbar" aria-label="Loading" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle class="track" cx="24" cy="24" r="20" fill="none"></circle>
+        <circle class="indicator" cx="24" cy="24" r="20" fill="none"></circle>
+      </svg>
+    `;
+};
+renderDots_fn = function() {
+  return html`
+      <div class="indicator"></div>
+      <div class="indicator"></div>
+      <div class="indicator"></div>
+    `;
+};
+__decorateClass$F([
+  property({ reflect: true })
+], OdxLoadingSpinnerComponent.prototype, "variant", 2);
+OdxLoadingSpinnerComponent = __decorateClass$F([
+  customElement("odx-loading-spinner", [styles$C])
+], OdxLoadingSpinnerComponent);
+
+const styles$B = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
+
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+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$E(target, key, result);
+  return result;
+};
+let OdxLogoComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.compact = false;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.ariaLabel ||= "Dräger";
+    this.ariaRoleDescription ||= "Logo";
+    this.role = "img";
+    this.translate = false;
+  }
+};
+__decorateClass$E([
+  property({ reflect: true })
+], OdxLogoComponent.prototype, "size", 2);
+__decorateClass$E([
+  property({ type: Boolean, reflect: true })
+], OdxLogoComponent.prototype, "compact", 2);
+OdxLogoComponent = __decorateClass$E([
+  customElement("odx-logo", [styles$B])
+], OdxLogoComponent);
+
+const LogoSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __typeError$e = (msg) => {
+  throw TypeError(msg);
+};
+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$D(target, key, result);
+  return result;
+};
+var __accessCheck$e = (obj, member, msg) => member.has(obj) || __typeError$e("Cannot " + msg);
+var __privateGet$c = (obj, member, getter) => (__accessCheck$e(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$e = (obj, member, value) => member.has(obj) ? __typeError$e("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleClick$2;
+let OdxMainMenuButtonComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$e(this, _handleClick$2, () => {
+      document.querySelector("odx-main-menu")?.open();
+    });
+  }
+  render() {
+    return html`
+      <odx-icon-button aria-label="Open main menu" icon="core::menu" variant="ghost" @click=${__privateGet$c(this, _handleClick$2)}>
+      </odx-icon-button>
+    `;
+  }
+};
+_handleClick$2 = new WeakMap();
+OdxMainMenuButtonComponent = __decorateClass$D([
+  customElement("odx-main-menu-button", [])
+], OdxMainMenuButtonComponent);
+
+const styles$A = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}.base{display:flex;place-items:center;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--odx-size-50);block-size:var(--odx-size-300);padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-outline);transition:var(--odx-transition-default);text-decoration:none;&:focus-visible{--_color-outline: var(--odx-focus-ring-color)}}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
+
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$C(target, key, result);
+  return result;
+};
+let OdxMainMenuLinkComponent = class extends BaseLink {
+};
+OdxMainMenuLinkComponent = __decorateClass$C([
+  customElement("odx-main-menu-link", [styles$A])
+], OdxMainMenuLinkComponent);
+
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$B(target, key, result);
+  return result;
+};
+let OdxMainMenuSubtitleComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.slot = "subtitle";
+  }
+  render() {
+    return html`
+      <odx-text size="md">
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+OdxMainMenuSubtitleComponent = __decorateClass$B([
+  customElement("odx-main-menu-subtitle")
+], OdxMainMenuSubtitleComponent);
+
+var __defProp$A = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$A(target, key, result);
+  return result;
+};
+let OdxMainMenuTitleComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.slot = "title";
+  }
+  render() {
+    return html`
+      <odx-title size="sm">
+        <slot></slot>
+      </odx-title>
+    `;
+  }
+};
+OdxMainMenuTitleComponent = __decorateClass$A([
+  customElement("odx-main-menu-title")
+], OdxMainMenuTitleComponent);
+
+const styles$z = ":host{--odx-link-color: var(--odx-color-foreground-light);--odx-link-color-hover: var(--odx-color-foreground-light);--odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));border:none;background-color:var(--odx-color-background-draeger);color:var(--odx-color-foreground-light);margin:0;padding:0;transform:translate(-100%);box-shadow:var(--odx-shadow-level-2);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete}:host(:popover-open){display:grid;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(-100%)}}:host::backdrop{background-color:var(--odx-color-backdrop);backdrop-filter:blur(0);opacity:0;transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);cursor:default}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-inline:var(--odx-size-150);padding-block-start:var(--odx-size-75);padding-block-end:clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75))}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{padding-block-end:0;padding-block-start:var(--odx-size-75);column-gap:var(--odx-size-100)}";
+
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __typeError$d = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$z(target, key, result);
+  return result;
+};
+var __accessCheck$d = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
+var __privateGet$b = (obj, member, getter) => (__accessCheck$d(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$d = (obj, member, value) => member.has(obj) ? __typeError$d("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _focusTrap, _handleSlotChange$4, _handleToggle;
+let OdxMainMenuComponent = class extends CustomElement {
+  constructor() {
+    super();
+    __privateAdd$d(this, _focusTrap, new FocusTrapController(this));
+    __privateAdd$d(this, _handleSlotChange$4, () => {
+      for (const link of this.links) {
+        link.slot ||= "link-navigation";
+      }
+    });
+    __privateAdd$d(this, _handleToggle, ({ newState }) => {
+      __privateGet$b(this, _focusTrap).toggle(newState === "open");
+    });
+    if (!isServer) {
+      this.addEventListener("toggle", __privateGet$b(this, _handleToggle));
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.popover = "auto";
+  }
+  toggle() {
+    this.togglePopover();
+  }
+  open() {
+    this.showPopover();
+  }
+  close() {
+    this.hidePopover();
+  }
+  render() {
+    return html`
+      <div part="header">
+        <slot name="title"></slot>
+        <slot name="subtitle"></slot>
+      </div>
+      <nav part="navigation">
+        <odx-stack gap="md" align="stretch" vertical>
+          <slot @slotchange=${__privateGet$b(this, _handleSlotChange$4)}></slot>
+        </odx-stack>
+      </nav>
+      <odx-stack part="link-navigation" gap="xs"  wrap horizontal justify="start">
+        <slot name="link-navigation"></slot>
+      </odx-stack>
+      <div part="footer">
+        <odx-logo size="sm"></odx-logo>
+      </div>
+    `;
+  }
+};
+_focusTrap = new WeakMap();
+_handleSlotChange$4 = new WeakMap();
+_handleToggle = new WeakMap();
+__decorateClass$z([
+  queryAssignedElements({ selector: "odx-link", flatten: true })
+], OdxMainMenuComponent.prototype, "links", 2);
+OdxMainMenuComponent = __decorateClass$z([
+  customElement("odx-main-menu", [styles$z])
+], OdxMainMenuComponent);
+
+const styles$y = "@layer base{.base{place-content:flex-start}}";
+
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$y(target, key, result);
+  return result;
+};
+let OdxMenuItemComponent = class extends BaseButtonComponent {
+  renderContent() {
+    return html`
+      ${when(!this.loading && this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
+      ${when(this.loading, () => this.renderSpinner())}
+      <odx-line-clamp class="content" .max=${2}>
+        <slot></slot>
+      </odx-line-clamp>
+      <slot name="suffix"></slot>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "menuitem";
+  }
+  renderOverlay() {
+    return nothing;
+  }
+};
+__decorateClass$y([
+  property()
+], OdxMenuItemComponent.prototype, "icon", 2);
+OdxMenuItemComponent = __decorateClass$y([
+  customElement("odx-menu-item", [styles$y])
+], OdxMenuItemComponent);
+
+const styles$x = ":host{display:flex;place-items:center;padding-inline:var(--odx-size-50);user-select:none;font-weight:var(--odx-typography-font-weight-medium);gap:var(--odx-size-50)}@layer baes{odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5);margin-inline:}}";
+
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$x(target, key, result);
+  return result;
+};
+let OdxMenuLabelComponent = class extends CustomElement {
+};
+OdxMenuLabelComponent = __decorateClass$x([
+  customElement("odx-menu-label", [styles$x])
+], OdxMenuLabelComponent);
+
+const styles$w = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main);--_outer-padding: var(--odx-size-50)}.base{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size)}::slotted(odx-separator){--block-space: calc(-1 * var(--_gap) / 2)}::slotted(odx-button){inline-size:100%;margin:0}";
+
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __typeError$c = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$w(target, key, result);
+  return result;
+};
+var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
+var __privateGet$a = (obj, member, getter) => (__accessCheck$c(obj, member, "read from private field"), 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 _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 OdxMenuComponent = class extends PopoverHost(CustomElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$c(this, _tabindexController, new RovingTabindexController(this, {
+      elements: () => this.getItems(),
+      direction: "vertical"
+    }));
+    __privateAdd$c(this, _handleReferenceInteraction, () => {
+      this.togglePopover();
+    });
+    __privateAdd$c(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$c(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$c(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";
+    this.togglePopover(true);
+  }
+  mountPopover(referenceElement) {
+    super.mountPopover(referenceElement);
+    referenceElement?.addEventListener("click", __privateGet$a(this, _handleReferenceInteraction));
+    referenceElement?.addEventListener("keydown", __privateGet$a(this, _handleReferenceKeyDown));
+  }
+  unmountPopover(referenceElement) {
+    referenceElement.removeEventListener("keydown", __privateGet$a(this, _handleReferenceKeyDown));
+    referenceElement.removeEventListener("click", __privateGet$a(this, _handleReferenceInteraction));
+    super.unmountPopover(referenceElement);
+  }
+  onBeforePopoverShow() {
+    __privateGet$a(this, _tabindexController).currentIndex = 0;
+    __privateGet$a(this, _tabindexController).focus();
+  }
+  onPopoverShow() {
+    this.addEventListener("keydown", __privateGet$a(this, _handleKeyDown));
+  }
+  onBeforePopoverHide() {
+    this.removeEventListener("keydown", __privateGet$a(this, _handleKeyDown));
+  }
+  isMenuItem(element) {
+    return MENU_ITEM_ROLES.includes(element.getAttribute?.("role") ?? "");
+  }
+  render() {
+    return html`
+      <odx-popover>
+        <div class="base">
+          <slot @click=${__privateGet$a(this, _handleClick$1)}></slot>
+        </div>
+      </odx-popover>
+    `;
+  }
+};
+_tabindexController = new WeakMap();
+_handleReferenceInteraction = new WeakMap();
+_handleClick$1 = new WeakMap();
+_handleKeyDown = new WeakMap();
+_handleReferenceKeyDown = new WeakMap();
+OdxMenuComponent = __decorateClass$w([
+  customElement("odx-menu", [styles$w])
+], OdxMenuComponent);
+
+const styles$v = "@layer base{:host{--_margin-block: 0}.base{text-align:start;place-content:flex-start}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}::slotted(*){flex:0 0 auto}::slotted([slot=\"suffix\"]){margin-inline-start:auto}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0}}";
+
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$v(target, key, result);
+  return result;
+};
+let OdxNavigationItemComponent = class extends BaseButtonComponent {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this.ariaSelectedValue = "page";
+  }
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("selected") || props.has("ariaSelectedValue")) {
+      this.ariaCurrent = this.selected ? this.ariaSelectedValue : null;
+    }
+  }
+};
+__decorateClass$v([
+  property({ reflect: true })
+], OdxNavigationItemComponent.prototype, "size", 2);
+__decorateClass$v([
+  property({ type: Boolean })
+], OdxNavigationItemComponent.prototype, "selected", 2);
+__decorateClass$v([
+  property()
+], OdxNavigationItemComponent.prototype, "ariaSelectedValue", 2);
+OdxNavigationItemComponent = __decorateClass$v([
+  customElement("odx-navigation-item", [styles$v])
+], OdxNavigationItemComponent);
+
+const NavigationItemSize = {
+  MD: "md",
+  LG: "lg"
+};
+
+const styles$u = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$u(target, key, result);
+  return result;
+};
+let OdxOptionComponent = class extends OptionControl {
+  render() {
+    return html`
+      ${when(
+      this.type === "checkbox",
+      () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
+      () => html`<slot name="prefix"></slot>`
+    )}
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+  }
+};
+__decorateClass$u([
+  property({ reflect: true })
+], OdxOptionComponent.prototype, "type", 2);
+OdxOptionComponent = __decorateClass$u([
+  customElement("odx-option", [styles$u])
+], OdxOptionComponent);
+
+const styles$t = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);overflow:auto;padding-inline-end:var(--odx-size-75)}";
+
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$t(target, key, result);
+  return result;
+};
+let OdxPageLayoutComponent = class extends CustomElement {
+  render() {
+    return html`
+      ${optionalSlot(this, "navigation")}
+      ${optionalSlot(this, "header")}
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+OdxPageLayoutComponent = __decorateClass$t([
+  customElement("odx-page-layout", [styles$t])
+], OdxPageLayoutComponent);
+
+const styles$s = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
+
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$s(target, key, result);
+  return result;
+};
+let OdxPageComponent = class extends CustomElement {
+  firstUpdated() {
+    SharedResizeObserver.observe(this, () => {
+      this.style.setProperty("--header-size", toPx(this.headerElement.offsetHeight));
+      this.style.setProperty("--subheader-size", toPx(this.subheaderElement.offsetHeight));
+    });
+  }
+  render() {
+    return html`
+      <div class="header" part="header">
+        <slot name="header"></slot>
+      </div>
+      <div class="subheader" part="subheader">
+        <slot name="subheader"></slot>
+      </div>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass$s([
+  query(".header", true)
+], OdxPageComponent.prototype, "headerElement", 2);
+__decorateClass$s([
+  query(".subheader", true)
+], OdxPageComponent.prototype, "subheaderElement", 2);
+__decorateClass$s([
+  property({ reflect: true })
+], OdxPageComponent.prototype, "alignment", 2);
+__decorateClass$s([
+  property({ reflect: true })
+], OdxPageComponent.prototype, "layout", 2);
+OdxPageComponent = __decorateClass$s([
+  customElement("odx-page", [styles$s])
+], OdxPageComponent);
+
+const PageAlignment = {
+  CENTER: "center"
+};
+const PageLayout = {
+  NARROW: "narrow",
+  WIDE: "wide"
+};
+
+const styles$r = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;--_label-width: var(--odx-progress-label-width, 33.3%);--_value-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_color-foreground);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}.base,.indicator{inline-size:100%}.base{block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);overflow:hidden;position:relative;inline-size:100%}.indicator{block-size:100%;background-color:var(--_indicator-color);transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transition:var(--odx-transition-reduced);transition-property:background-color,transform;transform-origin:0% 50%}.label{text-align:start;overflow-x:clip;text-overflow:ellipsis;white-space:nowrap;max-inline-size:calc(100% - var(--_value-width) - var(--odx-size-75))}.value{text-align:end;margin-inline-start:auto}:host([condensed]){padding-block:0;flex-wrap:nowrap;.label{inline-size:var(--_label-width)}.value{width:var(--_value-width);order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-danger-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
+
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$r(target, key, result);
+  return result;
+};
+let OdxProgressBarComponent = 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() {
+    const valueText = this.valueText || `${this.valuePercentage}%`;
+    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">${valueText}</odx-text>`)}
+      <div
+        class="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 class="indicator"></div>
+      </div>
+    `;
+  }
+};
+__decorateClass$r([
+  queryAssignedElements()
+], OdxProgressBarComponent.prototype, "content", 2);
+__decorateClass$r([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarComponent.prototype, "indeterminate", 2);
+__decorateClass$r([
+  property({ type: Number })
+], OdxProgressBarComponent.prototype, "min", 2);
+__decorateClass$r([
+  property({ type: Number })
+], OdxProgressBarComponent.prototype, "max", 2);
+__decorateClass$r([
+  property({ type: Number })
+], OdxProgressBarComponent.prototype, "value", 2);
+__decorateClass$r([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarComponent.prototype, "condensed", 2);
+__decorateClass$r([
+  property({ reflect: true })
+], OdxProgressBarComponent.prototype, "state", 2);
+__decorateClass$r([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarComponent.prototype, "hideValue", 2);
+__decorateClass$r([
+  property()
+], OdxProgressBarComponent.prototype, "label", 2);
+__decorateClass$r([
+  property()
+], OdxProgressBarComponent.prototype, "valueText", 2);
+OdxProgressBarComponent = __decorateClass$r([
+  customElement("odx-progress-bar", [styles$r])
+], OdxProgressBarComponent);
+
+const ProgressState = {
+  CONFIRM: "confirm",
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+const styles$q = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-background-main);--_indicator-stroke-width: var(--odx-size-50);.indicator{outline-color:var(--odx-color-selection-control-fill-selected)}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected)}";
+
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$q(target, key, result);
+  return result;
+};
+let OdxRadioButtonComponent = class extends CheckboxFormControl {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "radio";
+  }
+  render() {
+    return html`
+      <div class="indicator"></div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  toggle(state, emitEvent = false) {
+    super.toggle(state ?? true, emitEvent);
+  }
+};
+OdxRadioButtonComponent = __decorateClass$q([
+  customElement("odx-radio-button", [styles$q])
+], OdxRadioButtonComponent);
+
+const styles$p = ":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-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch):last-of-type){border-block-end:none}";
+
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$p(target, key, result);
+  return result;
+};
+let OdxRadioGroupComponent = class extends RadioGroupFormControl {
+};
+__decorateClass$p([
+  property({ reflect: true })
+], OdxRadioGroupComponent.prototype, "variant", 2);
+OdxRadioGroupComponent = __decorateClass$p([
+  customElement("odx-radio-group", [styles$p])
+], OdxRadioGroupComponent);
+
+const RadioGroupVariant = {
+  LIST: "list"
+};
+
+const styles$o = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-600);.toggle-icon{transform:rotateY(-180deg)}}";
+
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __typeError$b = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$o(target, key, result);
+  return result;
+};
+var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
+var __privateGet$9 = (obj, member, getter) => (__accessCheck$b(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleSlotChange$3, _handleControlClick;
+setTranslation("en", {
+  railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } }
+});
+let OdxRailNavigationComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.collapsed = false;
+    __privateAdd$b(this, _handleSlotChange$3, () => {
+      for (const item of getAssignedElements(this)) {
+        item.size = "lg";
+      }
+    });
+    __privateAdd$b(this, _handleControlClick, () => {
+      this.collapsed = !this.collapsed;
+    });
+  }
+  render() {
+    const controlLabel = translate(`railNavigation.controlText.${this.collapsed ? "collapsed" : "expanded"}`);
+    return html`
+      <slot @slotchange=${__privateGet$9(this, _handleSlotChange$3)}></slot>
+      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet$9(this, _handleControlClick)} odxPreventTextOverflow>
+        <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
+        <odx-visually-hidden>${watch(controlLabel)}</odx-visually-hidden>${watch(controlLabel)}
+      </odx-navigation-item>
+    `;
+  }
+  getItems() {
+    return this.navigationItems;
+  }
+};
+_handleSlotChange$3 = new WeakMap();
+_handleControlClick = new WeakMap();
+__decorateClass$o([
+  queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
+], OdxRailNavigationComponent.prototype, "navigationItems", 2);
+__decorateClass$o([
+  property({ type: Boolean, reflect: true })
+], OdxRailNavigationComponent.prototype, "collapsed", 2);
+OdxRailNavigationComponent = __decorateClass$o([
+  customElement("odx-rail-navigation", [styles$o])
+], OdxRailNavigationComponent);
+
+const styles$n = ":host{--odx-search-max-inline-size: 35em;display:block;max-width:var(--odx-search-max-inline-size)}";
+
+class SearchEvent extends CustomEvent {
+  constructor(value, rawValue) {
+    super("search", { detail: { rawValue, value } });
+  }
+}
+
+const SearchBarBehavior = {
+  INSTANT: "instant",
+  SUBMIT: "submit"
+};
+
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __typeError$a = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$n(target, key, result);
+  return result;
+};
+var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
+var __privateGet$8 = (obj, member, getter) => (__accessCheck$a(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$a(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$7 = (obj, member, method) => (__accessCheck$a(obj, member, "access private method"), method);
+var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleInputSearch, _handleInputChange, updateValue_fn;
+let OdxSearchBarComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$a(this, _OdxSearchBarComponent_instances);
+    __privateAdd$a(this, _value);
+    __privateAdd$a(this, _search, this.search.bind(this));
+    this.behavior = SearchBarBehavior.SUBMIT;
+    this.placeholder = "";
+    __privateAdd$a(this, _handleInputSearch, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.search(__privateGet$8(this, _OdxSearchBarComponent_instances, inputValue_get));
+    });
+    __privateAdd$a(this, _handleInputChange, (event) => {
+      if (this.behavior !== SearchBarBehavior.INSTANT) return;
+      event.preventDefault();
+      event.stopPropagation();
+      __privateGet$8(this, _search).call(this, __privateGet$8(this, _OdxSearchBarComponent_instances, inputValue_get));
+    });
+  }
+  search(value, options) {
+    if (__privateGet$8(this, _value) === value && options?.forceUpdate !== true) return;
+    __privateMethod$7(this, _OdxSearchBarComponent_instances, updateValue_fn).call(this, value, options?.updateInput);
+    if (options?.dispatchEvent === false) return;
+    this.dispatchEvent(new SearchEvent(value, this.inputElement.value));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "presentation";
+  }
+  updated(props) {
+    if (props.has("debounceTime")) {
+      __privateSet$1(this, _search, typeof this.debounceTime === "number" ? debounce(this.search.bind(this), this.debounceTime) : this.search.bind(this));
+    }
+  }
+  render() {
+    return html`
+      <odx-input class="input" spellcheck="false" autocomplete="off" placeholder=${this.placeholder} @search=${__privateGet$8(this, _handleInputSearch)} @input=${__privateGet$8(this, _handleInputChange)} type="search">
+        <odx-icon name="core::search" slot="prefix"></odx-icon>
+      </odx-input>
+    `;
+  }
+};
+_value = new WeakMap();
+_search = new WeakMap();
+_OdxSearchBarComponent_instances = new WeakSet();
+inputValue_get = function() {
+  return (this.inputElement.value ?? "").replace(/\s\s+/g, " ").trim();
+};
+_handleInputSearch = new WeakMap();
+_handleInputChange = new WeakMap();
+updateValue_fn = function(value, updateInput = false) {
+  __privateSet$1(this, _value, value);
+  if (!updateInput) return;
+  this.inputElement.value = value;
+};
+__decorateClass$n([
+  query(".input", true)
+], OdxSearchBarComponent.prototype, "inputElement", 2);
+__decorateClass$n([
+  property()
+], OdxSearchBarComponent.prototype, "behavior", 2);
+__decorateClass$n([
+  property({ type: Number })
+], OdxSearchBarComponent.prototype, "debounceTime", 2);
+__decorateClass$n([
+  property()
+], OdxSearchBarComponent.prototype, "placeholder", 2);
+OdxSearchBarComponent = __decorateClass$n([
+  customElement("odx-search-bar", [styles$n])
+], OdxSearchBarComponent);
+
+const styles$m = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
+
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __typeError$9 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$m(target, key, result);
+  return result;
+};
+var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
+var __privateGet$7 = (obj, member, getter) => (__accessCheck$9(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod$6 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
+var _OdxSelectComponent_instances, handleMultipleChange_fn, _handleDropdownToggle, _removeChip;
+let OdxSelectComponent = class extends SelectFormControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd$9(this, _OdxSelectComponent_instances);
+    __privateAdd$9(this, _handleDropdownToggle, (event) => {
+      if (event.newState === "open") {
+        this.options[0]?.setActive();
+      }
+    });
+    __privateAdd$9(this, _removeChip, async (option) => {
+      this.toggle(option, false, true);
+    });
+  }
+  render() {
+    return html`
+      <div class="base" id="select-trigger" tabindex="0">
+        <div class="value" odxPreventTextOverflow>
+          ${when(
+      Array.from(this.selectedOptions).length,
+      () => this.renderSelectedOptions(),
+      () => html`<slot name="placeholder">Select options</slot>`
+    )}
+        </div>
+        <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
+      </div>
+      <odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} matchReferenceWidth @toggle=${__privateGet$7(this, _handleDropdownToggle)}>
+        <slot @slotchange=${__privateMethod$6(this, _OdxSelectComponent_instances, handleMultipleChange_fn)}></slot>
+      </odx-dropdown>
+    `;
+  }
+  renderSelectedOptions() {
+    const selectedOptions = Array.from(this.selectedOptions);
+    if (this.multiple) {
+      const maxOptions = 2;
+      const visibleOptions = selectedOptions.slice(0, maxOptions);
+      const showExtra = selectedOptions.length > maxOptions;
+      return html`
+        ${repeat(
+        visibleOptions,
+        (option) => html`<odx-chip @remove=${() => __privateGet$7(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
+      )}
+        ${when(showExtra, () => html`<odx-chip>+${selectedOptions.length - maxOptions}</odx-chip>`)}
+      `;
+    }
+    this.dropdownElement.hidePopover();
+    return html`${selectedOptions[0]?.getTextLabel()}`;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("multiple")) {
+      __privateMethod$6(this, _OdxSelectComponent_instances, handleMultipleChange_fn).call(this);
+    }
+  }
+};
+_OdxSelectComponent_instances = new WeakSet();
+handleMultipleChange_fn = function() {
+  for (const option of this.options) {
+    option.type = this.multiple ? "checkbox" : null;
+  }
+};
+_handleDropdownToggle = new WeakMap();
+_removeChip = new WeakMap();
+__decorateClass$m([
+  queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
+], OdxSelectComponent.prototype, "options", 2);
+__decorateClass$m([
+  query(OdxDropdownComponent.selector, true)
+], OdxSelectComponent.prototype, "dropdownElement", 2);
+OdxSelectComponent = __decorateClass$m([
+  customElement("odx-select", [styles$m])
+], OdxSelectComponent);
+
+const styles$l = "@layer base{:host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-75);display:block;margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space)}.base{display:flex;align-items:center;column-gap:var(--odx-size-37);&:before,&:after{content:\"\";display:block;flex:1 1 auto;block-size:var(--size);background-color:var(--color);pointer-events:none}}}@layer variants{:host([vertical]){margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size));.base{flex-direction:column;&:after,&:before{min-block-size:calc(var(--min-size) / 2);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size)}}}:host(:not([vertical])){.base{&:after,&:before{min-inline-size:calc(var(--min-size) / 2)}}}:host([highlight]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}:host([empty-slot]) .base{gap:0}}";
+
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$l(target, key, result);
+  return result;
+};
+let OdxSeparatorComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.highlight = false;
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "separator";
+  }
+  render() {
+    return html`
+      <div class="base">
+        <div class="content">
+          <slot ${emptySlotFallbackFix()} @slotchange=${() => this.requestUpdate()}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass$l([
+  property({ reflect: true })
+], OdxSeparatorComponent.prototype, "align", 2);
+__decorateClass$l([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "highlight", 2);
+__decorateClass$l([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "vertical", 2);
+OdxSeparatorComponent = __decorateClass$l([
+  customElement("odx-separator", [styles$l])
+], OdxSeparatorComponent);
+
+const styles$k = ":host{--_color-fill: var(--odx-color-disabled-fill);display:block;block-size:var(--odx-size-150);inline-size:100%;background:linear-gradient(90deg,var(--_color-fill) 33%,var(--odx-color-disabled-foreground) 50%,var(--_color-fill) 66%);background-size:200% 100%;animation:odx-skeleton-loading 2s infinite linear}:host([rounded]:not([rounded=\"false\"])){border-radius:var(--odx-border-radius-md)}@keyframes odx-skeleton-loading{0%{background-position:100% 100%}to{background-position:-100% 100%}}";
+
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$k(target, key, result);
+  return result;
+};
+let OdxSkeletonComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.rounded = false;
+  }
+  render() {
+    return html``;
+  }
+};
+__decorateClass$k([
+  property({ type: Boolean, reflect: true })
+], OdxSkeletonComponent.prototype, "rounded", 2);
+OdxSkeletonComponent = __decorateClass$k([
+  customElement("odx-skeleton", [styles$k])
+], OdxSkeletonComponent);
+
+const styles$j = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
+
+const 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: "" }
+};
+
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __typeError$8 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$j(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 __privateSet = (obj, member, value, setter) => (__accessCheck$8(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$5 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
+var _previousHandle, _nextHandle, _OdxSliderHandleComponent_instances, isLabelVisible_fn, isTrackVisible_fn, findClosestValue_fn, updatePosition_fn, getValueFromPosition_fn, calculateValue_fn, limitValue_fn, findPreviousHandle_fn, findNextHandle_fn;
+let OdxSliderHandleComponent = class extends IsDraggable(NumberControl(CustomElement)) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$8(this, _OdxSliderHandleComponent_instances);
+    this.context = sliderContext.defaultValue;
+    __privateAdd$8(this, _previousHandle, null);
+    __privateAdd$8(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$6(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
+    this.value = __privateMethod$5(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, __privateMethod$5(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
+    this.focus();
+  }
+  dragStart(event) {
+    super.dragStart?.(event);
+    __privateMethod$5(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
+  }
+  dragMove(event) {
+    super.dragMove?.(event);
+    const value = __privateMethod$5(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position);
+    const closestValue = __privateMethod$5(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, value);
+    if (this.value !== closestValue) {
+      this.value = closestValue;
+    }
+    __privateMethod$5(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, value);
+  }
+  afterDragEnd(event) {
+    super.afterDragEnd?.(event);
+    __privateGet$6(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
+    __privateMethod$5(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleComponent_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, _OdxSliderHandleComponent_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, _OdxSliderHandleComponent_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, _OdxSliderHandleComponent_instances, findPreviousHandle_fn).call(this));
+    __privateSet(this, _nextHandle, __privateMethod$5(this, _OdxSliderHandleComponent_instances, findNextHandle_fn).call(this));
+    __privateMethod$5(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod$5(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, this.value));
+  }
+  render() {
+    const label = this.getValueText() || this.value;
+    return html`
+      ${when(__privateMethod$5(this, _OdxSliderHandleComponent_instances, isTrackVisible_fn).call(this), () => html`<div part="track with-motion"></div>`)}
+      <div part="thumb with-motion" tabindex="0"></div>
+      ${when(__privateMethod$5(this, _OdxSliderHandleComponent_instances, isLabelVisible_fn).call(this), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
+    `;
+  }
+};
+_previousHandle = new WeakMap();
+_nextHandle = new WeakMap();
+_OdxSliderHandleComponent_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$6(this, _previousHandle) || !__privateGet$6(this, _previousHandle) && !__privateGet$6(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, _OdxSliderHandleComponent_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$6(this, _nextHandle)?.style.setProperty("--_previous-position", valuePercentage);
+  __privateGet$6(this, _previousHandle)?.style.setProperty("--_next-position", valuePercentage);
+};
+getValueFromPosition_fn = function(position) {
+  return __privateMethod$5(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, __privateMethod$5(this, _OdxSliderHandleComponent_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$6(this, _previousHandle) ? Math.max(__privateGet$6(this, _previousHandle).value, this.min - this.minRange) + this.minRange : this.min;
+  const endLimit = __privateGet$6(this, _nextHandle) ? Math.min(__privateGet$6(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 OdxSliderHandleComponent) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+  return null;
+};
+findNextHandle_fn = function() {
+  let sibling = this.nextElementSibling;
+  while (sibling) {
+    if (sibling instanceof OdxSliderHandleComponent) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+  return null;
+};
+__decorateClass$j([
+  consume({ context: sliderContext.context, subscribe: true })
+], OdxSliderHandleComponent.prototype, "context", 2);
+__decorateClass$j([
+  property()
+], OdxSliderHandleComponent.prototype, "trackVisibility", 2);
+OdxSliderHandleComponent = __decorateClass$j([
+  customElement("odx-slider-handle", [styles$j])
+], OdxSliderHandleComponent);
+
+const styles$i = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: var(--odx-size-12);display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
+
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$i(target, key, result);
+  return result;
+};
+let OdxSliderMarksComponent = 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$i([
+  consume({ context: sliderContext.context, subscribe: true })
+], OdxSliderMarksComponent.prototype, "context", 2);
+__decorateClass$i([
+  property({ type: Number })
+], OdxSliderMarksComponent.prototype, "step", 2);
+__decorateClass$i([
+  property({ type: Boolean, reflect: true })
+], OdxSliderMarksComponent.prototype, "showLabels", 2);
+OdxSliderMarksComponent = __decorateClass$i([
+  customElement("odx-slider-marks", [styles$i])
+], OdxSliderMarksComponent);
+
+const styles$h = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;min-height:var(--odx-size-300);padding-block-start:var(--odx-size-75);padding-block-end:var(--odx-size-50);padding-inline:var(--odx-size-75);cursor:pointer}:host(:active){cursor:grabbing}:host::part(container){block-size:var(--_track-size);position:relative;background-color:var(--odx-palette-coolgray-40);border-radius:var(--odx-border-radius-sm)}";
+
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __typeError$7 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$h(target, key, result);
+  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"), getter ? getter.call(obj) : 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 _handleKeyboardEvent, _handleSlotChange$2;
+let OdxSliderComponent = class extends CustomElement {
+  constructor() {
+    super();
+    this.dragController = new DragController(this, {
+      getDraggableElements: () => Array.from(this.querySelectorAll(OdxSliderHandleComponent.selector)),
+      getContainer: () => this.container
+    });
+    this.context = sliderContext.defaultValue;
+    __privateAdd$7(this, _handleKeyboardEvent, (event) => {
+      const { actions, direction } = getKeyboardEventInfo(event);
+      const target = event.target;
+      if (target.localName !== OdxSliderHandleComponent.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$7(this, _handleSlotChange$2, 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$5(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$5(this, _handleSlotChange$2)}></slot>
+        <slot name="marks"></slot>
+      </div>
+    `;
+  }
+};
+_handleKeyboardEvent = new WeakMap();
+_handleSlotChange$2 = new WeakMap();
+__decorateClass$h([
+  provide({ context: sliderContext.context })
+], OdxSliderComponent.prototype, "context", 2);
+__decorateClass$h([
+  query('[part="container"]', true)
+], OdxSliderComponent.prototype, "container", 2);
+__decorateClass$h([
+  property({ type: Number })
+], OdxSliderComponent.prototype, "step", 1);
+__decorateClass$h([
+  property({ type: Number })
+], OdxSliderComponent.prototype, "minRange", 1);
+__decorateClass$h([
+  property()
+], OdxSliderComponent.prototype, "labelVisibility", 1);
+__decorateClass$h([
+  property()
+], OdxSliderComponent.prototype, "unit", 1);
+OdxSliderComponent = __decorateClass$h([
+  customElement("odx-slider", [styles$h])
+], OdxSliderComponent);
+
+const styles$g = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}:host-context(odx-rail-navigation){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
+
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+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$g(target, key, result);
+  return result;
+};
+let OdxSpacerComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.horizontal = false;
+    this.dynamic = false;
+    this.fill = false;
+  }
+  render() {
+    return "";
+  }
+};
+__decorateClass$g([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "horizontal", 2);
+__decorateClass$g([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "dynamic", 2);
+__decorateClass$g([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "fill", 2);
+OdxSpacerComponent = __decorateClass$g([
+  customElement("odx-spacer", [styles$g])
+], OdxSpacerComponent);
+
+const styles$f = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
+
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __typeError$6 = (msg) => {
+  throw TypeError(msg);
+};
+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$f(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 _handleSlotChange$1, _handleInputFocus;
+let OdxSpinboxComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.compact = false;
+    __privateAdd$6(this, _handleSlotChange$1, () => {
+      this.inputElement?.removeEventListener("focus", __privateGet$4(this, _handleInputFocus));
+      if (!this.inputElement) return;
+      this.inputElement.type = "number";
+      this.inputElement.value = this.inputElement.value || this.inputElement.min;
+      this.inputElement.addEventListener("focus", __privateGet$4(this, _handleInputFocus));
+      this.requestUpdate();
+    });
+    __privateAdd$6(this, _handleInputFocus, () => {
+      this.inputElement?.select();
+    });
+  }
+  get inputElement() {
+    return this.inputElements[0] ?? null;
+  }
+  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$4(this, _handleSlotChange$1)}></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$1 = new WeakMap();
+_handleInputFocus = new WeakMap();
+OdxSpinboxComponent.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass$f([
+  queryAssignedElements({ selector: "input", flatten: true })
+], OdxSpinboxComponent.prototype, "inputElements", 2);
+__decorateClass$f([
+  property({ type: Boolean, reflect: true })
+], OdxSpinboxComponent.prototype, "compact", 2);
+OdxSpinboxComponent = __decorateClass$f([
+  customElement("odx-spinbox", [styles$f])
+], OdxSpinboxComponent);
+
+const styles$e = ":host{--gap: 0;display:flex;flex-direction:row;max-inline-size:100%;inline-size:100%;gap:var(--gap)}:host([vertical]){flex-direction:column}:host([wrap]){flex-wrap:wrap}:host([gap=\"none\"]){--gap: 0}:host([gap=\"xs\"]){--gap: var(--odx-size-25)}:host([gap=\"sm\"]){--gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--gap: var(--odx-size-75)}:host([gap=\"lg\"]){--gap: var(--odx-size-150)}:host([gap=\"xl\"]){--gap: var(--odx-size-225)}:host,:host([align=\"start\"]){align-items:flex-start}:host([align=\"end\"]){align-items:end}:host([align=\"center\"]){align-items:center}:host([align=\"stretch\"]){align-items:stretch}:host([justify=\"center\"]){justify-content:center}:host,:host([justify=\"start\"]){justify-content:flex-start}:host([justify=\"end\"]){justify-content:flex-end}:host([justify=\"stretch\"]){justify-content:stretch}:host([justify=\"space-between\"]){justify-content:space-between}:host([justify=\"space-around\"]){justify-content:space-around}:host([justify=\"space-evenly\"]){justify-content:space-evenly}";
+
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+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$e(target, key, result);
+  return result;
+};
+let OdxStackComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+    this.wrap = false;
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass$e([
+  property({ attribute: "align-items", reflect: true })
+], OdxStackComponent.prototype, "align", 2);
+__decorateClass$e([
+  property({ attribute: "justify-content", reflect: true })
+], OdxStackComponent.prototype, "justify", 2);
+__decorateClass$e([
+  property({ reflect: true })
+], OdxStackComponent.prototype, "gap", 2);
+__decorateClass$e([
+  property({ type: Boolean, reflect: true })
+], OdxStackComponent.prototype, "vertical", 2);
+__decorateClass$e([
+  property({ type: Boolean, reflect: true })
+], OdxStackComponent.prototype, "wrap", 2);
+OdxStackComponent = __decorateClass$e([
+  customElement("odx-stack", [styles$e])
+], OdxStackComponent);
+
+const StackAlign = {
+  START: "start",
+  END: "end",
+  CENTER: "center"
+};
+const StackGap = {
+  NONE: "none",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const StackJustify = {
+  START: "start",
+  END: "end",
+  CENTER: "center",
+  SPACE_BETWEEN: "space-between",
+  SPACE_AROUND: "space-around",
+  SPACE_EVENLY: "space-evenly"
+};
+
+const styles$d = "*{box-sizing:border-box}:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-track-color-background: var(--odx-color-selection-control-fill);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);transition-property:background-color border-color outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}.indicator:before,.indicator:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit;border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke)}.indicator:before{background-color:var(--_indicator-track-color-background);block-size:var(--odx-size-37);inline-size:var(--odx-size-225)}.indicator:after{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;background-color:var(--_indicator-color-background);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,transform;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}.label{display:inline-block;cursor:inherit}.content{margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);--_indicator-track-color-background: var(--odx-color-selection-control-fill-selected);.indicator:after{transform:translate(var(--odx-size-225)) translate(-100%)}}:host([aria-checked=\"true\"]:not([aria-disabled]):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_indicator-track-color-background: var(--odx-color-disabled-fill);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-stroke: var(--_indicator-color-background);--_indicator-track-color-background: var(--odx-color-disabled-fill-selected)}";
+
+var __defProp$d = 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$d(target, key, result);
+  return result;
+};
+let OdxSwitchComponent = class extends CheckboxFormControl {
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "switch";
+  }
+  render() {
+    return html`
+      <div class="indicator"></div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+OdxSwitchComponent = __decorateClass$d([
+  customElement("odx-switch", [styles$d])
+], OdxSwitchComponent);
+
+const styles$c = ":host{display:block;text-decoration:inherit;color:var(--_color, inherit);font-size:var(--_font-size, inherit);line-height:var(--_line-height, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}:host([size=\"lg\"]){--_font-size: var(--odx-typography-font-size-4);--_line-height: var(--odx-typography-line-height-4)}";
+
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$c(target, key, result);
+  return result;
+};
+let OdxTextComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+  }
+};
+__decorateClass$c([
+  property({ type: Boolean, reflect: true })
+], OdxTextComponent.prototype, "emphasized", 2);
+__decorateClass$c([
+  property({ reflect: true })
+], OdxTextComponent.prototype, "size", 2);
+__decorateClass$c([
+  property({ reflect: true })
+], OdxTextComponent.prototype, "variant", 2);
+OdxTextComponent = __decorateClass$c([
+  customElement("odx-text", [styles$c])
+], OdxTextComponent);
+
+const TextSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+const TextVariant = {
+  HINT: "hint",
+  ACCENT: "info",
+  DANGER: "danger"
+};
+
+const styles$b = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
+
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$b(target, key, result);
+  return result;
+};
+let OdxToggleButtonComponent = class extends CheckboxFormControl {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.pressed = false;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "button";
+  }
+  updateAriaAttributes() {
+    this.ariaPressed = toAriaBooleanAttribute(this.pressed, false);
+  }
+  willUpdate(props) {
+    if (props.has("checked")) {
+      this.pressed = this.checked;
+    }
+    super.willUpdate(props);
+  }
+  render() {
+    return html`
+      <div part="indicator"></div>
+      <div part="label"><slot></slot></div>
+    `;
+  }
+};
+__decorateClass$b([
+  property({ type: Boolean })
+], OdxToggleButtonComponent.prototype, "checked", 2);
+__decorateClass$b([
+  property({ type: Boolean })
+], OdxToggleButtonComponent.prototype, "pressed", 2);
+OdxToggleButtonComponent = __decorateClass$b([
+  customElement("odx-toggle-button", [styles$b])
+], OdxToggleButtonComponent);
+
+const styles$a = ":host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}";
+
+var __defProp$a = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$a(target, key, result);
+  return result;
+};
+let OdxVisuallyHiddenComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+OdxVisuallyHiddenComponent = __decorateClass$a([
+  customElement("odx-visually-hidden", [styles$a])
+], OdxVisuallyHiddenComponent);
+
+const styles$9 = ":host{display:block}";
+
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __typeError$5 = (msg) => {
+  throw TypeError(msg);
+};
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$9(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;
+const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
+let OdxFormFieldElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd$5(this, _handleSlotChange, () => {
+      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$3(this, _handleSlotChange)}></slot>
+      ${when(isValid === false, () => this.renderErrorMessage())}
+
+    `;
+  }
+  renderErrorMessage() {
+    return html`
+      <odx-inline-message variant="danger">
+        ${this.control?.validationMessage}
+      </odx-inline-message>
+    `;
+  }
+};
+_handleSlotChange = new WeakMap();
+__decorateClass$9([
+  queryAssignedElements({ flatten: true })
+], OdxFormFieldElement.prototype, "elements", 2);
+OdxFormFieldElement = __decorateClass$9([
+  customElement("odx-form-field", [styles$9])
+], OdxFormFieldElement);
+
+const styles$8 = ":host{display:block;flex-grow:1}";
+
+var __defProp$8 = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+let OdxTableBodyElement = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "rowgroup";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+OdxTableBodyElement = __decorateClass$8([
+  customElement("odx-table-body", [styles$8])
+], OdxTableBodyElement);
+
+const styles$7 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}";
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+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$7(target, key, result);
+  return result;
+};
+let OdxTableCellElement = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "gridcell";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+OdxTableCellElement = __decorateClass$7([
+  customElement("odx-table-cell", [styles$7])
+], OdxTableCellElement);
+
+const styles$6 = ":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$6 = Object.getOwnPropertyDescriptor;
+var __typeError$4 = (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$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$6([
+  query(".checkbox")
+], OdxTableCheckboxCellElement.prototype, "control", 2);
+__decorateClass$6([
+  property({ type: Boolean })
+], OdxTableCheckboxCellElement.prototype, "checked", 2);
+__decorateClass$6([
+  property({ type: Boolean })
+], OdxTableCheckboxCellElement.prototype, "disabled", 2);
+__decorateClass$6([
+  property({ type: Boolean })
+], OdxTableCheckboxCellElement.prototype, "indeterminate", 2);
+OdxTableCheckboxCellElement = __decorateClass$6([
+  customElement("odx-table-checkbox-cell", [styles$6])
+], OdxTableCheckboxCellElement);
+
+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$5 = 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$5(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{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$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __typeError$3 = (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$4(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 CheckboxFormControl {
+  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$4([
+  property({ type: Boolean, reflect: true })
+], OdxTableHeaderElement.prototype, "selected", 2);
+OdxTableHeaderElement = __decorateClass$4([
+  customElement("odx-table-header", [styles$4])
+], OdxTableHeaderElement);
+
+const styles$3 = ":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$3 = Object.getOwnPropertyDescriptor;
+var __typeError$2 = (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$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$3([
+  queryAssignedElements({ selector: OdxTableCheckboxCellElement.selector, flatten: true })
+], OdxTableRowElement.prototype, "checkboxCells", 2);
+__decorateClass$3([
+  property({ type: Boolean, reflect: true })
+], OdxTableRowElement.prototype, "disabled", 2);
+__decorateClass$3([
+  property({ type: Boolean, reflect: true })
+], OdxTableRowElement.prototype, "selected", 2);
+__decorateClass$3([
+  property({ type: Boolean, reflect: true })
+], OdxTableRowElement.prototype, "selectable", 2);
+__decorateClass$3([
+  property({ type: String })
+], OdxTableRowElement.prototype, "value", 2);
+OdxTableRowElement = __decorateClass$3([
+  customElement("odx-table-row", [styles$3])
+], OdxTableRowElement);
+
+const styles$2 = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-surface)}";
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+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$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$2([
+  property()
+], OdxTableElement.prototype, "mode", 2);
+__decorateClass$2([
+  property({ type: Array })
+], OdxTableElement.prototype, "selected", 2);
+__decorateClass$2([
+  property({ type: Array })
+], OdxTableElement.prototype, "items", 2);
+OdxTableElement = __decorateClass$2([
+  customElement("odx-table", [styles$2])
+], OdxTableElement);
+
+const styles$1 = "";
+
+var __defProp$1 = Object.defineProperty;
+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 = (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$1([
+  property({ reflect: true })
+], OdxToastElement.prototype, "variant", 2);
+OdxToastElement = __decorateClass$1([
+  customElement("odx-toast", [styles$1])
+], OdxToastElement);
+
+const ToastVariant = {
+  DANGER: "danger"
+};
+
+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[aria-disabled=\"true\"]){pointer-events:auto}";
+
+const TooltipPlacement = {
+  TOP: PopoverPlacement.TOP,
+  RIGHT: PopoverPlacement.RIGHT,
+  BOTTOM: PopoverPlacement.BOTTOM,
+  LEFT: PopoverPlacement.LEFT
+};
+
+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 { AreaHeaderSize, AreaHeaderVariant, AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant, CheckboxGroupVariant, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, InputVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, NavigationItemSize, OdxAccordionComponent, OdxAccordionHeaderComponent, OdxAccordionPanelComponent, OdxAreaHeaderComponent, OdxAvatarComponent, OdxAvatarGroupComponent, OdxBadgeComponent, OdxBreadcrumbsComponent, OdxBreadcrumbsItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxCardComponent, OdxCheckboxComponent, OdxCheckboxGroupComponent, OdxChipComponent, OdxCircularProgressBarComponent, OdxContentBoxComponent, OdxDropdownComponent, OdxFormFieldElement, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxInlineMessageComponent, OdxInputComponent, OdxLineClampComponent, OdxLinkComponent, OdxListComponent, OdxListItemComponent, OdxLoadingOverlayComponent, OdxLoadingSpinnerComponent, OdxLogoComponent, OdxMainMenuButtonComponent, OdxMainMenuComponent, OdxMainMenuLinkComponent, OdxMainMenuSubtitleComponent, OdxMainMenuTitleComponent, OdxMenuComponent, OdxMenuItemComponent, OdxMenuLabelComponent, OdxNavigationItemComponent, OdxOptionComponent, OdxPageComponent, OdxPageLayoutComponent, OdxProgressBarComponent, OdxRadioButtonComponent, OdxRadioGroupComponent, OdxRailNavigationComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSelectComponent, OdxSeparatorComponent, OdxSkeletonComponent, OdxSliderComponent, OdxSliderHandleComponent, OdxSliderMarksComponent, OdxSpacerComponent, OdxSpinboxComponent, OdxStackComponent, OdxSwitchComponent, OdxTableBodyElement, OdxTableCellElement, OdxTableCheckboxCellElement, OdxTableElement, OdxTableHeaderCellElement, OdxTableHeaderElement, OdxTableRowElement, OdxTextComponent, OdxTitleComponent, OdxToastElement, OdxToggleButtonComponent, OdxTooltipElement, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, ProgressState, RadioGroupVariant, SearchBarBehavior, SearchEvent, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext };