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

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/buses/alert-dialog.d.ts

@@ -0,0 +1,2 @@
+declare const _default: EventTarget;
+export default _default;

package/generated/buses/alert-dialog.js

@@ -0,0 +1 @@
+export default new EventTarget();

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

@@ -0,0 +1,2 @@
+declare const _default: EventTarget;
+export default _default;

package/generated/buses/confirmation-dialog.js

@@ -0,0 +1 @@
+export default new EventTarget();

package/generated/buses/index.d.ts

@@ -0,0 +1,6 @@
+export { default as alertDialog } from './alert-dialog';
+export * from './alert-dialog';
+export { default as confirmationDialog } from './confirmation-dialog';
+export * from './confirmation-dialog';
+export { default as lifecycleObserver } from './lifecycle-observer';
+export * from './lifecycle-observer';

package/generated/buses/index.js

@@ -0,0 +1,6 @@
+export { default as alertDialog } from './alert-dialog';
+export * from './alert-dialog';
+export { default as confirmationDialog } from './confirmation-dialog';
+export * from './confirmation-dialog';
+export { default as lifecycleObserver } from './lifecycle-observer';
+export * from './lifecycle-observer';

package/generated/buses/lifecycle-observer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: EventTarget;
+export default _default;

package/generated/buses/lifecycle-observer.js

@@ -0,0 +1 @@
+export default new EventTarget();

package/generated/client/index.d.ts

@@ -1,6 +1,24 @@
+import { lifecycleObserver } from '../buses';
+import { I18n } from '../i18n';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { type NavigationHost, queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
+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 };
+export declare const alert: (title?: string, message?: string, actions?: {
+    label?: string;
+    image?: string;
+    role?: string;
+}[], options?: {
+    titleVisibility?: boolean;
+}) => Promise<string>;
+export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
+    label?: string;
+    image?: string;
+    role?: string;
+}[], options?: {
+    controller?: AbortController;
+    titleVisibility?: boolean;
+}) => Promise<string>;
+export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
+export { type NavigationHost };

package/generated/client/index.js

@@ -1,70 +1,100 @@
+import { alertDialog, confirmationDialog as confirmationDialogBus, lifecycleObserver } from '../buses';
 import * as Components from '../components';
-import { kebabCase } from '../internal/utils';
+import { I18n } from '../i18n';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
+import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+//#region polyfills
 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);
