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

package/dist/elements/textarea.js

@@ -0,0 +1,182 @@
+import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+export function defineTextArea() {
+    if (customElements.get("spui-textarea"))
+        return;
+    class SpuiTextArea extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["label", "value", "default-value", "rows", "size", "appearance", "resize", "disabled", "required", "read-only", "placeholder", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "name", "autocomplete", "dirname", "form", "maxlength", "minlength", "cols", "wrap"];
+        internals;
+        currentValue = "";
+        dirty = false;
+        formDisabled = false;
+        boundTextarea;
+        slotTextareaDefaults;
+        constructor() { super(); try {
+            this.internals = this.attachInternals();
+        }
+        catch { /* The native textarea still works when form-associated custom elements are unavailable. */ } }
+        get value() { return this.input()?.value ?? this.currentValue; }
+        set value(value) { this.currentValue = String(value ?? ""); this.dirty = true; const control = this.input(); if (control)
+            control.value = this.currentValue; this.syncForm(control); }
+        get defaultValue() { return this.getAttribute("default-value") ?? this.getAttribute("value") ?? this.input()?.defaultValue ?? ""; }
+        set defaultValue(value) { this.setAttribute("default-value", String(value ?? "")); }
+        get name() { return this.getAttribute("name") ?? ""; }
+        set name(value) { this.setAttribute("name", value); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
+        get required() { return this.hasAttribute("required"); }
+        set required(value) { this.toggleAttribute("required", Boolean(value)); }
+        get readOnly() { return this.hasAttribute("read-only"); }
+        set readOnly(value) { this.toggleAttribute("read-only", Boolean(value)); }
+        get form() { return this.internals?.form ?? null; }
+        get validity() { return this.internals?.validity ?? this.input()?.validity; }
+        get validationMessage() { return this.internals?.validationMessage ?? this.input()?.validationMessage ?? ""; }
+        get willValidate() { return this.internals?.willValidate ?? Boolean(this.input() && !this.input().disabled && !this.input().readOnly); }
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const id = `textarea-${Math.random().toString(36).slice(2)}`;
+            const label = document.createElement("label");
+            label.htmlFor = id;
+            label.textContent = this.getAttribute("label") ?? "";
+            label.part.add("label");
+            const input = document.createElement("textarea");
+            input.className = "textarea-fallback";
+            input.id = id;
+            input.defaultValue = this.getAttribute("default-value") ?? this.getAttribute("value") ?? "";
+            input.value = this.getAttribute("value") ?? input.defaultValue;
+            input.rows = Number(this.getAttribute("rows") ?? 3);
+            input.disabled = this.hasAttribute("disabled");
+            input.required = this.hasAttribute("required");
+            input.readOnly = this.hasAttribute("read-only");
+            input.placeholder = this.getAttribute("placeholder") ?? "";
+            input.part.add("control");
+            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "name", "autocomplete", "dirname", "form", "maxlength", "minlength", "cols", "wrap"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    input.setAttribute(name, value);
+            }
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}textarea{width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) textarea{min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=medium]) textarea{min-height:72px}:host([size=large]) textarea{min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([appearance=filled-darker]),:host([appearance=filled-darker-shadow]){--spui-control-background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--colorNeutralBackground3,#f0f0f0)));--spui-control-border:transparent}:host([appearance=filled-lighter]),:host([appearance=filled-lighter-shadow]){--spui-control-background:var(--spui-input-filled-lighter,var(--spui-ui-canvas,var(--colorNeutralBackground2,#fafafa)));--spui-control-border:transparent}:host([appearance=filled-darker-shadow]) textarea,:host([appearance=filled-lighter-shadow]) textarea{box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}:host([resize=vertical]) textarea{resize:vertical}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=both]) textarea{resize:both}textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}textarea:disabled{opacity:.55}@media(forced-colors:active){textarea{border-color:FieldText}textarea:focus-visible{outline-color:Highlight}}`;
+            style.textContent += `textarea[hidden]{display:none}slot[name=textarea]{display:contents}slot[name=textarea]::slotted(textarea){width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) slot[name=textarea]::slotted(textarea){min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=textarea]::slotted(textarea){min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([resize=vertical]) slot[name=textarea]::slotted(textarea){resize:vertical}:host([resize=horizontal]) slot[name=textarea]::slotted(textarea){resize:horizontal}:host([resize=both]) slot[name=textarea]::slotted(textarea){resize:both}slot[name=textarea]::slotted(textarea:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}`;
+            style.textContent += `:host([appearance=filled-darker-shadow]) slot[name=textarea]::slotted(textarea),:host([appearance=filled-lighter-shadow]) slot[name=textarea]::slotted(textarea){box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}`;
+            const controlSlot = document.createElement("slot");
+            controlSlot.name = "textarea";
+            controlSlot.part.add("textarea");
+            controlSlot.append(input);
+            controlSlot.addEventListener("slotchange", () => this.syncTextareaSlot());
+            shadow.append(style, label, controlSlot);
+            if (!this.dirty) {
+                const assigned = this.input();
+                this.currentValue = this.hasAttribute("value") || this.hasAttribute("default-value") ? this.defaultValue : assigned && assigned !== input ? assigned.value : this.defaultValue;
+                input.value = this.currentValue;
+            }
+            this.syncTextareaSlot();
+        }
+        disconnectedCallback() { stopHostAccessibleNameSync(this); }
+        attributeChangedCallback(name) {
+            const input = this.input();
+            if (!input)
+                return;
+            if (name === "value" || name === "default-value") {
+                input.defaultValue = this.defaultValue;
+                if (!this.dirty) {
+                    this.currentValue = this.defaultValue;
+                    input.value = this.currentValue;
+                }
+            }
+            if (name === "rows")
+                input.rows = Number(this.getAttribute(name) ?? 3);
+            if (name === "disabled")
+                input.disabled = this.hasAttribute(name) || this.formDisabled;
+            if (name === "required")
+                input.required = this.hasAttribute(name);
+            if (name === "read-only")
+                input.readOnly = this.hasAttribute(name);
+            if (name === "placeholder")
+                input.placeholder = this.getAttribute(name) ?? "";
+            if (name === "label") {
+                const label = this.shadowRoot?.querySelector("label");
+                if (label)
+                    label.textContent = this.getAttribute(name) ?? "";
+            }
+            if (["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "name", "autocomplete", "dirname", "form", "maxlength", "minlength", "cols", "wrap"].includes(name)) {
+                const value = this.getAttribute(name);
+                value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+            }
+            this.syncTextareaSlot();
+        }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; this.syncTextareaSlot(); }
+        formResetCallback() { this.dirty = false; const input = this.input(); this.currentValue = this.defaultValue; if (input) {
+            input.value = this.currentValue;
+            this.syncForm(input);
+        } }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = state; }
+        focus(options) { this.input()?.focus(options); }
+        select() { this.input()?.select(); }
+        checkValidity() { return this.internals?.checkValidity() ?? this.input()?.checkValidity() ?? true; }
+        reportValidity() { return this.internals?.reportValidity() ?? this.input()?.reportValidity() ?? true; }
+        input() {
+            const assigned = this.querySelector('textarea[slot="textarea"]');
+            if (assigned)
+                return assigned;
+            const slot = this.shadowRoot?.querySelector('slot[name="textarea"]');
+            return slot?.assignedElements().find((element) => element instanceof HTMLTextAreaElement) ?? this.shadowRoot?.querySelector(".textarea-fallback") ?? null;
+        }
+        syncTextareaSlot() {
+            const input = this.input();
+            if (!input)
+                return;
+            const fallback = this.shadowRoot?.querySelector(".textarea-fallback");
+            if (this.boundTextarea !== input) {
+                this.boundTextarea?.removeEventListener("input", this.handleTextareaInput);
+                input.addEventListener("input", this.handleTextareaInput);
+                this.boundTextarea = input;
+            }
+            if (input !== fallback)
+                this.slotTextareaDefaults = rememberNativeFormControlDefaults(this.slotTextareaDefaults, input);
+            if (fallback) {
+                const assigned = input !== fallback;
+                fallback.hidden = assigned;
+                fallback.setAttribute("aria-hidden", String(assigned));
+            }
+            if (input !== fallback) {
+                for (const name of ["autocomplete", "dirname", "form", "maxlength", "minlength", "cols", "wrap"])
+                    if (!input.hasAttribute(name) && this.hasAttribute(name))
+                        input.setAttribute(name, this.getAttribute(name));
+                if (!input.hasAttribute("aria-label") && !input.hasAttribute("aria-labelledby")) {
+                    const label = this.getAttribute("label");
+                    if (label)
+                        input.setAttribute("aria-label", label);
+                }
+                if (this.hasAttribute("name"))
+                    input.removeAttribute("name");
+                if (!this.dirty && (this.hasAttribute("value") || this.hasAttribute("default-value")))
+                    input.value = this.currentValue;
+            }
+            const defaults = input === fallback ? undefined : this.slotTextareaDefaults;
+            input.disabled = this.disabled || this.formDisabled || Boolean(defaults?.disabled);
+            input.required = this.required || Boolean(defaults?.required);
+            input.readOnly = this.readOnly || Boolean(defaults?.readOnly);
+            syncHostAccessibleName(this, input);
+            this.syncForm(input);
+        }
+        handleTextareaInput = (event) => { const input = this.input(); if (!input)
+            return; this.currentValue = input.value; this.dirty = true; this.syncForm(input); this.dispatchEvent(new CustomEvent("spui-input", { bubbles: true, composed: true, detail: { value: input.value, sourceEvent: event } })); };
+        syncForm(input) {
+            if (!input)
+                return;
+            this.currentValue = input.value;
+            this.internals?.setFormValue(input.disabled || this.formDisabled ? null : input.value, input.value);
+            const validity = input.validity;
+            const flags = { badInput: validity.badInput, patternMismatch: validity.patternMismatch, rangeOverflow: validity.rangeOverflow, rangeUnderflow: validity.rangeUnderflow, stepMismatch: validity.stepMismatch, tooLong: validity.tooLong, tooShort: validity.tooShort, typeMismatch: validity.typeMismatch, valueMissing: validity.valueMissing, customError: false };
+            try {
+                this.internals?.setValidity(validity.valid ? {} : flags, input.validationMessage, input);
+            }
+            catch { /* Native validity remains available inside the shadow root. */ }
+        }
+    }
+    customElements.define("spui-textarea", SpuiTextArea);
+}

