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

package/generated/client/index.d.ts

@@ -1,17 +1,10 @@
 import { lifecycleObserver } from '../buses';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
-import { type NavigationHost } from '../internal/privateNamespace';
+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[];
-};
-export declare const startViewTransition: (target: HTMLElement, type?: TransitionType, updateCallbackOrOptions?: UpdateCallback | NavigateOptions) => Promise<void>;
 export declare const alert: (title?: string, message?: string, actions?: {
     label?: string;
     image?: string;
@@ -27,5 +20,5 @@ export declare const confirmationDialog: (trigger: HTMLElement, title: string, m
     controller?: AbortController;
     titleVisibility?: boolean;
 }) => Promise<string>;
-export { I18n, lifecycleObserver, NavigationPath, Snapshot };
+export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
 export { type NavigationHost };

package/generated/client/index.js

@@ -2,8 +2,10 @@ import { alertDialog, confirmationDialog as confirmationDialogBus, lifecycleObse
 import * as Components from '../components';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
-import { $, kebabCase, onoff } from '../internal/utils';
+import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
+import { $, debug, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+//#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
     const is = kebabCase(k);
@@ -23,7 +25,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
     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();
@@ -53,7 +55,7 @@ if (0 < polyfills.size) {
     }, 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);
@@ -101,6 +103,7 @@ if (0 < polyfills.size) {
 }
 // SECTION: Safari polyfill
 document.addEventListener('touchstart', () => { }, { passive: true });
+//#endregion
 // SECTION
 const handleHelp = ({ target, relatedTarget }) => {
     if (!(target instanceof HTMLElement && target))
@@ -164,157 +167,7 @@ if (mediaQueryList.matches)
         ['pointerout', handleDone],
     ])
         document.addEventListener(k, v, { 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);
-    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();
-    }
-};
+//#region fns
 export const alert = async (title, message, actions, options) => {
     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'));
@@ -410,6 +263,8 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
     //   // controller.signal.addEventListener('abort', onAbort, { once: true })
     // })
 };
+//#endregion
 void Snapshot.waitReady; // void Snapshot.setOwnConfig()
-// SECTION
-export { I18n, lifecycleObserver, NavigationPath, Snapshot };
+//#region exports
+export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
+//#endregion

package/generated/components/alert-dialog.js

