@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/css-data/en.json

@@ -0,0 +1,28 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--accentColor",
+      "description": {
+        "kind": "markdown",
+        "value": "Sets the accent color used by interactive elements.\n\nRegistered via `@property` with `syntax: '<color>'`, `inherits: true`."
+      },
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/tokens/tint"
+        }
+      ],
+      "values": [
+        {
+          "name": "blue",
+          "description": "System blue"
+        },
+        {
+          "name": "red",
+          "description": "System red"
+        }
+      ]
+    }
+  ]
+}

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,16 +1,30 @@
-import { ConfirmationDialog } from '../confirmation-dialog';
+import { lifecycleObserver } from '../buses';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
-import { LifecycleObserver } from '../lifecycle-observer';
+import { type NavigationHost, queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
 import { type WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
 export declare const polyfills: Map<string, WebComponentCtor>;
-type TransitionType = 'forwards' | 'backwards' | 'reload';
-type UpdateCallback = () => void | Promise<void>;
-type NavigateOptions = {
-    updateCallback?: UpdateCallback;
-    tos?: () => NavigationPath[];
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
+export declare const alert: (title?: string, message?: string, actions?: {
+    label?: string;
+    image?: string;
+    role?: string;
+}[], options?: {
+    titleVisibility?: boolean;
+    signal?: AbortSignal;
+}) => Promise<string | undefined> & {
+    dismiss: (reason?: unknown) => void;
 };
-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 };
+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,10 +1,14 @@
+import { alertDialog, confirmationDialog as confirmationDialogBus, lifecycleObserver } from '../buses';
 import * as Components from '../components';
-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 flags from '../internal/flags';
+import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
+import { $, debug, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+import { html, render } from '../tpl';
+debug(flags);
+//#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
     const is = kebabCase(k);
@@ -12,14 +16,18 @@ for (const [k, Ctor] of Object.entries(Components)) {
         if (customElements.get(is))
             continue;
         customElements.define(is, Ctor, { extends: Ctor.polyfillExtends });
+        // NOTE: Test via the imperative creation path
         if (!(document.createElement(Ctor.polyfillExtends, { is }) instanceof Ctor))
             polyfills.set(is, Ctor);
+        // NOTE: Defensive, test again via the HTML-parsing path
+        if (!($(html `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
+            polyfills.set(is, Ctor);
         continue;
     }
     if (!customElements.get(is))
         customElements.define(is, Ctor);
 }
-console.debug(polyfills);
+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 handlers = new WeakMap();
@@ -44,12 +52,12 @@ if (0 < polyfills.size) {
                     oldValue: null,
                     target: el,
                 };
-                void polyfill.polyfillAttributeChangedCallback([entry]);
+                polyfill.polyfillAttributeChangedCallback([entry]);
             }
     }, unobserve = (el) => {
         handlers.delete(el);
     }, polyfillTagNamesCacheSelector = [...polyfillTagNamesCache.values()].map((v) => `${v}`.toLowerCase()).join(','), flatten = (node) => [node, ...(node.querySelectorAll?.(polyfillTagNamesCacheSelector) ?? [])];
-    console.debug(polyfillTagNamesCache, polyfillTagNamesCacheSelector);
+    debug(polyfillTagNamesCache, polyfillTagNamesCacheSelector);
     for (const [is, polyfill] of polyfills)
         for (const el of document.querySelectorAll(`${polyfill.polyfillExtends}[is="${CSS.escape(is)}"]`)) {
             polyfill.polyfillConnectedCallback(el);
@@ -97,197 +105,174 @@ if (0 < polyfills.size) {
 }
 // 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' === 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 () => { }) => {
-    console.debug(`startViewTransition (${type})`, target);
+//#endregion
+// SECTION
+const handleHelp = ({ target, relatedTarget }) => {
     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()
-        //   console.debug(`⚡️ view-transition-start (${type})`)
-        //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
-        //   console.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();
-            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([
-                ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-                ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ]);
-            console.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();
-            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; // 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(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
-        console.debug(`⚡️ view-transition-start (${type})`);
-        await Promise.allSettled([
-            ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ...(to.body?.getAnimations().map(({ finished }) => finished) ?? []),
-        ]);
-        console.debug(`⚡️ view-transition-end (${type})`);
-        if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
-            return;
-        cleanup(root);
-        // remove or hide
-        await updateCallback();
-    }
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if (['PICKER-VIEW'].includes(trigger.tagName))
+        return;
+    if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
+        return;
+    const newAnchorName = `--help-${self.crypto.randomUUID()}`;
+    const tooltip = $(html `<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'].includes(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?.()
+};
+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
+// const a = alert('Saving…', 'Please wait')
+// // later, e.g. save completed early
+// a.dismiss()          // silently resolves undefined, closes+removes dialog
+// // or
+// a.dismiss(new Error('cancelled')) // rejects instead
+// const result = await a // still works normally if not dismissed
+// const ac = new AbortController()
+// const a = alert('Uploading…', 'Please wait', undefined, { signal: ac.signal })
+// // elsewhere, e.g. upload finished before the user dismissed
+// ac.abort() // dialog closes silently, a rejects with AbortError
+// // or still works standalone
+// a.dismiss() // same effect, no signal needed
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
+export const alert = (title, message, actions, options) => {
+    const { promise, resolve, reject } = Promise.withResolvers();
+    let dialog;
+    let off;
+    const dismiss = (reason) => {
+        off?.();
+        dialog?.close();
+        // dialog?.remove()
+        reason === undefined ? resolve(undefined) : reject(reason instanceof Error ? reason : new DOMException('Alert dismissed', 'AbortError'));
+    };
+    if (options?.signal)
+        if (options.signal.aborted)
+            dismiss(options.signal.reason); // already aborted before we even started — settle immediately, skip showing anything
+        else
+            options.signal.addEventListener('abort', () => dismiss(options.signal.reason), { once: true });
+    navigator.locks
+        .request('alert:', async () => {
+        if (options?.signal?.aborted)
+            return; // in case it was aborted while queued behind another lock holder
+        const mount = document.createElement('div');
+        render(html `<dialog is="alert-dialog">
+          <v-stack spacing="1" alignment="fill">
+            ${title ? html `<label-view font="headline" title="${title}"></label-view>` : null}
+            ${message ? html `<label-view foreground="secondary" font="callout" title="${message}"></label-view>` : null}
+          </v-stack>
+          ${(actions ?? [{ role: 'close' }]).map((action, index) => html `
+              <button type="button" tabindex="0" is="bordered-button" value="${index}" role="${action.role ?? null}">
+                ${action.label || action.image ? html `<label-view title="${action.label ?? null}" system-image="${action.image ?? null}"></label-view>` : null}
+              </button>
+            `)}
+        </dialog>`, mount);
+        dialog = mount.firstElementChild;
+        document.body.insertAdjacentElement('beforeend', dialog);
+        dialog.showModal();
+        off = onoff('alert:return', (evt) => {
+            const { detail } = evt;
+            off?.();
+            resolve(detail.returnValue);
+        }, alertDialog, { once: true }).on();
+        return promise;
+    })
+        .catch(() => { });
+    return Object.assign(promise, { dismiss });
 };
-export const confirmationDialog = async (trigger, title, entries, controller = new AbortController()) => {
+export const confirmationDialog = async (trigger, title, message, actions, options) => {
     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>`);
+    const dialog = $(html `<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(html `<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 = $(html `<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
-        dialog.insertAdjacentElement('afterbegin', label);
+        vStack.insertAdjacentElement('beforeend', 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 })
-    });
+    if (message && false !== options?.titleVisibility) {
+        const label = $(html `<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 = $(html `<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 = $(html `<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);
+    }
+    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.waitReady; // void Snapshot.setOwnConfig()
-// SECTION
-export { ConfirmationDialog, I18n, LifecycleObserver, NavigationPath, 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,11 @@
+import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
+ */
+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;
+}