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

package/generated/components/scroll-view.js

@@ -2,7 +2,7 @@ var _a;
 import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, debug, frame, onoff, slowHideShow } from '../internal/utils';
+import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
@@ -41,13 +41,15 @@ export class ScrollView extends HTMLElement {
         });
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         observers.unobserve(this);
         frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff([
             // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
             { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
@@ -71,7 +73,8 @@ export class ScrollView extends HTMLElement {
         // })
     }
     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 'navigation-inline-title':
                 this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
@@ -95,7 +98,8 @@ export class ScrollView extends HTMLElement {
         }
     }
     #handleScroll = ({ target, type }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
@@ -104,12 +108,14 @@ export class ScrollView extends HTMLElement {
         this.#lastScrollTop = target.scrollTop;
     };
     #handleScrollend = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.#isMidScroll)
             this.#isMidScroll = false;
     };
     #handleMeasure = (entry) => {
-        debug(`${_a.name} ⚡️ measure`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
         if (0 === entry.contentRect.width + entry.contentRect.height)
             return;
         if (undefined === this.#beforeTabSwapLastScrolltop)
@@ -126,7 +132,8 @@ export class ScrollView extends HTMLElement {
         this.#beforeTabSwapLastScrolltop = undefined;
     };
     #handleTabReveal = ({ type, target }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         if (!target.contains(this))
@@ -157,7 +164,8 @@ export class ScrollView extends HTMLElement {
         // })
     };
     #handleTabBeforeswap = ({ type, target }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         if (!target.contains(this))

package/generated/components/search-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff, touchGlass } from '../internal/utils';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { InputBase } from '../namespace-browser/base';
 export class SearchView extends InputBase {
     static get observedAttributes() {
@@ -9,16 +9,19 @@ export class SearchView extends InputBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${SearchView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        debug(`${SearchView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.type = 'search';
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLInputElement && target;
         if (!node)
             return;

package/generated/components/section-view.js

@@ -1,4 +1,4 @@
-import { $, debug } from '../internal/utils';
+import { $, devFlags } from '../internal/utils';
 export class SectionView extends HTMLElement {
     static get observedAttributes() {
         return ['header', 'footer'];
@@ -32,12 +32,14 @@ export class SectionView extends HTMLElement {
         // })
     }
     disconnectedCallback() {
-        debug(`${SectionView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ disconnect`);
         // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
         // this.#observer?.unobserve(this)
     }
     connectedCallback() {
-        debug(`${SectionView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ connect`);
         // this.#sibling = this.closest('scroll-view') ?? undefined
         // Snapshot.waitReady.then(() => {
         // if (!(await frame(this))) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
@@ -53,7 +55,8 @@ export class SectionView extends HTMLElement {
         // })
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':

package/generated/components/sheet-view.js

@@ -1,16 +1,18 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class SheetView extends DialogBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${SheetView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        debug(`${SheetView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'cancel', listener: this.#handleCancel },
             { types: 'keydown', listener: SheetView.#handleKeydown },
@@ -18,7 +20,8 @@ export class SheetView extends DialogBase {
         el.autofocus = true;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         // // NOTE: wait for config
         // Snapshot.waitReady.then(() => {
         //   switch (attributeName) {
@@ -41,7 +44,8 @@ export class SheetView extends DialogBase {
         // })
     }
     static #handleKeydown = (evt) => {
-        debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
         if ('Escape' !== evt.key)
             return;
         evt.preventDefault();
@@ -49,7 +53,8 @@ export class SheetView extends DialogBase {
         evt.stopPropagation();
     };
     static #handleCancel = (evt) => {
-        debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();

package/generated/components/sidebar-toggle.js

@@ -1,14 +1,15 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { debounce, debug, onoff } from '../internal/utils';
+import { debounce, devFlags, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class SidebarToggle extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         const entry = {
             target: this,
@@ -18,7 +19,8 @@ export class SidebarToggle extends HTMLElement {
         _a.#handleMeasure([entry]);
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
         CleanupRegistry.unregister(this);
     }
@@ -28,7 +30,8 @@ export class SidebarToggle extends HTMLElement {
     }
     // This triggers on show/hide of any of sidebar-toggle elements
     static #handleMeasure(entry) {
-        debug(`${_a.name} ⚡️ measure`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
         const { target } = entry ?? {};
         if (!(target instanceof HTMLElement && target))
             return;
@@ -66,7 +69,8 @@ export class SidebarToggle extends HTMLElement {
         });
     }
     #handleClick({ target, type }) {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         if (!target?.closest('button'))

package/generated/components/sidebar-view.js

@@ -1,5 +1,5 @@
 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 SidebarView extends DialogBase {
     constructor() {
@@ -24,7 +24,8 @@ export class SidebarView extends DialogBase {
     }
     /** Autoclose on click outside. */
     static #handleClick = async ({ target, type }) => {
-        debug(`${SidebarView.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${SidebarView.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         if (target instanceof HTMLDialogElement && 'sidebar-view' === target.getAttribute('is'))

package/generated/components/sticky-container.js

@@ -1,16 +1,18 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        debug(`${StickyContainer.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ connect`);
         // CleanupRegistry.register(this, onoff('transitionend transitionstart transitioncancel', this.#handleTransitionrun as unknown as EventListener, this).on())
         CleanupRegistry.register(this, onoff('transitionrun', this.#handleTransitionrun, this).on());
     }
     disconnectedCallback() {
-        debug(`${StickyContainer.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {

package/generated/components/tab-bar.js

@@ -1,5 +1,5 @@
 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';
 /**
  * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
@@ -9,12 +9,14 @@ export class TabBar extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${TabBar.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ disconnect`);
         el.removeEventListener('click', TabBar.#handleClick);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        debug(`${TabBar.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ connect`);
         el.autofocus = true;
         // Snapshot.waitReadyFor(el).then((r) => {
         //   if (!r) return
@@ -31,7 +33,8 @@ export class TabBar extends DialogBase {
         // })
     }
     static #handleClick = async ({ target, type }) => {
-        debug(`${TabBar.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         if (target instanceof HTMLDialogElement && 'tab-bar' === target.getAttribute('is'))

package/generated/components/tab-item.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { TabView } from './tab-view';
 export class TabItem extends ButtonBase {
@@ -7,11 +7,13 @@ export class TabItem extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(btn) {
-        debug(`${TabItem.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(btn);
     }
     static polyfillConnectedCallback(btn) {
-        debug(`${TabItem.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ connect`);
         Object.assign(btn, {
             tabIndex: 0,
             ariaSelected: 'false',
@@ -31,7 +33,8 @@ export class TabItem extends ButtonBase {
         });
     }
     static #handleTabMoreStackAllowance = async (btn, evt) => {
-        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn.closest('tab-view');
         if (!tv)
             return;
@@ -40,7 +43,8 @@ export class TabItem extends ButtonBase {
         btn.hidden = 'bottom-bar' !== tv.tabBarPlacement;
     };
     static #handleTabRevealOrSwap = async (btn, evt) => {
-        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn?.closest('tab-view');
         if (!tv)
             return;
@@ -62,7 +66,8 @@ export class TabItem extends ButtonBase {
         }, 100);
     };
     static #handleClick = async (evt) => {
-        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const btn = evt.currentTarget instanceof HTMLElement && evt.currentTarget;
         if (!btn)
             return;
@@ -109,14 +114,16 @@ export class TabItem extends ButtonBase {
             for (const tab of tabs.reverse())
                 if (tv.selectedTab.includes(tab)) {
                     const eventType = 'tabroot';
-                    debug(`${TabItem.name} 💡 ${eventType}`);
+                    if (devFlags.debug)
+                        console.debug(`${TabItem.name} 💡 ${eventType}`);
                     tab?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
                     return; // skip rest no selection!
                 }
         }
         else if ('->' === dir) {
             const eventType = 'tabroot';
-            debug(`${TabItem.name} 💡 ${eventType}`);
+            if (devFlags.debug)
+                console.debug(`${TabItem.name} 💡 ${eventType}`);
             tabs.at(0)?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
         }
         // SECTION: finally, submit new tabs

package/generated/components/tab-view.js

@@ -2,7 +2,7 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { NavigationPath } from '../internal/class/navigation-path';
-import { $, cssTime, debounce, debug, frame, onoff, timeout } from '../internal/utils';
+import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
@@ -25,7 +25,8 @@ export class TabView extends HTMLElement {
         this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         this.#afterTabRevealDelay.cancel();
         this.#cssStyleObserver?.disconnect();
         CleanupRegistry.unregister(this);
@@ -37,7 +38,8 @@ export class TabView extends HTMLElement {
         return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--adaptable-tab-bar-placement-index'],
         });
@@ -91,11 +93,13 @@ export class TabView extends HTMLElement {
         this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
     };
     #handleTabViewPagereveal = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         void this.#syncBodyFace();
     };
     #handleStyleChange = () => {
-        debug(`${_a.name} ⚡️ style`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
         const style = self.getComputedStyle(this);
         const placement = style.getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
         newValue = TAB_BAR_PLACEMENTS.includes(placement) ? placement : 'bottom-bar';
@@ -110,7 +114,7 @@ export class TabView extends HTMLElement {
         }
     };
     // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   debug(`${TabView.name} ⚡️ ${evt?.type}`)
+    //   if (devFlags.debug) console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
     //   if (!evt.matches) return
     //   this.#handleStyleChange()
     //   // if (evt.matches) {
@@ -161,7 +165,8 @@ export class TabView extends HTMLElement {
     //   // }
     // }
     #handleAdaptableTabBarPlacementChange = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if ('bottom-bar' !== evt.detail.oldValue)
             return; // button triggers should happen, ONLY when going FROM bottom-bar TO anything else
         const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
@@ -230,7 +235,8 @@ export class TabView extends HTMLElement {
     #triggerToggleEvent = (evt) => {
         const eventType = 'tab-view:toggle';
         void this.#syncBodyFace();
-        debug(`${_a.name} 💡 ${eventType}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} 💡 ${eventType}`);
         this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
     };
     #syncBodyFace = async () => {

package/generated/components/table-view.js

@@ -2,7 +2,7 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, debug, listActive, onoff } from '../internal/utils';
+import { $, devFlags, listActive, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export class TableView extends HTMLElement {
     #styleObserver;
@@ -82,14 +82,16 @@ export class TableView extends HTMLElement {
         // )
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#styleObserver?.disconnect();
         this.#observers.unobserveAll();
         this.#compactToolbarItem = undefined;
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
         // console.log(999, this.#shadowRoot.querySelector('[part*=table-column-stack]'))
         this.#styleObserver = new CSSStyleObserver({
@@ -102,7 +104,8 @@ export class TableView extends HTMLElement {
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
     #handleColumnSlotchange = ({ 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();
@@ -111,7 +114,8 @@ export class TableView extends HTMLElement {
         this.#renderColumns([]);
     };
     #renderColumns = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
             this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
@@ -134,7 +138,8 @@ export class TableView extends HTMLElement {
     };
     #observers = new MutationObserverSet(this.#renderColumns);
     #handleStyleChange = () => {
-        debug(`${_a.name} ⚡️ style`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
         const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
         if (!target)
             return;

package/generated/components/text-field.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 { $, compareBigDecimals, debug, kebabCase, onoff, set } from '../internal/utils';
+import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -27,7 +27,8 @@ export class TextField extends FormAssociatedBase {
   </label>`));
     }
     #renderValidityMsgs = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -76,7 +77,8 @@ export class TextField 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 'keyboard-type':
                 switch (newValue) {
@@ -124,7 +126,7 @@ export class TextField extends FormAssociatedBase {
                 break;
             case 'text':
                 // if (this.#input) this.#input.value = newValue ?? ''
-                this.text = newValue ?? '';
+                // nothing happens //this.text = newValue ?? ''
                 break;
             case 'required':
                 this.#input?.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
@@ -147,14 +149,15 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 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" foreground="secondary"></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 el of this.#shadowRoot.querySelectorAll('input'))
@@ -197,7 +200,8 @@ export class TextField 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();
@@ -206,7 +210,8 @@ export class TextField extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleFocusin = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (evt.target === this)
             this.#input?.focus();
     };
@@ -237,7 +242,8 @@ export class TextField extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, 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;
@@ -340,7 +346,8 @@ export class TextField extends FormAssociatedBase {
         }
     };
     #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;
@@ -375,7 +382,8 @@ export class TextField extends FormAssociatedBase {
         }
     };
     #handleInputBlur = ({ type, target: input }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(input instanceof HTMLInputElement && input))
             return;
         if (0 === input.value.length)
@@ -386,7 +394,8 @@ export class TextField 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
@@ -468,7 +477,8 @@ export class TextField 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.#input);
     };
     setCustomValidity = (message) => {