@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.81

package/generated/events/alert-dialog.d.ts

@@ -0,0 +1,8 @@
+export type AlertReturnDetail = {
+    returnValue: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        'alert:return': CustomEvent<AlertReturnDetail>;
+    }
+}

package/generated/events/alert-dialog.js

@@ -0,0 +1 @@
+export {};

package/generated/events/confirmation-dialog.d.ts

@@ -1,9 +1,9 @@
-export type ReturnDetail = {
+export type ConfirmationReturnDetail = {
     returnValue: string;
     positionAnchor: string;
 };
 declare global {
     interface HTMLElementEventMap {
-        return: CustomEvent<ReturnDetail>;
+        'confirmation:return': CustomEvent<ConfirmationReturnDetail>;
     }
 }

package/generated/events/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';
@@ -5,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/index.js

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';
@@ -5,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/picker-view.d.ts

@@ -1,8 +1,15 @@
 export type PickerSelectionDetail = {
     selection: string;
 };
+export type PickerSearchableDetail = {
+    element: HTMLElement;
+    search: string;
+};
 declare global {
     interface HTMLElementEventMap {
         selection: CustomEvent<PickerSelectionDetail>;
+        'picker:searchfocus': CustomEvent<PickerSearchableDetail>;
+        'picker:searchblur': CustomEvent<PickerSearchableDetail>;
+        'picker:searchinput': CustomEvent<PickerSearchableDetail>;
     }
 }

package/generated/events/scroll-view.js

@@ -1 +1,5 @@
 export {};
+// export interface ScrollViewEventMap {
+//   pagereveal: CustomEvent<PageRevealSwapDetail>
+//   pageswap: CustomEvent<PageRevealSwapDetail>
+// }

package/generated/events/tab-view.d.ts

@@ -1,5 +1,9 @@
 import { type NavigationSplitView, type NavigationStack } from '../components';
 import { type TabBarPlacement } from '../components/tab-view';
+export type TabBeforeDetail = {
+    tag: string;
+    ms: number;
+};
 export type TabDetail = {
     tag: string;
 };
@@ -16,8 +20,8 @@ declare global {
         tabhide: CustomEvent<TabDetail>;
         tabreveal: CustomEvent<TabDetail>;
         tabswap: CustomEvent<TabDetail>;
-        beforetabreveal: CustomEvent<TabDetail>;
-        beforetabswap: CustomEvent<TabDetail>;
+        beforetabreveal: CustomEvent<TabBeforeDetail>;
+        beforetabswap: CustomEvent<TabBeforeDetail>;
         'tab-view:toggle': CustomEvent<TabViewDetail>;
         'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
     }

package/generated/events/text-field.js

@@ -1 +1,4 @@
 export {};
+// export interface TextFieldEventMap {
+//   commit: CustomEvent<TextFieldCommitDetail>
+// }

package/generated/events/toggle-view.d.ts

@@ -0,0 +1,9 @@
+export type ToggleChangeDetail = {
+    isOn: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        'toggle:change': CustomEvent<ToggleChangeDetail>;
+    }
+}

package/generated/events/toggle-view.js

@@ -0,0 +1,4 @@
+export {};
+// export interface ToggleViewEventMap {
+//   'toggle:change': CustomEvent<ToggleChangeDetail>
+// }

package/generated/i18n/index.d.ts

@@ -1,18 +1,26 @@
+import { en } from './locales';
 type LocaleInput = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
