@swiftwc/ui 0.0.0-dev.105 → 0.0.0-dev.107

package/generated/client/index.js

@@ -4,10 +4,10 @@ import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
 import flags from '../internal/flags.json' with { type: 'json' };
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, kebabCase, onoff } from '../internal/utils';
+import { $, debug, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 import { html, render } from '../tpl';
-flags.DEBUG && console.debug(flags);
+debug(flags);
 //#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -16,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;
@@ -28,7 +27,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
     if (!customElements.get(is))
         customElements.define(is, Ctor);
 }
-flags.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();
@@ -58,7 +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) ?? [])];
-    flags.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);

package/generated/components/alert-dialog.js

@@ -1,7 +1,6 @@
 import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { 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.')`.
@@ -11,7 +10,7 @@ export class AlertDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ disconnect`);
+        debug(`${AlertDialog.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
         alertDialog.dispatchEvent(new CustomEvent('alert:return', {
             detail: { returnValue: el.returnValue },
@@ -20,7 +19,7 @@ export class AlertDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ connect`);
+        debug(`${AlertDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -33,7 +32,7 @@ export class AlertDialog extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        debug(`${AlertDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -41,7 +40,7 @@ export class AlertDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        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':
                 //
@@ -49,7 +48,7 @@ export class AlertDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -69,7 +68,7 @@ export class AlertDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -77,7 +76,7 @@ export class AlertDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        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'))
@@ -87,7 +86,7 @@ export class AlertDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${type}`);
+        debug(`${AlertDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/body-view.js

@@ -1,4 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { debug } from '../internal/utils';
 /**
  * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
  */
@@ -7,9 +7,9 @@ export class BodyView extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${BodyView.name} ⚡️ disconnect`);
+        debug(`${BodyView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${BodyView.name} ⚡️ connect`);
+        debug(`${BodyView.name} ⚡️ connect`);
     }
 }

package/generated/components/bordered-button.js

@@ -1,6 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { ensurePlaceholder, onoff } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -26,16 +25,16 @@ export class BorderedButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        debug(`${BorderedButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
-        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,6 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 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';
 /**
@@ -26,16 +25,16 @@ export class BorderedProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
-        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,6 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 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';
 /**
@@ -26,16 +25,16 @@ export class BorderlessButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        debug(`${BorderlessButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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 }]) {
-        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 { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { debug } from '../internal/utils';
 export class ColorScheme extends HTMLElement {
     static get observedAttributes() {
         return ['dark'];
@@ -7,15 +7,15 @@ export class ColorScheme extends HTMLElement {
         super();
     }
     connectedCallback() {
-        DEBUG && console.debug(`${ColorScheme.name} ⚡️ connect`);
+        debug(`${ColorScheme.name} ⚡️ connect`);
         this.hidden = true;
         this.inert = true;
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${ColorScheme.name} ⚡️ disconnect`);
+        debug(`${ColorScheme.name} ⚡️ disconnect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        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,7 +1,6 @@
 import { confirmationDialog } from '../buses';
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 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';
 /**
  * @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?')`.
@@ -14,7 +13,7 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        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,7 +25,7 @@ export class ConfirmationDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        debug(`${ConfirmationDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -40,7 +39,7 @@ export class ConfirmationDialog extends DialogBase {
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
         }), el).on());
-        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -48,7 +47,7 @@ export class ConfirmationDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        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':
@@ -61,7 +60,7 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -83,7 +82,7 @@ export class ConfirmationDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -91,7 +90,7 @@ export class ConfirmationDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        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'))
@@ -101,7 +100,7 @@ export class ConfirmationDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/content-unavailable.js

@@ -1,7 +1,6 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, 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.
@@ -48,7 +47,7 @@ export class ContentUnavailable extends HTMLElement {
         };
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        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,10 +61,10 @@ export class ContentUnavailable extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
+        debug(`${ContentUnavailable.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        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/date-picker.js

@@ -1,10 +1,9 @@
 var _a;
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 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, 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'];
@@ -38,7 +37,7 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -76,7 +75,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        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+/)
@@ -129,7 +128,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        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
@@ -173,7 +172,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -201,7 +200,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -244,7 +243,7 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -266,7 +265,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -289,7 +288,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -308,12 +307,12 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        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 }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -326,7 +325,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -437,7 +436,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        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.js

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

package/generated/components/disclosure-group.js

@@ -1,6 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, onoff, timeout } from '../internal/utils';
+import { cssTime, debug, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
 /**
@@ -25,15 +24,15 @@ export class DisclosureGroup extends DetailsBase {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        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) {
-        DEBUG && console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
+        debug(`${DisclosureGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        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;
@@ -44,7 +43,7 @@ export class DisclosureGroup extends DetailsBase {
         });
     }
     static #handleToggle = async ({ type, currentTarget: details }) => {
-        DEBUG && console.debug(`${DisclosureGroup.name} ⚡️ ${type}`);
+        debug(`${DisclosureGroup.name} ⚡️ ${type}`);
         if (!(details instanceof HTMLDetailsElement))
             return;
         const newValue = details.open ? 'opening' : 'closing';

package/generated/components/fine-tooltip.js

@@ -1,7 +1,6 @@
 var _a;
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff } from '../internal/utils';
+import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
 /**
  * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
@@ -21,7 +20,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -51,7 +50,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -60,7 +59,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();

package/generated/components/form-view.js

@@ -1,6 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups controls together for entering data, like a settings screen.
@@ -12,12 +11,12 @@ export class FormView extends FormBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${FormView.name} ⚡️ disconnect`);
+        debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        DEBUG && console.debug(`${FormView.name} ⚡️ connect`);
+        debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;

package/generated/components/glass-button.js

@@ -1,6 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -26,16 +25,16 @@ export class GlassButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        debug(`${GlassButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        DEBUG && console.debug(`${GlassButton.name} ⚡️ connect`);
+        debug(`${GlassButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        DEBUG && console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;