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

package/generated/components/glass-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, 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 GlassProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        DEBUG && console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        debug(`${GlassProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        DEBUG && console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        debug(`${GlassProminentButton.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        DEBUG && console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLButtonElement;
         if (!node)
             return;

package/generated/components/h-divider.js

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

package/generated/components/h-stack.js

@@ -1,4 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { debug } from '../internal/utils';
 /**
  * @summary A view that arranges its children side by side.
  *
@@ -16,9 +16,9 @@ export class HStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        DEBUG && console.debug(`${HStack.name} ⚡️ connect`);
+        debug(`${HStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${HStack.name} ⚡️ disconnect`);
+        debug(`${HStack.name} ⚡️ disconnect`);
     }
 }

package/generated/components/image-view.js

@@ -1,5 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -21,7 +20,7 @@ export class ImageView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
@@ -58,9 +57,9 @@ export class ImageView extends HTMLElement {
         // container.classList.add(...tokens)
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${ImageView.name} ⚡️ disconnect`);
+        debug(`${ImageView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${ImageView.name} ⚡️ connect`);
+        debug(`${ImageView.name} ⚡️ connect`);
     }
 }

package/generated/components/label-view.js

@@ -1,5 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -54,7 +53,7 @@ export class LabelView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         // this.#scheduleReflect()
@@ -77,9 +76,9 @@ export class LabelView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${LabelView.name} ⚡️ disconnect`);
+        debug(`${LabelView.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${LabelView.name} ⚡️ connect`);
+        debug(`${LabelView.name} ⚡️ connect`);
     }
 }

package/generated/components/labeled-content.js

@@ -1,5 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -66,7 +65,7 @@ export class LabeledContent extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         if (oldValue === newValue)
             return;
         switch (name) {
@@ -100,10 +99,10 @@ export class LabeledContent extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${LabeledContent.name} ⚡️ disconnect`);
+        debug(`${LabeledContent.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${LabeledContent.name} ⚡️ connect`);
+        debug(`${LabeledContent.name} ⚡️ connect`);
     }
     // <type>:<locale>;<option>=<value>;<option>=<value>
     #fmt = (value, format) => {

package/generated/components/list-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';
 /**
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
@@ -14,11 +13,11 @@ export class ListView extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${ListView.name} ⚡️ disconnect`);
+        debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${ListView.name} ⚡️ connect`);
+        debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
     }
 }

package/generated/components/menu-view.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, touchGlass } from '../internal/utils';
+import { $, debug, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -35,14 +34,14 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     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 'open':
                 if (!this.#dialog)
                     break;
                 this.#dialog.inert = null === newValue;
                 if (null === newValue && this.#dialog.open) {
-                    DEBUG && console.debug(`${_a.name} ⚡️ will-close`);
+                    debug(`${_a.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -52,7 +51,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    DEBUG && console.debug(`${_a.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -65,14 +64,14 @@ export class MenuView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
         summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
         dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
         const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
         CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
@@ -96,7 +95,7 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     #handleDialogClick = ({ type, target }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target.matches('dialog'))
@@ -113,19 +112,19 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }

package/generated/components/navigation-large-title.js

@@ -1,8 +1,7 @@
 var _a;
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { add, frame, onoff, slowHideShow, timeout } from '../internal/utils';
+import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const observing = new WeakSet();
 function observeResizeEnd(el, callback, stableFrames = 4) {
@@ -84,13 +83,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -113,7 +112,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        DEBUG && console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -158,7 +157,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)

package/generated/components/navigation-split-view.js

@@ -1,5 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
 /**
  * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
  */
@@ -8,15 +8,15 @@ export class NavigationSplitView extends NavigationView {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        DEBUG && console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        debug(`${NavigationSplitView.name} ⚡️ connect`);
         super.connectedCallback();
     }
 }

package/generated/components/navigation-stack.js

@@ -1,5 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
 /**
  * @summary A container view that shows a main screen and lets the user open other screens on top of it.
  */
@@ -8,7 +8,7 @@ export class NavigationStack extends NavigationView {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
         switch (name) {
             case 'hidden':
@@ -16,11 +16,11 @@ export class NavigationStack extends NavigationView {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        debug(`${NavigationStack.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        DEBUG && console.debug(`${NavigationStack.name} ⚡️ connect`);
+        debug(`${NavigationStack.name} ⚡️ connect`);
         super.connectedCallback();
     }
 }

package/generated/components/navigation-title.js

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var NavigationTitle_1;
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { microtaskOnConnected } from '../internal/decorators';
+import { debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -22,14 +22,14 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DEBUG && console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         this.#render(this.getAttribute('value'), this.getAttribute('subtitle'), this.getAttribute('system-image'), this.getAttribute('system-image-weight'));
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
+        debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        DEBUG && console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
+        debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle, systemImage, systemImageWeight) => {
         queryMorph(':not([slot])', html `

package/generated/components/picker-view.js

@@ -1,17 +1,16 @@
 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 { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, ancestors, kebabCase, onoff } from '../internal/utils';
+import { $, ancestors, debug, kebabCase, onoff } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
-    DEBUG && console.debug(`PickerView: update`);
+    debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
         throw new Error('invalid view');
     const { component, page } = path;
@@ -23,7 +22,7 @@ const update = (path, node, overwrite = true) => {
         page.insertAdjacentElement(position, node);
 };
 const reflectSpawnedPage = (current, source) => {
-    DEBUG && console.debug(`PickerView: reflectSpawnedPage`);
+    debug(`PickerView: reflectSpawnedPage`);
     const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
     const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
     // pre replace list (always exists)
@@ -61,10 +60,10 @@ const reflectSpawnedPage = (current, source) => {
         oldSearch?.remove();
 };
 const extractTag = (node) => {
-    DEBUG && console.debug(`PickerView: extractTag`);
+    debug(`PickerView: extractTag`);
     return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
 }, extractLabel = (node) => {
-    DEBUG && console.debug(`PickerView: extractLabelFromGroup`);
+    debug(`PickerView: extractLabelFromGroup`);
     if (node instanceof Element)
         if (node instanceof HTMLOptionElement)
             return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || null;
@@ -74,14 +73,14 @@ const extractTag = (node) => {
         return node.title ?? node.value ?? null;
     // return node instanceof Element ? node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label') : (node.title ?? node.value ?? null)
 }, extractIcon = (node) => {
-    DEBUG && console.debug(`PickerView: extractIcon`);
+    debug(`PickerView: extractIcon`);
     // return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null)
     if (node instanceof Element)
         return node.getAttribute('data-system-image');
     else
         return node.systemImage ?? null;
 }, extractSubtitle = (node) => {
-    DEBUG && console.debug(`PickerView: extractSubtitle`);
+    debug(`PickerView: extractSubtitle`);
     if (node instanceof Element)
         return node.getAttribute('data-subtitle');
     else
@@ -166,7 +165,7 @@ export class PickerView extends FormAssociatedBase {
         };
     }
     #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
-        DEBUG && console.debug(`${_a.name} #spawnPage`);
+        debug(`${_a.name} #spawnPage`);
         const body = tag === 'sheet-view'
             ? $(html `<dialog is="sheet-view">
                 <scroll-view>
@@ -324,7 +323,7 @@ export class PickerView extends FormAssociatedBase {
         }
     };
     #renderButtons(input) {
-        DEBUG && console.debug(`${_a.name} #renderButtons`);
+        debug(`${_a.name} #renderButtons`);
         switch (input.mode) {
             case 'dictionary': {
                 const flattenDictionary = (tree) => {
@@ -476,15 +475,15 @@ export class PickerView extends FormAssociatedBase {
         this.#reflectSelectionOnCurrentValueLabel();
     }
     #renderDictionary = (dictionary) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.#renderButtons({ mode: 'dictionary', source: dictionary });
     };
     #renderSlotted = (entries) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] });
     };
     #renderValidityMsgs = (entries) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #lastRenderedStyle; //string | null
@@ -616,7 +615,7 @@ export class PickerView 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 this.constructor.ATTR.PLACEHOLDER:
             case this.constructor.ATTR.PLACEHOLDER_ICON:
@@ -663,13 +662,13 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#validityObservers.unobserveAll();
         this.#observers.unobserveAll();
     }
     connectedCallback() {
-        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('localechange', () => {
             this.#renderSlotted([]);
         }, I18n.on).on());
@@ -687,7 +686,7 @@ export class PickerView extends FormAssociatedBase {
         return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
     }
     #render() {
-        DEBUG && console.debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
         // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
@@ -728,7 +727,7 @@ export class PickerView extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
     #handleTriggerClick = async ({ type, target }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
@@ -743,7 +742,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handlePageBtnClick = async (evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         evt.stopImmediatePropagation();
         evt.preventDefault();
         const { currentTarget: btn } = evt;
@@ -766,7 +765,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handleClick({ type, target }) {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
@@ -778,7 +777,7 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm();
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -787,7 +786,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleListSlotchange = ({ type, target: slot }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -796,7 +795,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionSpawnTag(node) {
-        DEBUG && console.debug(`${_a.name} #wrapOptionSpawnTag`);
+        debug(`${_a.name} #wrapOptionSpawnTag`);
         const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<button type="button" tabindex="0" navigation-link>
@@ -834,7 +833,7 @@ export class PickerView extends FormAssociatedBase {
         return mount.firstElementChild; //btn
     }
     static #wrapOptionTag(node) {
-        DEBUG && console.debug(`${_a.name} #wrapOptionTag`);
+        debug(`${_a.name} #wrapOptionTag`);
         const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<button type="button" tabindex="0" value="${tag}">
@@ -866,7 +865,7 @@ export class PickerView extends FormAssociatedBase {
         return mount.firstElementChild; //btn
     }
     static #wrapOptgroupTag(node) {
-        DEBUG && console.debug(`${_a.name} #wrapOptgroupTag`);
+        debug(`${_a.name} #wrapOptgroupTag`);
         const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
@@ -899,7 +898,7 @@ export class PickerView extends FormAssociatedBase {
     // static #reflectButtons(nodes: Element[], container: Element): void
     // static #reflectButtons(nodes: Dictionary, container: Element): void
     static #reflectButtons(nodes, container) {
-        DEBUG && console.debug(`${_a.name} #reflectButtons`);
+        debug(`${_a.name} #reflectButtons`);
         for (const node of nodes)
             if (node instanceof Element)
                 switch (node.tagName) {
@@ -981,7 +980,7 @@ export class PickerView extends FormAssociatedBase {
             }
     }
     // #reflectPlaceholder(value: string | null) {
-    //   DEBUG && console.debug(`#reflectPlaceholder`)
+    //   debug(`#reflectPlaceholder`)
     // const input = this.#shadowRoot.querySelector('input')
     // if (input) {
     //   if (value) input.setAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER, value)
@@ -989,12 +988,12 @@ export class PickerView extends FormAssociatedBase {
     // }
     // }
     #reflectLabel(value) {
-        DEBUG && console.debug(`${_a.name} #reflectLabel`);
+        debug(`${_a.name} #reflectLabel`);
         queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
-        DEBUG && console.debug(`${_a.name} #reflectSelectionOnButtons`);
+        debug(`${_a.name} #reflectSelectionOnButtons`);
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
             const groupMap = indexGroups(this.#lastIndexedRoot);
@@ -1025,7 +1024,7 @@ export class PickerView extends FormAssociatedBase {
      * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
      */
     #reflectSelectionOnCurrentValueLabel() {
-        DEBUG && console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
+        debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
         self.requestAnimationFrame(() => {
             switch (this.pickerStyle) {
                 case 'sheet':
@@ -1068,7 +1067,7 @@ export class PickerView extends FormAssociatedBase {
         });
     }
     #reflectTriggerHelp() {
-        DEBUG && console.debug(`${_a.name} #reflectTriggerHelp`);
+        debug(`${_a.name} #reflectTriggerHelp`);
         let trigger;
         switch (this.pickerStyle) {
             case 'sheet':
@@ -1123,7 +1122,7 @@ export class PickerView 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);
     };
     setCustomValidity = (message) => {