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

package/generated/components/picker-view.js

@@ -1,17 +1,17 @@
 var _a;
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { $, ancestors, kebabCase, onoff } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: update`);
+    DEBUG && console.debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
         throw new Error('invalid view');
     const { component, page } = path;
@@ -23,8 +23,7 @@ const update = (path, node, overwrite = true) => {
         page.insertAdjacentElement(position, node);
 };
 const reflectSpawnedPage = (current, source) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: reflectSpawnedPage`);
+    DEBUG && console.debug(`PickerView: reflectSpawnedPage`);
     const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
     const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
     // pre replace list (always exists)
@@ -62,12 +61,10 @@ const reflectSpawnedPage = (current, source) => {
         oldSearch?.remove();
 };
 const extractTag = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractTag`);
+    DEBUG && console.debug(`PickerView: extractTag`);
     return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
 }, extractLabel = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractLabelFromGroup`);
+    DEBUG && console.debug(`PickerView: extractLabelFromGroup`);
     if (node instanceof Element)
         if (node instanceof HTMLOptionElement)
             return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || null;
@@ -77,16 +74,14 @@ const extractTag = (node) => {
         return node.title ?? node.value ?? null;
     // return node instanceof Element ? node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label') : (node.title ?? node.value ?? null)
 }, extractIcon = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractIcon`);
+    DEBUG && console.debug(`PickerView: extractIcon`);
     // return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null)
     if (node instanceof Element)
         return node.getAttribute('data-system-image');
     else
         return node.systemImage ?? null;
 }, extractSubtitle = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractSubtitle`);
+    DEBUG && console.debug(`PickerView: extractSubtitle`);
     if (node instanceof Element)
         return node.getAttribute('data-subtitle');
     else
@@ -171,9 +166,36 @@ export class PickerView extends FormAssociatedBase {
         };
     }
     #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #spawnPage`);
-        const body = $(html `<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
+        DEBUG && console.debug(`${_a.name} #spawnPage`);
+        const body = tag === 'sheet-view'
+            ? $(html `<dialog is="sheet-view">
+                <scroll-view>
+                  <v-stack placement="leading fill">
+                    <list-view preferred-expanded-style="inset"></list-view>
+                  </v-stack>
+                </scroll-view>
+                <tool-bar>
+                  <tool-bar-item slot="top-bar-leading">
+                    <button type="button" tabindex="0">
+                      <label-view system-image="x"></label-view>
+                    </button>
+                  </tool-bar-item>
+                </tool-bar>
+              </dialog>`, '>1')
+            : $(html `<body-view>
+                <scroll-view>
+                  <v-stack placement="leading fill">
+                    <list-view preferred-expanded-style="inset"></list-view>
+                  </v-stack>
+                </scroll-view>
+                <tool-bar>
+                  <tool-bar-item slot="top-bar-leading">
+                    <button type="button" tabindex="0">
+                      <label-view system-image="caret-left"></label-view>
+                    </button>
+                  </tool-bar-item>
+                </tool-bar>
+              </body-view>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
         if (title)
             sv?.setAttribute('navigation-inline-title', title);
         if (searchable) {
@@ -285,7 +307,7 @@ export class PickerView extends FormAssociatedBase {
             return;
         const groupMap = indexGroups(freshRoot);
         for (const el of this.#spawn.querySelectorAll('body-view')) {
-            const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
+            const depth = ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
             if (0 >= depth)
                 continue;
             const groupId = el.dataset.groupId;
@@ -302,8 +324,7 @@ export class PickerView extends FormAssociatedBase {
         }
     };
     #renderButtons(input) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #renderButtons`);
+        DEBUG && console.debug(`${_a.name} #renderButtons`);
         switch (input.mode) {
             case 'dictionary': {
                 const flattenDictionary = (tree) => {
@@ -455,18 +476,15 @@ export class PickerView extends FormAssociatedBase {
         this.#reflectSelectionOnCurrentValueLabel();
     }
     #renderDictionary = (dictionary) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
         this.#renderButtons({ mode: 'dictionary', source: dictionary });
     };
     #renderSlotted = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
         this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] });
     };
     #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        DEBUG && console.debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #lastRenderedStyle; //string | null
@@ -598,8 +616,7 @@ export class PickerView 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 this.constructor.ATTR.PLACEHOLDER:
             case this.constructor.ATTR.PLACEHOLDER_ICON:
@@ -646,15 +663,13 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#validityObservers.unobserveAll();
         this.#observers.unobserveAll();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('localechange', () => {
             this.#renderSlotted([]);
         }, I18n.on).on());