-type I18nProps = {
-    tag?: LocaleInput;
-    options?: Intl.LocaleOptions;
-    locale: Intl.Locale;
-    decimalSeparator: string;
-    dateSeparator: string;
-    dateOrder: string[];
+type DeepStringify<T> = {
+    [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
 };
+export declare function defineTranslations<const T extends object>(factory: () => T): () => T;
+type EnTranslations = DeepStringify<ReturnType<typeof en>>;
+/**
+ * @fires localechange - On html[lang] change!
+ */
 export declare class I18n {
     #private;
     static on: EventTarget;
-    static _props: I18nProps;
-    static get tag(): LocaleInput | undefined;
-    static set tag(val: LocaleInput | undefined);
+    /**
+     * Register a translation factory for a language.
+     * Call this before the language is first needed.
+     *
+     * @example
+     * I18n.register('el', () => ({ SearchUnavailableContent: { … } }))
+     */
+    static register(lang: string, factory: () => EnTranslations): void;
+    static get tag(): LocaleInput;
+    static set tag(val: LocaleInput);
     static get options(): Intl.LocaleOptions | undefined;
     static set options(val: Intl.LocaleOptions | undefined);
     static get locale(): Intl.Locale;
@@ -20,5 +28,7 @@ export declare class I18n {
     static get dateSeparator(): string;
     static get dateOrder(): string[];
     static setOwnConfig(options?: Intl.LocaleOptions): void;
+    /** Look up a top-level translation key for the current language, falling back to 'en'. */
+    static t<K extends keyof EnTranslations>(key: K): EnTranslations[K];
 }
 export {};

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,16 @@
+declare const _default: () => {
+    readonly SearchUnavailableContent: {
+        readonly NoLabel: "Κανένα αποτέλεσμα";
+        readonly Label: "Κανένα αποτέλεσμα για «{search}»";
+        readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
+    };
+    readonly ButtonRole: {
+        readonly Back: "Πίσω";
+        readonly Cancel: "Ακύρωση";
+        readonly Close: "Κλείσιμο";
+        readonly Confirm: "Τέλος";
+        readonly Destructive: "Διαγραφή";
+        readonly OK: "OK";
+    };
+};
+export default _default;

package/generated/i18n/locales/el.js

@@ -0,0 +1,16 @@
+import { defineTranslations } from '../index';
+export default defineTranslations(() => ({
+    SearchUnavailableContent: {
+        NoLabel: 'Κανένα αποτέλεσμα',
+        Label: 'Κανένα αποτέλεσμα για «{search}»',
+        Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
+    },
+    ButtonRole: {
+        Back: 'Πίσω',
+        Cancel: 'Ακύρωση',
+        Close: 'Κλείσιμο',
+        Confirm: 'Τέλος',
+        Destructive: 'Διαγραφή',
+        OK: 'OK',
+    },
+}));

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

@@ -0,0 +1,16 @@
+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.";
+    };
+    readonly ButtonRole: {
+        readonly Back: "Back";
+        readonly Cancel: "Cancel";
+        readonly Close: "Close";
+        readonly Confirm: "Confirm";
+        readonly Destructive: "Delete";
+        readonly OK: "OK";
+    };
+};
+export default _default;

package/generated/i18n/locales/en.js

@@ -0,0 +1,16 @@
+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.',
+    },
+    ButtonRole: {
+        Back: 'Back',
+        Cancel: 'Cancel',
+        Close: 'Close',
+        Confirm: 'Confirm',
+        Destructive: 'Delete',
+        OK: 'OK',
+    },
+}));

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/class/css-style-observer.js

@@ -1,5 +1,5 @@
 var _a;
