@odx/foundation 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/src/lib/mixins/form-control.js

@@ -0,0 +1,61 @@
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from './can-be-disabled.js';
+import { CanBeReadonly } from './can-be-readonly.js';
+import { CanBeRequired } from './can-be-required.js';
+import { CanBeValidated } from './can-be-validated.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { CustomElement } from '../models/custom-element.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (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(target, key, result);
+  return result;
+};
+const FormControl = dedupeMixin((superClass) => {
+  class FormControlElement extends CanBeValidated(CanBeRequired(CanBeReadonly(CanBeDisabled(superClass)))) {
+    constructor(...args) {
+      super(...args);
+      this.name = "";
+      this.value = "";
+      this.internals = this.attachInternals();
+    }
+    static {
+      this.formAssociated = true;
+    }
+    static {
+      this.shadowRootOptions = {
+        ...CustomElement.shadowRootOptions,
+        delegatesFocus: true
+      };
+    }
+    get form() {
+      return this.internals.form;
+    }
+    toFormValue() {
+      return this.value;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      this.updateAriaAttributes?.();
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "name");
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "value");
+  return FormControlElement;
+});
+
+export { FormControl };

package/dist/{lib → src/lib}/mixins/index.d.ts

@@ -5,6 +5,7 @@ export * from './can-be-validated';
 export * from './dedupe-mixin';
 export * from './form-control';
 export * from './is-localized';
+export * from './is-translatable';
 export * from './number-control';
 export * from './with-aria-controls';
 export * from './with-loading-state';

package/dist/src/lib/mixins/is-localized.js

@@ -0,0 +1,41 @@
+import { SignalWatcher, computed } from '@lit-labs/signals';
+import { property } from 'lit/decorators.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { getLocale } from '../utils/localization.js';
+import { formatDate, formatNumber, formatList, formatRelativeTime } from '../utils/format.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (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(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([
+    property()
+  ], IsLocalizedElement.prototype, "lang");
+  return IsLocalizedElement;
+});
+
+export { IsLocalized };

package/dist/src/lib/mixins/is-translatable.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from '@lit-labs/signals';
+import { CustomElement } from '../models';
+import { Constructor } from './dedupe-mixin';
+import { IsLocalized } from './is-localized';
+export interface IsTranslatable extends IsLocalized {
+    readonly language: Signal.Computed<string>;
+    _getTranslations?(): Record<string, Translation>;
+    _translate(key: string): string;
+}
+type Translation = Record<string, string>;
+export declare const IsTranslatable: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<IsTranslatable> & T;
+export {};
+//# sourceMappingURL=is-translatable.d.ts.map

package/dist/src/lib/mixins/is-translatable.js

@@ -0,0 +1,20 @@
+import { computed } from '@lit-labs/signals';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { IsLocalized } from './is-localized.js';
+
+const IsTranslatable = dedupeMixin((superClass) => {
+  class IsTranslatableElement extends IsLocalized(superClass) {
+    constructor() {
+      super(...arguments);
+      this.language = computed(() => this.locale.get().language);
+    }
+    _translate(key) {
+      const translations = this._getTranslations?.() ?? {};
+      const translation = translations[this.language.get()] ?? translations["en"];
+      return translation?.[key] ?? "";
+    }
+  }
+  return IsTranslatableElement;
+});
+
+export { IsTranslatable };

package/dist/src/lib/mixins/number-control.js

@@ -0,0 +1,63 @@
+import { property } from 'lit/decorators.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { FormControl } from './form-control.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (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(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([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "min");
+  __decorateClass([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "max");
+  __decorateClass([
+    property({ type: Number })
+  ], NumberControlElement.prototype, "step");
+  __decorateClass([
+    property({ type: Number, reflect: true })
+  ], NumberControlElement.prototype, "value");
+  return NumberControlElement;
+});
+
+export { NumberControl };

package/dist/src/lib/mixins/with-aria-controls.js

@@ -0,0 +1,43 @@
+import { property } from 'lit/decorators.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { CanBeDisabled } from './can-be-disabled.js';
+import { getUniqueId } from '../utils/get-unique-id.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (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(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([
+    property({ reflect: true })
+  ], WithAriaControlsElement.prototype, "id");
+  return WithAriaControlsElement;
+});
+
+export { WithAriaControls };

package/dist/src/lib/mixins/with-loading-state.js

@@ -0,0 +1,33 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute, fromAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+
+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);
+    }
+    get loading() {
+      return fromAriaBooleanAttribute(this.loadingContainer.ariaBusy);
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], WithLoadingStateElement.prototype, "loading");
+  return WithLoadingStateElement;
+});
+
+export { WithLoadingState };

package/dist/src/lib/models/custom-element.css.js

@@ -0,0 +1,3 @@
+const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-component-overrides,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",\"Kanit\",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}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-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit;outline:none}#root,#__next{isolation:isolate}[hidden]{display:none}}";
+
+export { customElementStyles as default };