@@ -672,8 +687,7 @@ export class PickerView extends FormAssociatedBase {
         return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
     }
     #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
+        DEBUG && console.debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
         // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
@@ -714,8 +728,7 @@ export class PickerView extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
     #handleTriggerClick = async ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
@@ -730,8 +743,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handlePageBtnClick = async (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         evt.stopImmediatePropagation();
         evt.preventDefault();
         const { currentTarget: btn } = evt;
@@ -754,8 +766,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handleClick({ type, target }) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
@@ -767,8 +778,7 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm();
     }
     #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();
@@ -777,8 +787,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleListSlotchange = ({ 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();
@@ -787,8 +796,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionSpawnTag(node) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #wrapOptionSpawnTag`);
+        DEBUG && console.debug(`${_a.name} #wrapOptionSpawnTag`);
         const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<button type="button" tabindex="0" navigation-link>
@@ -826,8 +834,7 @@ export class PickerView extends FormAssociatedBase {
         return mount.firstElementChild; //btn
     }
     static #wrapOptionTag(node) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #wrapOptionTag`);
+        DEBUG && console.debug(`${_a.name} #wrapOptionTag`);
         const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<button type="button" tabindex="0" value="${tag}">
@@ -859,8 +866,7 @@ export class PickerView extends FormAssociatedBase {
         return mount.firstElementChild; //btn
     }
     static #wrapOptgroupTag(node) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #wrapOptgroupTag`);
+        DEBUG && console.debug(`${_a.name} #wrapOptgroupTag`);
         const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
@@ -893,8 +899,7 @@ export class PickerView extends FormAssociatedBase {
     // static #reflectButtons(nodes: Element[], container: Element): void
     // static #reflectButtons(nodes: Dictionary, container: Element): void
     static #reflectButtons(nodes, container) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectButtons`);
+        DEBUG && console.debug(`${_a.name} #reflectButtons`);
         for (const node of nodes)
             if (node instanceof Element)
                 switch (node.tagName) {
@@ -976,7 +981,7 @@ export class PickerView extends FormAssociatedBase {
             }
     }
     // #reflectPlaceholder(value: string | null) {
-    //   if (devFlags.debug) console.debug(`#reflectPlaceholder`)
+    //   DEBUG && console.debug(`#reflectPlaceholder`)
     // const input = this.#shadowRoot.querySelector('input')
     // if (input) {
     //   if (value) input.setAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER, value)
@@ -984,14 +989,12 @@ export class PickerView extends FormAssociatedBase {
     // }
     // }
     #reflectLabel(value) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectLabel`);
+        DEBUG && console.debug(`${_a.name} #reflectLabel`);
         queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectSelectionOnButtons`);
+        DEBUG && console.debug(`${_a.name} #reflectSelectionOnButtons`);
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
             const groupMap = indexGroups(this.#lastIndexedRoot);
@@ -1022,8 +1025,7 @@ export class PickerView extends FormAssociatedBase {
      * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
      */
     #reflectSelectionOnCurrentValueLabel() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
+        DEBUG && console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
         self.requestAnimationFrame(() => {
             switch (this.pickerStyle) {
                 case 'sheet':
@@ -1066,8 +1068,7 @@ export class PickerView extends FormAssociatedBase {
         });
     }
     #reflectTriggerHelp() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectTriggerHelp`);
+        DEBUG && console.debug(`${_a.name} #reflectTriggerHelp`);
         let trigger;
         switch (this.pickerStyle) {
             case 'sheet':
@@ -1122,8 +1123,7 @@ export class PickerView 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);
     };
     setCustomValidity = (message) => {

package/generated/components/plain-button.js

@@ -1,18 +1,17 @@
+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 { ButtonBase } from '../namespace-browser/base';
 export class PlainButton extends ButtonBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${PlainButton.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${PlainButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${PlainButton.name} ⚡️ connect`);
+        DEBUG && console.debug(`${PlainButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', PlainButton.#handleClick, el).on());
     }

package/generated/components/progress-view.js

@@ -1,7 +1,8 @@
 var _a;
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { $, devFlags } from '../internal/utils';
+import { $ } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 import { html } from '../tpl';
@@ -60,8 +61,7 @@ export class ProgressView extends HTMLElement {
         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 'label': {
                 const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
@@ -79,13 +79,11 @@ export class ProgressView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--progress-view-style-index'],
@@ -94,8 +92,7 @@ export class ProgressView extends HTMLElement {
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
     #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
+        DEBUG && console.debug(`${_a.name} ⚡️ style`);
         const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
         const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
         if (newValue === this.#progressViewStyle)
@@ -104,8 +101,7 @@ export class ProgressView extends HTMLElement {
         this.#render();
     };
     #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
+        DEBUG && console.debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
         if (this.#lastRenderedStyle === this.#progressViewStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.#progressViewStyle;

package/generated/components/screen-view.js

@@ -1,11 +1,10 @@
-import { devFlags } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { DialogBase } from '../namespace-browser/base';
 export class ScreenView extends DialogBase {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScreenView.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${ScreenView.name} ⚡️ disconnect`);
     }
 }

package/generated/components/scroll-view-proxy.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 /**
  * @summary A wrapper for {hv}-stacks
  */
@@ -7,11 +7,9 @@ export class ScrollViewProxy extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
+        DEBUG && console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
     }
 }

package/generated/components/scroll-view.js

@@ -1,8 +1,9 @@
 var _a;
 import { lifecycleObserver } from '../buses';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
+import { $, frame, onoff, slowHideShow } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
@@ -57,8 +58,7 @@ export class ScrollView extends HTMLElement {
         });
     }
     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 'navigation-inline-title':
                 this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
@@ -80,15 +80,13 @@ export class ScrollView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        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() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        DEBUG && console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff([
             // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
             { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
@@ -122,8 +120,7 @@ export class ScrollView extends HTMLElement {
         slowHideShow('largeinline' === `${comp}` ? 'show' : 'hide', title);
     };
     #handleScroll = ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
@@ -132,14 +129,12 @@ export class ScrollView extends HTMLElement {
         this.#lastScrollTop = target.scrollTop;
     };
     #handleScrollend = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.#isMidScroll)
             this.#isMidScroll = false;
     };
     #handleMeasure = (entry) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        DEBUG && console.debug(`${_a.name} ⚡️ measure`);
         if (0 === entry.contentRect.width + entry.contentRect.height)
             return;
         if (undefined === this.#beforeTabSwapLastScrolltop)
@@ -156,7 +151,7 @@ export class ScrollView extends HTMLElement {
         this.#beforeTabSwapLastScrolltop = undefined;
     };
     // #handleTabReveal = ({ type, target }: CustomEvent<TabDetail>) => {
-    //   if (devFlags.debug) console.debug(`${ScrollView.name} ⚡️ ${type}`)
+    //   DEBUG && console.debug(`${ScrollView.name} ⚡️ ${type}`)
     //   if (!(target instanceof HTMLElement)) return
     //   if (!target.contains(this)) return
     //   if (this.closest('[hidden]')) return
@@ -184,8 +179,7 @@ export class ScrollView extends HTMLElement {
     //   // })
     // }
     #handleTabBeforeswap = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (!target.contains(this))

package/generated/components/search-view.js

@@ -1,24 +1,22 @@
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { onoff, touchGlass } from '../internal/utils';
 import { InputBase } from '../namespace-browser/base';
 export class SearchView extends InputBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${SearchView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ connect`);
+        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 }]) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        DEBUG && console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLInputElement;
         if (!node)
             return;

package/generated/components/section-view.js

@@ -1,4 +1,5 @@
-import { $, devFlags } from '../internal/utils';
+import { DEBUG } from '../internal/flags.json' with { type: 'json' };
+import { $ } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
@@ -32,8 +33,7 @@ export class SectionView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        DEBUG && console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'header':
                 queryMorph('[slot=header]', html `<header slot="header">
@@ -52,13 +52,11 @@ export class SectionView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${SectionView.name} ⚡️ disconnect`);
         //
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ connect`);
+        DEBUG && console.debug(`${SectionView.name} ⚡️ connect`);
         //
     }
 }

package/generated/components/sheet-view.js

@@ -1,5 +1,6 @@
+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 { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that slides up over the current screen.
@@ -9,13 +10,11 @@ export class SheetView extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ disconnect`);
+        DEBUG && console.debug(`${SheetView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ connect`);
+        DEBUG && console.debug(`${SheetView.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'cancel', listener: this.#handleCancel },
             { types: 'keydown', listener: SheetView.#handleKeydown },
@@ -23,12 +22,10 @@ export class SheetView extends DialogBase {
         el.autofocus = true;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        DEBUG && console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
     }
     static #handleKeydown = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        DEBUG && console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
         if ('Escape' !== evt.key)
             return;
         evt.preventDefault();
@@ -36,8 +33,7 @@ export class SheetView extends DialogBase {
         evt.stopPropagation();
     };
     static #handleCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        DEBUG && console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();