package/dist/elements/toast.d.ts

@@ -0,0 +1,25 @@
+export type ToastIntent = "info" | "success" | "warning" | "error";
+export type ToastPoliteness = "polite" | "assertive";
+export type ToastAppearance = "brand" | "inverted";
+export type ToastContent = string | Node;
+export type ToastOptions = {
+    id?: string;
+    /** Lower values are promoted first when a limited Toaster has room. Equal priorities keep dispatch order. */
+    priority?: number;
+    title?: ToastContent;
+    body?: ToastContent;
+    actionLabel?: string;
+    onAction?: (id: string) => void;
+    intent?: ToastIntent;
+    appearance?: ToastAppearance;
+    politeness?: ToastPoliteness;
+    /** Milliseconds before automatic dismissal. Use 0 or -1 to keep the toast until dismissed. */
+    timeout?: number;
+    dismissLabel?: string;
+    pauseOnHover?: boolean;
+    pauseOnWindowBlur?: boolean;
+};
+export declare function defineToastBody(): void;
+export declare function defineToastFooter(): void;
+export declare function defineToastTitle(): void;
+export declare function defineToast(): void;

package/dist/elements/toast.js

@@ -0,0 +1,337 @@
+import { base } from "./shared.js";
+function toastIntentIcon(document, intent) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 20 20");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    const paths = {
+        info: "M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM9 8h2v6H9zm0-3h2v2H9z",
+        success: "M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1 12.2-3.2-3.2 1.4-1.4L9 10.9l4.8-4.8 1.4 1.4Z",
+        warning: "M10 1.5 19 18H1L10 1.5Zm-1 6v5h2v-5zm0 7v2h2v-2z",
+        error: "M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.5 11.6-1.4 1.4L10 11.4l-2.1 2.1-1.4-1.4L8.6 10 6.5 7.9l1.4-1.4L10 8.6l2.1-2.1 1.4 1.4L11.4 10z",
+    };
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", paths[intent]);
+    svg.append(path);
+    return svg;
+}
+function defineToastSimplePart(tag, markup, css) {
+    if (customElements.get(tag))
+        return;
+    class SpuiToastPart extends HTMLElement {
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const root = document.createElement("div");
+            root.part.add("root");
+            root.innerHTML = markup;
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0;color:inherit;font:inherit}${css}`;
+            shadow.append(style, root);
+        }
+    }
+    customElements.define(tag, SpuiToastPart);
+}
+export function defineToastBody() {
+    defineToastSimplePart("spui-toast-body", '<slot></slot><slot name="subtitle"></slot>', ":host{grid-column:2;line-height:1.45;overflow-wrap:anywhere}slot[name=subtitle]{display:block;margin-block-start:4px;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font-size:.9em}");
+}
+export function defineToastFooter() {
+    defineToastSimplePart("spui-toast-footer", "<slot></slot>", ":host{grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spui-control-gap,8px);padding-block-start:8px}");
+}
+export function defineToastTitle() {
+    if (customElements.get("spui-toast-title"))
+        return;
+    class SpuiToastTitle extends HTMLElement {
+        static observedAttributes = ["intent"];
+        mediaSlot;
+        fallback;
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const media = document.createElement("span");
+                media.className = "media";
+                media.part.add("media");
+                this.fallback = document.createElement("span");
+                this.fallback.className = "fallback";
+                this.fallback.setAttribute("aria-hidden", "true");
+                media.append(this.fallback);
+                this.mediaSlot = document.createElement("slot");
+                this.mediaSlot.name = "media";
+                this.mediaSlot.addEventListener("slotchange", () => this.syncMedia());
+                media.append(this.mediaSlot);
+                const text = document.createElement("span");
+                text.className = "text";
+                text.part.add("text");
+                text.append(document.createElement("slot"));
+                const action = document.createElement("slot");
+                action.name = "action";
+                action.part.add("action");
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;color:inherit;font:inherit;font-weight:var(--fontWeightSemibold,600)}.media{display:grid;place-items:center;inline-size:20px;block-size:20px;color:var(--spui-toast-intent-color,var(--spui-ui-accent,#0078d4))}.media:empty{display:none}.media svg{inline-size:20px;block-size:20px;fill:currentColor}.fallback[hidden]{display:none}.text{min-width:0;overflow-wrap:anywhere}slot[name=action]{display:block;margin-inline-start:auto}`;
+                shadow.append(style, media, text, action);
+            }
+            this.syncMedia();
+        }
+        attributeChangedCallback() { if (this.isConnected)
+            this.syncMedia(); }
+        refresh() { this.syncMedia(); }
+        syncMedia() {
+            if (!this.fallback || !this.mediaSlot)
+                return;
+            const assigned = this.mediaSlot.assignedNodes({ flatten: true }).length > 0;
+            this.fallback.replaceChildren();
+            const intent = (this.getAttribute("intent") ?? this.closest("spui-toast")?.getAttribute("intent") ?? "info");
+            if (!assigned)
+                this.fallback.append(toastIntentIcon(this.ownerDocument, ["info", "success", "warning", "error"].includes(intent) ? intent : "info"));
+            this.fallback.hidden = assigned;
+        }
+    }
+    customElements.define("spui-toast-title", SpuiToastTitle);
+}
+let generatedId = 0;
+const makeId = () => globalThis.crypto?.randomUUID?.() ?? `spui-toast-${Date.now()}-${++generatedId}`;
+export function defineToast() {
+    if (customElements.get("spui-toast"))
+        return;
+    defineToastTitle();
+    defineToastBody();
+    defineToastFooter();
+    class SpuiToast extends HTMLElement {
+        static observedAttributes = ["toast-id", "intent", "appearance", "politeness", "timeout", "dismiss-label", "priority"];
+        timer;
+        startedAt = 0;
+        remaining = 3000;
+        pauseReasons = new Set();
+        announcementScheduled = false;
+        closeButton;
+        titleSlot;
+        contentObserver;
+        onWindowBlur = () => { if (this.hasAttribute("pause-on-window-blur") && this.getAttribute("pause-on-window-blur") !== "false")
+            this.pauseFor("window"); };
+        onWindowFocus = () => this.resumeFor("window");
+        onVisibility = () => {
+            if (document.hidden && this.hasAttribute("pause-on-window-blur") && this.getAttribute("pause-on-window-blur") !== "false")
+                this.pauseFor("visibility");
+            else
+                this.resumeFor("visibility");
+        };
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            const toaster = this.parentElement;
+            if (toaster?.localName === "spui-toaster")
+                toaster.registerToast?.(this);
+            this.syncSemantics();
+            this.resetTimer();
+            this.ownerDocument.defaultView?.addEventListener("blur", this.onWindowBlur);
+            this.ownerDocument.defaultView?.addEventListener("focus", this.onWindowFocus);
+            this.ownerDocument.addEventListener("visibilitychange", this.onVisibility);
+            this.addEventListener("mouseenter", this.onMouseEnter);
+            this.addEventListener("mouseleave", this.onMouseLeave);
+            this.addEventListener("focusin", this.onFocusIn);
+            this.addEventListener("focusout", this.onFocusOut);
+            this.addEventListener("slotchange", this.onSlotChange, true);
+            this.syncTitle();
+            this.scheduleAnnouncement();
+            const Observer = this.ownerDocument.defaultView?.MutationObserver;
+            if (Observer) {
+                this.contentObserver = new Observer(this.scheduleAnnouncement);
+                this.contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+            }
+        }
+        disconnectedCallback() {
+            this.clearTimer();
+            this.pauseReasons.clear();
+            this.contentObserver?.disconnect();
+            this.contentObserver = undefined;
+            this.ownerDocument.defaultView?.removeEventListener("blur", this.onWindowBlur);
+            this.ownerDocument.defaultView?.removeEventListener("focus", this.onWindowFocus);
+            this.ownerDocument.removeEventListener("visibilitychange", this.onVisibility);
+            this.removeEventListener("mouseenter", this.onMouseEnter);
+            this.removeEventListener("mouseleave", this.onMouseLeave);
+            this.removeEventListener("focusin", this.onFocusIn);
+            this.removeEventListener("focusout", this.onFocusOut);
+            this.removeEventListener("slotchange", this.onSlotChange, true);
+        }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "timeout")
+                this.resetTimer();
+            if (name === "priority") {
+                const toaster = this.parentElement;
+                if (toaster?.localName === "spui-toaster")
+                    toaster.refreshQueue?.();
+            }
+            if (name === "intent" || name === "politeness" || name === "dismiss-label")
+                this.syncSemantics();
+            if (name === "intent" || name === "politeness")
+                this.scheduleAnnouncement();
+        }
+        get toastId() { return this.getAttribute("toast-id") ?? ""; }
+        configure(options) {
+            const id = options.id || this.toastId || makeId();
+            this.hidden = false;
+            this.setAttribute("toast-id", id);
+            if (Number.isFinite(options.priority))
+                this.setAttribute("priority", String(options.priority));
+            else
+                this.removeAttribute("priority");
+            if (options.intent)
+                this.setAttribute("intent", options.intent);
+            else
+                this.removeAttribute("intent");
+            if (options.appearance)
+                this.setAttribute("appearance", options.appearance);
+            else
+                this.removeAttribute("appearance");
+            if (options.politeness)
+                this.setAttribute("politeness", options.politeness);
+            else
+                this.removeAttribute("politeness");
+            this.setAttribute("timeout", String(options.timeout ?? 3000));
+            this.setAttribute("dismiss-label", options.dismissLabel ?? "Dismiss");
+            this.setAttribute("pause-on-hover", options.pauseOnHover ? "" : "false");
+            this.setAttribute("pause-on-window-blur", options.pauseOnWindowBlur ? "" : "false");
+            this.setPart("title", options.title);
+            this.setPart("body", options.body);
+            this.querySelector("[data-spui-toast-generated-action]")?.remove();
+            if (options.actionLabel) {
+                const button = this.ownerDocument.createElement("button");
+                button.slot = "action";
+                button.type = "button";
+                button.dataset.spuiToastGeneratedAction = "";
+                button.textContent = options.actionLabel;
+                button.addEventListener("click", () => { options.onAction?.(id); this.dismiss("action"); });
+                this.append(button);
+            }
+            this.syncSemantics();
+            this.resetTimer();
+            this.syncTitle();
+            this.scheduleAnnouncement();
+            return id;
+        }
+        dismiss(reason = "dismiss") {
+            if (this.hidden)
+                return;
+            this.clearTimer();
+            const active = this.ownerDocument.activeElement;
+            const hadFocus = active === this || this.contains(active) || Boolean(this.shadowRoot?.activeElement);
+            this.hidden = true;
+            this.dispatchEvent(new CustomEvent("spui-dismiss", { detail: { id: this.toastId, reason, hadFocus }, bubbles: true, composed: true }));
+        }
+        pause(reason = "imperative") { this.pauseFor(reason); }
+        play(reason = "imperative") { this.resumeFor(reason); if (reason === "queue")
+            this.scheduleAnnouncement(); }
+        setPart(slot, value) {
+            this.querySelector(`[data-spui-toast-part="${slot}"]`)?.remove();
+            if (value === undefined)
+                return;
+            const wrapper = this.ownerDocument.createElement(slot === "body" ? "spui-toast-body" : "spui-toast-title");
+            wrapper.dataset.spuiToastPart = slot;
+            if (slot === "title")
+                wrapper.slot = "title";
+            if (typeof value === "string")
+                wrapper.textContent = value;
+            else
+                wrapper.append(value);
+            this.append(wrapper);
+        }
+        onMouseEnter = () => { if (this.hasAttribute("pause-on-hover") && this.getAttribute("pause-on-hover") !== "false")
+            this.pauseFor("hover"); };
+        onMouseLeave = () => this.resumeFor("hover");
+        onFocusIn = () => this.pauseFor("focus");
+        onFocusOut = (event) => { if (!this.contains(event.relatedTarget))
+            this.resumeFor("focus"); };
+        onSlotChange = () => { this.syncTitle(); this.scheduleAnnouncement(); };
+        syncTitle() {
+            if (!this.titleSlot)
+                return;
+            const hasTitle = this.titleSlot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+            this.toggleAttribute("data-has-title", hasTitle);
+        }
+        syncSemantics() {
+            const intent = this.getAttribute("intent") ?? "info";
+            const politeness = this.getAttribute("politeness") ?? (intent === "info" ? "polite" : "assertive");
+            this.setAttribute("role", "group");
+            this.removeAttribute("aria-live");
+            this.removeAttribute("aria-atomic");
+            if (this.closeButton)
+                this.closeButton.setAttribute("aria-label", this.getAttribute("dismiss-label") ?? "Dismiss");
+            for (const title of this.querySelectorAll("spui-toast-title"))
+                title.refresh?.();
+        }
+        scheduleAnnouncement() {
+            if (this.announcementScheduled)
+                return;
+            this.announcementScheduled = true;
+            queueMicrotask(() => {
+                this.announcementScheduled = false;
+                if (!this.isConnected || this.hidden)
+                    return;
+                const message = this.textContent?.replace(/\s+/g, " ").trim();
+                if (!message)
+                    return;
+                const intent = this.getAttribute("intent") ?? "info";
+                const requested = this.getAttribute("politeness");
+                const politeness = requested === "polite" || requested === "assertive" ? requested : intent === "info" ? "polite" : "assertive";
+                this.dispatchEvent(new CustomEvent("spui-toast-announce", { detail: { id: this.toastId, message, politeness }, bubbles: true, composed: true }));
+            });
+        }
+        clearTimer() { if (this.timer !== undefined)
+            this.ownerDocument.defaultView?.clearTimeout(this.timer); this.timer = undefined; }
+        resetTimer() {
+            this.clearTimer();
+            const timeout = Number(this.getAttribute("timeout") ?? 3000);
+            this.remaining = timeout === 0 || timeout === -1 ? 0 : Number.isFinite(timeout) && timeout > 0 ? timeout : 3000;
+            this.startTimer();
+        }
+        pauseFor(reason) {
+            this.pauseReasons.add(reason);
+            if (this.timer === undefined)
+                return;
+            this.remaining = Math.max(0, this.remaining - (performance.now() - this.startedAt));
+            this.clearTimer();
+        }
+        resumeFor(reason) {
+            this.pauseReasons.delete(reason);
+            this.startTimer();
+        }
+        startTimer() {
+            if (!this.isConnected || this.hidden || this.timer !== undefined || this.remaining === 0 || this.pauseReasons.size)
+                return;
+            this.startedAt = performance.now();
+            this.timer = this.ownerDocument.defaultView.setTimeout(() => this.dismiss("timeout"), this.remaining);
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const header = this.ownerDocument.createElement("div");
+            header.className = "header";
+            this.titleSlot = this.ownerDocument.createElement("slot");
+            this.titleSlot.name = "title";
+            this.titleSlot.part.add("title");
+            header.append(this.titleSlot);
+            this.closeButton = this.ownerDocument.createElement("button");
+            this.closeButton.type = "button";
+            this.closeButton.className = "close";
+            this.closeButton.setAttribute("aria-label", this.getAttribute("dismiss-label") ?? "Dismiss");
+            this.closeButton.part.add("dismiss");
+            const mark = this.ownerDocument.createElement("span");
+            mark.className = "close-mark";
+            mark.setAttribute("aria-hidden", "true");
+            this.closeButton.append(mark);
+            this.closeButton.addEventListener("click", () => this.dismiss("close"));
+            header.append(this.closeButton);
+            const body = this.ownerDocument.createElement("slot");
+            body.part.add("body");
+            const action = this.ownerDocument.createElement("slot");
+            action.name = "action";
+            action.part.add("action");
+            const style = this.ownerDocument.createElement("style");
+            style.textContent = `${base}:host{display:block;box-sizing:border-box;inline-size:min(100%,420px);padding:12px 14px;border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));border-radius:var(--spui-toast-radius,var(--spui-control-radius,8px));background:var(--spui-toast-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));box-shadow:var(--spui-toast-shadow,0 8px 24px #0002);font:inherit;line-height:1.45;pointer-events:auto;animation:spui-toast-enter 180ms ease-out both}:host([hidden]){display:none}:host([intent=success]){--spui-toast-background:var(--spui-ui-success-surface,var(--spui-semantic-success-background,#dff6dd))}:host([intent=warning]){--spui-toast-background:var(--spui-ui-warning-surface,var(--spui-semantic-warning-background,#fff4ce))}:host([intent=error]){--spui-toast-background:var(--spui-ui-danger-surface,var(--spui-semantic-error-background,#fde7e9))}:host([appearance=brand]){background:var(--spui-toast-brand-background,var(--spui-ui-accent,#78716c));color:var(--spui-toast-brand-color,var(--spui-ui-accent-text,#fff))}:host([appearance=inverted]){background:var(--spui-toast-inverted-background,color-mix(in srgb,var(--spui-ui-text,#242424) 92%,var(--spui-ui-canvas,#f5f5f5) 8%));color:var(--spui-toast-inverted-color,color-mix(in srgb,var(--spui-ui-surface,#fff) 92%,var(--spui-ui-text,#242424) 8%))}.header{display:flex;align-items:start;justify-content:space-between;gap:8px;font-weight:var(--fontWeightSemibold,600)}slot[name=title]{display:none}:host([data-has-title]) slot[name=title]{display:block}slot:not([name]){display:block;margin-block-start:4px}slot[name=action]{display:block;margin-block-start:10px}::slotted(button[slot=action]){font:inherit}button.close{flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;margin-block-start:-6px;margin-inline-end:-8px;margin-block-end:-4px;margin-inline-start:0;padding:0;border:0;border-radius:var(--spui-control-radius,6px);background:transparent;color:inherit;cursor:pointer}button.close:hover{background:var(--spui-ui-surface-hover,#0001)}button.close:focus-visible,::slotted(button:focus-visible){outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}.close-mark{position:relative;inline-size:14px;block-size:14px}.close-mark:before,.close-mark:after{content:"";position:absolute;inset-block-start:6px;inset-inline-start:0;inline-size:14px;block-size:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}.close-mark:after{transform:rotate(-45deg)}@keyframes spui-toast-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(forced-colors:active){:host{border-color:CanvasText;color:CanvasText;background:Canvas;box-shadow:none}.close-mark:before,.close-mark:after{background:ButtonText}}`;
+            shadow.replaceChildren(style, header, body, action);
+        }
+    }
+    customElements.define("spui-toast", SpuiToast);
+}

package/dist/elements/toaster.d.ts

@@ -0,0 +1,6 @@
+export type ToastPosition = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+export type ToastAnnounceOptions = {
+    politeness: "polite" | "assertive";
+};
+export type ToastAnnounce = (message: string, options: ToastAnnounceOptions) => void;
+export declare function defineToaster(): void;