package/dist/src/lib/models/custom-element.js

@@ -0,0 +1,25 @@
+import { LitElement, html, unsafeCSS, CSSResult } from 'lit';
+import customElementStyles from './custom-element.css.js';
+
+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 }));
+  }
+}
+
+export { CustomElement, customElement };

package/dist/src/lib/utils/create-intersection-observer.js

@@ -0,0 +1,9 @@
+function createIntersectionObserver(callback) {
+  try {
+    return new IntersectionObserver(callback);
+  } catch {
+    return { root: null, rootMargin: "", thresholds: [], takeRecords: () => [], observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+
+export { createIntersectionObserver };

package/dist/src/lib/utils/create-mutation-observer.js

@@ -0,0 +1,9 @@
+function createMutationObserver(callback) {
+  try {
+    return new MutationObserver(callback);
+  } catch {
+    return { takeRecords: () => [], observe: () => void 0, disconnect: () => void 0 };
+  }
+}
+
+export { createMutationObserver };

package/dist/src/lib/utils/create-options.js

@@ -0,0 +1,7 @@
+import { toMerged } from 'es-toolkit';
+
+function createOptions(defaultOptions) {
+  return (options) => toMerged(defaultOptions, options ?? {});
+}
+
+export { createOptions };

package/dist/src/lib/utils/create-resize-observer.js

@@ -0,0 +1,9 @@
+function createResizeObserver(callback) {
+  try {
+    return new ResizeObserver(callback);
+  } catch {
+    return { observe: () => void 0, disconnect: () => void 0, unobserve: () => void 0 };
+  }
+}
+
+export { createResizeObserver };

package/dist/src/lib/utils/dom.js

@@ -0,0 +1,31 @@
+import { round } from 'es-toolkit';
+
+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`;
+}
+
+export { findClosestDocument, getElementFromEvent, toPx, toggleAttribute };

package/dist/src/lib/utils/format.js

@@ -0,0 +1,56 @@
+import { getLocalizationOptions } from './localization.js';
+import { parseDate } from './parse-date.js';
+
+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);
+}
+
+export { formatDate, formatList, formatNumber, formatRelativeTime, iso8601DateTimeFormat };

package/dist/src/lib/utils/get-unique-id.js

@@ -0,0 +1,15 @@
+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();
+  }
+}
+
+export { clearUniqueIdCache, getUniqueId };

package/dist/src/lib/utils/keyboard-events.d.ts

@@ -0,0 +1,43 @@
+export declare const KeyboardKey: {
+    readonly ARROW_UP: "ArrowUp";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_LEFT: "ArrowLeft";
+    readonly ARROW_RIGHT: "ArrowRight";
+    readonly ENTER: "Enter";
+    readonly ESCAPE: "Escape";
+    readonly SPACE: " ";
+    readonly TAB: "Tab";
+    readonly BACKSPACE: "Backspace";
+    readonly DELETE: "Delete";
+    readonly END: "End";
+    readonly HOME: "Home";
+    readonly PAGE_UP: "PageUp";
+    readonly PAGE_DOWN: "PageDown";
+    readonly SHIFT: "Shift";
+    readonly CONTROL: "Control";
+    readonly ALT: "Alt";
+    readonly META: "Meta";
+};
+export interface KeyboardEventInfo {
+    actions: {
+        enter: boolean;
+        space: boolean;
+        escape: boolean;
+        tab: boolean;
+        backTab: boolean;
+        start: boolean;
+        end: boolean;
+    };
+    axis: {
+        x: boolean;
+        y: boolean;
+    };
+    direction: {
+        up: boolean;
+        right: boolean;
+        down: boolean;
+        left: boolean;
+    };
+}
+export declare function getKeyboardEventInfo(event: KeyboardEvent): KeyboardEventInfo;
+//# sourceMappingURL=keyboard-events.d.ts.map

package/dist/src/lib/utils/keyboard-events.js

@@ -0,0 +1,42 @@
+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
+    }
+  };
+}
+
+export { KeyboardKey, getKeyboardEventInfo };

package/dist/src/lib/utils/localization.js

@@ -0,0 +1,41 @@
+import { signal } from '@lit-labs/signals';
+import { createMutationObserver } from './create-mutation-observer.js';
+import { createOptions } from './create-options.js';
+
+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);
+  }
+}
+
+export { getLocale, getLocalizationOptions, setLocale, setLocalizationOptions, watchLocaleChanges };

package/dist/src/lib/utils/parse-date.js

@@ -0,0 +1,10 @@
+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;
+}
+
+export { parseDate };

package/dist/src/lib/utils/request-update-on-aria-change.js

@@ -0,0 +1,15 @@
+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
+      });
+    }
+  };
+}
+
+export { requestUpdateOnAriaChange };

package/dist/src/lib/utils/shared-intersection-observer.js

@@ -0,0 +1,32 @@
+import { createIntersectionObserver } from './create-intersection-observer.js';
+
+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();
+
+export { SharedIntersectionObserver };