+        // const testEl = document.createElement('template')
+        // testEl.innerHTML = `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`
+        // const testNode = testEl.content.firstElementChild,
+        if (!($(`<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
+            polyfills.set(is, Ctor);
         continue;
     }
-    customElements.define(is, v);
+    if (!customElements.get(is))
+        customElements.define(is, Ctor);
 }
-console.debug(polyfills);
+if (devFlags.debug)
+    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,
+                };
+                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) ?? [])];
+    if (devFlags.debug)
+        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))
+            for (const root of addedNodes) {
+                if (!(root instanceof HTMLElement))
                     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 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))
-                    continue;
-                if (!polyfillTagNamesCache.has(node.tagName))
+            for (const root of removedNodes) {
+                if (!(root instanceof HTMLElement))
                     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 +103,159 @@ 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 ?? ''))
-        for (let i = arr.length - 1; i >= 0; i--)
-            if (arr[i].startsWith('backwards' === dir ? 'fw' : 'bw'))
-                arr.splice(i, 1);
-    for (const el of [
-        ...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? []),
-    ])
-        el.classList.remove(...arr);
+// SECTION: Safari polyfill
+document.addEventListener('touchstart', () => { }, { passive: true });
+//#endregion
+// SECTION
+const handleHelp = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if ('PICKER-VIEW' === trigger.tagName)
+        return;
+    if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
+        return;
+    const newAnchorName = `--help-${self.crypto.randomUUID()}`;
+    const tooltip = $(`<fine-tooltip></fine-tooltip>`, '>1');
+    trigger.style.setProperty('anchor-name', newAnchorName);
+    tooltip.style.setProperty('position-anchor', newAnchorName);
+    document.body.appendChild(tooltip);
+    // setInterval(() => {
+    //   trigger.setAttribute('help', trigger.getAttribute('help') + 'h')
+    // }, 2000)
+    // console.log(999, trigger)
+}, handleDone = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if ('PICKER-VIEW' === trigger.tagName)
+        return;
+    if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
+        return;
+    const anchorName = trigger.style.anchorName;
+    if (!anchorName.startsWith('--help-'))
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    const tooltip = document.querySelector(`[style*="${CSS.escape(anchorName)}"]:not([help])`);
+    if (!tooltip)
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    // trigger.style.removeProperty('anchor-name')
+    tooltip.hidePopover(); // tooltip.remove?.()
 };
-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;
-    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 fromToolbars = Snapshot.toolbarItems;
-        // from = Snapshot.landmark
-        const to = Snapshot.leaf, toFrame = Snapshot.leafContainer, toToolbars = Snapshot.leafToolbarItems;
-        if ('DIALOG' === toFrame?.tagName) {
-            ;
-            toFrame.showModal();
-            console.debug(`⚡️ view-transition-start (${type})`);
-            await Promise.allSettled(toFrame.getAnimations().map(({ finished }) => finished));
-            console.debug(`⚡️ view-transition-end (${type})`);
-            return;
+const mediaQueryList = self.matchMedia(`(pointer: fine)`);
+mediaQueryList.addEventListener('change', ({ matches }) => {
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.removeEventListener(k, v);
+    if (matches)
+        for (const [k, v] of [
+            ['pointerover', handleHelp],
+            ['pointerout', handleDone],
+        ])
+            document.addEventListener(k, v, { passive: true });
+});
+if (mediaQueryList.matches)
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.addEventListener(k, v, { passive: true });
+//#region fns
+export const alert = async (title, message, actions, options) => {
+    return await navigator.locks.request('alert:', async () => {
+        const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
+        if (title) {
+            const label = $(`<label-view font="headline"></label-view>`, '>1');
+            label.setAttribute('title', title);
+            vStack.insertAdjacentElement('beforeend', label);
         }
-        // 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)
-            return;
-        cleanup(Snapshot.root);
+        if (message) {
+            const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+            label.setAttribute('title', message);
+            vStack.insertAdjacentElement('beforeend', label);
+        }
+        for (const [index, action] of (actions ?? [
+            {
+                role: 'close',
+            },
+        ]).entries()) {
+            const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+            btn.setAttribute('value', `${index}`);
+            if (action?.role)
+                btn.setAttribute('role', action.role);
+            if (action.label || action.image) {
+                const label = $(`<label-view></label-view>`, '>1');
+                if (action.label)
+                    label.setAttribute('title', action.label);
+                if (action.image)
+                    label.setAttribute('system-image', action.image);
+                btn.appendChild(label);
+            }
+            dialog.insertAdjacentElement('beforeend', btn);
+        }
+        document.body.insertAdjacentElement('beforeend', dialog);
+        dialog.showModal();
+        const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
+            const { detail } = evt;
+            off();
+            resolve(detail.returnValue);
+        }, alertDialog, { once: true }).on();
+        return promise;
+    });
+};
+export const confirmationDialog = async (trigger, title, message, actions, options) => {
+    const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
+    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
+    trigger.style.setProperty('anchor-name', newAnchorName, 'important'); //$.prop('anchor-name', newAnchorName, trigger, 'important')
+    dialog.style.setProperty('position-anchor', newAnchorName); //$.prop('position-anchor', newAnchorName, dialog)
+    if (title && false !== options?.titleVisibility) {
+        const label = $(`<label-view font="headline"></label-view>`, '>1');
+        label.setAttribute('title', title);
+        vStack.insertAdjacentElement('beforeend', label);
     }
-    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]'))
-                return;
-            await updateCallback();
-            return;
+    if (message && false !== options?.titleVisibility) {
+        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+        label.setAttribute('title', message);
+        vStack.insertAdjacentElement('beforeend', label);
+    }
+    for (const [index, action] of (actions ?? []).entries()) {
+        const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+        btn.setAttribute('value', `${index}`);
+        if (action?.role)
+            btn.setAttribute('role', action.role);
+        if (action.label || action.image) {
+            const label = $(`<label-view></label-view>`, '>1');
+            if (action.label)
+                label.setAttribute('title', action.label);
+            if (action.image)
+                label.setAttribute('system-image', action.image);
+            btn.appendChild(label);
         }
-        // purge
-        cleanup(Snapshot.root, 'forwards');
-        // prepare others
-        for (const ti of toToolbars ?? [])
-            ti.classList.add('bwnn');
-        to?.classList.add('bwdd');
-        // sv2.style.visibility = "visible";
-        // prepare leader/principal (tracked)
-        for (const ti of fromToolbars ?? [])
-            ti.classList.add('bwn');
-        from?.classList.add('bwd');
-        // pr.inert = true
-        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)
-        // )
-        // 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']}`))
-            return;
-        cleanup(Snapshot.root);
-        // remove or hide
-        await updateCallback();
+        dialog.insertAdjacentElement('beforeend', btn);
     }
+    trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
+        const { detail } = evt;
+        off();
+        resolve(detail.returnValue);
+    }, confirmationDialogBus, { once: true }).on();
+    return promise;
 };
-void Snapshot.setOwnConfig();
-export { Snapshot };
+//#endregion
+void Snapshot.waitReady;
+//#region exports
+export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
+//#endregion

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

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

package/generated/components/alert-dialog.js

@@ -0,0 +1,99 @@
+import { alertDialog } from '../buses';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+export class AlertDialog extends DialogBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+        alertDialog.dispatchEvent(new CustomEvent('alert:return', {
+            detail: { returnValue: el.returnValue },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff([
+            { types: 'click', listener: this.#handleDialogClick },
+            { types: 'close', listener: this.#handleDialogClose },
+            { types: 'cancel', listener: this.#handleDialogCancel },
+        ], el).on());
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('[is=alert-dialog]'))
+                return false;
+            return true;
+        }), el).on());
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        el.removeAttribute('closing');
+        el.scrollTop = 0;
+        el.returnValue = '';
+        el.autofocus = true;
+        el.showModal();
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        switch (attributeName) {
+            case 'label':
+                //
+                break;
+        }
+    }
+    static #handleDialogClick = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        const { target, currentTarget: dialog } = evt;
+        if (!(dialog instanceof HTMLDialogElement))
+            return;
+        if (!(target instanceof HTMLElement))
+            return;
+        const button = target.closest('button');
+        if (!button)
+            return;
+        button.scrollIntoView({
+            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+        dialog.returnValue = button.value;
+        dialog.requestClose(button.value);
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
+    };
+    static #handleDialogCancel = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        if (!evt.cancelable)
+            return;
+        const { target } = evt;
+        if (!(target instanceof HTMLDialogElement))
+            return;
+        evt.preventDefault();
+        target.inert = true;
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ will-close`);
+        target.setAttribute('closing', '');
+        Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
+            if (!target.hasAttribute('closing'))
+                return;
+            target?.close(target?.returnValue);
+            target.removeAttribute('closing');
+        });
+    };
+    static #handleDialogClose = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLDialogElement))
+            return;
+        target.remove();
+    };
+}