-import { onoff } from '../../internal/utils';
+import { devFlags, onoff } from '../../internal/utils';
 export class CSSStyleObserver {
     #cleanups;
     #options;
@@ -16,7 +16,8 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/class/form-associated-base.d.ts

@@ -1,8 +1,4 @@
 export declare function getInternals(instance: FormAssociatedBase): ElementInternals;
-export declare function makeSlotchangeHandler(t: FormAssociatedBase): {
-    types: string;
-    listener: (evt: Event) => void;
-}[];
 export declare abstract class FormAssociatedBase extends HTMLElement {
     abstract setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
     static get formAssociated(): boolean;

package/generated/internal/class/form-associated-base.js

@@ -1,43 +1,28 @@
+import { devFlags } from '../utils';
 import { CleanupRegistry } from './cleanup-registry';
-import { MutationObserverSingleton } from './mutation-observer-singleton';
 const internals = new WeakMap();
-const trackedElements = new WeakMap();
-const observers = new MutationObserverSingleton();
+// const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
+// const observers = new MutationObserverSingleton()
 export function getInternals(instance) {
     const i = internals.get(instance);
     if (!i)
         throw new Error('Not a FormAssociatedBase instance');
     return i;
 }
-export function makeSlotchangeHandler(t) {
-    const handleSlotchange = (evt) => {
-        console.debug(`${makeSlotchangeHandler.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label']);
-        // for (const el of trackedElements.get(t) ?? [])
-        //   if (!assigned.includes(el)) {
-        //     observers.unobserve(el)
-        //     trackedElements.get(t)?.delete(el)
-        //   }
-        // for (const el of assigned) {
-        //   if (!trackedElements.get(t)?.has(el))
-        //     observers.observe(el, handleTagMutation, {
-        //       attributes: true,
-        //       characterData: true,
-        //       subtree: true,
-        //       childList: true,
-        //       attributeFilter: ['value', 'label'],
-        //     })
-        //   trackedElements.get(t)?.add(el)
-        // }
-        if (0 < assigned.length)
-            handleTagMutation();
-    }, handleTagMutation = (entry) => {
-        console.debug(`${handleTagMutation.name} ⚡️ mutation`);
-        t.setValidity(t.validity, t.validationMessage);
-    };
-    return [{ types: 'slotchange', listener: handleSlotchange }];
-}
+// export function makeSlotchangeHandler(t: FormAssociatedBase) {
+//   const handleSlotchange = ({ type, target: slot }: Event) => {
+//       if (devFlags.debug) console.debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
+//       if (!(slot instanceof HTMLSlotElement && slot)) return
+//       const assigned = slot.assignedElements({ flatten: true })
+//       observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
+//       if (0 < assigned.length) handleTagMutation()
+//     },
+//     handleTagMutation = (entry?: MutationRecord) => {
+//       if (devFlags.debug) console.debug(`${handleTagMutation.name} ⚡️ mutation`)
+//       t.setValidity(t.validity, t.validationMessage)
+//     }
+//   return [{ types: 'slotchange', listener: handleSlotchange }]
+// }
 export class FormAssociatedBase extends HTMLElement {
     static get formAssociated() {
         return true;
@@ -45,17 +30,17 @@ export class FormAssociatedBase extends HTMLElement {
     constructor() {
         super();
         internals.set(this, this.attachInternals());
-        trackedElements.set(this, new Set());
+        // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {
-        console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
-        observers.clearObservationsSet(trackedElements.get(this) ?? new Set());
-        // for (const el of trackedElements.get(this) ?? []) observers.unobserve(el)
-        // trackedElements.get(this)?.clear() // trackedElements.delete(this)
+        // observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
     }
     connectedCallback() {
-        console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
     }
     get type() {
         return this.localName;

package/generated/internal/class/mutation-observer-set.d.ts

@@ -0,0 +1,9 @@
+export declare class MutationObserverSet {
+    #private;
+    private callback;
+    constructor(callback: MutationCallback);
+    observe(target: Element, attributeFilter?: string[]): Promise<void>;
+    unobserve(target: Element): Promise<void>;
+    syncObservations(source: Element[], attributeFilter?: string[]): Promise<void>;
+    unobserveAll(): Promise<void>;
+}

package/generated/internal/class/mutation-observer-set.js

@@ -0,0 +1,42 @@
+import { Snapshot } from '../../snapshot';
+export class MutationObserverSet {
+    callback;
+    #observers = new Map();
+    constructor(callback) {
+        this.callback = callback;
+    }
+    async observe(target, attributeFilter) {
+        await Snapshot.waitReady;
+        if (this.#observers.has(target))
+            return;
+        const observer = new MutationObserver(this.callback);
+        observer.observe(target, {
+            attributes: true,
+            characterData: true,
+            subtree: true,
+            childList: true,
+            ...(attributeFilter && { attributeFilter }),
+        });
+        this.#observers.set(target, observer);
+    }
+    async unobserve(target) {
+        await Snapshot.waitReady;
+        this.#observers.get(target)?.disconnect();
+        this.#observers.delete(target);
+    }
+    async syncObservations(source, attributeFilter) {
+        await Snapshot.waitReady;
+        const sourceSet = new Set(source);
+        for (const el of [...this.#observers.keys()])
+            if (!sourceSet.has(el))
+                this.unobserve(el);
+        for (const el of source)
+            this.observe(el, attributeFilter);
+    }
+    async unobserveAll() {
+        await Snapshot.waitReady;
+        for (const obs of this.#observers.values())
+            obs.disconnect();
+        this.#observers.clear();
+    }
+}

package/generated/internal/class/mutation-observer-singleton.js

@@ -20,6 +20,24 @@ export class MutationObserverSingleton {
         this.#observers.delete(target);
     }
     /** Observes automatically all elements using a Set provided by outside. Calls renderCallback on EVERY change. */
+    // shortcur fot this
+    // #trackedElements = new Set<Element>()
+    // for (const el of this.#trackedElements)
+    //   if (!assigned.includes(el)) {
+    //     observers.unobserve(el)
+    //     this.#trackedElements.delete(el)
+    //   }
+    // for (const el of assigned) {
+    //   if (!this.#trackedElements.has(el))
+    //     observers.observe(el, this.#handleTagMutation, {
+    //       attributes: true,
+    //       characterData: true,
+    //       subtree: true,
+    //       childList: true,
+    //       // attributeFilter: ['value', 'label'],
+    //     })
+    //   this.#trackedElements.add(el)
+    // }
     async syncObservations(set, nodes, renderCallback, attributeFilter) {
         for (const el of set)
             if (!nodes.includes(el)) {

package/generated/internal/class/navigation-view.d.ts

@@ -2,7 +2,7 @@ export declare class NavigationView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }