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

package/dist/components.js

@@ -1,1096 +0,0 @@
-import { customElement, CustomElement, toAriaBooleanAttribute, WithLoadingState, optionalAttr, IsLocalized, parseDate, requestUpdateOnAriaChange, SharedResizeObserver, toPx, optionalSlot } from '@odx/foundation';
-import { html, css, nothing } from 'lit';
-import { when } from 'lit/directives/when.js';
-import { property, queryAssignedElements, query } from 'lit/decorators.js';
-import { B as BaseLink } from './base-link-CvZZE13a.js';
-import { clamp, debounce } from 'es-toolkit';
-
-const styles$h = ":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([disabled]:not([disabled=\"false\"])),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([disabled])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
-
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (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$i(target, key, result);
-  return result;
-};
-let OdxLinkComponent = class extends BaseLink {
-  constructor() {
-    super(...arguments);
-    this.subtle = false;
-  }
-};
-__decorateClass$n([
-  property({ type: Boolean, reflect: true })
-], OdxLinkComponent.prototype, "subtle", 2);
-OdxLinkComponent = __decorateClass$n([
-  customElement("odx-link", [styles$h])
-], OdxLinkComponent);
-
-const styles$g = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
-
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __typeError$5 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-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 __privateMethod$4 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
-var _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
-let OdxBreadcrumbItemComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$5(this, _OdxBreadcrumbItemComponent_instances);
-  }
-  get interactiveElement() {
-    return this.querySelector(OdxLinkComponent.selector);
-  }
-  updated(props) {
-    super.updated(props);
-    __privateMethod$4(this, _OdxBreadcrumbItemComponent_instances, updateVisibility_fn).call(this);
-  }
-  render() {
-    const isLast = this.isLast();
-    return html`
-      <slot></slot>
-      ${when(!isLast, () => html`<odx-icon name="chevron-right" part="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$m([
-  customElement("odx-breadcrumb-item", [styles$g])
-], OdxBreadcrumbItemComponent);
-
-const styles$f = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;column-gap:var(--_breadcrumb-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(--_breadcrumb-gap)}";
-
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __typeError$4 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
-  return result;
-};
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod$3 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
-var _OdxBreadcrumbComponent_instances, updateContext_fn;
-let OdxBreadcrumbComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$4(this, _OdxBreadcrumbComponent_instances);
-    this.max = 5;
-  }
-  render() {
-    return html`
-      <slot name="root"></slot>
-      <slot @slotchange=${__privateMethod$3(this, _OdxBreadcrumbComponent_instances, updateContext_fn)} name="fallback"></slot>
-      <slot @slotchange=${__privateMethod$3(this, _OdxBreadcrumbComponent_instances, updateContext_fn)}></slot>
-    `;
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("max")) {
-      __privateMethod$3(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$l([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
-], OdxBreadcrumbComponent.prototype, "items", 2);
-__decorateClass$l([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
-], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
-__decorateClass$l([
-  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
-], OdxBreadcrumbComponent.prototype, "rootItems", 2);
-__decorateClass$l([
-  property({ type: Number })
-], OdxBreadcrumbComponent.prototype, "max", 2);
-OdxBreadcrumbComponent = __decorateClass$l([
-  customElement("odx-breadcrumb", [styles$f])
-], OdxBreadcrumbComponent);
-
-const styles$e = ":host{--_color-fill: var(--odx-color-neutral-rest);--_color-fill-hover: var(--odx-color-neutral-hover);--_color-fill-pressed: var(--odx-color-neutral-down);--_color-text: inherit;--_color-border: transparent;--_color-border-hover: transparent;--_color-border-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;background:transparent;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-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);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-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:not([variant]):not([disabled])){--_color-border: var(--odx-color-outline-neutral);--_color-border-hover: var(--odx-color-outline-neutral-hover);--_color-border-pressed: var(--odx-color-outline-neutral-down)}:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: 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$g = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __typeError$3 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$k = (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$g(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 __privateMethod$2 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
-var _internals, _OdxButtonComponent_instances, renderButton_fn, handleClick_fn;
-let OdxButtonComponent = class extends WithLoadingState(BaseLink) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$3(this, _OdxButtonComponent_instances);
-    __privateAdd$3(this, _internals, this.attachInternals());
-    this.type = "button";
-  }
-  render() {
-    return html`${when(
-      this.href,
-      () => super.render(),
-      () => __privateMethod$2(this, _OdxButtonComponent_instances, renderButton_fn).call(this)
-    )}`;
-  }
-  renderContent() {
-    return html`
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-    `;
-  }
-};
-_internals = new WeakMap();
-_OdxButtonComponent_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}
-      @click=${__privateMethod$2(this, _OdxButtonComponent_instances, handleClick_fn)}
-    >
-      ${this.renderContent()}
-      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
-    </button>`;
-};
-handleClick_fn = function(_event) {
-  if (this.type === "submit") {
-    __privateGet$3(this, _internals).form?.requestSubmit();
-    return;
-  }
-  if (this.type === "reset") {
-    __privateGet$3(this, _internals).form?.reset();
-    return;
-  }
-};
-OdxButtonComponent.formAssociated = true;
-__decorateClass$k([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "size", 2);
-__decorateClass$k([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "variant", 2);
-__decorateClass$k([
-  property()
-], OdxButtonComponent.prototype, "type", 2);
-OdxButtonComponent = __decorateClass$k([
-  customElement("odx-button", [styles$e])
-], 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$d = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button):not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(:is(odx-button,odx-icon-button):focus-within){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button):first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button):first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
-  return result;
-};
-let OdxButtonGroupComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.block = false;
-    this.connected = false;
-    this.vertical = false;
-  }
-};
-__decorateClass$j([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "block", 2);
-__decorateClass$j([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "connected", 2);
-__decorateClass$j([
-  property({ type: Boolean, reflect: true })
-], OdxButtonGroupComponent.prototype, "vertical", 2);
-OdxButtonGroupComponent = __decorateClass$j([
-  customElement("odx-button-group", [styles$d])
-], OdxButtonGroupComponent);
-
-var __defProp$e = Object.defineProperty;
-var __decorateClass$i = (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$e(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$i([
-  property()
-], FormatComponent.prototype, "fallbackValue");
-
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(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$h([
-  property({ type: Number })
-], OdxFormatBytesComponent.prototype, "value", 2);
-__decorateClass$h([
-  property()
-], OdxFormatBytesComponent.prototype, "unit", 2);
-OdxFormatBytesComponent = __decorateClass$h([
-  customElement("odx-format-bytes")
-], OdxFormatBytesComponent);
-
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(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$g([
-  property()
-], OdxFormatDateComponent.prototype, "value", 2);
-__decorateClass$g([
-  property()
-], OdxFormatDateComponent.prototype, "dateStyle", 2);
-OdxFormatDateComponent = __decorateClass$g([
-  customElement("odx-format-date")
-], OdxFormatDateComponent);
-
-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 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$f([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "value", 2);
-__decorateClass$f([
-  property()
-], OdxFormatNumberComponent.prototype, "currency", 2);
-__decorateClass$f([
-  property()
-], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
-__decorateClass$f([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
-__decorateClass$f([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
-__decorateClass$f([
-  property({ type: Number })
-], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
-__decorateClass$f([
-  property()
-], OdxFormatNumberComponent.prototype, "type", 2);
-__decorateClass$f([
-  property()
-], OdxFormatNumberComponent.prototype, "unit", 2);
-__decorateClass$f([
-  property()
-], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
-OdxFormatNumberComponent = __decorateClass$f([
-  customElement("odx-format-number")
-], OdxFormatNumberComponent);
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __typeError$2 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
-  return result;
-};
-var __accessCheck$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"), 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 __privateSet$1 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
-var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
-let OdxRelativeTimeComponent = class extends FormatComponent {
-  constructor() {
-    super(...arguments);
-    __privateAdd$2(this, _OdxRelativeTimeComponent_instances);
-    __privateAdd$2(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$2(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$2(this, _syncInterval));
-  if (typeof this.syncInterval !== "number") return;
-  __privateSet$1(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
-};
-__decorateClass$e([
-  property()
-], OdxRelativeTimeComponent.prototype, "value", 2);
-__decorateClass$e([
-  property()
-], OdxRelativeTimeComponent.prototype, "format", 2);
-__decorateClass$e([
-  property()
-], OdxRelativeTimeComponent.prototype, "minUnit", 2);
-__decorateClass$e([
-  property()
-], OdxRelativeTimeComponent.prototype, "numeric", 2);
-__decorateClass$e([
-  property({ type: Number })
-], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
-OdxRelativeTimeComponent = __decorateClass$e([
-  customElement("odx-relative-time")
-], OdxRelativeTimeComponent);
-
-const styles$c = "::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}:host{display:flex;block-size:100%;gap:var(--odx-size-75)}";
-
-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 = (decorator(result)) || result;
-  return result;
-};
-let OdxHeaderActionsComponent = class extends CustomElement {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.slot = "actions";
-  }
-};
-OdxHeaderActionsComponent = __decorateClass$d([
-  customElement("odx-header-actions", [styles$c])
-], OdxHeaderActionsComponent);
-
-const styles$b = ":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$9 = 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$9(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$c([
-  property({ reflect: true })
-], OdxTitleComponent.prototype, "size", 2);
-OdxTitleComponent = __decorateClass$c([
-  requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-title", [styles$b])
-], OdxTitleComponent);
-
-const TitleSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl",
-  XXL: "xxl"
-};
-
-const styles$a = ":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$8 = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(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 _handleSlotChange$1;
-let OdxHeaderComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd$1(this, _handleSlotChange$1, () => {
-      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$1(this, _handleSlotChange$1)}></slot>
-      <slot name="actions"></slot>
-    `;
-  }
-};
-_handleSlotChange$1 = new WeakMap();
-__decorateClass$b([
-  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
-], OdxHeaderComponent.prototype, "titleElements", 2);
-OdxHeaderComponent = __decorateClass$b([
-  customElement("odx-header", [styles$a])
-], OdxHeaderComponent);
-
-const styles$9 = ":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$7 = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(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$a([
-  property({ reflect: true })
-], OdxHeadlineComponent.prototype, "size", 2);
-OdxHeadlineComponent = __decorateClass$a([
-  requestUpdateOnAriaChange(["ariaLevel"]),
-  customElement("odx-headline", [styles$9])
-], OdxHeadlineComponent);
-
-const HeadlineSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-
-var __defProp$6 = 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$6(target, key, result);
-  return result;
-};
-let OdxIconButtonComponent = class extends OdxButtonComponent {
-  renderContent() {
-    return html`
-      <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
-    `;
-  }
-};
-__decorateClass$9([
-  property()
-], OdxIconButtonComponent.prototype, "icon", 2);
-OdxIconButtonComponent = __decorateClass$9([
-  customElement("odx-icon-button")
-], OdxIconButtonComponent);
-
-const styles$8 = "@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}:host::part(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}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
-
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxLoadingIndicatorComponent = class extends CustomElement {
-  render() {
-    return html`
-      <div part="dot first"></div>
-      <div part="dot middle"></div>
-      <div part="dot last"></div>
-    `;
-  }
-};
-OdxLoadingIndicatorComponent = __decorateClass$8([
-  customElement("odx-loading-indicator", [styles$8])
-], OdxLoadingIndicatorComponent);
-
-const styles$7 = ":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$5 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(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$7([
-  property({ reflect: true })
-], OdxLogoComponent.prototype, "size", 2);
-__decorateClass$7([
-  property({ type: Boolean, reflect: true })
-], OdxLogoComponent.prototype, "compact", 2);
-OdxLogoComponent = __decorateClass$7([
-  customElement("odx-logo", [styles$7])
-], OdxLogoComponent);
-
-const LogoSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl"
-};
-
-const styles$6 = ":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$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 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$6([
-  query(".header", true)
-], OdxPageComponent.prototype, "headerElement", 2);
-__decorateClass$6([
-  query(".subheader", true)
-], OdxPageComponent.prototype, "subheaderElement", 2);
-__decorateClass$6([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "alignment", 2);
-__decorateClass$6([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "layout", 2);
-OdxPageComponent = __decorateClass$6([
-  customElement("odx-page", [styles$6])
-], OdxPageComponent);
-
-const PageAlignment = {
-  CENTER: "center"
-};
-const PageLayout = {
-  NARROW: "narrow",
-  WIDE: "wide"
-};
-
-const styles$5 = ":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$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (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$5([
-  customElement("odx-page-layout", [styles$5])
-], OdxPageLayoutComponent);
-
-const styles$4 = "*{box-sizing:border-box}:host{--odx-search-max-inline-size: 35em;--_block-size: var(--odx-size-225);--_border-color: var(--odx-color-input-control-stroke);--_background-color: var(--odx-color-input-control-fill);display:grid;grid-template-columns:auto 1fr;place-items:center;background-color:var(--_background-color);border:var(--odx-border-width-thin) solid var(--_border-color);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){--_background-color: var(--odx-color-input-control-fill-hover);--_border-color: var(--odx-color-input-control-stroke-hover)}:host(:focus-within){--_border-color: 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$3 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
-  return result;
-};
-var __accessCheck = (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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _value, _search, _OdxSearchBarComponent_instances, inputValue_get, _handleSlotChange, _handleInputSearch, _handleInputChange, updateValue_fn;
-let OdxSearchBarComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _OdxSearchBarComponent_instances);
-    __privateAdd(this, _value);
-    __privateAdd(this, _search, this.search.bind(this));
-    this.behavior = SearchBarBehavior.SUBMIT;
-    __privateAdd(this, _handleSlotChange, () => {
-      if (!this.inputElement) return;
-      this.inputElement.type = "search";
-      this.inputElement.spellcheck = false;
-      this.inputElement.autocomplete = "off";
-    });
-    __privateAdd(this, _handleInputSearch, (event) => {
-      if (event.target !== this.inputElement) return;
-      event.preventDefault();
-      event.stopPropagation();
-      this.search(__privateGet(this, _OdxSearchBarComponent_instances, inputValue_get));
-    });
-    __privateAdd(this, _handleInputChange, (event) => {
-      if (event.target !== this.inputElement || this.behavior !== SearchBarBehavior.INSTANT) return;
-      event.preventDefault();
-      event.stopPropagation();
-      __privateGet(this, _search).call(this, __privateGet(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(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(this, _handleSlotChange)} @search=${__privateGet(this, _handleInputSearch)} @input=${__privateGet(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 = 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$4([
-  queryAssignedElements({ selector: "input", flatten: true })
-], OdxSearchBarComponent.prototype, "inputElements", 2);
-__decorateClass$4([
-  property()
-], OdxSearchBarComponent.prototype, "behavior", 2);
-__decorateClass$4([
-  property({ type: Number })
-], OdxSearchBarComponent.prototype, "debounceTime", 2);
-OdxSearchBarComponent = __decorateClass$4([
-  customElement("odx-search-bar", [styles$4])
-], OdxSearchBarComponent);
-
-const styles$3 = ":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$2 = Object.defineProperty;
-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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
-  return result;
-};
-let OdxSeparatorComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.highlight = false;
-    this.vertical = false;
-  }
-  render() {
-    return "";
-  }
-};
-__decorateClass$3([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "highlight", 2);
-__decorateClass$3([
-  property({ type: Boolean, reflect: true })
-], OdxSeparatorComponent.prototype, "vertical", 2);
-OdxSeparatorComponent = __decorateClass$3([
-  customElement("odx-separator", [styles$3])
-], OdxSeparatorComponent);
-
-const styles$2 = ":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$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 OdxStackComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.horizontal = false;
-    this.wrap = false;
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-__decorateClass$2([
-  property({ attribute: "align-items", reflect: true })
-], OdxStackComponent.prototype, "alignItems", 2);
-__decorateClass$2([
-  property({ attribute: "justify-content", reflect: true })
-], OdxStackComponent.prototype, "justifyContent", 2);
-__decorateClass$2([
-  property({ reflect: true })
-], OdxStackComponent.prototype, "gap", 2);
-__decorateClass$2([
-  property({ type: Boolean, reflect: true })
-], OdxStackComponent.prototype, "horizontal", 2);
-__decorateClass$2([
-  property({ type: Boolean, reflect: true })
-], OdxStackComponent.prototype, "wrap", 2);
-OdxStackComponent = __decorateClass$2([
-  customElement("odx-stack", [styles$2])
-], 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$1 = ":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, var(--odx-typography-font-weight-normal))}: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 = 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 OdxTextComponent = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.emphasized = false;
-  }
-};
-__decorateClass$1([
-  property({ type: Boolean, reflect: true })
-], OdxTextComponent.prototype, "emphasized", 2);
-__decorateClass$1([
-  property({ reflect: true })
-], OdxTextComponent.prototype, "size", 2);
-__decorateClass$1([
-  property({ reflect: true })
-], OdxTextComponent.prototype, "variant", 2);
-OdxTextComponent = __decorateClass$1([
-  customElement("odx-text", [styles$1])
-], OdxTextComponent);
-
-const TextSize = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md"
-};
-const TextVariant = {
-  HINT: "hint",
-  ACCENT: "info",
-  DANGER: "danger"
-};
-
-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 { BaseLink, ButtonSize, ButtonVariant, HeadlineSize, LogoSize, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };