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

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,16 +200,18 @@ 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();
         this.#validityObservers.syncObservations(assigned, ['value', 'label']);
-        if (0 < assigned.length)
-            this.#renderValidityMsgs([]);
+        // if (0 < assigned.length)
+        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) => {

package/generated/components/tool-bar-item-group.js

@@ -7,16 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var ToolBarItemGroup_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
-import { debug } from '../internal/utils';
+import { devFlags } from '../internal/utils';
 let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
 };

package/generated/components/tool-bar-item.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var ToolBarItem_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
-import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
@@ -18,12 +18,14 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
         this.#mutationObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${ToolBarItem_1.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
             if (!(target instanceof HTMLElement && target))
                 return true;
@@ -33,7 +35,8 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
         }), this).on());
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'slot':
             case 'data-previous-slot':

package/generated/components/tool-bar.js

@@ -1,6 +1,6 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, debug } from '../internal/utils';
+import { $, devFlags } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
  * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
@@ -56,7 +56,8 @@ export class ToolBar extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         // NOTE: wait for config
         // Snapshot.waitReady.then(() => {
         for (const el of this.#shadowRoot.querySelectorAll(`[part*="toolbar-leading-stack"],[part*="toolbar-trailing-stack"]`))
@@ -64,11 +65,13 @@ export class ToolBar extends HTMLElement {
         // })
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
     }
     #measureStacks(entry) {
-        debug(`${_a.name} ⚡️ measure`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
         if (this.closest('[hidden]'))
             return;
         const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';

package/generated/components/v-keyboard.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, debug, frame, onoff, sleep } from '../internal/utils';
+import { $, devFlags, frame, onoff, sleep } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
@@ -22,11 +22,13 @@ export class VKeyboard extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
         CleanupRegistry.register(this, onoff([
             { types: 'scroll', listener: this.#handleWindowScroll },
@@ -58,13 +60,15 @@ export class VKeyboard extends HTMLElement {
         self.scrollTo(0, 0);
     };
     #handleWindowOrientationchange = async () => {
-        debug(`${_a.name} ⚡️ orientationchange`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ orientationchange`);
         if (!(await frame(this)))
             return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
         this.#ifKeyboardScrollIntoActiveElement();
     };
     #handleBodyFocusin = async () => {
-        debug(`${_a.name} ⚡️ focusin`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ focusin`);
         await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
         if (!this.isConnected)
             return;

package/generated/components/v-stack.js

@@ -1,4 +1,4 @@
-import { debug } from '../internal/utils';
+import { devFlags } from '../internal/utils';
 /**
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
@@ -9,9 +9,11 @@ export class VStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        debug(`${VStack.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${VStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        debug(`${VStack.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${VStack.name} ⚡️ disconnect`);
     }
 }

package/generated/css/index.css

@@ -985,7 +985,8 @@
     grid-column: 1/-1;
     grid-row: 1/-1;
   }
-  :where(navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > scroll-view, navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > scroll-view,
+  :where(navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > scroll-view,
+  navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > scroll-view,
   navigation-stack:has(> body-view) > scroll-view,
   navigation-stack:has(> body-view) > [is=sidebar-view] > scroll-view,
   navigation-split-view:has(> body-view) > scroll-view,
@@ -996,7 +997,10 @@
   body-view:has(> body-view) > [is=sidebar-view] > scroll-view) {
     --scroll-view-translate: translateX(var(--view-transition-leading-x));
   }
-  :where(navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > tool-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > tool-bar > tool-bar-item-group, navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > tool-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > tool-bar > tool-bar-item-group,
+  :where(navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > tool-bar > tool-bar-item,
+  navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > tool-bar > tool-bar-item-group,
+  navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > tool-bar > tool-bar-item,
+  navigation-stack:has(> navigation-stack:not([hidden]), > navigation-split-view:not([hidden])) > [is=sidebar-view] > tool-bar > tool-bar-item-group,
   navigation-stack:has(> body-view) > tool-bar > tool-bar-item,
   navigation-stack:has(> body-view) > tool-bar > tool-bar-item-group,
   navigation-stack:has(> body-view) > [is=sidebar-view] > tool-bar > tool-bar-item,

package/generated/events/picker-view.d.ts

@@ -3,6 +3,7 @@ export type PickerSelectionDetail = {
 };
 export type PickerSearchableDetail = {
     element: HTMLElement;
+    search: string;
 };
 declare global {
     interface HTMLElementEventMap {

package/generated/internal/class/css-style-observer.js

@@ -1,5 +1,5 @@
 var _a;
-import { debug, onoff } from '../../internal/utils';
+import { devFlags, onoff } from '../../internal/utils';
 export class CSSStyleObserver {
     #cleanups;
     #options;
@@ -16,7 +16,8 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/class/form-associated-base.js

@@ -1,4 +1,4 @@
-import { debug } from '../utils';
+import { devFlags } from '../utils';
 import { CleanupRegistry } from './cleanup-registry';
 const internals = new WeakMap();
 // const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
@@ -11,14 +11,14 @@ export function getInternals(instance) {
 }
 // export function makeSlotchangeHandler(t: FormAssociatedBase) {
 //   const handleSlotchange = ({ type, target: slot }: Event) => {
-//       debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
+//       if (devFlags.debug) console.debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
 //       if (!(slot instanceof HTMLSlotElement && slot)) return
 //       const assigned = slot.assignedElements({ flatten: true })
 //       observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
 //       if (0 < assigned.length) handleTagMutation()
 //     },
 //     handleTagMutation = (entry?: MutationRecord) => {
-//       debug(`${handleTagMutation.name} ⚡️ mutation`)
+//       if (devFlags.debug) console.debug(`${handleTagMutation.name} ⚡️ mutation`)
 //       t.setValidity(t.validity, t.validationMessage)
 //     }
 //   return [{ types: 'slotchange', listener: handleSlotchange }]
@@ -33,12 +33,14 @@ export class FormAssociatedBase extends HTMLElement {
         // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {
-        debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         // observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
     }
     connectedCallback() {
-        debug(`${FormAssociatedBase.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
     }
     get type() {
         return this.localName;

package/generated/internal/class/navigation-view.js

@@ -1,7 +1,7 @@
 var _a;
 import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { debug, frame, onoff } from '../utils';
+import { devFlags, frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
         return ['hidden'];
@@ -56,7 +56,8 @@ export class NavigationView extends HTMLElement {
                     // consume it (important so it doesn’t leak to next change)
                     this.#recentBefore = undefined;
                 }
-                debug(`${_a.name} 💡 ${eventType}`);
+                if (devFlags.debug)
+                    console.debug(`${_a.name} 💡 ${eventType}`);
                 frame(this).then(() => {
                     // if (!r) return
                     target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
@@ -65,7 +66,8 @@ export class NavigationView extends HTMLElement {
         }
     }
     #handleBeforeTabRevealOrSwap = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.id !== evt.detail?.tag)
             return;
         this.#recentBefore = {

package/generated/internal/decorators/adaptive-slot.js

@@ -1,9 +1,10 @@
 import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
-import { debug, onoff } from '../utils';
+import { devFlags, onoff } from '../utils';
 export default function (filter) {
     const handleMediaChange = (el, { type, matches }) => {
-        debug(`${el.localName} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${el.localName} ⚡️ ${type}`);
         if (matches) {
             if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
                 return;
@@ -22,7 +23,8 @@ export default function (filter) {
     return function (Base, _context) {
         const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
         Base.prototype.connectedCallback = function () {
-            console.debug(`decorator:[${this.localName}] ⚡️ connect`);
+            if (devFlags.debug)
+                console.debug(`decorator:[${this.localName}] ⚡️ connect`);
             originalConnected?.call(this);
             if (filter && !filter(this))
                 return;
@@ -39,7 +41,8 @@ export default function (filter) {
             });
         };
         Base.prototype.disconnectedCallback = function () {
-            console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
+            if (devFlags.debug)
+                console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
             originalDisconnected?.call(this);
             CleanupRegistry.unregister(this, 'adaptive-slot');
         };

package/generated/internal/privateNamespace.js

@@ -1,5 +1,5 @@
 import { NavigationPath } from '../internal/class/navigation-path';
-import { debug } from '../internal/utils';
+import { devFlags } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export function queryInsertPosition(frame) {
     if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
@@ -18,7 +18,8 @@ const cleanup = (lm, type) => {
         el.classList.remove(...arr);
 };
 export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
-    debug(`startViewTransition (${type})`, target);
+    if (devFlags.debug)
+        console.debug(`startViewTransition (${type})`, target);
     if (!(target instanceof HTMLElement))
         throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
     if (!['forwards', 'backwards', 'reload'].includes(type))
@@ -57,9 +58,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         // dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
         // if ('DIALOG' === newHost?.tagName) {
         //   ;(newHost as HTMLDialogElement).showModal()
-        //   debug(`⚡️ view-transition-start (${type})`)
+        //   if (devFlags.debug) console.debug(`⚡️ view-transition-start (${type})`)
         //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
-        //   debug(`⚡️ view-transition-end (${type})`)
+        //   if (devFlags.debug) console.debug(`⚡️ view-transition-end (${type})`)
         //   return
         // }
         // purge
@@ -82,14 +83,18 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if (0 < modalViews.length) {
             for await (const el of modalViews)
                 el.showModal();
-            debug(`⚡️ view-dialog-transition-start (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
-            debug(`⚡️ view-dialog-transition-end (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-end (${type})`);
         }
         else {
-            debug(`⚡️ view-transition-start (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-transition-start (${type})`);
             await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-            debug(`⚡️ view-transition-end (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-transition-end (${type})`);
         }
         if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
             return;
@@ -110,9 +115,11 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if ('DIALOG' === from.component?.tagName) {
             from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
             from.component.close();
-            debug(`⚡️ view-dialog-transition-start (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
-            debug(`⚡️ view-dialog-transition-end (${type})`);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-end (${type})`);
             if (from.component.matches('[open]'))
                 return;
             await updateCallback();
@@ -120,7 +127,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         }
         const to = [...from.parents()].at(0)?.hydrate(); //closestBody(oldPath.component?.parentElement ?? undefined)
         if (!to)
-            return debug('Can not go backwards.'); // nothing to go back to
+            return console.debug('Can not go backwards.'); // nothing to go back to
         const tv = to.body?.closest('tab-view');
         if (tv && to.body?.matches('tab-view>navigation-stack:has(> navigation-stack,> navigation-split-view)>:scope'))
             if ('bottom-bar' !== tv.tabBarPlacement)
@@ -147,9 +154,11 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         for (const el of inbetweenModals)
             el.close(); // close old inbetween modals
         // capture trans
-        debug(`⚡️ view-transition-start (${type})`);
+        if (devFlags.debug)
+            console.debug(`⚡️ view-transition-start (${type})`);
         await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-        debug(`⚡️ view-transition-end (${type})`);
+        if (devFlags.debug)
+            console.debug(`⚡️ view-transition-end (${type})`);
         if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;
         cleanup(root);

package/generated/internal/utils/dev-flags.d.ts

@@ -0,0 +1,3 @@
+export default class {
+    static get debug(): boolean;
+}

package/generated/internal/utils/dev-flags.js

@@ -0,0 +1,5 @@
+export default class {
+    static get debug() {
+        return false;
+    }
+}

package/generated/internal/utils/index.d.ts

@@ -4,7 +4,7 @@ export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
-export { default as debug } from './debug';
+export { default as devFlags } from './dev-flags';
 export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
 export { default as isInside } from './is-inside';

package/generated/internal/utils/index.js

@@ -6,7 +6,7 @@ export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
-export { default as debug } from './debug';
+export { default as devFlags } from './dev-flags';
 export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
 export { default as isInside } from './is-inside';

package/generated/snapshot/index.js

@@ -1,4 +1,4 @@
-import { debug, onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
@@ -45,10 +45,12 @@ export class Snapshot {
         const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
         this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
         this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
-        debug(this.#config);
+        if (devFlags.debug)
+            console.debug(this.#config);
     }
     static #handleMediaChange = ({ type, matches, media }, kind) => {
-        debug(`${Snapshot.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${Snapshot.name} ⚡️ ${type}`);
         this.#breakpoints?.set('fine_dialog_sheet', matches);
         this.on.dispatchEvent(new MediaQueryListEvent(kind, {
             matches,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.37",
+  "version": "0.0.0-dev.39",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/base/_layout.scss

@@ -18,7 +18,6 @@
     }
 
     :where(& > *:not([slot])) {
-      // & > *:not([slot]) {
       @include mixins.span-all;
     }
   }
@@ -29,8 +28,8 @@
   dialog:has(> body-view),
   // body-view:has(> dialog),
   body-view:has(> body-view) {
-    & > scroll-view,
-    & > [is='sidebar-view'] > scroll-view {
+    > scroll-view,
+    > [is='sidebar-view'] > scroll-view {
       :where(&) {
         --scroll-view-translate: translateX(var(--view-transition-leading-x));
       }
@@ -44,10 +43,10 @@
     // & > [is='sidebar-view'] > bottom-bar > tool-bar-item,
     // & > [is='sidebar-view'] > top-bar > tool-bar-item-group,
     // & > [is='sidebar-view'] > bottom-bar > tool-bar-item-group {
-    & > tool-bar > tool-bar-item,
-    & > tool-bar > tool-bar-item-group,
-    & > [is='sidebar-view'] > tool-bar > tool-bar-item,
-    & > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
+    > tool-bar > tool-bar-item,
+    > tool-bar > tool-bar-item-group,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
       :where(&) {
         @include mixins.vt-toolbar-cell-offscreen-keyframe;
       }

package/generated/internal/utils/debug.d.ts

@@ -1 +0,0 @@
-export default function debug(...data: any[]): void;

package/generated/internal/utils/debug.js

@@ -1,3 +0,0 @@
-export default function debug(...data) {
-    return console.debug(...data); //console.debug('%c swift-wc', 'color:hsl(200,70%,45%);font-weight:600', ...data)
-}