@odx/foundation 1.0.0-beta.99 → 1.0.0-rc.0

package/dist/components.js

@@ -1,4493 +0,0 @@
-import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
-import { queryAssignedElements, property, query, state } from 'lit/decorators.js';
-import { html, isServer, unsafeCSS, css, nothing } from 'lit';
-import { p as pick, e, a as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
-import { when } from 'lit/directives/when.js';
-import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
-import { signal, computed } from '@preact/signals-core';
-import 'lit/html.js';
-
-const styles$1g = ":host{display:block}:host(:not([compact])) ::slotted(odx-accordion-item){margin-block:var(--odx-spacing-37)}";
-
-const AccordionIndicatorPosition = { START: "start", END: "end" };
-const _OdxAccordion = class _OdxAccordion extends CustomElement {
-  constructor() {
-    super();
-    this.compact = false;
-    this.indicatorPosition = AccordionIndicatorPosition.END;
-    this.multiple = false;
-    new ExpandableItemManager(this, { getItems: () => this.items });
-  }
-  static {
-    customElement("odx-accordion", styles$1g)(_OdxAccordion);
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("size") && this.size !== void 0) {
-      for (const item of this.items) {
-        item.size = this.size;
-      }
-    }
-  }
-  toggleAll(state, emitEvent = false) {
-    for (const item of this.items) {
-      item.toggle(state, emitEvent);
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: "odx-accordion-item", flatten: true })
-], _OdxAccordion.prototype, "items", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxAccordion.prototype, "compact", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true, attribute: "indicator-position" })
-], _OdxAccordion.prototype, "indicatorPosition", 2);
-__decorateClass([
-  property({ type: Boolean })
-], _OdxAccordion.prototype, "multiple", 2);
-__decorateClass([
-  property()
-], _OdxAccordion.prototype, "size", 2);
-let OdxAccordion = _OdxAccordion;
-
-const styles$1f = ":host{display:block;block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}";
-
-const AccordionItemSize = pick(Size, ["MD", "LG"]);
-const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
-  constructor() {
-    super(...arguments);
-    this.size = AccordionItemSize.MD;
-  }
-  static {
-    customElement("odx-accordion-item", styles$1f)(_OdxAccordionItem);
-  }
-  get panel() {
-    if (this.nextElementSibling?.role === "region") {
-      return this.nextElementSibling;
-    }
-    return null;
-  }
-  renderContent() {
-    return html`
-      ${super.renderContent()}
-      <odx-icon part="indicator" name="core::chevron-down"></odx-icon>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("disabled") || props.has("expanded")) {
-      this.#handleExpandedChange();
-    }
-  }
-  #handleExpandedChange() {
-    if (!this.panel) return;
-    this.id ||= getUniqueId(this.localName);
-    this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
-    this.setAttribute("aria-controls", this.panel.id);
-    this.panel.setAttribute("aria-labelledby", this.id);
-    this.panel.hidden = this.disabled || !this.expanded;
-    if (this.expanded) return;
-    this.panel.querySelector("odx-accordion")?.toggleAll(false);
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAccordionItem.prototype, "size", 2);
-let OdxAccordionItem = _OdxAccordionItem;
-
-const styles$1e = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
-
-const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.hidden = true;
-  }
-  static {
-    customElement("odx-accordion-panel", styles$1e)(_OdxAccordionPanel);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getUniqueId(this.localName);
-    this.role ||= "region";
-  }
-  render() {
-    return html`
-      <odx-toggle-content ?hidden=${this.hidden}>
-        <div class="content"><slot></slot></div>
-      </odx-toggle-content>
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxAccordionPanel.prototype, "hidden", 2);
-let OdxAccordionPanel = _OdxAccordionPanel;
-
-const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_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);::slotted(odx-avatar){--_size: var(--odx-size-125);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px));font-size:var(--odx-typography-font-size-1)}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-12) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-typography-font-size-5);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}: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);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);[part~=base]{outline-offset:0}}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
-
-const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
-const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
-const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "GHOST"]);
-const _OdxButton = class _OdxButton extends InteractiveElement {
-  constructor() {
-    super();
-    /** @internal */
-    this.#internals = this.attachInternals();
-    this.type = "button";
-    this.size = ButtonSize.MD;
-    this.variant = ButtonVariant.NEUTRAL;
-    this.#handleClick = (_event) => {
-      if (this.type === "submit") {
-        this.#internals.form?.requestSubmit();
-        return;
-      }
-      if (this.type === "reset") {
-        this.#internals.form?.reset();
-        return;
-      }
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-    }
-  }
-  static {
-    customElement("odx-button", styles$1d)(_OdxButton);
-  }
-  static {
-    /** @internal */
-    this.formAssociated = true;
-  }
-  #internals;
-  connectedCallback() {
-    super.connectedCallback();
-    this.toggleAttribute("odx-button", true);
-  }
-  render() {
-    return html`
-      ${super.render()}
-      <slot name="badge"></slot>
-    `;
-  }
-  #handleClick;
-};
-__decorateClass([
-  property({ reflect: true, attribute: "align-badge" })
-], _OdxButton.prototype, "alignBadge", 2);
-__decorateClass([
-  property()
-], _OdxButton.prototype, "type", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxButton.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxButton.prototype, "variant", 2);
-let OdxButton = _OdxButton;
-
-const styles$1c = "@layer variant{:host([done]){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed);cursor:default;[part=base]{pointer-events:none}}}";
-
-const _OdxActionButton = class _OdxActionButton extends OdxButton {
-  constructor() {
-    super(...arguments);
-    this.isStatusMessageShown = false;
-    this.done = false;
-    this.statusIcon = "core::check-filled-mono";
-    this.statusMessage = "";
-    this.statusTimeout = 2e3;
-    this.statusMessageTimeout = 1500;
-    this.replaceContent = false;
-    this.#handleClick = (event) => {
-      event.stopImmediatePropagation();
-      if (this.done || this.emit("invoke")) return;
-      this.done = true;
-    };
-  }
-  static {
-    customElement("odx-action-button", styles$1c)(_OdxActionButton);
-  }
-  /** @internal */
-  #statusTimeout;
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this.nativeElement.addEventListener("click", this.#handleClick);
-  }
-  render() {
-    return html`
-      ${super.render()}
-      ${when(
-      !this.replaceContent && this.statusMessage,
-      (statusMessage) => html`
-          <odx-tooltip placement="top" .popover=${"manual"} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
-            <odx-text size="sm" strong>${statusMessage}</odx-text>
-          </odx-tooltip>
-        `
-    )}
-    `;
-  }
-  renderContent() {
-    return html`
-      <slot name="prefix"></slot>
-      ${when(
-      this.replaceContent && this.statusMessage && this.done,
-      () => this.statusMessage,
-      () => html`<slot></slot>`
-    )}
-      ${when(
-      this.loading,
-      () => this.renderLoader(),
-      () => html`<odx-icon name=${optionalAttr(this.done ? this.statusIcon : this.icon)} part="icon"></odx-icon>`
-    )}
-      <slot name="badge"></slot>
-    `;
-  }
-  willUpdate(props) {
-    super.updated(props);
-    if (props.has("done") && this.done) {
-      this.#handleDoneChange();
-    }
-  }
-  #handleDoneChange() {
-    const timeoutDuration = Math.max(0, this.statusTimeout);
-    this.isStatusMessageShown = true;
-    this.tooltip?.mountPopover(this.nativeElement);
-    if (this.statusTimeout <= 0) return;
-    clearTimeout(this.#statusTimeout);
-    this.#statusTimeout = window.setTimeout(() => {
-      this.done = false;
-      this.isStatusMessageShown = false;
-    }, timeoutDuration);
-  }
-  #handleClick;
-};
-__decorateClass([
-  query("odx-tooltip")
-], _OdxActionButton.prototype, "tooltip", 2);
-__decorateClass([
-  state()
-], _OdxActionButton.prototype, "isStatusMessageShown", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxActionButton.prototype, "done", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxActionButton.prototype, "icon", 2);
-__decorateClass([
-  property({ attribute: "status-icon" })
-], _OdxActionButton.prototype, "statusIcon", 2);
-__decorateClass([
-  property({ attribute: "status-message" })
-], _OdxActionButton.prototype, "statusMessage", 2);
-__decorateClass([
-  property({ type: Number, attribute: "status-timeout" })
-], _OdxActionButton.prototype, "statusTimeout", 2);
-__decorateClass([
-  property({ attribute: false })
-], _OdxActionButton.prototype, "statusMessageTimeout", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "replace-content" })
-], _OdxActionButton.prototype, "replaceContent", 2);
-let OdxActionButton = _OdxActionButton;
-
-const styles$1b = ":host{display:inline;text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:host(:focus-visible){outline:none}[part~=base]{transition:var(--odx-transition-reduced);outline:var(--odx-focus-ring-outline);outline-offset:0;border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]),:host([subtle]:not(:hover)){text-decoration:none}:host([disabled]){color:var(--odx-color-foreground-rest-subtle);[part~=base]{cursor:default}}";
-
-const _OdxLink = class _OdxLink extends InteractiveLink {
-  constructor() {
-    super(...arguments);
-    this.strong = false;
-    this.subtle = false;
-  }
-  static {
-    customElement("odx-link", styles$1b)(_OdxLink);
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxLink.prototype, "strong", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxLink.prototype, "subtle", 2);
-let OdxLink = _OdxLink;
-
-const styles$1a = ":host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;transition:var(--odx-transition-reduced);transition-property:border-color,color;padding-inline:var(--odx-size-50);&[aria-current=true]{color:var(--odx-color-foreground-rest);font-weight:var(--odx-typography-font-weight-medium)}}:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset);&[aria-current=true]{border-radius:0;text-decoration:underline}}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-control-rest);odx-link{margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:inherit;&[aria-current=true]{border-inline-start-color:var(--odx-color-background-accent-rest)}}}";
-
-const ANCHOR_SELECTOR = "odx-anchor";
-class AnchorObserver {
-  constructor(root) {
-    this.#intersectionState = signal({});
-    this.anchors = signal([]);
-    this.visibleAnchors = computed(() => {
-      return this.anchors.value.filter((anchor) => !!this.#intersectionState.value[anchor.id]);
-    });
-    this.updateAnchors = () => {
-      const anchors = Array.from(this.root.querySelectorAll(`[${ANCHOR_SELECTOR}][id]`));
-      for (const anchor of anchors) {
-        if (!this.#isAnchor(anchor)) continue;
-        this.#intersectionObserver?.observe(anchor);
-      }
-      this.anchors.value = anchors;
-    };
-    this.#handleIntersection = (entries) => {
-      const state = this.#intersectionState.value;
-      for (const entry of entries) {
-        if (!this.#isAnchor(entry.target)) continue;
-        state[entry.target.id] = entry.isIntersecting;
-      }
-      this.#intersectionState.value = { ...state };
-    };
-    this.root = root ?? document;
-    this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection, { root });
-    this.#mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.length === 0) return;
-      this.updateAnchors();
-    });
-  }
-  #intersectionObserver;
-  #intersectionState;
-  #mutationObserver;
-  observe() {
-    this.#mutationObserver?.observe(this.root, { attributes: true, childList: true, subtree: true, attributeFilter: ["odx-anchor"] });
-    this.updateAnchors();
-  }
-  disconnect() {
-    this.#intersectionObserver?.disconnect();
-    this.#mutationObserver?.disconnect();
-  }
-  #isAnchor(element) {
-    return (element.ariaLabel || element.textContent) && element.hasAttribute(ANCHOR_SELECTOR);
-  }
-  #handleIntersection;
-}
-
-const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
-  constructor() {
-    super();
-    this.vertical = false;
-    this.#handleClick = (event) => {
-      const target = getElementFromEvent(event, (node) => node instanceof OdxLink);
-      if (!target) return;
-      event.preventDefault();
-      document.querySelector(target.href)?.scrollIntoView();
-    };
-    this.addEventListener("click", this.#handleClick);
-  }
-  static {
-    customElement("odx-anchor-navigation", styles$1a)(_OdxAnchorNavigation);
-  }
-  #anchorObserver;
-  connectedCallback() {
-    super.connectedCallback();
-    this.#handleContainerChange();
-  }
-  disconnectedCallback() {
-    this.#anchorObserver?.disconnect();
-    super.disconnectedCallback();
-  }
-  renderAnchorLink(anchor, isActive = false) {
-    return when(
-      anchor.ariaLabel || anchor.textContent,
-      (label) => html`
-        <odx-link href="#${anchor.id}" aria-current=${isActive} subtle>
-          ${when(!this.vertical, () => html`<odx-icon name="core::link-internal"></odx-icon>`)}
-          ${label}
-        </odx-link>
-      `
-    );
-  }
-  render() {
-    const anchors = this.#anchorObserver?.anchors.value ?? [];
-    const visibleAnchors = this.#anchorObserver?.visibleAnchors.value;
-    return html`${anchors.map((anchor) => this.renderAnchorLink(anchor, visibleAnchors?.[0] === anchor))}`;
-  }
-  updated(props) {
-    if (props.has("container")) {
-      this.#handleContainerChange();
-    }
-  }
-  #handleContainerChange() {
-    const root = this.container ? document.querySelector(this.container) : null;
-    if (root === this.#anchorObserver?.root) return;
-    this.#anchorObserver?.disconnect();
-    this.#anchorObserver = new AnchorObserver(root);
-    this.#anchorObserver?.observe();
-  }
-  #handleClick;
-};
-__decorateClass([
-  property()
-], _OdxAnchorNavigation.prototype, "container", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxAnchorNavigation.prototype, "vertical", 2);
-let OdxAnchorNavigation = _OdxAnchorNavigation;
-
-const styles$19 = ":host{display:flex;gap:var(--odx-size-150);align-items:center;justify-content:space-between;padding:var(--odx-size-75)}.content{margin-inline-end:auto}";
-
-const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
-const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.size = AreaHeaderSize.MD;
-  }
-  static {
-    customElement("odx-area-header", styles$19)(_OdxAreaHeader);
-  }
-  render() {
-    return html`
-      <slot name="prefix"></slot>
-      <div class="content">
-        <slot></slot>
-      </div>
-      <slot name="suffix"></slot>
-    `;
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAreaHeader.prototype, "size", 2);
-let OdxAreaHeader = _OdxAreaHeader;
-
-const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"accent\"]){--color-background: var(--odx-color-background-accent-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);font-size:var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);font-size:var(--odx-typography-font-size-7)}:host([size=\"xxl\"]){--_size: var(--odx-size-600);font-size:var(--odx-typography-font-size-8)}";
-
-const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
-const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL", "XXL"]);
-const AvatarVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT"]);
-const _OdxAvatar = class _OdxAvatar extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.shape = AvatarShape.CIRCLE;
-    this.size = AvatarSize.MD;
-    this.variant = AvatarVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-avatar", styles$18)(_OdxAvatar);
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAvatar.prototype, "shape", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAvatar.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAvatar.prototype, "variant", 2);
-let OdxAvatar = _OdxAvatar;
-
-const styles$17 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1}::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)}";
-
-const _OdxAvatarGroup = class _OdxAvatarGroup extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.size = AvatarSize.MD;
-    this.variant = AvatarVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-avatar-group", styles$17)(_OdxAvatarGroup);
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("size") || props.has("variant")) {
-      for (const avatar of this.avatars) {
-        avatar.shape = AvatarShape.CIRCLE;
-        avatar.size = this.size;
-        avatar.variant = this.variant;
-      }
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxAvatar.tagName })
-], _OdxAvatarGroup.prototype, "avatars", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAvatarGroup.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxAvatarGroup.prototype, "variant", 2);
-let OdxAvatarGroup = _OdxAvatarGroup;
-
-const styles$16 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-size-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-size-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
-
-const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
-const _OdxBadge = class _OdxBadge extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-    this.pulse = false;
-    this.variant = BadgeVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-badge", styles$16)(_OdxBadge);
-  }
-  render() {
-    if (this.compact) {
-      return html`<odx-visually-hidden><slot></slot></odx-visually-hidden>`;
-    }
-    return super.render();
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxBadge.prototype, "compact", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxBadge.prototype, "pulse", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxBadge.prototype, "variant", 2);
-let OdxBadge = _OdxBadge;
-
-const styles$15 = ":host{--_gap: var(--odx-size-37);display:flex;flex-wrap:wrap;column-gap:var(--_gap);place-items:center;cursor:default;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)}";
-
-const styles$14 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
-
-const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.fallback = false;
-  }
-  static {
-    customElement("odx-breadcrumbs-item", styles$14)(_OdxBreadcrumbsItem);
-  }
-  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.strong = this.isLast();
-      this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxLink.tagName, flatten: true })
-], _OdxBreadcrumbsItem.prototype, "linkElements", 2);
-__decorateClass([
-  property({ type: Boolean })
-], _OdxBreadcrumbsItem.prototype, "fallback", 2);
-let OdxBreadcrumbsItem = _OdxBreadcrumbsItem;
-
-const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.max = 4;
-  }
-  static {
-    customElement("odx-breadcrumbs", styles$15)(_OdxBreadcrumbs);
-  }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this.role = "navigation";
-    this.ariaLabel ||= "Breadcrumbs";
-  }
-  render() {
-    if (Array.isArray(this.items)) {
-      const items = this.items.filter((...args) => this.#isItemVisible(...args));
-      return html`${items.map(({ label, href }) => html`<odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>`)}`;
-    }
-    return html`<slot @slotchange=${this.#updateContext}></slot>`;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("max")) {
-      this.#updateContext();
-    }
-  }
-  #isItemVisible(_, index, items) {
-    return index === 0 || index > items.length - this.max;
-  }
-  #updateContext() {
-    for (const [index, item] of this.itemElements.entries()) {
-      item.hidden = !this.#isItemVisible(item, index, this.itemElements);
-    }
-    const renderedItemElements = this.shadowRoot?.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
-    if (renderedItemElements.length === 0) return;
-    for (const item of Array.from(renderedItemElements)) {
-      item.requestUpdate();
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxBreadcrumbsItem.tagName, flatten: true })
-], _OdxBreadcrumbs.prototype, "itemElements", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxBreadcrumbs.prototype, "max", 2);
-__decorateClass([
-  property({ attribute: false })
-], _OdxBreadcrumbs.prototype, "items", 2);
-let OdxBreadcrumbs = _OdxBreadcrumbs;
-
-const styles$13 = ":host{display:inline-flex;gap:var(--odx-size-px);align-items:center}::slotted([odx-button]:not(:first-child,:last-child)){border-radius:0}::slotted([odx-button]:is(:hover,:focus-within)){z-index:1}:host([block]){display:flex;::slotted([odx-button]){width:100%}}:host(:not([vertical])){::slotted([odx-button]:first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted([odx-button]:last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted([odx-button]:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted([odx-button]:last-child){border-start-start-radius:0;border-start-end-radius:0}}";
-
-const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.block = false;
-    this.vertical = false;
-    this.#updateButtonVariants = () => {
-      if (!this.variant) return;
-      for (const button of this.buttons) {
-        button.variant = this.variant;
-      }
-    };
-  }
-  static {
-    customElement("odx-button-group", styles$13)(_OdxButtonGroup);
-  }
-  render() {
-    return html`
-      <slot @slotchange=${this.#updateButtonVariants}></slot>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("variant")) {
-      this.#updateButtonVariants();
-    }
-  }
-  #updateButtonVariants;
-};
-__decorateClass([
-  queryAssignedElements({ selector: "button, odx-button", flatten: true })
-], _OdxButtonGroup.prototype, "buttons", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxButtonGroup.prototype, "block", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxButtonGroup.prototype, "vertical", 2);
-__decorateClass([
-  property()
-], _OdxButtonGroup.prototype, "variant", 2);
-let OdxButtonGroup = _OdxButtonGroup;
-
-const styles$12 = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-size-50);place-items:center;margin-block-end:var(--odx-size-50)}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * (var(--_card-padding) + var(--odx-border-width-thin)))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-size-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-size-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-size-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
-
-const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.interactive = false;
-  }
-  static {
-    customElement("odx-card", styles$12)(_OdxCard);
-  }
-  updated(_changedProperties) {
-    super.updated(_changedProperties);
-    if (this.disabled) return;
-    if (this.interactive) {
-      this.tabIndex = 0;
-    } else {
-      this.removeAttribute("tabindex");
-    }
-  }
-  render() {
-    return html`
-      ${optionalSlot(this, "header-actions")}
-      ${optionalSlot(this, "image")}
-      ${optionalSlot(this, "avatar")}
-      ${optionalSlot(this, "header")}
-      <div class="content">
-        <slot></slot>
-      </div>
-      ${optionalSlot(this, "footer")}
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _OdxCard.prototype, "interactive", 2);
-let OdxCard = _OdxCard;
-
-const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}";
-
-const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
-  constructor() {
-    super(...arguments);
-    this.indeterminate = false;
-  }
-  static {
-    customElement("odx-checkbox", styles$11)(_OdxCheckbox);
-  }
-  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(props) {
-    super.willUpdate(props);
-    if (props.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, useDefault: true })
-], _OdxCheckbox.prototype, "indeterminate", 2);
-let OdxCheckbox = _OdxCheckbox;
-
-const styles$10 = ":host{display:flex;column-gap:var(--odx-size-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-size-75);inline-size:auto}";
-
-const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
-const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
-  constructor() {
-    super(...arguments);
-    this.layout = CheckboxGroupLayout.VERTICAL;
-    this.#handleSlotChange = () => {
-      this.groupControl?.removeEventListener("change", this.#handleGroupControlChange);
-      this.groupControl?.addEventListener("change", this.#handleGroupControlChange);
-    };
-    this.#handleGroupControlChange = (event) => {
-      if (!this.isGroupControl(event.target)) return;
-      event.stopImmediatePropagation();
-      this.updateValue(event.target.checked ? this.controls.map((control) => control.value) : [], true);
-    };
-  }
-  static {
-    customElement("odx-checkbox-group", styles$10)(_OdxCheckboxGroup);
-  }
-  render() {
-    return html`<slot @slotchange=${this.#handleSlotChange}></slot>`;
-  }
-  #handleSlotChange;
-  #handleGroupControlChange;
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxCheckboxGroup.prototype, "layout", 2);
-let OdxCheckboxGroup = _OdxCheckboxGroup;
-
-const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);overflow:hidden;color:var(--_color-foreground)}:host,[part=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;&::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-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-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-danger-rest-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}";
-
-const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
-const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.interactive = false;
-    this.variant = ChipVariant.NEUTRAL;
-    this.#handleActionClick = (event) => {
-      const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
-      if (!actionElement) return;
-      event.stopPropagation();
-      this.emit("remove");
-    };
-    this.#handleClick = (event) => {
-      if (this.removable) {
-        const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
-        if (actionElement) return;
-      }
-    };
-  }
-  static {
-    customElement("odx-chip", styles$$)(_OdxChip);
-  }
-  render() {
-    return html`
-      <odx-text part="base" size="sm" strong odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-      ${when(this.removable, () => this.renderAction())}
-    `;
-  }
-  renderAction() {
-    return html`
-      <odx-icon-button class="action" icon="core::close" ?disabled=${this.disabled} @click=${this.#handleActionClick} variant="ghost" size="xs">
-      </odx-icon-button>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if ((props.has("interactive") || props.has("disabled")) && !this.disabled) {
-      this.#updateTabIndex();
-    }
-  }
-  #updateTabIndex() {
-    if (this.interactive) {
-      this.tabIndex = 0;
-      if (!this.actionElement) return;
-      this.actionElement.tabIndex = 0;
-    } else {
-      this.removeAttribute("tabindex");
-      if (!this.actionElement) return;
-      this.actionElement.removeAttribute("tabindex");
-    }
-  }
-  updated(props) {
-    if (props.has("removable") || props.has("interactive") || props.has("disabled")) {
-      if (this.removable || this.interactive) {
-        this.addEventListener("click", this.#handleClick, { capture: true });
-      } else {
-        this.removeEventListener("click", this.#handleClick);
-      }
-    }
-  }
-  #handleActionClick;
-  #handleClick;
-};
-__decorateClass([
-  query(".action")
-], _OdxChip.prototype, "actionElement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxChip.prototype, "removable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxChip.prototype, "interactive", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxChip.prototype, "variant", 2);
-let OdxChip = _OdxChip;
-
-const styles$_ = ":host{--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);display:flex;position:relative;place-content:center;place-items:center;block-size:100%;max-block-size:var(--_size);inline-size:100%;max-inline-size:var(--_size);color:currentcolor;aspect-ratio:1}: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([size=\"sm\"]){--_size: var(--odx-size-225)}:host([size=\"md\"]){--_size: var(--odx-size-300)}:host([size=\"lg\"]){--_size: var(--odx-size-400)}: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}@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)}}";
-
-const CircularProgressBarSize = pick(Size, ["SM", "MD", "LG"]);
-const _OdxCircularProgressBar = class _OdxCircularProgressBar extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.#value = 0;
-    this.viewPortSize = 100;
-    this.stroke = 4;
-    this.indeterminate = false;
-    this.size = CircularProgressBarSize.SM;
-  }
-  static {
-    customElement("odx-circular-progress-bar", styles$_)(_OdxCircularProgressBar);
-  }
-  #value;
-  get #circumference() {
-    return Math.floor(2 * this.#radius * Math.PI);
-  }
-  get #radius() {
-    return Math.max(0, this.viewPortSize / 2 - this.#normalizedStrokeWidth / 2);
-  }
-  set value(val) {
-    this.#value = Math.max(-1, Math.min(100, val));
-    this.indeterminate = val === -1;
-    this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : val}`);
-  }
-  get value() {
-    return this.#value;
-  }
-  get #progressValue() {
-    return this.indeterminate ? this.#circumference : Math.floor((1 - this.#value / 100) * this.#circumference);
-  }
-  get #normalizedStrokeWidth() {
-    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;
-  }
-  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="${this.#normalizedStrokeWidth}"
-          r="${this.#radius}"
-          cx="50%"
-          cy="50%"
-        />
-        <circle
-          part="indicator"
-          stroke-dasharray="${this.#circumference}"
-          stroke-dashoffset="${this.#progressValue}"
-          stroke-width="${this.#normalizedStrokeWidth}"
-          r="${this.#radius}"
-          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");
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], _OdxCircularProgressBar.prototype, "value", 1);
-__decorateClass([
-  property({ type: Number, reflect: true, useDefault: true })
-], _OdxCircularProgressBar.prototype, "stroke", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxCircularProgressBar.prototype, "indeterminate", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxCircularProgressBar.prototype, "size", 2);
-let OdxCircularProgressBar = _OdxCircularProgressBar;
-
-const styles$Z = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
-
-const popoverTargetAttribute = "odx-popovertarget";
-class PopoverObserver {
-  #referenceElements = /* @__PURE__ */ new WeakMap();
-  #mutationObserver;
-  constructor(host) {
-    this.host = host;
-    this.root = findClosestDocument(host);
-  }
-  hasMountedPopover(element) {
-    return this.#referenceElements.has(element);
-  }
-  observe() {
-    this.#mutationObserver ??= new MutationObserver((mutations) => {
-      if (mutations.length === 0) return;
-      this.#updateReferenceElements();
-    });
-    this.#mutationObserver.observe(this.root, { attributes: true, subtree: true, childList: true, attributeFilter: [popoverTargetAttribute] });
-    this.#updateReferenceElements();
-  }
-  disconnect() {
-    this.#mutationObserver?.disconnect();
-  }
-  #updateReferenceElements() {
-    for (const element of Array.from(this.root.querySelectorAll(`[${popoverTargetAttribute}]`))) {
-      const popoverId = element.getAttribute(popoverTargetAttribute);
-      if (popoverId !== this.host.id) continue;
-      this.#referenceElements.set(element, popoverId);
-      this.host.mountPopover(element);
-    }
-  }
-}
-
-class PopoverHost extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super();
-    this.#currentReferenceElement = null;
-    this.#openPopovers = /* @__PURE__ */ new WeakSet();
-    this.open = false;
-    this.placement = Placement.BOTTOM;
-    this.fpsLimit = 60;
-    this.#handleToggle = async (event) => {
-      this.open = !!this.referenceElement && event.newState === "open";
-      if (this.hasOpenPopover(this.referenceElement)) {
-        await this.onBeforePopoverShow?.();
-        await waitForAnimations(this);
-        await this.onPopoverShow?.();
-      } else {
-        await this.onBeforePopoverHide?.();
-        await waitForAnimations(this);
-        await this.onPopoverHide?.();
-      }
-      if (!this.referenceElement) return;
-      if (this.open) {
-        this.#openPopovers.add(this.referenceElement);
-      } else {
-        this.#openPopovers.delete(this.referenceElement);
-      }
-    };
-    if (!isServer) {
-      this.addEventListener("toggle", this.#handleToggle);
-    }
-  }
-  static {
-    this.styles = unsafeCSS(styles$Z);
-  }
-  #currentReferenceElement;
-  #openPopovers;
-  #positionUpdater;
-  #observer;
-  set referenceElement(value) {
-    if (this.#currentReferenceElement === value) return;
-    this.#currentReferenceElement = value;
-  }
-  get referenceElement() {
-    return this.#currentReferenceElement;
-  }
-  get options() {
-    return PopoverPlacementOptions({ arrowElement: this.popoverElement.arrowElement, placement: this.placement });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.popover ??= "auto";
-    this.#connectObserver();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#disconnectObserver();
-    if (!this.referenceElement) return;
-    this.unmountPopover(this.referenceElement);
-    this.hidePopover();
-  }
-  hasMountedPopover(element) {
-    return this.#observer?.hasMountedPopover(element) ?? false;
-  }
-  mountPopover(referenceElement) {
-    if (!referenceElement) return;
-    this.referenceElement = referenceElement;
-  }
-  unmountPopover(_referenceElement) {
-    this.referenceElement = null;
-  }
-  hasOpenPopover(referenceElement) {
-    return !!referenceElement && this.#openPopovers.has(referenceElement);
-  }
-  async showPopover() {
-    if (!this.referenceElement || this.disabled || this.canPopoverShow?.() === false) return;
-    await 0;
-    this.#positionUpdater?.();
-    computePopoverPlacement(this.referenceElement, this, this.options);
-    super.showPopover();
-    this.#positionUpdater = autoUpdate(
-      this.referenceElement,
-      this,
-      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options), 1e3 / this.fpsLimit)
-    );
-  }
-  hidePopover() {
-    if (!this.open || this.canPopoverHide?.() === false) return;
-    super.hidePopover();
-    this.#positionUpdater?.();
-    this.#positionUpdater = void 0;
-  }
-  togglePopover(state) {
-    const isOpen = state ?? !this.hasOpenPopover(this.referenceElement);
-    if (isOpen) {
-      this.showPopover();
-    } else {
-      this.hidePopover();
-    }
-    return isOpen;
-  }
-  updateReferenceElementFromEvent(event) {
-    const referenceElement = getElementFromEvent(event, (element) => this.hasMountedPopover(element));
-    if (!referenceElement) return;
-    this.referenceElement = referenceElement;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("referenceElement")) {
-      const previousReferenceElement = props.get("referenceElement");
-      if (previousReferenceElement && this.referenceElement !== previousReferenceElement) {
-        this.#openPopovers.delete(previousReferenceElement);
-      }
-    }
-  }
-  #connectObserver() {
-    this.#disconnectObserver();
-    this.#observer = new PopoverObserver(this);
-    this.#observer?.observe();
-  }
-  #disconnectObserver() {
-    this.#observer?.disconnect();
-    this.#observer = void 0;
-  }
-  #handleToggle;
-}
-__decorateClass([
-  query("odx-popover", true)
-], PopoverHost.prototype, "popoverElement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], PopoverHost.prototype, "open", 2);
-__decorateClass([
-  property({ attribute: false })
-], PopoverHost.prototype, "referenceElement", 1);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], PopoverHost.prototype, "placement", 2);
-__decorateClass([
-  property({ attribute: false })
-], PopoverHost.prototype, "fpsLimit", 2);
-
-const styles$Y = ":host{--_popover-offset: var(--odx-size-37)}";
-
-const DropdownPlacement = { TOP: Placement.TOP, BOTTOM: Placement.BOTTOM };
-const _OdxDropdown = class _OdxDropdown extends PopoverHost {
-  constructor() {
-    super(...arguments);
-    this.matchReferenceWidth = false;
-    this.placement = DropdownPlacement.BOTTOM;
-    this.#handleInteraction = (event) => {
-      if (event.defaultPrevented) return;
-      this.updateReferenceElementFromEvent(event);
-      this.togglePopover();
-    };
-    this.#handleKeyboardEvent = (event) => {
-      const key = getKeyInfo(event);
-      if (!(key.enter || key.space) || event.defaultPrevented) return;
-      if (!this.open) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-      this.updateReferenceElementFromEvent(event);
-      this.showPopover();
-    };
-  }
-  static {
-    customElement("odx-dropdown", styles$Y)(_OdxDropdown);
-  }
-  get options() {
-    return PopoverPlacementOptions({
-      ...super.options,
-      matchReferenceWidth: this.matchReferenceWidth
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getUniqueId("odx-dropdown");
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    if (!referenceElement) return;
-    this.#updateAriaAttributes(referenceElement, this.id);
-    referenceElement.addEventListener("click", this.#handleInteraction);
-    referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
-  }
-  unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
-    if (!referenceElement) return;
-    this.#updateAriaAttributes(referenceElement, null);
-    referenceElement.removeEventListener("click", this.#handleInteraction);
-    referenceElement.removeEventListener("keydown", this.#handleKeyboardEvent);
-  }
-  render() {
-    return html`
-      <odx-popover>
-        <slot></slot>
-      </odx-popover>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("id") && this.referenceElement) {
-      this.#updateAriaAttributes(this.referenceElement, this.id);
-    }
-  }
-  #updateAriaAttributes(referenceElement, id) {
-    const ariaAttribute = this.role === "listbox" ? "aria-controls" : "aria-describedby";
-    if (id) {
-      referenceElement.setAttribute(ariaAttribute, id);
-    } else {
-      referenceElement.removeAttribute(ariaAttribute);
-    }
-  }
-  #handleInteraction;
-  #handleKeyboardEvent;
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true, attribute: "match-reference-width" })
-], _OdxDropdown.prototype, "matchReferenceWidth", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxDropdown.prototype, "placement", 2);
-let OdxDropdown = _OdxDropdown;
-
-const styles$X = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([subtle]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}";
-
-const highlightAttribute = "odx-highlight";
-const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.root = this;
-    this.minlength = 0;
-    this.subtle = false;
-  }
-  static {
-    customElement("odx-highlight", styles$X)(_OdxHighlight);
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("query") || props.has("selector") || props.has("minlength") && !this.disabled) {
-      this.#updateHighlight(this.query ?? "", this.minlength);
-    }
-    if (props.has("disabled") && this.disabled) {
-      CSS.highlights.delete(highlightAttribute);
-      return;
-    }
-  }
-  #updateHighlight(query, minlength) {
-    if (!CSS.highlights) return;
-    const selection = this.#searchTextContent(query.trim().toLowerCase(), minlength);
-    if (selection.length > 0) {
-      CSS.highlights.set(highlightAttribute, new Highlight(...selection));
-    } else {
-      CSS.highlights.delete(highlightAttribute);
-    }
-  }
-  #searchTextContent(query, minlength) {
-    const ranges = [];
-    if (!query || query.length < Math.max(minlength ?? 1, 1)) return ranges;
-    const walker = document.createTreeWalker(this.root, NodeFilter.SHOW_TEXT);
-    while (walker.nextNode()) {
-      const content = walker.currentNode.textContent?.toLowerCase();
-      if (!content?.includes(query)) continue;
-      const parentElement = walker.currentNode.parentElement;
-      if (this.selector && !parentElement?.closest(this.selector)) continue;
-      this.#createRange(content, query, (index) => {
-        const range = new Range();
-        range.setStart(walker.currentNode, index);
-        range.setEnd(walker.currentNode, index + query.length);
-        ranges.push(range);
-      });
-    }
-    return ranges;
-  }
-  #createRange(value, query, callback) {
-    let index = 0;
-    while (index < value.length) {
-      index = value.indexOf(query, index);
-      if (index === -1) break;
-      callback?.(index);
-      index += query.length;
-    }
-  }
-};
-__decorateClass([
-  property({ attribute: false })
-], _OdxHighlight.prototype, "root", 2);
-__decorateClass([
-  property()
-], _OdxHighlight.prototype, "query", 2);
-__decorateClass([
-  property()
-], _OdxHighlight.prototype, "selector", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxHighlight.prototype, "minlength", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxHighlight.prototype, "subtle", 2);
-let OdxHighlight = _OdxHighlight;
-
-const styles$W = ":host{display:block}odx-dropdown{--max-block-size: 320px}::slotted([hidden]){display:none}::slotted([slot=\"control\"]){inline-size:100%}";
-
-const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
-  constructor() {
-    super(...arguments);
-    this.activeDescendants = new ActiveDescendantsController(this, {
-      getItems: () => this.options,
-      onChange: (_, option, firstChange) => {
-        option?.scrollIntoView();
-        if (!option || firstChange || option.selected) return;
-      }
-    });
-    this.minQueryLength = 1;
-    this.searchFn = (option, query2) => {
-      if (!query2) return true;
-      return option.label.toLowerCase().includes(query2.toLowerCase().trim());
-    };
-    this.#handleControlSlotChange = () => {
-      if (!this.control) return;
-      this.control.addEventListener("blur", this.#handleControlFocusOut);
-      this.control.addEventListener("clear", this.#handleControlClear);
-      this.control.addEventListener("click", (event) => event.preventDefault());
-      this.control.addEventListener("focus", this.#handleControlFocusIn);
-      this.control.addEventListener("input", this.#handleControlInput);
-      this.control.addEventListener("keydown", this.#handleControlKeyboardEvent);
-      this.dropdown.popover = "manual";
-      this.dropdown.mountPopover(this.control);
-    };
-    this.#handleControlFocusIn = () => {
-      if (this.dropdown.canPopoverShow?.() === false) return;
-      this.dropdown.showPopover();
-      this.activeDescendants.activate();
-    };
-    this.#handleControlFocusOut = () => {
-      if (this.dropdown.canPopoverHide?.() === false) return;
-      this.activeDescendants.deactivate();
-      this.dropdown.hidePopover();
-    };
-    this.#handleControlClear = () => {
-      if (!this.dropdown.open) return;
-      this.#handleControlValueChange(void 0);
-    };
-    this.#handleControlInput = () => {
-      if (this.controlValue.length >= this.minQueryLength) {
-        this.dropdown.showPopover();
-      } else if (this.controlValue.length === 0) {
-        this.dropdown.hidePopover();
-      }
-      if (!this.dropdown.open) return;
-      this.#handleControlValueChange(this.controlValue);
-    };
-    this.#handleControlKeyboardEvent = (event) => {
-      if (!this.control) return;
-      const key = getKeyInfo(event);
-      if (key.enter || key.start || key.end || key.down || key.up) {
-        event.preventDefault();
-      }
-      if (key.space) {
-        event.stopImmediatePropagation();
-      }
-      if (this.activeDescendants.activeItem && key.enter) {
-        this.#handleControlValueChange(this.activeDescendants.activeItem.label);
-      }
-    };
-  }
-  static {
-    customElement("odx-autocomplete", styles$W)(_OdxAutocomplete);
-  }
-  get control() {
-    return getAssignedElement(this.shadowRoot, { slot: "control" });
-  }
-  get controlValue() {
-    return this.control?.value ?? "";
-  }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    const canPopoverShow = this.dropdown.canPopoverShow;
-    this.dropdown.canPopoverShow = () => {
-      return this.controlValue.length >= this.minQueryLength && canPopoverShow?.() !== false;
-    };
-  }
-  render() {
-    return html`
-      <slot name="control" @slotchange=${this.#handleControlSlotChange}></slot>
-      <odx-dropdown
-        part="dropdown"
-        role="listbox"
-        tabindex="-1"
-        ?disabled=${this.disabled}
-        match-reference-width
-      >
-        <odx-highlight minlength=${this.minQueryLength} selector="odx-option" subtle .root=${this}>
-          <odx-stack gap="xs">
-            <slot></slot>
-          </odx-stack>
-        </odx-highlight>
-      </odx-dropdown>
-    `;
-  }
-  #handleControlValueChange(value) {
-    if (!this.control) return;
-    this.control.value = value ?? "";
-    this.highlight.query = this.control.value;
-    let activeOptionIndex;
-    let selectedValue = "";
-    const allOptionsHidden = this.options.reduce((state, option, index) => {
-      option.hidden = !this.searchFn(option, this.controlValue);
-      option.selected = option.label === this.controlValue;
-      if (!option.hidden && activeOptionIndex === void 0) {
-        activeOptionIndex = index;
-      }
-      if (option.selected) {
-        selectedValue = option.value;
-      }
-      return state && option.hidden;
-    }, true);
-    if (allOptionsHidden) {
-      this.dropdown.hidePopover();
-      return;
-    }
-    if (this.activeDescendants.activeItem?.hidden) {
-      this.activeDescendants.update(activeOptionIndex);
-    }
-    if (this.value !== selectedValue) {
-      this.value = selectedValue;
-      this.emit("change");
-    }
-  }
-  #handleControlSlotChange;
-  #handleControlFocusIn;
-  #handleControlFocusOut;
-  #handleControlClear;
-  #handleControlInput;
-  #handleControlKeyboardEvent;
-};
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxAutocomplete.prototype, "options", 2);
-__decorateClass([
-  query(OdxHighlight.tagName, true)
-], _OdxAutocomplete.prototype, "highlight", 2);
-__decorateClass([
-  query(OdxDropdown.tagName, true)
-], _OdxAutocomplete.prototype, "dropdown", 2);
-__decorateClass([
-  property({ type: Number, attribute: "min-query-length" })
-], _OdxAutocomplete.prototype, "minQueryLength", 2);
-let OdxAutocomplete = _OdxAutocomplete;
-
-const styles$V = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-200)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
-
-class OdxContentBox extends CustomElement {
-  static {
-    customElement("odx-content-box", styles$V)(OdxContentBox);
-  }
-  render() {
-    return html`
-      <slot name="header"></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
-    `;
-  }
-}
-
-const styles$U = ":host{display:block}";
-
-const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
-const _OdxFormField = class _OdxFormField extends CustomElement {
-  static {
-    customElement("odx-form-field", styles$U)(_OdxFormField);
-  }
-  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=${this.#handleSlotChange}></slot>
-      ${when(isValid === false, () => this.renderErrorMessage())}
-
-    `;
-  }
-  renderErrorMessage() {
-    return html`
-      <odx-inline-message variant="danger">
-        ${this.control?.validationMessage}
-      </odx-inline-message>
-    `;
-  }
-  #handleSlotChange = () => {
-    this.control?.addEventListener("change", () => this.requestUpdate());
-  };
-};
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], _OdxFormField.prototype, "elements", 2);
-let OdxFormField = _OdxFormField;
-
-class BaseFormat extends IsLocalized(CustomElement) {
-  static {
-    this.styles = [css`:host { display: inline; }`];
-  }
-  render() {
-    if (this.value != null) {
-      try {
-        return html`${this.transform(this.value) || this.fallbackValue}`;
-      } catch {
-        return html`${this.fallbackValue ?? nothing}`;
-      }
-    }
-    return html`${this.fallbackValue ?? nothing}`;
-  }
-}
-__decorateClass([
-  property()
-], BaseFormat.prototype, "fallbackValue", 2);
-
-const _OdxFormatBytes = class _OdxFormatBytes extends BaseFormat {
-  constructor() {
-    super(...arguments);
-    this.unit = "byte";
-  }
-  static {
-    customElement("odx-format-bytes")(_OdxFormatBytes);
-  }
-  static #unitPrefixesMap = {
-    bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
-    byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
-  };
-  transform(value) {
-    const units = _OdxFormatBytes.#unitPrefixesMap[this.unit];
-    const index = Math.min(Math.max(0, Math.floor(Math.log10(value) / 3)), units.length - 1);
-    const transformedValue = value / 1e3 ** index;
-    return this.formatNumber(transformedValue, {
-      maximumFractionDigits: 2,
-      style: "unit",
-      unit: units[index]
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], _OdxFormatBytes.prototype, "value", 2);
-__decorateClass([
-  property()
-], _OdxFormatBytes.prototype, "unit", 2);
-let OdxFormatBytes = _OdxFormatBytes;
-
-const _OdxFormatDate = class _OdxFormatDate extends BaseFormat {
-  static {
-    customElement("odx-format-date")(_OdxFormatDate);
-  }
-  get valueAsDate() {
-    if (this.value == null || this.value === "") {
-      return null;
-    }
-    return parseDate(this.value);
-  }
-  transform(value) {
-    return this.formatDate(value, { dateStyle: this.dateStyle });
-  }
-};
-__decorateClass([
-  property()
-], _OdxFormatDate.prototype, "value", 2);
-__decorateClass([
-  property()
-], _OdxFormatDate.prototype, "dateStyle", 2);
-let OdxFormatDate = _OdxFormatDate;
-
-const _OdxFormatNumber = class _OdxFormatNumber extends BaseFormat {
-  static {
-    customElement("odx-format-number")(_OdxFormatNumber);
-  }
-  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([
-  property({ type: Number })
-], _OdxFormatNumber.prototype, "value", 2);
-__decorateClass([
-  property()
-], _OdxFormatNumber.prototype, "currency", 2);
-__decorateClass([
-  property()
-], _OdxFormatNumber.prototype, "currencyDisplay", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxFormatNumber.prototype, "minimumFractionDigits", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxFormatNumber.prototype, "maximumFractionDigits", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxFormatNumber.prototype, "minimumIntegerDigits", 2);
-__decorateClass([
-  property()
-], _OdxFormatNumber.prototype, "type", 2);
-__decorateClass([
-  property()
-], _OdxFormatNumber.prototype, "unit", 2);
-__decorateClass([
-  property()
-], _OdxFormatNumber.prototype, "unitDisplay", 2);
-let OdxFormatNumber = _OdxFormatNumber;
-
-const _OdxRelativeTime = class _OdxRelativeTime extends BaseFormat {
-  constructor() {
-    super(...arguments);
-    this.value = Date.now();
-    this.syncInterval = null;
-  }
-  static {
-    customElement("odx-relative-time")(_OdxRelativeTime);
-  }
-  #syncInterval;
-  get valueAsDate() {
-    if (this.value == null || this.value === "") {
-      return null;
-    }
-    return parseDate(this.value);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.#syncInterval);
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("syncInterval")) {
-      this.#setupSyncInterval();
-    }
-  }
-  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>`;
-  }
-  #setupSyncInterval() {
-    clearInterval(this.#syncInterval);
-    if (typeof this.syncInterval !== "number") return;
-    this.#syncInterval = window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3));
-  }
-};
-__decorateClass([
-  property()
-], _OdxRelativeTime.prototype, "value", 2);
-__decorateClass([
-  property()
-], _OdxRelativeTime.prototype, "format", 2);
-__decorateClass([
-  property()
-], _OdxRelativeTime.prototype, "minUnit", 2);
-__decorateClass([
-  property()
-], _OdxRelativeTime.prototype, "numeric", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxRelativeTime.prototype, "syncInterval", 2);
-let OdxRelativeTime = _OdxRelativeTime;
-
-const styles$T = ":host{display:block;line-height:inherit;color:inherit;font-family:var(--odx-typography-font-family-brand);font-size:inherit;font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xs\"]){line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"sm\"]){line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"md\"]){line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"lg\"]){line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xl\"]){line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xxl\"]){line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1);font-weight:var(--odx-typography-font-weight-semibold)}";
-
-const TitleSize = pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]);
-const _OdxTitle = class _OdxTitle extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.size = TitleSize.SM;
-  }
-  static {
-    customElement("odx-title", styles$T)(_OdxTitle);
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("level")) {
-      this.role = typeof this.level === "number" ? "heading" : null;
-      this.ariaLevel = typeof this.level === "number" ? `${this.level}` : null;
-    }
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxTitle.prototype, "size", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxTitle.prototype, "level", 2);
-let OdxTitle = _OdxTitle;
-
-const styles$S = ":host{display:block;position:relative}.base{display:flex;position:relative;column-gap:var(--odx-size-150);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-size-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);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 (width <= 600px){odx-logo{display:none}}";
-
-const _OdxHeader = class _OdxHeader extends CustomElement {
-  static {
-    customElement("odx-header", styles$S)(_OdxHeader);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "banner";
-  }
-  render() {
-    return html`
-      <div class="base">
-        <slot name="prefix"></slot>
-        <odx-logo size="sm"></odx-logo>
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-        <slot name="actions"></slot>
-      </div>
-      <div class="background"></div>
-    `;
-  }
-  #handleSlotChange = () => {
-    const [titleElement] = this.titleElements;
-    if (!titleElement) return;
-    titleElement.ariaLevel = "1";
-    titleElement.role = "heading";
-    titleElement.size = TitleSize.XS;
-    titleElement.setAttribute("odxPreventTextOverflow", "true");
-  };
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxTitle.tagName, flatten: true })
-], _OdxHeader.prototype, "titleElements", 2);
-let OdxHeader = _OdxHeader;
-
-const styles$R = ":host{display:flex;gap:var(--odx-size-75);align-items:center;block-size:100%}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}";
-
-class OdxHeaderActions extends CustomElement {
-  static {
-    customElement("odx-header-actions", styles$R)(OdxHeaderActions);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.slot = "actions";
-  }
-}
-
-const styles$Q = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}:host,:host([size=\"md\"]){line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}:host([size=\"sm\"]){line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}:host([size=\"lg\"]){line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}:host([size=\"xl\"]){line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}";
-
-const HeadlineSize = pick(Size, ["SM", "MD", "LG", "XL"]);
-const _OdxHeadline = class _OdxHeadline extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.size = HeadlineSize.MD;
-  }
-  static {
-    customElement("odx-headline", styles$Q)(_OdxHeadline);
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("level")) {
-      this.role = typeof this.level === "number" ? "heading" : null;
-      this.ariaLevel = typeof this.level === "number" ? `${this.level}` : null;
-    }
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxHeadline.prototype, "size", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxHeadline.prototype, "level", 2);
-let OdxHeadline = _OdxHeadline;
-
-const styles$P = ":host{--icon-rotation: 0deg}[part=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}";
-
-const _OdxIconButton = class _OdxIconButton extends OdxButton {
-  constructor() {
-    super(...arguments);
-    this.float = false;
-  }
-  static {
-    customElement("odx-icon-button", styles$P)(_OdxIconButton);
-  }
-  renderContent() {
-    return html`
-      ${when(
-      this.loading,
-      () => this.renderLoader(),
-      () => html`<odx-icon name=${optionalAttr(this.icon)} part="icon"></odx-icon>`
-    )}
-      <odx-visually-hidden>
-        <slot></slot>
-      </odx-visually-hidden>
-      <slot name="badge"></slot>
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxIconButton.prototype, "float", 2);
-__decorateClass([
-  property()
-], _OdxIconButton.prototype, "icon", 2);
-let OdxIconButton = _OdxIconButton;
-
-const styles$O = ":host{display:block}";
-
-class ResourceLoader {
-  async load(resource) {
-    const response = await fetch(resource.src);
-    return this.parseResponse(response);
-  }
-  parseResponse(response) {
-    return response.blob();
-  }
-}
-class ImageLoader extends ResourceLoader {
-  load(options) {
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.src = options.src;
-      image.onload = () => resolve(image);
-      image.onerror = () => reject(new Error("Failed to load image"));
-    });
-  }
-}
-const _OdxImage = class _OdxImage extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.loadingError = false;
-    this.loading = true;
-  }
-  static {
-    customElement("odx-image", styles$O)(_OdxImage);
-  }
-  static {
-    this.loader = new ImageLoader();
-  }
-  render() {
-    return html`
-      ${when(!this.loadingError && this.image, () => this.image)}
-      ${when(this.loading, this.renderLoader)}
-    `;
-  }
-  renderLoader() {
-    return html`
-      <odx-loading-spinner></odx-loading-spinner>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("src") && this.src) {
-      this.load(this.src);
-      this.checkVisibility();
-    }
-    if (props.has("height") || props.has("width")) {
-      this.#handleDimensionChange();
-    }
-  }
-  async load(src) {
-    this.image = void 0;
-    this.loading = true;
-    this.loadingError = false;
-    try {
-      this.image = await _OdxImage.loader.load({ src });
-      this.loading = false;
-    } catch {
-      this.loadingError = true;
-    }
-  }
-  #handleDimensionChange() {
-    if (!this.image) return;
-    this.image.width = this.width ?? this.image.width;
-    this.image.height = this.height ?? this.image.height;
-  }
-};
-__decorateClass([
-  state()
-], _OdxImage.prototype, "loadingError", 2);
-__decorateClass([
-  state()
-], _OdxImage.prototype, "loading", 2);
-__decorateClass([
-  state()
-], _OdxImage.prototype, "image", 2);
-__decorateClass([
-  property()
-], _OdxImage.prototype, "src", 2);
-__decorateClass([
-  property()
-], _OdxImage.prototype, "alt", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxImage.prototype, "height", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxImage.prototype, "width", 2);
-let OdxImage = _OdxImage;
-
-const styles$N = ":host{display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
-
-const iconMap = {
-  neutral: "core::info",
-  primary: "core::announcement",
-  success: "core::check-filled-mono",
-  warning: "core::warning",
-  danger: "core::error"
-};
-const InlineMessageVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
-const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.closable = false;
-    this.strong = false;
-    this.variant = InlineMessageVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-inline-message", styles$N)(_OdxInlineMessage);
-  }
-  show() {
-    this.ariaHidden = toAriaBooleanAttribute(false);
-  }
-  async hide() {
-    if (this.emit("close")) return;
-    this.hidden = true;
-    await waitForAnimations(this);
-    this.emit("after-close", { cancelable: false });
-  }
-  render() {
-    const resolvedIcon = this.icon === void 0 ? this.variant ? iconMap[this.variant] : null : this.icon;
-    return html`
-      ${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name=${icon}></odx-icon>`)}
-      <div class="base">
-        <slot></slot>
-      </div>
-      ${when(this.closable, () => html`<odx-icon-button class="action" icon="core::close" variant="ghost" @click=${() => this.hide()}></odx-icon-button>`)}
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean })
-], _OdxInlineMessage.prototype, "closable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxInlineMessage.prototype, "strong", 2);
-__decorateClass([
-  property()
-], _OdxInlineMessage.prototype, "icon", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxInlineMessage.prototype, "variant", 2);
-let OdxInlineMessage = _OdxInlineMessage;
-
-const styles$M = ":host{--_stroke-color: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_stroke-color);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-5);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;width:100%;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]:not([readonly])){--_stroke-color: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_stroke-color: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part=input]{cursor:default}}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
-
-const _OdxInput = class _OdxInput extends FormControl {
-  constructor() {
-    super(...arguments);
-    this.block = false;
-    this.clearable = false;
-    this.hideControls = false;
-    this.placeholder = "";
-    this.type = "text";
-    this.value = "";
-    this.#handleClear = (event) => {
-      if (!this.#isClearable()) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.emit("clear")) return;
-      this.clear();
-    };
-    this.#handleInput = (event) => {
-      this.value = event.target.value;
-    };
-    this.#handleKeyDown = (event) => {
-      const key = getKeyInfo(event);
-      if (!key.escape) return;
-      this.#handleClear(event);
-    };
-  }
-  static {
-    customElement("odx-input", styles$M)(_OdxInput);
-  }
-  stepUp() {
-    if (!this.nativeInput) return;
-    this.nativeInput.stepUp();
-    this.value = this.nativeInput.value;
-    this.requestUpdate();
-  }
-  stepDown() {
-    if (!this.nativeInput) return;
-    this.nativeInput.stepDown();
-    this.value = this.nativeInput.value;
-    this.requestUpdate();
-  }
-  willUpdate(props) {
-    if (props.has("type") && this.type === "number") {
-      this.min ||= 0;
-      this.max ||= 100;
-      this.step ||= 1;
-      this.value ||= String(this.min);
-    }
-  }
-  render() {
-    const isNumberInput = this.type === "number";
-    const min = isNumberInput ? this.min : void 0;
-    const max = isNumberInput ? this.max : void 0;
-    const canStepUp = max == null || this.value == null || Number(this.value) < max;
-    const canStepDown = min == null || this.value == null || Number(this.value) > min;
-    return html`
-      <slot name="prefix"></slot>
-      <input
-        placeholder=${this.disabled || this.readonly ? "" : this.placeholder}
-        part="input"
-        min=${optionalAttr(min)}
-        max=${optionalAttr(max)}
-        step=${optionalAttr(this.step)}
-        type=${this.type}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        .value=${this.value}
-        size="1"
-        @keydown=${this.#handleKeyDown}
-        @change=${forwardEvent(this)}
-        @input=${this.#handleInput}
-        @search=${forwardEvent(this)}
-      />
-      ${when(
-      !this.readonly && isNumberInput,
-      () => html`
-          <odx-button-group>
-            ${this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown)}
-            ${this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp)}
-          </odx-button-group>
-        `,
-      () => when(this.#isClearable(), () => this.renderControl("clear", "core::cancel", this.#handleClear, this.disabled))
-    )}
-      <slot name="suffix"></slot>
-    `;
-  }
-  renderControl(type, icon, listener, disabled) {
-    if (this.hideControls || this.readonly) return nothing;
-    return html`
-      <odx-icon-button part="control control-${type}" icon=${icon} size="sm" tabindex="-1" variant="ghost" ?disabled=${disabled} @click=${listener}>
-      </odx-icon-button>
-    `;
-  }
-  #isClearable() {
-    return this.clearable && !this.disabled && !this.readonly && !this.required && !!this.value;
-  }
-  #handleClear;
-  #handleInput;
-  #handleKeyDown;
-};
-__decorateClass([
-  query("input")
-], _OdxInput.prototype, "nativeInput", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxInput.prototype, "block", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxInput.prototype, "clearable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true, attribute: "hide-controls" })
-], _OdxInput.prototype, "hideControls", 2);
-__decorateClass([
-  property()
-], _OdxInput.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], _OdxInput.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], _OdxInput.prototype, "max", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], _OdxInput.prototype, "step", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxInput.prototype, "type", 2);
-__decorateClass([
-  property()
-], _OdxInput.prototype, "value", 2);
-let OdxInput = _OdxInput;
-
-const styles$L = ":host{padding:var(--odx-size-50)}";
-
-const KpiSize = pick(Size, ["SM", "MD", "LG"]);
-const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
-const _OdxKpi = class _OdxKpi extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.label = "";
-    this.value = "";
-    this.size = KpiSize.MD;
-    this.variant = KpiVariant.NEUTRAL;
-    this.vertical = false;
-  }
-  static {
-    customElement("odx-kpi", styles$L)(_OdxKpi);
-  }
-  render() {
-    return html`
-      <odx-stack class="base" horizontal align="center" gap=${this.size}>
-        <odx-avatar size=${this.size}><slot></slot></odx-avatar>
-        <odx-stack gap="none">
-          <odx-text size=${this.size}>${this.label}</odx-text>
-          <odx-title size=${this.size}>
-            <odx-text variant=${optionalAttr(this.variant)} inline>
-              ${this.value} ${when(this.unit, (unit) => html`<odx-text inline size=${this.size}>${unit}</odx-text>`)}
-            </odx-text>
-          </odx-title>
-        </odx-stack>
-      </odx-stack>
-    `;
-  }
-};
-__decorateClass([
-  property()
-], _OdxKpi.prototype, "label", 2);
-__decorateClass([
-  property()
-], _OdxKpi.prototype, "unit", 2);
-__decorateClass([
-  property()
-], _OdxKpi.prototype, "value", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxKpi.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxKpi.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxKpi.prototype, "vertical", 2);
-let OdxKpi = _OdxKpi;
-
-const styles$K = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
-
-const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
-  static {
-    customElement("odx-line-clamp", styles$K)(_OdxLineClamp);
-  }
-  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([
-  property({ type: Number })
-], _OdxLineClamp.prototype, "max", 2);
-let OdxLineClamp = _OdxLineClamp;
-
-const styles$J = ":host{--item-indent-level: 0;display:block}::slotted([role=\"listitem\"]){--indent-level: var(--item-indent-level)}";
-
-const _OdxList = class _OdxList extends CustomElement {
-  constructor() {
-    super();
-    this.multiple = false;
-    new ExpandableItemManager(this, { getItems: () => this.items });
-  }
-  static {
-    customElement("odx-list", styles$J)(_OdxList);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "list";
-  }
-  toggleAll(state, emitEvent = false) {
-    for (const item of this.items) {
-      item.toggle(state, emitEvent);
-    }
-  }
-};
-__decorateClass([
-  queryAssignedElements({ selector: '[role="listitem"]', flatten: true })
-], _OdxList.prototype, "items", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxList.prototype, "multiple", 2);
-let OdxList = _OdxList;
-
-const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([subtle]):hover):after{opacity:0}:host([subtle]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]{--icon-rotation: 180deg}}}";
-
-const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-    this.subtle = false;
-    this.selected = false;
-    this.withExpandControl = false;
-    this.withExpandIndicator = false;
-  }
-  static {
-    customElement("odx-list-item", styles$I)(_OdxListItem);
-  }
-  isExpandable() {
-    return !(this.disabled || this.loading) && this.expandableItems.length > 0;
-  }
-  getExpandControl() {
-    if (!this.isExpandable()) return null;
-    return this.renderRoot.querySelector(this.withExpandControl ? '[part="expand-control"]' : '[part="base"]');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "listitem";
-  }
-  render() {
-    const expandSlot = html`<slot name="expand" @slotchange=${() => this.requestUpdate()}></slot>`;
-    return html`
-      ${super.render()}
-      <odx-separator part="separator"></odx-separator>
-      ${when(
-      this.isExpandable(),
-      () => html`<odx-toggle-content part="content" id="list-item-content" role="region" ?hidden=${!this.expanded}>${expandSlot}</odx-toggle-content>`,
-      () => html`<odx-visually-hidden>${expandSlot}</odx-visually-hidden>`
-    )}
-    `;
-  }
-  renderContent() {
-    const controlSize = this.compact ? ButtonSize.SM : void 0;
-    return html`
-      ${super.renderContent(true)}
-      ${when(
-      this.withExpandIndicator || this.isExpandable(),
-      () => html`
-          <odx-icon-button
-             id="expand-control"
-             part="expand-control"
-             icon="core::chevron-down"
-             variant="ghost"
-             size=${optionalAttr(controlSize)}
-             ?disabled=${this.disabled}
-             .inert=${!this.withExpandControl}
-          >
-          </odx-icon-button>
-        `
-    )}
-    `;
-  }
-  willUpdate(props) {
-    super.updated(props);
-    if (props.has("disabled") || props.has("expanded")) {
-      this.#handleExpandedChange();
-    }
-    if (props.has("selected")) {
-      this.ariaCurrent = this.selected ? "page" : null;
-    }
-  }
-  #handleExpandedChange() {
-    const expandControl = this.getExpandControl();
-    if (!(this.region && expandControl)) return;
-    this.region.setAttribute("aria-labelledby", "expand-control");
-    expandControl.ariaExpanded = toAriaBooleanAttribute(this.expanded);
-    expandControl.setAttribute("aria-controls", this.region.id);
-    if (this.expanded) return;
-    this.querySelector("odx-list")?.toggleAll(false);
-  }
-};
-__decorateClass([
-  queryAssignedElements({ slot: "expand" })
-], _OdxListItem.prototype, "expandableItems", 2);
-__decorateClass([
-  query("#list-item-content")
-], _OdxListItem.prototype, "region", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxListItem.prototype, "compact", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxListItem.prototype, "subtle", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxListItem.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "with-expand-control" })
-], _OdxListItem.prototype, "withExpandControl", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "with-expand-indicator" })
-], _OdxListItem.prototype, "withExpandIndicator", 2);
-let OdxListItem = _OdxListItem;
-
-const styles$H = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgb(255 255 255 / 25%));display:contents;border-radius:inherit;overflow:hidden}:host::part(overlay){display:flex;position:absolute;inset:0;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-reduced) allow-discrete;visibility:hidden;opacity:0;border-radius:inherit;overflow:hidden;pointer-events:none}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){visibility:visible;opacity:1;z-index:9999;background-color:var(--_overlay-fill-color);pointer-events:all;backdrop-filter:blur(var(--odx-size-12))}";
-
-const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.#loadingContainerPosition = "";
-    this.loading = false;
-  }
-  static {
-    customElement("odx-loading-overlay", styles$H)(_OdxLoadingOverlay);
-  }
-  #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);
-    this.#loadingContainerPosition = window.getComputedStyle(this.loadingContainer).position;
-    if (this.#loadingContainerPosition !== "static") return;
-    this.loadingContainer.style.position = "relative";
-    this.loadingContainer.inert = true;
-    this.loadingContainer.ariaBusy = "true";
-  }
-  hideOverlay() {
-    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
-    if (this.#loadingContainerPosition !== "static") return;
-    this.loadingContainer.style.position = "";
-    this.loadingContainer.inert = false;
-    this.loadingContainer.ariaBusy = "false";
-  }
-};
-__decorateClass([
-  query('[part="overlay"]', true)
-], _OdxLoadingOverlay.prototype, "overlay", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxLoadingOverlay.prototype, "loading", 2);
-let OdxLoadingOverlay = _OdxLoadingOverlay;
-
-const styles$G = ":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-background-transparent-pressed);display:flex;place-content:center;place-items:center;block-size:1em;color:inherit;font-size:var(--_size)}.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{animation:loading-spinner-animation 1.5s ease-in-out infinite;color:inherit;stroke:currentcolor;stroke-dasharray:90,180;stroke-dashoffset:-5;stroke-linecap:round}:not(svg){transform-origin:0 0}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{flex:0 0 calc(var(--_size) / 3);z-index:3;border-radius:var(--odx-border-radius-circle);background-color:currentcolor;block-size:calc(var(--_size) / 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-background-transparent-pressed)}50%{transform:scale(1);background-color:currentcolor}}";
-
-const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
-  static {
-    customElement("odx-loading-spinner", styles$G)(_OdxLoadingSpinner);
-  }
-  render() {
-    if (this.variant === "dots") {
-      return html`<div class="indicator"></div><div class="indicator"></div><div class="indicator"></div>`;
-    }
-    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>
-    `;
-  }
-};
-__decorateClass([
-  property({ reflect: true })
-], _OdxLoadingSpinner.prototype, "variant", 2);
-let OdxLoadingSpinner = _OdxLoadingSpinner;
-
-const styles$F = ":host{display:inline-block;background-color:currentcolor;aspect-ratio:92 / 36;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}: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,:host([size=\"sm\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-150)}:host([size=\"xs\"]){margin-block:var(--odx-size-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-size-25))}:host([size=\"md\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-225)}:host([size=\"lg\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-300)}:host([size=\"xl\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-400)}";
-
-const LogoSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
-const _OdxLogo = class _OdxLogo extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.size = LogoSize.SM;
-    this.compact = false;
-  }
-  static {
-    customElement("odx-logo", styles$F)(_OdxLogo);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.ariaLabel ||= "Dräger";
-    this.ariaRoleDescription ||= "Logo";
-    this.role = "img";
-    this.translate = false;
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxLogo.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxLogo.prototype, "compact", 2);
-let OdxLogo = _OdxLogo;
-
-const styles$E = ":host{--_transition-duration: var(--odx-motion-duration-default);display:grid;grid-template-rows:auto 1fr auto;transform:translate(-100%);transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);padding:0;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}.header,.link-navigation{padding:var(--odx-size-75) var(--odx-size-150)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){display:grid;transform:translate(0);visibility:visible;@starting-style{transform:translate(-100%);visibility:hidden}}:host::backdrop{transition:all var(--odx-motion-duration-default) linear;opacity:0;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
-
-const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
-  static {
-    customElement("odx-main-menu", styles$E)(_OdxMainMenu);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.popover = "auto";
-  }
-  toggle() {
-    this.togglePopover();
-  }
-  open() {
-    this.showPopover();
-  }
-  close() {
-    this.hidePopover();
-  }
-  render() {
-    return html`
-      <odx-stack class="header">
-        <odx-stack horizontal justify="space-between">
-          <odx-logo size="sm"></odx-logo>
-          <odx-icon-button icon="core::close" variant="primary" @click=${this.close}></odx-icon-button>
-        </odx-stack>
-        <odx-stack gap="xs">
-          <slot name="title"></slot>
-          <slot name="subtitle"></slot>
-        </odx-stack>
-      </odx-stack>
-      <odx-stack role="navigation" class="navigation">
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-      </odx-stack>
-      <odx-stack class="link-navigation" gap="xs" horizontal wrap>
-        <slot name="link-navigation"></slot>
-      </odx-stack>
-    `;
-  }
-  #handleSlotChange = () => {
-    for (const link of this.links) {
-      link.slot ||= "link-navigation";
-      link.subtle = true;
-    }
-  };
-};
-__decorateClass([
-  queryAssignedElements({ selector: "odx-link", flatten: true })
-], _OdxMainMenu.prototype, "links", 2);
-let OdxMainMenu = _OdxMainMenu;
-
-class OdxMainMenuButton extends CustomElement {
-  static {
-    customElement("odx-main-menu-button")(OdxMainMenuButton);
-  }
-  render() {
-    return html`
-      <odx-icon-button aria-label="Open main menu" icon="core::menu" variant="ghost" @click=${this.#handleClick}>
-      </odx-icon-button>
-    `;
-  }
-  #handleClick = () => {
-    document.querySelector("odx-main-menu")?.open();
-  };
-}
-
-const styles$D = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;user-select:none}[part=base]{display:flex;gap:var(--odx-size-50);place-items:center;transition:var(--odx-transition-default);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-sm);background-color:var(--_color-background);padding-inline:var(--odx-size-100);block-size:var(--odx-size-300);text-decoration:none;color:var(--_color-foreground);font-weight:var(--odx-font-weight-medium);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:is([active],:active,:hover)){--_color-background: var(--odx-color-background-transparent-selected)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-brand);pointer-events:none}";
-
-class OdxMainMenuLink extends InteractiveLink {
-  static {
-    customElement("odx-main-menu-link", styles$D)(OdxMainMenuLink);
-  }
-}
-
-class OdxMainMenuSubtitle extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.slot = "subtitle";
-  }
-  static {
-    customElement("odx-main-menu-subtitle")(OdxMainMenuSubtitle);
-  }
-  render() {
-    return html`
-      <odx-text size="md">
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-}
-
-class OdxMainMenuTitle extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.slot = "title";
-  }
-  static {
-    customElement("odx-main-menu-title")(OdxMainMenuTitle);
-  }
-  render() {
-    return html`
-      <odx-title size="sm">
-        <slot></slot>
-      </odx-title>
-    `;
-  }
-}
-
-const styles$C = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}.base{display:flex;flex-direction:column;gap:var(--_gap);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}::slotted(odx-separator){--margin-block: 0}";
-
-const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
-const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
-class OdxMenu extends PopoverHost {
-  static {
-    customElement("odx-menu", styles$C)(OdxMenu);
-  }
-  #tabindexController = new RovingTabindexController(this, {
-    elements: () => this.getItems(),
-    direction: "vertical"
-  });
-  getItems() {
-    return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR)).filter((item) => !item.disabled);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "menu";
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    referenceElement?.addEventListener("click", this.#handleReferenceInteraction);
-    referenceElement?.addEventListener("keydown", this.#handleReferenceKeyDown);
-  }
-  unmountPopover(referenceElement) {
-    referenceElement.removeEventListener("keydown", this.#handleReferenceKeyDown);
-    referenceElement.removeEventListener("click", this.#handleReferenceInteraction);
-    super.unmountPopover(referenceElement);
-  }
-  onBeforePopoverShow() {
-    this.#tabindexController.update({ elements: () => this.getItems() });
-    this.#tabindexController.currentIndex = 0;
-    this.#tabindexController.focus();
-  }
-  onPopoverShow() {
-    this.addEventListener("keydown", this.#handleKeyDown);
-  }
-  onBeforePopoverHide() {
-    this.removeEventListener("keydown", this.#handleKeyDown);
-  }
-  isMenuItem(element) {
-    return MENU_ITEM_ROLES.includes(element.getAttribute?.("role") ?? "");
-  }
-  render() {
-    return html`
-      <odx-popover>
-        <div class="base">
-          <slot @click=${this.#handleClick}></slot>
-        </div>
-      </odx-popover>
-    `;
-  }
-  #handleReferenceInteraction = (event) => {
-    this.updateReferenceElementFromEvent(event);
-    this.togglePopover();
-  };
-  #handleClick = (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();
-  };
-  #handleKeyDown = (event) => {
-    const key = getKeyInfo(event);
-    if (!(this.open && (key.tab || key.backTab))) return;
-    event?.preventDefault();
-    event.stopPropagation();
-    this.hidePopover();
-  };
-  #handleReferenceKeyDown = (event) => {
-    if (!getKeyInfo(event).down) return;
-    this.showPopover();
-  };
-}
-
-const styles$B = ":host{display:flex;gap:var(--odx-size-50);place-items:center;padding-inline:var(--odx-size-50);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
-
-class OdxMenuLabel extends CustomElement {
-  static {
-    customElement("odx-menu-label", styles$B)(OdxMenuLabel);
-  }
-}
-
-const _OdxMenuItem = class _OdxMenuItem extends InteractiveElement {
-  static {
-    customElement("odx-menu-item")(_OdxMenuItem);
-  }
-  renderContent() {
-    return html`
-      ${when(!this.loading && this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
-      ${when(this.loading, () => this.renderLoader())}
-      <odx-line-clamp part="label" .max=${2}>
-        <slot></slot>
-      </odx-line-clamp>
-      <slot name="suffix"></slot>
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "menuitem";
-  }
-};
-__decorateClass([
-  property()
-], _OdxMenuItem.prototype, "icon", 2);
-let OdxMenuItem = _OdxMenuItem;
-
-const styles$A = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
-
-const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
-(async () => {
-  await 0;
-  if (isServer) return;
-  window.addEventListener("click", (event) => {
-    const source = getElementFromEvent(
-      event,
-      (node) => node.hasAttribute("odx-modal-toggle") && node.ariaBusy !== "true" && node.ariaDisabled !== "true"
-    );
-    const modalId = source?.getAttribute("odx-modal-toggle");
-    const modal = modalId ? source.ownerDocument.getElementById(modalId) : source?.closest("odx-modal");
-    if (!modal) return;
-    modal.open = !source.closest("odx-modal");
-  });
-})();
-const _OdxModal = class _OdxModal extends CustomElement {
-  constructor() {
-    super();
-    this.#closeRequested = false;
-    this.#showRequested = false;
-    this.dismissible = true;
-    this.open = false;
-    this.layout = ModalLayout.MODAL;
-    this.#handleKeyDown = (event) => {
-      if (!getKeyInfo(event).escape) return;
-      event.preventDefault();
-      this.dismiss();
-    };
-    this.#handleClick = (event) => {
-      if (this.backdropDisabled || !event.target.isConnected || getElementFromEvent(event, (node) => node === this.modalContainer)) return;
-      this.dismiss();
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-    }
-  }
-  static {
-    customElement("odx-modal", styles$A)(_OdxModal);
-  }
-  #closeRequested;
-  #showRequested;
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getUniqueId("odx-modal");
-  }
-  async show() {
-    if (this.dialog.open || this.#showRequested) return;
-    this.#showRequested = true;
-    const canShow = await this.canShow?.(this) ?? true;
-    if (!canShow) return;
-    await this.beforeShow?.(this);
-    this.dialog.showModal();
-    await waitForAnimations(this.dialog, true);
-    await this.afterShow?.(this);
-    this.open = true;
-    this.#showRequested = false;
-  }
-  async close(returnValue) {
-    if (!this.dialog.open || this.#closeRequested) return;
-    this.#closeRequested = true;
-    const canClose = await this.canClose?.(this) ?? true;
-    if (!canClose) return;
-    await this.beforeClose?.(this);
-    this.dialog.close(returnValue);
-    await waitForAnimations(this.dialog, true);
-    await this.afterClose?.(this);
-    this.open = false;
-    this.#closeRequested = false;
-  }
-  async dismiss() {
-    if (!this.dismissible) return;
-    await this.close();
-  }
-  render() {
-    return html`
-      <dialog class="base" @close=${forwardEvent(this)} @keydown=${this.#handleKeyDown}>
-        <div class="inner">
-          <odx-stack class="header" align="center" horizontal>
-            <slot name="header"></slot>
-            ${when(
-      this.dismissible,
-      () => html`<odx-icon-button class="dismiss-action" icon="core::close" variant="ghost" @click=${this.dismiss} .autofocus=${true}></odx-icon-button>`
-    )}
-          </odx-stack>
-          <div class="content">
-            <slot></slot>
-          </div>
-          <odx-stack class="footer" align="center" justify="end" horizontal>
-            <slot name="footer"></slot>
-          </odx-stack>
-        </div>
-      </dialog>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("open")) {
-      this.#handleOpenChange(props.get("open"));
-    }
-  }
-  #handleOpenChange(previousValue) {
-    if (Boolean(previousValue) === this.open) return;
-    if (this.open) {
-      this.show();
-    } else {
-      this.close();
-    }
-  }
-  #handleKeyDown;
-  #handleClick;
-};
-__decorateClass([
-  query("dialog", true)
-], _OdxModal.prototype, "dialog", 2);
-__decorateClass([
-  query(".inner", true)
-], _OdxModal.prototype, "modalContainer", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "backdrop-disabled" })
-], _OdxModal.prototype, "backdropDisabled", 2);
-__decorateClass([
-  property({ type: Boolean })
-], _OdxModal.prototype, "dismissible", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxModal.prototype, "open", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxModal.prototype, "layout", 2);
-let OdxModal = _OdxModal;
-
-const styles$z = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: calc(var(--odx-size-37));font-size:var(--odx-typography-font-size-5)}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@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);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-50));font-size:var(--odx-typography-font-size-5)}}}";
-
-const NavigationItemSize = pick(Size, ["MD", "LG"]);
-const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
-  constructor() {
-    super(...arguments);
-    this.size = NavigationItemSize.MD;
-    this.selected = false;
-  }
-  static {
-    customElement("odx-navigation-item", styles$z)(_OdxNavigationItem);
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selected")) {
-      this.ariaCurrent = this.selected ? "page" : null;
-    }
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxNavigationItem.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxNavigationItem.prototype, "selected", 2);
-let OdxNavigationItem = _OdxNavigationItem;
-
-const styles$y = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{margin-inline-end:auto}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
-
-class OdxOption extends OptionControl {
-  static {
-    customElement("odx-option", styles$y)(OdxOption);
-  }
-  render() {
-    return html`
-      ${when(
-      this.type === "checkbox",
-      () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
-      () => html`<slot name="prefix"></slot>`
-    )}
-      <div class="label">
-        <slot></slot>
-      </div>
-      <slot name="suffix"></slot>
-    `;
-  }
-}
-
-const styles$x = ":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;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:100%;min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}: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)}";
-
-const PageAlignment = { CENTER: "center" };
-const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
-const _OdxPage = class _OdxPage extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.layout = PageLayout.AUTO;
-  }
-  static {
-    customElement("odx-page", styles$x)(_OdxPage);
-  }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    SharedResizeObserver.observe(this, () => {
-      this.style.setProperty("--header-size", toPx(this.headerElement.offsetHeight));
-      this.style.setProperty("--subheader-size", toPx(this.subheaderElement.offsetHeight));
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    SharedResizeObserver.unobserve(this);
-  }
-  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>
-      <div class="footer" part="footer">
-        <slot name="footer"></slot>
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  query(".header", true)
-], _OdxPage.prototype, "headerElement", 2);
-__decorateClass([
-  query(".subheader", true)
-], _OdxPage.prototype, "subheaderElement", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxPage.prototype, "alignment", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxPage.prototype, "layout", 2);
-let OdxPage = _OdxPage;
-
-const styles$w = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
-
-class OdxPageLayout extends CustomElement {
-  static {
-    customElement("odx-page-layout", styles$w)(OdxPageLayout);
-  }
-  render() {
-    return html`
-      ${optionalSlot(this, "navigation")}
-      ${optionalSlot(this, "header")}
-      <div class="content">
-        <slot></slot>
-      </div>
-      ${optionalSlot(this, "sidebar")}
-      ${optionalSlot(this, "footer")}
-    `;
-  }
-}
-
-const styles$v = ":host{display:block}[odx-button]::part(base){outline-offset:0}";
-
-setTranslation("en", {
-  odx: {
-    pagination: {
-      "pageCount.default": "Page {{odx.pagination.pageCount.compact}}",
-      "pageCount.compact": "{{ page }} of {{ totalPages }}",
-      summary: "{{ pageStart }} to {{ pageEnd }} of {{ totalItems }}"
-    }
-  }
-});
-const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.page = 0;
-    this.pageSize = 10;
-    this.totalItems = 0;
-  }
-  static {
-    customElement("odx-pagination", styles$v)(_OdxPagination);
-  }
-  get paginationContext() {
-    return {
-      pageStart: Math.min(Math.max(0, this.page * this.pageSize), this.totalItems),
-      pageEnd: Math.min(Math.max(0, (this.page + 1) * this.pageSize - 1), this.totalItems),
-      page: Math.min(Math.max(1, this.page), this.totalPages),
-      totalPages: this.totalPages,
-      totalItems: this.totalItems,
-      hasPreviousPage: this.page > 0,
-      hasNextPage: this.page < this.totalPages
-    };
-  }
-  get totalPages() {
-    if (this.totalItems === 0) return 1;
-    return Math.ceil(this.totalItems / this.pageSize);
-  }
-  previousPage() {
-    this.page = Math.max(this.page - 1, 0);
-  }
-  nextPage() {
-    this.page = Math.min(this.page + 1, this.totalPages - 1);
-  }
-  firstPage() {
-    this.page = 0;
-  }
-  lastPage() {
-    this.page = this.totalPages - 1;
-  }
-  render() {
-    const { hasPreviousPage, hasNextPage } = this.paginationContext;
-    return html`
-      <odx-stack align="center" gap="xs" justify="end" horizontal>
-        <span>${this.t("odx.pagination.summary", this.paginationContext)}</span>
-        <odx-button-group ?disabled=${!hasPreviousPage}>
-          <odx-icon-button  icon="core::chevron-left-end" @click=${() => this.firstPage()} variant="ghost"></odx-icon-button>
-          <odx-icon-button  icon="core::chevron-left" @click=${() => this.previousPage()} variant="ghost"></odx-icon-button>
-        </odx-button-group>
-        <span>${this.t("odx.pagination.pageCount.default", this.paginationContext)}</span>
-        <odx-button-group ?disabled=${!hasNextPage}>
-          <odx-icon-button icon="core::chevron-right"  @click=${() => this.nextPage()} variant="ghost"></odx-icon-button>
-          <odx-icon-button icon="core::chevron-right-end"  @click=${() => this.lastPage()} variant="ghost"></odx-icon-button>
-        </odx-button-group>
-      </odx-stack>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("page") && props.get("page") !== this.page) {
-      this.emit("change", { detail: this.paginationContext });
-    }
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], _OdxPagination.prototype, "page", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxPagination.prototype, "pageSize", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxPagination.prototype, "totalItems", 2);
-let OdxPagination = _OdxPagination;
-
-const styles$u = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background)}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_popover-outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--odx-size-75);color:var(--_popover-color-foreground)}[part~=arrow]{position:absolute;z-index:3;background-color:inherit;block-size:var(--_popover-arrow-size);inline-size:var(--_popover-arrow-size)}";
-
-const _OdxPopover = class _OdxPopover extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.showArrow = false;
-  }
-  static {
-    customElement("odx-popover", styles$u)(_OdxPopover);
-  }
-  render() {
-    return html`
-      <div part="base">
-        <div part="content">
-          <slot></slot>
-        </div>
-      </div>
-      ${when(this.showArrow, () => html`<div part="arrow"></div>`)}
-    `;
-  }
-};
-__decorateClass([
-  query('[part="arrow"]')
-], _OdxPopover.prototype, "arrowElement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxPopover.prototype, "showArrow", 2);
-let OdxPopover = _OdxPopover;
-
-const styles$t = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part=label]{flex:1;margin-block:calc(-1 * var(--odx-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-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)}}";
-
-const ProgressBarVariant = {
-  ...pick(Variant, ["NEUTRAL", "DANGER", "SUCCESS"]),
-  CONFIRM: "confirm"
-};
-const _OdxProgressBar = class _OdxProgressBar extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.min = 0;
-    this.max = 100;
-    this.value = 0;
-    this.condensed = false;
-    this.hideValue = false;
-    this.indeterminate = false;
-    this.variant = ProgressBarVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-progress-bar", styles$t)(_OdxProgressBar);
-  }
-  get valuePercentage() {
-    return Math.min(Math.max(this.min, round(this.value - this.min / this.max - this.min, 2)), 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" odxPreventTextOverflow>${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="--_value-percentage: ${this.valuePercentage}"
-        >
-        <div class="indicator"></div>
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  queryAssignedElements()
-], _OdxProgressBar.prototype, "content", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxProgressBar.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxProgressBar.prototype, "max", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxProgressBar.prototype, "value", 2);
-__decorateClass([
-  property()
-], _OdxProgressBar.prototype, "label", 2);
-__decorateClass([
-  property()
-], _OdxProgressBar.prototype, "valueText", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxProgressBar.prototype, "condensed", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxProgressBar.prototype, "hideValue", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxProgressBar.prototype, "indeterminate", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxProgressBar.prototype, "variant", 2);
-let OdxProgressBar = _OdxProgressBar;
-
-const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}}";
-
-class OdxRadioButton extends CheckboxFormControl {
-  static {
-    customElement("odx-radio-button", styles$s)(OdxRadioButton);
-  }
-  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);
-  }
-}
-
-const styles$r = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-size-75);inline-size:auto}}";
-
-const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
-const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
-  constructor() {
-    super(...arguments);
-    this.layout = RadioGroupLayout.VERTICAL;
-  }
-  static {
-    customElement("odx-radio-group", styles$r)(_OdxRadioGroup);
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxRadioGroup.prototype, "layout", 2);
-let OdxRadioGroup = _OdxRadioGroup;
-
-const styles$q = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;gap:var(--odx-size-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;padding-block:var(--odx-size-150);padding-inline:var(--odx-size-50);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--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-400);.toggle-icon{--rotate: 180deg}}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
-
-setTranslation("en", {
-  odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
-});
-setTranslation("de", {
-  /* cspell:disable-next-line */
-  odx: { railNavigation: { controlText: { collapsed: "Navigation ausklappen", expanded: "Navigation einklappen" } } }
-});
-const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.collapsed = false;
-    this.#handleSlotChange = () => {
-      for (const item of this.navigationItems) {
-        item.size = NavigationItemSize.LG;
-      }
-    };
-    this.#handleControlClick = () => {
-      this.collapsed = !this.collapsed;
-    };
-  }
-  static {
-    customElement("odx-rail-navigation", styles$q)(_OdxRailNavigation);
-  }
-  render() {
-    return html`
-      <slot @slotchange=${this.#handleSlotChange}></slot>
-      <odx-navigation-item class="toggle-control" size="lg" @click=${this.#handleControlClick} odxPreventTextOverflow>
-        <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
-        <odx-visually-hidden>
-          ${this.t(`odx.railNavigation.controlText.${this.collapsed ? "collapsed" : "expanded"}`)}
-        </odx-visually-hidden>
-      </odx-navigation-item>
-    `;
-  }
-  getItems() {
-    return this.navigationItems;
-  }
-  #handleSlotChange;
-  #handleControlClick;
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxNavigationItem.tagName, flatten: true })
-], _OdxRailNavigation.prototype, "navigationItems", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxRailNavigation.prototype, "collapsed", 2);
-let OdxRailNavigation = _OdxRailNavigation;
-
-class SearchEvent extends CustomEvent {
-  constructor(value, rawValue) {
-    super("search", { detail: { rawValue, value } });
-  }
-}
-
-const styles$p = ":host{--odx-search-max-inline-size: 35em;display:block;max-inline-size:var(--odx-search-max-inline-size)}.input{inline-size:100%}";
-
-const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
-const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.#search = this.search.bind(this);
-    this.behavior = SearchBarBehavior.SUBMIT;
-    this.placeholder = "";
-    this.readonly = false;
-    this.#handleSearch = (event) => {
-      event.preventDefault();
-      this.search(this.#inputValue);
-    };
-    this.#handleInput = (event) => {
-      if (this.behavior !== SearchBarBehavior.INSTANT) return;
-      event.preventDefault();
-      this.#search(this.#inputValue);
-    };
-    this.#handleClear = (event) => {
-      forwardEvent(this)(event);
-      if (event.defaultPrevented) return;
-      this.search("");
-    };
-  }
-  static {
-    customElement("odx-search-bar", styles$p)(_OdxSearchBar);
-  }
-  #value;
-  #search;
-  get #inputValue() {
-    return (this.inputElement.value ?? "").replace(/\s\s+/g, " ").trim();
-  }
-  get value() {
-    return this.#value ?? "";
-  }
-  search(value, options) {
-    if (this.#value === value && options?.forceUpdate !== true) return;
-    this.#updateValue(value, options?.updateInput);
-    if (options?.emitEvent === false) return;
-    this.dispatchEvent(new SearchEvent(value, this.inputElement.value));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "presentation";
-  }
-  updated(props) {
-    if (props.has("debounceTime")) {
-      this.#search = typeof this.debounceTime === "number" ? debounce(this.search.bind(this), this.debounceTime) : this.search.bind(this);
-    }
-  }
-  render() {
-    return html`
-      <odx-input
-        clearable
-        class="input"
-        spellcheck="false"
-        autocomplete="off"
-        placeholder=${this.placeholder}
-        type="search"
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        @clear=${this.#handleClear}
-        @input=${this.#handleInput}
-        @search=${this.#handleSearch}
-      >
-        <odx-icon name="core::search" slot="prefix"></odx-icon>
-      </odx-input>
-    `;
-  }
-  #handleSearch;
-  #handleInput;
-  #handleClear;
-  #updateValue(value, updateInput = false) {
-    this.#value = value;
-    if (!updateInput) return;
-    this.inputElement.value = value;
-  }
-};
-__decorateClass([
-  query(".input", true)
-], _OdxSearchBar.prototype, "inputElement", 2);
-__decorateClass([
-  property()
-], _OdxSearchBar.prototype, "behavior", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxSearchBar.prototype, "debounceTime", 2);
-__decorateClass([
-  property()
-], _OdxSearchBar.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: Boolean, useDefault: true })
-], _OdxSearchBar.prototype, "readonly", 2);
-let OdxSearchBar = _OdxSearchBar;
-
-const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:100%;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
-
-const _OdxSelect = class _OdxSelect extends ListboxFormControl {
-  constructor() {
-    super();
-    this.maxVisibleSelectedOptions = 2;
-    this.#handleSlotChange = () => {
-      super.handleSlotChange();
-      this.updateOptions((option) => {
-        option.type = this.multiple ? "checkbox" : null;
-      });
-    };
-    this.#handleBlur = () => {
-      this.hideDropdown();
-    };
-    this.#handleToggleAll = (event) => {
-      if (this.disabled || this.readonly) return;
-      event.stopPropagation();
-      event.preventDefault();
-      this.value = this.value.length === this.options.length ? [] : this.options.map((option) => option.value);
-    };
-    this.#handleClear = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.emit("clear")) return;
-      this.clear();
-    };
-    this.#handleSelect = () => {
-      if (this.autoSelect || this.multiple) return;
-      this.hideDropdown();
-    };
-    if (!isServer) {
-      this.addEventListener("select", this.#handleSelect);
-      this.addEventListener("blur", this.#handleBlur);
-    }
-  }
-  static {
-    customElement("odx-select", styles$o)(_OdxSelect);
-  }
-  clear() {
-    this.value = this.multiple ? [] : "";
-  }
-  isDropdownOpen() {
-    return this.dropdown.open;
-  }
-  showDropdown() {
-    this.dropdown.showPopover();
-  }
-  hideDropdown() {
-    this.dropdown.hidePopover();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "combobox";
-  }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this.dropdown.mountPopover(this.shadowRoot?.querySelector(".base") ?? null);
-  }
-  canSelect(option) {
-    return (this.autoSelect || this.dropdown.open) && super.canSelect(option);
-  }
-  render() {
-    const allSelected = this.value.length === this.options.length;
-    const dropdownDisabled = this.disabled || this.readonly && (!this.multiple || this.selectedOptions.length === 0);
-    return html`
-      <div class="base" tabindex="0" aria-haspopup="listbox">
-        <div class="value" odxPreventTextOverflow>
-          ${when(
-      this.selectedOptions.length,
-      () => html`${this.selectedOptions.map((option) => option.label).join(", ")}`,
-      () => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
-    )}
-        </div>
-        ${when(
-      this.#isClearable(),
-      () => html`<odx-icon-button icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click=${this.#handleClear}></odx-icon-button>`
-    )}
-        <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
-      </div>
-      <odx-dropdown part="dropdown" role="listbox" ?disabled=${dropdownDisabled} match-reference-width>
-        ${when(
-      !dropdownDisabled && this.multiple,
-      () => html`
-            <odx-option type="checkbox" @click=${this.#handleToggleAll} ?readonly=${this.readonly} ?selected=${allSelected} aria-hidden="true">Toggle all</odx-option>
-          `
-    )}
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-      </odx-dropdown>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("readonly")) {
-      this.updateOptions((option) => {
-        option.readonly = this.readonly;
-      });
-    }
-  }
-  #isClearable() {
-    return !(this.disabled || this.readonly || this.required) && this.selectedOptions.length > 0;
-  }
-  #handleSlotChange;
-  #handleBlur;
-  #handleToggleAll;
-  #handleClear;
-  #handleSelect;
-};
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxSelect.prototype, "options", 2);
-__decorateClass([
-  query(OdxDropdown.tagName, true)
-], _OdxSelect.prototype, "dropdown", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
-let OdxSelect = _OdxSelect;
-
-const styles$n = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--margin-block: var(--odx-size-75);--margin-inline: var(--odx-size-12);display:block;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--margin-block) - .5 * var(--size));margin-inline:var(--margin-inline)}.base{display:flex;align-items:center;text-align:center}.base:before,.base:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--size);content:\"\";pointer-events:none}:host(:not(:empty)){:before{margin-inline-end:var(--odx-size-37)}:after{margin-inline-start:var(--odx-size-37)}}:host([vertical]){margin-block:var(--margin-block);margin-inline:calc(var(--margin-inline) - .5 * var(--size));.base{flex-direction:column}:after,:before{block-size:calc(100% - var(--margin-block) * 2);min-block-size:calc(var(--min-size) / 2);inline-size:var(--size)}}:host(:not([vertical])){:after,:before{min-inline-size:calc(var(--min-size) / 2)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}";
-
-const SeparatorAlign = { START: "start", CENTER: "center", END: "end" };
-const _OdxSeparator = class _OdxSeparator extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.align = SeparatorAlign.CENTER;
-    this.strong = false;
-    this.vertical = false;
-  }
-  static {
-    customElement("odx-separator", styles$n)(_OdxSeparator);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "separator";
-  }
-  render() {
-    return html`<div class="base"><slot></slot></div>`;
-  }
-};
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxSeparator.prototype, "align", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSeparator.prototype, "strong", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSeparator.prototype, "vertical", 2);
-let OdxSeparator = _OdxSeparator;
-
-const styles$m = ":host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-background-disabled-rest);display:block;block-size:var(--_block-size);inline-size:var(--inline-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed) 50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;block-size:100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([strong]){--_color-fill: var(--odx-color-background-disabled-selected)}:host([subtle]) .base{animation:none}";
-
-const SkeletonSize = pick(Size, ["SM", "MD", "LG", "XL"]);
-const SkeletonShape = { NONE: "none", BUTTON: "button", ...pick(Shape, ["CIRCLE", "RECTANGLE"]) };
-const _OdxSkeleton = class _OdxSkeleton extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.strong = false;
-    this.subtle = false;
-    this.shape = SkeletonShape.NONE;
-    this.size = SkeletonSize.MD;
-  }
-  static {
-    customElement("odx-skeleton", styles$m)(_OdxSkeleton);
-  }
-  render() {
-    return html`<div class="base"></div>`;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "strong", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "subtle", 2);
-__decorateClass([
-  property({ type: String, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "shape", 2);
-__decorateClass([
-  property({ type: String, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "size", 2);
-let OdxSkeleton = _OdxSkeleton;
-
-const SliderLabelVisibility = { AUTO: "auto", HIDDEN: "hidden" };
-const SliderTrackVisibility = { AUTO: "auto", HIDDEN: "hidden", VISIBLE: "visible" };
-const sliderContext = {
-  context: n("odx-slider::context"),
-  defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
-};
-
-const styles$l = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-background-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-size-75) var(--odx-size-50);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-300);min-inline-size:120px}:host(:active){cursor:grabbing}:host::part(container){position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}";
-
-const styles$k = "*{box-sizing:border-box;margin:0;padding:0}: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){inset-inline-start:var(--_position)}:host::part(track){inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}:host::part(thumb){display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-primary-rest);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse-static)}: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-50)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-background-accent-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1);opacity:1}:host([disabled]){pointer-events:none}:host([disabled])::part(thumb){--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}";
-
-const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl) {
-  constructor() {
-    super(...arguments);
-    this.context = sliderContext.defaultValue;
-    this.#previousHandle = null;
-    this.#nextHandle = null;
-  }
-  static {
-    customElement("odx-slider-handle", styles$k)(_OdxSliderHandle);
-  }
-  #previousHandle;
-  #nextHandle;
-  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);
-    this.#nextHandle?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    this.value = this.#findClosestValue(this.#getValueFromPosition(event.position));
-    this.focus();
-  }
-  dragStart(event) {
-    super.dragStart?.(event);
-    this.#updatePosition(this.#getValueFromPosition(event.position));
-  }
-  dragMove(event) {
-    super.dragMove?.(event);
-    const value = this.#getValueFromPosition(event.position);
-    const closestValue = this.#findClosestValue(value);
-    if (this.value !== closestValue) {
-      this.value = closestValue;
-    }
-    this.#updatePosition(value);
-  }
-  afterDragEnd(event) {
-    super.afterDragEnd?.(event);
-    this.#nextHandle?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    this.#updatePosition(this.#findClosestValue(this.value));
-  }
-  getDistance(containerElement, event) {
-    const rect = containerElement.getBoundingClientRect();
-    const relativePosition = round((event.x - rect.x) / rect.width) * 100;
-    return Math.abs(this.value - this.#calculateValue(relativePosition));
-  }
-  getValueText() {
-    return this.context.unit ? `${this.value}${this.context.unit}` : super.getValueText();
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("value")) {
-      this.value = this.#limitValue(this.value);
-      this.ariaValueNow = String(this.value);
-    }
-    if (props.has("disabled")) {
-      this.dragDisabled = this.disabled;
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (this.isDragActive) return;
-    this.#previousHandle = this.#findPreviousHandle();
-    this.#nextHandle = this.#findNextHandle();
-    this.#updatePosition(this.#findClosestValue(this.value));
-  }
-  render() {
-    const label = this.getValueText() || this.value;
-    return html`
-      ${when(this.#isTrackVisible(), () => html`<div part="track with-motion"></div>`)}
-      <div part="thumb with-motion" tabindex="0"></div>
-      ${when(this.#isLabelVisible(), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
-    `;
-  }
-  #isLabelVisible() {
-    return this.context.labelVisibility !== SliderLabelVisibility.HIDDEN;
-  }
-  #isTrackVisible() {
-    if (this.trackVisibility === SliderTrackVisibility.VISIBLE) {
-      return true;
-    }
-    if (this.trackVisibility === SliderTrackVisibility.HIDDEN) {
-      return false;
-    }
-    return !!this.#previousHandle || !(this.#previousHandle || this.#nextHandle);
-  }
-  #findClosestValue(value) {
-    const closestValue = value - value % this.context.step;
-    const isNextValue = value - closestValue > this.context.step / 2;
-    return this.#limitValue(closestValue + (isNextValue ? this.context.step : 0));
-  }
-  #updatePosition(value) {
-    const valuePercentage = `${round(Math.min(Math.max(0, (value - this.context.min) / this.context.range), 1) * 100, 3)}%`;
-    this.style.setProperty("--_position", valuePercentage);
-    this.#nextHandle?.style.setProperty("--_previous-position", valuePercentage);
-    this.#previousHandle?.style.setProperty("--_next-position", valuePercentage);
-  }
-  #getValueFromPosition(position) {
-    return this.#limitValue(this.#calculateValue(position.x));
-  }
-  #calculateValue(relativePosition) {
-    return Math.min(Math.max(0, relativePosition / 100), 1) * this.context.range + this.context.min;
-  }
-  #limitValue(value) {
-    const startLimit = this.#previousHandle ? Math.max(this.#previousHandle.value, this.min - this.minRange) + this.minRange : this.min;
-    const endLimit = this.#nextHandle ? Math.min(this.#nextHandle.value, this.max + this.minRange) - this.minRange : this.max;
-    return Math.min(Math.max(startLimit, value), endLimit);
-  }
-  #findPreviousHandle() {
-    let sibling = this.previousElementSibling;
-    while (sibling) {
-      if (sibling instanceof _OdxSliderHandle) return sibling;
-      sibling = sibling.previousElementSibling;
-    }
-    return null;
-  }
-  #findNextHandle() {
-    let sibling = this.nextElementSibling;
-    while (sibling) {
-      if (sibling instanceof _OdxSliderHandle) return sibling;
-      sibling = sibling.nextElementSibling;
-    }
-    return null;
-  }
-};
-__decorateClass([
-  c({ context: sliderContext.context, subscribe: true })
-], _OdxSliderHandle.prototype, "context", 2);
-__decorateClass([
-  property()
-], _OdxSliderHandle.prototype, "trackVisibility", 2);
-let OdxSliderHandle = _OdxSliderHandle;
-
-const _OdxSlider = class _OdxSlider extends CustomElement {
-  constructor() {
-    super();
-    this.dragController = new DragController(this, {
-      getDraggableElements: () => Array.from(this.querySelectorAll(OdxSliderHandle.tagName)),
-      getContainer: () => this.container
-    });
-    this.context = sliderContext.defaultValue;
-    this.#handleKeyboardEvent = (event) => {
-      const key = getKeyInfo(event);
-      const target = event.target;
-      if (target.localName !== OdxSliderHandle.tagName || key.tab || key.backTab || target.disabled) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (key.left || key.down) {
-        target.value -= this.step;
-      } else if (key.right || key.up) {
-        target.value += this.step;
-      } else if (key.start) {
-        target.value = this.context.min;
-      } else if (key.end) {
-        target.value = this.context.max;
-      }
-    };
-    this.#handleSlotChange = () => {
-      const elements = this.dragController.draggableElements;
-      const min = elements.reduce((min2, element) => Math.min(min2, element.min), Number.POSITIVE_INFINITY);
-      const max = elements.reduce((max2, element) => Math.max(max2, element.max ?? 0), Number.NEGATIVE_INFINITY);
-      this.context = { ...this.context, min, max, range: Math.abs(max - min) };
-    };
-    if (!isServer) {
-      this.addEventListener("keydown", this.#handleKeyboardEvent);
-    }
-  }
-  static {
-    customElement("odx-slider", styles$l)(_OdxSlider);
-  }
-  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=${this.#handleSlotChange}></slot>
-        <slot name="marks"></slot>
-      </div>
-    `;
-  }
-  #handleKeyboardEvent;
-  #handleSlotChange;
-};
-__decorateClass([
-  e$1({ context: sliderContext.context })
-], _OdxSlider.prototype, "context", 2);
-__decorateClass([
-  query('[part="container"]', true)
-], _OdxSlider.prototype, "container", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxSlider.prototype, "step", 1);
-__decorateClass([
-  property({ type: Number })
-], _OdxSlider.prototype, "minRange", 1);
-__decorateClass([
-  property()
-], _OdxSlider.prototype, "labelVisibility", 1);
-__decorateClass([
-  property()
-], _OdxSlider.prototype, "unit", 1);
-let OdxSlider = _OdxSlider;
-
-const styles$j = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-color-background-brand));--_mark-tick-block-size: var(--odx-size-37);--_mark-tick-inline-size: var(--odx-size-12);display:flex;position:absolute;inset:0;flex-direction:row;align-items:center;z-index:0;pointer-events:none}[part~=mark]{position:relative;flex:1 0 auto}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));background-color:var(--_mark-color);width:2px;height:var(--_mark-tick-block-size)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{position:absolute;inset-block-start:0;transform:translate(-50%) translateY(var(--odx-size-100));text-align:center;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}";
-
-const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.context = sliderContext.defaultValue;
-    this.showLabels = false;
-  }
-  static {
-    customElement("odx-slider-marks", styles$j)(_OdxSliderMarks);
-  }
-  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`
-      ${marks.map((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" strong>${value}</odx-text>` : nothing;
-    return html`
-      <div part="mark" ?last=${last}>
-        <span part="mark-tick"></span>
-        ${label}
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  c({ context: sliderContext.context, subscribe: true })
-], _OdxSliderMarks.prototype, "context", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxSliderMarks.prototype, "step", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSliderMarks.prototype, "showLabels", 2);
-let OdxSliderMarks = _OdxSliderMarks;
-
-const styles$i = ":host{--gap-offset: 0;--size: 0;display:block;margin:calc(-1 * var(--gap-offset)) 0;block-size:var(--size);inline-size:100%}:host([dynamic]){flex:1 1 auto;block-size:100%;max-block-size:var(--size)}:host([horizontal]){margin:0 calc(-1 * var(--gap-offset));block-size:100%;inline-size:var(--size)}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){flex:1 1 var(--size);min-block-size:var(--size)}:host([fill][horizontal]){flex:1 1 var(--size);min-inline-size:var(--size)}:host([fill][dynamic]){flex:1 1 auto;min-block-size:auto;max-block-size:100%;min-inline-size:auto}";
-
-const _OdxSpacer = class _OdxSpacer extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.horizontal = false;
-    this.dynamic = false;
-    this.fill = false;
-  }
-  static {
-    customElement("odx-spacer", styles$i)(_OdxSpacer);
-  }
-  render() {
-    return "";
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSpacer.prototype, "horizontal", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSpacer.prototype, "dynamic", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSpacer.prototype, "fill", 2);
-let OdxSpacer = _OdxSpacer;
-
-const styles$h = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;outline:var(--odx-focus-ring-outline);border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}::slotted(odx-option){flex:1 1 auto;justify-content:center}::slotted(odx-option[hidden]){display:none}";
-
-const _OdxSpinbox = class _OdxSpinbox extends FormControl {
-  constructor() {
-    super();
-    this.selectedIndex = 0;
-    this.value = "";
-    this.#handleKeyDown = (event) => {
-      if (this.disabled || this.readonly || event.composedPath()[0] !== this) return;
-      const key = getKeyInfo(event);
-      if (key.left) {
-        this.previous();
-      } else if (key.right) {
-        this.next();
-      } else if (key.start) {
-        this.selectedIndex = 0;
-      } else if (key.end) {
-        this.selectedIndex = this.options.length - 1;
-      }
-    };
-    if (!isServer) {
-      this.addEventListener("keydown", this.#handleKeyDown);
-    }
-  }
-  static {
-    customElement("odx-spinbox", styles$h)(_OdxSpinbox);
-  }
-  static {
-    this.shadowRootOptions = {
-      ...FormControl.shadowRootOptions,
-      delegatesFocus: false
-    };
-  }
-  clear() {
-    this.value = "";
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selectedIndex")) {
-      const option = this.options[this.selectedIndex];
-      if (option) {
-        this.value = option.value;
-        this.emit("change", { detail: { index: this.selectedIndex, option } });
-      }
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("disabled") || props.has("selectedIndex")) {
-      this.options.forEach((option, index) => {
-        option.toggleAttribute("hidden", this.selectedIndex !== index);
-        option.disabled = this.disabled;
-      });
-    }
-  }
-  previous() {
-    if (this.disabled || this.readonly) return;
-    this.selectedIndex = (this.selectedIndex - 1 + this.options.length) % this.options.length;
-  }
-  next() {
-    if (this.disabled || this.readonly) return;
-    this.selectedIndex = (this.selectedIndex + 1) % this.options.length;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.tabIndex = 0;
-  }
-  render() {
-    return html`
-      <odx-icon-button icon="core::chevron-left" variant="ghost" ?disabled=${this.disabled} @click=${() => this.previous()}></odx-icon-button>
-      <slot></slot>
-      <odx-icon-button icon="core::chevron-right" variant="ghost" ?disabled=${this.disabled} @click=${() => this.next()}></odx-icon-button>
-    `;
-  }
-  #handleKeyDown;
-};
-__decorateClass([
-  queryAssignedElements({ selector: '[role="option"]', flatten: true })
-], _OdxSpinbox.prototype, "options", 2);
-__decorateClass([
-  property({ type: Number, attribute: "selected-index" })
-], _OdxSpinbox.prototype, "selectedIndex", 2);
-__decorateClass([
-  property()
-], _OdxSpinbox.prototype, "value", 2);
-let OdxSpinbox = _OdxSpinbox;
-
-const styles$g = ":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start}:host([horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host,:host([gap=\"md\"]){gap:var(--odx-spacing-75)}:host([gap=\"none\"]){gap:0}:host([gap=\"xs\"]){gap:var(--odx-spacing-25)}:host([gap=\"sm\"]){gap:var(--odx-spacing-50)}:host([gap=\"lg\"]){gap:var(--odx-spacing-150)}:host([gap=\"xl\"]){gap:var(--odx-size-225)}:host([align=\"start\"]){align-items:flex-start}:host([align=\"center\"]){align-items:center}:host([align=\"end\"]){align-items:end}:host([justify=\"start\"]){justify-content:flex-start}:host([justify=\"end\"]){justify-content:flex-end}:host([justify=\"center\"]){justify-content:center}:host([justify=\"space-between\"]){justify-content:space-between}:host([justify=\"space-around\"]){justify-content:space-around}:host([justify=\"space-evenly\"]){justify-content:space-evenly}";
-
-const StackAlign = {
-  START: "start",
-  CENTER: "center",
-  END: "end"
-};
-const StackGap = {
-  NONE: "none",
-  ...pick(Size, ["XS", "SM", "MD", "LG", "XL"])
-};
-const StackJustify = {
-  START: "start",
-  END: "end",
-  CENTER: "center",
-  SPACE_BETWEEN: "space-between",
-  SPACE_AROUND: "space-around",
-  SPACE_EVENLY: "space-evenly"
-};
-const _OdxStack = class _OdxStack extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.horizontal = false;
-    this.wrap = false;
-  }
-  static {
-    customElement("odx-stack", styles$g)(_OdxStack);
-  }
-};
-__decorateClass([
-  property({ reflect: true })
-], _OdxStack.prototype, "align", 2);
-__decorateClass([
-  property({ reflect: true })
-], _OdxStack.prototype, "justify", 2);
-__decorateClass([
-  property({ reflect: true })
-], _OdxStack.prototype, "gap", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxStack.prototype, "horizontal", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxStack.prototype, "wrap", 2);
-let OdxStack = _OdxStack;
-
-const styles$f = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);font-weight:var(--odx-typography-font-weight-medium)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
-
-const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
-const _OdxStatus = class _OdxStatus extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.pulse = false;
-    this.variant = StatusVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-status", styles$f)(_OdxStatus);
-  }
-  render() {
-    return html`
-      <odx-badge compact ?pulse=${this.pulse} variant=${optionalAttr(this.variant)}></odx-badge>
-      <slot></slot>
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxStatus.prototype, "pulse", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxStatus.prototype, "variant", 2);
-let OdxStatus = _OdxStatus;
-
-const styles$e = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}}";
-
-class OdxSwitch extends CheckboxFormControl {
-  static {
-    customElement("odx-switch", styles$e)(OdxSwitch);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "switch";
-  }
-  render() {
-    return html`
-      <div class="indicator">
-        <div class="track"></div>
-        <div class="thumb">
-          <odx-icon name=${this.checked ? "core::check" : "core::close"}></odx-icon>
-        </div>
-      </div>
-      <div class="content">
-        <div class="label">
-          <slot></slot>
-        </div>
-        <div class="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-const styles$d = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-background-level-1)}";
-
-const styles$c = ":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)}";
-
-const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.checked = false;
-    this.indeterminate = false;
-    this.#handleChange = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.checked = event.target.checked;
-      this.indeterminate = false;
-      this.emit("change");
-    };
-  }
-  static {
-    customElement("odx-table-checkbox-cell", styles$c)(_OdxTableCheckboxCell);
-  }
-  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=${this.#handleChange}></odx-checkbox>`;
-  }
-  #handleChange;
-};
-__decorateClass([
-  query(".checkbox")
-], _OdxTableCheckboxCell.prototype, "control", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxTableCheckboxCell.prototype, "checked", 2);
-__decorateClass([
-  property({ type: Boolean })
-], _OdxTableCheckboxCell.prototype, "indeterminate", 2);
-let OdxTableCheckboxCell = _OdxTableCheckboxCell;
-
-const styles$b = ":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)}";
-
-const _OdxTableHeader = class _OdxTableHeader extends CheckboxFormControl {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-  }
-  static {
-    customElement("odx-table-header", styles$b)(_OdxTableHeader);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "row";
-  }
-  render() {
-    return html` <slot @change=${this.#handleChange}></slot>`;
-  }
-  async #handleChange(event) {
-    if (event.target.localName !== OdxTableCheckboxCell.tagName) return;
-    this.selected = event.target.checked;
-    await 0;
-    if (!event.defaultPrevented) return;
-    this.selected = !this.selected;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxTableHeader.prototype, "selected", 2);
-let OdxTableHeader = _OdxTableHeader;
-
-const styles$a = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);background-color:var(--_color-fill);cursor:pointer;padding-inline:var(--odx-size-75);inline-size:100%}:host(:not(:last-of-type)){border-color:var(--odx-color-stroke-neutral-subtle)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-size-75);pointer-events:none}";
-
-const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-    this.selectable = true;
-    this.value = "";
-    this.#handleClick = (event) => {
-      const isCheckboxCell = event.composedPath().some((node) => node.localName === OdxTableCheckboxCell.tagName);
-      if (isCheckboxCell) return;
-      const [checkboxCell] = this.checkboxCells;
-      checkboxCell?.click();
-    };
-    this.#handleChange = async (event) => {
-      this.selected = event.target.checked;
-      await 0;
-      if (!event.defaultPrevented) return;
-      this.selected = !this.selected;
-    };
-    this.#handleSlotchange = ({ target }) => {
-      this.selectable = target.assignedElements().some((element) => element.localName === OdxTableCheckboxCell.tagName);
-    };
-  }
-  static {
-    customElement("odx-table-row", styles$a)(_OdxTableRow);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "row";
-  }
-  render() {
-    return html`
-      <slot @change=${this.#handleChange} @slotchange=${this.#handleSlotchange}></slot>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selected")) {
-      this.#handleSelectedChange();
-    }
-    if (props.has("selectable")) {
-      this.#handleSelectableChange();
-    }
-  }
-  async #handleSelectedChange() {
-    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() {
-    if (this.selectable) {
-      this.addEventListener("click", this.#handleClick);
-    } else {
-      this.removeEventListener("click", this.#handleClick);
-    }
-  }
-  #handleClick;
-  #handleChange;
-  #handleSlotchange;
-};
-__decorateClass([
-  queryAssignedElements({ selector: OdxTableCheckboxCell.tagName, flatten: true })
-], _OdxTableRow.prototype, "checkboxCells", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxTableRow.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxTableRow.prototype, "selectable", 2);
-__decorateClass([
-  property({ type: String })
-], _OdxTableRow.prototype, "value", 2);
-let OdxTableRow = _OdxTableRow;
-
-const _OdxTable = class _OdxTable extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.#selectedSet = /* @__PURE__ */ new Set();
-    this.mode = "selection";
-    this.selected = [];
-    this.items = [];
-    this.#handleChange = (event) => {
-      if (event.target.localName !== OdxTableCheckboxCell.tagName) return;
-      event.stopPropagation();
-      const rowElement = event.target.parentElement;
-      if (!rowElement) return;
-      const isSelected = event.target.checked;
-      if (rowElement.localName === OdxTableHeader.tagName) {
-        if (event.target.checked) {
-          this.#selectAllRows();
-        } else {
-          this.#deselectAllRows();
-        }
-      } else if (isSelected) {
-        this.#selectedSet.add(rowElement.value);
-      } else {
-        this.#selectedSet.delete(rowElement.value);
-      }
-    };
-  }
-  static {
-    customElement("odx-table", styles$d)(_OdxTable);
-  }
-  #selectedSet;
-  get headerElements() {
-    return Array.from(this.querySelectorAll(OdxTableHeader.tagName));
-  }
-  get rowElements() {
-    return Array.from(this.querySelectorAll(OdxTableRow.tagName));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "grid";
-  }
-  render() {
-    return html`<slot @change=${this.#handleChange}></slot>`;
-  }
-  #selectAllRows() {
-    for (const row of this.rowElements) {
-      row.selected = true;
-      this.#selectedSet.add(row.value);
-    }
-  }
-  #deselectAllRows() {
-    this.#selectedSet.clear();
-    for (const row of this.rowElements) {
-      if (!row.selected) continue;
-      row.selected = false;
-    }
-  }
-  #handleChange;
-};
-__decorateClass([
-  property()
-], _OdxTable.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Array })
-], _OdxTable.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Array })
-], _OdxTable.prototype, "items", 2);
-let OdxTable = _OdxTable;
-
-const tableContext = {
-  context: n("odx-table::context"),
-  defaultValue: { hasCheckboxes: true }
-};
-
-const styles$9 = ":host{display:block;flex-grow:1}";
-
-class OdxTableBody extends CustomElement {
-  static {
-    customElement("odx-table-body", styles$9)(OdxTableBody);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "rowgroup";
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-const styles$8 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}";
-
-class OdxTableCell extends CustomElement {
-  static {
-    customElement("odx-table-cell", styles$8)(OdxTableCell);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "gridcell";
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-const styles$7 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-225)}";
-
-const _OdxTableHeaderCell = class _OdxTableHeaderCell extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.sortable = false;
-  }
-  static {
-    customElement("odx-table-header-cell", styles$7)(_OdxTableHeaderCell);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "columnheader";
-  }
-  render() {
-    return html`
-      <odx-title size="xs">
-        <slot></slot> (${this.sortable ? "sortable" : "not sortable"})
-      </odx-title>
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean })
-], _OdxTableHeaderCell.prototype, "sortable", 2);
-let OdxTableHeaderCell = _OdxTableHeaderCell;
-
-const styles$6 = "@layer base{:host{display:block;text-decoration:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([subtle]){color:var(--odx-color-foreground-rest-subtle)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
-
-const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
-const TextVariant = pick(Variant, ["NEUTRAL", "ACCENT", "SUCCESS", "DANGER"]);
-const _OdxText = class _OdxText extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.strong = false;
-    this.subtle = false;
-    this.inline = false;
-    this.variant = TextVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-text", styles$6)(_OdxText);
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxText.prototype, "strong", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxText.prototype, "subtle", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxText.prototype, "inline", 2);
-__decorateClass([
-  property({ reflect: true })
-], _OdxText.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxText.prototype, "variant", 2);
-let OdxText = _OdxText;
-
-const styles$5 = ":host{display:inline-block}";
-
-const ToastVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
-const _OdxToast = class _OdxToast extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.variant = ToastVariant.NEUTRAL;
-  }
-  static {
-    customElement("odx-toast", styles$5)(_OdxToast);
-  }
-  render() {
-    return html`
-      <odx-inline-message icon=${optionalAttr(this.icon)} variant=${this.variant}>
-        <slot name="title"></slot>
-        <slot></slot>
-      </odx-inline-message>
-    `;
-  }
-};
-__decorateClass([
-  property()
-], _OdxToast.prototype, "icon", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxToast.prototype, "variant", 2);
-let OdxToast = _OdxToast;
-
-const styles$4 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin))}::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:active){--_color-background: var(--odx-color-background-control-pressed);--_color-stroke: var(--odx-color-stroke-control-pressed)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([readonly][checked]),:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([checked]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}";
-
-class OdxToggleButton extends CheckboxFormControl {
-  static {
-    customElement("odx-toggle-button", styles$4)(OdxToggleButton);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "button";
-  }
-  updateAriaAttributes() {
-    this.ariaPressed = toAriaBooleanAttribute(this.checked, false);
-  }
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-}
-
-const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}";
-
-const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupFormControl {
-  constructor() {
-    super(...arguments);
-    this.block = false;
-  }
-  static {
-    customElement("odx-toggle-button-group", styles$3)(_OdxToggleButtonGroup);
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxToggleButtonGroup.prototype, "block", 2);
-let OdxToggleButtonGroup = _OdxToggleButtonGroup;
-
-const styles$2 = ":host{--offset-y: -100%;--transition: var(--odx-transition-default);display:grid;grid-template-rows:1fr;transition:var(--transition)}.base{overflow:hidden}.content{transition:var(--transition);transition-property:transform,opacity}:host([hidden]){grid-template-rows:0fr;.content{transform:translateY(var(--offset-y));opacity:0}}";
-
-const _OdxToggleContent = class _OdxToggleContent extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.hidden = false;
-  }
-  static {
-    customElement("odx-toggle-content", styles$2)(_OdxToggleContent);
-  }
-  render() {
-    return html`
-      <div class="base">
-        <div class="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxToggleContent.prototype, "hidden", 2);
-let OdxToggleContent = _OdxToggleContent;
-
-const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none;user-select:none}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75)}}";
-
-const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
-const _OdxTooltip = class _OdxTooltip extends PopoverHost {
-  constructor() {
-    super(...arguments);
-    this.show = false;
-    this.placement = TooltipPlacement.TOP;
-    this.#handleReferenceMouseLeave = (event) => {
-      if (event.relatedTarget === this) return;
-      this.#handleMouseEvents(event);
-    };
-    this.#handleMouseEvents = (event) => {
-      if (event.type !== "mouseenter" && event.type !== "mouseleave") return;
-      this.updateReferenceElementFromEvent(event);
-      this.togglePopover(event.type === "mouseenter");
-    };
-    this.#handleKeyboardFocus = (event) => {
-      if (event.key !== "Tab") return;
-      this.updateReferenceElementFromEvent(event);
-      this.togglePopover(event.type !== "keydown");
-    };
-  }
-  static {
-    customElement("odx-tooltip", styles$1)(_OdxTooltip);
-  }
-  #timeout;
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getUniqueId("odx-tooltip");
-    this.role = "tooltip";
-  }
-  onPopoverShow() {
-    super.onPopoverShow?.();
-    if (typeof this.timeout !== "number" || this.timeout <= 0) return;
-    this.#timeout = window.setTimeout(() => this.togglePopover(false), this.timeout);
-  }
-  onBeforePopoverHide() {
-    super.onBeforePopoverHide?.();
-    clearTimeout(this.#timeout);
-  }
-  mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
-    if (!referenceElement) return;
-    this.#updateAriaAttributes(referenceElement, this.id);
-    if (this.popover === "manual") return;
-    referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
-    referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
-    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
-  }
-  unmountPopover(referenceElement) {
-    super.unmountPopover(referenceElement);
-    this.#updateAriaAttributes(referenceElement, null);
-    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
-    referenceElement.removeEventListener("mouseenter", this.#handleMouseEvents);
-    referenceElement.removeEventListener("mouseleave", this.#handleReferenceMouseLeave);
-  }
-  render() {
-    return html`
-      <odx-popover showArrow>
-        <slot></slot>
-      </odx-popover>
-    `;
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (!this.referenceElement) return;
-    if (props.has("id")) {
-      this.#updateAriaAttributes(this.referenceElement, this.id);
-    }
-    if (props.has("show")) {
-      this.togglePopover(this.show);
-    }
-  }
-  #updateAriaAttributes(referenceElement, id) {
-    if (id) {
-      referenceElement.setAttribute("aria-describedby", id);
-    } else {
-      referenceElement.removeAttribute("aria-describedby");
-    }
-  }
-  #handleReferenceMouseLeave;
-  #handleMouseEvents;
-  #handleKeyboardFocus;
-};
-__decorateClass([
-  property({ type: Boolean })
-], _OdxTooltip.prototype, "show", 2);
-__decorateClass([
-  property({ type: Number })
-], _OdxTooltip.prototype, "timeout", 2);
-__decorateClass([
-  property({ reflect: true, useDefault: true })
-], _OdxTooltip.prototype, "placement", 2);
-let OdxTooltip = _OdxTooltip;
-
-const TranslateContextConverter = {
-  fromAttribute(value) {
-    try {
-      return value ? JSON.parse(value) : null;
-    } catch {
-      return value ?? null;
-    }
-  }
-};
-const _OdxTranslate = class _OdxTranslate extends IsLocalized(CustomElement) {
-  static {
-    customElement("odx-translate")(_OdxTranslate);
-  }
-  updated(props) {
-    super.updated(props);
-    this.textContent = this.t(this.key ?? "", this.context);
-  }
-};
-__decorateClass([
-  property()
-], _OdxTranslate.prototype, "key", 2);
-__decorateClass([
-  property({ converter: TranslateContextConverter })
-], _OdxTranslate.prototype, "context", 2);
-let OdxTranslate = _OdxTranslate;
-
-const styles = ":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}";
-
-class OdxVisuallyHidden extends CustomElement {
-  static {
-    customElement("odx-visually-hidden", styles)(OdxVisuallyHidden);
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressBarVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };