@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

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, devFlags, frame, onoff, timeout } from '../internal/utils';
+import { cssTime, debounce, debug, frame, onoff, siblings, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
@@ -29,8 +29,7 @@ export class TabView extends HTMLElement {
         this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#afterTabRevealDelay.cancel();
         this.#cssStyleObserver?.disconnect();
         CleanupRegistry.unregister(this);
@@ -39,11 +38,15 @@ export class TabView extends HTMLElement {
         return this.#cachedAdaptableTabBarPlacement;
     }
     get moreTab() {
-        return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
+        try {
+            return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
+        }
+        catch {
+            return this.querySelector(':scope>navigation-stack:has(> navigation-stack)') ?? this.querySelector(':scope>navigation-stack:has(> navigation-split-view)');
+        }
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--adaptable-tab-bar-placement-index'],
         });
@@ -54,10 +57,7 @@ export class TabView extends HTMLElement {
             { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
             { types: 'tab-view:adaptable-tab-bar-placement-change', listener: this.#handleAdaptableTabBarPlacementChange },
             { types: 'pagereveal', listener: this.#handleTabViewPagereveal },
-            {
-                types: 'click',
-                listener: this.#handleSummaryClick,
-            },
+            { types: 'click', listener: this.#handleSummaryClick },
         ], this).on());
     }
     #handleSummaryClick = ({ target }) => {
@@ -66,7 +66,7 @@ export class TabView extends HTMLElement {
         const summary = target.closest('summary');
         if (!summary)
             return;
-        if (0 === $.siblings('[aria-selected=true]', summary).length)
+        if (0 === siblings('[aria-selected=true]', summary).length)
             return;
         if (!summary.closest('scroll-view')?.matches('tab-view > [is=sidebar-view] > scroll-view'))
             return;
@@ -79,13 +79,11 @@ 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) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         void this.#syncBodyFace();
     };
     #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
+        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';
@@ -99,10 +97,9 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    #handleAdaptableTabBarPlacementChange = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if ('bottom-bar' !== evt.detail.oldValue)
+    #handleAdaptableTabBarPlacementChange = ({ type, detail }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if ('bottom-bar' !== 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;
         if (innerSelection) {
@@ -156,12 +153,12 @@ export class TabView extends HTMLElement {
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = (evt) => {
+    #addAnimations = ({ detail }) => {
         this.setAttribute('js-aftertabreveal', '');
         // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, evt.detail.ms);
+        }, detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);
@@ -169,8 +166,7 @@ export class TabView extends HTMLElement {
     #triggerToggleEvent = (evt) => {
         const eventType = 'tab-view:toggle';
         void this.#syncBodyFace();
-        if (devFlags.debug)
-            console.debug(`${_a.name} 💡 ${eventType}`);
+        debug(`${_a.name} 💡 ${eventType}`);
         this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
     };
     #syncBodyFace = async () => {

package/generated/components/table-view.d.ts

@@ -3,7 +3,7 @@
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header-leading
  * @slot header-principal
  * @slot header-trailing

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 { $, devFlags, listActive, onoff } from '../internal/utils';
+import { $, debug, listActive, onoff } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 import { html } from '../tpl';
@@ -11,7 +11,7 @@ import { html } from '../tpl';
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header-leading
  * @slot header-principal
  * @slot header-trailing
@@ -68,16 +68,14 @@ export class TableView extends HTMLElement {
         this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#styleObserver?.disconnect();
         this.#observers.unobserveAll();
         this.#compactToolbarItem = undefined;
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
         this.#styleObserver = new CSSStyleObserver({
             properties: ['--adaptable-table-style-index'],
@@ -89,8 +87,7 @@ export class TableView extends HTMLElement {
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
     #handleColumnSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -99,8 +96,7 @@ export class TableView extends HTMLElement {
         this.#renderColumns([]);
     };
     #renderColumns = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
             this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
@@ -123,8 +119,7 @@ export class TableView extends HTMLElement {
     };
     #observers = new MutationObserverSet(this.#renderColumns);
     #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
+        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, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { $, compareBigDecimals, debug, kebabCase, onoff, set } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
@@ -58,8 +58,7 @@ export class TextField extends FormAssociatedBase {
       </label>`));
     }
     #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -96,8 +95,7 @@ export class TextField extends FormAssociatedBase {
         }, I18n.on).on());
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'keyboard-type':
                 switch (newValue) {
@@ -224,8 +222,7 @@ export class TextField extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -234,8 +231,7 @@ export class TextField extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleFocusin = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (evt.target === this)
             this.#input?.focus();
     };
@@ -266,8 +262,7 @@ export class TextField extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -370,8 +365,7 @@ export class TextField extends FormAssociatedBase {
         }
     };
     #handleInputBeforeinput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -406,8 +400,7 @@ export class TextField extends FormAssociatedBase {
         }
     };
     #handleInputBlur = ({ type, target: input }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(input instanceof HTMLInputElement))
             return;
         if (0 === input.value.length)
@@ -418,8 +411,7 @@ export class TextField extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -497,8 +489,7 @@ export class TextField extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
     };
     setCustomValidity = (message) => {

package/generated/components/text-view.d.ts

@@ -0,0 +1,11 @@
+export declare class TextView extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'text-view': TextView;
+    }
+}

package/generated/components/text-view.js

@@ -0,0 +1,16 @@
+import { debug } from '../internal/utils';
+export class TextView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${TextView.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${TextView.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${TextView.name} ⚡️ attr-change [${name}]`);
+        //
+    }
+}

package/generated/components/toggle-view.d.ts

@@ -4,6 +4,8 @@ export type ToggleStyle = (typeof toggleStyles)[number];
 /**
  * @summary A control that switches between on and off states.
  *
+ * @example <toggle-view label="Custom Label"></toggle-view> — Creates a toggle that displays a custom label
+ *
  * @fires toggle:change — User toggled the control
  *
  * @slot label

package/generated/components/toggle-view.js

@@ -2,13 +2,15 @@ var _a;
 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 { $, devFlags, kebabCase, onoff, touchGlass } from '../internal/utils';
+import { $, debug, kebabCase, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const toggleStyles = ['switch', 'button'];
 /**
  * @summary A control that switches between on and off states.
  *
+ * @example <toggle-view label="Custom Label"></toggle-view> — Creates a toggle that displays a custom label
+ *
  * @fires toggle:change — User toggled the control
  *
  * @slot label
@@ -47,8 +49,7 @@ export class ToggleView extends FormAssociatedBase {
       </label>`));
     }
     #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -68,14 +69,14 @@ export class ToggleView extends FormAssociatedBase {
         return this.#trackWidth - this.#dotSize;
     }
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (!(target instanceof HTMLElement))
             return;
         this.#trackWidth = borderBoxSize.at(0)?.inlineSize ?? 0;
         this.#dotSize = borderBoxSize.at(0)?.blockSize ?? 0;
     };
     #resizeObserver = new ResizeObserver(this.#handleMeasure);
+    #dragOffsetX = 0;
     get #isDragging() {
         return '0ms' === this.#track?.style.getPropertyValue('--toggle--dot-transition-duration');
     }
@@ -104,11 +105,13 @@ export class ToggleView extends FormAssociatedBase {
             { types: 'pointermove', listener: this.#handleTrackPointermove },
             { types: 'lostpointercapture', listener: this.#handleTrackPointercancel },
         ], this.#track).on());
-        CleanupRegistry.register(this, onoff([{ types: 'blur', listener: this.#handleWindowBlur }], self).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'blur', listener: this.#handleWindowBlur },
+            { types: 'focus', listener: this.#handleWindowFocus },
+        ], self).on());
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'value':
                 this.value = String(newValue); // this.#input?.setAttribute('checked', newValue ?? '')
@@ -161,8 +164,7 @@ export class ToggleView extends FormAssociatedBase {
         this.ariaChecked = `${this.#isOn}`;
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -170,14 +172,12 @@ export class ToggleView extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleFocusin = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (target === this)
             this.#track?.focus();
     };
     #handleTrackClick = ({ type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (this.#didDrag)
             return (this.#didDrag = false);
         this.#applyIsOnWithFlip(!this.isOn);
@@ -192,35 +192,29 @@ export class ToggleView extends FormAssociatedBase {
         const dotCenterY = top + height / 2;
         return Math.hypot(clientX - dotCenterX, clientY - dotCenterY) <= this.#dotSize / 2;
     };
-    #dragOffsetX = 0;
     get #baseX() {
         return this.isOn ? this.#trackMaxX : this.#trackMinX;
     }
     #handleTrackPointerdown = ({ type, pointerId, clientX, clientY }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#track)
             return;
         if (!this.#measurePointerIsOverDot(clientX, clientY))
             return; // ignore taps elsewhere on the track
         this.#didDrag = true; // dot was engaged — settle() will own the outcome, click must be swallowed
-        const currentDelta = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0;
-        const currentAbsoluteX = this.#baseX + currentDelta;
+        const currentDelta = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-translate-x')) || 0, currentAbsoluteX = this.#baseX + currentDelta;
         this.#dragOffsetX = clientX - this.#track.getBoundingClientRect().left - currentAbsoluteX;
         this.#track.style.setProperty('--toggle--dot-transition-duration', '0ms');
         this.#track.setPointerCapture(pointerId);
-        // this.#updateFromEvent(clientX)
     };
     #handleTrackPointermove = ({ type, clientX }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isDragging)
             return;
         this.#updateFromEvent(clientX);
     };
     #handleTrackPointerup = ({ type, pointerId }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isDragging)
             return; // pointerdown never engaged (missed the dot) — plain click, nothing to settle
         this.#track?.style.removeProperty('--toggle--dot-transition-duration');
@@ -228,40 +222,43 @@ export class ToggleView extends FormAssociatedBase {
         this.#settle();
     };
     #handleTrackPointercancel = ({ type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isDragging)
             return; // already settled via pointerup, or nothing to settle
         this.#track?.style.removeProperty('--toggle--dot-transition-duration');
         this.#settle();
     };
     #handleWindowBlur = () => {
+        this.toggleAttribute('js-window-inactive', true);
         if (!this.#isDragging)
             return;
         this.#track?.style.removeProperty('--toggle--dot-transition-duration');
         this.#settle();
     };
+    #handleWindowFocus = async () => {
+        this.toggleAttribute('js-window-inactive', false);
+    };
     #updateFromEvent = (clientX) => {
         if (!this.#track)
             return;
         const { left } = this.#track.getBoundingClientRect();
-        const absoluteX = Math.min(Math.max(clientX - left - this.#dragOffsetX, this.#trackMinX), this.#trackMaxX);
-        this.#track.style.setProperty('--toggle--dot-x', `${Math.round(absoluteX - this.#baseX)}px`);
+        const scaleShiftStart = this.#isOn ? 5 : 0, scaleShiftEnd = this.#isOn ? 0 : 4;
+        const absoluteX = Math.min(Math.max(clientX - left - this.#dragOffsetX, this.#trackMinX + scaleShiftStart), this.#trackMaxX - scaleShiftEnd);
+        this.#track.style.setProperty('--toggle--dot-translate-x', `${Math.round(absoluteX - this.#baseX)}px`);
     };
     #settle = () => {
         if (!this.#track)
             return;
-        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0;
+        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-translate-x')) || 0;
         const absoluteX = this.#baseX + deltaX;
         const nextIsOn = absoluteX > this.#trackMaxX / 2;
         if (nextIsOn === this.isOn)
-            return this.#track.style.removeProperty('--toggle--dot-x'); // pure transform animation back to rest, inset untouched
+            return this.#track.style.removeProperty('--toggle--dot-translate-x'); // pure transform animation back to rest, inset untouched
         this.#applyIsOnWithFlip(nextIsOn);
         this.#sendValueToForm(true);
     };
     #handleTrackKeydown = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (' ' !== evt.key)
             return;
         evt.preventDefault();
@@ -272,16 +269,16 @@ export class ToggleView extends FormAssociatedBase {
         if (!this.#track || nextIsOn === this.isOn)
             return;
         // capture current visual position under the OLD base, before flipping state
-        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-x')) || 0, oldAbsoluteX = this.#baseX + deltaX;
+        const deltaX = parseFloat(self.getComputedStyle(this.#track).getPropertyValue('--toggle--dot-translate-x')) || 0, oldAbsoluteX = this.#baseX + deltaX;
         this.isOn = nextIsOn; // changes --toggle--dot-inset-inline-start/-end via aria-checked
         const compensationX = oldAbsoluteX - this.#baseX; // baseX now reflects the NEW state
         // make inset + transform jump together, instantly, so nothing is visibly out of sync
         this.#track.style.setProperty('--toggle--dot-transition-duration', '0ms');
-        this.#track.style.setProperty('--toggle--dot-x', `${Math.round(compensationX)}px`);
+        this.#track.style.setProperty('--toggle--dot-translate-x', `${Math.round(compensationX)}px`);
         void this.#track.offsetWidth; // force reflow so the instant jump is committed before re-enabling transitions
         this.#track.style.removeProperty('--toggle--dot-transition-duration');
         self.requestAnimationFrame(() => {
-            this.#track?.style.removeProperty('--toggle--dot-x'); // only transform animates from here — single source of motion
+            this.#track?.style.removeProperty('--toggle--dot-translate-x'); // only transform animates from here — single source of motion
         });
     };
     #sendValueToForm = (dispatchEvent = true) => {
@@ -341,8 +338,7 @@ export class ToggleView extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#track);
     };
     setCustomValidity = (message) => {

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

@@ -7,7 +7,7 @@ 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 { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A container view that groups items together in the toolbar or navigation bar.
  */
@@ -16,12 +16,10 @@ let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLE
         super();
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
+        debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
+        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 { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * @summary A view placed in the toolbar or navigation bar.
@@ -21,8 +21,7 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'slot':
             case 'data-previous-slot':
@@ -46,14 +45,12 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
         this.#mutationObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ToolBarItem_1.name} ⚡️ connect`);
+        debug(`${ToolBarItem_1.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
             if (!(target instanceof HTMLElement))
                 return true;

package/generated/components/tool-bar.js

@@ -1,6 +1,6 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
@@ -58,8 +58,7 @@ export class ToolBar extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        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"]`))
@@ -67,13 +66,11 @@ export class ToolBar extends HTMLElement {
         // })
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
     }
     #measureStacks(entry) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (this.closest('[hidden]'))
             return;
         const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';

package/generated/components/v-divider.d.ts

@@ -0,0 +1,11 @@
+export declare class VDivider extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'v-divider': VDivider;
+    }
+}

package/generated/components/v-divider.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+export class VDivider extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${VDivider.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${VDivider.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${VDivider.name} ⚡️ attr-change [${name}]`);
+    }
+}