@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/toaster.js

@@ -1,356 +0,0 @@
-import { defineToast } from "./toast.js";
-export function defineToaster() {
-    if (customElements.get("spui-toaster"))
-        return;
-    defineToast();
-    class SpuiToaster extends HTMLElement {
-        static observedAttributes = ["position", "aria-label", "limit"];
-        announce;
-        lastFocused = null;
-        previousToastCount = 0;
-        restorePending = false;
-        toastSlot;
-        politeRegion;
-        assertiveRegion;
-        announcementQueue = [];
-        activeAnnouncement;
-        announcementTimer;
-        announceEnabled = true;
-        queuedToasts = new Set();
-        activeToasts = new Set();
-        toastById = new Map();
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.setAttribute("role", "region");
-            if (!this.hasAttribute("position"))
-                this.setAttribute("position", "top-end");
-            if (!this.hasAttribute("aria-label"))
-                this.setAttribute("aria-label", "Notifications");
-            this.toastSlot.addEventListener("slotchange", this.onSlotChange);
-            this.addEventListener("spui-dismiss", this.onDismiss);
-            this.addEventListener("spui-toast-announce", this.onAnnounce);
-            this.addEventListener("keydown", this.onKeyDown);
-            this.addEventListener("focusin", this.onFocusIn);
-            this.addEventListener("focusout", this.onFocusOut);
-        }
-        disconnectedCallback() {
-            this.removeEventListener("spui-dismiss", this.onDismiss);
-            this.removeEventListener("spui-toast-announce", this.onAnnounce);
-            this.removeEventListener("keydown", this.onKeyDown);
-            this.removeEventListener("focusin", this.onFocusIn);
-            this.removeEventListener("focusout", this.onFocusOut);
-            this.toastSlot.removeEventListener("slotchange", this.onSlotChange);
-            if (this.announcementTimer !== undefined)
-                this.ownerDocument.defaultView?.clearTimeout(this.announcementTimer);
-            this.announcementTimer = undefined;
-            this.announcementQueue = [];
-            this.activeAnnouncement = undefined;
-        }
-        attributeChangedCallback(name) {
-            if (name === "position" && !["top-start", "top-end", "bottom-start", "bottom-end"].includes(this.getAttribute(name) ?? ""))
-                this.setAttribute(name, "top-end");
-            if (name === "limit")
-                this.syncQueue();
-        }
-        show(options) {
-            const existing = options.id ? this.toastById.get(options.id) : undefined;
-            if (existing) {
-                const id = existing.configure(options);
-                this.syncQueue();
-                return id;
-            }
-            this.captureFocus();
-            const toast = this.ownerDocument.createElement("spui-toast");
-            toast.slot = "toast";
-            toast.tabIndex = -1;
-            const id = toast.configure(options);
-            this.append(toast);
-            return id;
-        }
-        registerToast(toast) {
-            if (toast.localName !== "spui-toast")
-                return;
-            const node = toast;
-            if (!node.toastId || (node.hidden && !this.queuedToasts.has(node)))
-                return;
-            this.toastById.set(node.toastId, node);
-            if (this.queuedToasts.has(node)) {
-                node.hidden = true;
-                node.pause("queue");
-                return;
-            }
-            if (this.activeToasts.has(node))
-                return;
-            if (this.activeToasts.size >= this.limit)
-                this.queueToast(node);
-            else
-                this.activeToasts.add(node);
-        }
-        refreshQueue() { this.syncQueue(); }
-        captureFocus() {
-            const active = this.ownerDocument.activeElement;
-            if (!this.activeToasts.size && !this.queuedToasts.size && active && active !== this.ownerDocument.body && active.nodeType === 1 && !this.contains(active))
-                this.lastFocused = active;
-        }
-        update(id, options) {
-            const toast = this.toastById.get(id);
-            if (!toast)
-                return false;
-            toast.configure({ ...options, priority: options.priority ?? (Number(toast.getAttribute("priority")) || 0), id });
-            this.syncQueue();
-            return true;
-        }
-        dismiss(id, reason = "dismiss") {
-            const toast = this.toastById.get(id);
-            if (!toast)
-                return false;
-            if (this.queuedToasts.has(toast)) {
-                this.queuedToasts.delete(toast);
-                toast.hidden = false;
-                toast.play("queue");
-            }
-            toast.dismiss(reason);
-            return true;
-        }
-        dismissAll(reason = "dismiss-all") {
-            const toasts = [...this.toasts];
-            toasts.forEach(toast => this.dismiss(toast.toastId, reason));
-            return toasts.length;
-        }
-        pause(id) {
-            const toast = this.toastById.get(id);
-            if (!toast)
-                return false;
-            toast.pause();
-            return true;
-        }
-        play(id) {
-            const toast = this.toastById.get(id);
-            if (!toast)
-                return false;
-            toast.play();
-            return true;
-        }
-        focusNewest() {
-            const toast = [...this.toasts].reverse().find(item => !item.hidden);
-            if (!toast)
-                return false;
-            toast.focus();
-            return true;
-        }
-        get toasts() {
-            return Array.from(this.children).filter(element => element.localName === "spui-toast");
-        }
-        get limit() {
-            if (!this.hasAttribute("limit"))
-                return Number.POSITIVE_INFINITY;
-            const value = Number(this.getAttribute("limit"));
-            return Number.isFinite(value) && value >= 0 ? Math.floor(value) : Number.POSITIVE_INFINITY;
-        }
-        get visibleToasts() { return [...this.activeToasts].filter(toast => toast.isConnected && !toast.hidden); }
-        queueToast(toast) {
-            this.activeToasts.delete(toast);
-            this.queuedToasts.add(toast);
-            toast.hidden = true;
-            toast.pause("queue");
-        }
-        syncQueue() {
-            if (!this.isConnected)
-                return;
-            const toasts = this.toasts;
-            const children = new Set(toasts);
-            for (const [id, toast] of this.toastById)
-                if (!children.has(toast))
-                    this.toastById.delete(id);
-            for (const toast of this.activeToasts)
-                if (!children.has(toast))
-                    this.activeToasts.delete(toast);
-            for (const toast of this.queuedToasts)
-                if (!children.has(toast))
-                    this.queuedToasts.delete(toast);
-            for (const toast of toasts)
-                this.registerToast(toast);
-            const limit = this.limit;
-            const visible = toasts.filter(toast => this.activeToasts.has(toast));
-            for (const toast of visible.slice(limit))
-                this.queueToast(toast);
-            const order = new Map(toasts.map((toast, index) => [toast, index]));
-            const queued = [...this.queuedToasts].filter(toast => children.has(toast)).sort((a, b) => {
-                const priorityA = Number(a.getAttribute("priority")) || 0;
-                const priorityB = Number(b.getAttribute("priority")) || 0;
-                return priorityA - priorityB || order.get(a) - order.get(b);
-            });
-            for (const toast of queued.slice(0, Math.max(0, limit - visible.length))) {
-                this.queuedToasts.delete(toast);
-                this.activeToasts.add(toast);
-                toast.hidden = false;
-                toast.play("queue");
-            }
-        }
-        onSlotChange = () => {
-            this.syncQueue();
-            const count = this.visibleToasts.length;
-            if (!this.previousToastCount && count && !this.lastFocused) {
-                const active = this.ownerDocument.activeElement;
-                if (active && active !== this.ownerDocument.body && active.nodeType === 1 && !this.contains(active))
-                    this.lastFocused = active;
-            }
-            if (!count && this.previousToastCount && !this.restorePending)
-                this.lastFocused = null;
-            this.previousToastCount = count;
-        };
-        onDismiss = (event) => {
-            const toast = event.target;
-            if (!(toast instanceof HTMLElement) || toast.localName !== "spui-toast")
-                return;
-            const detail = event.detail;
-            const hadFocus = Boolean(detail?.hadFocus) || (this.contains(this.ownerDocument.activeElement) && (this.ownerDocument.activeElement === toast || toast.contains(this.ownerDocument.activeElement)));
-            if (hadFocus) {
-                this.restorePending = true;
-                this.ownerDocument.defaultView?.setTimeout(() => { this.restorePending = false; this.restoreFocus(toast); }, 0);
-            }
-            this.activeToasts.delete(toast);
-            this.queuedToasts.delete(toast);
-            const toastId = toast.toastId;
-            if (this.toastById.get(toastId) === toast)
-                this.toastById.delete(toastId);
-            this.syncQueue();
-            if (!this.hasAttribute("managed"))
-                this.ownerDocument.defaultView?.setTimeout(() => toast.remove(), 0);
-        };
-        onAnnounce = (event) => {
-            const detail = event.detail;
-            if (!this.announceEnabled || !detail?.message?.trim() || (this.activeAnnouncement?.message === detail.message))
-                return;
-            if (this.announcementQueue.some(item => item.id === detail.id && item.message === detail.message))
-                return;
-            const item = { ...detail, politeness: detail.politeness === "assertive" ? "assertive" : "polite" };
-            if (this.announce) {
-                this.announce(item.message, { politeness: item.politeness });
-                return;
-            }
-            const index = item.politeness === "assertive" ? this.announcementQueue.findIndex(queued => queued.politeness === "polite") : -1;
-            if (index < 0)
-                this.announcementQueue.push(item);
-            else
-                this.announcementQueue.splice(index, 0, item);
-            this.presentNextAnnouncement();
-        };
-        presentNextAnnouncement() {
-            if (this.activeAnnouncement || !this.announcementQueue.length)
-                return;
-            const announcement = this.announcementQueue.shift();
-            this.activeAnnouncement = announcement;
-            this.politeRegion.textContent = "";
-            this.assertiveRegion.textContent = "";
-            this.announcementTimer = this.ownerDocument.defaultView.setTimeout(() => {
-                const region = announcement.politeness === "assertive" ? this.assertiveRegion : this.politeRegion;
-                region.textContent = announcement.message;
-                this.announcementTimer = this.ownerDocument.defaultView.setTimeout(() => {
-                    this.politeRegion.textContent = "";
-                    this.assertiveRegion.textContent = "";
-                    this.activeAnnouncement = undefined;
-                    this.announcementTimer = undefined;
-                    this.presentNextAnnouncement();
-                }, 500);
-            }, 50);
-        }
-        getVisibleFocusables() {
-            const focusables = [];
-            const visit = (node) => {
-                if (node instanceof HTMLElement) {
-                    if (node.matches('a[href],button,input:not([type="hidden"]),select,textarea,[tabindex]') && node.tabIndex >= 0 && !node.hasAttribute("disabled") && !node.hidden && node.getAttribute("aria-hidden") !== "true" && node.getClientRects().length)
-                        focusables.push(node);
-                    if (node.shadowRoot) {
-                        for (const child of node.shadowRoot.childNodes)
-                            visit(child);
-                        return;
-                    }
-                }
-                if (node instanceof HTMLSlotElement) {
-                    const assigned = node.assignedNodes();
-                    for (const child of assigned.length ? assigned : node.childNodes)
-                        visit(child);
-                    return;
-                }
-                for (const child of node.childNodes)
-                    visit(child);
-            };
-            for (const toast of this.visibleToasts)
-                visit(toast);
-            return focusables;
-        }
-        onKeyDown = (event) => {
-            if (event.key === "Tab") {
-                const focusables = this.getVisibleFocusables();
-                const target = event.composedPath()[0];
-                const current = focusables.findIndex(element => element === target || (target instanceof Node && element.contains(target)));
-                const edge = event.shiftKey ? 0 : focusables.length - 1;
-                if (focusables.length > 1 && current === edge) {
-                    event.preventDefault();
-                    focusables[event.shiftKey ? focusables.length - 1 : 0].focus();
-                }
-                return;
-            }
-            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                const visible = this.toasts.filter(toast => !toast.hidden);
-                if (!visible.length)
-                    return;
-                const active = this.ownerDocument.activeElement;
-                const current = visible.findIndex(toast => toast === active || toast.contains(active));
-                const delta = event.key === "ArrowUp" ? -1 : 1;
-                const next = current < 0 ? visible.length - 1 : (current + delta + visible.length) % visible.length;
-                event.preventDefault();
-                visible[next].focus();
-                return;
-            }
-            if (event.key !== "Escape" && event.key !== "Delete")
-                return;
-            const active = this.ownerDocument.activeElement;
-            const focused = this.toasts.find(toast => toast === active || toast.contains(active));
-            const target = event.key === "Delete" ? focused : focused ?? [...this.toasts].reverse().find(toast => !toast.hidden);
-            if (!target)
-                return;
-            event.preventDefault();
-            target.dismiss("keyboard");
-        };
-        onFocusIn = () => { this.announceEnabled = false; for (const toast of this.toasts)
-            toast.pause("toaster-focus"); };
-        onFocusOut = (event) => {
-            if (this.contains(event.relatedTarget))
-                return;
-            this.announceEnabled = true;
-            for (const toast of this.toasts)
-                toast.play("toaster-focus");
-        };
-        restoreFocus(dismissed) {
-            const next = [...this.toasts].reverse().find(item => item !== dismissed && !item.hidden);
-            if (next)
-                next.focus();
-            else {
-                if (this.lastFocused?.isConnected)
-                    this.lastFocused.focus();
-                this.lastFocused = null;
-            }
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            this.toastSlot = this.ownerDocument.createElement("slot");
-            this.toastSlot.name = "toast";
-            const announcer = this.ownerDocument.createElement("div");
-            announcer.className = "announcer";
-            this.assertiveRegion = this.ownerDocument.createElement("div");
-            this.assertiveRegion.setAttribute("aria-live", "assertive");
-            this.assertiveRegion.setAttribute("aria-atomic", "true");
-            this.politeRegion = this.ownerDocument.createElement("div");
-            this.politeRegion.setAttribute("aria-live", "polite");
-            this.politeRegion.setAttribute("aria-atomic", "true");
-            announcer.append(this.assertiveRegion, this.politeRegion);
-            const style = this.ownerDocument.createElement("style");
-            style.textContent = `:host{position:fixed;z-index:var(--spui-toaster-z-index,var(--spui-layer-toast,10000));display:flex;flex-direction:column;gap:var(--spui-toaster-gap,10px);box-sizing:border-box;inline-size:min(100vw,460px);max-block-size:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));pointer-events:none}:host([position=top-start]){inset-block-start:0;inset-inline-start:0;align-items:flex-start}:host([position=top-end]){inset-block-start:0;inset-inline-end:0;align-items:flex-end}:host([position=bottom-start]){inset-block-end:0;inset-inline-start:0;align-items:flex-start;flex-direction:column-reverse}:host([position=bottom-end]){inset-block-end:0;inset-inline-end:0;align-items:flex-end;flex-direction:column-reverse}slot{display:contents}::slotted(spui-toast){max-inline-size:100%}.announcer{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0}:host([inline]){position:relative;inset:auto;inline-size:100%;max-block-size:none;overflow:visible;padding:0}:host([inline][position^=bottom]){flex-direction:column}`;
-            shadow.replaceChildren(style, this.toastSlot, announcer);
-        }
-    }
-    customElements.define("spui-toaster", SpuiToaster);
-}

