@odx/foundation 1.0.0-alpha.8 → 1.0.0-beta.0

package/dist/main.js

@@ -1,7 +1,8 @@
-import { r as round, t as toMerged, c as createFocusTrap } from './vendor.js';
+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, CSSResult } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
 import { property, queryAssignedElements } from 'lit/decorators.js';
+export { effect } from '@lit-labs/preact-signals';
 
 function createMutationObserver(callback) {
   try {
@@ -47,6 +48,16 @@ async function waitForAnimations(element, subtree = false) {
   }
   return Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
 }
+function forwardEvent(target, eventInit) {
+  return (event) => {
+    event.stopPropagation();
+    const shouldPreventDefault = target.dispatchEvent(
+      new CustomEvent(event.type, { bubbles: event.bubbles, composed: event.composed, cancelable: event.cancelable, ...eventInit })
+    );
+    if (shouldPreventDefault) return;
+    event.preventDefault();
+  };
+}
 
 function createOptions(defaultOptions) {
   return (options) => toMerged(defaultOptions, options ?? {});
@@ -115,14 +126,6 @@ function requestUpdateOnAriaChange(ariaProperties) {
   };
 }
 
-function toAriaBooleanAttribute(value, removeOnFalse = true) {
-  if (removeOnFalse && value === false) return null;
-  return String(value);
-}
-function fromAriaBooleanAttribute(value) {
-  return value === "true";
-}
-
 const optionalAttr = (value) => {
   if (value === void 0 || value === null || value === "") return nothing;
   return value;
@@ -151,404 +154,25 @@ class SlotFallbackDirective extends Directive {
 }
 const emptySlotFallbackFix = directive(SlotFallbackDirective);
 
-function ensureMethod(value, type, fallback) {
-  if (typeof value === type) {
-    return () => value;
-  } else if (typeof value === "function") {
-    return value;
-  }
-  return fallback;
-}
-class FocusGroupController {
-  constructor(host, { hostDelegatesFocus, direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope } = {
-    elements: () => []
-  }) {
-    this._currentIndex = -1;
-    this.prevIndex = -1;
-    this._direction = () => "both";
-    this.directionLength = 5;
-    this.hostDelegatesFocus = false;
-    this.elementEnterAction = (_el) => {
-      return;
-    };
-    this._focused = false;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this._focusInIndex = (_elements) => 0;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.isFocusableElement = (_el) => true;
-    this._listenerScope = () => this.host;
-    // When elements are virtualized, the delta between the first element
-    // and the first rendered element.
-    this.offset = 0;
-    this.recentlyConnected = false;
-    this.handleFocusin = (event) => {
-      if (!this.isEventWithinListenerScope(event)) return;
-      const path = event.composedPath();
-      let targetIndex = -1;
-      path.find((el) => {
-        targetIndex = this.elements.indexOf(el);
-        return targetIndex !== -1;
-      });
-      this.prevIndex = this.currentIndex;
-      this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
-      if (this.isRelatedTargetOrContainAnElement(event)) {
-        this.hostContainsFocus();
-      }
-    };
-    /**
-     * handleClick - Finds the element that was clicked and sets the tabindex to 0
-     * @returns void
-     */
-    this.handleClick = () => {
-      const elements = this.elements;
-      if (!elements.length) return;
-      let focusElement = elements[this.currentIndex];
-      if (this.currentIndex < 0) {
-        return;
-      }
-      if (!focusElement || !this.isFocusableElement(focusElement)) {
-        this.setCurrentIndexCircularly(1);
-        focusElement = elements[this.currentIndex];
-      }
-      if (focusElement && this.isFocusableElement(focusElement)) {
-        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
-        focusElement.setAttribute("tabindex", "0");
-      }
-    };
-    this.handleFocusout = (event) => {
-      if (this.isRelatedTargetOrContainAnElement(event)) {
-        this.hostNoLongerContainsFocus();
-      }
-    };
-    this.handleKeydown = (event) => {
-      if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
-        return;
-      }
-      let diff = 0;
-      this.prevIndex = this.currentIndex;
-      switch (event.key) {
-        case "ArrowRight":
-          diff += 1;
-          break;
-        case "ArrowDown":
-          diff += this.direction === "grid" ? this.directionLength : 1;
-          break;
-        case "ArrowLeft":
-          diff -= 1;
-          break;
-        case "ArrowUp":
-          diff -= this.direction === "grid" ? this.directionLength : 1;
-          break;
-        case "End":
-          this.currentIndex = 0;
-          diff -= 1;
-          break;
-        case "Home":
-          this.currentIndex = this.elements.length - 1;
-          diff += 1;
-          break;
-      }
-      event.preventDefault();
-      if (this.direction === "grid" && this.currentIndex + diff < 0) {
-        this.currentIndex = 0;
-      } else if (this.direction === "grid" && this.currentIndex + diff > this.elements.length - 1) {
-        this.currentIndex = this.elements.length - 1;
-      } else {
-        this.setCurrentIndexCircularly(diff);
-      }
-      this.elementEnterAction(this.elements[this.currentIndex]);
-      this.focus();
-    };
-    this.mutationObserver = new MutationObserver(() => {
-      this.handleItemMutation();
-    });
-    this.hostDelegatesFocus = hostDelegatesFocus || false;
-    this.host = host;
-    this.host.addController(this);
-    this._elements = elements;
-    this.isFocusableElement = isFocusableElement || this.isFocusableElement;
-    this._direction = ensureMethod(direction, "string", this._direction);
-    this.elementEnterAction = elementEnterAction || this.elementEnterAction;
-    this._focusInIndex = ensureMethod(focusInIndex, "number", this._focusInIndex);
-    this._listenerScope = ensureMethod(listenerScope, "object", this._listenerScope);
-  }
-  get currentIndex() {
-    if (this._currentIndex === -1) {
-      this._currentIndex = this.focusInIndex;
-    }
-    return this._currentIndex - this.offset;
-  }
-  set currentIndex(currentIndex) {
-    this._currentIndex = currentIndex + this.offset;
-  }
-  get direction() {
-    return this._direction();
-  }
-  get elements() {
-    if (!this.cachedElements) {
-      this.cachedElements = this._elements();
-    }
-    return this.cachedElements;
-  }
-  set focused(focused) {
-    if (focused === this.focused) return;
-    this._focused = focused;
-  }
-  get focused() {
-    return this._focused;
-  }
-  get focusInElement() {
-    return this.elements[this.focusInIndex];
-  }
-  get focusInIndex() {
-    return this._focusInIndex(this.elements);
-  }
-  isEventWithinListenerScope(event) {
-    if (this._listenerScope() === this.host) return true;
-    return event.composedPath().includes(this._listenerScope());
-  }
-  /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
-        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
-    */
-  handleItemMutation() {
-    if (this._currentIndex == -1 || this.elements.length <= this._elements().length) return;
-    const focusedElement = this.elements[this.currentIndex];
-    this.clearElementCache();
-    if (this.elements.includes(focusedElement)) return;
-    const moveToNextElement = this.currentIndex !== this.elements.length;
-    const diff = moveToNextElement ? 1 : -1;
-    if (moveToNextElement) {
-      this.setCurrentIndexCircularly(-1);
-    }
-    this.setCurrentIndexCircularly(diff);
-    this.focus();
-  }
-  update({ elements } = { elements: () => [] }) {
-    this.unmanage();
-    this._elements = elements;
-    this.clearElementCache();
-    this.manage();
-  }
-  /**
-   * resets the focusedItem to initial item
-   */
-  reset() {
-    const elements = this.elements;
-    if (!elements.length) return;
-    this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
-    let focusElement = elements[this.currentIndex];
-    if (this.currentIndex < 0) {
-      return;
-    }
-    if (!focusElement || !this.isFocusableElement(focusElement)) {
-      this.setCurrentIndexCircularly(1);
-      focusElement = elements[this.currentIndex];
-    }
-    if (focusElement && this.isFocusableElement(focusElement)) {
-      elements[this.prevIndex]?.setAttribute("tabindex", "-1");
-      focusElement.setAttribute("tabindex", "0");
-    }
-  }
-  focusOnItem(item, options) {
-    if (item && this.isFocusableElement(item) && this.elements.indexOf(item)) {
-      const diff = this.elements.indexOf(item) - this.currentIndex;
-      this.setCurrentIndexCircularly(diff);
-      this.elements[this.prevIndex]?.setAttribute("tabindex", "-1");
-    }
-    this.focus(options);
-  }
-  focus(options) {
-    const elements = this.elements;
-    if (!elements.length) return;
-    let focusElement = elements[this.currentIndex];
-    if (!focusElement || !this.isFocusableElement(focusElement)) {
-      this.setCurrentIndexCircularly(1);
-      focusElement = elements[this.currentIndex];
-    }
-    if (focusElement && this.isFocusableElement(focusElement)) {
-      if (!this.hostDelegatesFocus || elements[this.prevIndex] !== focusElement) {
-        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
-      }
-      focusElement.tabIndex = 0;
-      focusElement.focus(options);
-      if (this.hostDelegatesFocus && !this.focused) {
-        this.hostContainsFocus();
-      }
-    }
-  }
-  clearElementCache(offset = 0) {
-    this.mutationObserver.disconnect();
-    delete this.cachedElements;
-    this.offset = offset;
-    requestAnimationFrame(() => {
-      this.elements.forEach((element) => {
-        this.mutationObserver.observe(element, {
-          attributes: true
-        });
-      });
-    });
-  }
-  setCurrentIndexCircularly(diff) {
-    const { length } = this.elements;
-    let steps = length;
-    this.prevIndex = this.currentIndex;
-    let nextIndex = (length + this.currentIndex + diff) % length;
-    while (
-      // don't cycle the elements more than once
-      steps && this.elements[nextIndex] && // @ts-ignore
-      !this.isFocusableElement(this.elements[nextIndex])
-    ) {
-      nextIndex = (length + nextIndex + diff) % length;
-      steps -= 1;
-    }
-    this.currentIndex = nextIndex;
-  }
-  hostContainsFocus() {
-    this.host.addEventListener("focusout", this.handleFocusout);
-    this.host.addEventListener("keydown", this.handleKeydown);
-    this.focused = true;
-  }
-  hostNoLongerContainsFocus() {
-    this.host.addEventListener("focusin", this.handleFocusin);
-    this.host.removeEventListener("focusout", this.handleFocusout);
-    this.host.removeEventListener("keydown", this.handleKeydown);
-    this.focused = false;
-  }
-  isRelatedTargetOrContainAnElement(event) {
-    const relatedTarget = event.relatedTarget;
-    const isRelatedTargetAnElement = this.elements.includes(relatedTarget);
-    const isRelatedTargetContainedWithinElements = this.elements.some((el) => el.contains(relatedTarget));
-    return !(isRelatedTargetAnElement || isRelatedTargetContainedWithinElements);
-  }
-  acceptsEventKey(key) {
-    if (key === "End" || key === "Home") {
-      return true;
-    }
-    switch (this.direction) {
-      case "horizontal":
-        return key === "ArrowLeft" || key === "ArrowRight";
-      case "vertical":
-        return key === "ArrowUp" || key === "ArrowDown";
-      case "both":
-      case "grid":
-        return key.startsWith("Arrow");
-    }
-  }
-  manage() {
-    this.addEventListeners();
-  }
-  unmanage() {
-    this.removeEventListeners();
-  }
-  addEventListeners() {
-    this.host.addEventListener("focusin", this.handleFocusin);
-    this.host.addEventListener("click", this.handleClick);
-  }
-  removeEventListeners() {
-    this.host.removeEventListener("focusin", this.handleFocusin);
-    this.host.removeEventListener("focusout", this.handleFocusout);
-    this.host.removeEventListener("keydown", this.handleKeydown);
-    this.host.removeEventListener("click", this.handleClick);
-  }
-  hostConnected() {
-    this.recentlyConnected = true;
-    this.addEventListeners();
-  }
-  hostDisconnected() {
-    this.mutationObserver.disconnect();
-    this.removeEventListeners();
-  }
-  hostUpdated() {
-    if (this.recentlyConnected) {
-      this.recentlyConnected = false;
-      this.elements.forEach((element) => {
-        this.mutationObserver.observe(element, {
-          attributes: true
-        });
-      });
-    }
-  }
-}
-class RovingTabindexController extends FocusGroupController {
-  constructor() {
-    super(...arguments);
-    this.managed = true;
-    this.manageIndexesAnimationFrame = 0;
-  }
-  set focused(focused) {
-    if (focused === this.focused) return;
-    super.focused = focused;
-    this.manageTabindexes();
-  }
-  get focused() {
-    return super.focused;
-  }
-  clearElementCache(offset = 0) {
-    cancelAnimationFrame(this.manageIndexesAnimationFrame);
-    super.clearElementCache(offset);
-    if (!this.managed) return;
-    this.manageIndexesAnimationFrame = requestAnimationFrame(() => this.manageTabindexes());
-  }
-  manageTabindexes() {
-    if (this.focused && !this.hostDelegatesFocus) {
-      this.updateTabindexes(() => ({ tabIndex: -1 }));
-    } else {
-      this.updateTabindexes((el) => {
-        return {
-          removeTabIndex: el.contains(this.focusInElement) && el !== this.focusInElement,
-          tabIndex: el === this.focusInElement ? 0 : -1
-        };
-      });
-    }
-  }
-  updateTabindexes(getTabIndex) {
-    this.elements.forEach((el) => {
-      const { tabIndex, removeTabIndex } = getTabIndex(el);
-      if (!removeTabIndex) {
-        if (this.focused) {
-          if (el !== this.elements[this.currentIndex]) {
-            el.tabIndex = tabIndex;
-          }
-        } else {
-          el.tabIndex = tabIndex;
-        }
-        return;
-      }
-      const updatable = el;
-      if (updatable.requestUpdate) updatable.requestUpdate();
-    });
-  }
-  manage() {
-    this.managed = true;
-    this.manageTabindexes();
-    super.manage();
-  }
-  unmanage() {
-    this.managed = false;
-    this.updateTabindexes(() => ({ tabIndex: 0 }));
-    super.unmanage();
-  }
-  hostUpdated() {
-    super.hostUpdated();
-    if (!this.host.hasUpdated) {
-      this.manageTabindexes();
-    }
-  }
-}
-
-const customElementStyles = "@layer reset,base,variant,state,theme,override;@layer reset{:where(*,*:before,*:after){box-sizing:border-box}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@layer base{*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}:where(*:not(body)){scrollbar-width:thin}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:where(:host){box-sizing:border-box;border:none;color:inherit;outline:none}}";
+const customElementStyles = "@layer reset,base,variant,state,theme,override;@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 toCSSResult(value) {
   return value instanceof CSSResult || value instanceof CSSStyleSheet ? value : unsafeCSS(value);
 }
