@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.40

package/generated/components/text-field.js

@@ -0,0 +1,503 @@
+var _a;
+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';
+const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export class TextField extends FormAssociatedBase {
+    static get observedAttributes() {
+        return ['prompt', 'minimum', 'maximum', 'min-length', 'max-length', 'label', 'name', 'text', 'text-input-autocapitalization', 'disable-autocorrection', 'keyboard-type', 'required', 'disabled'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <label part="root text-field-stack">
+    <div part="root text-field-label-stack">
+      <slot name="label"></slot>
+    </div>
+    <div part="root text-field-input-stack">
+      <input type="text" part="root input text-field-form-input">
+    </div>
+    <slot name="validity-options" hidden></slot>
+  </label>`));
+    }
+    #renderValidityMsgs = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
+    #shadowRoot;
+    // #internals: ElementInternals
+    #customValidity = '';
+    // #validitiesSlot?: HTMLSlotElement
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #input;
+    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.#input = this.#shadowRoot.querySelector('input') ?? undefined;
+        CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'blur', listener: this.#handleInputBlur },
+            { types: 'input', listener: this.#handleInputInput },
+            { types: 'beforeinput', listener: this.#handleInputBeforeinput },
+            { types: 'paste', listener: this.#handleInputPaste },
+        ], this.#input).on());
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.text = this.text;
+        }, I18n.on).on());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // finally
+        if (!this.hasAttribute('text'))
+            return;
+        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
+        this.#sendValueToForm(false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'keyboard-type':
+                switch (newValue) {
+                    case 'decimal-pad':
+                        this.#input?.setAttribute('inputmode', 'decimal');
+                        break;
+                    case 'number-pad':
+                        this.#input?.setAttribute('inputmode', 'numeric');
+                        break;
+                    case 'default':
+                    default:
+                        this.#input?.removeAttribute('inputmode');
+                        break;
+                }
+                this.#sendValueToForm();
+                break;
+            case 'text-input-autocapitalization':
+                switch (newValue) {
+                    case 'never':
+                        this.#input?.setAttribute('autocapitalize', 'off');
+                        break;
+                    case 'characters':
+                        this.#input?.setAttribute('autocapitalize', newValue);
+                        break;
+                    case 'words':
+                        this.#input?.setAttribute('autocapitalize', newValue);
+                        break;
+                    default:
+                    case 'sentences':
+                        this.#input?.setAttribute('autocapitalize', 'on');
+                        break;
+                }
+                break;
+            case 'disable-autocorrection':
+                if ('' === newValue)
+                    for (const [k, v] of [
+                        ['autocomplete', 'off'],
+                        ['autocorrect', 'off'],
+                        ['spellcheck', 'false'],
+                    ])
+                        this.#input?.setAttribute(k, v);
+                else
+                    for (const k of ['autocomplete', 'autocorrect', 'spellcheck'])
+                        this.#input?.removeAttribute(k);
+                break;
+            case 'text':
+                // if (this.#input) this.#input.value = newValue ?? ''
+                // nothing happens //this.text = newValue ?? ''
+                break;
+            case 'required':
+                this.#input?.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
+                this.#sendValueToForm();
+                break;
+            case 'name':
+            case 'minimum':
+            case 'maximum':
+                this.#sendValueToForm();
+                break;
+            case 'prompt':
+                this.#input?.setAttribute('placeholder', newValue ?? ''); // else this.#input?.removeAttribute(name)
+                break;
+            case 'min-length':
+                this.#input?.setAttribute('minlength', newValue ?? '');
+                this.#sendValueToForm();
+                break;
+            case 'max-length':
+                this.#input?.setAttribute('maxlength', newValue ?? '');
+                this.#sendValueToForm();
+                break;
+            case 'label':
+                let label = this.querySelector(':scope>label-view[slot=label]');
+                if (newValue) {
+                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+                    label.setAttribute('foreground', 'secondary');
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label?.remove();
+                // this.#sendValueToForm()
+                break;
+            case 'disabled':
+                for (const el of this.#shadowRoot.querySelectorAll('input'))
+                    el.toggleAttribute('disabled', !newValue);
+                break;
+        }
+        // render pattern
+        switch (this.keyboardType) {
+            case 'decimal-pad':
+                const allowedSignsRegex2 = String.raw `[+\-]?|[+\-]?(\d+([.,]\d*)?|[.,]\d*)`, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
+                digitsDecimalsOnlyRegex = String.raw `(\d+([.,]\d*)?|[.,]\d*)?`; // allow only one ',' or '.' and finally only digits
+                this.#input?.setAttribute('pattern', this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex);
+                break;
+            case 'number-pad':
+                const allowedSignsRegex = String.raw `([+\-]|\d+|[+\-]\d+)?`, // allow single '+' or '-', then allow only digits
+                digitsOnlyRegex = String.raw `\d*`; // allow only digits
+                this.#input?.setAttribute('pattern', this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex);
+                break;
+            default:
+                this.#input?.removeAttribute('pattern');
+                break;
+        }
+    }
+    get keyboardType() {
+        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
+    }
+    get text() {
+        return this.#input?.value ?? '';
+    }
+    set text(v) {
+        if (!this.#input)
+            return;
+        const nv = this.#patternTest(v) ? v : '';
+        set(this.#input, 'value', nv);
+        // this.text AND this.value have NOW been updated to new values
+        // if user is NOT interacting replace new-text/input.value with the formatted version of the new-text/input.value!
+        if (document.activeElement !== this && 0 < this.#input.value.length) {
+            const finalText = this.value.replace(/[.,]/g, I18n.decimalSeparator);
+            set(this.#input, 'value', finalText); // if (this.text !== finalText) this.#input.value = finalText
+        }
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        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([]);
+    };
+    #handleFocusin = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (evt.target === this)
+            this.#input?.focus();
+    };
+    #sendValueToForm = (dispatchEvent = true) => {
+        // input.value has already been updated/synced !!
+        if (this.matches(':disabled'))
+            return this.setValidity({});
+        // if (this.hasAttribute('required')) {
+        if (this.#input?.matches(':invalid')) {
+            this.setValidity(this.#input?.validity, this.#input?.validationMessage);
+        }
+        else if (['number-pad', 'decimal-pad'].includes(this.keyboardType) && (this.hasAttribute('minimum') || this.hasAttribute('maximum'))) {
+            const underflow = compareBigDecimals(this.value, this.getAttribute('minimum') ?? '-Infinity'), overflow = compareBigDecimals(this.value, this.getAttribute('maximum') ?? 'Infinity');
+            if (0 > underflow)
+                this.setValidity({ rangeUnderflow: true });
+            else if (0 < overflow)
+                this.setValidity({ rangeOverflow: true });
+            else
+                this.setValidity({});
+        }
+        else {
+            this.setValidity({});
+        }
+        const entries = new FormData();
+        entries.append(this.name, this.text);
+        this.#internals.setFormValue(entries);
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, bubbles: true, composed: true }));
+    };
+    #handleInputPaste = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
+            return;
+        evt.preventDefault();
+        const data = this.#identity(evt.clipboardData?.getData('text') ?? ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
+        if (0 === data.length)
+            return this.shake(); //.then(this.reportValidity) // nothing to paste
+        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0, before = input.value.slice(0, start), after = input.value.slice(end), newText = `${before}${data}${after}`;
+        if (-1 < input.maxLength && input.maxLength < newText.length)
+            return this.shake(); //.then(this.reportValidity) // exceeding maxlength
+        input.value = newText;
+        const newCaret = start + data.length;
+        input.setSelectionRange(newCaret, newCaret); // move caret after inserted char
+        this.#sendValueToForm(); // input.dispatchEvent(new InputEvent('input', { bubbles: true })) // Manually trigger input event so listeners react
+    };
+    // NOTE: identity MUST always pass beforeinput checks
+    #identity = (str) => {
+        // 'ab-1.2.3.4x yz ' // "-1.234"
+        // '++12..34  ' // "+12.34"
+        // '-+5.6.7.8 ' // "-5.678"
+        // '  -+5.6,7.8  ' // "-5.678"
+        // 'foo123bar  ' // "123"
+        // '.12.3  ' // ".123"
+        // '    http://localhost:5173/input.html' // "5173."
+        // '    http://localhost:51,73/input.html' // "51,73"
+        // '    +- 0000.' // "+0000."
+        // '    +' // "+"
+        // '    +0000234' // "+0000234"
+        // '    +-1.2.3.4x yz ' // "+1.234"
+        let seenSign = false;
+        switch (this.keyboardType) {
+            case 'decimal-pad': // allow only ^+- and then only one instance of ., finally remove all non digit rest appearances
+                let seenDot = false;
+                return [...`${str.trim()}`].reduce((acc, ch, i) => {
+                    // +- signs are allowed
+                    if (this.negativeNumbersAllowed)
+                        if (!seenSign && (ch === '+' || ch === '-')) {
+                            seenSign = true;
+                            return `${acc}${ch}`;
+                        }
+                    if ((ch === '.' || ch === ',') && !seenDot) {
+                        seenDot = true;
+                        return `${acc}${ch}`;
+                    }
+                    if (/\d/.test(ch))
+                        return `${acc}${ch}`;
+                    return acc; // skip everything else
+                }, '');
+            case 'number-pad': // allow only ^+- finally remove all non digit rest appearances
+                return [...`${str.trim()}`].reduce((acc, ch, i) => {
+                    // +- signs are allowed
+                    if (this.negativeNumbersAllowed)
+                        if (!seenSign && (ch === '+' || ch === '-')) {
+                            seenSign = true;
+                            return `${acc}${ch}`;
+                        }
+                    if (/\d/.test(ch))
+                        return `${acc}${ch}`;
+                    return acc; // skip everything else
+                }, '');
+            default:
+                return `${str}`;
+        }
+    };
+    #patternTest = (str) => {
+        switch (this.keyboardType) {
+            case 'decimal-pad':
+                const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
+                digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
+                return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
+            //   // isValidDecimal("");       // true
+            //   // isValidDecimal("+");      // true
+            //   // isValidDecimal("-");      // true
+            //   // isValidDecimal("123");    // true
+            //   // isValidDecimal("+123");   // true
+            //   // isValidDecimal("-456");   // true
+            //   // isValidDecimal("12.34");  // true
+            //   // isValidDecimal("-0,56");  // true
+            //   // isValidDecimal(".78");    // true
+            //   // isValidDecimal(",9");     // true
+            //   // isValidDecimal("12.3.4"); // false
+            //   // isValidDecimal("12,3,4"); // false
+            //   // isValidDecimal("12-3");   // false
+            //   // isValidDecimal("12a");    // false
+            case 'number-pad':
+                const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
+                digitsOnlyRegex = /^(\d+)?$/; // allow only digits
+                return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
+            //   // isValidInteger("");      // true
+            //   // isValidInteger("+");     // true
+            //   // isValidInteger("-");     // true
+            //   // isValidInteger("123");   // true
+            //   // isValidInteger("+123");  // true
+            //   // isValidInteger("-456");  // true
+            //   // isValidInteger("12-3");  // false
+            //   // isValidInteger("++123"); // false
+            //   // isValidInteger("123a");  // false
+            default:
+                return true;
+        }
+    };
+    #handleInputBeforeinput = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
+            return;
+        if ('insertText' !== evt.inputType)
+            return;
+        const data = evt.data ?? '';
+        if (-1 < input.maxLength && 0 === data.length) {
+            evt.preventDefault();
+            return this.shake(); //.then(this.reportValidity)
+        } // nothing to add
+        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0, before = this.text.slice(0, start), after = this.text.slice(end), newText = `${before}${data}${after}`;
+        if (0 === newText.length)
+            return;
+        switch (input.getAttribute('inputmode')) {
+            case 'decimal':
+                // const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
+                //   digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/ // allow only one ',' or '.' and finally only digits
+                // if ((this.min < 0 ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(newText)) break
+                if (this.#patternTest(newText))
+                    break;
+                evt.preventDefault();
+                return this.shake(); //.then(this.reportValidity)
+            case 'numeric':
+                // const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
+                //   digitsOnlyRegex = /^(\d+)?$/ // allow only digits
+                // if ((this.min < 0 ? allowedSignsRegex : digitsOnlyRegex).test(newText)) break
+                if (this.#patternTest(newText))
+                    break;
+                evt.preventDefault();
+                return this.shake(); //.then(this.reportValidity)
+            // this.setValidity(prevValidity, prevValiditationMessage) // restore
+        }
+    };
+    #handleInputBlur = ({ type, target: input }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(input instanceof HTMLInputElement && input))
+            return;
+        if (0 === input.value.length)
+            return;
+        const finalText = this.value.replace(/[.,]/g, I18n.decimalSeparator);
+        if (!set(input, 'value', finalText))
+            return;
+        this.#sendValueToForm();
+    };
+    #handleInputInput = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.#sendValueToForm();
+    };
+    // Optional: form participation properties
+    get name() {
+        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
+    }
+    get value() {
+        // text allows special edge cases, like '-.' or '+' and generally might be invalid number. It might also be localized and not US based.
+        // here we make sure it is number-like, to be used in number operations.
+        switch (this.keyboardType) {
+            case 'decimal-pad':
+            case 'number-pad':
+                if ('string' !== typeof this.text)
+                    return '0';
+                const value = this.text.replace(/[.,]/g, '.');
+                // Capture optional leading sign
+                const sign = value.startsWith('-') ? '-' : '';
+                // Strip sign for processing
+                let s = value.replace(/^[+-]/, '');
+                // Split on dot (take only first two parts in case of multiple dots — though
+                // your input guarantees one, this is defensive)
+                const [intPart = '', fracPart = ''] = s.split('.'), hasDot = s.includes('.');
+                // Remove leading zeros from integer part, keep at least '0'
+                const cleanInt = intPart.replace(/^0+/, '') || '0';
+                // Remove trailing zeros from fractional part
+                const cleanFrac = fracPart.replace(/0+$/, '');
+                // Build result
+                const result = hasDot && cleanFrac.length > 0 ? `${sign}${cleanInt}.${cleanFrac}` : `${sign}${cleanInt}`;
+                return result.replace(/^-0(\.0+)?$/, '0');
+            default:
+                return this.text;
+        }
+    }
+    get valueAsNumber() {
+        switch (this.keyboardType) {
+            case 'decimal-pad':
+            case 'number-pad':
+                return Number(this.value);
+            default:
+                return '';
+        }
+    }
+    get negativeNumbersAllowed() {
+        // switch (this.keyboardType) {
+        //   case 'decimal-pad':
+        //   case 'number-pad':
+        const min = this.getAttribute('minimum') ?? '-Infinity', max = this.getAttribute('maximum') ?? 'Infinity';
+        return compareBigDecimals('0', min) >= 0 && compareBigDecimals('0', max) <= 0;
+        //   default:
+        //     return false
+        // }
+    }
+    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 option = el;
+                if (`${kebabCase(key)}` === option.value) {
+                    message = option.label;
+                    break;
+                }
+                else if (`${kebabCase(key)}:${message}` === option.value) {
+                    message = option.label;
+                    break;
+                }
+            }
+        }
+        if (!message)
+            for (const k in flags) {
+                const key = k; // ✅ type-safe cast
+                if (true !== flags[key])
+                    continue;
+                message = kebabCase(key);
+                break;
+            }
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ validity-change`);
+        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
+    };
+    setCustomValidity = (message) => {
+        this.#customValidity = message;
+        if (this.#customValidity)
+            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
+        else
+            this.#sendValueToForm(false);
+    };
+    formAssociatedCallback = (form) => {
+        this.#sendValueToForm();
+    };
+    formDisabledCallback = (disabled) => {
+        for (const el of this.#shadowRoot.querySelectorAll('input'))
+            el.toggleAttribute('disabled', !disabled);
+    };
+    formResetCallback = () => {
+        this.text = '';
+        this.#sendValueToForm();
+    };
+}
+_a = TextField;

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

@@ -0,0 +1,5 @@
+export declare class ToolBarItemGroup extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,28 @@
+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 { devFlags } from '../internal/utils';
+let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+};
+ToolBarItemGroup = ToolBarItemGroup_1 = __decorate([
+    adaptiveSlot()
+], ToolBarItemGroup);
+export { ToolBarItemGroup };

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

@@ -0,0 +1,8 @@
+export declare class ToolBarItem extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

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

@@ -0,0 +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 { adaptiveSlot } from '../internal/decorators';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
+    static get observedAttributes() {
+        return ['slot', 'data-previous-slot', 'title-key'];
+    }
+    #mutationObserver;
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        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;
+            if (target.closest('menu-view[open]'))
+                return false;
+            return true;
+        }), this).on());
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.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'), role, tKey);
+                        this.#mutationObserver = new MutationObserver((mutations) => {
+                            for (const { target } of mutations)
+                                if (target instanceof HTMLElement && target)
+                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        });
+                        this.#mutationObserver.observe(this, {
+                            childList: true,
+                        });
+                    });
+                break;
+            }
+        }
+    }
+};
+ToolBarItem = ToolBarItem_1 = __decorate([
+    adaptiveSlot((el) => !el.closest('tool-bar-item-group'))
+], ToolBarItem);
+export { ToolBarItem };

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

@@ -0,0 +1,19 @@
+/**
+ * @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;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}