@odx/foundation 1.0.0-beta.0 → 1.0.0-beta.1

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

@@ -22,6 +22,8 @@ export interface FormatOptions {
 }
 export interface LocalizationOptions {
     defaultLocale: () => LocaleInput;
+    fallbackLanguage: () => Intl.UnicodeBCP47LocaleIdentifier;
+    fallbackTranslation: (key: string) => string;
 }
 export type I18nOptions = LocalizationOptions & FormatOptions;
 export declare function setI18nOptions(options?: Partial<I18nOptions> | null): void;

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

@@ -12,4 +12,4 @@ export interface IsLocalized {
     formatRelativeTime: typeof formatRelativeTime;
 }
 export declare const IsLocalized: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<IsLocalized> & T;
-//# sourceMappingURL=is-localized.mixin.d.ts.map
+//# sourceMappingURL=is-localized.d.ts.map

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

@@ -1,9 +1,9 @@
 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 type TranslateContext = Record<string, string | number | boolean> | string | number | boolean | null;
 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>;

package/dist/i18n/main.d.ts

@@ -1,6 +1,6 @@
 export * from './lib/config.js';
 export * from './lib/format.js';
-export * from './lib/is-localized.mixin.js';
+export * from './lib/is-localized.js';
 export * from './lib/localization.js';
 export * from './lib/models.js';
 export * from './lib/translate.js';

package/dist/i18n.js

@@ -5,6 +5,8 @@ import { k as flattenObject, l as isNotNil } from './vendor-C_WVAD3D.js';
 
 const I18nOptions = createOptions({
   defaultLocale: () => navigator.language,
+  fallbackLanguage: () => "en",
+  fallbackTranslation: (key) => key,
   relativeTimeFormatOptions: { minUnit: "minute" }
 });
 const i18nOptions = signal(null);
@@ -79,7 +81,6 @@ function syncDocumentLanguage(root = document.documentElement) {
   });
 }
 
-const fallbackLocale = "en";
 const translations = signal({});
 function interpolate(value, context) {
   return value.replaceAll(/\{\{\s*([^}\s]+)\s*}}/g, (match, variableName) => {
@@ -92,11 +93,13 @@ function setTranslation(locale, translation) {
 }
 function translate(key, contextInput, locale) {
   return computed(() => {
-    const translationRecord = getTranslationRecord(locale);
-    if (!translationRecord) return key;
-    const value = translationRecord?.[key] ?? getTranslationRecord(fallbackLocale)?.[key] ?? "";
+    const translation = getTranslationRecord(locale);
+    if (!translation) return key;
+    const { fallbackLanguage, fallbackTranslation: fallbackTranslateKey } = getI18nOptions();
+    const fallbackTranslation = getTranslationRecord(fallbackLanguage());
+    const value = translation?.[key] ?? fallbackTranslation?.[key] ?? fallbackTranslateKey(key);
     const context = typeof contextInput === "object" || contextInput === void 0 ? flattenObject(contextInput ?? {}) : { $implicit: contextInput.toString() };
-    return interpolate(value, { ...getTranslationRecord(fallbackLocale), ...translationRecord, ...context });
+    return interpolate(value, { ...fallbackTranslation, ...translation, ...context });
   });
 }
 function getTranslationRecord(localeInput) {

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

@@ -1,5 +1,4 @@
 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;

package/dist/loader.js

@@ -1,11 +1,10 @@
-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();
+    if (typeof entry !== "function") continue;
+    entry.define?.();
   }
 }
 defineCustomElements();

package/dist/main.js

@@ -156,24 +156,23 @@ const emptySlotFallbackFix = directive(SlotFallbackDirective);
 
 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 mergeStyleSheets(...stylesheets) {
+  const mergedStyles = [];
+  for (const styles of stylesheets) {
+    if (!styles) continue;
+    mergedStyles.push(styles instanceof CSSResult || styles instanceof CSSStyleSheet ? styles : unsafeCSS(styles));
+  }
+  return uniqBy(mergedStyles.flat(10), String);
 }
 function customElement(selector, styles = []) {
   return (target) => {
-    const preparedStyles = [customElementStyles, target.styles ?? [], ...styles].filter(Boolean).flat(2).map(toCSSResult);
-    if (selector) {
-      target.styles = uniqBy(preparedStyles, String);
-      target.selector = selector;
-      target.define = () => {
-        if (customElements.get(selector)) return;
-        customElements.define(selector, target);
-      };
-    }
+    if (!selector) return;
+    target.selector = selector;
+    target.styles = mergeStyleSheets(customElementStyles, target.styles, ...styles);
+    target.define = () => {
+      if (customElements.get(selector)) return;
+      customElements.define(selector, target);
+    };
   };
 }
 class CustomElement extends LitElement {
@@ -1127,4 +1126,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-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 };
+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, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@floating-ui/dom": "1.6.13",
     "@odx/typescript-config": "*",
-    "@spectrum-web-components/reactive-controllers": "1.3.0",
+    "@spectrum-web-components/reactive-controllers": "1.4.0",
     "es-toolkit": "1.33.0",
     "focus-trap": "7.6.4",
     "ts-lit-plugin": "2.0.2",
@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@odx/icons": "^4.0.0-rc.15"
   },
-  "sideEffects": ["dist/loader.js", "dist/i18n.js", "*.css"],
+  "sideEffects": ["dist/loader.js", "*.css"],
   "exports": {
     ".": {
       "import": "./dist/main.js",