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

package/dist/main.js

@@ -1,1206 +1,5 @@
-import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { unsafeCSS, LitElement, html, isServer, nothing } from 'lit';
-import { property, queryAssignedElements, query } from 'lit/decorators.js';
-import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy, c as computePosition, a as autoUpdate, t as throttle, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide } from './vendor.js';
-
-const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
-
-function customElement(tagName, ...styles) {
-  return (target) => {
-    const mergedStyles = [customElementStyles, target.styles, ...styles].flatMap((styles2) => {
-      return typeof styles2 === "string" ? unsafeCSS(styles2) : styles2 || [];
-    });
-    target.styles = uniqBy(mergedStyles, String);
-    target.tagName = tagName;
-    target.define = () => {
-      if (customElements.get(tagName)) return;
-      customElements.define(tagName, target);
-    };
-  };
-}
-class CustomElement extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-  /** @internal */
-  emit(event, eventInit) {
-    if (typeof event === "string") {
-      return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, cancelable: true, ...eventInit }));
-    }
-    return !this.dispatchEvent(event);
-  }
-}
-
-function parseDate(value) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime()) && typeof value === "string") {
-    return Number.isNaN(Number(value)) ? null : new Date(Number(value));
-  }
-  return Number.isNaN(date.getTime()) ? null : date;
-}
-function findClosestDocument(node) {
-  let parent = node.parentNode;
-  while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && parent.nodeType !== Node.DOCUMENT_NODE) {
-    parent = parent.parentNode;
-  }
-  return parent ?? document;
-}
-function forwardEvent(target, eventInit) {
-  return (event) => {
-    event.stopPropagation();
-    const shouldPreventDefault = target.dispatchEvent(
-      new CustomEvent(event.type, { bubbles: event.bubbles, composed: event.composed, cancelable: event.cancelable, ...eventInit })
-    );
-    if (shouldPreventDefault) return;
-    event.preventDefault();
-  };
-}
-function getElementFromEvent(event, filterFn) {
-  return event.composedPath().find((node) => node instanceof Element && filterFn(node));
-}
-async function waitForAnimations(element, subtree = false) {
-  if (!element || typeof element.getAnimations !== "function") {
-    return [];
-  }
-  return await Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
-}
-function toAriaBooleanAttribute(value, removeOnFalse = true) {
-  return removeOnFalse && value === false ? null : String(value);
-}
-function toPx(value) {
-  if (value == null || Number.isNaN(value)) return null;
-  return `${round(value, 2)}px`;
-}
-function getAssignedElement(root, options) {
-  const { slot, selector } = options ?? {};
-  const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
-  const slotEl = root?.querySelector(slotSelector);
-  const elements = slotEl?.assignedElements(options) ?? [];
-  if (selector == null) {
-    return elements[0];
-  }
-  return elements.find((node) => node.matches(selector));
-}
-function getKeyInfo(event) {
-  const { code, shiftKey } = event;
-  return {
-    up: code === "ArrowUp",
-    right: code === "ArrowRight",
-    down: code === "ArrowDown",
-    left: code === "ArrowLeft",
-    enter: code === "Enter",
-    escape: code === "Escape",
-    space: code === "Space",
-    tab: !shiftKey && code === "Tab",
-    backTab: shiftKey && code === "Tab",
-    start: code === "Home",
-    end: code === "End"
-  };
-}
-
-const CanBeDisabled = (superClass) => {
-  class CanBeDisabledMixin extends superClass {
-    constructor() {
-      super(...arguments);
-      this.disabled = false;
-    }
-    #initialTabIndex;
-    connectedCallback() {
-      super.connectedCallback();
-      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : void 0;
-    }
-    willUpdate(props) {
-      super.willUpdate(props);
-      if (props.has("disabled")) {
-        this.#handleDisabledChange();
-      }
-    }
-    #handleDisabledChange() {
-      this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
-      if (this.disabled) {
-        this.tabIndex = -1;
-      } else if (this.#initialTabIndex === void 0) {
-        this.removeAttribute("tabindex");
-      } else {
-        this.tabIndex = this.#initialTabIndex;
-      }
-    }
-  }
-  __decorateClass([
-    property({ type: Boolean, reflect: true, useDefault: true })
-  ], CanBeDisabledMixin.prototype, "disabled", 2);
-  return CanBeDisabledMixin;
-};
-
-class FormControl extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super();
-    this.name = "";
-    this.value = "";
-    this.readonly = false;
-    this.required = false;
-    this.internals = this.attachInternals();
-  }
-  static {
-    /** @internal */
-    this.formAssociated = true;
-  }
-  static {
-    /** @internal */
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  get form() {
-    return this.internals.form;
-  }
-  get validity() {
-    return this.internals.validity;
-  }
-  get validationMessage() {
-    return this.internals.validationMessage;
-  }
-  get willValidate() {
-    return this.internals.willValidate;
-  }
-  toFormValue() {
-    return this.value ? String(this.value) : null;
-  }
-  checkValidity() {
-    return this.internals.checkValidity();
-  }
-  setValidity(flags, target = this) {
-    const errorKey = Object.keys(flags ?? {}).find((key) => flags?.[key] === true);
-    this.internals.setValidity(flags, errorKey ?? "unknown error", target);
-  }
-  reportValidity() {
-    this.internals.reportValidity();
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("required")) {
-      this.ariaRequired = toAriaBooleanAttribute(this.required);
-    }
-    if (props.has("readonly")) {
-      this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
-    }
-    if (props.has("value")) {
-      this.internals.setFormValue(this.toFormValue());
-    }
-    this.updateAriaAttributes?.();
-  }
-}
-__decorateClass([
-  property()
-], FormControl.prototype, "name", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], FormControl.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], FormControl.prototype, "required", 2);
-
-const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
-class CheckboxFormControl extends FormControl {
-  constructor() {
-    super();
-    this.role = null;
-    this.checked = false;
-    this.value = "";
-    this.#handleClick = ({ target }) => {
-      if (LINK_SELECTORS.has(target.localName)) return;
-      this.toggle(void 0, true);
-    };
-    this.#handleKeyboardEvent = (event) => {
-      const key = getKeyInfo(event);
-      if (!(key.enter || key.space)) return;
-      event.preventDefault();
-      if (event.type === "keydown" || LINK_SELECTORS.has(event.target.localName)) return;
-      this.toggle(void 0, true);
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeyboardEvent);
-      this.addEventListener("keyup", this.#handleKeyboardEvent);
-    }
-  }
-  static {
-    /** @internal */
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: false
-    };
-  }
-  toFormValue() {
-    if (this.value) {
-      return this.checked ? this.value : null;
-    }
-    return this.checked ? "on" : null;
-  }
-  toggle(state, emitEvent = false) {
-    const currentState = this.checked;
-    const newState = state ?? !currentState;
-    if (this.disabled || this.readonly || newState === currentState) return;
-    this.checked = newState;
-    if (!(emitEvent && this.emit("change", { bubbles: true }))) return;
-    this.checked = currentState;
-  }
-  connectedCallback() {
-    this.tabIndex = 0;
-    super.connectedCallback();
-    this.role ||= "checkbox";
-  }
-  updateAriaAttributes() {
-    super.updateAriaAttributes?.();
-    this.ariaChecked = toAriaBooleanAttribute(this.checked, false);
-  }
-  #handleClick;
-  #handleKeyboardEvent;
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], CheckboxFormControl.prototype, "checked", 2);
-__decorateClass([
-  property()
-], CheckboxFormControl.prototype, "value", 2);
-
-const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
-const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl {
-  constructor() {
-    super();
-    this.value = [];
-    this.#handleChangeEvent = (event) => {
-      if (this.isControl(event.target)) {
-        this.#handleControlChange(event);
-      }
-    };
-    this.#handleControlChange = (event) => {
-      if (!this.isControl(event.target)) return;
-      if (event.target.checked) {
-        this.updateValue([...this.value, event.target.value], true);
-      } else {
-        this.updateValue(
-          this.value.filter((value) => value !== event.target.value),
-          true
-        );
-      }
-    };
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChangeEvent);
-    }
-  }
-  get childGroups() {
-    return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
-  }
-  get controls() {
-    return this.#findControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
-  }
-  get selectedControls() {
-    return this.controls.filter((control) => this.isControlChecked(control));
-  }
-  get groupControl() {
-    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR))[0] ?? null;
-  }
-  async firstUpdated(_changedProperties) {
-    await 0;
-    this.value = this.controls.filter((control) => control.checked).map((control) => control.value);
-  }
-  toFormValue() {
-    const formData = new FormData();
-    this.value.forEach((value, index) => {
-      formData.append(`${this.name}[${index}]`, value);
-    });
-    return formData;
-  }
-  isControl(element) {
-    return element instanceof CheckboxFormControl;
-  }
-  isGroupControl(element) {
-    return this.isControl(element) && element.hasAttribute(GROUP_CONTROL_SELECTOR);
-  }
-  isControlChecked(control) {
-    return this.value.includes(control.value);
-  }
-  updated(props) {
-    super.updated(props);
-    if (props.has("value")) {
-      this.updateControls((control) => {
-        control.checked = this.isControlChecked(control);
-      });
-      if (this.groupControl) {
-        this.groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
-        if ("indeterminate" in this.groupControl) {
-          this.groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
-        }
-      }
-    }
-    if (props.has("name")) {
-      this.updateControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (props.has("disabled")) {
-      this.updateControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (props.has("readonly")) {
-      this.updateControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-  }
-  updateControls(updateFn) {
-    this.controls.forEach(updateFn);
-  }
-  updateValue(value, dispatchEvent) {
-    this.value = value;
-    for (const group of this.childGroups) {
-      const groupValue = this.value.filter((value2) => group.controls.some((control) => control.value === value2));
-      group.updateValue(groupValue, false);
-    }
-    if (!dispatchEvent) return;
-    this.emit("change", { bubbles: true });
-  }
-  #findControls(predicate) {
-    return this.elements.filter((element) => this.isControl(element) && predicate(element));
-  }
-  #handleChangeEvent;
-  #handleControlChange;
-};
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], _CheckboxGroupFormControl.prototype, "elements", 2);
-__decorateClass([
-  property({ type: Array })
-], _CheckboxGroupFormControl.prototype, "value", 2);
-let CheckboxGroupFormControl = _CheckboxGroupFormControl;
-
-const ActiveDescendantsControllerOptions = (options) => ({
-  getItems: () => [],
-  ...options
-});
-class ActiveDescendantsController {
-  #host;
-  #options;
-  #activeIndex = -1;
-  get activeIndex() {
-    return this.#activeIndex;
-  }
-  get activeItem() {
-    return this.items[this.#activeIndex];
-  }
-  get items() {
-    return this.#options.getItems().filter((item) => item.isConnected);
-  }
-  constructor(host, options) {
-    this.#host = host;
-    this.#options = ActiveDescendantsControllerOptions(options);
-    host.addController(this);
-  }
-  activate(initialActiveIndex) {
-    if (initialActiveIndex === void 0) {
-      this.first();
-    } else {
-      this.update(initialActiveIndex);
-    }
-    this.#host.addEventListener("keydown", this.#handleKeyboardEvent);
-  }
-  deactivate() {
-    this.#host.removeEventListener("keydown", this.#handleKeyboardEvent);
-    this.update();
-  }
-  previous() {
-    const index = this.items.findLastIndex((item, index2) => item.canActivate() && this.#activeIndex > index2);
-    this.update(index);
-  }
-  next() {
-    const index = this.items.findIndex((item, index2) => item.canActivate() && this.#activeIndex < index2);
-    this.update(index);
-  }
-  first() {
-    this.update(this.items.findIndex((item) => item.canActivate()));
-  }
-  last() {
-    this.update(this.items.findLastIndex((item) => item.canActivate()));
-  }
-  select(item) {
-    const index = this.items.indexOf(item);
-    if (index === -1 || !item.canActivate()) return;
-    this.update(index);
-  }
-  update(index, force = false) {
-    const previousActiveItem = this.items[this.#activeIndex];
-    const activeItem = this.items[index ?? this.#activeIndex];
-    if (force !== false || !activeItem?.canActivate()) return;
-    this.#activeIndex = index ?? this.#activeIndex;
-    this.#host.setAttribute("aria-activedescendant", activeItem?.id ?? "");
-    previousActiveItem?.deactivate();
-    activeItem?.activate();
-    this.#options.onChange?.(previousActiveItem, activeItem, previousActiveItem === void 0 && !!activeItem);
-  }
-  #handleKeyboardEvent = (event) => {
-    const key = getKeyInfo(event);
-    if (!(key.up || key.down || key.start || key.end)) return;
-    event.preventDefault();
-    if (key.down) {
-      this.next();
-    } else if (key.up) {
-      this.previous();
-    } else if (key.start) {
-      this.first();
-    } else if (key.end) {
-      this.last();
-    }
-  };
-}
-
-let uniqueIdCounter = 0;
-function getUniqueId(prefix) {
-  return `${prefix}-${uniqueIdCounter++}`;
-}
-
-class OptionControl extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.role = null;
-    this.value = "";
-    this.selected = false;
-    this.readonly = false;
-  }
-  #label;
-  set label(value) {
-    this.#label = value;
-  }
-  get label() {
-    return (this.#label || this.textContent?.trim()) ?? "";
-  }
-  canActivate() {
-    return !(this.disabled || this.hidden);
-  }
-  canSelect() {
-    return this.canActivate();
-  }
-  isActive() {
-    return this.hasAttribute("odx-active") && !this.canActivate();
-  }
-  activate() {
-    if (!this.canActivate()) return;
-    this.toggleAttribute("odx-active", true);
-  }
-  deactivate() {
-    this.toggleAttribute("odx-active", false);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "option";
-    this.id ||= getUniqueId(this.localName);
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selected")) {
-      this.ariaSelected = this.canSelect() ? toAriaBooleanAttribute(this.selected, false) : null;
-    }
-  }
-}
-__decorateClass([
-  property({ type: String })
-], OptionControl.prototype, "label", 1);
-__decorateClass([
-  property()
-], OptionControl.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], OptionControl.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], OptionControl.prototype, "readonly", 2);
-__decorateClass([
-  property()
-], OptionControl.prototype, "type", 2);
-
-class ListboxFormControl extends FormControl {
-  constructor() {
-    super();
-    this.activeDescendants = new ActiveDescendantsController(this, {
-      getItems: () => this.options,
-      onChange: (_, option, firstChange) => {
-        option?.scrollIntoView();
-        if (!(option && this.canAutoSelect(option)) || firstChange || option.selected) return;
-        this.toggleOption(option, true);
-      }
-    });
-    this.autoSelect = false;
-    this.multiple = false;
-    this.placeholder = "";
-    this.value = "";
-    this.#handleBlur = (_event) => {
-      this.activeDescendants.deactivate();
-    };
-    this.#handleClick = (event) => {
-      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
-      if (!option) return;
-      this.toggleOption(option);
-      this.#handleOptionSelection(option);
-    };
-    this.#handleFocus = (_event) => {
-      this.activeDescendants.activate(this.selectedIndices[0]);
-    };
-    this.#handleKeydown = (event) => {
-      if (event.target !== this) return;
-      const activeOption = this.activeDescendants.activeItem;
-      if (!activeOption) return;
-      const key = getKeyInfo(event);
-      if (!(key.enter || key.space)) return;
-      if (this.multiple) {
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-      }
-      this.toggleOption(activeOption);
-      this.#handleOptionSelection(activeOption);
-    };
-    if (!isServer) {
-      this.addEventListener("focusout", this.#handleBlur);
-      this.addEventListener("focusin", this.#handleFocus);
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.#handleKeydown);
-    }
-  }
-  get selectedOptions() {
-    return this.options.filter((option) => option.selected);
-  }
-  get selectedIndices() {
-    return this.selectedOptions.map((option) => this.options.indexOf(option));
-  }
-  canAutoSelect(option) {
-    return this.autoSelect && !this.multiple && this.canSelect(option);
-  }
-  canSelect(option) {
-    return option.canSelect();
-  }
-  toggleOption(option, state) {
-    if (!this.canSelect(option)) return;
-    const newState = state ?? (this.required && !this.multiple || !option.selected);
-    if (this.disabled || this.readonly) return;
-    option.selected = newState;
-    this.updateValue(option);
-    if (newState) {
-      option.scrollIntoView();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "listbox";
-    this.id ||= getUniqueId(this.localName);
-  }
-  handleSlotChange() {
-    this.value ||= this.multiple ? this.selectedOptions.map((option) => option.value) : this.selectedOptions[0]?.value ?? "";
-    this.requestUpdate("value");
-  }
-  updateValue(option) {
-    const oldValue = this.value;
-    if (this.multiple) {
-      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
-      this.value = option?.selected ? [...value, option.value] : value.filter((value2) => value2 !== option?.value);
-    } else {
-      this.value = option?.selected ? option.value : "";
-    }
-    if (option) {
-      this.activeDescendants.select(option);
-    }
-    if (oldValue === this.value) return;
-    this.requestUpdate();
-    this.emit("change");
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("value")) {
-      this.updateOptions((option) => {
-        if (!option.canSelect()) return;
-        option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
-      });
-    }
-    if (props.has("multiple")) {
-      this.#handleMultipleChange();
-    }
-    if (props.has("required") || props.has("value")) {
-      if (!this.selectedOptions[0]?.selected) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, this.selectedOptions[0]);
-    }
-  }
-  updateOptions(updateFn) {
-    for (const option of this.options ?? []) {
-      updateFn(option);
-    }
-  }
-  #handleOptionSelection(option) {
-    if (!option.selected) return;
-    this.emit("select", { detail: option });
-  }
-  #handleMultipleChange() {
-    const optionType = this.multiple ? "checkbox" : null;
-    this.updateOptions((option) => {
-      option.type = optionType;
-    });
-    if (!this.multiple && this.selectedOptions[0]) {
-      this.updateValue(this.selectedOptions[0]);
-    }
-  }
-  #handleBlur;
-  #handleClick;
-  #handleFocus;
-  #handleKeydown;
-}
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-select" })
-], ListboxFormControl.prototype, "autoSelect", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], ListboxFormControl.prototype, "multiple", 2);
-__decorateClass([
-  property()
-], ListboxFormControl.prototype, "placeholder", 2);
-__decorateClass([
-  property()
-], ListboxFormControl.prototype, "value", 2);
-
-const MIN_STEP_VALUE = 1 / 2 ^ 16;
-class NumberFormControl extends FormControl {
-  constructor() {
-    super(...arguments);
-    this.min = 0;
-    this.max = 100;
-    this.step = 1;
-    this.value = 0;
-  }
-  getValueText() {
-    return this.ariaValueText?.trim() ?? "";
-  }
-  willUpdate(props) {
-    if (props.has("value")) {
-      this.internals.ariaValueNow = String(this.value);
-      this.internals.ariaValueText = this.getValueText();
-    }
-    if (props.has("min")) {
-      this.internals.ariaValueMin = String(this.min);
-    }
-    if (props.has("max")) {
-      this.internals.ariaValueMax = String(this.max);
-    }
-    if (props.has("step")) {
-      this.step = Math.max(MIN_STEP_VALUE, this.step);
-    }
-    this.value = Math.max(this.min, Math.min(this.value, this.max));
-    super.willUpdate(props);
-  }
-  toFormValue() {
-    return String(this.value);
-  }
-}
-__decorateClass([
-  property({ type: Number })
-], NumberFormControl.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number })
-], NumberFormControl.prototype, "max", 2);
-__decorateClass([
-  property({ type: Number })
-], NumberFormControl.prototype, "step", 2);
-__decorateClass([
-  property({ type: Number })
-], NumberFormControl.prototype, "value", 2);
-
-class RadioGroupFormControl extends FormControl {
-  constructor() {
-    super();
-    this.value = "";
-    this.#handleChange = ({ target }) => {
-      if (!this.isControl(target) || this.value === target.value) return;
-      this.value = target.value;
-    };
-    if (!isServer) {
-      this.addEventListener("change", this.#handleChange, { capture: true });
-      new RovingTabindexController(this, {
-        direction: "both",
-        hostDelegatesFocus: true,
-        elements: () => this.getControls(),
-        elementEnterAction: (element) => element.click(),
-        focusInIndex: (elements) => {
-          const selectedIndex = elements.findIndex((control) => this.isControlChecked(control));
-          return selectedIndex !== -1 ? selectedIndex : 0;
-        }
-      });
-    }
-  }
-  static {
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  getControls() {
-    return this.elements.filter((element) => this.isControl(element));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role ||= "radiogroup";
-  }
-  isControl(element) {
-    return element instanceof CheckboxFormControl;
-  }
-  isControlChecked(control) {
-    return this.value === control.value;
-  }
-  willUpdate(changes) {
-    super.update(changes);
-    if (changes.has("value")) {
-      this.updateControls((control) => {
-        control.checked = this.isControlChecked(control);
-      });
-    }
-    if (changes.has("name")) {
-      this.updateControls((control) => {
-        control.name = this.name;
-      });
-    }
-    if (changes.has("disabled")) {
-      this.updateControls((control) => {
-        control.disabled = this.disabled;
-      });
-    }
-    if (changes.has("readonly")) {
-      this.updateControls((control) => {
-        control.readonly = this.readonly;
-      });
-    }
-    if (changes.has("required") || changes.has("value")) {
-      const [firstControl] = this.getControls();
-      if (!firstControl) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
-    }
-  }
-  updateControls(updateFn) {
-    this.getControls().forEach(updateFn);
-  }
-  #handleChange;
-}
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], RadioGroupFormControl.prototype, "elements", 2);
-__decorateClass([
-  property()
-], RadioGroupFormControl.prototype, "value", 2);
-
-const DragControllerOptions = (config) => ({
-  getDraggableElements: () => [],
-  ...config
-});
-class DragController {
-  #host;
-  #options;
-  #dragTargets = /* @__PURE__ */ new WeakSet();
-  #listeners = /* @__PURE__ */ new Map();
-  get draggableElements() {
-    return this.#options.getDraggableElements().filter((element) => !element.dragDisabled);
-  }
-  get container() {
-    return this.#options.getContainer?.() ?? this.#host;
-  }
-  constructor(host, options) {
-    this.#host = host;
-    this.#options = DragControllerOptions(options);
-    this.#host.addController(this);
-  }
-  hostConnected() {
-    this.#host.style.touchAction = "none";
-  }
-  hostDisconnected() {
-    this.#host.style.touchAction = "";
-    for (const removeListener of this.#listeners.values()) {
-      removeListener();
-    }
-  }
-  hostUpdated() {
-    this.#dragTargets = new WeakSet(this.draggableElements);
-    this.#host.removeEventListener("pointerdown", this.#handleDragStart);
-    this.#host.addEventListener("pointerdown", this.#handleDragStart);
-  }
-  isDraggable(element) {
-    if (element instanceof HTMLElement) {
-      return "isDragActive" in element && this.#dragTargets.has(element);
-    }
-    return false;
-  }
-  #handleDragStart = async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const target = this.#getDragTarget(event);
-    if (!target) return;
-    const onPointerMove = (event2) => this.#handleDragMove(event2, target);
-    const onPointerUp = (event2) => this.#handleDragEnd(event2, target);
-    target.beforeDragStart?.({ event, position: this.#calculatePosition(event) });
-    this.#host.setPointerCapture(event.pointerId);
-    this.#host.addEventListener("pointermove", onPointerMove);
-    this.#host.addEventListener("pointerup", onPointerUp, { once: true });
-    this.#listeners.set(target, () => {
-      this.#host.removeEventListener("pointermove", onPointerMove);
-      this.#host.removeEventListener("pointerup", onPointerUp);
-    });
-    await 0;
-    target.dragStart?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragMove = (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragMove?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragEnd = async (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragEnd?.({ event, position: this.#calculatePosition(event) });
-    this.#host.releasePointerCapture(event.pointerId);
-    this.#listeners.get(target)?.();
-    this.#listeners.delete(target);
-    this.#host.requestUpdate();
-    await this.#host.updateComplete;
-    target.afterDragEnd?.({ event, position: this.#calculatePosition(event) });
-  };
-  #calculatePosition(event) {
-    const { left, top, width } = this.container.getBoundingClientRect();
-    return { x: (event.clientX - left) / width * 100, y: (event.clientY - top) / width * 100 };
-  }
-  #getDragTarget(event) {
-    return minBy(this.draggableElements, (element) => element.getDistance?.(this.container, event) ?? Number.MAX_SAFE_INTEGER) ?? null;
-  }
-}
-
-const ExpandableItemManagerOptions = (options) => ({
-  ...options
-});
-class ExpandableItemManager {
-  #host;
-  #config;
-  get items() {
-    return this.#config.getItems?.() ?? [];
-  }
-  constructor(host, options) {
-    this.#host = host;
-    this.#config = ExpandableItemManagerOptions(options);
-    this.#host.addController(this);
-    if (!isServer) {
-      this.#host.addEventListener("toggle", this.#handleToggle);
-      this.#host.addEventListener("click", this.#handleClick);
-    }
-  }
-  #handleToggle = (event) => {
-    if (!event.target) return;
-    event.stopPropagation();
-    if (event.newState !== "open" || this.#host.multiple) return;
-    for (const item of this.items) {
-      if (event.target === item) continue;
-      item.toggle(false);
-    }
-  };
-  #handleClick = (event) => {
-    const item = getElementFromEvent(event, (node) => this.items.includes(node));
-    if (!(item && getElementFromEvent(event, (node) => node === item.getExpandControl()))) return;
-    event.stopPropagation();
-    item.toggle();
-  };
-}
-
-const optionalAttr = (value) => {
-  return value == null || value === "" ? nothing : value;
-};
-function optionalSlot(host, slotName) {
-  if (host.querySelector(`[slot="${slotName}"]`)) {
-    return html`
-      <div class="${slotName}" part="${slotName}-container">
-        <slot name="${slotName}" @slotchange="${() => host.requestUpdate()}"></slot>
-      </div>
-    `;
-  }
-  return nothing;
-}
-
-const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-normal);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part=base]::-moz-focus-inner{border:0;padding:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--color-background: var(--odx-color-background-transparent-pressed);--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));font-size:var(--odx-typography-font-size-2)}}@layer state{:host(:not([loading])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
-
-class InteractiveLink extends CanBeDisabled(CustomElement) {
-  constructor() {
-    super(...arguments);
-    this.href = "";
-    this.target = "";
-    this.rel = "noreferrer noopener";
-  }
-  static {
-    /** @internal */
-    this.shadowRootOptions = {
-      ...CustomElement.shadowRootOptions,
-      delegatesFocus: true
-    };
-  }
-  render() {
-    const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
-    return html`<a
-      part="base"
-      role="button"
-      aria-label="${optionalAttr(ariaLabel)}"
-      aria-haspopup="${optionalAttr(ariaHasPopup)}"
-      aria-expanded="${optionalAttr(ariaExpanded)}"
-      aria-current="${optionalAttr(ariaCurrent)}"
-      aria-hidden="${optionalAttr(ariaHidden)}"
-      href=${optionalAttr(this.href)}
-      target=${optionalAttr(this.href && this.target)}
-      download=${optionalAttr(this.href && this.download)}
-      rel=${optionalAttr(this.href && this.rel)}
-    >
-      ${this.renderContent()}
-    </a>`;
-  }
-  renderContent() {
-    return html`<slot></slot>`;
-  }
-}
-__decorateClass([
-  query('[part~="base"]', true)
-], InteractiveLink.prototype, "nativeElement", 2);
-__decorateClass([
-  property()
-], InteractiveLink.prototype, "href", 2);
-__decorateClass([
-  property()
-], InteractiveLink.prototype, "target", 2);
-__decorateClass([
-  property()
-], InteractiveLink.prototype, "rel", 2);
-__decorateClass([
-  property()
-], InteractiveLink.prototype, "download", 2);
-
-class InteractiveElement extends InteractiveLink {
-  constructor() {
-    super(...arguments);
-    this.loading = false;
-    this.lineClamp = 2;
-  }
-  static {
-    this.styles = unsafeCSS(styles);
-  }
-  render() {
-    if (this.href) {
-      return super.render();
-    }
-    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-    const type = "type" in this ? this.type : "button";
-    return html`
-      <button
-        id=${optionalAttr(this.id)}
-        part="base"
-        aria-label="${optionalAttr(ariaLabel)}"
-        aria-haspopup="${optionalAttr(ariaHasPopup)}"
-        aria-expanded="${optionalAttr(ariaExpanded)}"
-        type=${type}
-        ?disabled=${this.disabled || this.loading}
-      >
-        ${this.renderContent()}
-      </button>
-    `;
-  }
-  renderContent(withSpinner = true) {
-    return html`
-      ${this.#renderSlot("prefix", !withSpinner)}
-      <odx-line-clamp part="label" .max=${this.lineClamp}>
-        ${this.#renderSlot(void 0, !withSpinner)}
-      </odx-line-clamp>
-      ${this.#renderSlot("suffix", !withSpinner)}
-    `;
-  }
-  renderLoader() {
-    return html`<odx-loading-spinner part="loader"></odx-loading-spinner>`;
-  }
-  #renderSlot(name, force) {
-    if (!force && this.loading && this.#isLoaderSlot(name)) {
-      return this.renderLoader();
-    }
-    return html`<slot name=${optionalAttr(name)}></slot>`;
-  }
-  #isLoaderSlot(name) {
-    return name === void 0 && this.loaderSlot === "default" || this.querySelectorAll(`[slot=${this.loaderSlot || name}]`).length > 0;
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true, useDefault: true })
-], InteractiveElement.prototype, "loading", 2);
-__decorateClass([
-  property({ type: Number, attribute: "line-clamp" })
-], InteractiveElement.prototype, "lineClamp", 2);
-
-const CanBeExpanded = (superClass) => {
-  class CanBeExpandedMixin extends superClass {
-    constructor() {
-      super(...arguments);
-      this.expanded = false;
-    }
-    getExpandControl() {
-      return this;
-    }
-    toggle(state, emitEvent = true) {
-      const newState = state ?? !this.expanded;
-      if (this.disabled || this.expanded === newState) return;
-      const currentState = this.expanded;
-      this.expanded = newState;
-      const toggleEvent = new ToggleEvent("toggle", {
-        composed: true,
-        bubbles: true,
-        oldState: currentState ? "open" : "closed",
-        newState: newState ? "open" : "closed"
-      });
-      if (!(emitEvent && this.emit(toggleEvent))) return;
-      this.expanded = currentState;
-    }
-  }
-  __decorateClass([
-    property({ type: Boolean, reflect: true, useDefault: true })
-  ], CanBeExpandedMixin.prototype, "expanded", 2);
-  return CanBeExpandedMixin;
-};
-
-const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
-const IsDraggable = (superClass) => {
-  class IsDraggableElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.dragDisabled = false;
-    }
-    get isDragActive() {
-      return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
-    }
-    dragStart() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    }
-    afterDragEnd() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    }
-  }
-  __decorateClass([
-    property({ type: Boolean })
-  ], IsDraggableElement.prototype, "dragDisabled", 2);
-  return IsDraggableElement;
-};
-
-const Placement = {
-  TOP: "top",
-  TOP_START: "top-start",
-  TOP_END: "top-end",
-  RIGHT: "right",
-  RIGHT_START: "right-start",
-  RIGHT_END: "right-end",
-  BOTTOM: "bottom",
-  BOTTOM_START: "bottom-start",
-  BOTTOM_END: "bottom-end",
-  LEFT: "left",
-  LEFT_START: "left-start",
-  LEFT_END: "left-end"
-};
-
-const Shape = {
-  CIRCLE: "circle",
-  RECTANGLE: "rectangle"
-};
-
-const Size = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl",
-  XXL: "xxl"
-};
-
-const Variant = {
-  NEUTRAL: "neutral",
-  PRIMARY: "primary",
-  ACCENT: "accent",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger",
-  GHOST: "ghost"
-};
-
-function PopoverPlacementOptions(options) {
-  return {
-    placement: "bottom",
-    enableFallback: true,
-    fallbackAxisSideDirection: "end",
-    matchReferenceWidth: false,
-    offset: 0,
-    ...options
-  };
-}
-async function computePopoverPlacement(referenceElement, floatingElement, options) {
-  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight } = options;
-  const arrowSize = arrowElement?.offsetWidth ?? 0;
-  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 2 }) : void 0;
-  const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
-  floatingElement.setAttribute("popover-placement", placement);
-  const result = await computePosition(referenceElement, floatingElement, {
-    strategy: "fixed",
-    placement,
-    middleware: [
-      offset(offset$1 + arrowSize / 2),
-      shift({ padding: 12 }),
-      flipMiddleWare,
-      size({
-        apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {
-          floatingElement.style.setProperty("--_popover-min-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : null);
-          floatingElement.style.setProperty("--_popover-max-inline-size", toPx(availableWidth));
-          floatingElement.style.setProperty("--_popover-min-block-size", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
-          floatingElement.style.setProperty("--_popover-max-block-size", toPx(availableHeight));
-          floatingElement.setAttribute("popover-placement", currentPlacement);
-        }
-      }),
-      arrowMiddleware,
-      hide()
-    ]
-  });
-  if (arrowElement && result.middlewareData.arrow) {
-    Object.assign(arrowElement.style, {
-      left: toPx(result.middlewareData.arrow.x),
-      top: toPx(result.middlewareData.arrow.y)
-    });
-  }
-  floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
-  floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
-}
-function positionUpdater(referenceElement, floatingElement, options) {
-  return autoUpdate(
-    referenceElement,
-    floatingElement,
-    throttle(() => referenceElement && computePopoverPlacement(referenceElement, floatingElement, options), 1e3 / 30),
-    { animationFrame: true }
-  );
-}
-
-class SharedResizeObserverInstance {
-  #observer;
-  #handlers = /* @__PURE__ */ new WeakMap();
-  observe(target, handler, options = { fpsLimit: 30 }) {
-    this.unobserve(target);
-    this.#handlers.set(target, throttle(handler, 1e3 / options.fpsLimit));
-    this.#observer ??= new ResizeObserver((entries) => {
-      if (!this.#observer) return;
-      for (const entry of entries) {
-        this.#handlers.get(entry.target)?.([entry], this.#observer);
-      }
-    });
-    this.#observer?.observe(target, options);
-  }
-  unobserve(target) {
-    this.#observer?.unobserve(target);
-    this.#handlers.delete(target);
-  }
-}
-const SharedResizeObserver = new SharedResizeObserverInstance();
-
-export { ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, computePopoverPlacement, customElement, findClosestDocument, forwardEvent, getAssignedElement, getElementFromEvent, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, positionUpdater, toAriaBooleanAttribute, toPx, waitForAnimations };
+export { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints } from './lib/breakpoints.js';
+export { formatDate, formatList, formatNumber, formatRelativeTime, parseDate } from './lib/format.js';
+export { LocalizationOptions, getLocale, getLocalizationOptions, setLocale, setLocalizationOptions } from './lib/localization.js';
+export { computed, effect, sharedSignal, signal } from './lib/signals.js';
+export { attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme, toggleDarkMode, userPrefersDarkMode } from './lib/theming.js';