@odx/foundation 0.1.0-alpha.0

package/dist/components.js

@@ -0,0 +1,1075 @@
+import '@odx/icons';
+import '@odx/icons/core';
+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}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-base);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:underline}:host::part(anchor):hover{--odx-link-color: var(--odx-palette-blue-80)}:host([disabled])::part(anchor),:host([subtle]:not([subtle=\"false\"]):not(:hover))::part(anchor){text-decoration:none}:host([disabled])::part(anchor){color:var(--odx-palette-coolgray-60);cursor:default;text-decoration:none}";
+
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$h(target, key, result);
+  return result;
+};
+let OdxLinkComponent = class extends BaseLink {
+  constructor() {
+    super(...arguments);
+    this.subtle = false;
+  }
+};
+__decorateClass$m([
+  property({ type: Boolean, reflect: true })
+], OdxLinkComponent.prototype, "subtle", 2);
+OdxLinkComponent = __decorateClass$m([
+  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$k = Object.getOwnPropertyDescriptor;
+var __typeError$5 = (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 = (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$l([
+  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$g = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __typeError$4 = (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$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$k([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
+], OdxBreadcrumbComponent.prototype, "items", 2);
+__decorateClass$k([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
+], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
+__decorateClass$k([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
+], OdxBreadcrumbComponent.prototype, "rootItems", 2);
+__decorateClass$k([
+  property({ type: Number })
+], OdxBreadcrumbComponent.prototype, "max", 2);
+OdxBreadcrumbComponent = __decorateClass$k([
+  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);--_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,: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)}:host::part(spinner){--_size: var(--odx-size-50);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;box-shadow:none}:host(:not([variant]):not([disabled])){box-shadow:0 1px 2px #0c0c0c1a;--_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,: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([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}: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}::slotted(odx-icon){font-size:var(--_icon-size)!important;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$f = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+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, _OdxButtonElement_instances, renderButton_fn, handleClick_fn;
+let OdxButtonElement = class extends WithLoadingState(BaseLink) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$3(this, _OdxButtonElement_instances);
+    __privateAdd$3(this, _internals, this.attachInternals());
+    this.type = "button";
+  }
+  render() {
+    return html`${when(
+      this.href,
+      () => super.render(),
+      () => __privateMethod$2(this, _OdxButtonElement_instances, renderButton_fn).call(this)
+    )}`;
+  }
+  renderContent() {
+    return html`
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+      ${when(this.loading, () => html`<odx-loading-indicator part="spinner"></odx-loading-indicator>`)}
+    `;
+  }
+};
+_internals = new WeakMap();
+_OdxButtonElement_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, _OdxButtonElement_instances, handleClick_fn)}
+    >
+      ${this.renderContent()}
+    </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;
+  }
+};
+OdxButtonElement.formAssociated = true;
+__decorateClass$j([
+  property({ reflect: true })
+], OdxButtonElement.prototype, "size", 2);
+__decorateClass$j([
+  property({ reflect: true })
+], OdxButtonElement.prototype, "variant", 2);
+__decorateClass$j([
+  property()
+], OdxButtonElement.prototype, "type", 2);
+OdxButtonElement = __decorateClass$j([
+  customElement("odx-button", [styles$e])
+], OdxButtonElement);
+
+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(odx-button){width:100%}}:host([connected]){--_gap: 0;::slotted(odx-button:not(:first-of-type):not(:last-of-type)){border-radius:0}}:host([vertical]){--_direction: column;::slotted(odx-button){margin-block:0}}:host([connected]:not([vertical])){::slotted(odx-button:first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-button:last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(odx-button:first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-button:last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
+
+var __defProp$e = 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$e(target, key, result);
+  return result;
+};
+let OdxButtonGroupComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.block = false;
+    this.connected = false;
+    this.vertical = false;
+  }
+};
+__decorateClass$i([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "block", 2);
+__decorateClass$i([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "connected", 2);
+__decorateClass$i([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "vertical", 2);
+OdxButtonGroupComponent = __decorateClass$i([
+  customElement("odx-button-group", [styles$d])
+], OdxButtonGroupComponent);
+
+var __defProp$d = Object.defineProperty;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$d(target, key, result);
+  return result;
+};
+class 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$h([
+  property()
+], FormatComponent.prototype, "fallbackValue");
+
+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 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$g([
+  property({ type: Number })
+], OdxFormatBytesComponent.prototype, "value", 2);
+__decorateClass$g([
+  property()
+], OdxFormatBytesComponent.prototype, "unit", 2);
+OdxFormatBytesComponent = __decorateClass$g([
+  customElement("odx-format-bytes")
+], OdxFormatBytesComponent);
+
+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 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$f([
+  property()
+], OdxFormatDateComponent.prototype, "value", 2);
+__decorateClass$f([
+  property()
+], OdxFormatDateComponent.prototype, "dateStyle", 2);
+OdxFormatDateComponent = __decorateClass$f([
+  customElement("odx-format-date")
+], OdxFormatDateComponent);
+
+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 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$e([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "value", 2);
+__decorateClass$e([
+  property()
+], OdxFormatNumberComponent.prototype, "currency", 2);
+__decorateClass$e([
+  property()
+], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
+__decorateClass$e([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
+__decorateClass$e([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
+__decorateClass$e([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
+__decorateClass$e([
+  property()
+], OdxFormatNumberComponent.prototype, "type", 2);
+__decorateClass$e([
+  property()
+], OdxFormatNumberComponent.prototype, "unit", 2);
+__decorateClass$e([
+  property()
+], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
+OdxFormatNumberComponent = __decorateClass$e([
+  customElement("odx-format-number")
+], OdxFormatNumberComponent);
+
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$9(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$d([
+  property()
+], OdxRelativeTimeComponent.prototype, "value", 2);
+__decorateClass$d([
+  property()
+], OdxRelativeTimeComponent.prototype, "format", 2);
+__decorateClass$d([
+  property()
+], OdxRelativeTimeComponent.prototype, "minUnit", 2);
+__decorateClass$d([
+  property()
+], OdxRelativeTimeComponent.prototype, "numeric", 2);
+__decorateClass$d([
+  property({ type: Number })
+], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
+OdxRelativeTimeComponent = __decorateClass$d([
+  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$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 = (decorator(result)) || result;
+  return result;
+};
+let OdxHeaderActionsComponent = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.slot = "actions";
+  }
+};
+OdxHeaderActionsComponent = __decorateClass$c([
+  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$8 = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(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$b([
+  property({ reflect: true })
+], OdxTitleComponent.prototype, "size", 2);
+OdxTitleComponent = __decorateClass$b([
+  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$7 = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+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$a([
+  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
+], OdxHeaderComponent.prototype, "titleElements", 2);
+OdxHeaderComponent = __decorateClass$a([
+  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$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 OdxHeadlineComponent = class extends CustomElement {
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("ariaLevel")) {
+      this.role = this.ariaLevel !== null ? "heading" : null;
+    }
+  }
+};
+__decorateClass$9([
+  property({ reflect: true })
+], OdxHeadlineComponent.prototype, "size", 2);
+OdxHeadlineComponent = __decorateClass$9([
+  requestUpdateOnAriaChange(["ariaLevel"]),
+  customElement("odx-headline", [styles$9])
+], OdxHeadlineComponent);
+
+const HeadlineSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+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);inline-size: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);
+
+class SearchEvent extends CustomEvent {
+  constructor(value, rawValue) {
+    super("search", { detail: { rawValue, value } });
+  }
+}
+
+const SearchBarBehavior = {
+  INSTANT: "instant",
+  SUBMIT: "submit"
+};
+
+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)}";
+
+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, OdxButtonElement, OdxButtonGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };