@swiftwc/ui 0.0.0-dev.17 → 0.0.0-dev.19

package/generated/i18n/index.js

@@ -1,3 +1,10 @@
+import { el, en } from './locales';
+export function defineTranslations(factory) {
+    return factory;
+}
+/**
+ * @fires localechange - On html[lang] change!
+ */
 export class I18n {
     static #readyCalled = false;
     static #tag = 'en';
@@ -7,8 +14,30 @@ export class I18n {
     static #decimalSeparator = '.';
     static #dateSeparator = '/';
     static #dateOrder = ['month', 'day', 'year'];
+    static #lang = 'en';
+    /** Registry: language code → factory. Pre-seeded with 'en'. */
+    static #factories = new Map([
+        ['en', en],
+        ['el', el],
+    ]);
+    /** Cache: language code → resolved translation object. */
+    static #strings = new Map();
     static on = new EventTarget();
     // ----------------------------
+    // Public registration API
+    // ----------------------------
+    /**
+     * Register a translation factory for a language.
+     * Call this before the language is first needed.
+     *
+     * @example
+     * I18n.register('el', () => ({ SearchUnavailableContent: { … } }))
+     */
+    static register(lang, factory) {
+        this.#factories.set(lang, factory);
+        this.#strings.delete(lang); // bust cache so next t() re-resolves
+    }
+    // ----------------------------
     // Lazy init
     // ----------------------------
     static #ensureReady() {
@@ -16,72 +45,42 @@ export class I18n {
             this.setOwnConfig();
     }
     // ----------------------------
-    // Proxy with typed target
-    // ----------------------------
-    static _props = new Proxy({}, {
-        get: (_, prop) => {
-            this.#ensureReady();
-            switch (prop) {
-                case 'tag':
-                    return this.#tag;
-                case 'options':
-                    return this.#options;
-                case 'locale':
-                    return this.#locale;
-                case 'decimalSeparator':
-                    return this.#decimalSeparator;
-                case 'dateSeparator':
-                    return this.#dateSeparator;
-                case 'dateOrder':
-                    return this.#dateOrder;
-            }
-        },
-        set: (_, prop, value) => {
-            switch (prop) {
-                case 'tag':
-                    this.#observer?.disconnect();
-                    this.#observer = undefined;
-                    this.#tag = value;
-                    this.#getOwnConfig();
-                    break;
-                case 'options':
-                    this.#options = value;
-                    this.#getOwnConfig();
-                    break;
-            }
-            return true;
-        },
-    });
-    // ----------------------------
     // Accessors
     // ----------------------------
     static get tag() {
-        return this._props.tag;
+        this.#ensureReady();
+        return this.#tag;
     }
     static set tag(val) {
-        this._props.tag = val;
+        this.#observer?.disconnect();
+        this.#observer = undefined;
+        this.#tag = val;
+        this.#getOwnConfig();
     }
     static get options() {
-        return this._props.options;
+        this.#ensureReady();
+        return this.#options;
     }
     static set options(val) {
-        this._props.options = val;
+        this.#options = val;
+        this.#getOwnConfig();
     }
     static get locale() {
-        return this._props.locale;
+        this.#ensureReady();
+        return this.#locale;
     }
     static get decimalSeparator() {
-        return this._props.decimalSeparator;
+        this.#ensureReady();
+        return this.#decimalSeparator;
     }
     static get dateSeparator() {
-        return this._props.dateSeparator;
+        this.#ensureReady();
+        return this.#dateSeparator;
     }
     static get dateOrder() {
-        return this._props.dateOrder;
+        this.#ensureReady();
+        return this.#dateOrder;
     }
-    // ----------------------------
-    // Core logic
-    // ----------------------------
     static setOwnConfig(options) {
         if (!this.#readyCalled)
             this.#readyCalled = true;
@@ -100,7 +99,7 @@ export class I18n {
             return;
         this.#tag = document.documentElement.lang;
         this.#getOwnConfig();
-        this.on.dispatchEvent(new CustomEvent('change'));
+        this.on.dispatchEvent(new CustomEvent('localechange', { detail: { lang: this.#tag } }));
     }
     static #getOwnConfig() {
         try {
@@ -109,7 +108,6 @@ export class I18n {
         catch {
             this.#locale = new Intl.Locale('en');
         }
-        console.debug(this.#locale);
         try {
             const nf = new Intl.NumberFormat(this.#locale);
             const parts = nf.formatToParts(1.1);
@@ -118,11 +116,10 @@ export class I18n {
         catch {
             this.#decimalSeparator = '.';
         }
-        console.debug(this.#decimalSeparator);
         try {
             const df = new Intl.DateTimeFormat(this.#locale);
             const parts = df.formatToParts(new Date(2000, 11, 31));
-            this.#dateOrder = parts.filter(({ type }) => type !== 'literal')?.map(({ type }) => type) ?? ['month', 'day', 'year'];
+            this.#dateOrder = parts.filter(({ type }) => type !== 'literal').map(({ type }) => type) ?? ['month', 'day', 'year'];
             this.#dateSeparator =
                 parts
                     .filter(({ type }) => type === 'literal')
@@ -133,7 +130,38 @@ export class I18n {
             this.#dateOrder = ['month', 'day', 'year'];
             this.#dateSeparator = '/';
         }
-        console.debug(`${I18n.name} ${this.#dateSeparator}`);
-        console.debug(`${I18n.name} ${this.#dateOrder}`);
+        try {
+            this.#lang = this.#resolveLanguage(this.#tag);
+        }
+        catch {
+            this.#lang = 'en';
+        }
+    }
+    /**
+     * Resolve the best available language for a given BCP 47 tag.
+     * Tries the full tag, then just the base language, then falls back to 'en'.
+     */
+    static #resolveLanguage(tag) {
+        const lang = tag instanceof Intl.Locale ? tag.language : new Intl.Locale(tag || 'en').language;
+        if (this.#factories.has(String(tag)))
+            return String(tag);
+        if (this.#factories.has(lang))
+            return lang;
+        return 'en';
+    }
+    /** Look up a top-level translation key for the current language, falling back to 'en'. */
+    static t(key) {
+        this.#ensureReady();
+        if (!this.#strings.has(this.#lang)) {
+            const factory = this.#factories.get(this.#lang) ?? en;
+            this.#strings.set(this.#lang, factory());
+        }
+        const current = this.#strings.get(this.#lang);
+        if (key in current)
+            return current[key];
+        // Key missing from current language — fall back to en
+        if (!this.#strings.has('en'))
+            this.#strings.set('en', en());
+        return this.#strings.get('en')[key];
     }
 }

package/generated/i18n/locales/el.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    readonly SearchUnavailableContent: {
+        readonly NoLabel: "Κανένα αποτέλεσμα";
+        readonly Label: "Κανένα αποτέλεσμα για «{search}»";
+        readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
+    };
+};
+export default _default;

package/generated/i18n/locales/el.js

@@ -0,0 +1,8 @@
+import { defineTranslations } from '../index';
+export default defineTranslations(() => ({
+    SearchUnavailableContent: {
+        NoLabel: 'Κανένα αποτέλεσμα',
+        Label: 'Κανένα αποτέλεσμα για «{search}»',
+        Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
+    },
+}));

package/generated/i18n/locales/en.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    readonly SearchUnavailableContent: {
+        readonly NoLabel: "No Results";
+        readonly Label: "No Results for ”{search}”";
+        readonly Description: "Check the spelling or try a new search.";
+    };
+};
+export default _default;

package/generated/i18n/locales/en.js

@@ -0,0 +1,8 @@
+import { defineTranslations } from '../index';
+export default defineTranslations(() => ({
+    SearchUnavailableContent: {
+        NoLabel: 'No Results',
+        Label: 'No Results for ”{search}”',
+        Description: 'Check the spelling or try a new search.',
+    },
+}));

package/generated/i18n/locales/index.d.ts

@@ -0,0 +1,4 @@
+export { default as el } from './el';
+export * from './el';
+export { default as en } from './en';
+export * from './en';

package/generated/i18n/locales/index.js

@@ -0,0 +1,4 @@
+export { default as el } from './el';
+export * from './el';
+export { default as en } from './en';
+export * from './en';

package/generated/internal/utils/list-active.js

@@ -1,6 +1,6 @@
 const touchList = new WeakMap();
-function onDown(evt) {
-    const el = evt.target.closest('button,summary');
+function onDown({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     touchList.set(el, setTimeout(() => {
@@ -11,18 +11,18 @@ function onDown(evt) {
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
     el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
 }
-function onOver(evt) {
-    const el = evt.target.closest('button,summary');
+function onOver({ target, buttons }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
-    if (0 === evt.buttons)
+    if (0 === buttons)
         return;
     el.classList.add('active');
     el.removeEventListener('pointerover', onOver);
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
-function onLeave(evt) {
-    const el = evt.target.closest('button,summary');
+function onLeave({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     el.addEventListener('pointerover', onOver, { once: true, passive: true });
@@ -35,8 +35,8 @@ function onLeave(evt) {
     touchList.delete(el);
     // })
 }
-function onCancel(evt) {
-    const el = evt.target.closest('button,summary');
+function onCancel({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     // self.requestAnimationFrame(() => {
@@ -49,8 +49,8 @@ function onCancel(evt) {
     touchList.delete(el);
     // })
 }
-function onScroll(evt) {
-    for (const el of evt.target.querySelectorAll('button,summary')) {
+function onScroll({ target }) {
+    for (const el of target?.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');
         if (touchList.has(el))
             clearTimeout(touchList.get(el));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.17",
+  "version": "0.0.0-dev.19",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -57,12 +57,13 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels && npm run build:barrels:i18n",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "barrelsby -D -q -S -d ./js/components -e \".\\.test\\.ts\"",
+    "build:barrels": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
@@ -76,5 +77,8 @@
     "tsx": "^4.21.0",
     "vitest": "^4.0.18"
   },
-  "customElements": "custom-elements/en.json"
+  "customElements": "custom-elements/en.json",
+  "imports": {
+    "#internal/*": "./js/internal/*"
+  }
 }

package/scss/_components.scss

@@ -15,6 +15,8 @@
 
 @forward 'components/sheet-view';
 
+@forward 'components/content-unavailable-view';
+
 @forward 'components/confirmation-dialog';
 
 @forward 'components/scroll-view';

package/scss/components/_bordered-button.scss

@@ -20,3 +20,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_bordered-prominent-button.scss

@@ -17,3 +17,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_borderless-button.scss

@@ -17,3 +17,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='borderless-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_components.scss

@@ -0,0 +1,76 @@
+@forward 'components/index';
+
+@forward 'components/v-keyboard';
+
+@forward 'components/disclosure-group';
+
+@forward 'components/h-divider';
+@forward 'components/v-divider';
+
+@forward 'components/full-screen';
+
+@forward 'components/detail-placeholder';
+
+@forward 'components/sticky-container';
+
+@forward 'components/sheet-view';
+
+@forward 'components/confirmation-dialog';
+
+@forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
+
+@forward 'components/h-stack';
+@forward 'components/v-stack';
+@forward 'components/h-flex-stack';
+@forward 'components/v-flex-stack';
+
+@forward 'components/scroll-view-toolbars';
+
+@forward 'components/tool-bar-item';
+
+@forward 'components/tool-bar-item-group';
+
+@forward 'components/plain-button';
+@forward 'components/borderless-button';
+@forward 'components/bordered-button';
+@forward 'components/bordered-prominent-button';
+@forward 'components/glass-button';
+@forward 'components/glass-prominent-button';
+
+@forward 'components/tool-bar';
+
+@forward 'components/label-view';
+
+@forward 'components/labeled-content';
+
+// @forward 'components/button-view';
+
+@forward 'components/body-view';
+
+@forward 'components/navigation-large-title';
+@forward 'components/navigation-title';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/menu-view';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/list-view';
+@forward 'components/form-view';
+@forward 'components/section-view';
+@forward 'components/table-view';
+@forward 'components/table-row';
+@forward 'components/table-column';
+
+@forward 'components/text-field';
+@forward 'components/date-picker';
+@forward 'components/picker-view';
+
+@forward 'components/navigation-stack';
+@forward 'components/navigation-split-view';
+
+@forward 'components/tab-view';
+@forward 'components/tab-bar';
+@forward 'components/tab-item';

package/scss/components/_content-unavailable-view.scss

@@ -0,0 +1,45 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  content-unavailable-view {
+    :where(&) {
+      place-content: center;
+      place-items: center;
+
+      text-align: center;
+
+      row-gap: 1rem;
+
+      &::part(content-unavailable-actions-stack) {
+        row-gap: 0.2rem;
+      }
+
+      &::part(content-unavailable-title-stack) {
+        --label-flow: vertical;
+
+        --label-font: title3; // NOTE: Safari fix
+      }
+    }
+
+    > :not([slot]) {
+      --label-image-size: 5rem;
+
+      --label-gap: 1rem;
+
+      // --label-font: title3;
+    }
+
+    &:not(:has(> [slot='description'])) {
+      :where(&)::part(content-unavailable-description-stack) {
+        display: none;
+      }
+    }
+
+    &:not(:has(> [slot='actions'])) {
+      :where(&)::part(content-unavailable-actions-stack) {
+        display: none;
+      }
+    }
+  }
+}

package/scss/components/_glass-button.scss

@@ -22,3 +22,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='glass-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_glass-prominent-button.scss

@@ -22,3 +22,11 @@
     }
   }
 }
+
+@layer #{vars.$utils-layer} {
+  [is='glass-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_h-flex-stack.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  h-flex-stack {
+    :where(&) {
+      display: flex;
+      flex-flow: row nowrap;
+
+      place-items: safe center;
+      place-content: safe center;
+    }
+
+    :where(& > *) {
+      max-block-size: 100%;
+    }
+
+    > [frame-height='infinity'] {
+      :where(&) {
+        flex-grow: 1;
+      }
+    }
+  }
+}

package/scss/components/_h-stack.scss

@@ -10,8 +10,8 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
       grid-auto-flow: column;
       grid-template-rows: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }

package/scss/components/_index.scss

@@ -27,6 +27,7 @@
   [is='glass-prominent-button'],
   list-view,
   table-view,
+  content-unavailable-view,
   tool-bar-item,
   tool-bar-item-group,
   sidebar-toggle,
@@ -45,6 +46,9 @@
     }
   }
 
+  :where(content-unavailable-view)::part(content-unavailable-title-stack),
+  :where(content-unavailable-view)::part(content-unavailable-description-stack),
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),