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

package/generated/client/index.js

@@ -3,7 +3,7 @@ import * as Components from '../components';
 import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, debug, kebabCase, onoff } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 //#region polyfills
 export const polyfills = new Map();
@@ -25,7 +25,8 @@ for (const [k, Ctor] of Object.entries(Components)) {
     if (!customElements.get(is))
         customElements.define(is, Ctor);
 }
-debug(polyfills);
+if (devFlags.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();
@@ -55,7 +56,8 @@ if (0 < polyfills.size) {
     }, unobserve = (el) => {
         handlers.delete(el);
     }, polyfillTagNamesCacheSelector = [...polyfillTagNamesCache.values()].map((v) => `${v}`.toLowerCase()).join(','), flatten = (node) => [node, ...(node.querySelectorAll?.(polyfillTagNamesCacheSelector) ?? [])];
-    debug(polyfillTagNamesCache, polyfillTagNamesCacheSelector);
+    if (devFlags.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,13 +1,14 @@
 import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff, touchGlass } from '../internal/utils';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class AlertDialog extends DialogBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${AlertDialog.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
         alertDialog.dispatchEvent(new CustomEvent('alert:return', {
             detail: { returnValue: el.returnValue },
@@ -16,7 +17,8 @@ export class AlertDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        debug(`${AlertDialog.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -29,7 +31,8 @@ export class AlertDialog extends DialogBase {
                 return false;
             return true;
         }), el).on());
-        debug(`${AlertDialog.name} ⚡️ will-open`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -37,7 +40,8 @@ export class AlertDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         switch (attributeName) {
             case 'label':
                 //
@@ -45,7 +49,8 @@ export class AlertDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement && dialog))
             return;
@@ -65,7 +70,8 @@ export class AlertDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -73,7 +79,8 @@ export class AlertDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        debug(`${AlertDialog.name} ⚡️ will-close`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -83,7 +90,8 @@ export class AlertDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        debug(`${AlertDialog.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${AlertDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement && target))
             return;
         target.remove();

package/generated/components/body-view.js

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

package/generated/components/bordered-button.js

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

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

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

package/generated/components/borderless-button.js

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

package/generated/components/confirmation-dialog.js

@@ -1,6 +1,6 @@
 import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, isInside, onoff, touchGlass } from '../internal/utils';
+import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
@@ -10,7 +10,8 @@ export class ConfirmationDialog extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${ConfirmationDialog.name} ⚡️ disconnect`);
+        if (devFlags.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)
@@ -22,7 +23,8 @@ export class ConfirmationDialog extends DialogBase {
         }));
     }
     static polyfillConnectedCallback(el) {
-        debug(`${ConfirmationDialog.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'click', listener: this.#handleDialogClick },
             { types: 'close', listener: this.#handleDialogClose },
@@ -36,7 +38,8 @@ export class ConfirmationDialog extends DialogBase {
             // if (!(event.target as HTMLElement).closest('menu-view[open]')) return false
             return true;
         }), el).on());
-        debug(`${ConfirmationDialog.name} ⚡️ will-open`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ will-open`);
         el.removeAttribute('closing');
         el.scrollTop = 0;
         el.returnValue = '';
@@ -44,7 +47,8 @@ export class ConfirmationDialog extends DialogBase {
         el.showModal();
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // const newValue = (target as HTMLElement).getAttribute(attributeName ?? '')
         switch (attributeName) {
             case 'label':
@@ -57,7 +61,8 @@ export class ConfirmationDialog extends DialogBase {
         }
     }
     static #handleDialogClick = (evt) => {
-        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         const { target, currentTarget: dialog } = evt;
         if (!(dialog instanceof HTMLDialogElement && dialog))
             return;
@@ -79,7 +84,8 @@ export class ConfirmationDialog extends DialogBase {
         evt.stopImmediatePropagation();
     };
     static #handleDialogCancel = (evt) => {
-        debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         const { target } = evt;
@@ -87,7 +93,8 @@ export class ConfirmationDialog extends DialogBase {
             return;
         evt.preventDefault();
         target.inert = true;
-        debug(`${ConfirmationDialog.name} ⚡️ will-close`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ will-close`);
         target.setAttribute('closing', '');
         Promise.allSettled(target.getAnimations().map(({ finished }) => finished)).then(() => {
             if (!target.hasAttribute('closing'))
@@ -97,7 +104,8 @@ export class ConfirmationDialog extends DialogBase {
         });
     };
     static #handleDialogClose = ({ type, target }) => {
-        debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${ConfirmationDialog.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLDialogElement && target))
             return;
         target.remove();

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

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

package/generated/components/date-picker.js

@@ -3,7 +3,7 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, clamp, debug, kebabCase, onoff, set } from '../internal/utils';
+import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -26,7 +26,8 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -83,11 +84,12 @@ export class DatePicker extends FormAssociatedBase {
         this.#validityObservers.unobserveAll();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
-                const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.#selectedDate = { year: y, month: m, day: d };
+                // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
+                // this.#selectedDate = { year: y, month: m, day: d }
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -105,14 +107,15 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
+                let label = this.querySelector(':scope>label-view[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
-                    label.textContent = newValue;
+                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+                    label.setAttribute('foreground', 'secondary');
+                    label.setAttribute('title', newValue);
                 }
                 else
                     label?.remove();
-                this.#sendValueToForm();
+                // this.#sendValueToForm()
                 break;
             case 'disabled':
                 for (const input of this.#inputs)
@@ -124,9 +127,8 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
-        if (!this.isConnected)
-            return;
+        if (devFlags.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
@@ -170,13 +172,14 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement && slot))
             return;
         const assigned = slot.assignedElements();
         this.#validityObservers.syncObservations(assigned, ['value', 'label']);
-        if (0 < assigned.length)
-            this.#renderValidityMsgs([]);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
     };
     get #selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
@@ -198,7 +201,8 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement && target))
             return;
@@ -241,7 +245,8 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement && input))
             return;
@@ -263,7 +268,8 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement && input))
             return;
@@ -286,7 +292,8 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement && target))
             return;
         const input = target;
@@ -305,12 +312,14 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
     #handleInputBlur = ({ target, type }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement && target))
             return;
         const input = target;
@@ -323,7 +332,8 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     // Optional: form participation properties
@@ -428,7 +438,8 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${_a.name} ⚡️ validity-change`);
+        if (devFlags.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/disclosure-group.js

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

package/generated/components/fine-tooltip.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, debug, onoff } from '../internal/utils';
+import { $, devFlags, onoff } from '../internal/utils';
 export class FineTooltip extends HTMLElement {
     constructor() {
         super();
@@ -16,7 +16,8 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        debug(`${_a.name} ⚡️ measure`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement && target))
@@ -46,7 +47,8 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -55,7 +57,8 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();

package/generated/components/form-view.js

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