@@ -1,13 +1,13 @@
 import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { debug, 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`);
+        debug(`${AlertDialog.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
         alertDialog.dispatchEvent(new CustomEvent('alert:return', {
             detail: { returnValue: el.returnValue },
@@ -16,21 +16,20 @@ export class AlertDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${AlertDialog.name} ⚡️ connect`);
+        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)
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement && target))
                 return true;
             if (target.matches('[is=alert-dialog]'))
                 return false;
             return true;
         }), el).on());
-        console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        debug(`${AlertDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -38,7 +37,7 @@ export class AlertDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        console.debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         switch (attributeName) {
             case 'label':
                 //
@@ -46,12 +45,11 @@ export class AlertDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
-        const dialog = evt.currentTarget instanceof HTMLDialogElement && evt.currentTarget;
-        if (!dialog)
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        const { target, currentTarget: dialog } = evt;
+        if (!(dialog instanceof HTMLDialogElement && dialog))
             return;
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+        if (!(target instanceof HTMLElement && target))
             return;
         const button = target.closest('button');
         if (!button)
@@ -67,15 +65,15 @@ export class AlertDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
-        const target = evt.target instanceof HTMLDialogElement && evt.target;
-        if (!target)
+        const { target } = evt;
+        if (!(target instanceof HTMLDialogElement && target))
             return;
         evt.preventDefault();
         target.inert = true;
-        console.debug(`${AlertDialog.name} ⚡️ will-close`);
+        debug(`${AlertDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -84,10 +82,9 @@ export class AlertDialog extends DialogBase {
             target.removeAttribute('closing');
         });
     };
-    static #handleDialogClose = (evt) => {
-        console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLDialogElement && evt.target;
-        if (!target)
+    static #handleDialogClose = ({ type, target }) => {
+        debug(`${AlertDialog.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLDialogElement && target))
             return;
         target.remove();
     };

package/generated/components/body-view.js

@@ -1,11 +1,12 @@
+import { debug } from '../internal/utils';
 export class BodyView extends HTMLElement {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${BodyView.name} ⚡️ disconnect`);
+        debug(`${BodyView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${BodyView.name} ⚡️ connect`);
+        debug(`${BodyView.name} ⚡️ connect`);
     }
 }

package/generated/components/bordered-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -14,16 +14,16 @@ export class BorderedButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        debug(`${BorderedButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderedButton.name} ⚡️ connect`);
+        debug(`${BorderedButton.name} ⚡️ connect`);
         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 ?? '')}")`);
+        debug(`${BorderedButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement && target;
         if (!node)
             return;

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -14,16 +14,16 @@ export class BorderedProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderedProminentButton.name} ⚡️ connect`);
+        debug(`${BorderedProminentButton.name} ⚡️ connect`);
         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 ?? '')}")`);
+        debug(`${BorderedProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement && target;
         if (!node)
             return;

package/generated/components/borderless-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -14,16 +14,16 @@ export class BorderlessButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        debug(`${BorderlessButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${BorderlessButton.name} ⚡️ connect`);
+        debug(`${BorderlessButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', BorderlessButton.#handleClick, el).on());
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        console.debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${BorderlessButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement && target;
         if (!node)
             return;

package/generated/components/confirmation-dialog.js

@@ -1,6 +1,6 @@
 import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { isInside, onoff, touchGlass } from '../internal/utils';
+import { debug, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
@@ -10,7 +10,7 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
+        debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
         const positionAnchor = el.style.getPropertyValue('position-anchor');
         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)
@@ -22,22 +22,21 @@ export class ConfirmationDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        debug(`${ConfirmationDialog.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)
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement && target))
                 return true;
             if (target.matches('[is=confirmation-dialog]'))
                 return false;
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
         }), el).on());
-        console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -45,7 +44,7 @@ export class ConfirmationDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
         switch (attributeName) {
             case 'label':
@@ -58,12 +57,11 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const dialog = evt.currentTarget instanceof HTMLDialogElement && evt.currentTarget;
-        if (!dialog)
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        const { target, currentTarget: dialog } = evt;
+        if (!(dialog instanceof HTMLDialogElement && dialog))
             return;
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+        if (!(target instanceof HTMLElement && target))
             return;
         if (target.matches('dialog') && !isInside(evt.clientX, evt.clientY, dialog.getBoundingClientRect()))
             return dialog.requestClose(); // click outside
@@ -81,15 +79,15 @@ export class ConfirmationDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
-        const target = evt.target instanceof HTMLDialogElement && evt.target;
-        if (!target)
+        const { target } = evt;
+        if (!(target instanceof HTMLDialogElement && target))
             return;
         evt.preventDefault();
         target.inert = true;
-        console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -98,10 +96,9 @@ export class ConfirmationDialog extends DialogBase {
             target.removeAttribute('closing');
         });
     };
-    static #handleDialogClose = (evt) => {
-        console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLDialogElement && evt.target;
-        if (!target)
+    static #handleDialogClose = ({ type, target }) => {
+        debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLDialogElement && target))
             return;
         target.remove();
     };

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

@@ -1,6 +1,6 @@
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff } from '../internal/utils';
+import { $, debug, onoff } from '../internal/utils';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
  *
@@ -46,13 +46,13 @@ export class ContentUnavailableView extends HTMLElement {
         };
     }
     disconnectedCallback() {
-        console.debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
+        debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
+        debug(`${ContentUnavailableView.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${ContentUnavailableView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ContentUnavailableView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'search':
                 if (oldValue === newValue)

package/generated/components/date-picker.d.ts

@@ -10,16 +10,6 @@ export declare class DatePicker extends FormAssociatedBase {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get datePickerStyle(): DatePickerStyle;
-    get selection(): {
-        year: string;
-        month: string;
-        day: string;
-    };
-    set selection(v: {
-        year: string;
-        month: string;
-        day: string;
-    });
     get name(): string;
     get value(): {
         year: string;