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

package/README.md

@@ -0,0 +1,15 @@
+# @swiftwc/ui
+
+[README](https://github.com/swiftwc/ui/blob/main/README.md)
+
+## Documentation
+
+Visit [swiftwc.github.io/ui/](https://swiftwc.github.io/ui/) to view the documentation.
+
+## Contributing
+
+Please read the [contributing guide](https://github.com/swiftwc/ui/blob/main/CONTRIBUTING.md).
+
+## License
+
+Licensed under the [MIT license](https://github.com/swiftwc/ui/blob/main/LICENSE.md).

package/generated/client/index.d.ts

@@ -1,6 +1,16 @@
+import { ConfirmationDialog } from '../confirmation-dialog';
+import { I18n } from '../i18n';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { LifecycleObserver } from '../lifecycle-observer';
+import { type WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
-import { type WebComponentCtor } from '../namespace';
 export declare const polyfills: Map<string, WebComponentCtor>;
 type TransitionType = 'forwards' | 'backwards' | 'reload';
-export declare const startViewTransition: (event: Event, type?: TransitionType, updateCallback?: () => Promise<void>) => Promise<void>;
-export { Snapshot };
+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 declare const confirmationDialog: (trigger: HTMLElement, title: string, entries: Array<[string, any]>, controller?: AbortController) => Promise<unknown>;
+export { ConfirmationDialog, I18n, LifecycleObserver, NavigationPath, Snapshot };

package/generated/client/index.js

@@ -1,70 +1,92 @@
 import * as Components from '../components';
-import { kebabCase } from '../internal/utils';
+import { ConfirmationDialog } from '../confirmation-dialog';
+import { I18n } from '../i18n';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { $, kebabCase, onoff } from '../internal/utils';
+import { LifecycleObserver } from '../lifecycle-observer';
 import { Snapshot } from '../snapshot';
 export const polyfills = new Map();
-for (const [k, v] of Object.entries(Components)) {
+for (const [k, Ctor] of Object.entries(Components)) {
     const is = kebabCase(k);
-    if ('polyfillExtends' in v &&
-        'string' === typeof v.polyfillExtends) {
-        customElements.define(is, v, { extends: v.polyfillExtends });
-        if (!(document.createElement(v.polyfillExtends, { is }) instanceof v))
-            polyfills.set(is, v);
+    if ('polyfillExtends' in Ctor && 'string' === typeof Ctor.polyfillExtends) {
+        if (customElements.get(is))
+            continue;
+        customElements.define(is, Ctor, { extends: Ctor.polyfillExtends });
+        if (!(document.createElement(Ctor.polyfillExtends, { is }) instanceof Ctor))
+            polyfills.set(is, Ctor);
         continue;
     }
-    customElements.define(is, v);
+    if (!customElements.get(is))
+        customElements.define(is, Ctor);
 }
 console.debug(polyfills);
 if (0 < polyfills.size) {
-    const polyfillTagNamesCache = new Set([...polyfills.values()]
-        .map((v) => String(v.polyfillExtends ?? '').toUpperCase())
-        .filter(Boolean)); // ['TAG-NAME1', 'TAG-NAME2', ...]
+    const polyfillTagNamesCache = new Set([...polyfills.values()].map((v) => String(v.polyfillExtends ?? '').toUpperCase()).filter(Boolean)); // ['TAG-NAME1', 'TAG-NAME2', ...]
     const handlers = new WeakMap();
-    // @ts-expect-error
     const observe = (el, polyfill) => {
         if (!Array.isArray(polyfill.observedAttributes))
             return;
         if (0 === polyfill?.observedAttributes.length)
             return;
-        handlers.set(el, new MutationObserver(polyfill.polyfillAttributeChangedCallback).observe(el, {
+        if (!polyfill.polyfillAttributeChangedCallback)
+            return;
+        const observer = new MutationObserver(polyfill.polyfillAttributeChangedCallback);
+        observer.observe(el, {
             attributes: true,
             attributeFilter: polyfill.observedAttributes,
             attributeOldValue: true,
-        }));
-    }, 
-    // @ts-expect-error
-    unobserve = (el) => {
+        });
+        handlers.set(el, observer);
+        for (const attributeName of polyfill.observedAttributes)
+            if (el.hasAttribute(attributeName)) {
+                const entry = {
+                    attributeName,
+                    oldValue: null,
+                    target: el,
+                };
+                void polyfill.polyfillAttributeChangedCallback([entry]);
+            }
+    }, unobserve = (el) => {
         handlers.delete(el);
-    };
-    console.debug(polyfillTagNamesCache);
+    }, polyfillTagNamesCacheSelector = [...polyfillTagNamesCache.values()].map((v) => `${v}`.toLowerCase()).join(','), flatten = (node) => [node, ...(node.querySelectorAll?.(polyfillTagNamesCacheSelector) ?? [])];
+    console.debug(polyfillTagNamesCache, polyfillTagNamesCacheSelector);
     for (const [is, polyfill] of polyfills)
-        for (const el of document.querySelectorAll(`${polyfill.polyfillExtends}[is="${is}"]`)) {
+        for (const el of document.querySelectorAll(`${polyfill.polyfillExtends}[is="${CSS.escape(is)}"]`)) {
             polyfill.polyfillConnectedCallback(el);
             observe(el, polyfill);
         }
     // observer callback
     const observer = new MutationObserver((mutations) => {
         for (const { addedNodes, removedNodes } of mutations) {
-            for (const node of addedNodes) {
-                if (!(node instanceof HTMLElement))
-                    continue;
-                if (!polyfillTagNamesCache.has(node.tagName))
-                    continue;
-                const is = node?.getAttribute('is') ?? '';
-                if (!polyfills.has(is))
+            for (const root of addedNodes) {
+                if (!(root instanceof HTMLElement))
                     continue;
-                polyfills.get(is)?.polyfillConnectedCallback(node);
-                observe(node, polyfills.get(is));
+                for (const node of flatten(root)) {
+                    if (!(node instanceof HTMLElement))
+                        continue;
+                    if (!polyfillTagNamesCache.has(node.tagName))
+                        continue;
+                    const is = node?.getAttribute('is') ?? '';
+                    if (!polyfills.has(is))
+                        continue;
+                    polyfills.get(is)?.polyfillConnectedCallback(node);
+                    observe(node, polyfills.get(is));
+                }
             }
-            for (const node of removedNodes) {
-                if (!(node instanceof HTMLElement))
+            for (const root of removedNodes) {
+                if (!(root instanceof HTMLElement))
                     continue;
-                if (!polyfillTagNamesCache.has(node.tagName))
-                    continue;
-                const is = node?.getAttribute('is') ?? '';
-                if (!polyfills.has(is))
-                    continue;
-                polyfills.get(is)?.polyfillDisconnectedCallback(node);
-                unobserve(node);
+                for (const node of flatten(root)) {
+                    if (!(node instanceof HTMLElement))
+                        continue;
+                    if (!polyfillTagNamesCache.has(node.tagName))
+                        continue;
+                    const is = node?.getAttribute('is') ?? '';
+                    if (!polyfills.has(is))
+                        continue;
+                    polyfills.get(is)?.polyfillDisconnectedCallback(node);
+                    unobserve(node);
+                }
             }
         }
     });
@@ -73,151 +95,199 @@ if (0 < polyfills.size) {
         subtree: true,
     });
 }
-const cleanup = (lm, dir) => {
-    let arr = [
-        Snapshot.config['vt-fwd-class-name'],
-        'fwdd',
-        'fwn',
-        'fwnn',
-        'bwd',
-        'bwdd',
-        'bwn',
-        'bwnn',
-    ];
-    if (['backwards', 'forwards'].includes(dir ?? ''))
+// SECTION: Safari polyfill
+document.addEventListener('touchstart', () => { }, { passive: true });
+// SECTION: Transitions
+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' === dir ? 'fw' : 'bw'))
+            if (arr[i].startsWith('backwards' === type ? 'fw' : 'bw'))
                 arr.splice(i, 1);
-    for (const el of [
-        ...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? []),
-    ])
+    for (const el of [...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? [])])
         el.classList.remove(...arr);
 };
-export const startViewTransition = async (event, type = 'forwards', updateCallback = async () => { }) => {
-    // const sv =
-    //   (event.target as HTMLElement).closest<Components.ScrollView>(
-    //     'scroll-view'
-    //   ) ?? undefined,
-    const from = event.target.closest('scroll-view') ?? undefined;
+export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
+    console.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) {
-        // const sis = Router.toolbarItems //sv.parentElement.querySelectorAll(`:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`)
-        // pr = Router.frame //sv.parentElement
-        // const pt = event.target.closest('navigation-stack,body-view')
-        // const inte = event.target.closest(".fwd");
-        // const st = sv.scrollTop
-        // console.log(333, lm, sv, sis)
-        // let to
-        // inject or unhide
-        // if (pr.tagName === 'NAVIGATION-STACK' && 'more' === pr.getAttribute('is')) {
-        //   to = document.querySelector(`#${event.target.getAttribute('tag')}`)
-        // to.hidden = false
-        // } else {
         await updateCallback(); // updatetheDOMSomehow
-        //   to = sv.nextElementSibling //pr.lastElementChild //sv.nextElementSibling
+        // 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()
+        //   console.debug(`⚡️ view-transition-start (${type})`)
+        //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
+        //   console.debug(`⚡️ view-transition-end (${type})`)
+        //   return
         // }
-        Snapshot.getSnapshot(from);
-        const fromToolbars = Snapshot.toolbarItems;
-        // from = Snapshot.landmark
-        const to = Snapshot.leaf, toFrame = Snapshot.leafContainer, toToolbars = Snapshot.leafToolbarItems;
-        if ('DIALOG' === toFrame?.tagName) {
-            ;
-            toFrame.showModal();
+        // 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();
+            console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
+            console.debug(`⚡️ view-dialog-transition-end (${type})`);
+        }
+        else {
             console.debug(`⚡️ view-transition-start (${type})`);
-            await Promise.allSettled(toFrame.getAnimations().map(({ finished }) => finished));
+            await Promise.allSettled([
+                ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
+                ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? []),
+            ]);
             console.debug(`⚡️ view-transition-end (${type})`);
-            return;
         }
-        // purge
-        cleanup(Snapshot.root, 'backwards');
-        for (const ti of toToolbars ?? [])
-            ti.classList.add('fwnn');
-        to?.classList.add('fwdd');
-        // prepare principal/leader
-        from?.classList.add(Snapshot.config['vt-fwd-class-name']);
-        for (const ti of fromToolbars ?? [])
-            ti.classList.add('fwn'); // prepare navbs
-        // sv.inert = true
-        // if (!document.startViewTransition) {
-        //   startViewTransition(event, false)
-        //   return
-        // }
-        // With a transition:
-        // const transition = document.startViewTransition({
-        //   async update() {},
-        //   types: ['forwards'],
-        // })
-        // console.debug(transition)
-        // await transition.finished
-        // alert(3)
-        // return
-        console.debug(`⚡️ view-transition-start (${type})`);
-        await Promise.allSettled([
-            ...(from?.getAnimations().map(({ finished }) => finished) ?? []),
-            ...(to?.getAnimations().map(({ finished }) => finished) ?? []),
-        ]);
-        // await Promise.allSettled(
-        //   from.getAnimations().map(({ finished }) => finished)
-        // )
-        console.debug(`⚡️ view-transition-end (${type})`);
-        // console.log(9, to.querySelectorAll('.fwd'))
-        // sv2.classList.remove("fwdd");
-        if (0 <
-            (toFrame?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
+        if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
             return;
-        cleanup(Snapshot.root);
+        cleanup(root);
     }
     else {
-        Snapshot.getSnapshot(from);
-        const fromToolbars = Snapshot.toolbarItems, 
-        // from = Snapshot.landmark,
-        fromFrame = Snapshot.container; //sv.parentElement.querySelectorAll(`:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`)
-        // fromFrame = Router.frame //sv.parentElement
-        // const pt = event.target.closest('navigation-stack,body-view')
-        // const pt = pt0.parentElement.closest('navigation-stack,body-view')
-        const to = Snapshot.parent, //pr.parentElement.querySelector(`:scope > scroll-view`) //pr.previousElementSibling
-        // toFrame = Snapshot.parentContainer,
-        toToolbars = Snapshot.parentToolbarItems; //sv2.parentElement?.querySelectorAll?.(      `:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`    )
-        // const st2 = sv2.scrollTop
-        if ('DIALOG' === fromFrame?.tagName) {
-            ;
-            fromFrame.close();
-            console.debug(`⚡️ view-transition-start (${type})`);
-            await Promise.allSettled(fromFrame.getAnimations().map(({ finished }) => finished));
-            console.debug(`⚡️ view-transition-end (${type})`);
-            if (fromFrame.matches('[open]'))
+        // 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();
+            console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
+            console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            if (from.component.matches('[open]'))
                 return;
             await updateCallback();
-            return;
+            return; // just close modal
         }
+        const to = [...from.parents()].at(0)?.hydrate(); //closestBody(oldPath.component?.parentElement ?? undefined)
+        // console.log(99, to)
+        if (!to)
+            return console.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(Snapshot.root, 'forwards');
-        // prepare others
-        for (const ti of toToolbars ?? [])
+        cleanup(root, 'forwards');
+        // prepare new
+        for (const ti of to.toolBarConfig ?? [])
             ti.classList.add('bwnn');
-        to?.classList.add('bwdd');
-        // sv2.style.visibility = "visible";
-        // prepare leader/principal (tracked)
-        for (const ti of fromToolbars ?? [])
+        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');
-        from?.classList.add('bwd');
-        // pr.inert = true
+        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
         console.debug(`⚡️ view-transition-start (${type})`);
         await Promise.allSettled([
-            ...(from?.getAnimations().map(({ finished }) => finished) ?? []),
-            ...(to?.getAnimations().map(({ finished }) => finished) ?? []),
+            ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
+            ...(to.body?.getAnimations().map(({ finished }) => finished) ?? []),
         ]);
-        // await Promise.allSettled(
-        //   from.getAnimations().map(({ finished }) => finished)
-        // )
-        // await Promise.allSettled(to.getAnimations().map(({ finished }) => finished))
         console.debug(`⚡️ view-transition-end (${type})`);
-        // console.log(999, sv2.closest('.fwd'))
-        if (to?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
+        if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;
-        cleanup(Snapshot.root);
+        cleanup(root);
         // remove or hide
         await updateCallback();
     }
 };
-void Snapshot.setOwnConfig();
-export { Snapshot };
+export const confirmationDialog = async (trigger, title, entries, controller = new AbortController()) => {
+    const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
+    const dialog = $(`<dialog is="confirmation-dialog">
+                  ${entries.map((item, index) => `<button type="button" tabindex="0" value="${index}">
+                    <label-view title="${item[0]}"></label-view>
+                  </button>`)}
+                </dialog>`);
+    $.prop('anchor-name', newAnchorName, trigger, 'important');
+    $.prop('position-anchor', newAnchorName, dialog);
+    if (title) {
+        const label = $(`<label-view></label-view>`);
+        label.setAttribute('title', title);
+        dialog.insertAdjacentElement('afterbegin', label);
+    }
+    trigger.closest('body-view')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    return await new Promise((resolve, reject) => {
+        const onClose = (evt) => {
+            off();
+            resolve(evt.detail.returnValue);
+        }, off = onoff('return', onClose, ConfirmationDialog, { once: true }).on();
+        // const onAbort = () => {
+        //   cleanup()
+        //   reject(new DOMException('aborted', 'AbortError'))
+        // }
+        // const cleanup = () => {
+        //   ConfirmationDialog.removeEventListener('close', onClose)
+        //   // controller.signal.removeEventListener('abort', onAbort)
+        // }
+        // ConfirmationDialog.addEventListener('close', onClose, { once: true })
+        // controller.signal.addEventListener('abort', onAbort, { once: true })
+    });
+};
+void Snapshot.waitReady; // void Snapshot.setOwnConfig()
+// SECTION
+export { ConfirmationDialog, I18n, LifecycleObserver, NavigationPath, Snapshot };

package/generated/components/bordered-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonBase } from '../namespace-browser/base';
+export declare class BorderedButton extends ButtonBase {
+    #private;
+    constructor();
+    static polyfillDisconnectedCallback(el: BorderedButton): void;
+    static polyfillConnectedCallback(el: BorderedButton): void;
+}

package/generated/components/bordered-button.js

@@ -0,0 +1,20 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+export class BorderedButton extends ButtonBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${BorderedButton.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', BorderedButton.#handleClick, el).on());
+    }
+    static #handleClick = async (evt) => {
+        //
+    };
+}

package/generated/components/bordered-prominent-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonBase } from '../namespace-browser/base';
+export declare class BorderedProminentButton extends ButtonBase {
+    #private;
+    constructor();
+    static polyfillDisconnectedCallback(el: BorderedProminentButton): void;
+    static polyfillConnectedCallback(el: BorderedProminentButton): void;
+}

package/generated/components/bordered-prominent-button.js

@@ -0,0 +1,20 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+export class BorderedProminentButton extends ButtonBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${BorderedProminentButton.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', BorderedProminentButton.#handleClick, el).on());
+    }
+    static #handleClick = async (evt) => {
+        //
+    };
+}

package/generated/components/borderless-button.d.ts

@@ -1,9 +1,9 @@
-import { ButtonBase } from '../internal/class';
+import { ButtonBase } from '../namespace-browser/base';
 export declare class BorderlessButton extends ButtonBase {
+    #private;
+    static get observedAttributes(): string[];
     constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
     static polyfillDisconnectedCallback(el: BorderlessButton): void;
     static polyfillConnectedCallback(el: BorderlessButton): void;
-    static handleClick: (event: Event) => Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
 }

package/generated/components/borderless-button.js

@@ -1,25 +1,35 @@
-var _a;
-import { ButtonBase } from '../internal/class';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
 export class BorderlessButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
     constructor() {
         super();
     }
-    disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
-        _a.polyfillDisconnectedCallback(this);
-    }
-    connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
-        _a.polyfillConnectedCallback(this);
-    }
     static polyfillDisconnectedCallback(el) {
-        el.removeEventListener('click', _a.handleClick);
+        console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        el.addEventListener('click', _a.handleClick);
+        console.debug(`${BorderlessButton.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', BorderlessButton.#handleClick, el).on());
+    }
+    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        switch (attributeName) {
+            case 'role':
+                // let label = this.querySelector(':scope>[slot=label]')
+                // if (newValue) {
+                //   label ??= this.appendChild($(`<label-view slot="label"></label-view>`))
+                //   label.setAttribute('title', newValue)
+                // } else label?.remove()
+                break;
+        }
     }
+    static #handleClick = async (evt) => {
+        // alert(99)
+    };
 }
-_a = BorderlessButton;
-BorderlessButton.handleClick = async (event) => {
-    alert(99);
-};

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

@@ -0,0 +1,9 @@
+import { DialogBase } from '../namespace-browser/base';
+export declare class ConfirmationDialog extends DialogBase {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: ConfirmationDialog): void;
+    static polyfillConnectedCallback(el: ConfirmationDialog): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+}