+function isCustomElementClass(candidate) {
+  if (!candidate || typeof candidate !== "function") return false;
+  return "selector" in candidate && "define" in candidate && typeof candidate.define === "function";
+}
 function customElement(selector, styles = []) {
-  if (selector && globalThis.customElements.get(selector)) return () => void 0;
-  const preparedStyles = [customElementStyles, styles].map(toCSSResult);
   return (target) => {
-    target.styles = target.styles ? [target.styles, preparedStyles].flat() : preparedStyles;
+    const preparedStyles = [customElementStyles, target.styles ?? [], ...styles].filter(Boolean).flat(2).map(toCSSResult);
     if (selector) {
+      target.styles = uniqBy(preparedStyles, String);
       target.selector = selector;
-      customElements.define(target.selector, target);
+      target.define = () => {
+        if (customElements.get(selector)) return;
+        customElements.define(selector, target);
+      };
     }
   };
 }
@@ -557,10 +181,18 @@ class CustomElement extends LitElement {
     return html`<slot></slot>`;
   }
   emit(event, eventInit) {
-    return !this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true, cancelable: true, ...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;
@@ -583,18 +215,18 @@ function dedupeMixin(mixin) {
   };
 }
 
-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$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$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 const CanBeDisabled = dedupeMixin((superClass) => {
-  class CanBeDisabledElement extends superClass {
+  class CanBeDisabledMixin extends superClass {
     constructor() {
       super(...arguments);
       this.#initialTabIndex = null;
@@ -602,6 +234,9 @@ const CanBeDisabled = dedupeMixin((superClass) => {
       this.disabled = false;
     }
     #initialTabIndex;
+    isContextDisabled() {
+      return this._contextDisabled || this.disabled;
+    }
     connectedCallback() {
       super.connectedCallback?.();
       this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
@@ -609,17 +244,11 @@ const CanBeDisabled = dedupeMixin((superClass) => {
     willUpdate(props) {
       super.willUpdate?.(props);
       if (props.has("_contextDisabled") || props.has("disabled")) {
-        this.#handleDisableChange();
-      }
-    }
-    updated(props) {
-      super.updated?.(props);
-      if (props.has("_contextDisabled") || props.has("disabled")) {
-        this.onDisabledChanged?.(this._contextDisabled || this.disabled);
+        this.#handleDisabledChange();
       }
     }
-    #handleDisableChange() {
-      const disabled = this._contextDisabled || this.disabled;
+    #handleDisabledChange() {
+      const disabled = this.isContextDisabled();
       this.ariaDisabled = toAriaBooleanAttribute(disabled);
       if (disabled) {
         this.tabIndex = -1;
@@ -630,23 +259,23 @@ const CanBeDisabled = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$b([
+  __decorateClass$c([
     property({ type: Boolean })
-  ], CanBeDisabledElement.prototype, "_contextDisabled", 2);
-  __decorateClass$b([
+  ], CanBeDisabledMixin.prototype, "_contextDisabled", 2);
+  __decorateClass$c([
     property({ type: Boolean })
-  ], CanBeDisabledElement.prototype, "disabled", 2);
-  return CanBeDisabledElement;
+  ], CanBeDisabledMixin.prototype, "disabled", 2);
+  return CanBeDisabledMixin;
 });
 
-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$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$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 const CanBeReadonly = dedupeMixin((superClass) => {
@@ -662,20 +291,20 @@ const CanBeReadonly = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$a([
+  __decorateClass$b([
     property({ type: Boolean, reflect: true })
   ], CanBeReadonlyElement.prototype, "readonly", 2);
   return CanBeReadonlyElement;
 });
 
-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;
+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$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 const CanBeRequired = dedupeMixin((superClass) => {
@@ -691,7 +320,7 @@ const CanBeRequired = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$9([
+  __decorateClass$a([
     property({ type: Boolean, reflect: true })
   ], CanBeRequiredElement.prototype, "required", 2);
   return CanBeRequiredElement;
@@ -726,14 +355,14 @@ const CanBeValidated = dedupeMixin((superClass) => {
   return CanBeValidatedElement;
 });
 
-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;
+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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 const FormControl = dedupeMixin((superClass) => {
@@ -770,10 +399,10 @@ const FormControl = dedupeMixin((superClass) => {
       }
     }
   }
-  __decorateClass$8([
+  __decorateClass$9([
     property()
   ], FormControlElement.prototype, "name", 2);
-  __decorateClass$8([
+  __decorateClass$9([
     property()
   ], FormControlElement.prototype, "value", 2);
   return FormControlElement;
@@ -820,14 +449,14 @@ function getKeyboardEventInfo(event) {
   };
 }
 
-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;
+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$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
@@ -887,18 +516,18 @@ class CheckboxFormControl extends FormControl(CustomElement) {
   #handleClick;
   #handleKeyboardEvent;
 }
-__decorateClass$7([
+__decorateClass$8([
   property({ type: Boolean, reflect: true })
 ], CheckboxFormControl.prototype, "checked", 2);
 
-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;
+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$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
@@ -986,22 +615,22 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     return this.elements.filter((element) => this.isControl(element) && predicate(element));
   }
 };
-__decorateClass$6([
+__decorateClass$7([
   queryAssignedElements({ flatten: true })
 ], _CheckboxGroupFormControl.prototype, "elements", 2);
-__decorateClass$6([
+__decorateClass$7([
   property({ type: Array })
 ], _CheckboxGroupFormControl.prototype, "value", 2);
 let CheckboxGroupFormControl = _CheckboxGroupFormControl;
 
-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;
+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$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 class OptionControl extends CanBeDisabled(CustomElement) {
@@ -1031,21 +660,21 @@ class OptionControl extends CanBeDisabled(CustomElement) {
     }
   }
 }
-__decorateClass$5([
+__decorateClass$6([
   property({ type: Boolean })
 ], OptionControl.prototype, "selected", 2);
-__decorateClass$5([
+__decorateClass$6([
   property()
 ], OptionControl.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;
+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$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 class RadioGroupFormControl extends FormControl(CustomElement) {
@@ -1114,18 +743,18 @@ class RadioGroupFormControl extends FormControl(CustomElement) {
     this.value = target.value;
   };
 }
-__decorateClass$4([
+__decorateClass$5([
   queryAssignedElements({ flatten: true })
 ], RadioGroupFormControl.prototype, "elements", 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;
+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$3(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 class SelectFormControl extends FormControl(
@@ -1211,13 +840,50 @@ class SelectFormControl extends FormControl(
   }
   #handleClick;
 }
-__decorateClass$3([
+__decorateClass$4([
   property({ type: Boolean, reflect: true })
 ], SelectFormControl.prototype, "multiple", 2);
-__decorateClass$3([
+__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.isContextDisabled() || 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) => {
@@ -1228,6 +894,39 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
   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) {
@@ -1262,73 +961,21 @@ const NumberControl = dedupeMixin((superClass) => {
       return String(this.value);
     }
   }
-  __decorateClass$2([
+  __decorateClass$1([
     property({ type: Number })
   ], NumberControlElement.prototype, "min", 2);
-  __decorateClass$2([
+  __decorateClass$1([
     property({ type: Number })
   ], NumberControlElement.prototype, "max", 2);
-  __decorateClass$2([
+  __decorateClass$1([
     property({ type: Number })
   ], NumberControlElement.prototype, "step", 2);
-  __decorateClass$2([
+  __decorateClass$1([
     property({ type: Number, reflect: true })
   ], NumberControlElement.prototype, "value", 2);
   return NumberControlElement;
 });
 
-const uniqueIdCache = /* @__PURE__ */ new Map();
-function getUniqueId(key) {
-  const nextIndex = (uniqueIdCache.get(key) ?? 0) + 1;
-  uniqueIdCache.set(key, nextIndex);
-  return `${key}-${nextIndex}`;
-}
-function clearUniqueIdCache(key) {
-  if (key) {
-    uniqueIdCache.delete(key);
-  } else {
-    uniqueIdCache.clear();
-  }
-}
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-const WithAriaControls = dedupeMixin((superClass) => {
-  class WithAriaControlsElement extends CanBeDisabled(superClass) {
-    get region() {
-      return this.nextElementSibling;
-    }
-    updateA11yAttributes() {
-      if (!this.region) return;
-      this.id ||= getUniqueId(this.localName);
-      this.role ||= "button";
-      this.region.role ||= "region";
-      this.region.id ||= `${this.id}-region`;
-      this.region.ariaHidden = this.disabled ? "true" : this.region.ariaHidden;
-      this.setAttribute("aria-controls", this.region.id);
-      this.region.setAttribute("aria-labelledby", this.id);
-    }
-    update(props) {
-      super.update(props);
-      if (props.has("disabled") || props.has("id")) {
-        this.updateA11yAttributes();
-      }
-    }
-  }
-  __decorateClass$1([
-    property({ reflect: true })
-  ], WithAriaControlsElement.prototype, "id", 2);
-  return WithAriaControlsElement;
-});
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -1366,9 +1013,50 @@ function parseDate(value) {
   return Number.isNaN(date.getTime()) ? null : date;
 }
 
-function createIntersectionObserver(callback) {
+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();
+  }
+}
+
+function search(value, searchString, callback) {
+  let index = 0;
+  while (index < value.length) {
+    index = value.indexOf(searchString, index);
+    if (index === -1) break;
+    callback?.(index);
+    index += searchString.length;
+  }
+}
+function searchTextContent(options) {
+  const query = options.query?.trim().toLowerCase();
+  const ranges = [];
+  if (!query || query.length < options.minlength) return ranges;
+  const walker = document.createTreeWalker(options.root, NodeFilter.SHOW_TEXT);
+  while (walker.nextNode()) {
+    const content = walker.currentNode.textContent?.toLowerCase();
+    if (!content?.includes(query)) continue;
+    search(content, query, (index) => {
+      const range = new Range();
+      range.setStart(walker.currentNode, index);
+      range.setEnd(walker.currentNode, index + query.length);
+      ranges.push(range);
+    });
+  }
+  return ranges;
+}
+
+function createIntersectionObserver(callback, options) {
   try {
-    return new IntersectionObserver(callback);
+    return new IntersectionObserver(callback, options);
   } catch {
     return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
   }
@@ -1439,10 +1127,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-function interpolate(value, context) {
-  return value.replaceAll(/\{\{\s*([^}\s]+)\s*}}/g, (match, variableName) => {
-    return context[variableName] ? interpolate(context[variableName].toString(), context) : match;
-  });
-}
-
-export { CanBeDisabled, CanBeReadonly, CanBeRequired, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, FocusGroupController, FocusTrapController, FormControl, KeyboardKey, NumberControl, OptionControl, RadioGroupFormControl, RovingTabindexController, SelectFormControl, SharedIntersectionObserver, SharedResizeObserver, WithAriaControls, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createOptions, createResizeObserver, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, fromAriaBooleanAttribute, getAssignedElements, getElementFromEvent, getKeyboardEventInfo, getUniqueId, interpolate, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+export { CanBeDisabled, CanBeExpanded, CanBeReadonly, CanBeRequired, CanBeSelected, CanBeValidated, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, 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, isCustomElementClass, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };