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

package/dist/main.js

@@ -1,9 +1,114 @@
-import { r as round, t as toMerged, c as createFocusTrap, u as uniqBy, R as RovingTabindexController } from './vendor-C_WVAD3D.js';
-import { isServer, nothing, html, LitElement, unsafeCSS } from 'lit';
-import { directive, Directive } from 'lit/directive.js';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { createContext, ContextProvider, consume } from '@lit/context';
 export { effect } from '@lit-labs/preact-signals';
+import { isServer, LitElement, html, unsafeCSS, nothing } from 'lit';
+import { createFocusTrap } from 'focus-trap';
+import { r as round, u as uniqBy } from './vendor-dJxQG085.js';
+import { createContext, ContextProvider, consume } from '@lit/context';
+import { property } from 'lit/decorators.js';
+import { directive, Directive } from 'lit/directive.js';
+
+const ActiveDescendantsControllerOptions = (options) => ({
+  getItems: () => [],
+  ...options
+});
+class ActiveDescendantsController {
+  #host;
+  #options;
+  #activeIndex = -1;
+  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.#host.removeAttribute("aria-activedescendant");
+    this.update(-1);
+  }
+  previous() {
+    const previousIndex = this.items.findLastIndex((item, index) => !item.disabled && this.#activeIndex > index);
+    this.update(previousIndex === -1 ? void 0 : previousIndex);
+  }
+  next() {
+    const nextIndex = this.items.findIndex((item, index) => !item.disabled && this.#activeIndex < index);
+    if (nextIndex < 0) return;
+    this.update(nextIndex);
+  }
+  first() {
+    this.update(this.items.findIndex((item) => !item.disabled));
+  }
+  last() {
+    this.update(this.items.findLastIndex((item) => !item.disabled));
+  }
+  select(item) {
+    const index = this.items.indexOf(item);
+    if (index === -1 || item.disabled) return;
+    this.update(index);
+  }
+  update(index, forceUpdate = false) {
+    const previousActiveItem = this.items[this.#activeIndex];
+    const activeItem = this.items[index ?? this.#activeIndex];
+    if (forceUpdate !== false && previousActiveItem === activeItem || activeItem?.disabled) return;
+    this.#activeIndex = index ?? this.#activeIndex;
+    this.#host.setAttribute("aria-activedescendant", activeItem?.id ?? "");
+    previousActiveItem?.highlight(false);
+    activeItem?.highlight(true);
+    this.#options.onChange?.(previousActiveItem, activeItem, previousActiveItem === void 0 && !!activeItem);
+  }
+  #handleKeyboardEvent = (event) => {
+    const { actions, direction } = getKeyboardEventInfo(event);
+    if (direction.down) {
+      this.next();
+    } else if (direction.up) {
+      this.previous();
+    } else if (actions.start) {
+      this.first();
+    } else if (actions.end) {
+      this.last();
+    }
+  };
+}
+
+const ExpandableItemManagerOptions = (options) => ({
+  ...options
+});
+class ExpandableItemManager {
+  #host;
+  #config;
+  get expandableItems() {
+    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);
+    }
+  }
+  #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 {
@@ -60,13 +165,10 @@ function forwardEvent(target, eventInit) {
   };
 }
 
