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

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 flags from '../internal/flags.json' with { type: 'json' };
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { $, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 import { html, render } from '../tpl';
+flags.DEBUG && console.debug(flags);
 //#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -26,8 +28,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
     if (!customElements.get(is))
         customElements.define(is, Ctor);
 }
-if (devFlags.debug)
-    console.debug(polyfills);
+flags.DEBUG && console.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 +58,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);
+    flags.DEBUG && console.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,6 +1,7 @@
 import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { 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 +11,7 @@ export class AlertDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
         alertDialog.dispatchEvent(new CustomEvent('alert:return', {
             detail: { returnValue: el.returnValue },
@@ -20,8 +20,7 @@ export class AlertDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ connect`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -34,8 +33,7 @@ export class AlertDialog extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ will-open`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -43,8 +41,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 && console.debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         switch (attributeName) {
             case 'label':
                 //
@@ -52,8 +49,7 @@ export class AlertDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -73,8 +69,7 @@ export class AlertDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -82,8 +77,7 @@ export class AlertDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ will-close`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -93,8 +87,7 @@ export class AlertDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${AlertDialog.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${AlertDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/body-view.js

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

package/generated/components/bordered-button.js

@@ -1,5 +1,6 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +26,16 @@ export class BorderedButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedButton.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${BorderedButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedButton.name} ⚡️ connect`);
+        DEBUG && console.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 && console.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,6 @@
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +26,16 @@ export class BorderedProminentButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${BorderedProminentButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderedProminentButton.name} ⚡️ connect`);
+        DEBUG && console.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 && console.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,6 @@
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
+import { ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
@@ -25,19 +26,16 @@ export class BorderlessButton extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${BorderlessButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${BorderlessButton.name} ⚡️ connect`);
+        DEBUG && console.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 && console.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/flags.json' with { type: 'json' };
 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 && console.debug(`${ColorScheme.name} ⚡️ connect`);
         this.hidden = true;
         this.inert = true;
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${ColorScheme.name} ⚡️ disconnect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
+        DEBUG && console.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,7 @@
 import { confirmationDialog } from '../buses';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
+import { 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 +14,7 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
+        DEBUG && console.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 +26,7 @@ export class ConfirmationDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -41,8 +40,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 && console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -50,8 +48,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 && console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
         switch (attributeName) {
             case 'label':
@@ -64,8 +61,7 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement))
             return;
@@ -87,8 +83,7 @@ export class ConfirmationDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -96,8 +91,7 @@ export class ConfirmationDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
+        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -107,8 +101,7 @@ export class ConfirmationDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement))
             return;
         target.remove();

package/generated/components/content-unavailable.js

@@ -1,6 +1,7 @@
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
+import { $, 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.
@@ -47,8 +48,7 @@ export class ContentUnavailable extends HTMLElement {
         };
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        DEBUG && console.debug(`${ContentUnavailable.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'search':
                 if (oldValue === newValue)
@@ -62,12 +62,10 @@ export class ContentUnavailable extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${ContentUnavailable.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ContentUnavailable.name} ⚡️ connect`);
+        DEBUG && console.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,9 +1,10 @@
 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, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { $, clamp, kebabCase, onoff, set } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
@@ -37,8 +38,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 && console.debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -76,8 +76,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 && console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
@@ -130,8 +129,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 && console.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 +173,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -204,8 +201,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -248,8 +244,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 && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -271,8 +266,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -295,8 +289,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -315,14 +308,12 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.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 && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -335,8 +326,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -447,8 +437,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
+        DEBUG && console.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,19 +1,15 @@
-import { devFlags } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 export class DetailPlaceholder extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${DetailPlaceholder.name} ⚡️ connect`);
+        DEBUG && console.debug(`${DetailPlaceholder.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${DetailPlaceholder.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${DetailPlaceholder.name} ⚡️ disconnect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${DetailPlaceholder.name} ⚡️ attr-change [${name}]`);
-        //
+        DEBUG && console.debug(`${DetailPlaceholder.name} ⚡️ attr-change [${name}]`);
     }
 }

package/generated/components/disclosure-group.js

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

package/generated/components/fine-tooltip.js

@@ -1,6 +1,7 @@
 var _a;
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
+import { $, 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.
@@ -20,8 +21,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        DEBUG && console.debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -51,8 +51,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -61,8 +60,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();

package/generated/components/form-view.js

@@ -1,5 +1,6 @@
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
+import { 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.
@@ -11,14 +12,12 @@ export class FormView extends FormBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${FormView.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${FormView.name} ⚡️ connect`);
+        DEBUG && console.debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;