@odx/foundation 0.1.0-alpha.0

package/dist/main.js

@@ -0,0 +1,1141 @@
+import { createFocusTrap } from 'focus-trap';
+import { isServer, nothing, html, LitElement, unsafeCSS, CSSResult } from 'lit';
+import { toMerged, round } from 'es-toolkit';
+import { directive, Directive } from 'lit/directive.js';
+import { property } from 'lit/decorators.js';
+import { signal, SignalWatcher, computed } from '@lit-labs/signals';
+
+function createMutationObserver(callback) {
+  try {
+    return new MutationObserver(callback);
+  } catch {
+    return { takeRecords: () => [], observe: () => void 0, disconnect: () => void 0 };
+  }
+}
+
+function createOptions(defaultOptions) {
+  return (options) => toMerged(defaultOptions, options ?? {});
+}
+
+function toggleAttribute(element, name, value) {
+  if (!element) return;
+  if (typeof value === "boolean") {
+    element.toggleAttribute(name, value);
+    return;
+  }
+  if (value != null) {
+    element.setAttribute(name, value.toString());
+    return;
+  }
+  element.removeAttribute(name);
+}
+function getElementFromEvent(event, filterFn) {
+  return event.composedPath().find((node) => node instanceof Element && filterFn(node));
+}
+function findClosestDocument(node) {
+  let parent = node.parentNode;
+  while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && parent.nodeType !== Node.DOCUMENT_NODE) {
+    parent = parent.parentNode;
+  }
+  return parent;
+}
+function toPx(value) {
+  const coercedValue = Number(value);
+  if (Number.isNaN(coercedValue)) return null;
+  return `${round(coercedValue, 2)}px`;
+}
+
+const LocalizationOptions = createOptions({
+  defaultLocale: () => navigator.language,
+  relativeTimeFormatOptions: {
+    minUnit: "minute"
+  }
+});
+const localizationOptions = signal(null);
+const activeLocale = signal(null, { equals: (t, t2) => t?.toString() === t2?.toString() });
+function setLocalizationOptions(options) {
+  localizationOptions.set(getLocalizationOptions(options));
+}
+function getLocalizationOptions(options) {
+  return LocalizationOptions(options ?? localizationOptions.get() ?? {});
+}
+function watchLocaleChanges(root = document.documentElement) {
+  const updateLocale = () => activeLocale.set(getLocale(root.lang));
+  const observer = createMutationObserver(updateLocale);
+  observer.observe(root, { attributes: true, attributeFilter: ["lang"] });
+  updateLocale();
+}
+function setLocale(locale) {
+  if (locale === null) {
+    document.documentElement.lang = getLocalizationOptions().defaultLocale().toString();
+  } else {
+    document.documentElement.lang = getLocale(locale).toString();
+  }
+}
+function getLocale(locale) {
+  const fallbackLocale = activeLocale.get() || getLocalizationOptions().defaultLocale();
+  try {
+    return new Intl.Locale(locale || fallbackLocale);
+  } catch {
+    return new Intl.Locale(fallbackLocale);
+  }
+}
+
+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 iso8601DateTimeFormat = new Intl.DateTimeFormat("sv-SE", { dateStyle: "short" });
+function formatDate(input, options) {
+  const value = parseDate(input);
+  if (!value) return "";
+  const { dateTimeFormatOptions } = getLocalizationOptions({ dateTimeFormatOptions: options });
+  if (dateTimeFormatOptions?.dateStyle === "iso8601") {
+    return iso8601DateTimeFormat.format(value);
+  }
+  return new Intl.DateTimeFormat(options?.locale, dateTimeFormatOptions).format(value);
+}
+function formatNumber(input, options) {
+  const value = Number(input);
+  if (Number.isNaN(value)) return "";
+  const { numberFormatOptions } = getLocalizationOptions({ numberFormatOptions: options });
+  if (numberFormatOptions?.currency) {
+    numberFormatOptions.style = "currency";
+  }
+  return new Intl.NumberFormat(numberFormatOptions?.locale, numberFormatOptions).format(value);
+}
+function formatList(input, options) {
+  if (input.length === 0) return "";
+  const { listFormatOptions } = getLocalizationOptions({ listFormatOptions: options });
+  return new Intl.ListFormat(options?.locale, listFormatOptions).format(input);
+}
+const availableTimeUnits = [
+  { max: 59e3, value: 1e3, unit: "second" },
+  // max 59 seconds
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Number.POSITIVE_INFINITY, value: 31536e6, unit: "year" }
+];
+function findTimeUnit(value, minUnit) {
+  const minTimeUnit = availableTimeUnits.find(({ unit }) => unit === minUnit) ?? availableTimeUnits[0];
+  return availableTimeUnits.find((config) => value < config.max && config.value >= minTimeUnit.value);
+}
+function formatRelativeTime(input, options) {
+  const value = parseDate(input);
+  if (!value) return "";
+  const { relativeTimeFormatOptions } = getLocalizationOptions({ relativeTimeFormatOptions: options });
+  const relativeTime = value.getTime() - (/* @__PURE__ */ new Date()).getTime();
+  const timeUnit = findTimeUnit(Math.abs(relativeTime), relativeTimeFormatOptions?.minUnit);
+  return new Intl.RelativeTimeFormat(options?.locale, relativeTimeFormatOptions).format(Math.round(relativeTime / timeUnit.value), timeUnit.unit);
+}
+
+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 KeyboardKey = /* @__PURE__ */ ((KeyboardKey2) => {
+  KeyboardKey2["ARROW_UP"] = "ArrowUp";
+  KeyboardKey2["ARROW_DOWN"] = "ArrowDown";
+  KeyboardKey2["ARROW_LEFT"] = "ArrowLeft";
+  KeyboardKey2["ARROW_RIGHT"] = "ArrowRight";
+  KeyboardKey2["ENTER"] = "Enter";
+  KeyboardKey2["ESCAPE"] = "Escape";
+  KeyboardKey2["SPACE"] = " ";
+  KeyboardKey2["TAB"] = "Tab";
+  KeyboardKey2["BACKSPACE"] = "Backspace";
+  KeyboardKey2["DELETE"] = "Delete";
+  KeyboardKey2["END"] = "End";
+  KeyboardKey2["HOME"] = "Home";
+  KeyboardKey2["PAGE_UP"] = "PageUp";
+  KeyboardKey2["PAGE_DOWN"] = "PageDown";
+  KeyboardKey2["SHIFT"] = "Shift";
+  KeyboardKey2["CONTROL"] = "Control";
+  KeyboardKey2["ALT"] = "Alt";
+  KeyboardKey2["META"] = "Meta";
+  return KeyboardKey2;
+})(KeyboardKey || {});
+function getKeyboardEventInfo(event) {
+  const { key } = event;
+  const up = key === "ArrowUp" /* ARROW_UP */;
+  const right = key === "ArrowRight" /* ARROW_RIGHT */;
+  const down = key === "ArrowDown" /* ARROW_DOWN */;
+  const left = key === "ArrowLeft" /* ARROW_LEFT */;
+  return {
+    axis: { x: left || right, y: up || down },
+    direction: { up, right, down, left },
+    actions: {
+      enter: key === "Enter" /* ENTER */,
+      escape: key === "Escape" /* ESCAPE */,
+      space: key === " " /* SPACE */,
+      tab: key === "Tab" /* TAB */ && !event.shiftKey,
+      backTab: key === "Tab" /* TAB */ && event.shiftKey,
+      start: key === "Home" /* HOME */,
+      end: key === "End" /* END */
+    }
+  };
+}
+
+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
+      });
+    }
+  };
+}
+
+function createIntersectionObserver(callback) {
+  try {
+    return new IntersectionObserver(callback);
+  } catch {
+    return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+
+class SharedIntersectionObserverInstance {
+  #observer;
+  #handlers = /* @__PURE__ */ new WeakMap();
+  #updateLog = /* @__PURE__ */ new WeakMap();
+  observe(target, handler, options = { fpsLimit: 60 }) {
+    this.#observer ??= createIntersectionObserver(this.#handleIntersection);
+    this.#handlers.set(target, [handler, options.fpsLimit]);
+    this.#observer.observe(target);
+  }
+  unobserve(target) {
+    this.#handlers.delete(target);
+    this.#observer?.unobserve(target);
+  }
+  #handleIntersection = (entries) => {
+    if (!this.#observer) return;
+    for (const entry of entries) {
+      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
+      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit)) continue;
+      handler?.([entry], this.#observer);
+      this.#updateLog.set(entry.target, Date.now());
+    }
+  };
+  #shouldUpdate(target, fpsLimit) {
+    if (!target.isConnected || typeof fpsLimit !== "number" || fpsLimit < 1) return false;
+    return Date.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
+  }
+}
+const SharedIntersectionObserver = new SharedIntersectionObserverInstance();
+
+function createResizeObserver(callback) {
+  try {
+    return new ResizeObserver(callback);
+  } catch {
+    return { observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+
+class SharedResizeObserverInstance {
+  #observer;
+  #handlers = /* @__PURE__ */ new WeakMap();
+  #updateLog = /* @__PURE__ */ new WeakMap();
+  observe(target, handler, options = { fpsLimit: 60 }) {
+    const { fpsLimit, ...observerOptions } = options;
+    this.#observer ??= createResizeObserver(this.#handleResize);
+    this.#handlers.set(target, [handler, fpsLimit]);
+    this.#observer.observe(target, observerOptions);
+  }
+  unobserve(target) {
+    this.#handlers.delete(target);
+    this.#observer?.unobserve(target);
+  }
+  #handleResize = (entries) => {
+    if (!this.#observer) return;
+    for (const entry of entries) {
+      const [handler, fpsLimit] = this.#handlers.get(entry.target) ?? [];
+      if (typeof handler !== "function" || !this.#shouldUpdate(entry.target, fpsLimit ?? 60)) continue;
+      handler?.([entry], this.#observer);
+      this.#updateLog.set(entry.target, Date.now());
+    }
+  };
+  #shouldUpdate(target, fpsLimit) {
+    if (!target.isConnected || fpsLimit < 1) return false;
+    return Date.now() - (this.#updateLog.get(target) ?? 0) >= 1e3 / fpsLimit;
+  }
+}
+const SharedResizeObserver = new SharedResizeObserverInstance();
+
+async function waitForAnimations(element, subtree = false) {
+  if (!element || typeof element.getAnimations !== "function") {
+    return [];
+  }
+  return Promise.all(element.getAnimations({ subtree }).map((animation) => animation.finished)).catch(() => []);
+}
+
+const FocusTrapControllerOptions = createOptions({
+  escapeDeactivates: false,
+  tabbableOptions: { getShadowRoot: true }
+});
+class FocusTrapController {
+  #host;
+  #options;
+  #focusTrap;
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = FocusTrapControllerOptions(options);
+    this.#host.addController(this);
+  }
+  async activate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.activate();
+  }
+  async deactivate() {
+    await this.#host.updateComplete;
+    this.#focusTrap?.deactivate();
+  }
+  async toggle(state) {
+    if (state ?? !this.#focusTrap?.active) {
+      return this.activate();
+    }
+    return this.deactivate();
+  }
+  async hostConnected() {
+    if (isServer) return;
+    await this.#host.updateComplete;
+    this.#focusTrap ??= createFocusTrap(this.#host, {
+      ...this.#options,
+      checkCanFocusTrap: this.#checkCanFocusTrap.bind(this),
+      checkCanReturnFocus: this.#checkCanReturnFocus.bind(this)
+    });
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  async #checkCanFocusTrap(containers) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanFocusTrap?.(containers);
+  }
+  async #checkCanReturnFocus(trigger) {
+    await waitForAnimations(this.#host);
+    await this.#options.checkCanReturnFocus?.(trigger);
+  }
+}
+
+function 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;
+};
+
+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 }) {
+    if (!options?.host || !(element instanceof HTMLSlotElement)) return;
+    const host = options.host;
+    const slottedElementSelector = element.name ? `[slot="${element.name}"]` : "*";
+    if (host.querySelectorAll(slottedElementSelector).length > 0 || host.textContent?.trim()) return;
+    host.textContent = "";
+  }
+  render() {
+  }
+}
+const emptySlotFallbackFix = directive(SlotFallbackDirective);
+
+function ensureMethod(value, type, fallback) {
+  if (typeof value === type) {
+    return () => value;
+  }
+  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 === 0) 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 === 0) 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 === 0) 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();
+    this.cachedElements = void 0;
+    this.offset = offset;
+    requestAnimationFrame(() => {
+      for (const element of this.elements) {
+        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] && !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;
+      for (const element of this.elements) {
+        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) {
+    for (const el of this.elements) {
+      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 appliedClassMixins = /* @__PURE__ */ new WeakMap();
+function wasMixinPreviouslyApplied(mixin, superClass) {
+  let klass = superClass;
+  while (klass) {
+    if (appliedClassMixins.get(klass) === mixin) {
+      return true;
+    }
+    klass = Object.getPrototypeOf(klass);
+  }
+  return false;
+}
+function dedupeMixin(mixin) {
+  return (superClass) => {
+    if (wasMixinPreviouslyApplied(mixin, superClass)) {
+      return superClass;
+    }
+    const mixedClass = mixin(superClass);
+    appliedClassMixins.set(mixedClass, mixin);
+    return mixedClass;
+  };
+}
+
+var __defProp$7 = Object.defineProperty;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$7(target, key, result);
+  return result;
+};
+const CanBeDisabled = dedupeMixin((superClass) => {
+  class CanBeDisabledElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.#initialTabIndex = 0;
+      this.disabled = false;
+    }
+    #initialTabIndex;
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.#initialTabIndex = Math.max(0, this.tabIndex || 0);
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("disabled")) {
+        this.tabIndex = this.disabled ? -1 : this.#initialTabIndex;
+        this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      }
+    }
+  }
+  __decorateClass$7([
+    property({ type: Boolean, reflect: true })
+  ], CanBeDisabledElement.prototype, "disabled");
+  return CanBeDisabledElement;
+});
+
+var __defProp$6 = Object.defineProperty;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$6(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$6([
+    property({ type: Boolean, reflect: true })
+  ], CanBeReadonlyElement.prototype, "readonly");
+  return CanBeReadonlyElement;
+});
+
+var __defProp$5 = Object.defineProperty;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$5(target, key, result);
+  return result;
+};
+const CanBeRequired = dedupeMixin((superClass) => {
+  class CanBeRequiredElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.required = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("required")) {
+        this.ariaRequired = toAriaBooleanAttribute(this.required);
+      }
+    }
+  }
+  __decorateClass$5([
+    property({ type: Boolean, reflect: true })
+  ], CanBeRequiredElement.prototype, "required");
+  return CanBeRequiredElement;
+});
+
+const CanBeValidated = dedupeMixin((superClass) => {
+  class CanBeValidatedElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusable = true;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
+    setValidity(flags, target = this) {
+      const errorKey = Object.keys(flags ?? {}).find((key) => flags?.[key] === true);
+      this.internals.setValidity(flags, errorKey ?? "unknown error", target);
+    }
+  }
+  return CanBeValidatedElement;
+});
+
+const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-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)}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit}#root,#__next{isolation:isolate}[hidden]{display:none}}";
+
+function toCSSResult(value) {
+  return value instanceof CSSResult || value instanceof CSSStyleSheet ? value : unsafeCSS(value);
+}
+function customElement(selector, styles = []) {
+  if (globalThis.customElements.get(selector)) return () => void 0;
+  const preparedStyles = [customElementStyles, styles].map(toCSSResult);
+  return (target) => {
+    target.selector = selector;
+    target.styles = target.styles ? [target.styles, preparedStyles].flat() : preparedStyles;
+    customElements.define(target.selector, target);
+  };
+}
+class CustomElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+  emit(event, eventInit) {
+    return !this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true, cancelable: true, ...eventInit }));
+  }
+}
+
+var __defProp$4 = Object.defineProperty;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$4(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;
+    }
+    get type() {
+      return this.localName;
+    }
+    get states() {
+      return this.internals.states;
+    }
+    toFormValue() {
+      return this.value;
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass$4([
+    property()
+  ], FormControlElement.prototype, "name");
+  __decorateClass$4([
+    property()
+  ], FormControlElement.prototype, "value");
+  return FormControlElement;
+});
+
+var __defProp$3 = Object.defineProperty;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$3(target, key, result);
+  return result;
+};
+const IsLocalized = dedupeMixin((superClass) => {
+  class IsLocalizedElement extends SignalWatcher(superClass) {
+    constructor() {
+      super(...arguments);
+      this.locale = computed(() => getLocale(this.lang));
+    }
+    formatDate(input, options) {
+      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatNumber(input, options) {
+      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatList(input, options) {
+      return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatRelativeTime(input, options) {
+      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+  }
+  __decorateClass$3([
+    property()
+  ], IsLocalizedElement.prototype, "lang");
+  return IsLocalizedElement;
+});
+
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
+};
+const MIN_STEP_VALUE = 1 / 2 ^ 16;
+const NumberControl = dedupeMixin((superClass) => {
+  class NumberControlElement extends FormControl(superClass) {
+    constructor() {
+      super(...arguments);
+      this.min = 0;
+      this.max = 100;
+      this.step = 1;
+      this.value = 0;
+    }
+    getValueText() {
+      return this.ariaValueText?.trim() ?? "";
+    }
+    update(props) {
+      if (props.has("value")) {
+        this.internals.ariaValueNow = String(this.value);
+        this.internals.ariaValueText = this.getValueText();
+      }
+      if (props.has("min")) {
+        this.internals.ariaValueMin = String(this.min);
+      }
+      if (props.has("max")) {
+        this.internals.ariaValueMax = String(this.max);
+      }
+      if (props.has("step")) {
+        this.step = Math.max(MIN_STEP_VALUE, this.step);
+      }
+      this.value = Math.max(this.min, Math.min(this.value, this.max));
+      super.update?.(props);
+    }
+    toFormValue() {
+      return String(this.value);
+    }
+  }
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "min");
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "max");
+  __decorateClass$2([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "step");
+  __decorateClass$2([
+    property({ type: Number, reflect: true })
+  ], NumberControlElement.prototype, "value");
+  return NumberControlElement;
+});
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (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");
+  return WithAriaControlsElement;
+});
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key) ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const WithLoadingState = dedupeMixin((superClass) => {
+  class WithLoadingStateElement extends superClass {
+    get loadingContainer() {
+      return this;
+    }
+    set loading(value) {
+      this.loadingContainer.ariaBusy = toAriaBooleanAttribute(value);
+      this.loadingContainer.inert = value;
+    }
+    get loading() {
+      return fromAriaBooleanAttribute(this.loadingContainer.ariaBusy);
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], WithLoadingStateElement.prototype, "loading");
+  return WithLoadingStateElement;
+});
+
+export { CanBeDisabled, CanBeReadonly, CanBeRequired, CanBeValidated, CustomElement, FocusTrapController, FormControl, IsLocalized, KeyboardKey, NumberControl, RovingTabindexController, SharedIntersectionObserver, SharedResizeObserver, WithAriaControls, WithLoadingState, clearUniqueIdCache, createMutationObserver, createOptions, customElement, dedupeMixin, emptySlotFallbackFix, findClosestDocument, formatDate, formatList, formatNumber, formatRelativeTime, fromAriaBooleanAttribute, getElementFromEvent, getKeyboardEventInfo, getLocale, getLocalizationOptions, getUniqueId, iso8601DateTimeFormat, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, setLocale, setLocalizationOptions, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations, watchLocaleChanges };