@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/components.js

@@ -1,2129 +0,0 @@
-import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement, getKeyboardEventInfo, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, toggleAttribute, getElementFromEvent, IsLocalized, parseDate, waitForAnimations, emptySlotFallbackFix, OptionControl, SharedResizeObserver, toPx, RadioGroupFormControl, IsTranslatable } from '@odx/foundation';
-import { html, isServer, css, nothing } from 'lit';
-import { property, queryAssignedElements, query } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { B as BaseLink } from './base-link-CvZZE13a.js';
-import { clamp, debounce } from 'es-toolkit';
-export { e as RadioGroupFormControl } from './radio-group-form-control-B0tKFCnU.js';
-
-const styles$B = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([disabled]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([disabled]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
-
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
-  return result;
-};
-let OdxAccordionHeaderComponent = class extends WithAriaControls(CustomElement) {
-  set expanded(value) {
-    if (this.disabled) return;
-    this.ariaExpanded = toAriaBooleanAttribute(value);
-  }
-  get expanded() {
-    return fromAriaBooleanAttribute(this.ariaExpanded);
-  }
-  updateA11yAttributes() {
-    if (!this.region) return;
-    this.region.ariaHidden = toAriaBooleanAttribute(!this.expanded);
-    this.region.inert = !this.expanded;
-    super.updateA11yAttributes();
-  }
-  toggle(force) {
-    if (this.disabled) return;
-    const state = force ?? !this.expanded;
-    if (this.expanded === state) return;
-    this.expanded = state;
-    if (state) {
-      this.emit("expand");
-    } else {
-      this.emit("collapse");
-    }
-    if (this.expanded) return;
-    const childAccordion = this.region?.querySelector("odx-accordion");
-    childAccordion?.toggleAll(false);
-  }
-  update(props) {
-    super.update(props);
-    if (props.has("expanded")) {
-      this.updateA11yAttributes();
-    }
-  }
-  render() {
-    return html`
-      <div class="label">
-        <odx-text ?emphasized=${this.expanded}>
-          <slot></slot>
-        </odx-text>
-        <slot name="end"></slot>
-      </div>
-      <odx-icon class="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
-    `;
-  }
-};
-__decorateClass$I([
-  property({ type: Boolean })
-], OdxAccordionHeaderComponent.prototype, "expanded", 1);
-OdxAccordionHeaderComponent = __decorateClass$I([
-  customElement("odx-accordion-header", [styles$B])
-], OdxAccordionHeaderComponent);
-
-const styles$A = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}odx-separator{margin:0}.container{overflow:hidden}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12);transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
-
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxAccordionPanelComponent = class extends CustomElement {
-  render() {
-    return html`
-      <div class="container">
-        <div class="content">
-          <slot></slot>
-        </div>
-      </div>
-      <odx-separator></odx-separator>
-    `;
-  }
-};
-OdxAccordionPanelComponent = __decorateClass$H([
-  customElement("odx-accordion-panel", [styles$A])
-], OdxAccordionPanelComponent);
-
-const styles$z = ":host{display:block}:host-context(odx-accordion-panel){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
-
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __typeError$c = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
-  return result;
-};
-var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
-var __privateGet$9 = (obj, member, getter) => (__accessCheck$c(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$c = (obj, member, value) => member.has(obj) ? __typeError$c("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleClick$1, _handleExpand, _handleKeyboardEvent;
-let OdxAccordionComponent = class extends CustomElement {
-  constructor() {
-    super();
-    this.multiple = false;
-    __privateAdd$c(this, _handleClick$1, (event) => {
-      event.stopPropagation();
-      if (!(event.target instanceof OdxAccordionHeaderComponent)) return;
-      event.target.toggle();
-    });
-    __privateAdd$c(this, _handleExpand, (event) => {
-      event.stopPropagation();
-      if (!(event.target instanceof OdxAccordionHeaderComponent) || this.multiple) return;
-      this.toggleAll(false, event.target);
-    });
-    __privateAdd$c(this, _handleKeyboardEvent, (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderComponent)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.type === "keydown") return;
-      event.target.toggle();
-    });
-    if (!isServer) {
-      this.addEventListener("click", __privateGet$9(this, _handleClick$1));
-      this.addEventListener("expand", __privateGet$9(this, _handleExpand));
-      this.addEventListener("keydown", __privateGet$9(this, _handleKeyboardEvent));
-      this.addEventListener("keyup", __privateGet$9(this, _handleKeyboardEvent));
-    }
-  }
-  toggleAll(forceState, ...exceptElements) {
-    for (const control of this.controls) {
-      if (control.expanded === forceState || exceptElements.includes(control)) continue;
-      control.toggle(forceState);
-    }
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("multiple") && !this.multiple) {
-      const expandedControls = this.controls.find((control) => control.expanded);
-      this.toggleAll(false, expandedControls);
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-_handleClick$1 = new WeakMap();
-_handleExpand = new WeakMap();
-_handleKeyboardEvent = new WeakMap();
-__decorateClass$G([
-  queryAssignedElements({ selector: OdxAccordionHeaderComponent.selector, flatten: true })
-], OdxAccordionComponent.prototype, "controls", 2);
-__decorateClass$G([
-  property({ type: Boolean })
-], OdxAccordionComponent.prototype, "multiple", 2);
-OdxAccordionComponent = __decorateClass$G([
-  customElement("odx-accordion", [styles$z])
-], OdxAccordionComponent);
-
-const styles$y = ":host{--_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-base);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
-
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
-  return result;
-};
-let OdxAvatarComponent = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$F([
-  property({ reflect: true })
-], OdxAvatarComponent.prototype, "size", 2);
-__decorateClass$F([
-  property({ reflect: true })
-], OdxAvatarComponent.prototype, "variant", 2);
-OdxAvatarComponent = __decorateClass$F([
-  customElement("odx-avatar", [styles$y])
-], OdxAvatarComponent);
-
-const AvatarSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-const AvatarVariant = {
-  CIRCLE: "circle",
-  RECTANGLE: "rectangle"
-};
-
-const styles$x = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
-
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
-  return result;
-};
-let OdxAvatarGroupComponent = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$E([
-  property({ reflect: true })
-], OdxAvatarGroupComponent.prototype, "size", 2);
-__decorateClass$E([
-  property({ reflect: true })
-], OdxAvatarGroupComponent.prototype, "variant", 2);
-OdxAvatarGroupComponent = __decorateClass$E([
-  customElement("odx-avatar-group", [styles$x])
-], OdxAvatarGroupComponent);
-
-const styles$w = ":host{--_color-background: var(--odx-color-surface);--_color-foreground: var(--odx-color-text);display:inline-block;line-height:0}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}";
-
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
-  return result;
-};
-let OdxBadgeComponent = class extends CustomElement {
-  render() {
-    return html`
-      <odx-text size="sm" highlight class="content" odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-__decorateClass$D([
-  property({ reflect: true })
-], OdxBadgeComponent.prototype, "variant", 2);
-OdxBadgeComponent = __decorateClass$D([
-  customElement("odx-badge", [styles$w])
-], OdxBadgeComponent);
-
-const BadgeVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-
-const styles$v = ":host{display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--odx-link-color: var(--odx-link-color-hover, var(--odx-palette-blue-80))}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"]),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
-
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
-  return result;
-};
-let OdxLinkComponent = class extends BaseLink {
-  constructor() {
-    super(...arguments);
-    this.subtle = false;
-  }
-};
-__decorateClass$C([
-  property({ type: Boolean, reflect: true })
-], OdxLinkComponent.prototype, "subtle", 2);
-OdxLinkComponent = __decorateClass$C([
-  customElement("odx-link", [styles$v])
-], OdxLinkComponent);
-
-const styles$u = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}.separator{color:var(--odx-color-foreground-muted)}";
-
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __typeError$b = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
-var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$5 = (obj, member, method) => (__accessCheck$b(obj, member, "access private method"), method);
-var _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
-let OdxBreadcrumbItemComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$b(this, _OdxBreadcrumbItemComponent_instances);
-  }
-  get interactiveElement() {
-    return this.querySelector(OdxLinkComponent.selector);
-  }
-  updated(props) {
-    super.updated(props);
-    __privateMethod$5(this, _OdxBreadcrumbItemComponent_instances, updateVisibility_fn).call(this);
-  }
-  render() {
-    const isLast = this.isLast();
-    return html`
-      <slot></slot>
-      ${when(!isLast, () => html`<odx-icon name="chevron-right" class="separator" role="presentation"></odx-icon>`)}
-    `;
-  }
-  isLast() {
-    return this.nextElementSibling === null;
-  }
-};
-_OdxBreadcrumbItemComponent_instances = new WeakSet();
-updateVisibility_fn = function() {
-  if (this.slot === "fallback" || !this.interactiveElement) return;
-  this.interactiveElement.subtle = true;
-  this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
-};
-OdxBreadcrumbItemComponent = __decorateClass$B([
-  customElement("odx-breadcrumb-item", [styles$u])
-], OdxBreadcrumbItemComponent);
-
-const styles$t = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
-
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __typeError$a = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
-  return result;
-};
-var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
-var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$4 = (obj, member, method) => (__accessCheck$a(obj, member, "access private method"), method);
-var _OdxBreadcrumbComponent_instances, updateContext_fn;
-let OdxBreadcrumbComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$a(this, _OdxBreadcrumbComponent_instances);
-    this.max = 5;
-  }
-  render() {
-    return html`
-      <slot name="root"></slot>
-      <slot @slotchange=${__privateMethod$4(this, _OdxBreadcrumbComponent_instances, updateContext_fn)} name="fallback"></slot>
-      <slot @slotchange=${__privateMethod$4(this, _OdxBreadcrumbComponent_instances, updateContext_fn)}></slot>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("max")) {
-      __privateMethod$4(this, _OdxBreadcrumbComponent_instances, updateContext_fn).call(this);
-    }
-  }
-};
-_OdxBreadcrumbComponent_instances = new WeakSet();
-updateContext_fn = async function() {
-  await this.updateComplete;
-  const items = [...this.rootItems, ...this.items];
-  const visibleItems = items.filter((item, index) => item.slot === "root" || index > items.length - this.max);
-  for (const [index, item] of items.entries()) {
-    item.ariaHidden = toAriaBooleanAttribute(this.slot !== "fallback" && !(item.slot === "root" || index > items.length - this.max));
-  }
-  for (const item of this.fallbackItems) {
-    item.ariaHidden = toAriaBooleanAttribute(this.max < 2 || visibleItems.length === items.length);
-  }
-};
-__decorateClass$A([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
-], OdxBreadcrumbComponent.prototype, "items", 2);
-__decorateClass$A([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
-], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
-__decorateClass$A([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
-], OdxBreadcrumbComponent.prototype, "rootItems", 2);
-__decorateClass$A([
-  property({ type: Number })
-], OdxBreadcrumbComponent.prototype, "max", 2);
-OdxBreadcrumbComponent = __decorateClass$A([
-  customElement("odx-breadcrumb", [styles$t])
-], OdxBreadcrumbComponent);
-
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __typeError$9 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
-  return result;
-};
-var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
-var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$3 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
-var _BaseButtonComponent_instances, renderButton_fn;
-let BaseButtonComponent = class extends BaseLink {
-  constructor() {
-    super(...arguments);
-    __privateAdd$9(this, _BaseButtonComponent_instances);
-    this.type = "button";
-  }
-  render() {
-    return html`${when(
-      this.href,
-      () => super.render(),
-      () => __privateMethod$3(this, _BaseButtonComponent_instances, renderButton_fn).call(this)
-    )}`;
-  }
-  renderContent() {
-    return html`
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-    `;
-  }
-};
-_BaseButtonComponent_instances = new WeakSet();
-renderButton_fn = function() {
-  const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-  return html`<button
-      part="anchor button"
-      aria-label="${optionalAttr(ariaLabel)}"
-      aria-haspopup="${optionalAttr(ariaHasPopup)}"
-      aria-expanded="${optionalAttr(ariaExpanded)}"
-      type=${this.type}
-      ?disabled=${this.disabled}
-    >
-      ${this.renderContent()}
-    </button>`;
-};
-__decorateClass$z([
-  property()
-], BaseButtonComponent.prototype, "type", 2);
-BaseButtonComponent = __decorateClass$z([
-  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"])
-], BaseButtonComponent);
-
-const styles$s = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
-
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __typeError$8 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
-  return result;
-};
-var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
-var __privateGet$8 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$2 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
-var _internals, _OdxButtonComponent_instances, handleClick_fn;
-let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
-  constructor() {
-    super();
-    __privateAdd$8(this, _OdxButtonComponent_instances);
-    __privateAdd$8(this, _internals, this.attachInternals());
-    if (!isServer) {
-      this.addEventListener("click", __privateMethod$2(this, _OdxButtonComponent_instances, handleClick_fn));
-    }
-  }
-  renderContent() {
-    return html`
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
-    `;
-  }
-};
-_internals = new WeakMap();
-_OdxButtonComponent_instances = new WeakSet();
-handleClick_fn = function(_event) {
-  if (this.type === "submit") {
-    __privateGet$8(this, _internals).form?.requestSubmit();
-    return;
-  }
-  if (this.type === "reset") {
-    __privateGet$8(this, _internals).form?.reset();
-    return;
-  }
-};
-OdxButtonComponent.formAssociated = true;
-__decorateClass$y([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "size", 2);
-__decorateClass$y([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "variant", 2);
-OdxButtonComponent = __decorateClass$y([
-  customElement("odx-button", [styles$s])
-], OdxButtonComponent);
-
-const ButtonSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg"
-};
-const ButtonVariant = {
-  PRIMARY: "primary",
-  HIGHLIGHT: "highlight",
-  SECONDARY: "secondary",
-  GHOST: "ghost",
-  DANGER: "danger",
-  SUCCESS: "success",
-  CONFIRMATION: "confirmation"
-};
-
-const styles$r = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
-
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
-  return result;
-};
-let OdxButtonGroupComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.block = false;
-    this.connected = false;
-    this.vertical = false;
-  }
-};
-__decorateClass$x([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "block", 2);
-__decorateClass$x([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "connected", 2);
-__decorateClass$x([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "vertical", 2);
-OdxButtonGroupComponent = __decorateClass$x([
-  customElement("odx-button-group", [styles$r])
-], OdxButtonGroupComponent);
-
-const styles$q = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
-
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxCardComponent = class extends CanBeDisabled(CustomElement) {
-  render() {
-    return html`
-      ${optionalSlot(this, "header")}
-      ${optionalSlot(this, "image")}
-      ${optionalSlot(this, "avatar")}
-      ${optionalSlot(this, "title")}
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-OdxCardComponent = __decorateClass$w([
-  customElement("odx-card", [styles$q])
-], OdxCardComponent);
-
-const styles$p = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);padding:var(--_indicator-space);transition-property:outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-let OdxCheckboxComponent = class extends CheckboxFormControl {
-  constructor() {
-    super(...arguments);
-    this.indeterminate = false;
-  }
-  render() {
-    return html`
-      <div class="indicator">
-        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
-      </div>
-      <div class="content">
-        <div class="label">
-          <slot></slot>
-        </div>
-        <div class="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("indeterminate")) {
-      if (this.indeterminate) {
-        this.ariaChecked = "mixed";
-      }
-    }
-  }
-  toggle(state, dispatchEvent = false) {
-    super.toggle(state, dispatchEvent);
-    if (this.disabled || this.readonly) return;
-    this.indeterminate = false;
-  }
-};
-__decorateClass$v([
-  property({ type: Boolean, reflect: true })
-], OdxCheckboxComponent.prototype, "indeterminate", 2);
-OdxCheckboxComponent = __decorateClass$v([
-  customElement("odx-checkbox", [styles$p])
-], OdxCheckboxComponent);
-
-const styles$o = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __typeError$7 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
-  return result;
-};
-var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
-var __privateGet$7 = (obj, member, getter) => (__accessCheck$7(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$4, _handleGroupControlChange;
-let OdxCheckboxGroupComponent = class extends CheckboxGroupFormControl {
-  constructor() {
-    super(...arguments);
-    __privateAdd$7(this, _handleSlotChange$4, () => {
-      for (const control of this.groupControls) {
-        control.addEventListener("change", __privateGet$7(this, _handleGroupControlChange));
-      }
-    });
-    __privateAdd$7(this, _handleGroupControlChange, (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      event.stopImmediatePropagation();
-      this.updateValue(target.checked ? this.controls.map((control) => control.value) : [], true);
-      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
-        groupControl.checked = target.checked;
-      }
-    });
-  }
-  render() {
-    return html`<slot @slotchange=${__privateGet$7(this, _handleSlotChange$4)}></slot>`;
-  }
-};
-_handleSlotChange$4 = new WeakMap();
-_handleGroupControlChange = new WeakMap();
-__decorateClass$u([
-  property({ reflect: true })
-], OdxCheckboxGroupComponent.prototype, "variant", 2);
-OdxCheckboxGroupComponent = __decorateClass$u([
-  customElement("odx-checkbox-group", [styles$o])
-], OdxCheckboxGroupComponent);
-
-const CheckboxGroupVariant = {
-  LIST: "list"
-};
-
-const styles$n = ":host{--_color-background: var(--odx-color-neutral);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--odx-size-50);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
-
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __typeError$6 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
-  return result;
-};
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleActionClick, _handleClick;
-let OdxChipComponent = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.interactive = false;
-    __privateAdd$6(this, _handleActionClick, (event) => {
-      const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
-      if (!actionElement) return;
-      event.stopPropagation();
-      this.emit("remove");
-    });
-    __privateAdd$6(this, _handleClick, (event) => {
-      if (this.removable) {
-        const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
-        if (actionElement) return;
-      }
-    });
-  }
-  render() {
-    return html`
-      <odx-text class="content" size="sm" highlight odxPreventTextOverflow>
-        <slot></slot>
-      </odx-text>
-      ${when(this.removable, () => this.renderAction())}
-    `;
-  }
-  renderAction() {
-    return html`
-      <button class="action" ?disabled=${this.disabled} @click=${__privateGet$6(this, _handleActionClick)}>
-        <odx-icon class="action-icon" name="core::close"></odx-icon>
-      </button>
-    `;
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("interactive") || changes.has("disabled")) {
-      if (!this.disabled) {
-        toggleAttribute(this, "tabindex", this.interactive ? 0 : null);
-        toggleAttribute(this.actionElement, "tabindex", this.interactive ? -1 : null);
-      }
-    }
-  }
-  updated(changes) {
-    if (changes.has("removable") || changes.has("interactive") || changes.has("disabled")) {
-      if (this.removable || this.interactive) {
-        this.addEventListener("click", __privateGet$6(this, _handleClick), { capture: true });
-      } else {
-        this.removeEventListener("click", __privateGet$6(this, _handleClick));
-      }
-    }
-  }
-};
-_handleActionClick = new WeakMap();
-_handleClick = new WeakMap();
-__decorateClass$t([
-  query(".action")
-], OdxChipComponent.prototype, "actionElement", 2);
-__decorateClass$t([
-  property({ type: Boolean, reflect: true })
-], OdxChipComponent.prototype, "removable", 2);
-__decorateClass$t([
-  property({ type: Boolean, reflect: true })
-], OdxChipComponent.prototype, "interactive", 2);
-__decorateClass$t([
-  property({ reflect: true })
-], OdxChipComponent.prototype, "variant", 2);
-OdxChipComponent = __decorateClass$t([
-  customElement("odx-chip", [styles$n])
-], OdxChipComponent);
-
-const ChipVariant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  HIGHLIGHT: "highlight",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-
-var __defProp$m = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$m(target, key, result);
-  return result;
-};
-class FormatComponent extends IsLocalized(CustomElement) {
-  static {
-    this.styles = [css`:host { display: inline; }`];
-  }
-  render() {
-    if (this.value !== null && this.value !== void 0) {
-      try {
-        return html`${this.transform(this.value) || this.fallbackValue}`;
-      } catch (error) {
-        console.warn(error);
-      }
-    }
-    return html`${this.fallbackValue ?? nothing}`;
-  }
-}
-__decorateClass$s([
-  property()
-], FormatComponent.prototype, "fallbackValue");
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
-  return result;
-};
-let OdxFormatBytesComponent = class extends FormatComponent {
-  constructor() {
-    super(...arguments);
-    this.unit = "byte";
-  }
-  transform(value) {
-    const units = OdxFormatBytesComponent.UNIT_PREFIXES[this.unit];
-    const index = clamp(Math.floor(Math.log10(value) / 3), 0, units.length - 1);
-    const transformedValue = value / 1e3 ** index;
-    return this.formatNumber(transformedValue, {
-      maximumFractionDigits: 2,
-      style: "unit",
-      unit: units[index]
-    });
-  }
-};
-OdxFormatBytesComponent.UNIT_PREFIXES = {
-  bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
-  byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
-};
-__decorateClass$r([
-  property({ type: Number })
-], OdxFormatBytesComponent.prototype, "value", 2);
-__decorateClass$r([
-  property()
-], OdxFormatBytesComponent.prototype, "unit", 2);
-OdxFormatBytesComponent = __decorateClass$r([
-  customElement("odx-format-bytes")
-], OdxFormatBytesComponent);
-
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
-  return result;
-};
-let OdxFormatDateComponent = class extends FormatComponent {
-  get valueAsDate() {
-    if (this.value === null || this.value === void 0) {
-      return null;
-    }
-    return parseDate(this.value);
-  }
-  transform(value) {
-    return this.formatDate(value, { dateStyle: this.dateStyle });
-  }
-};
-__decorateClass$q([
-  property()
-], OdxFormatDateComponent.prototype, "value", 2);
-__decorateClass$q([
-  property()
-], OdxFormatDateComponent.prototype, "dateStyle", 2);
-OdxFormatDateComponent = __decorateClass$q([
-  customElement("odx-format-date")
-], OdxFormatDateComponent);
-
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
-  return result;
-};
-let OdxFormatNumberComponent = class extends FormatComponent {
-  transform(value) {
-    return this.formatNumber(value, {
-      currency: this.currency,
-      currencyDisplay: this.currencyDisplay,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      unit: this.unit,
-      style: this.type
-    });
-  }
-};
-__decorateClass$p([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "value", 2);
-__decorateClass$p([
-  property()
-], OdxFormatNumberComponent.prototype, "currency", 2);
-__decorateClass$p([
-  property()
-], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
-__decorateClass$p([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
-__decorateClass$p([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
-__decorateClass$p([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
-__decorateClass$p([
-  property()
-], OdxFormatNumberComponent.prototype, "type", 2);
-__decorateClass$p([
-  property()
-], OdxFormatNumberComponent.prototype, "unit", 2);
-__decorateClass$p([
-  property()
-], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
-OdxFormatNumberComponent = __decorateClass$p([
-  customElement("odx-format-number")
-], OdxFormatNumberComponent);
-
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __typeError$5 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
-  return result;
-};
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
-var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
-let OdxRelativeTimeComponent = class extends FormatComponent {
-  constructor() {
-    super(...arguments);
-    __privateAdd$5(this, _OdxRelativeTimeComponent_instances);
-    __privateAdd$5(this, _syncInterval);
-    this.value = Date.now();
-    this.syncInterval = null;
-  }
-  get valueAsDate() {
-    if (this.value === null || this.value === void 0) {
-      return null;
-    }
-    return parseDate(this.value);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(__privateGet$5(this, _syncInterval));
-  }
-  willUpdate(props) {
-    super.willUpdate?.(props);
-    if (props.has("syncInterval")) {
-      __privateMethod$1(this, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn).call(this);
-    }
-  }
-  transform(value) {
-    const relativeTime = this.formatRelativeTime(value, { style: this.format, numeric: this.numeric, minUnit: this.minUnit });
-    return html`<time datetime=${optionalAttr(this.valueAsDate?.toISOString())}>${relativeTime}</time>`;
-  }
-};
-_syncInterval = new WeakMap();
-_OdxRelativeTimeComponent_instances = new WeakSet();
-setupSyncInterval_fn = function() {
-  clearInterval(__privateGet$5(this, _syncInterval));
-  if (typeof this.syncInterval !== "number") return;
-  __privateSet$2(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
-};
-__decorateClass$o([
-  property()
-], OdxRelativeTimeComponent.prototype, "value", 2);
-__decorateClass$o([
-  property()
-], OdxRelativeTimeComponent.prototype, "format", 2);
-__decorateClass$o([
-  property()
-], OdxRelativeTimeComponent.prototype, "minUnit", 2);
-__decorateClass$o([
-  property()
-], OdxRelativeTimeComponent.prototype, "numeric", 2);
-__decorateClass$o([
-  property({ type: Number })
-], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
-OdxRelativeTimeComponent = __decorateClass$o([
-  customElement("odx-relative-time")
-], OdxRelativeTimeComponent);
-
-const styles$m = ":host{display:flex;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}";
-
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxHeaderActionsComponent = class extends CustomElement {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.slot = "actions";
-  }
-};
-OdxHeaderActionsComponent = __decorateClass$n([
-  customElement("odx-header-actions", [styles$m])
-], OdxHeaderActionsComponent);
-
-const styles$l = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
-
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
-  return result;
-};
-let OdxTitleComponent = class extends CustomElement {
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("ariaLevel")) {
-      this.role = this.ariaLevel !== null ? "heading" : null;
-    }
-  }
-};
-__decorateClass$m([
-  property({ reflect: true })
-], OdxTitleComponent.prototype, "size", 2);
-OdxTitleComponent = __decorateClass$m([
-  requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-title", [styles$l])
-], OdxTitleComponent);
-
-const TitleSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl",
-  XXL: "xxl"
-};
-
-const styles$k = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-75);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
-
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$4 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
-  return result;
-};
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange$3;
-let OdxHeaderComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$4(this, _handleSlotChange$3, () => {
-      const [titleElement] = this.titleElements;
-      if (!titleElement) return;
-      titleElement.ariaLevel = "1";
-      titleElement.role = "heading";
-      titleElement.size = TitleSize.XS;
-      titleElement.setAttribute("odxPreventTextOverflow", "true");
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "banner";
-  }
-  render() {
-    return html`
-      <slot name="prefix"></slot>
-      <odx-logo size="sm"></odx-logo>
-      <slot @slotchange=${__privateGet$4(this, _handleSlotChange$3)}></slot>
-      <slot name="actions"></slot>
-    `;
-  }
-};
-_handleSlotChange$3 = new WeakMap();
-__decorateClass$l([
-  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
-], OdxHeaderComponent.prototype, "titleElements", 2);
-OdxHeaderComponent = __decorateClass$l([
-  customElement("odx-header", [styles$k])
-], OdxHeaderComponent);
-
-const styles$j = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
-  return result;
-};
-let OdxHeadlineComponent = class extends CustomElement {
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("ariaLevel")) {
-      this.role = this.ariaLevel !== null ? "heading" : null;
-    }
-  }
-};
-__decorateClass$k([
-  property({ reflect: true })
-], OdxHeadlineComponent.prototype, "size", 2);
-OdxHeadlineComponent = __decorateClass$k([
-  requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-headline", [styles$j])
-], OdxHeadlineComponent);
-
-const HeadlineSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
-  return result;
-};
-let OdxIconButtonComponent = class extends OdxButtonComponent {
-  renderContent() {
-    return html`
-      <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
-      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
-    `;
-  }
-};
-__decorateClass$j([
-  property()
-], OdxIconButtonComponent.prototype, "icon", 2);
-OdxIconButtonComponent = __decorateClass$j([
-  customElement("odx-icon-button")
-], OdxIconButtonComponent);
-
-const styles$i = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
-
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
-  return result;
-};
-let OdxInlineMessageComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.emphasized = false;
-  }
-  render() {
-    return html`
-      <odx-text size="sm">
-        <slot></slot>
-      </odx-text>
-    `;
-  }
-};
-__decorateClass$i([
-  property({ type: Boolean, reflect: true })
-], OdxInlineMessageComponent.prototype, "emphasized", 2);
-__decorateClass$i([
-  property({ reflect: true })
-], OdxInlineMessageComponent.prototype, "variant", 2);
-OdxInlineMessageComponent = __decorateClass$i([
-  customElement("odx-inline-message", [styles$i])
-], OdxInlineMessageComponent);
-
-const InlineMessageVariant = {
-  NEUTRAL: "neutral",
-  INFO: "info",
-  DANGER: "danger",
-  WARNING: "warning",
-  SUCCESS: "success"
-};
-
-const styles$h = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}.dot{background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) 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}}";
-
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxLoadingIndicatorComponent = class extends CustomElement {
-  render() {
-    return html`
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-    `;
-  }
-};
-OdxLoadingIndicatorComponent = __decorateClass$h([
-  customElement("odx-loading-indicator", [styles$h])
-], OdxLoadingIndicatorComponent);
-
-const styles$g = ":host{--_overlay-fill-color: var(--odx-overlay-background, rgba(255, 255, 255, .25));display:contents}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-elevation-blur)) grayscale(.75);pointer-events:all;visibility:visible}";
-
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __typeError$3 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
-  return result;
-};
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _loadingContainerPosition;
-const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$3(this, _loadingContainerPosition, "");
-  }
-  get loadingContainer() {
-    return this.parentElement ?? this;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback?.();
-    this.hideOverlay();
-  }
-  async updated(props) {
-    if (props.has("loading")) {
-      if (this.loading) {
-        this.showOverlay();
-      } else {
-        await waitForAnimations(this.overlay);
-        this.hideOverlay();
-      }
-    }
-  }
-  render() {
-    return html`
-      <div part="overlay">
-        <div class="content">
-          <slot ${emptySlotFallbackFix()}>
-            <odx-loading-indicator></odx-loading-indicator>
-          </slot>
-        </div>
-      </div>
-    `;
-  }
-  showOverlay() {
-    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, true);
-    __privateSet$1(this, _loadingContainerPosition, window.getComputedStyle(this.loadingContainer).position);
-    if (__privateGet$3(this, _loadingContainerPosition) !== "static") return;
-    this.loadingContainer.style.position = "relative";
-  }
-  hideOverlay() {
-    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
-    if (__privateGet$3(this, _loadingContainerPosition) !== "static") return;
-    this.loadingContainer.style.position = "";
-  }
-};
-_loadingContainerPosition = new WeakMap();
-__decorateClass$g([
-  query('[part="overlay"]', true)
-], OdxLoadingOverlayComponent.prototype, "overlay", 2);
-OdxLoadingOverlayComponent = __decorateClass$g([
-  customElement("odx-loading-overlay", [styles$g])
-], OdxLoadingOverlayComponent);
-
-const styles$f = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
-
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
-  return result;
-};
-let OdxLogoComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.ariaLabel ||= "Dräger";
-    this.ariaRoleDescription ||= "Logo";
-    this.role = "img";
-    this.translate = false;
-  }
-};
-__decorateClass$f([
-  property({ reflect: true })
-], OdxLogoComponent.prototype, "size", 2);
-__decorateClass$f([
-  property({ type: Boolean, reflect: true })
-], OdxLogoComponent.prototype, "compact", 2);
-OdxLogoComponent = __decorateClass$f([
-  customElement("odx-logo", [styles$f])
-], OdxLogoComponent);
-
-const LogoSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-
-const styles$e = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;--_icon-size: var(--odx-size-125);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-4);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;border:none;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;background-color:var(--_color-background);color:var(--_color-foreground);gap:var(--_padding-inline);font-size:var(--_text-size);line-height:var(--_line-height);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([aria-current=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-current=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-current=\"true\"]:active),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([size=\"lg\"]){--_icon-size: var(--odx-size-200);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-size-100);--_padding-block: var(--odx-size-50);--_padding-inline: var(--odx-size-50)}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}::slotted(*){flex:0 0 auto}::slotted(odx-icon){--size: var(--_icon-size)}::slotted(odx-avatar){--_size: var(--_icon-size)}::slotted([slot=\"end\"]){margin-inline-start:auto}";
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
-  return result;
-};
-let OdxNavigationItemComponent = class extends BaseButtonComponent {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selected")) {
-      this.ariaCurrent = this.selected ? "page" : null;
-    }
-  }
-};
-__decorateClass$e([
-  property({ reflect: true })
-], OdxNavigationItemComponent.prototype, "size", 2);
-__decorateClass$e([
-  property({ type: Boolean })
-], OdxNavigationItemComponent.prototype, "selected", 2);
-OdxNavigationItemComponent = __decorateClass$e([
-  customElement("odx-navigation-item", [styles$e])
-], OdxNavigationItemComponent);
-
-const NavigationItemSize = {
-  MD: "md",
-  LG: "lg"
-};
-
-const styles$d = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
-
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
-  return result;
-};
-let OdxOptionComponent = class extends OptionControl {
-  render() {
-    return html`
-      ${when(
-      this.type === "checkbox",
-      () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
-      () => html`<slot name="start"></slot>`
-    )}
-      <slot></slot>
-      <slot name="end"></slot>
-    `;
-  }
-};
-__decorateClass$d([
-  property({ reflect: true })
-], OdxOptionComponent.prototype, "type", 2);
-OdxOptionComponent = __decorateClass$d([
-  customElement("odx-option", [styles$d])
-], OdxOptionComponent);
-
-const styles$c = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
-  return result;
-};
-let OdxPageComponent = class extends CustomElement {
-  firstUpdated() {
-    SharedResizeObserver.observe(this, () => {
-      this.style.setProperty("--header-size", toPx(this.headerElement.offsetHeight));
-      this.style.setProperty("--subheader-size", toPx(this.subheaderElement.offsetHeight));
-    });
-  }
-  render() {
-    return html`
-      <div class="header" part="header">
-        <slot name="header"></slot>
-      </div>
-      <div class="subheader" part="subheader">
-        <slot name="subheader"></slot>
-      </div>
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-__decorateClass$c([
-  query(".header", true)
-], OdxPageComponent.prototype, "headerElement", 2);
-__decorateClass$c([
-  query(".subheader", true)
-], OdxPageComponent.prototype, "subheaderElement", 2);
-__decorateClass$c([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "alignment", 2);
-__decorateClass$c([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "layout", 2);
-OdxPageComponent = __decorateClass$c([
-  customElement("odx-page", [styles$c])
-], OdxPageComponent);
-
-const PageAlignment = {
-  CENTER: "center"
-};
-const PageLayout = {
-  NARROW: "narrow",
-  WIDE: "wide"
-};
-
-const styles$b = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-fill-main);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);max-inline-size:10rem;overflow:auto;padding-inline-end:var(--odx-size-75)}";
-
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxPageLayoutComponent = class extends CustomElement {
-  render() {
-    return html`
-      ${optionalSlot(this, "navigation")}
-      ${optionalSlot(this, "header")}
-      <div class="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-OdxPageLayoutComponent = __decorateClass$b([
-  customElement("odx-page-layout", [styles$b])
-], OdxPageLayoutComponent);
-
-const styles$a = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);padding:var(--_indicator-space);transition-property:outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border,outline;outline:var(--odx-border-width-thick) solid var(--odx-palette-transparent);outline-offset:calc(-1 * var(--odx-border-width-thick))}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-background-main);--_indicator-stroke-width: var(--odx-size-50);.indicator{outline-color:var(--odx-color-selection-control-fill-selected)}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected)}";
-
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxRadioButtonComponent = class extends CheckboxFormControl {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "radio";
-  }
-  render() {
-    return html`
-      <div class="indicator"></div>
-      <div class="content">
-        <div class="label">
-          <slot></slot>
-        </div>
-        <div class="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-  toggle(state, emitEvent = false) {
-    super.toggle(state ?? true, emitEvent);
-  }
-};
-OdxRadioButtonComponent = __decorateClass$a([
-  customElement("odx-radio-button", [styles$a])
-], OdxRadioButtonComponent);
-
-const styles$9 = ":host{display:flex;flex-direction:column}::slotted(:is(odx-radio-button,odx-switch)){border-block-end:0;border-color:transparent;width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch):last-of-type){border-block-end:none}";
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
-};
-let OdxRadioGroupComponent = class extends RadioGroupFormControl {
-};
-__decorateClass$9([
-  property({ reflect: true })
-], OdxRadioGroupComponent.prototype, "variant", 2);
-OdxRadioGroupComponent = __decorateClass$9([
-  customElement("odx-radio-group", [styles$9])
-], OdxRadioGroupComponent);
-
-const RadioGroupVariant = {
-  LIST: "list"
-};
-
-const styles$8 = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default)}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
-
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __typeError$2 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
-  return result;
-};
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleControlClick, _handleSlotChange$2;
-let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.collapsed = false;
-    __privateAdd$2(this, _handleControlClick, (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.collapsed = !this.collapsed;
-    });
-    __privateAdd$2(this, _handleSlotChange$2, () => {
-      for (const item of this.navigationItems) {
-        item.size = NavigationItemSize.LG;
-      }
-    });
-  }
-  render() {
-    const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
-    return html`
-      <slot @slotchange=${__privateGet$2(this, _handleSlotChange$2)}></slot>
-      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet$2(this, _handleControlClick)}>
-        <odx-icon class="toggle-icon" name="core::chevron-left" slot="start"></odx-icon>
-        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
-      </odx-navigation-item>
-    `;
-  }
-  getItems() {
-    return this.navigationItems;
-  }
-  _getTranslations() {
-    return {
-      en: {
-        controlLabelExpanded: "Collapse navigation",
-        controlLabelCollapsed: "Expand navigation"
-      }
-    };
-  }
-};
-_handleControlClick = new WeakMap();
-_handleSlotChange$2 = new WeakMap();
-__decorateClass$8([
-  queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
-], OdxRailNavigationComponent.prototype, "navigationItems", 2);
-__decorateClass$8([
-  property({ type: Boolean, reflect: true })
-], OdxRailNavigationComponent.prototype, "collapsed", 2);
-OdxRailNavigationComponent = __decorateClass$8([
-  customElement("odx-rail-navigation", [styles$8])
-], OdxRailNavigationComponent);
-
-const styles$7 = "*{box-sizing:border-box}:host{--odx-search-max-inline-size: 35em;--_color-stroke: var(--odx-color-input-control-stroke);--_color-background: var(--odx-color-input-control-fill);--_block-size: var(--odx-size-225);display:grid;grid-template-columns:auto 1fr;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_block-size);border-radius:var(--odx-border-radius-sm);max-width:var(--odx-search-max-inline-size);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host(:focus-within){--_color-stroke: var(--odx-color-input-control-stroke-pressed)}label,::slotted(label){cursor:default;user-select:none;padding-inline:var(--odx-size-50);min-inline-size:var(--odx-size-225);text-align:center;display:flex;place-content:center}odx-icon[name=\"core::search\"]{--size: var(--odx-typography-font-size-5)}::slotted(input[type=\"search\"]){background-color:inherit;border:none;margin:0;padding:0;color:inherit;inline-size:100%}::slotted(input[type=\"search\"]:focus-visible){outline:0}::slotted(input[type=\"search\"])::placeholder{color:var(--odx-color-foreground-muted)}";
-
-class SearchEvent extends CustomEvent {
-  constructor(value, rawValue) {
-    super("search", { detail: { rawValue, value } });
-  }
-}
-
-const SearchBarBehavior = {
-  INSTANT: "instant",
-  SUBMIT: "submit"
-};
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
-  return result;
-};
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleSlotChange$1, _handleInputSearch, _handleInputChange, updateValue_fn;
-let OdxSearchBarComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$1(this, _OdxSearchBarComponent_instances);
-    __privateAdd$1(this, _value);
-    __privateAdd$1(this, _search, this.search.bind(this));
-    this.behavior = SearchBarBehavior.SUBMIT;
-    __privateAdd$1(this, _handleSlotChange$1, () => {
-      if (!this.inputElement) return;
-      this.inputElement.type = "search";
-      this.inputElement.spellcheck = false;
-      this.inputElement.autocomplete = "off";
-    });
-    __privateAdd$1(this, _handleInputSearch, (event) => {
-      if (event.target !== this.inputElement) return;
-      event.preventDefault();
-      event.stopPropagation();
-      this.search(__privateGet$1(this, _OdxSearchBarComponent_instances, inputValue_get));
-    });
-    __privateAdd$1(this, _handleInputChange, (event) => {
-      if (event.target !== this.inputElement || this.behavior !== SearchBarBehavior.INSTANT) return;
-      event.preventDefault();
-      event.stopPropagation();
-      __privateGet$1(this, _search).call(this, __privateGet$1(this, _OdxSearchBarComponent_instances, inputValue_get));
-    });
-  }
-  get inputElement() {
-    return this.inputElements[0] ?? null;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "presentation";
-  }
-  updated(props) {
-    if (props.has("debounceTime")) {
-      __privateSet(this, _search, typeof this.debounceTime === "number" ? debounce(this.search.bind(this), this.debounceTime) : this.search.bind(this));
-    }
-  }
-  search(value, options) {
-    if (__privateGet$1(this, _value) === value && options?.forceUpdate !== true) return;
-    __privateMethod(this, _OdxSearchBarComponent_instances, updateValue_fn).call(this, value, options?.updateInput);
-    if (options?.dispatchEvent === false) return;
-    this.dispatchEvent(new SearchEvent(value, this.inputElement?.value));
-  }
-  render() {
-    return html`
-      <slot name="label">
-        <label>
-          <odx-icon name="core::search">s</odx-icon>
-          <odx-visually-hidden>Search</odx-visually-hidden>
-        </label>
-      </slot>
-      <slot @slotchange=${__privateGet$1(this, _handleSlotChange$1)} @search=${__privateGet$1(this, _handleInputSearch)} @input=${__privateGet$1(this, _handleInputChange)}></slot>
-    `;
-  }
-};
-_value = new WeakMap();
-_search = new WeakMap();
-_OdxSearchBarComponent_instances = new WeakSet();
-inputValue_get = function() {
-  return (this.inputElement?.value ?? "").replace(/\s\s+/g, " ").trim();
-};
-_handleSlotChange$1 = new WeakMap();
-_handleInputSearch = new WeakMap();
-_handleInputChange = new WeakMap();
-updateValue_fn = function(value, updateInput = false) {
-  __privateSet(this, _value, value);
-  if (!updateInput || !this.inputElement) return;
-  this.inputElement.value = value;
-};
-__decorateClass$7([
-  queryAssignedElements({ selector: "input", flatten: true })
-], OdxSearchBarComponent.prototype, "inputElements", 2);
-__decorateClass$7([
-  property()
-], OdxSearchBarComponent.prototype, "behavior", 2);
-__decorateClass$7([
-  property({ type: Number })
-], OdxSearchBarComponent.prototype, "debounceTime", 2);
-OdxSearchBarComponent = __decorateClass$7([
-  customElement("odx-search-bar", [styles$7])
-], OdxSearchBarComponent);
-
-const styles$6 = ":host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--inline-space: var(--odx-size-12);--block-space: var(--odx-size-25);display:block;block-size:var(--size);background-color:var(--color);margin-block:calc(var(--block-space) - .5 * var(--size));margin-inline:var(--inline-space);pointer-events:none;user-select:none}:host([vertical]:not([vertical=\"false\"])){min-block-size:var(--odx-size-100);block-size:calc(100% - var(--block-space) * 2);inline-size:var(--size);margin-block:var(--block-space);margin-inline:calc(var(--inline-space) - .5 * var(--size))}:host([highlight]:not([highlight=\"false\"])){--color: var(--odx-color-separator-strong)}";
-
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
-  return result;
-};
-let OdxSeparatorComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.highlight = false;
-    this.vertical = false;
-  }
-  render() {
-    return "";
-  }
-};
-__decorateClass$6([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "highlight", 2);
-__decorateClass$6([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "vertical", 2);
-OdxSeparatorComponent = __decorateClass$6([
-  customElement("odx-separator", [styles$6])
-], OdxSeparatorComponent);
-
-const styles$5 = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleSlotChange, _handleInputFocus;
-let OdxSpinboxComponent = class extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.compact = false;
-    __privateAdd(this, _handleSlotChange, () => {
-      this.inputElement?.removeEventListener("focus", __privateGet(this, _handleInputFocus));
-      if (!this.inputElement) return;
-      this.inputElement.type = "number";
-      this.inputElement.value = this.inputElement.value || this.inputElement.min;
-      this.inputElement.addEventListener("focus", __privateGet(this, _handleInputFocus));
-      this.requestUpdate();
-    });
-    __privateAdd(this, _handleInputFocus, () => {
-      this.inputElement?.select();
-    });
-  }
-  get inputElement() {
-    return this.inputElements[0] ?? null;
-  }
-  render() {
-    const min = this.inputElement?.min ? Number(this.inputElement.min) : null;
-    const max = this.inputElement?.max ? Number(this.inputElement.max) : null;
-    const value = this.inputElement?.value ? Number(this.inputElement.value) : null;
-    const canStepDown = min === null || value === null || value > min;
-    const canStepUp = max === null || value === null || value < max;
-    if (this.inputElement) {
-      this.inputElement.disabled = this.disabled;
-    }
-    const decrementAction = html`
-      <button part="action action-decrement" @click=${this.stepDown} ?disabled=${this.disabled || !canStepDown}>
-        <odx-icon name="minus"></odx-icon>
-      </button>
-    `;
-    const incrementAction = html`
-      <button part="action action-increment" @click=${this.stepUp} ?disabled=${this.disabled || !canStepUp}>
-        <odx-icon name="plus"></odx-icon>
-      </button>
-    `;
-    const slot = html`<slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>`;
-    if (this.compact) {
-      return html`${slot}${incrementAction}${decrementAction}`;
-    }
-    return html`${decrementAction}${slot}${incrementAction}`;
-  }
-  stepUp() {
-    if (!this.inputElement) return;
-    this.inputElement.stepUp();
-    this.requestUpdate();
-  }
-  stepDown() {
-    if (!this.inputElement) return;
-    this.inputElement.stepDown();
-    this.requestUpdate();
-  }
-};
-_handleSlotChange = new WeakMap();
-_handleInputFocus = new WeakMap();
-OdxSpinboxComponent.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-__decorateClass$5([
-  queryAssignedElements({ selector: "input", flatten: true })
-], OdxSpinboxComponent.prototype, "inputElements", 2);
-__decorateClass$5([
-  property({ type: Boolean, reflect: true })
-], OdxSpinboxComponent.prototype, "compact", 2);
-OdxSpinboxComponent = __decorateClass$5([
-  customElement("odx-spinbox", [styles$5])
-], OdxSpinboxComponent);
-
-const styles$4 = ":host{--gap: 0;--_direction: column;display:flex;flex-direction:var(--_direction);gap:var(--gap);max-inline-size:100%;inline-size:100%}:host([horizontal]:not([horizontal=\"false\"])){--_direction: row}:host([wrap]:not([wrap=\"false\"])){flex-wrap:wrap}:host([gap=\"none\"]){--gap: 0}:host([gap=\"xs\"]){--gap: var(--odx-size-25)}:host([gap=\"sm\"]){--gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--gap: var(--odx-size-75)}:host([gap=\"lg\"]){--gap: var(--odx-size-150)}:host([gap=\"xl\"]){--gap: var(--odx-size-225)}:host([align-items=\"center\"]){align-items:center}:host,:host([align-items=\"start\"]){align-items:flex-start}:host([align-items=\"end\"]){align-items:flex-end}:host([align-items=\"stretch\"]){align-items:stretch}:host([justify-content=\"center\"]){justify-content:center}:host([justify-content=\"start\"]){justify-content:flex-start}:host([justify-content=\"end\"]){justify-content:flex-end}:host,:host([justify-content=\"stretch\"]){justify-content:stretch}:host([justify-content=\"space-between\"]){justify-content:space-between}:host([justify-content=\"space-around\"]){justify-content:space-around}:host([justify-content=\"space-evenly\"]){justify-content:space-evenly}";
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
-  return result;
-};
-let OdxStackComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.horizontal = false;
-    this.wrap = false;
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$4([
-  property({ attribute: "align-items", reflect: true })
-], OdxStackComponent.prototype, "alignItems", 2);
-__decorateClass$4([
-  property({ attribute: "justify-content", reflect: true })
-], OdxStackComponent.prototype, "justifyContent", 2);
-__decorateClass$4([
-  property({ reflect: true })
-], OdxStackComponent.prototype, "gap", 2);
-__decorateClass$4([
-  property({ type: Boolean, reflect: true })
-], OdxStackComponent.prototype, "horizontal", 2);
-__decorateClass$4([
-  property({ type: Boolean, reflect: true })
-], OdxStackComponent.prototype, "wrap", 2);
-OdxStackComponent = __decorateClass$4([
-  customElement("odx-stack", [styles$4])
-], OdxStackComponent);
-
-const StackAlignItems = {
-  START: "start",
-  END: "end",
-  CENTER: "center",
-  STRETCH: "stretch"
-};
-const StackGap = {
-  NONE: "none",
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-const StackJustifyContent = {
-  START: "start",
-  END: "end",
-  CENTER: "center",
-  SPACE_BETWEEN: "space-between",
-  SPACE_AROUND: "space-around",
-  SPACE_EVENLY: "space-evenly"
-};
-
-const styles$3 = "*{box-sizing:border-box}:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-track-color-background: var(--odx-color-selection-control-fill);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);transition-property:background-color border-color outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}.indicator:before,.indicator:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit;border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke)}.indicator:before{background-color:var(--_indicator-track-color-background);block-size:var(--odx-size-37);inline-size:var(--odx-size-225)}.indicator:after{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;background-color:var(--_indicator-color-background);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,transform;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}.label{display:inline-block;cursor:inherit}.content{margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);--_indicator-track-color-background: var(--odx-color-selection-control-fill-selected);.indicator:after{transform:translate(var(--odx-size-225)) translate(-100%)}}:host([aria-checked=\"true\"]:not([aria-disabled]):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_indicator-track-color-background: var(--odx-color-disabled-fill);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-stroke: var(--_indicator-color-background);--_indicator-track-color-background: var(--odx-color-disabled-fill-selected)}";
-
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxSwitchComponent = class extends CheckboxFormControl {
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "switch";
-  }
-  render() {
-    return html`
-      <div class="indicator"></div>
-      <div class="content">
-        <div class="label">
-          <slot></slot>
-        </div>
-        <div class="description">
-          <slot name="description"></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-OdxSwitchComponent = __decorateClass$3([
-  customElement("odx-switch", [styles$3])
-], OdxSwitchComponent);
-
-const styles$2 = ":host{display:block;text-decoration:inherit;color:var(--_color, inherit);font-size:var(--_font-size, inherit);line-height:var(--_line-height, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}";
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-let OdxTextComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.emphasized = false;
-  }
-};
-__decorateClass$2([
-  property({ type: Boolean, reflect: true })
-], OdxTextComponent.prototype, "emphasized", 2);
-__decorateClass$2([
-  property({ reflect: true })
-], OdxTextComponent.prototype, "size", 2);
-__decorateClass$2([
-  property({ reflect: true })
-], OdxTextComponent.prototype, "variant", 2);
-OdxTextComponent = __decorateClass$2([
-  customElement("odx-text", [styles$2])
-], OdxTextComponent);
-
-const TextSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md"
-};
-const TextVariant = {
-  HINT: "hint",
-  ACCENT: "info",
-  DANGER: "danger"
-};
-
-const styles$1 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let OdxToggleButtonComponent = class extends CheckboxFormControl {
-  constructor() {
-    super(...arguments);
-    this.checked = false;
-    this.pressed = false;
-  }
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "button";
-  }
-  updateAriaAttributes() {
-    this.ariaPressed = toAriaBooleanAttribute(this.pressed, false);
-  }
-  willUpdate(props) {
-    if (props.has("checked")) {
-      this.pressed = this.checked;
-    }
-    super.willUpdate(props);
-  }
-  render() {
-    return html`
-      <div part="indicator"></div>
-      <div part="label"><slot></slot></div>
-    `;
-  }
-};
-__decorateClass$1([
-  property({ type: Boolean })
-], OdxToggleButtonComponent.prototype, "checked", 2);
-__decorateClass$1([
-  property({ type: Boolean })
-], OdxToggleButtonComponent.prototype, "pressed", 2);
-OdxToggleButtonComponent = __decorateClass$1([
-  customElement("odx-toggle-button", [styles$1])
-], OdxToggleButtonComponent);
-
-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}";
-
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxVisuallyHiddenComponent = class extends CustomElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-OdxVisuallyHiddenComponent = __decorateClass([
-  customElement("odx-visually-hidden", [styles])
-], OdxVisuallyHiddenComponent);
-
-export { AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant, CheckboxGroupVariant, ChipVariant, HeadlineSize, InlineMessageVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, NavigationItemSize, OdxAccordionComponent, OdxAccordionHeaderComponent, OdxAccordionPanelComponent, OdxAvatarComponent, OdxAvatarGroupComponent, OdxBadgeComponent, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxCardComponent, OdxCheckboxComponent, OdxCheckboxGroupComponent, OdxChipComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxInlineMessageComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLoadingOverlayComponent, OdxLogoComponent, OdxNavigationItemComponent, OdxOptionComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRadioButtonComponent, OdxRadioGroupComponent, OdxRailNavigationComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxSpinboxComponent, OdxStackComponent, OdxSwitchComponent, OdxTextComponent, OdxTitleComponent, OdxToggleButtonComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, RadioGroupVariant, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };