@odx/foundation 1.0.0-beta.9 → 1.0.0-beta.90

package/dist/main.js

@@ -1,82 +1,49 @@
-import { isServer, LitElement, html, unsafeCSS, nothing } from 'lit';
-export { effect } from '@lit-labs/preact-signals';
-import { createFocusTrap } from 'focus-trap';
-import { r as round, u as uniqBy, R as RovingTabindexController } from './vendor-dJxQG085.js';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { createContext, ContextProvider, consume } from '@lit/context';
-import { directive, Directive } from 'lit/directive.js';
+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 ExpandableItemManagerOptions = (options) => ({
-  ...options
-});
-class ExpandableItemManager {
-  #host;
-  #config;
-  get expandableItems() {
-    return this.#config.getItems?.() ?? [];
+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>`;
   }
-  constructor(host, options) {
-    this.#host = host;
-    this.#config = ExpandableItemManagerOptions(options);
-    this.#host.addController(this);
-    if (!isServer) {
-      this.#host.addEventListener("toggle", this.#handleToggle);
+  /** @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);
   }
-  #handleToggle = (event) => {
-    if (!event.target) return;
-    event.stopPropagation();
-    if (!fromToggleEventState(event.newState) || this.#host.multiple) return;
-    for (const item of this.expandableItems) {
-      if (event.target === item) continue;
-      item.toggle(false);
-    }
-  };
 }
 
-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;
+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));
   }
-  element.removeAttribute(name);
-}
-function getElementFromEvent(event, filterFn) {
-  return event.composedPath().find((node) => node instanceof Element && filterFn(node));
+  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;
-}
-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(() => []);
+  return parent ?? document;
 }
 function forwardEvent(target, eventInit) {
   return (event) => {
@@ -88,160 +55,62 @@ function forwardEvent(target, eventInit) {
     event.preventDefault();
   };
 }
-
-const FocusTrapControllerOptions = (options) => ({
-  escapeDeactivates: false,
-  tabbableOptions: { getShadowRoot: true },
-  ...options
-});
-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);
-  }
-}
-
-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]{border:none;outline:none}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}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75)}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@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)}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)}odx-icon{--rotate: 0deg;transition:var(--odx-transition-default);transition-property:transform;transform:rotate(var(--rotate))}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}odx-list-item:has(:is(odx-button,odx-icon-button,odx-list-item::part(control)):not([aria-disabled=true]):active){--_color-background-pressed: var(--_color-background-hover)}odx-button:has(odx-icon:only-child),odx-button:has(odx-avatar){--_min-inline-size: 0}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
-
-function mergeStyleSheets(...stylesheets) {
-  const mergedStyles = [];
-  for (const styles of stylesheets) {
-    if (!styles) continue;
-    mergedStyles.push(typeof styles === "string" ? unsafeCSS(styles) : styles);
-  }
-  return uniqBy(mergedStyles, String).flat(10);
-}
-function customElement(selector, styles = []) {
-  return (target) => {
-    if (!selector) return;
-    target.selector = selector;
-    target.styles = mergeStyleSheets(customElementStyles, target.styles, ...styles);
-    target.define = () => {
-      if (customElements.get(selector)) return;
-      customElements.define(selector, target);
-    };
-  };
-}
-class CustomElement extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-  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 getElementFromEvent(event, filterFn) {
+  return event.composedPath().find((node) => node instanceof Element && filterFn(node));
 }
-
-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);
+async function waitForAnimations(element, subtree = false) {
+  if (!element || typeof element.getAnimations !== "function") {
+    return [];
   }
-  return false;
-}
-function dedupeMixin(mixin) {
-  return (superClass) => {
-    if (wasMixinPreviouslyApplied(mixin, superClass)) {
-      return superClass;
-    }
-    const mixedClass = mixin(superClass);
-    appliedClassMixins.set(mixedClass, mixin);
-    return mixedClass;
-  };
+  return await Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
 }
-
 function toAriaBooleanAttribute(value, removeOnFalse = true) {
-  if (removeOnFalse && value === false) return null;
-  return String(value);
+  return removeOnFalse && value === false ? null : String(value);
 }
-function fromAriaBooleanAttribute(value) {
-  return value === "true";
+function toPx(value) {
+  if (value == null || Number.isNaN(value)) return null;
+  return `${round(value, 2)}px`;
 }
-function fromToggleEventState(state) {
-  return state === "open";
+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 toToggleEventState$1(state) {
-  return state ? "open" : "closed";
+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"
+  };
 }
 
-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 DisabledContext = createContext(Symbol("odx-disabled-context"));
-class DisabledContextProvider extends ContextProvider {
-  constructor(host) {
-    super(host, { context: DisabledContext, initialValue: false });
-  }
-  hostUpdated() {
-    if (this.host.disabled === this.value) return;
-    this.setValue(this.host.disabled);
-  }
-}
-const CanBeDisabled = dedupeMixin((superClass) => {
+const CanBeDisabled = (superClass) => {
   class CanBeDisabledMixin extends superClass {
     constructor() {
       super(...arguments);
-      this.#initialTabIndex = null;
       this.disabled = false;
     }
     #initialTabIndex;
     connectedCallback() {
       super.connectedCallback();
-      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
+      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : void 0;
     }
     willUpdate(props) {
-      super.willUpdate?.(props);
+      super.willUpdate(props);
       if (props.has("disabled")) {
         this.#handleDisabledChange();
       }
@@ -250,228 +119,104 @@ const CanBeDisabled = dedupeMixin((superClass) => {
       this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
       if (this.disabled) {
         this.tabIndex = -1;
-      } else if (this.#initialTabIndex !== null) {
-        this.tabIndex = this.#initialTabIndex;
-      } else {
+      } else if (this.#initialTabIndex === void 0) {
         this.removeAttribute("tabindex");
+      } else {
+        this.tabIndex = this.#initialTabIndex;
       }
     }
   }
-  __decorateClass$c([
-    consume({ context: DisabledContext, subscribe: true }),
-    property({ type: Boolean })
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
   ], CanBeDisabledMixin.prototype, "disabled", 2);
   return CanBeDisabledMixin;
-});
-
-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);
-      }
-    }
+class FormControl extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super();
+    this.name = "";
+    this.value = "";
+    this.readonly = false;
+    this.required = false;
+    this.internals = this.attachInternals();
   }
-  __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);
-    }
+  static {
+    /** @internal */
+    this.formAssociated = true;
   }
-  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;
+  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);
     }
-    willUpdate(props) {
-      super.willUpdate?.(props);
-      this.updateAriaAttributes?.();
+    if (props.has("readonly")) {
+      this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
     }
-    updated(props) {
-      super.updated(props);
-      if (props.has("value")) {
-        this.internals.setFormValue(this.toFormValue());
-      }
+    if (props.has("value")) {
+      this.internals.setFormValue(this.toFormValue());
     }
+    this.updateAriaAttributes?.();
   }
-  __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
-    }
-  };
 }
+__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);
 
-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) {
+class CheckboxFormControl extends FormControl {
   constructor() {
     super();
     this.role = null;
     this.checked = false;
+    this.value = "";
     this.#handleClick = ({ target }) => {
-      const { localName } = target;
-      if (LINK_SELECTORS.has(localName)) return;
+      if (LINK_SELECTORS.has(target.localName)) return;
       this.toggle(void 0, true);
     };
     this.#handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      if (!actions.enter && !actions.space) return;
-      const { localName } = event.target;
+      const key = getKeyInfo(event);
+      if (!(key.enter || key.space)) return;
       event.preventDefault();
-      if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
+      if (event.type === "keydown" || LINK_SELECTORS.has(event.target.localName)) return;
       this.toggle(void 0, true);
     };
     if (!isServer) {
@@ -481,6 +226,7 @@ class CheckboxFormControl extends FormControl(CustomElement) {
     }
   }
   static {
+    /** @internal */
     this.shadowRootOptions = {
       ...CustomElement.shadowRootOptions,
       delegatesFocus: false
@@ -497,7 +243,7 @@ class CheckboxFormControl extends FormControl(CustomElement) {
     const newState = state ?? !currentState;
     if (this.disabled || this.readonly || newState === currentState) return;
     this.checked = newState;
-    if (!emitEvent || !this.emit("change")) return;
+    if (!(emitEvent && this.emit("change", { bubbles: true }))) return;
     this.checked = currentState;
   }
   connectedCallback() {
@@ -512,36 +258,33 @@ class CheckboxFormControl extends FormControl(CustomElement) {
   #handleClick;
   #handleKeyboardEvent;
 }
-__decorateClass$8([
-  property({ type: Boolean, reflect: true })
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
 ], CheckboxFormControl.prototype, "checked", 2);
+__decorateClass([
+  property()
+], CheckboxFormControl.prototype, "value", 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) {
+const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl {
   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;
+      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
+        );
       }
-      this.updateValue(
-        this.value.filter((value) => value !== target.value),
-        true
-      );
     };
     if (!isServer) {
       this.addEventListener("change", this.#handleChangeEvent);
@@ -551,10 +294,17 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     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));
+    return this.#findControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
   }
-  get groupControls() {
-    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  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();
@@ -563,135 +313,427 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     });
     return formData;
   }
-  isIndeterminate() {
-    return this.value.length > 0 && this.value.length < this.controls.length;
-  }
   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.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
+      this.updateControls((control) => {
+        control.checked = this.isControlChecked(control);
       });
-      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 (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.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.name = this.name;
       });
     }
     if (props.has("disabled")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.disabled = this.disabled;
       });
     }
     if (props.has("readonly")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.readonly = this.readonly;
       });
     }
   }
-  updateCheckboxControls(updateFn) {
+  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");
+    this.emit("change", { bubbles: true });
   }
-  #handleChangeEvent;
-  #findCheckboxControls(predicate) {
+  #findControls(predicate) {
     return this.elements.filter((element) => this.isControl(element) && predicate(element));
   }
+  #handleChangeEvent;
+  #handleControlChange;
 };
-__decorateClass$7([
+__decorateClass([
   queryAssignedElements({ flatten: true })
 ], _CheckboxGroupFormControl.prototype, "elements", 2);
-__decorateClass$7([
+__decorateClass([
   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;
-};
+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.selected = false;
     this.value = "";
+    this.selected = false;
   }
-  getTextLabel() {
-    return this.textContent?.trim() ?? "";
+  #label;
+  set label(value) {
+    this.#label = value;
   }
-  setActive() {
-    this.setAttribute("odx-active", "true");
+  get label() {
+    return (this.#label || this.textContent?.trim()) ?? "";
   }
-  setInactive() {
-    this.removeAttribute("odx-active");
+  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(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("selected")) {
-      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("selected")) {
+      this.ariaSelected = this.canSelect() ? toAriaBooleanAttribute(this.selected, false) : null;
     }
   }
 }
-__decorateClass$6([
-  property({ type: Boolean })
-], OptionControl.prototype, "selected", 2);
-__decorateClass$6([
+__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()
+], OptionControl.prototype, "type", 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
-    };
-  }
+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("change", this.#handleChange, { capture: true });
-      new RovingTabindexController(this, {
-        direction: "both",
-        elements: () => this.getControls(),
-        elementEnterAction: (element) => element.click(),
-        focusInIndex: (elements) => elements.findIndex((element) => element.checked)
+      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.updateSelection();
+    }
+    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]);
+    }
+  }
+  updateSelection() {
+    if (this.disabled || this.options.length === 0) return;
+    for (const option of this.options ?? []) {
+      if (option.disabled) continue;
+      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+    }
+  }
+  #handleOptionSelection(option) {
+    if (!option.selected) return;
+    this.emit("select", { detail: option });
+  }
+  #handleMultipleChange() {
+    const optionType = this.multiple ? "checkbox" : null;
+    for (const option of this.options) {
+      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));
   }
@@ -702,25 +744,28 @@ class RadioGroupFormControl extends FormControl(CustomElement) {
   isControl(element) {
     return element instanceof CheckboxFormControl;
   }
-  update(changes) {
-    super.update?.(changes);
+  isControlChecked(control) {
+    return this.value === control.value;
+  }
+  willUpdate(changes) {
+    super.update(changes);
     if (changes.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
+      this.updateControls((control) => {
+        control.checked = this.isControlChecked(control);
       });
     }
     if (changes.has("name")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.name = this.name;
       });
     }
     if (changes.has("disabled")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.disabled = this.disabled;
       });
     }
     if (changes.has("readonly")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.readonly = this.readonly;
       });
     }
@@ -730,438 +775,427 @@ class RadioGroupFormControl extends FormControl(CustomElement) {
       this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
     }
   }
-  async updateCheckboxControls(updateFn) {
-    await 0;
+  updateControls(updateFn) {
     this.getControls().forEach(updateFn);
   }
-  #handleChange = ({ target }) => {
-    if (!this.isControl(target) || this.value === target.value) return;
-    this.value = target.value;
-  };
+  #handleChange;
 }
-__decorateClass$5([
+__decorateClass([
   queryAssignedElements({ flatten: true })
 ], RadioGroupFormControl.prototype, "elements", 2);
+__decorateClass([
+  property()
+], RadioGroupFormControl.prototype, "value", 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);
-    }
+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);
   }
-  #selectedOptions;
-  get selectedOptions() {
-    return this.#selectedOptions.values();
+  get container() {
+    return this.#options.getContainer?.() ?? this.#host;
   }
-  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);
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = DragControllerOptions(options);
+    this.#host.addController(this);
   }
-  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;
-    }
+  hostConnected() {
+    this.#host.style.touchAction = "none";
   }
-  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();
+  hostDisconnected() {
+    this.#host.style.touchAction = "";
+    for (const removeListener of this.#listeners.values()) {
+      removeListener();
     }
-    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);
+  }
+  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;
   }
-  async updateSelection() {
-    if (this.disabled) return;
+  #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;
-    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);
-      }
+    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);
     }
-    this.requestUpdate();
   }
-  #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();
+  };
 }
-__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 optionalAttr = (value) => {
+  return value == null || value === "" ? nothing : value;
 };
-function toToggleEventState(value) {
-  return value ? "open" : "closed";
+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 CanBeExpanded = dedupeMixin((superClass) => {
-  class CanBeExpandedMixin extends CanBeDisabled(superClass) {
+
+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);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@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;
     }
-    toggle(force, emitEvent = true) {
-      const newState = force ?? !this.expanded;
+    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;
-      if (!emitEvent || !this.emit(
-        new ToggleEvent("toggle", { composed: true, bubbles: true, oldState: toToggleEventState(currentState), newState: toToggleEventState(newState) })
-      ))
-        return;
+      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$3([
-    property({ type: Boolean, reflect: true })
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
   ], CanBeExpandedMixin.prototype, "expanded", 2);
   return CanBeExpandedMixin;
-});
-
-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 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$2([
-    property({ type: Boolean })
-  ], CanBeSelectedElement.prototype, "selected", 2);
-  __decorateClass$2([
-    property()
-  ], CanBeSelectedElement.prototype, "ariaSelectedValue", 2);
-  return CanBeSelectedElement;
-});
 
-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 MIN_STEP_VALUE = 1 / 2 ^ 16;
-const NumberControl = dedupeMixin((superClass) => {
-  class NumberControlElement extends FormControl(superClass) {
+const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
+const IsDraggable = (superClass) => {
+  class IsDraggableElement extends 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);
+      this.dragDisabled = false;
     }
-  }
-  __decorateClass$1([
-    property({ type: Number })
-  ], NumberControlElement.prototype, "min", 2);
-  __decorateClass$1([
-    property({ type: Number })
-  ], NumberControlElement.prototype, "max", 2);
-  __decorateClass$1([
-    property({ type: Number })
-  ], NumberControlElement.prototype, "step", 2);
-  __decorateClass$1([
-    property({ type: Number, reflect: true })
-  ], NumberControlElement.prototype, "value", 2);
-  return NumberControlElement;
-});
-
-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;
+    get isDragActive() {
+      return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
     }
-    set loading(value) {
-      this.loadingContainer.ariaBusy = toAriaBooleanAttribute(value);
+    dragStart() {
+      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
     }
-    get loading() {
-      return fromAriaBooleanAttribute(this.loadingContainer.ariaBusy);
+    afterDragEnd() {
+      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
     }
   }
   __decorateClass([
-    property({ type: Boolean, reflect: true })
-  ], WithLoadingStateElement.prototype, "loading", 1);
-  return WithLoadingStateElement;
-});
-
-function ariaPropertyToAttribute(property) {
-  return property.replace("aria", "aria-").replace(/Elements?/g, "").toLowerCase();
-}
+    property({ type: Boolean })
+  ], IsDraggableElement.prototype, "dragDisabled", 2);
+  return IsDraggableElement;
+};
 
-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;
-}
+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"
+};
 
-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 Shape = {
+  CIRCLE: "circle",
+  RECTANGLE: "rectangle"
+};
 
-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();
-  }
-}
+const Size = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "xxl"
+};
 
-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;
+const Variant = {
+  NEUTRAL: "neutral",
+  PRIMARY: "primary",
+  ACCENT: "accent",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger",
+  GHOST: "ghost"
 };
-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;
-}
 
-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 PopoverPlacementOptions(options) {
+  return {
+    placement: "bottom",
+    enableFallback: true,
+    fallbackAxisSideDirection: "end",
+    matchReferenceWidth: false,
+    offset: 0,
+    ...options
+  };
 }
-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);
+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)
     });
   }
-  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 };
-  }
+  floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
+  floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
 }
-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;
-  }
+function positionUpdater(referenceElement, floatingElement, options) {
+  return autoUpdate(
+    referenceElement,
+    floatingElement,
+    throttle(() => referenceElement && computePopoverPlacement(referenceElement, floatingElement, options), 1e3 / 30),
+    { animationFrame: true }
+  );
 }
-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);
+  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.#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;
+    this.#handlers.delete(target);
   }
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-export { CanBeDisabled, CanBeExpanded, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DisabledContext, DisabledContextProvider, ExpandableItemManager, ExpandableItemManagerOptions, FocusTrapController, FocusTrapControllerOptions, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithLoadingState, ariaPropertyToAttribute, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, fromToggleEventState, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toToggleEventState$1 as toToggleEventState, toggleAttribute, waitForAnimations };
+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 };