@swiftwc/ui 0.0.0-dev.35 → 0.0.0-dev.37

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

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

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

@@ -5,6 +5,7 @@ declare const _default: () => {
         readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
     };
     readonly ButtonRole: {
+        readonly Back: "Πίσω";
         readonly Cancel: "Ακύρωση";
         readonly Close: "Κλείσιμο";
         readonly Confirm: "Τέλος";

package/generated/i18n/locales/el.js

@@ -6,6 +6,7 @@ export default defineTranslations(() => ({
         Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
     },
     ButtonRole: {
+        Back: 'Πίσω',
         Cancel: 'Ακύρωση',
         Close: 'Κλείσιμο',
         Confirm: 'Τέλος',

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

@@ -5,6 +5,7 @@ declare const _default: () => {
         readonly Description: "Check the spelling or try a new search.";
     };
     readonly ButtonRole: {
+        readonly Back: "Back";
         readonly Cancel: "Cancel";
         readonly Close: "Close";
         readonly Confirm: "Confirm";

package/generated/i18n/locales/en.js

@@ -6,6 +6,7 @@ export default defineTranslations(() => ({
         Description: 'Check the spelling or try a new search.',
     },
     ButtonRole: {
+        Back: 'Back',
         Cancel: 'Cancel',
         Close: 'Close',
         Confirm: 'Confirm',

package/generated/internal/class/css-style-observer.js

@@ -1,5 +1,5 @@
 var _a;
-import { onoff } from '../../internal/utils';
+import { debug, onoff } from '../../internal/utils';
 export class CSSStyleObserver {
     #cleanups;
     #options;
@@ -16,7 +16,7 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
+        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,46 +1,28 @@
+import { debug } 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 instanceof HTMLSlotElement && evt.target;
-        if (!slot)
-            return;
-        const 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) => {
+//       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) => {
+//       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;
@@ -48,17 +30,15 @@ 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`);
+        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`);
+        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.js

@@ -1,7 +1,7 @@
 var _a;
 import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { frame, onoff } from '../utils';
+import { debug, frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
         return ['hidden'];
@@ -56,7 +56,7 @@ export class NavigationView extends HTMLElement {
                     // consume it (important so it doesn’t leak to next change)
                     this.#recentBefore = undefined;
                 }
-                console.debug(`${_a.name} 💡 ${eventType}`);
+                debug(`${_a.name} 💡 ${eventType}`);
                 frame(this).then(() => {
                     // if (!r) return
                     target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
@@ -65,7 +65,7 @@ export class NavigationView extends HTMLElement {
         }
     }
     #handleBeforeTabRevealOrSwap = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.id !== evt.detail?.tag)
             return;
         this.#recentBefore = {

package/generated/internal/decorators/adaptive-slot.d.ts

@@ -0,0 +1 @@
+export default function (filter?: (el: HTMLElement) => boolean): <T extends CustomElementConstructor>(Base: T, _context?: ClassDecoratorContext<T>) => void;

package/generated/internal/decorators/adaptive-slot.js

@@ -0,0 +1,47 @@
+import { Snapshot } from '../../snapshot';
+import { CleanupRegistry } from '../class/cleanup-registry';
+import { debug, onoff } from '../utils';
+export default function (filter) {
+    const handleMediaChange = (el, { type, matches }) => {
+        debug(`${el.localName} ⚡️ ${type}`);
+        if (matches) {
+            if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
+                return;
+            const newSlot = ['destructive-action'].includes(el.slot) ? 'bottom-bar-leading' : 'bottom-bar-trailing';
+            if (el.slot !== newSlot)
+                el.dataset.previousSlot = el.slot;
+            el.slot = newSlot;
+        }
+        else {
+            if (!el.matches(`[data-previous-slot]`))
+                return;
+            el.slot = el.dataset.previousSlot ?? '';
+            delete el.dataset.previousSlot;
+        }
+    };
+    return function (Base, _context) {
+        const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
+        Base.prototype.connectedCallback = function () {
+            console.debug(`decorator:[${this.localName}] ⚡️ connect`);
+            originalConnected?.call(this);
+            if (filter && !filter(this))
+                return;
+            if (!this.closest('[is=sheet-view]'))
+                return;
+            if (!self.matchMedia('(pointer: fine)').matches)
+                return;
+            const handler1 = handleMediaChange.bind(null, this);
+            CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on(), 'adaptive-slot');
+            Snapshot.waitReady.then(() => {
+                handleMediaChange(this, new MediaQueryListEvent(`media-change`, {
+                    matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+                })); // Initial check
+            });
+        };
+        Base.prototype.disconnectedCallback = function () {
+            console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
+            originalDisconnected?.call(this);
+            CleanupRegistry.unregister(this, 'adaptive-slot');
+        };
+    };
+}

package/generated/internal/decorators/custom-element.d.ts

@@ -1,4 +1,4 @@
-export declare function customElement<T extends {
+export default function <T extends {
     new (...args: any[]): {};
 }>(constructor: T): {
     new (...args: any[]): {};

package/generated/internal/decorators/custom-element.js

@@ -1,4 +1,5 @@
-export function customElement(constructor) {
+// https://www.typescriptlang.org/docs/handbook/decorators.html
+export default function (constructor) {
     return class extends constructor {
     };
 }

package/generated/internal/decorators/index.d.ts

@@ -0,0 +1,4 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';

package/generated/internal/decorators/index.js

@@ -0,0 +1,4 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';

package/generated/internal/privateNamespace.d.ts

@@ -1,4 +1,14 @@
 import type * as Components from '../components';
+import { NavigationPath } from '../internal/class/navigation-path';
+type TransitionType = 'forwards' | 'backwards' | 'reload';
 export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
 export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
 export type NavigationPage = Components.SidebarView | Components.ScrollView;
+export declare function queryInsertPosition(frame: NavigationHost): "afterend" | "beforebegin";
+type UpdateCallback = () => void | Promise<void>;
+type NavigateOptions = {
+    updateCallback?: UpdateCallback;
+    tos?: () => NavigationPath[];
+};
+export declare const startViewTransition: (target: HTMLElement, type?: TransitionType, updateCallbackOrOptions?: UpdateCallback | NavigateOptions) => Promise<void>;
+export {};

package/generated/internal/privateNamespace.js

@@ -1 +1,159 @@
-export {};
+import { NavigationPath } from '../internal/class/navigation-path';
+import { debug } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+export function queryInsertPosition(frame) {
+    if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
+        return 'beforebegin'; // lookFor = 'previousElementSibling'
+    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'BODY-VIEW' === frame?.tagName)
+        return 'beforebegin'; // lookFor = 'previousElementSibling'
+    return 'afterend'; // lookFor = 'nextElementSibling'
+}
+const cleanup = (lm, type) => {
+    let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
+    if (['backwards', 'forwards'].includes(type ?? ''))
+        for (let i = arr.length - 1; i >= 0; i--)
+            if (arr[i].startsWith('backwards' === type ? 'fw' : 'bw'))
+                arr.splice(i, 1);
+    for (const el of [...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? [])])
+        el.classList.remove(...arr);
+};
+export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
+    debug(`startViewTransition (${type})`, target);
+    if (!(target instanceof HTMLElement))
+        throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
+    if (!['forwards', 'backwards', 'reload'].includes(type))
+        throw new TypeError("Argument 2 ('type') to client.startViewTransition must be of TransitionType");
+    const options = typeof updateCallbackOrOptions === 'function'
+        ? {
+            updateCallback: updateCallbackOrOptions,
+        }
+        : (updateCallbackOrOptions ?? {}), updateCallback = options.updateCallback ?? (async () => { });
+    await Snapshot.waitReady;
+    const from = new NavigationPath(target); //const from = closestBody(target) //event.target as HTMLElement)
+    if ('forwards' === type) {
+        await updateCallback(); // updatetheDOMSomehow
+        // Snapshot.getSnapshot(from)
+        // const root = getRootViewController(from)
+        // const oldPath = new NavigationPath(from)
+        const root = [from, ...from.parents()]
+            .map((item) => item.component)
+            .filter(Boolean)
+            .at(-1);
+        // const { toolBarConfig: oldToolbars } = getComputedView(from) // const { toolBarConfig: oldToolbars, slot: oldSLot, page: oldPage } = getComputedView(from) //
+        // console.log(88, oldPage, oldPath.page, oldSLot, oldPath.slot, oldToolbars, oldPath.toolBarConfig)
+        // const oldToolbars = Snapshot.toolbarItems
+        // const { toolBarConfig: oldToolbars, host: oldHost } = getComputedView(from)
+        const tos = options.tos?.() ?? [...from.children()].map((item) => item?.hydrate()), //queryBodyAll(oldSLot), //[...oldPath.children()].map((item) => item.body).filter(Boolean),//
+        to = tos.at(-1), 
+        // to = newPath?.body, //tos.slice(-1)?.pop?.(), //Snapshot.leaf, //
+        // newHost = newPath?.component, //{ host: newHost } = getComputedView(to),
+        newToolbars = tos.flatMap((item) => item.toolBarConfig ?? []).filter((item) => !!item), 
+        // .map((item) => item.toolBarConfig)
+        // .flat()
+        // .filter(Boolean), //queryToolbarConfigAll(oldSLot),
+        modalViews = tos.map((item) => item.component).filter((item) => !!item && item.matches('dialog')); //[...queryHostAll(oldPage)].filter?.((item) => item?.matches('dialog'))
+        // toFrame = Snapshot.leafContainer, //queryHostAll(from).slice(-1)?.pop?.(),
+        // toToolbars = Snapshot.leafToolbarItems
+        // dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
+        // if ('DIALOG' === newHost?.tagName) {
+        //   ;(newHost as HTMLDialogElement).showModal()
+        //   debug(`⚡️ view-transition-start (${type})`)
+        //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
+        //   debug(`⚡️ view-transition-end (${type})`)
+        //   return
+        // }
+        // purge
+        cleanup(root, 'backwards');
+        // prepare old
+        from.body?.classList.add(Snapshot.config['vt-fwd-class-name']);
+        from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
+        for (const oldToolbar of from.toolBarConfig ?? [])
+            oldToolbar.classList.add('fwn'); // prepare navbs
+        // prepare new
+        const toolbarExclusion = 0 < modalViews.length
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
+        for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
+            bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
+        for (const bt of tos?.filter?.(bodyExclusion) ?? []) {
+            bt.body?.classList.add('fwdd'); //to?.classList.add('fwdd')
+            bt.body?.dispatchEvent(new CustomEvent('pagereveal', { detail: { page: bt.body }, bubbles: true, composed: true }));
+        }
+        if (0 < modalViews.length) {
+            for await (const el of modalViews)
+                el.showModal();
+            debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
+            debug(`⚡️ view-dialog-transition-end (${type})`);
+        }
+        else {
+            debug(`⚡️ view-transition-start (${type})`);
+            await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
+            debug(`⚡️ view-transition-end (${type})`);
+        }
+        if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
+            return;
+        cleanup(root);
+    }
+    else {
+        // Snapshot.getSnapshot(from)
+        // const oldPath = new NavigationPath(from)
+        const root = [from, ...from.parents()]
+            .map((item) => item.component)
+            .filter(Boolean)
+            .at(-1); // const root = getRootViewController(from)
+        //const { toolBarConfig: oldToolbars, host: oldHost, page: oldPage, slot: oldSlot } = getComputedView(from)
+        const froms = [...from.children()].map((item) => item?.hydrate());
+        const oldToolbars = froms.flatMap((item) => item.toolBarConfig ?? []).filter((item) => !!item), oldBodies = froms.map((item) => item.body).filter((item) => !!item);
+        // console.log(99, queryToolbarConfigAll(oldSlot), oldToolbars)
+        // if most-top effect is closing a modal, skip everything
+        if ('DIALOG' === from.component?.tagName) {
+            from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
+            from.component.close();
+            debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
+            debug(`⚡️ view-dialog-transition-end (${type})`);
+            if (from.component.matches('[open]'))
+                return;
+            await updateCallback();
+            return; // just close modal
+        }
+        const to = [...from.parents()].at(0)?.hydrate(); //closestBody(oldPath.component?.parentElement ?? undefined)
+        if (!to)
+            return debug('Can not go backwards.'); // nothing to go back to
+        const tv = to.body?.closest('tab-view');
+        if (tv && to.body?.matches('tab-view>navigation-stack:has(> navigation-stack,> navigation-split-view)>:scope'))
+            if ('bottom-bar' !== tv.tabBarPlacement)
+                return;
+        // const { toolBarConfig: newToolbars } = getComputedView(to.body)
+        // purge
+        cleanup(root, 'forwards');
+        // prepare new
+        for (const ti of to.toolBarConfig ?? [])
+            ti.classList.add('bwnn');
+        to.body?.classList.add('bwdd');
+        to.body?.dispatchEvent(new CustomEvent('pagereveal', { detail: { page: to.body }, bubbles: true, composed: true }));
+        // prepare old
+        const inbetweenModals = froms.map((item) => item.component).filter((item) => !!item && item.matches('dialog[open]')), //queryHostAll(oldPage).filter?.((item) => item.matches('dialog[open]')) ?? [], // FIXME: TEst this, added oldHost too
+        toolbarExclusion = 0 < inbetweenModals.length
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar)')
+            : (value, index, array) => value, bodyExclusion = 0 < inbetweenModals.length ? (item) => item?.matches('scroll-view:not(dialog scroll-view)') : (item) => item;
+        for (const ti of [...(from.toolBarConfig ?? []), ...(oldToolbars?.filter?.(toolbarExclusion) ?? [])])
+            ti.classList.add('bwn');
+        for (const nn of [from.body, ...oldBodies?.filter?.(bodyExclusion)]) {
+            nn?.classList.add('bwd'); //from?.classList.add('bwd')
+            nn?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: nn }, bubbles: true, composed: true }));
+        }
+        for (const el of inbetweenModals)
+            el.close(); // close old inbetween modals
+        // capture trans
+        debug(`⚡️ view-transition-start (${type})`);
+        await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
+        debug(`⚡️ view-transition-end (${type})`);
+        if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
+            return;
+        cleanup(root);
+        // remove or hide
+        await updateCallback();
+    }
+};

package/generated/internal/utils/debug.d.ts

@@ -0,0 +1 @@
+export default function debug(...data: any[]): void;

package/generated/internal/utils/debug.js

@@ -0,0 +1,3 @@
+export default function debug(...data) {
+    return console.debug(...data); //console.debug('%c swift-wc', 'color:hsl(200,70%,45%);font-weight:600', ...data)
+}

package/generated/internal/utils/index.d.ts

@@ -1,10 +1,11 @@
-import cash from './cash';
 export { default as add } from './add';
-export { default as ensurePlaceholder } from './ensure-placeholder';
+export { default as $ } from './cash';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
+export { default as debug } from './debug';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
 export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
@@ -16,4 +17,3 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export declare const $: typeof cash;

package/generated/internal/utils/index.js

@@ -1,11 +1,13 @@
 // import * as _intl from './intl'
-import cash from './cash';
+// import cash from './cash'
 export { default as add } from './add';
-export { default as ensurePlaceholder } from './ensure-placeholder';
+export { default as $ } from './cash';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
+export { default as debug } from './debug';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
 export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
@@ -17,4 +19,4 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export const $ = cash;
+// export const $: typeof cash = cash

package/generated/namespace-browser/base.d.ts

@@ -7,6 +7,15 @@ export declare abstract class DialogBase extends HTMLDialogElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
+export declare abstract class InputBase extends HTMLInputElement {
+    static polyfillExtends: "input";
+    static polyfillConnectedCallback(el: HTMLInputElement): void;
+    static polyfillDisconnectedCallback(el: HTMLInputElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
 export declare abstract class ButtonBase extends HTMLButtonElement {
     static polyfillExtends: "button";
     static polyfillConnectedCallback(el: HTMLButtonElement): void;

package/generated/namespace-browser/base.js

@@ -21,6 +21,29 @@ export class DialogBase extends HTMLDialogElement {
         ctor.polyfillAttributeChangedCallback([entry]);
     }
 }
+export class InputBase extends HTMLInputElement {
+    static polyfillExtends = 'input';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
 export class ButtonBase extends HTMLButtonElement {
     static polyfillExtends = 'button';
     static polyfillConnectedCallback(el) { }

package/generated/snapshot/index.d.ts

@@ -2,7 +2,7 @@ export declare class Snapshot {
     #private;
     static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
     static on: EventTarget;
-    static readonly waitReady: Promise<[unknown, void]>;
+    static readonly waitReady: Promise<[void, void]>;
     static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
     static get config(): Record<string, string> | undefined;
     static setOwnConfig(): Promise<void>;