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

package/dist/i18n/lib/config.d.ts

@@ -1,17 +1,17 @@
-import { Locale, SingleUnitIdentifier } from './models.js';
+import { LocaleInput, SingleUnitIdentifier } from './models.js';
 export interface DateTimeFormatOptions extends Omit<Intl.DateTimeFormatOptions, 'dateStyle'> {
-    locale?: Locale;
+    locale?: LocaleInput;
     dateStyle?: 'iso8601' | Intl.DateTimeFormatOptions['dateStyle'];
 }
 export interface NumberFormatOptions extends Intl.NumberFormatOptions {
-    locale?: Locale;
+    locale?: LocaleInput;
     unit?: SingleUnitIdentifier;
 }
 export interface ListFormatOptions extends Intl.ListFormatOptions {
-    locale?: Locale;
+    locale?: LocaleInput;
 }
 export interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions {
-    locale?: Locale;
+    locale?: LocaleInput;
     minUnit?: Intl.RelativeTimeFormatUnit;
 }
 export interface FormatOptions {
@@ -21,7 +21,7 @@ export interface FormatOptions {
     relativeTimeFormatOptions?: RelativeTimeFormatOptions;
 }
 export interface LocalizationOptions {
-    defaultLocale: () => Locale;
+    defaultLocale: () => LocaleInput;
 }
 export type I18nOptions = LocalizationOptions & FormatOptions;
 export declare function setI18nOptions(options?: Partial<I18nOptions> | null): void;

package/dist/i18n/lib/is-localized.mixin.d.ts

@@ -1,9 +1,11 @@
-import { Signal } from '@lit-labs/signals';
-import { Constructor, CustomElement } from '@odx/foundation';
+import { ReadonlySignal } from '@lit-labs/preact-signals';
+import { Constructor, CustomElement } from '../../lib/main.js';
 import { formatDate, formatList, formatNumber, formatRelativeTime } from './format.js';
 import { getLocale } from './localization.js';
+import { translate } from './translate.js';
 export interface IsLocalized {
-    readonly locale: Signal.Computed<ReturnType<typeof getLocale>>;
+    readonly locale: ReadonlySignal<ReturnType<typeof getLocale>>;
+    t: (...args: Parameters<typeof translate>) => string;
     formatDate: typeof formatDate;
     formatNumber: typeof formatNumber;
     formatList: typeof formatList;

package/dist/i18n/lib/localization.d.ts

@@ -1,5 +1,5 @@
-import { Locale } from './models.js';
-export declare function watchLocaleChanges(root?: HTMLElement): void;
-export declare function setLocale(locale: Locale | null): void;
-export declare function getLocale(locale?: Locale | null): Intl.Locale;
+import { LocaleInput } from './models.js';
+export declare function getLocale(localeInput?: LocaleInput | null): Intl.Locale;
+export declare function setLocale(localeInput?: LocaleInput | null): void;
+export declare function syncDocumentLanguage(root?: HTMLElement): () => void;
 //# sourceMappingURL=localization.d.ts.map

package/dist/i18n/lib/models.d.ts

@@ -1,4 +1,4 @@
-export type Locale = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
+export type LocaleInput = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
 /**
  * Single units sanctioned for use in ECMAScript.
  * See: https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers

package/dist/i18n/lib/translate.d.ts

@@ -1,9 +1,11 @@
-import { Signal } from '@lit-labs/signals';
-import { Locale } from './models.js';
+import { ReadonlySignal } from '@lit-labs/preact-signals';
+import { LocaleInput } from './models.js';
+export type TranslateContext = Record<string, string | number | boolean> | string | number | boolean | null;
 type Translation = {
     [key: string]: Translation | string;
 };
-export declare function setTranslation(locale: Locale, translation: Translation): void;
-export declare function translate(key: string, context?: Record<string, string | number> | null, locale?: Locale | null): Signal.Computed<string>;
+export declare function interpolate(value: string, context: Record<string, string | number>): string;
+export declare function setTranslation(locale: LocaleInput, translation: Translation): void;
+export declare function translate(key: string, contextInput?: TranslateContext, locale?: LocaleInput | null): ReadonlySignal<string>;
 export {};
 //# sourceMappingURL=translate.d.ts.map

package/dist/i18n.js

@@ -1,7 +1,7 @@
-import { signal, SignalWatcher, computed } from '@lit-labs/signals';
-import { createOptions, parseDate, createMutationObserver, dedupeMixin, interpolate } from '@odx/foundation';
+import { signal, effect, computed, SignalWatcher } from '@lit-labs/preact-signals';
+import { createOptions, parseDate, dedupeMixin } from '@odx/foundation';
 import { property } from 'lit/decorators.js';
-import { k as flattenObject } from './vendor.js';
+import { k as flattenObject, l as isNotNil } from './vendor-C_WVAD3D.js';
 
 const I18nOptions = createOptions({
   defaultLocale: () => navigator.language,
@@ -9,10 +9,10 @@ const I18nOptions = createOptions({
 });
 const i18nOptions = signal(null);
 function setI18nOptions(options) {
-  i18nOptions.set(getI18nOptions(options));
+  i18nOptions.value = getI18nOptions(options);
 }
 function getI18nOptions(options) {
-  return I18nOptions(options ?? i18nOptions.get() ?? {});
+  return I18nOptions(options ?? i18nOptions.value ?? {});
 }
 
 function formatDate(input, options) {
@@ -66,27 +66,42 @@ function formatRelativeTime(input, options) {
   return new Intl.RelativeTimeFormat(options?.locale, relativeTimeFormatOptions).format(Math.round(relativeTime / timeUnit.value), timeUnit.unit);
 }
 
-const activeLocale = signal(null, { equals: (t, t2) => t?.toString() === t2?.toString() });
-function watchLocaleChanges(root = document.documentElement) {
-  const updateLocale = () => activeLocale.set(getLocale(root.lang));
-  const observer = createMutationObserver(updateLocale);
-  observer.observe(root, { attributes: true, attributeFilter: ["lang"] });
-  updateLocale();
+const activeLocale = signal(null);
+function getLocale(localeInput) {
+  return new Intl.Locale(localeInput || activeLocale.value || getI18nOptions().defaultLocale());
 }
-function setLocale(locale) {
-  if (locale === null) {
-    document.documentElement.lang = getI18nOptions().defaultLocale().toString();
-  } else {
-    document.documentElement.lang = getLocale(locale).toString();
-  }
+function setLocale(localeInput) {
+  activeLocale.value = localeInput ? getLocale(localeInput) : null;
 }
-function getLocale(locale) {
-  const fallbackLocale = activeLocale.get() || getI18nOptions().defaultLocale();
-  try {
-    return new Intl.Locale(locale || fallbackLocale);
-  } catch {
-    return new Intl.Locale(fallbackLocale);
-  }
+function syncDocumentLanguage(root = document.documentElement) {
+  return effect(() => {
+    root.lang = getLocale().toString();
+  });
+}
+
+const fallbackLocale = "en";
+const translations = signal({});
+function interpolate(value, context) {
+  return value.replaceAll(/\{\{\s*([^}\s]+)\s*}}/g, (match, variableName) => {
+    return isNotNil(context[variableName]) ? interpolate(context[variableName].toString(), context) : match;
+  });
+}
+function setTranslation(locale, translation) {
+  const { language } = getLocale(locale);
+  translations.value = { ...translations.value, [language]: { ...translations.value[language], ...flattenObject(translation, { delimiter: "." }) } };
+}
+function translate(key, contextInput, locale) {
+  return computed(() => {
+    const translationRecord = getTranslationRecord(locale);
+    if (!translationRecord) return key;
+    const value = translationRecord?.[key] ?? getTranslationRecord(fallbackLocale)?.[key] ?? "";
+    const context = typeof contextInput === "object" || contextInput === void 0 ? flattenObject(contextInput ?? {}) : { $implicit: contextInput.toString() };
+    return interpolate(value, { ...getTranslationRecord(fallbackLocale), ...translationRecord, ...context });
+  });
+}
+function getTranslationRecord(localeInput) {
+  const locale = getLocale(localeInput);
+  return translations.value[locale.toString()] ?? translations.value[locale.language] ?? null;
 }
 
 var __defProp = Object.defineProperty;
@@ -106,16 +121,19 @@ const IsLocalized = dedupeMixin((superClass) => {
       this.locale = computed(() => getLocale(this.lang));
     }
     formatDate(...[input, options]) {
-      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
+      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.value });
     }
     formatNumber(...[input, options]) {
-      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
+      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.value });
     }
     formatList(...[input, options]) {
-      return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
+      return formatList(input, { ...options, locale: options?.locale ?? this.locale.value });
     }
     formatRelativeTime(...[input, options]) {
-      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
+      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.value });
+    }
+    t(...[key, context, locale]) {
+      return translate(key, context, locale ?? this.locale.value).value;
     }
   }
   __decorateClass([
@@ -124,17 +142,4 @@ const IsLocalized = dedupeMixin((superClass) => {
   return IsLocalizedElement;
 });
 
-const translations = signal({});
-function setTranslation(locale, translation) {
-  const { language } = getLocale(locale);
-  translations.set({ ...translations.get(), [language]: { ...translations.get()[language], ...flattenObject(translation, { delimiter: "." }) } });
-}
-function translate(key, context, locale) {
-  return computed(() => {
-    const translation = translations.get()[getLocale(locale).language];
-    if (typeof translation?.[key] !== "string") return key;
-    return interpolate(translation[key], { ...translation, ...context });
-  });
-}
-
-export { IsLocalized, formatDate, formatList, formatNumber, formatRelativeTime, getI18nOptions, getLocale, setI18nOptions, setLocale, setTranslation, translate, watchLocaleChanges };
+export { IsLocalized, formatDate, formatList, formatNumber, formatRelativeTime, getI18nOptions, getLocale, interpolate, setI18nOptions, setLocale, setTranslation, syncDocumentLanguage, translate };

package/dist/lib/custom-element.d.ts

@@ -1,10 +1,10 @@
-import { CSSResult, CSSResultGroup, HTMLTemplateResult, LitElement, TemplateResult } from 'lit';
-type AllowedEvents = 'change' | 'select' | 'submit' | 'toggle' | 'remove' | 'add' | 'expand' | 'collapse';
-export declare function customElement(selector?: keyof HTMLElementTagNameMap, styles?: Array<CSSResultGroup | CSSResult | string>): (target: typeof CustomElement) => void;
+import { CSSResultGroup, HTMLTemplateResult, LitElement, TemplateResult } from 'lit';
+export declare function isCustomElementClass(candidate: unknown): candidate is typeof CustomElement;
+export declare function customElement(selector?: keyof HTMLElementTagNameMap, styles?: Array<string | CSSResultGroup>): (target: typeof CustomElement) => void;
 export declare class CustomElement extends LitElement {
     static selector: string;
+    static define: () => void;
     protected render(): HTMLTemplateResult | TemplateResult | string;
-    emit(event: AllowedEvents, eventInit?: CustomEventInit): boolean;
+    emit(event: string, eventInit?: CustomEventInit): boolean;
 }
-export {};
 //# sourceMappingURL=custom-element.d.ts.map

package/dist/lib/decorators/request-update-on-aria-change.d.ts

@@ -1,34 +1,4 @@
 import { ReactiveElement } from 'lit';
-import { ARIAProperty } from '../models/aria-mixin-strict.js';
-/**
- * Sets up a `ReactiveElement` constructor to enable updates when delegating
- * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
- * attributes in their render functions.
- *
- * This function will:
- * - Call `requestUpdate()` when an aria attribute changes.
- * - Add `role="presentation"` to the host.
- *
- * NOTE: The following features are not currently supported:
- * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
- * - Delegating the `role` attribute
- *
- * @example
- * class ButtonElement extends LitElement {
- *   static {
- *     requestUpdateOnAriaChange(XButton);
- *   }
- *
- *   protected override render() {
- *     return html`
- *       <button aria-label=${this.ariaLabel || nothing}>
- *         <slot></slot>
- *       </button>
- *     `;
- *   }
- * }
- *
- * @param ctor The `ReactiveElement` constructor to patch.
- */
+import { ARIAProperty } from '../utils/a11y.js';
 export declare function requestUpdateOnAriaChange(ariaProperties: ARIAProperty[]): (ctor: typeof ReactiveElement) => void;
 //# sourceMappingURL=request-update-on-aria-change.d.ts.map

package/dist/lib/main.d.ts

@@ -1,32 +1,34 @@
+import { ExtractAssetName } from '@odx/assets-utils';
 export * from './controllers/focus-trap.controller.js';
 export * from './decorators/request-update-on-aria-change.js';
-export * from './directives/aria-boolean-attr.js';
 export * from './directives/optional-attr.js';
 export * from './directives/optional-slot.js';
 export * from './directives/slot-fallback.js';
-export * from './external/roving-tabindex.js';
 export * from './facade/checkbox-form-control.js';
 export * from './facade/checkbox-group-form-control.js';
 export * from './facade/option-control.js';
 export * from './facade/radio-group-form-control.js';
 export * from './facade/select-form-control.js';
 export * from './mixins/can-be-disabled.js';
+export * from './mixins/can-be-expanded.js';
 export * from './mixins/can-be-readonly.js';
 export * from './mixins/can-be-required.js';
+export * from './mixins/can-be-selected.js';
 export * from './mixins/can-be-validated.js';
 export * from './mixins/dedupe-mixin.js';
 export * from './mixins/form-control.js';
 export * from './mixins/number-control.js';
-export * from './mixins/with-aria-controls.js';
 export * from './mixins/with-loading-state.js';
-export * from './models/aria-mixin-strict.js';
+export * from './utils/a11y.js';
 export * from './utils/date.js';
 export * from './utils/dom.js';
 export * from './utils/get-unique-id.js';
 export * from './utils/keyboard-events.js';
 export * from './utils/object.js';
+export * from './utils/search-text-content.js';
 export * from './utils/shared-intersection-observer.js';
 export * from './utils/shared-resize-observer.js';
-export * from './utils/string.js';
 export * from './custom-element.js';
+export { effect } from '@lit-labs/preact-signals';
+export type AvailableIcons = keyof _OdxIcon | ExtractAssetName<keyof _OdxIcon>;
 //# sourceMappingURL=main.d.ts.map

package/dist/lib/mixins/can-be-disabled.d.ts

@@ -3,7 +3,7 @@ import { Constructor } from './dedupe-mixin.js';
 export interface CanBeDisabled {
     disabled: boolean;
     _contextDisabled: boolean;
-    onDisabledChanged?(disabled: boolean): void;
+    isContextDisabled(): boolean;
 }
 export declare const CanBeDisabled: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeDisabled> & T;
 //# sourceMappingURL=can-be-disabled.d.ts.map

package/dist/lib/mixins/can-be-expanded.d.ts

@@ -0,0 +1,12 @@
+import { CustomElement } from '../custom-element.js';
+import { CanBeDisabled } from './can-be-disabled.js';
+import { Constructor } from './dedupe-mixin.js';
+export interface CanBeExpanded extends CanBeDisabled {
+    expanded: boolean;
+    collapse(emitEvent?: boolean): void;
+    expand(emitEvent?: boolean): void;
+    toggle(force?: boolean, emitEvent?: boolean): void;
+}
+export type WithAriaControlsElement = CanBeExpanded & CanBeDisabled & HTMLElement;
+export declare const CanBeExpanded: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeExpanded> & T;
+//# sourceMappingURL=can-be-expanded.d.ts.map

package/dist/lib/mixins/can-be-selected.d.ts

@@ -0,0 +1,9 @@
+import { CustomElement } from '../custom-element.js';
+import { ARIAMixinStrict } from '../utils/a11y.js';
+import { Constructor } from './dedupe-mixin.js';
+export interface CanBeSelected {
+    selected: boolean;
+    ariaSelectedValue: ARIAMixinStrict['ariaCurrent'];
+}
+export declare const CanBeSelected: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeSelected> & T;
+//# sourceMappingURL=can-be-selected.d.ts.map

package/dist/lib/{models/aria-mixin-strict.d.ts → utils/a11y.d.ts}

@@ -59,4 +59,6 @@ export interface ARIAMixinStrict extends ARIAMixin {
     ariaValueText: string | null;
     role: ARIARole | null;
 }
-//# sourceMappingURL=aria-mixin-strict.d.ts.map
+export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: boolean): 'true' | 'false';
+export declare function fromAriaBooleanAttribute(value?: string | null): boolean;
+//# sourceMappingURL=a11y.d.ts.map

package/dist/lib/utils/dom.d.ts

@@ -1,3 +1,5 @@
+export type CSSDimensionUnit = 'px' | 'em' | 'rem' | 'vh' | 'vw' | 'vmin' | 'vmax' | '%' | 'fr' | 'auto' | 'inherit' | 'initial' | 'unset';
+export type CSSDimensionValue = `${number}${CSSDimensionUnit}`;
 /**
  * Creates a new MutationObserver instance.
  *
@@ -11,4 +13,5 @@ export declare function findClosestDocument(node: Node): ShadowRoot | Document |
 export declare function toPx(value?: string | number | null): string | null;
 export declare function getAssignedElements<T extends HTMLElement = HTMLElement>(host: HTMLElement, ...slots: string[]): T[];
 export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
+export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit): EventListener;
 //# sourceMappingURL=dom.d.ts.map

package/dist/lib/utils/search-text-content.d.ts

@@ -0,0 +1,7 @@
+export interface SearchTextContentOptions {
+    root: Element;
+    query: string;
+    minlength: number;
+}
+export declare function searchTextContent(options: SearchTextContentOptions): Range[];
+//# sourceMappingURL=search-text-content.d.ts.map

package/dist/lib/utils/shared-intersection-observer.d.ts

@@ -4,7 +4,7 @@
  * @param {IntersectionObserverCallback} callback - The callback to execute when an observed element's size changes.
  * @returns {IntersectionObserver} A IntersectionObserver instance or a dummy object with no-op methods if unsupported.
  */
-export declare function createIntersectionObserver(callback: IntersectionObserverCallback): IntersectionObserver;
+export declare function createIntersectionObserver(callback: IntersectionObserverCallback, options?: IntersectionObserverInit): IntersectionObserver;
 export interface SharedIntersectionObserverOptions {
     fpsLimit: number;
 }

package/dist/loader/main.d.ts

@@ -0,0 +1,2 @@
+export declare function defineCustomElements(): Promise<void>;
+//# sourceMappingURL=main.d.ts.map

package/dist/loader.js

@@ -0,0 +1,13 @@
+import { isCustomElementClass } from '@odx/foundation';
+import * as cdkComponents from '@odx/foundation/cdk';
+import * as components from '@odx/foundation/components';
+
+async function defineCustomElements() {
+  for (const entry of Object.values({ ...components, ...cdkComponents })) {
+    if (!isCustomElementClass(entry)) continue;
+    entry.define();
+  }
+}
+defineCustomElements();
+
+export { defineCustomElements };