package/dist/elements/toggle.d.ts

@@ -1,2 +0,0 @@
-export declare const defineCheckbox: () => void;
-export declare const defineSwitch: () => void;

package/dist/elements/toggle.js

@@ -1,246 +0,0 @@
-import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-function defineToggle(name, type) {
-    if (customElements.get(name))
-        return;
-    class SpuiToggle extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["checked", "default-checked", "disabled", "disabled-focusable", "required", "name", "value", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
-        internals;
-        checkedValue;
-        defaultCheckedValue;
-        formDisabledValue = false;
-        boundInput;
-        slotInputDefaults;
-        generatedLabelInput;
-        generatedLabel = "";
-        handleInputChange = (event) => {
-            const input = this.getInput();
-            if (!input)
-                return;
-            if (this.isDisabled()) {
-                this.syncInput();
-                this.syncFormState();
-                return;
-            }
-            const indicator = this.shadowRoot?.querySelector(".indicator");
-            if (indicator)
-                indicator.dataset.state = input.indeterminate ? "mixed" : input.checked ? "checked" : "unchecked";
-            this.syncFormState();
-            this.dispatchEvent(new CustomEvent("spui-change", { bubbles: true, composed: true, detail: { checked: input.indeterminate ? "mixed" : input.checked, value: input.value, sourceEvent: event } }));
-        };
-        handleInputClick = (event) => {
-            if (this.isDisabled() && this.isDisabledFocusable())
-                event.preventDefault();
-        };
-        constructor() { super(); this.internals = this.attachInternals(); }
-        get checked() { const input = this.getInput(); return input ? (input.indeterminate ? "mixed" : input.checked) : this.checkedValue ?? this.initialChecked(); }
-        set checked(value) { this.checkedValue = this.normalizeChecked(value); this.syncInput(); this.syncFormState(); }
-        get defaultChecked() { return this.defaultCheckedValue ?? this.initialDefaultChecked(); }
-        set defaultChecked(value) { this.defaultCheckedValue = this.normalizeChecked(value); if (this.checkedValue === undefined)
-            this.syncInput(); this.syncFormState(); }
-        get form() { return this.internals.form; }
-        get validity() { return this.internals.validity; }
-        get validationMessage() { return this.internals.validationMessage; }
-        get willValidate() { return this.internals.willValidate; }
-        checkValidity() { return this.internals.checkValidity(); }
-        reportValidity() { return this.internals.reportValidity(); }
-        formResetCallback() { this.checked = this.defaultChecked; }
-        formDisabledCallback(disabled) { this.formDisabledValue = disabled; this.syncInput(); this.syncFormState(); }
-        formStateRestoreCallback(state) {
-            if (typeof state === "string")
-                this.checked = state === "mixed" ? "mixed" : state === "checked";
-        }
-        getInput() {
-            const slot = this.shadowRoot?.querySelector('slot[name="input"]');
-            const assigned = slot?.assignedElements().find((element) => element instanceof HTMLInputElement);
-            const fallback = this.shadowRoot?.querySelector(".input-fallback");
-            if (fallback) {
-                fallback.hidden = Boolean(assigned);
-                fallback.toggleAttribute("aria-hidden", Boolean(assigned));
-            }
-            return assigned ?? fallback ?? this.shadowRoot?.querySelector("input") ?? null;
-        }
-        bindInput(input) {
-            if (this.boundInput === input)
-                return;
-            this.boundInput?.removeEventListener("change", this.handleInputChange);
-            this.boundInput?.removeEventListener("click", this.handleInputClick);
-            input.addEventListener("change", this.handleInputChange);
-            input.addEventListener("click", this.handleInputClick);
-            this.boundInput = input;
-        }
-        syncInputSlot() {
-            const slot = this.shadowRoot?.querySelector('slot[name="input"]');
-            const assigned = slot?.assignedElements().some(element => element instanceof HTMLInputElement) ?? false;
-            const fallback = this.shadowRoot?.querySelector(".input-fallback");
-            if (fallback)
-                fallback.hidden = assigned;
-            const input = this.getInput();
-            if (input && !input.classList.contains("input-fallback"))
-                this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
-            if (input)
-                this.bindInput(input);
-            this.syncInput();
-            this.syncFormState();
-        }
-        isDisabled() { return this.formDisabledValue || this.hasAttribute("disabled"); }
-        isDisabledFocusable() { return this.isDisabled() && this.hasAttribute("disabled-focusable"); }
-        initialChecked() {
-            const initial = this.getAttribute("checked") ?? this.getAttribute("default-checked");
-            if (initial === null && this.slotInputDefaults)
-                return this.slotInputDefaults.checked;
-            return type === "checkbox" && initial === "mixed" ? "mixed" : initial !== null;
-        }
-        initialDefaultChecked() {
-            const initial = this.getAttribute("checked") ?? this.getAttribute("default-checked");
-            if (initial === null && this.slotInputDefaults)
-                return this.slotInputDefaults.defaultChecked;
-            return type === "checkbox" && initial === "mixed" ? "mixed" : initial !== null;
-        }
-        normalizeChecked(value) { return type === "checkbox" && value === "mixed" ? "mixed" : Boolean(value); }
-        syncInput() {
-            const input = this.getInput();
-            if (!input)
-                return;
-            if (!input.classList.contains("input-fallback"))
-                this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
-            const defaults = input.classList.contains("input-fallback") ? undefined : this.slotInputDefaults;
-            const checked = this.checkedValue ?? this.defaultCheckedValue ?? this.initialChecked();
-            input.checked = checked === true;
-            input.indeterminate = checked === "mixed";
-            input.disabled = (this.isDisabled() && !this.isDisabledFocusable()) || Boolean(defaults?.disabled);
-            input.type = "checkbox";
-            if (type === "switch")
-                input.setAttribute("role", "switch");
-            input.required = this.hasAttribute("required") || Boolean(defaults?.required);
-            input.value = this.getAttribute("value") ?? defaults?.value ?? "on";
-            input.removeAttribute("name");
-            for (const attr of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                const value = this.getAttribute(attr);
-                if (value !== null && !input.hasAttribute(attr))
-                    input.setAttribute(attr, value);
-            }
-            syncHostAccessibleName(this, input);
-            if (this.generatedLabelInput && this.generatedLabelInput.getAttribute("aria-label") === this.generatedLabel)
-                this.generatedLabelInput.removeAttribute("aria-label");
-            this.generatedLabelInput = undefined;
-            this.generatedLabel = "";
-            if (!input.classList.contains("input-fallback") && !input.hasAttribute("aria-label") && !input.hasAttribute("aria-labelledby")) {
-                const labelSlot = this.shadowRoot?.querySelector('slot[name="label"]');
-                const label = labelSlot?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("").trim();
-                if (label) {
-                    input.setAttribute("aria-label", label);
-                    this.generatedLabelInput = input;
-                    this.generatedLabel = label;
-                }
-            }
-            const indicator = this.shadowRoot?.querySelector(".indicator");
-            if (indicator)
-                indicator.dataset.state = input.indeterminate ? "mixed" : input.checked ? "checked" : "unchecked";
-            if (this.isDisabledFocusable()) {
-                input.setAttribute("aria-disabled", "true");
-                input.tabIndex = 0;
-            }
-            else {
-                input.removeAttribute("aria-disabled");
-                input.removeAttribute("tabindex");
-            }
-        }
-        syncFormState() {
-            const input = this.getInput();
-            if (!input)
-                return;
-            const disabled = this.formDisabledValue || input.disabled || this.hasAttribute("disabled");
-            const checked = input.checked && !disabled;
-            this.internals.setFormValue(checked ? input.value : null, checked ? "checked" : input.indeterminate ? "mixed" : "unchecked");
-            const missing = !disabled && input.required && !input.checked;
-            this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? input.validationMessage : "", missing ? input : undefined);
-        }
-        connectedCallback() {
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const label = document.createElement("label");
-                const input = document.createElement("input");
-                input.type = "checkbox";
-                input.className = "input-fallback";
-                if (type === "switch")
-                    input.setAttribute("role", "switch");
-                input.part.add("control");
-                label.part.add("label");
-                input.required = this.hasAttribute("required");
-                input.name = this.getAttribute("name") ?? "";
-                input.value = this.getAttribute("value") ?? "on";
-                for (const attr of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                    const value = this.getAttribute(attr);
-                    if (value !== null)
-                        input.setAttribute(attr, value);
-                }
-                const text = document.createElement("span");
-                const labelSlot = document.createElement("slot");
-                labelSlot.name = "label";
-                labelSlot.part.add("label");
-                labelSlot.append(document.createElement("slot"));
-                labelSlot.addEventListener("slotchange", () => this.syncInput());
-                text.append(labelSlot);
-                const inputSlot = document.createElement("slot");
-                inputSlot.name = "input";
-                inputSlot.part.add("input");
-                inputSlot.append(input);
-                inputSlot.addEventListener("slotchange", () => this.syncInputSlot());
-                const control = document.createElement("span");
-                control.className = "control";
-                control.part.add("control");
-                const indicator = document.createElement("span");
-                indicator.className = "indicator";
-                indicator.part.add("indicator");
-                indicator.setAttribute("aria-hidden", "true");
-                const indicatorSlot = document.createElement("slot");
-                indicatorSlot.name = "indicator";
-                const mark = document.createElement("span");
-                mark.className = "indicator-mark";
-                indicatorSlot.append(mark);
-                indicatorSlot.addEventListener("slotchange", () => indicator.toggleAttribute("data-custom", indicatorSlot.assignedElements().length > 0));
-                indicator.append(indicatorSlot);
-                this.bindInput(input);
-                control.append(inputSlot, indicator);
-                label.append(control, text);
-                const styles = type === "switch"
-                    ? `input{appearance:none;position:relative;box-sizing:border-box;width:38px;height:22px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:999px;background:var(--spui-control-background,var(--spui-ui-surface-hover,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));cursor:pointer;transition:background-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}input::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--spui-ui-muted,var(--spui-semantic-input-foreground,var(--colorNeutralForeground2,#605e5c)));transition:transform var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}input:checked{border-color:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));background:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))))}input:checked::after{background:var(--spui-ui-accent-text,var(--colorNeutralForegroundOnBrand,#fff));transform:translateX(16px)}@media(prefers-reduced-motion:reduce){input,input::after{transition:none}}`
-                    : `input{appearance:none;display:grid;place-content:center;box-sizing:border-box;width:16px;height:16px;margin:0;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:3px;background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-accent-text,#fff);cursor:pointer}input::before{content:'';width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}input:checked{border-color:var(--spui-ui-accent,var(--spui-semantic-input-background-checked,#0f6cbd));background:var(--spui-ui-accent,var(--spui-semantic-input-background-checked,#0f6cbd))}input:checked::before{opacity:1}input:indeterminate{border-color:var(--spui-ui-accent,var(--spui-semantic-input-background-checked,#0f6cbd));background:var(--spui-ui-accent,var(--spui-semantic-input-background-checked,#0f6cbd))}input:indeterminate::before{width:8px;height:2px;border:0;border-radius:1px;background:currentColor;transform:none;opacity:1}:host([shape=circular]) input{border-radius:50%}:host([shape=circular]) input:indeterminate::before{width:6px;height:6px;border-radius:50%}`;
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:inline-block}label{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding-inline:4px;cursor:pointer}input{flex:none}input:disabled,input[aria-disabled=true]{cursor:not-allowed}label:has(input:disabled),label:has(input[aria-disabled=true]){opacity:.55;cursor:not-allowed}input:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}${styles}:host(:not([size=small])) input[role=switch]{width:40px;height:20px}:host(:not([size=small])) input[role=switch]::after{top:0;width:18px;height:18px}:host(:not([size=small])) input[role=switch]:checked::after{transform:translateX(18px)}:host([dir=rtl]:not([size=small])) input[role=switch]:checked::after,:host-context([dir=rtl]) :host(:not([size=small])) input[role=switch]:checked::after{transform:translateX(-18px)}:host([label-position=before]) label{flex-direction:row-reverse}:host([label-position=above]) label{flex-direction:column;align-items:flex-start}:host([size=small]) label{min-height:24px;gap:6px;padding-inline:5px}:host([size=small]) input[type=checkbox]{width:14px;height:14px}:host([size=small]) input[role=switch]{width:32px;height:16px}:host([size=small]) input[role=switch]::after{top:0;width:14px;height:14px}:host([size=small]) input[role=switch]:checked::after{transform:translateX(14px)}:host([size=small][dir=rtl]) input[role=switch]:checked::after,:host-context([dir=rtl]) :host([size=small]) input[role=switch]:checked::after{transform:translateX(-14px)}:host([size=large]) label{min-height:44px;gap:10px}:host([size=large]) input[type=checkbox]{width:20px;height:20px}:host([dir=rtl]) input:checked::after,:host-context([dir=rtl]) input:checked::after{transform:translateX(-16px)}@media(forced-colors:active){input{forced-color-adjust:none;border-color:ButtonText;background:Canvas}input:checked,input:indeterminate{border-color:Highlight;background:Highlight}input::before,input:checked::before,input:indeterminate::before{color:HighlightText;background:HighlightText}}`;
-                if (type === "checkbox")
-                    style.textContent += `.control{position:relative;display:grid;place-items:center;flex:none;width:16px;height:16px}.control>slot[name=input]{position:absolute;inset:0;z-index:1;width:100%;height:100%}.control>slot[name=input]::slotted(input){position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;appearance:none;opacity:0;cursor:pointer}.indicator{box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;border:1px solid var(--spui-checkbox-indicator-border,var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886))));border-radius:var(--spui-checkbox-indicator-radius,3px);background:var(--spui-checkbox-indicator-background,var(--spui-control-background,var(--spui-ui-surface,#fff)));color:var(--spui-checkbox-indicator-foreground,var(--spui-ui-accent-text,#fff));transition:background-color var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),border-color var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1));pointer-events:none}.indicator[data-state=checked],.indicator[data-state=mixed]{border-color:var(--spui-checkbox-checked-background,var(--spui-ui-accent,var(--colorBrandBackground,#0f6cbd)));background:var(--spui-checkbox-checked-background,var(--spui-ui-accent,var(--colorBrandBackground,#0f6cbd)))}.indicator:not([data-custom])[data-state=checked]::after{content:"";width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.indicator:not([data-custom])[data-state=mixed]::after{content:"";width:8px;height:2px;border-radius:1px;background:currentColor}:host([shape=circular]) .indicator{border-radius:50%}:host([shape=circular]) .indicator:not([data-custom])[data-state=mixed]::after{width:6px;height:6px;border-radius:50%}.control:has(input:focus-visible) .indicator{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}:host([size=small]) .control{width:14px;height:14px}:host([size=large]) .control{width:20px;height:20px}:host([disabled]) .indicator{opacity:.55}slot[name=indicator]::slotted(*){display:grid;place-items:center;max-width:100%;max-height:100%}@media(prefers-reduced-motion:reduce){.indicator{transition:none}}@media(forced-colors:active){.indicator{forced-color-adjust:none;border-color:ButtonText;background:Canvas;color:CanvasText}.indicator[data-state=checked],.indicator[data-state=mixed]{border-color:Highlight;background:Highlight;color:HighlightText}.control:has(input:focus-visible) .indicator{outline-color:Highlight}}`;
-                else
-                    style.textContent += `.control{position:relative;display:grid;align-items:center;flex:none;width:40px;height:20px}.control>slot[name=input]{position:absolute;inset:0;z-index:1;width:100%;height:100%}.control>slot[name=input] input,.control>slot[name=input]::slotted(input){position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;appearance:none;opacity:0;cursor:pointer}.indicator{position:relative;box-sizing:border-box;width:100%;height:100%;border:1px solid var(--spui-switch-track-border,var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886))));border-radius:999px;background:var(--spui-switch-track-background,var(--spui-control-background,var(--spui-ui-surface-hover,var(--colorNeutralBackground1,#fff))));transition:background-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),border-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1));pointer-events:none}.indicator:not([data-custom])::after{content:"";position:absolute;top:0;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:var(--spui-switch-thumb,var(--spui-ui-muted,var(--spui-semantic-input-foreground,var(--colorNeutralForeground2,#605e5c))));transition:transform var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),background-color var(--spui-motion-duration-fast,.12s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.indicator[data-state=checked]{border-color:var(--spui-switch-checked-background,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)));background:var(--spui-switch-checked-background,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)))}.indicator:not([data-custom])[data-state=checked]::after{background:var(--spui-ui-accent-text,var(--colorNeutralForegroundOnBrand,#fff));transform:translateX(18px)}:host([size=small]) .control{width:32px;height:16px}:host([size=small]) .indicator:not([data-custom])::after{width:14px;height:14px}:host([size=small]) .indicator:not([data-custom])[data-state=checked]::after{transform:translateX(14px)}:host([dir=rtl]) .indicator:not([data-custom])[data-state=checked]::after,:host-context([dir=rtl]) :host .indicator:not([data-custom])[data-state=checked]::after{transform:translateX(-18px)}:host([dir=rtl][size=small]) .indicator:not([data-custom])[data-state=checked]::after,:host-context([dir=rtl]) :host([size=small]) .indicator:not([data-custom])[data-state=checked]::after{transform:translateX(-14px)}.control:has(input:focus-visible) .indicator{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#005a9e));outline-offset:2px}:host([disabled]) .indicator{opacity:.55}slot[name=indicator]::slotted(*){display:grid;place-items:center;max-width:100%;max-height:100%}@media(prefers-reduced-motion:reduce){.indicator,.indicator::after{transition:none}}@media(forced-colors:active){.indicator{forced-color-adjust:none;border-color:ButtonText;background:Canvas}.indicator[data-state=checked]{border-color:Highlight;background:Highlight}.indicator:not([data-custom])::after{background:ButtonText}.control:has(input:focus-visible) .indicator{outline-color:Highlight}}`;
-                shadow.append(style, label);
-            }
-            this.syncInputSlot();
-        }
-        disconnectedCallback() { stopHostAccessibleNameSync(this); }
-        attributeChangedCallback(name) {
-            const input = this.getInput();
-            if (!input)
-                return;
-            if ((name === "checked" || name === "default-checked") && this.checkedValue === undefined)
-                this.syncInput();
-            if (name === "disabled" || name === "disabled-focusable")
-                this.syncInput();
-            if (name === "required")
-                input.required = this.hasAttribute(name) || Boolean(this.slotInputDefaults?.required);
-            if (name === "name")
-                input.removeAttribute("name");
-            if (name === "value")
-                input.value = this.getAttribute(name) ?? this.slotInputDefaults?.value ?? "on";
-            if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid") {
-                const value = this.getAttribute(name);
-                value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-                syncHostAccessibleName(this, input);
-            }
-            this.syncFormState();
-        }
-    }
-    customElements.define(name, SpuiToggle);
-}
-export const defineCheckbox = () => defineToggle("spui-checkbox", "checkbox");
-export const defineSwitch = () => defineToggle("spui-switch", "switch");

package/dist/elements/toolbar.d.ts

@@ -1,12 +0,0 @@
-export type ToolbarCheckedValues = Record<string, readonly string[]>;
-export type ToolbarCheckedValueChange = {
-    name: string;
-    checkedItems: string[];
-    sourceEvent?: Event;
-    currentTarget?: HTMLElement;
-};
-export declare function defineToolbarGroup(): void;
-export declare function defineToolbarSeparator(): void;
-export declare function defineToolbarRadioGroup(): void;
-export declare function defineToolbarRadioButton(): void;
-export declare function defineToolbar(): void;