-function createOptions(defaultOptions) {
-  return (options) => toMerged(defaultOptions, options ?? {});
-}
-
-const FocusTrapControllerOptions = createOptions({
+const FocusTrapControllerOptions = (options) => ({
   escapeDeactivates: false,
-  tabbableOptions: { getShadowRoot: true }
+  tabbableOptions: { getShadowRoot: true },
+  ...options
 });
 class FocusTrapController {
   #host;
@@ -113,86 +215,6 @@ class FocusTrapController {
   }
 }
 
-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;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}: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{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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@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) {
-    return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, 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;
@@ -215,14 +237,28 @@ function dedupeMixin(mixin) {
   };
 }
 
-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;
+function toAriaBooleanAttribute(value, removeOnFalse = true) {
+  if (removeOnFalse && value === false) return null;
+  return String(value);
+}
+function fromAriaBooleanAttribute(value) {
+  return value === "true";
+}
+function fromToggleEventState(state) {
+  return state === "open";
+}
+function toToggleEventState$1(state) {
+  return state ? "open" : "closed";
+}
+
+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$c(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 const DisabledContext = createContext(Symbol("odx-disabled-context"));
@@ -264,21 +300,67 @@ const CanBeDisabled = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$c([
+  __decorateClass$7([
     consume({ context: DisabledContext, subscribe: true }),
     property({ type: Boolean })
   ], 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;
+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;
+};
+function toToggleEventState(value) {
+  return value ? "open" : "closed";
+}
+const CanBeExpanded = dedupeMixin((superClass) => {
+  class CanBeExpandedMixin extends CanBeDisabled(superClass) {
+    constructor() {
+      super(...arguments);
+      this.expanded = false;
+    }
+    toggle(force, emitEvent = true) {
+      const newState = force ?? !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;
+      this.expanded = currentState;
+    }
+  }
+  __decorateClass$6([
+    property({ type: Boolean, reflect: true })
+  ], CanBeExpandedMixin.prototype, "expanded", 2);
+  return CanBeExpandedMixin;
+});
+
+const CanBeHighlighted = dedupeMixin((superClass) => {
+  class CanBeHighlightedMixin extends superClass {
+    highlight(active) {
+      this.toggleAttribute("odx-active", active);
+    }
+  }
+  return CanBeHighlightedMixin;
+});
+
+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$b(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 const CanBeReadonly = dedupeMixin((superClass) => {
@@ -294,20 +376,20 @@ const CanBeReadonly = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$b([
+  __decorateClass$5([
     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;
+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$a(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 const CanBeRequired = dedupeMixin((superClass) => {
@@ -323,12 +405,45 @@ const CanBeRequired = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$a([
+  __decorateClass$4([
     property({ type: Boolean, reflect: true })
   ], CanBeRequiredElement.prototype, "required", 2);
   return CanBeRequiredElement;
 });
 
+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;
+});
+
 const CanBeValidated = dedupeMixin((superClass) => {
   class CanBeValidatedElement extends superClass {
     constructor() {
@@ -358,14 +473,47 @@ const CanBeValidated = dedupeMixin((superClass) => {
   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;
+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);text-align:start}}@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}odx-accordion[control-position=start] odx-accordion-header::part(expand-control){--icon-rotation: -90deg;order:-1}odx-accordion[control-position=start] odx-accordion-header[expanded]::part(expand-control){--icon-rotation: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@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);
+  }
+}
+
+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$9(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 const FormControl = dedupeMixin((superClass) => {
@@ -402,524 +550,15 @@ const FormControl = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$9([
+  __decorateClass$2([
     property()
   ], FormControlElement.prototype, "name", 2);
-  __decorateClass$9([
+  __decorateClass$2([
     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 CanBeExpanded = dedupeMixin((superClass) => {
-  class CanBeExpandedMixin extends CanBeDisabled(superClass) {
-    constructor() {
-      super(...arguments);
-      this.expanded = false;
-    }
-    collapse(emitEvent = false) {
-      this.toggle(false, emitEvent);
-    }
-    expand(emitEvent = false) {
-      this.toggle(true, emitEvent);
-    }
-    toggle(force, emitEvent = false) {
-      const newState = force ?? !this.expanded;
-      if (this.disabled || this.expanded === newState) return;
-      const currentState = this.expanded;
-      this.expanded = newState;
-      if (!emitEvent || !this.emit(newState ? "expand" : "collapse", { composed: true, bubbles: true })) return;
-      this.expanded = currentState;
-    }
-  }
-  __decorateClass$3([
-    property({ type: Boolean })
-  ], 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) => {
@@ -1016,6 +655,18 @@ function parseDate(value) {
   return Number.isNaN(date.getTime()) ? null : date;
 }
 
+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("-");
+    host.toggleAttribute(attributeName, !host.textContent?.trim() && element.assignedElements().length === 0);
+  }
+  render() {
+  }
+}
+const emptySlotFallbackFix = directive(SlotFallbackDirective);
+
 const uniqueIdCache = /* @__PURE__ */ new Map();
 function getUniqueId(key) {
   const nextIndex = (uniqueIdCache.get(key) ?? 0) + 1;
@@ -1030,6 +681,93 @@ function clearUniqueIdCache(key) {
   }
 }
 
+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
+    }
+  };
+}
+
+function requestUpdateOnAriaChange(ariaProperties) {
+  return (ctor) => {
+    for (const ariaProperty of ariaProperties) {
+      const attribute = ariaProperty.replace("aria", "aria-").replace(/Elements?/g, "").toLowerCase();
+      ctor.createProperty(ariaProperty, { attribute, 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;
+}
+
+function queryAssignedElement(options) {
+  return (obj, name) => {
+    const { slot, selector } = options ?? {};
+    const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
+    const descriptor = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const slotEl = this.renderRoot?.querySelector(slotSelector);
+        const elements = slotEl?.assignedElements(options) ?? [];
+        if (selector == null) {
+          return elements[0];
+        }
+        return elements.find((node) => node.matches(selector));
+      }
+    };
+    if (Reflect.decorate && typeof name !== "object") {
+      Object.defineProperty(obj, name, descriptor);
+    }
+    return descriptor;
+  };
+}
+
 function search(value, searchString, callback) {
   let index = 0;
   while (index < value.length) {
@@ -1047,6 +785,8 @@ function searchTextContent(options) {
   while (walker.nextNode()) {
     const content = walker.currentNode.textContent?.toLowerCase();
     if (!content?.includes(query)) continue;
+    const parentElement = walker.currentNode.parentElement;
+    if (options.selector && !parentElement?.closest(options.selector)) continue;
     search(content, query, (index) => {
       const range = new Range();
       range.setStart(walker.currentNode, index);
@@ -1130,4 +870,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-export { CanBeDisabled, CanBeExpanded, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DisabledContext, DisabledContextProvider, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+export { ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CanBeHighlighted, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CustomElement, DisabledContext, DisabledContextProvider, ExpandableItemManager, ExpandableItemManagerOptions, FocusTrapController, FocusTrapControllerOptions, FormControl, KeyboardKey, NumberControl, SharedIntersectionObserver, SharedResizeObserver, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, fromToggleEventState, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, queryAssignedElement, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toToggleEventState$1 as toToggleEventState, toggleAttribute, waitForAnimations };