@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/generated/components/toggle-view.js

@@ -0,0 +1,366 @@
+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 { $, 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
+ * @slot {HTMLOptionElement[]} validity-options
+ */
+export class ToggleView extends FormAssociatedBase {
+    static get observedAttributes() {
+        return [
+            'label',
+            'name',
+            'value',
+            /**
+             * @type {boolean}
+             */
+            'is-on',
+            /**
+             * @type {boolean}
+             */
+            'required',
+            /**
+             * @type {boolean}
+             */
+            'disabled',
+        ];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(html `<label part="root toggle-stack">
+        <div part="root toggle-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root toggle-input-stack">
+          <div part="root toggle-track" tabindex="0"></div>
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
+    }
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
+    #shadowRoot;
+    #customValidity = '';
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #track;
+    #value = 'on';
+    #isOn = false;
+    #didDrag = false;
+    #trackWidth = 0;
+    #dotSize = 0;
+    get #trackMinX() {
+        return 0;
+    }
+    get #trackMaxX() {
+        return this.#trackWidth - this.#dotSize;
+    }
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        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');
+    }
+    get #internals() {
+        return getInternals(this);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        CleanupRegistry.unregister(this, 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
+        this.#track = this.#shadowRoot.querySelector('[part*=toggle-track]') ?? undefined;
+        CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'keydown', listener: this.#handleTrackKeydown },
+            { types: 'click', listener: this.#handleTrackClick },
+            { types: 'pointerdown', listener: this.#handleTrackPointerdown },
+            { types: 'pointerup', listener: this.#handleTrackPointerup },
+            { types: 'pointercancel', listener: this.#handleTrackPointercancel },
+            { types: 'pointermove', listener: this.#handleTrackPointermove },
+            { types: 'lostpointercapture', listener: this.#handleTrackPointercancel },
+        ], this.#track).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'blur', listener: this.#handleWindowBlur },
+            { types: 'focus', listener: this.#handleWindowFocus },
+        ], self).on());
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'value':
+                this.value = String(newValue); // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(false);
+                break;
+            case 'is-on':
+                this.isOn = newValue !== null; // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(false);
+                break;
+            case 'required':
+                // this.#input?.setAttribute(name, newValue ?? '')
+                this.#sendValueToForm(false);
+                break;
+            case 'name':
+                this.#sendValueToForm(false);
+                break;
+            case 'label':
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
+                break;
+            case 'disabled':
+                for (const el of this.#shadowRoot.querySelectorAll('input'))
+                    el.toggleAttribute('disabled', !newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#track)
+            this.#resizeObserver.unobserve(this.#track);
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasAttribute('is-on'))
+            this.isOn = this.hasAttribute('is-on');
+        this.#sendValueToForm(false);
+        if (this.#track)
+            this.#resizeObserver.observe(this.#track);
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ clientX, clientY }) => this.#measurePointerIsOverDot(clientX, clientY) ?? false), this).on());
+    }
+    get toggleStyle() {
+        return toggleStyles.includes(this.getAttribute('toggle-style') ?? '') ? this.getAttribute('toggle-style') : 'switch';
+    }
+    get isOn() {
+        return this.#isOn;
+    }
+    set isOn(v) {
+        this.#isOn = Boolean(v);
+        this.#value = this.#isOn ? (this.getAttribute('value') ?? 'on') : null;
+        this.ariaChecked = `${this.#isOn}`;
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        this.#renderValidityMsgs([]);
+    };
+    #handleFocusin = ({ type, target }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (target === this)
+            this.#track?.focus();
+    };
+    #handleTrackClick = ({ type }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (this.#didDrag)
+            return (this.#didDrag = false);
+        this.#applyIsOnWithFlip(!this.isOn);
+        this.#sendValueToForm(true);
+    };
+    #measurePointerIsOverDot = (clientX, clientY) => {
+        if (!this.#track)
+            return;
+        const { left, top, height } = this.#track.getBoundingClientRect();
+        const dotLeft = left + parseFloat(self.getComputedStyle(this.#track, '::before').left);
+        const dotCenterX = dotLeft + this.#dotSize / 2;
+        const dotCenterY = top + height / 2;
+        return Math.hypot(clientX - dotCenterX, clientY - dotCenterY) <= this.#dotSize / 2;
+    };
+    get #baseX() {
+        return this.isOn ? this.#trackMaxX : this.#trackMinX;
+    }
+    #handleTrackPointerdown = ({ type, pointerId, clientX, clientY }) => {
+        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-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);
+    };
+    #handleTrackPointermove = ({ type, clientX }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#isDragging)
+            return;
+        this.#updateFromEvent(clientX);
+    };
+    #handleTrackPointerup = ({ type, pointerId }) => {
+        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');
+        this.#track?.releasePointerCapture(pointerId);
+        this.#settle();
+    };
+    #handleTrackPointercancel = ({ 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 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-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-translate-x'); // pure transform animation back to rest, inset untouched
+        this.#applyIsOnWithFlip(nextIsOn);
+        this.#sendValueToForm(true);
+    };
+    #handleTrackKeydown = (evt) => {
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (' ' !== evt.key)
+            return;
+        evt.preventDefault();
+        this.#applyIsOnWithFlip(!this.isOn);
+        this.#sendValueToForm(true);
+    };
+    #applyIsOnWithFlip = (nextIsOn) => {
+        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-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-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-translate-x'); // only transform animates from here — single source of motion
+        });
+    };
+    #sendValueToForm = (dispatchEvent = true) => {
+        // input.value has already been updated/synced !!
+        if (this.matches(':disabled'))
+            return this.setValidity({});
+        if (this.hasAttribute('required') && !this.isOn) {
+            this.setValidity({ valueMissing: true });
+        }
+        else
+            this.setValidity({});
+        const entries = new FormData();
+        if (this.value)
+            entries.append(this.name, this.value);
+        this.#internals.setFormValue(entries);
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('toggle:change', { detail: { value: this.value, isOn: this.isOn }, bubbles: true, composed: true }));
+    };
+    /**
+     * Form participation property
+     */
+    get name() {
+        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(v) {
+        this.#value = this.isOn ? String(v) : null;
+    }
+    setValidity = (flags, message, anchor) => {
+        // let msg
+        // if (message)
+        for (const k in flags) {
+            const key = k; // ✅ type-safe cast
+            if (true !== flags[key])
+                continue;
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
+                if (!el.matches('option'))
+                    continue;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
+                    break;
+                }
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
+                    break;
+                }
+            }
+        }
+        if (!message)
+            for (const k in flags) {
+                const key = k; // ✅ type-safe cast
+                if (true !== flags[key])
+                    continue;
+                message = kebabCase(key);
+                break;
+            }
+        debug(`${_a.name} ⚡️ validity-change`);
+        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#track);
+    };
+    setCustomValidity = (message) => {
+        this.#customValidity = message;
+        if (this.#customValidity)
+            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
+        else
+            this.#sendValueToForm(false);
+    };
+    formStateRestoreCallback(state, reason) {
+        this.value = state;
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
+        for (const el of this.#shadowRoot.querySelectorAll('input'))
+            el.toggleAttribute('disabled', !disabled);
+    }
+    formResetCallback() {
+        this.value = '';
+        this.#sendValueToForm(false);
+    }
+}
+_a = ToggleView;

package/generated/components/tool-bar-item-group.d.ts

@@ -1,5 +1,13 @@
+/**
+ * @summary A container view that groups items together in the toolbar or navigation bar.
+ */
 export declare class ToolBarItemGroup extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar-item-group': ToolBarItemGroup;
+    }
+}

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

@@ -1,11 +1,29 @@
-export class ToolBarItemGroup extends HTMLElement {
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ToolBarItemGroup_1;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { adaptiveSlot } from '../internal/decorators';
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view that groups items together in the toolbar or navigation bar.
+ */
+let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ connect`);
+        debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ disconnect`);
+        debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
     }
-}
+};
+ToolBarItemGroup = ToolBarItemGroup_1 = __decorate([
+    adaptiveSlot()
+], ToolBarItemGroup);
+export { ToolBarItemGroup };

package/generated/components/tool-bar-item.d.ts

@@ -1,5 +1,16 @@
+/**
+ * @summary A view placed in the toolbar or navigation bar.
+ */
 export declare class ToolBarItem extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
     constructor();
-    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar-item': ToolBarItem;
+    }
 }

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

@@ -1,19 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ToolBarItem_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
-export class ToolBarItem extends HTMLElement {
+import { adaptiveSlot } from '../internal/decorators';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary A view placed in the toolbar or navigation bar.
+ */
+let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
+    static get observedAttributes() {
+        return ['slot', 'data-previous-slot', 'title-key'];
+    }
+    #mutationObserver;
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'slot':
+            case 'data-previous-slot':
+            case 'title-key': {
+                this.#mutationObserver?.disconnect();
+                const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
+                if (['confirmation-action', 'cancellation-action'].includes(role))
+                    Snapshot.waitReady.then(() => {
+                        ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
+                        this.#mutationObserver = new MutationObserver((mutations) => {
+                            for (const { target } of mutations)
+                                if (target instanceof HTMLElement)
+                                    ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
+                        });
+                        this.#mutationObserver.observe(this, {
+                            childList: true,
+                        });
+                    });
+                break;
+            }
+        }
+    }
+    disconnectedCallback() {
+        debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (event) => {
-            if (event.target.closest('menu-view[open]'))
+        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;
+            if (target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());
     }
-    disconnectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
-}
+};
+ToolBarItem = ToolBarItem_1 = __decorate([
+    adaptiveSlot((el) => !el.closest('tool-bar-item-group'))
+], ToolBarItem);
+export { ToolBarItem };

package/generated/components/tool-bar.d.ts

@@ -1,3 +1,17 @@
+/**
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
+ *
+ * @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
+ * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action — The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action — The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot top-bar-leading — Places the item in the leading edge of the top bar
+ * @slot top-bar-principal — Places the item in the middle of the top bar
+ * @slot top-bar-trailing — Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading — Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal — Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing — Places the item in the trailing edge of the bottom bar
+ */
 export declare class ToolBar extends HTMLElement {
     #private;
     static get template(): DocumentFragment;
@@ -5,3 +19,8 @@ export declare class ToolBar extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-bar': ToolBar;
+    }
+}

package/generated/components/tool-bar.js

@@ -1,49 +1,64 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
+/**
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
+ *
+ * @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
+ * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action — The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action — The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot top-bar-leading — Places the item in the leading edge of the top bar
+ * @slot top-bar-principal — Places the item in the middle of the top bar
+ * @slot top-bar-trailing — Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading — Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal — Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing — Places the item in the trailing edge of the bottom bar
+ */
 export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
         // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
-        return (this.#template ??= $(String.raw `
-    <div part="root top-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="top-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="top-bar-trailing"></slot>
-    </div>
-  </div>
-  <div part="root bottom-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="bottom-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="bottom-bar-trailing"></slot>
-    </div>
-  </div>`, ''));
+        return (this.#template ??= $(html `<div part="root top-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="cancellation-action"></slot>
+            <slot name="destructive-action"></slot>
+            <slot name="top-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="top-bar-trailing"></slot>
+            <slot name="primary-action"></slot>
+            <slot name="confirmation-action"></slot>
+          </div>
+        </div>
+        <div part="root bottom-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="bottom-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="bottom-bar-trailing"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     get #scrollView() {
-        return this.parentElement?.querySelector(':scope > scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
+        return this.parentElement?.querySelector(':scope>scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
     }
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // })
     }
     connectedCallback() {
-        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"]`))
@@ -51,11 +66,11 @@ export class ToolBar extends HTMLElement {
         // })
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
     }
     #measureStacks(entry) {
-        console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (this.closest('[hidden]'))
             return;
         const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';
@@ -63,7 +78,7 @@ export class ToolBar extends HTMLElement {
             'top-bar': 'navbar',
             'bottom-bar': 'toolbar', //'bottombar',
         };
-        const { contentRect, target } = entry;
+        const { contentRect: { width }, target, } = entry;
         const parentPart = target.parentElement?.part.contains('top-bar') ? 'top-bar' : target.parentElement?.part.contains('bottom-bar') ? 'bottom-bar' : null;
         if (!parentPart)
             return;
@@ -71,7 +86,7 @@ export class ToolBar extends HTMLElement {
         if (!side)
             return;
         const prop = `--${parentMap[parentPart]}-padding-${side}`;
-        $.prop(prop, `${Math.round(contentRect.width)}px`, this.#scrollView); //;(this.#scrollView as HTMLElement)?.style?.setProperty(prop, `${Math.round(contentRect.width)}px`)
+        this.#scrollView?.style?.setProperty(prop, `${Math.round(width)}px`); // $.prop(prop, `${Math.round(width)}px`, this.#scrollView) //
     }
 }
 _a = ToolBar;