@odx/foundation 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/main.js

@@ -0,0 +1,1149 @@
+import { r as round, t as toMerged, c as createFocusTrap, R as RovingTabindexController } from './vendor-okSCJWYL.js';
+import { isServer, nothing, html, LitElement, unsafeCSS, CSSResult } from 'lit';
+import { directive, Directive } from 'lit/directive.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { Signal } from '@lit-labs/signals';
+
+function createMutationObserver(callback) {
+  try {
+    return new MutationObserver(callback);
+  } catch {
+    return { takeRecords: () => [], observe: () => void 0, disconnect: () => void 0 };
+  }
+}
+function toggleAttribute(element, name, value) {
+  if (!element) return;
+  if (typeof value === "boolean") {
+    element.toggleAttribute(name, value);
+    return;
+  }
+  if (value != null) {
+    element.setAttribute(name, value.toString());
+    return;
+  }
+  element.removeAttribute(name);
+}
+function getElementFromEvent(event, filterFn) {
+  return event.composedPath().find((node) => node instanceof Element && filterFn(node));
+}
+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;
+}
+function toPx(value) {
+  const coercedValue = Number(value);
+  if (Number.isNaN(coercedValue)) return null;
+  return `${round(coercedValue, 2)}px`;
+}
+function getAssignedElements(host, ...slots) {
+  const selector = slots.map((slot) => `[slot=${slot}]`).join(", ") || "*";
+  return Array.from(host.querySelectorAll(`:is(${selector})`));
+}
+async function waitForAnimations(element, subtree = false) {
+  if (!element || typeof element.getAnimations !== "function") {
+    return [];
+  }
+  return Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
+}
+function forwardEvent(event) {
+  event.stopPropagation();
+  this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true, cancelable: true }));
+}
+
+function createOptions(defaultOptions) {
+  return (options) => toMerged(defaultOptions, options ?? {});
+}
+
+const FocusTrapControllerOptions = createOptions({
+  escapeDeactivates: false,
+  tabbableOptions: { getShadowRoot: true }
+});
+class FocusTrapController {
+  #host;
+  #options;
+  #focusTrap;
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = FocusTrapControllerOptions(options);
+    this.#host.addController(this);
+  }
+  async activate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.activate();
+  }
+  async deactivate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.deactivate();
+  }
+  async toggle(state) {
+    if (state ?? !this.#focusTrap?.active) {
+      return this.activate();
+    }
+    return this.deactivate();
+  }
+  async hostConnected() {
+    if (isServer) return;
+    await this.#host.updateComplete;
+    this.#focusTrap ??= createFocusTrap(this.#host, {
+      ...this.#options,
+      checkCanFocusTrap: this.#checkCanFocusTrap.bind(this),
+      checkCanReturnFocus: this.#checkCanReturnFocus.bind(this)
+    });
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  async #checkCanFocusTrap(containers) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanFocusTrap?.(containers);
+  }
+  async #checkCanReturnFocus(trigger) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanReturnFocus?.(trigger);
+  }
+}
+
+function ariaPropertyToAttribute(property) {
+  return property.replace("aria", "aria-").replace(/Elements?/g, "").toLowerCase();
+}
+function requestUpdateOnAriaChange(ariaProperties) {
+  return (ctor) => {
+    for (const ariaProperty of ariaProperties) {
+      ctor.createProperty(ariaProperty, {
+        attribute: ariaPropertyToAttribute(ariaProperty),
+        reflect: true
+      });
+    }
+  };
+}
+
+const optionalAttr = (value) => {
+  if (value === void 0 || value === null || value === "") return nothing;
+  return 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;
+}
+
+class SlotFallbackDirective extends Directive {
+  update({ options, element }) {
+    const host = options?.host;
+    if (!host || !(element instanceof HTMLSlotElement)) return;
+    const attributeName = ["empty-slot", element.name].filter(Boolean).join("-");
+    toggleAttribute(host, attributeName, !host.textContent?.trim() && element.assignedElements().length === 0);
+  }
+  render() {
+  }
+}
+const emptySlotFallbackFix = directive(SlotFallbackDirective);
+
+const customElementStyles = "@layer reset,base,variant,state,theme,override;@layer reset{:where(*,*:before,*:after){box-sizing:border-box}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@layer base;@layer base{h1,h2,h3,h4,h5,h6{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);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:where(:host){box-sizing:border-box;border:none;color:inherit;outline:none}}";
+
+function toCSSResult(value) {
+  return value instanceof CSSResult || value instanceof CSSStyleSheet ? value : unsafeCSS(value);
+}
+function customElement(selector, styles = []) {
+  if (selector && globalThis.customElements.get(selector)) return () => void 0;
+  const preparedStyles = [customElementStyles, styles].flat().map(toCSSResult);
+  return (target) => {
+    target.styles = target.styles ? [target.styles, preparedStyles].flat() : preparedStyles;
+    if (selector) {
+      target.selector = selector;
+      customElements.define(target.selector, target);
+    }
+  };
+}
+class CustomElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+  emit(event, eventInit) {
+    return !this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true, cancelable: true, ...eventInit }));
+  }
+}
+
+function toAriaBooleanAttribute(value, removeOnFalse = true) {
+  if (removeOnFalse && value === false) return null;
+  return String(value);
+}
+function fromAriaBooleanAttribute(value) {
+  return value === "true";
+}
+
+const appliedClassMixins = /* @__PURE__ */ new WeakMap();
+function wasMixinPreviouslyApplied(mixin, superClass) {
+  let klass = superClass;
+  while (klass) {
+    if (appliedClassMixins.get(klass) === mixin) {
+      return true;
+    }
+    klass = Object.getPrototypeOf(klass);
+  }
+  return false;
+}
+function dedupeMixin(mixin) {
+  return (superClass) => {
+    if (wasMixinPreviouslyApplied(mixin, superClass)) {
+      return superClass;
+    }
+    const mixedClass = mixin(superClass);
+    appliedClassMixins.set(mixedClass, mixin);
+    return mixedClass;
+  };
+}
+
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$c(target, key, result);
+  return result;
+};
+const CanBeDisabled = dedupeMixin((superClass) => {
+  class CanBeDisabledElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.#initialTabIndex = null;
+      this._contextDisabled = false;
+      this.disabled = false;
+    }
+    #initialTabIndex;
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("_contextDisabled") || props.has("disabled")) {
+        this.#handleDisableChange();
+      }
+    }
+    updated(props) {
+      super.updated?.(props);
+      if (props.has("_contextDisabled") || props.has("disabled")) {
+        this.onDisabledChanged?.(this._contextDisabled || this.disabled);
+      }
+    }
+    #handleDisableChange() {
+      const disabled = this._contextDisabled || this.disabled;
+      this.ariaDisabled = toAriaBooleanAttribute(disabled);
+      if (disabled) {
+        this.tabIndex = -1;
+      } else if (this.#initialTabIndex !== null) {
+        this.tabIndex = this.#initialTabIndex;
+      } else {
+        this.removeAttribute("tabindex");
+      }
+    }
+  }
+  __decorateClass$c([
+    property({ type: Boolean })
+  ], CanBeDisabledElement.prototype, "_contextDisabled", 2);
+  __decorateClass$c([
+    property({ type: Boolean })
+  ], CanBeDisabledElement.prototype, "disabled", 2);
+  return CanBeDisabledElement;
+});
+
+var __defProp$b = 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$b(target, key, result);
+  return result;
+};
+const CanBeReadonly = dedupeMixin((superClass) => {
+  class CanBeReadonlyElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.readonly = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("readonly")) {
+        this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
+      }
+    }
+  }
+  __decorateClass$b([
+    property({ type: Boolean, reflect: true })
+  ], CanBeReadonlyElement.prototype, "readonly", 2);
+  return CanBeReadonlyElement;
+});
+
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$a(target, key, result);
+  return result;
+};
+const CanBeRequired = dedupeMixin((superClass) => {
+  class CanBeRequiredElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.required = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("required")) {
+        this.ariaRequired = toAriaBooleanAttribute(this.required);
+      }
+    }
+  }
+  __decorateClass$a([
+    property({ type: Boolean, reflect: true })
+  ], CanBeRequiredElement.prototype, "required", 2);
+  return CanBeRequiredElement;
+});
+
+const CanBeValidated = dedupeMixin((superClass) => {
+  class CanBeValidatedElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusable = true;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
+    setValidity(flags, target = this) {
+      const errorKey = Object.keys(flags ?? {}).find((key) => flags?.[key] === true);
+      this.internals.setValidity(flags, errorKey ?? "unknown error", target);
+    }
+  }
+  return CanBeValidatedElement;
+});
+
+var __defProp$9 = 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$9(target, key, result);
+  return result;
+};
+const FormControl = dedupeMixin((superClass) => {
+  class FormControlElement extends CanBeValidated(CanBeRequired(CanBeReadonly(CanBeDisabled(superClass)))) {
+    constructor(...args) {
+      super(...args);
+      this.name = "";
+      this.value = "";
+      this.internals = this.attachInternals();
+    }
+    static {
+      this.formAssociated = true;
+    }
+    static {
+      this.shadowRootOptions = {
+        ...CustomElement.shadowRootOptions,
+        delegatesFocus: true
+      };
+    }
+    get form() {
+      return this.internals.form;
+    }
+    toFormValue() {
+      return this.value;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      this.updateAriaAttributes?.();
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass$9([
+    property()
+  ], FormControlElement.prototype, "name", 2);
+  __decorateClass$9([
+    property()
+  ], FormControlElement.prototype, "value", 2);
+  return FormControlElement;
+});
+
+const KeyboardKey = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  SPACE: " ",
+  TAB: "Tab",
+  BACKSPACE: "Backspace",
+  DELETE: "Delete",
+  END: "End",
+  HOME: "Home",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  SHIFT: "Shift",
+  CONTROL: "Control",
+  ALT: "Alt",
+  META: "Meta"
+};
+function getKeyboardEventInfo(event) {
+  const { key } = event;
+  const up = key === KeyboardKey.ARROW_UP;
+  const right = key === KeyboardKey.ARROW_RIGHT;
+  const down = key === KeyboardKey.ARROW_DOWN;
+  const left = key === KeyboardKey.ARROW_LEFT;
+  return {
+    axis: { x: left || right, y: up || down },
+    direction: { up, right, down, left },
+    actions: {
+      enter: key === KeyboardKey.ENTER,
+      escape: key === KeyboardKey.ESCAPE,
+      space: key === KeyboardKey.SPACE,
+      tab: key === KeyboardKey.TAB && !event.shiftKey,
+      backTab: key === KeyboardKey.TAB && event.shiftKey,
+      start: key === KeyboardKey.HOME,
+      end: key === KeyboardKey.END
+    }
+  };
+}
+
+var __defProp$8 = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
+class CheckboxFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.role = null;
+    this.checked = false;
+    this.#handleClick = ({ target }) => {
+      const { localName } = target;
+      if (LINK_SELECTORS.has(localName)) return;
+      this.toggle(void 0, true);
+    };
+    this.#handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter && !actions.space) return;
+      const { localName } = event.target;
+      event.preventDefault();
+      if (event.type === "keydown" || LINK_SELECTORS.has(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 {
+    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")) 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$8([
+  property({ type: Boolean, reflect: true })
+], CheckboxFormControl.prototype, "checked", 2);
+
+var __defProp$7 = 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$7(target, key, result);
+  return result;
+};
+const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
+const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.value = [];
+    this.#handleChangeEvent = (event) => {
+      const { target } = event;
+      if (!this.isControl(target)) return;
+      if (target.checked) {
+        this.updateValue([...this.value, target.value], true);
+        return;
+      }
+      this.updateValue(
+        this.value.filter((value) => value !== target.value),
+        true
+      );
+    };
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChangeEvent);
+    }
+  }
+  get childGroups() {
+    return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
+  }
+  get controls() {
+    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
+  }
+  get groupControls() {
+    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  }
+  toFormValue() {
+    const formData = new FormData();
+    this.value.forEach((value, index) => {
+      formData.append(`${this.name}[${index}]`, value);
+    });
+    return formData;
+  }
+  isIndeterminate() {
+    return this.value.length > 0 && this.value.length < this.controls.length;
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+      for (const groupControl of this.groupControls) {
+        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
+          groupControl.indeterminate = this.isIndeterminate();
+          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+        }
+      }
+    }
+    if (props.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (props.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (props.has("readonly")) {
+      this.updateCheckboxControls((control) => {
+        control.readonly = this.readonly;
+      });
+    }
+  }
+  updateCheckboxControls(updateFn) {
+    this.controls.forEach(updateFn);
+  }
+  updateValue(value, dispatchEvent) {
+    this.value = value;
+    if (!dispatchEvent) return;
+    this.emit("change");
+  }
+  #handleChangeEvent;
+  #findCheckboxControls(predicate) {
+    return this.elements.filter((element) => this.isControl(element) && predicate(element));
+  }
+};
+__decorateClass$7([
+  queryAssignedElements({ flatten: true })
+], _CheckboxGroupFormControl.prototype, "elements", 2);
+__decorateClass$7([
+  property({ type: Array })
+], _CheckboxGroupFormControl.prototype, "value", 2);
+let CheckboxGroupFormControl = _CheckboxGroupFormControl;
+
+var __defProp$6 = 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$6(target, key, result);
+  return result;
+};
+class OptionControl extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.role = null;
+    this.selected = false;
+    this.value = "";
+  }
+  getTextLabel() {
+    return this.textContent?.trim() ?? "";
+  }
+  setActive() {
+    this.setAttribute("odx-active", "true");
+  }
+  setInactive() {
+    this.removeAttribute("odx-active");
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "option";
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("selected")) {
+      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
+    }
+  }
+}
+__decorateClass$6([
+  property({ type: Boolean })
+], OptionControl.prototype, "selected", 2);
+__decorateClass$6([
+  property()
+], OptionControl.prototype, "value", 2);
+
+var __defProp$5 = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+class RadioGroupFormControl extends FormControl(CustomElement) {
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  constructor() {
+    super();
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChange, { capture: true });
+      new RovingTabindexController(this, {
+        direction: "both",
+        elements: () => this.getControls(),
+        elementEnterAction: (element) => element.click(),
+        focusInIndex: (elements) => elements.findIndex((element) => element.checked)
+      });
+    }
+  }
+  getControls() {
+    return this.elements.filter((element) => this.isControl(element));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "radiogroup";
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  update(changes) {
+    super.update?.(changes);
+    if (changes.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+    }
+    if (changes.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (changes.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (changes.has("readonly")) {
+      this.updateCheckboxControls((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);
+    }
+  }
+  async updateCheckboxControls(updateFn) {
+    await 0;
+    this.getControls().forEach(updateFn);
+  }
+  #handleChange = ({ target }) => {
+    if (!this.isControl(target) || this.value === target.value) return;
+    this.value = target.value;
+  };
+}
+__decorateClass$5([
+  queryAssignedElements({ flatten: true })
+], RadioGroupFormControl.prototype, "elements", 2);
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+class SelectFormControl extends FormControl(
+  CustomElement
+) {
+  constructor() {
+    super();
+    this.#selectedOptions = /* @__PURE__ */ new Map();
+    this.multiple = false;
+    this.value = "";
+    this.handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option || !actions.enter && !actions.space) return;
+      event.preventDefault();
+      if (event.type === "keydown") return;
+      this.toggle(option, void 0, true);
+    };
+    this.#handleClick = (event) => {
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option) return;
+      this.toggle(option, void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.handleKeyboardEvent);
+      this.addEventListener("keyup", this.handleKeyboardEvent);
+    }
+  }
+  #selectedOptions;
+  get selectedOptions() {
+    return this.#selectedOptions.values();
+  }
+  toggle(option, state, emitEvent = false) {
+    const currentState = option.selected;
+    const newState = state ?? !option.selected;
+    if (this.disabled || newState === option.selected) return;
+    option.selected = newState;
+    this.updateValue(option);
+    if (!emitEvent || !this.emit("change")) return;
+    option.selected = currentState;
+    this.updateValue(option);
+  }
+  updateValue(option) {
+    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.value;
+    }
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("multiple")) {
+      const [selectedOption] = Array.from(this.#selectedOptions.entries());
+      if (selectedOption) {
+        this.updateValue(selectedOption[1]);
+      }
+    }
+    if (changes.has("value")) {
+      this.updateSelection();
+    }
+    if (changes.has("required") || changes.has("value")) {
+      const [selectedOption] = this.#selectedOptions.values();
+      if (!selectedOption?.selected) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
+    }
+  }
+  async updateSelection() {
+    if (this.disabled) return;
+    await 0;
+    for (const option of this.options ?? []) {
+      if (option.disabled) continue;
+      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      option.setInactive();
+      if (option.selected) {
+        this.#selectedOptions.set(option.value, option);
+      } else {
+        this.#selectedOptions.delete(option.value);
+      }
+    }
+    this.requestUpdate();
+  }
+  #handleClick;
+}
+__decorateClass$4([
+  property({ type: Boolean, reflect: true })
+], SelectFormControl.prototype, "multiple", 2);
+__decorateClass$4([
+  property()
+], SelectFormControl.prototype, "value", 2);
+
+var __defProp$3 = 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$3(target, key, result);
+  return result;
+};
+const CanBeSelected = dedupeMixin((superClass) => {
+  class CanBeSelectedElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.selected = false;
+      this.ariaSelectedValue = "page";
+    }
+    willUpdate(props) {
+      super.willUpdate(props);
+      if (props.has("selected") || props.has("ariaSelectedValue")) {
+        this.ariaCurrent = this.selected ? this.ariaSelectedValue : null;
+      }
+    }
+  }
+  __decorateClass$3([
+    property({ type: Boolean })
+  ], CanBeSelectedElement.prototype, "selected", 2);
+  __decorateClass$3([
+    property()
+  ], CanBeSelectedElement.prototype, "ariaSelectedValue", 2);
+  return CanBeSelectedElement;
+});
+
+var __defProp$2 = 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$2(target, key, result);
+  return result;
+};
+const MIN_STEP_VALUE = 1 / 2 ^ 16;
+const NumberControl = dedupeMixin((superClass) => {
+  class NumberControlElement extends FormControl(superClass) {
+    constructor() {
+      super(...arguments);
+      this.min = 0;
+      this.max = 100;
+      this.step = 1;
+      this.value = 0;
+    }
+    getValueText() {
+      return this.ariaValueText?.trim() ?? "";
+    }
+    update(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.update?.(props);
+    }
+    toFormValue() {
+      return String(this.value);
+    }
+  }
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "min", 2);
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "max", 2);
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "step", 2);
+  __decorateClass$2([
+    property({ type: Number, reflect: true })
+  ], NumberControlElement.prototype, "value", 2);
+  return NumberControlElement;
+});
+
+const uniqueIdCache = /* @__PURE__ */ new Map();
+function getUniqueId(key) {
+  const nextIndex = (uniqueIdCache.get(key) ?? 0) + 1;
+  uniqueIdCache.set(key, nextIndex);
+  return `${key}-${nextIndex}`;
+}
+function clearUniqueIdCache(key) {
+  if (key) {
+    uniqueIdCache.delete(key);
+  } else {
+    uniqueIdCache.clear();
+  }
+}
+
+var __defProp$1 = 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$1(target, key, result);
+  return result;
+};
+const WithAriaControls = dedupeMixin((superClass) => {
+  class WithAriaControlsElement extends CanBeDisabled(superClass) {
+    get region() {
+      return this.nextElementSibling;
+    }
+    updateA11yAttributes() {
+      if (!this.region) return;
+      this.id ||= getUniqueId(this.localName);
+      this.role ||= "button";
+      this.region.role ||= "region";
+      this.region.id ||= `${this.id}-region`;
+      this.region.ariaHidden = this.disabled ? "true" : this.region.ariaHidden;
+      this.setAttribute("aria-controls", this.region.id);
+      this.region.setAttribute("aria-labelledby", this.id);
+    }
+    update(props) {
+      super.update(props);
+      if (props.has("disabled") || props.has("id")) {
+        this.updateA11yAttributes();
+      }
+    }
+  }
+  __decorateClass$1([
+    property({ reflect: true })
+  ], WithAriaControlsElement.prototype, "id", 2);
+  return WithAriaControlsElement;
+});
+
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const WithLoadingState = dedupeMixin((superClass) => {
+  class WithLoadingStateElement extends superClass {
+    get loadingContainer() {
+      return this;
+    }
+    set loading(value) {
+      this.loadingContainer.ariaBusy = toAriaBooleanAttribute(value);
+    }
+    get loading() {
+      return fromAriaBooleanAttribute(this.loadingContainer.ariaBusy);
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], WithLoadingStateElement.prototype, "loading", 1);
+  return WithLoadingStateElement;
+});
+
+function parseDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime()) && typeof value === "string") {
+    const timestamp = Number(value);
+    return Number.isNaN(timestamp) ? null : new Date(timestamp);
+  }
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+let needsEnqueue = true;
+const watcher = new Signal.subtle.Watcher(() => {
+  if (!needsEnqueue) return;
+  needsEnqueue = false;
+  queueMicrotask(() => {
+    needsEnqueue = true;
+    for (const signal of watcher.getPending()) {
+      signal.get();
+    }
+    watcher.watch();
+  });
+});
+function effect(callback) {
+  let cleanup;
+  const signal = new Signal.Computed(() => {
+    cleanup?.();
+    cleanup = callback() ?? void 0;
+  });
+  watcher.watch(signal);
+  signal.get();
+  return () => {
+    watcher.unwatch(signal);
+    cleanup?.();
+    cleanup = void 0;
+  };
+}
+
+function search(value, searchString, callback) {
+  let index = 0;
+  while (index < value.length) {
+    index = value.indexOf(searchString, index);
+    if (index === -1) break;
+    callback?.(index);
+    index += searchString.length;
+  }
+}
+function searchTextContent(options) {
+  const query = options.query?.trim().toLowerCase();
+  const ranges = [];
+  if (!query || query.length < options.minlength) return ranges;
+  const walker = document.createTreeWalker(options.root, NodeFilter.SHOW_TEXT);
+  while (walker.nextNode()) {
+    const content = walker.currentNode.textContent?.toLowerCase();
+    if (!content?.includes(query)) continue;
+    search(content, query, (index) => {
+      const range = new Range();
+      range.setStart(walker.currentNode, index);
+      range.setEnd(walker.currentNode, index + query.length);
+      ranges.push(range);
+    });
+  }
+  return ranges;
+}
+
+function createIntersectionObserver(callback, options) {
+  try {
+    return new IntersectionObserver(callback, options);
+  } catch {
+    return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+class SharedIntersectionObserverInstance {
+  #observer;
+  #handlers = /* @__PURE__ */ new WeakMap();
+  #updateLog = /* @__PURE__ */ new WeakMap();
+  observe(target, handler, options = { fpsLimit: 60 }) {
+    this.#observer ??= createIntersectionObserver(this.#handleIntersection);
+    this.#handlers.set(target, [handler, options.fpsLimit]);
+    this.#observer.observe(target);
+  }
+  unobserve(target) {
+    this.#handlers.delete(target);
+    this.#observer?.unobserve(target);
+  }
+  #handleIntersection = (entries) => {
+    if (!this.#observer) return;
+    for (const entry of entries) {
+      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
+      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit)) continue;
+      handler?.([entry], this.#observer);
+      this.#updateLog.set(entry.target, Date.now());
+    }
+  };
+  #shouldUpdate(target, fpsLimit) {
+    if (!target.isConnected || typeof fpsLimit !== "number" || fpsLimit < 1) return false;
+    return Date.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
+  }
+}
+const SharedIntersectionObserver = new SharedIntersectionObserverInstance();
+
+function createResizeObserver(callback) {
+  try {
+    return new ResizeObserver(callback);
+  } catch {
+    return { observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+class SharedResizeObserverInstance {
+  #observer;
+  #handlers = /* @__PURE__ */ new WeakMap();
+  #updateLog = /* @__PURE__ */ new WeakMap();
+  observe(target, handler, options = { fpsLimit: 60 }) {
+    const { fpsLimit, ...observerOptions } = options;
+    this.#observer ??= createResizeObserver(this.#handleResize);
+    this.#handlers.set(target, [handler, fpsLimit]);
+    this.#observer.observe(target, observerOptions);
+  }
+  unobserve(target) {
+    this.#handlers.delete(target);
+    this.#observer?.unobserve(target);
+  }
+  #handleResize = (entries) => {
+    if (!this.#observer) return;
+    for (const entry of entries) {
+      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
+      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit ?? 60)) continue;
+      handler?.([entry], this.#observer);
+      this.#updateLog.set(entry.target, Date.now());
+    }
+  };
+  #shouldUpdate(target, fpsLimit) {
+    if (!target.isConnected || fpsLimit < 1) return false;
+    return Date.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
+  }
+}
+const SharedResizeObserver = new SharedResizeObserverInstance();
+
+export { CanBeDisabled, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithAriaControls, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, effect, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };