@swiftwc/ui 0.0.0-dev.20 → 0.0.0-dev.21

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,7 +1,6 @@
-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 WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
 export declare const polyfills: Map<string, WebComponentCtor>;
@@ -12,5 +11,19 @@ type NavigateOptions = {
     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 };
+export declare const alert: (title?: string, message?: string, actions?: {
+    label?: string;
+    image?: string;
+    role?: string;
+}[], options?: {
+    titleVisibility?: boolean;
+}) => Promise<any>;
+export declare const confirmationDialog: (trigger: HTMLElement, title: string, actions?: {
+    label?: string;
+    image?: string;
+    role?: string;
+}[], options?: {
+    controller?: AbortController;
+    titleVisibility?: boolean;
+}) => Promise<any>;
+export { I18n, lifecycleObserver, NavigationPath, Snapshot };

package/generated/client/index.js

@@ -1,9 +1,8 @@
+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 { Snapshot } from '../snapshot';
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -17,7 +16,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
         // 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}>`) instanceof Ctor))
+        if (!($(`<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
             polyfills.set(is, Ctor);
         continue;
     }
@@ -49,7 +48,7 @@ if (0 < polyfills.size) {
                     oldValue: null,
                     target: el,
                 };
-                void polyfill.polyfillAttributeChangedCallback([entry]);
+                polyfill.polyfillAttributeChangedCallback([entry]);
             }
     }, unobserve = (el) => {
         handlers.delete(el);
@@ -253,38 +252,90 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         await updateCallback();
     }
 };
-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);
+export const alert = async (title, message, actions, options) => {
+    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></label-view>`);
+        const label = $(`<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
-        dialog.insertAdjacentElement('afterbegin', label);
+        vStack.insertAdjacentElement('beforeend', label);
+    }
+    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 ?? []).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 title="${action.label}"></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) => {
+        off();
+        resolve(evt.detail.returnValue);
+    }, alertDialog, { once: true }).on();
+    return promise;
+};
+export const confirmationDialog = async (trigger, title, actions, options) => {
+    const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
+    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>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></label-view>`, '>1');
+        label.setAttribute('title', title);
+        dialog.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 title="${action.label}"></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')?.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 })
-    });
+    const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
+        off();
+        resolve(evt.detail.returnValue);
+    }, confirmationDialogBus, { once: true }).on();
+    return promise;
+    // return await new Promise((resolve, reject) => {
+    //   const onClose = (evt: any) => {
+    //       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 };
+export { I18n, lifecycleObserver, NavigationPath, Snapshot };

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,94 @@
+import { alertDialog } from '../buses';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { onoff, touchGlass } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+export class AlertDialog extends DialogBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        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) {
+        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, (evt) => {
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                return true;
+            if (target.matches('[is=alert-dialog]'))
+                return false;
+            return true;
+        }), el).on());
+        console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        el.removeAttribute('closing');
+        el.scrollTop = 0;
+        el.returnValue = '';
+        el.autofocus = true;
+        el.showModal();
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        switch (attributeName) {
+            case 'label':
+                //
+                break;
+        }
+    }
+    static #handleDialogClick = (evt) => {
+        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        const dialog = evt.currentTarget instanceof HTMLDialogElement && evt.currentTarget;
+        if (!dialog)
+            return;
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            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) => {
+        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        if (!evt.cancelable)
+            return;
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
+        if (!target)
+            return;
+        evt.preventDefault();
+        target.inert = true;
+        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 = (evt) => {
+        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
+        if (!target)
+            return;
+        target.remove();
+    };
+}

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

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

package/generated/components/bordered-button.js

@@ -1,7 +1,10 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class BorderedButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
     constructor() {
         super();
     }
@@ -14,6 +17,17 @@ export class BorderedButton extends ButtonBase {
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderedButton.#handleClick, el).on());
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${BorderedButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'role':
+                buttonRole(target, attributeName);
+                break;
+        }
+    }
     static #handleClick = async (evt) => {
         //
     };

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

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

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

@@ -1,7 +1,10 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class BorderedProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
     constructor() {
         super();
     }
@@ -14,6 +17,17 @@ export class BorderedProminentButton extends ButtonBase {
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderedProminentButton.#handleClick, el).on());
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${BorderedProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'role':
+                buttonRole(target, attributeName);
+                break;
+        }
+    }
     static #handleClick = async (evt) => {
         //
     };

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

@@ -5,5 +5,5 @@ export declare class BorderlessButton extends ButtonBase {
     constructor();
     static polyfillDisconnectedCallback(el: BorderlessButton): void;
     static polyfillConnectedCallback(el: BorderlessButton): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/borderless-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class BorderlessButton extends ButtonBase {
     static get observedAttributes() {
@@ -17,15 +17,14 @@ export class BorderlessButton extends ButtonBase {
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderlessButton.#handleClick, el).on());
     }
-    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         console.debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
         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()
+                buttonRole(target, attributeName);
                 break;
         }
     }

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

@@ -5,5 +5,5 @@ export declare class ConfirmationDialog extends DialogBase {
     constructor();
     static polyfillDisconnectedCallback(el: ConfirmationDialog): void;
     static polyfillConnectedCallback(el: ConfirmationDialog): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/confirmation-dialog.js

@@ -1,6 +1,6 @@
-import { ConfirmationDialog as EvtBus } from '../confirmation-dialog';
+import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff, touchGlass } from '../internal/utils';
+import { isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
@@ -12,10 +12,10 @@ export class ConfirmationDialog extends DialogBase {
     static polyfillDisconnectedCallback(el) {
         console.debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
         const positionAnchor = el.style.getPropertyValue('position-anchor');
-        $.prop('anchor-name', null, document.querySelector(`[style*="${positionAnchor}"]`));
-        $.prop('position-anchor', null, el);
+        document.querySelector(`[style*="${positionAnchor}"]`)?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, document.querySelector<HTMLElement>(`[style*="${positionAnchor}"]`))
+        el.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, el)
         CleanupRegistry.unregister(el);
-        EvtBus.dispatchEvent(new CustomEvent('return', {
+        confirmationDialog.dispatchEvent(new CustomEvent('confirmation:return', {
             detail: { returnValue: el.returnValue, positionAnchor },
             bubbles: true,
             composed: true,
@@ -29,7 +29,10 @@ export class ConfirmationDialog extends DialogBase {
             { types: 'cancel', listener: this.#handleDialogCancel },
         ], el).on());
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, (evt) => {
-            if (evt.target.matches('[is=confirmation-dialog]'))
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                return true;
+            if (target.matches('[is=confirmation-dialog]'))
                 return false;
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
@@ -38,9 +41,10 @@ export class ConfirmationDialog extends DialogBase {
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
+        el.autofocus = true;
         el.showModal();
     }
-    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
         switch (attributeName) {
@@ -55,15 +59,15 @@ export class ConfirmationDialog extends DialogBase {
     }
     static #handleDialogClick = (evt) => {
         console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const dialog = evt.currentTarget;
+        const dialog = evt.currentTarget instanceof HTMLDialogElement && evt.currentTarget;
         if (!dialog)
             return;
-        const target = evt.target;
-        const rect = dialog.getBoundingClientRect();
-        const isInside = evt.clientX >= rect.left && evt.clientX <= rect.right && evt.clientY >= rect.top && evt.clientY <= rect.bottom;
-        if (target?.matches('dialog') && !isInside)
-            return dialog?.requestClose(); // click outside
-        const button = target?.closest('button');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (target.matches('dialog') && !isInside(evt.clientX, evt.clientY, dialog.getBoundingClientRect()))
+            return dialog.requestClose(); // click outside
+        const button = target.closest('button');
         if (!button)
             return;
         button.scrollIntoView({
@@ -72,15 +76,15 @@ export class ConfirmationDialog extends DialogBase {
             inline: 'nearest',
         });
         dialog.returnValue = button.value;
-        dialog?.requestClose(button.value);
-        evt?.stopPropagation();
-        evt?.stopImmediatePropagation();
+        dialog.requestClose(button.value);
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
         console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
-        const target = evt.target;
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
         if (!target)
             return;
         evt.preventDefault();
@@ -96,7 +100,9 @@ export class ConfirmationDialog extends DialogBase {
     };
     static #handleDialogClose = (evt) => {
         console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const target = evt.target;
-        target?.remove();
+        const target = evt.target instanceof HTMLDialogElement && evt.target;
+        if (!target)
+            return;
+        target.remove();
     };
 }

package/generated/components/content-unavailable-view.js

@@ -31,7 +31,7 @@ export class ContentUnavailableView extends HTMLElement {
       </div>
       <div part="root content-unavailable-actions-stack">
         <slot name="actions"></slot>
-      </div>`, ''));
+      </div>`));
     }
     #shadowRoot;
     #slots;
@@ -66,7 +66,7 @@ export class ContentUnavailableView extends HTMLElement {
         }
     }
     #renderSearch = (search) => {
-        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`)), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`));
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
         if (search) {
             const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
             titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));

package/generated/components/date-picker.js

@@ -48,7 +48,7 @@ export class DatePicker extends FormAssociatedBase {
               <input type="text" name="year" inputmode="numeric" pattern="\d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input">
             </div>
             <slot name="validity-options" hidden></slot>
-          </label>`, ''));
+          </label>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);
@@ -99,7 +99,7 @@ export class DatePicker extends FormAssociatedBase {
             case 'label':
                 let label = this.querySelector(':scope>[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label"></span>`));
+                    label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
                     label.textContent = newValue;
                 }
                 else
@@ -177,7 +177,10 @@ export class DatePicker extends FormAssociatedBase {
     }
     #handleClick = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target?.closest('input');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const input = target.closest('input');
         if (input)
             return;
         this.#shadowRoot.querySelector('input.focus')?.focus?.();
@@ -217,7 +220,7 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputPaste = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         evt.preventDefault();
@@ -239,7 +242,7 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputBeforeinput = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         if ('insertText' !== evt.inputType)
@@ -262,6 +265,8 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputKeydown = ({ type, target, key }) => {
         console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement && target))
+            return;
         const input = target;
         if (!input)
             return;
@@ -284,7 +289,10 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputBlur = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const target = evt.target instanceof HTMLInputElement && evt.target;
+        if (!target)
+            return;
+        const input = target;
         if (0 === input.value.length)
             return;
         const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');