@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

package/generated/client/index.js

@@ -2,10 +2,12 @@ import { alertDialog, confirmationDialog as confirmationDialogBus, lifecycleObse
 import * as Components from '../components';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
+import devFlags from '../internal/dev-flags';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { $, debug, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 import { html, render } from '../tpl';
+debug(devFlags);
 //#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -14,11 +16,10 @@ 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);
-        // const testEl = document.createElement('template')
-        // testEl.innerHTML = `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`
-        // const testNode = testEl.content.firstElementChild,
+        // 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;
@@ -26,8 +27,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
     if (!customElements.get(is))
         customElements.define(is, Ctor);
 }
-if (devFlags.debug)
-    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();
@@ -57,8 +57,7 @@ if (0 < polyfills.size) {
     }, unobserve = (el) => {
         handlers.delete(el);
     }, polyfillTagNamesCacheSelector = [...polyfillTagNamesCache.values()].map((v) => `${v}`.toLowerCase()).join(','), flatten = (node) => [node, ...(node.querySelectorAll?.(polyfillTagNamesCacheSelector) ?? [])];
-    if (devFlags.debug)
-        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);
@@ -264,7 +263,7 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
         }
         dialog.insertAdjacentElement('beforeend', btn);
     }
-    trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    trigger.closest('content-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
     const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
         const { detail } = evt;
         off();

package/generated/components/alert-dialog.js

@@ -1,6 +1,6 @@
 import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { debug, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
@@ -10,8 +10,7 @@ export class AlertDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ disconnect`);
+        debug(`${AlertDialog.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
         alertDialog.dispatchEvent(new CustomEvent('alert:return', {
             detail: { returnValue: el.returnValue },
@@ -20,8 +19,7 @@ export class AlertDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ connect`);
+        debug(`${AlertDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -34,8 +32,7 @@ export class AlertDialog extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        debug(`${AlertDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -43,8 +40,7 @@ export class AlertDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            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':
                 //
@@ -52,8 +48,7 @@ export class AlertDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -73,8 +68,7 @@ export class AlertDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -82,8 +76,7 @@ export class AlertDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        if (devFlags.debug)
-            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'))
@@ -93,8 +86,7 @@ export class AlertDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${type}`);
+        debug(`${AlertDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/bordered-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class BorderedButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        debug(`${BorderedButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            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 }]) {
-        if (devFlags.debug)
-            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;
         if (!node)
             return;

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

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class BorderedProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            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 }]) {
-        if (devFlags.debug)
-            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;
         if (!node)
             return;

package/generated/components/borderless-button.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +25,16 @@ export class BorderlessButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        debug(`${BorderlessButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            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 }]) {
-        if (devFlags.debug)
-            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;
         if (!node)
             return;

package/generated/components/color-scheme.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 export class ColorScheme extends HTMLElement {
     static get observedAttributes() {
         return ['dark'];
@@ -7,18 +7,15 @@ export class ColorScheme extends HTMLElement {
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ connect`);
+        debug(`${ColorScheme.name} ⚡️ connect`);
         this.hidden = true;
         this.inert = true;
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ disconnect`);
+        debug(`${ColorScheme.name} ⚡️ disconnect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
+        debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
         // self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
         if (newValue)
             self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });

package/generated/components/confirmation-dialog.js

@@ -1,6 +1,6 @@
 import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
+import { debug, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.
@@ -13,8 +13,7 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            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)
@@ -26,8 +25,7 @@ export class ConfirmationDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        debug(`${ConfirmationDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -41,8 +39,7 @@ export class ConfirmationDialog extends DialogBase {
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
         }), el).on());
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -50,8 +47,7 @@ export class ConfirmationDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            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':
@@ -64,8 +60,7 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -87,8 +82,7 @@ export class ConfirmationDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -96,8 +90,7 @@ export class ConfirmationDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        if (devFlags.debug)
-            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'))
@@ -107,8 +100,7 @@ export class ConfirmationDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/content-unavailable.d.ts

@@ -9,7 +9,7 @@
  *
  * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot description
  * @slot actions
  *

package/generated/components/content-unavailable.js

@@ -1,6 +1,6 @@
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
+import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
@@ -13,7 +13,7 @@ import { html } from '../tpl';
  *
  * @example <content-unavailable padding><label-view title="No Mail"><svg slot="icon" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable>
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot description
  * @slot actions
  *
@@ -47,8 +47,7 @@ export class ContentUnavailable extends HTMLElement {
         };
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'search':
                 if (oldValue === newValue)
@@ -62,12 +61,10 @@ export class ContentUnavailable extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
+        debug(`${ContentUnavailable.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ connect`);
+        debug(`${ContentUnavailable.name} ⚡️ connect`);
     }
     #renderSearch = (search) => {
         const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(html `<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(html `<label-view foreground="secondary" slot="description"></label-view>`, '>1'));

package/generated/components/{body-view.d.ts → content-view.d.ts}

@@ -1,13 +1,13 @@
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
  */
-export declare class BodyView extends HTMLElement {
+export declare class ContentView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'body-view': BodyView;
+        'content-view': ContentView;
     }
 }

package/generated/components/content-view.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
+ */
+export class ContentView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        debug(`${ContentView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${ContentView.name} ⚡️ connect`);
+    }
+}

package/generated/components/date-picker.js

@@ -3,7 +3,7 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { $, clamp, debug, kebabCase, onoff, set } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
@@ -37,8 +37,7 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -76,8 +75,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
@@ -130,8 +128,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
@@ -175,8 +172,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -204,8 +200,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -248,8 +243,7 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -271,8 +265,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -295,8 +288,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -315,14 +307,12 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
     #handleInputBlur = ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -335,8 +325,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -447,8 +436,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {

package/generated/components/detail-placeholder.d.ts

@@ -0,0 +1,11 @@
+export declare class DetailPlaceholder extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'detail-placeholder': DetailPlaceholder;
+    }
+}

package/generated/components/detail-placeholder.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+export class DetailPlaceholder extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${DetailPlaceholder.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${DetailPlaceholder.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${DetailPlaceholder.name} ⚡️ attr-change [${name}]`);
+    }
+}

package/generated/components/disclosure-group.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, devFlags, onoff, timeout } from '../internal/utils';
+import { cssTime, debug, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
 /**
@@ -24,18 +24,15 @@ export class DisclosureGroup extends DetailsBase {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
+        debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
         // if (CSS.supports('interpolate-size', 'allow-keywords')) return
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
+        debug(`${DisclosureGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ connect`);
+        debug(`${DisclosureGroup.name} ⚡️ connect`);
         const newValue = el.open ? 'open' : 'closed';
         if (newValue !== el.dataset.state)
             el.dataset.state = newValue;
@@ -46,8 +43,7 @@ export class DisclosureGroup extends DetailsBase {
         });
     }
     static #handleToggle = async ({ type, currentTarget: details }) => {
-        if (devFlags.debug)
-            console.debug(`${DisclosureGroup.name} ⚡️ ${type}`);
+        debug(`${DisclosureGroup.name} ⚡️ ${type}`);
         if (!(details instanceof HTMLDetailsElement))
             return;
         const newValue = details.open ? 'opening' : 'closing';