@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/toaster.js

@@ -0,0 +1,356 @@
+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

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

package/dist/elements/toggle.js

@@ -0,0 +1,246 @@
+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

@@ -0,0 +1,12 @@
+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;