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

package/dist/elements/spin-button.js

@@ -0,0 +1,499 @@
+import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+export function defineSpinButton() {
+    if (customElements.get("spui-spin-button"))
+        return;
+    class SpuiSpinButton extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["label", "value", "default-value", "display-value", "min", "max", "step", "step-page", "precision", "size", "appearance", "disabled", "required", "read-only", "name", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "aria-valuetext", "increment-label", "decrement-label"];
+        internals;
+        currentValue;
+        formDisabled = false;
+        draft;
+        previousDraft;
+        boundInput;
+        slotInputDefaults;
+        boundDecrement;
+        boundIncrement;
+        heldStepDirection = 0;
+        heldStepInput;
+        heldStepEvent;
+        heldStepElapsed = 0;
+        heldStepTimer;
+        get form() { return this.internals?.form ?? null; }
+        constructor() {
+            super();
+            try {
+                this.internals = this.attachInternals();
+            }
+            catch { /* Native input behavior remains available without ElementInternals. */ }
+        }
+        connectedCallback() { this.render(); }
+        disconnectedCallback() { stopHostAccessibleNameSync(this); this.clearHeldStep(); }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (!this.isConnected)
+                return;
+            if (name === "label" || name === "increment-label" || name === "decrement-label") {
+                this.render();
+                return;
+            }
+            const input = this.getInput();
+            if (!input)
+                return;
+            if (name === "value") {
+                this.currentValue = value ?? "";
+                input.value = this.getAttribute("display-value") ?? this.currentValue;
+                this.syncAria(input);
+            }
+            else if (name === "default-value") {
+                if (this.getAttribute("value") === null && this.currentValue === undefined) {
+                    this.currentValue = value ?? "";
+                    input.value = this.currentValue;
+                    this.syncAria(input);
+                }
+            }
+            else if (name === "display-value")
+                input.value = value ?? this.currentValue ?? "";
+            else if (["min", "max", "step"].includes(name)) {
+                if (value === null)
+                    input.removeAttribute(name);
+                else
+                    input.setAttribute(name, value);
+                this.updateButtons(input);
+            }
+            else if (name === "step-page" || name === "precision" || name === "size" || name === "appearance") {
+                this.render();
+                return;
+            }
+            else if (name === "disabled")
+                input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(this.slotInputDefaults?.disabled);
+            else if (name === "required")
+                input.required = this.hasAttribute("required") || Boolean(this.slotInputDefaults?.required);
+            else if (name === "read-only")
+                input.readOnly = this.hasAttribute("read-only") || Boolean(this.slotInputDefaults?.readOnly);
+            else if (name === "name") { /* The form-associated host owns the submitted name. */ }
+            else if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid" || name === "aria-valuetext")
+                value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+            this.syncAria(input);
+            this.syncFormState(input);
+            this.updateButtons(input);
+        }
+        get value() { return this.currentValue ?? this.getAttribute("value") ?? this.getInput()?.value ?? ""; }
+        set value(value) {
+            this.currentValue = value === null ? "" : String(value);
+            const input = this.getInput();
+            if (input) {
+                input.value = this.getAttribute("display-value") ?? this.currentValue;
+                this.syncAria(input);
+                this.syncFormState(input);
+                this.updateButtons(input);
+            }
+        }
+        get valueAsNumber() { return this.currentValue === "" || this.currentValue === undefined ? NaN : Number(this.currentValue); }
+        get defaultValue() {
+            const value = this.getAttribute("default-value");
+            if (value !== null)
+                return value === "" ? null : Number(value);
+            const input = this.getInput();
+            const fallback = this.shadowRoot?.querySelector(".input-fallback");
+            const nativeDefault = input && input !== fallback ? this.slotInputDefaults?.defaultValue ?? input.defaultValue : "";
+            return nativeDefault === "" ? null : Number(nativeDefault);
+        }
+        set defaultValue(value) { if (value === null)
+            this.removeAttribute("default-value");
+        else
+            this.setAttribute("default-value", String(value)); }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; this.syncSlots(); }
+        formResetCallback() { this.currentValue = this.getAttribute("value") ?? String(this.defaultValue ?? 0); this.draft = undefined; this.previousDraft = undefined; const input = this.getInput(); if (input) {
+            input.value = this.getAttribute("display-value") ?? this.currentValue;
+            this.syncAria(input);
+            this.syncFormState(input);
+            this.updateButtons(input);
+        } }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = state; }
+        numberValue(value = this.currentValue) {
+            if (value === null || value === undefined || value.trim() === "")
+                return null;
+            const number = Number(value);
+            return Number.isFinite(number) ? number : null;
+        }
+        decimals() {
+            const precision = Number(this.getAttribute("precision"));
+            if (this.hasAttribute("precision") && Number.isFinite(precision))
+                return Math.max(0, Math.min(12, Math.trunc(precision)));
+            const step = this.getAttribute("step") ?? "1";
+            const parts = step.toLowerCase().split("e");
+            const fraction = (parts[0].split(".")[1] ?? "").length - Number(parts[1] ?? 0);
+            return Math.max(0, Math.min(12, fraction));
+        }
+        rounded(value) { const scale = 10 ** this.decimals(); return Math.round((value + Number.EPSILON) * scale) / scale; }
+        bounds(value) {
+            const min = this.hasAttribute("min") ? Number(this.getAttribute("min")) : -Infinity;
+            const max = this.hasAttribute("max") ? Number(this.getAttribute("max")) : Infinity;
+            return Math.min(max, Math.max(min, this.rounded(value)));
+        }
+        syncAria(input) {
+            syncHostAccessibleName(this, input);
+            const value = this.numberValue();
+            const min = this.getAttribute("min");
+            const max = this.getAttribute("max");
+            if (min === null)
+                input.removeAttribute("aria-valuemin");
+            else
+                input.setAttribute("aria-valuemin", min);
+            if (max === null)
+                input.removeAttribute("aria-valuemax");
+            else
+                input.setAttribute("aria-valuemax", max);
+            if (value === null)
+                input.removeAttribute("aria-valuenow");
+            else
+                input.setAttribute("aria-valuenow", String(value));
+            const display = this.getAttribute("display-value");
+            const valueText = this.getAttribute("aria-valuetext") ?? display;
+            if (valueText)
+                input.setAttribute("aria-valuetext", valueText);
+            else
+                input.removeAttribute("aria-valuetext");
+        }
+        syncFormState(input) {
+            const value = this.numberValue();
+            this.internals?.setFormValue(value === null ? null : String(value));
+            const v = input.validity;
+            const flags = { valueMissing: v.valueMissing, rangeUnderflow: v.rangeUnderflow, rangeOverflow: v.rangeOverflow, stepMismatch: v.stepMismatch, badInput: v.badInput, typeMismatch: v.typeMismatch, patternMismatch: v.patternMismatch };
+            try {
+                this.internals?.setValidity(v.valid ? {} : flags, input.validationMessage, input);
+            }
+            catch { /* Keep native input validation when shadow anchors are unsupported. */ }
+        }
+        updateButtons(input) {
+            const value = this.numberValue();
+            const min = this.hasAttribute("min") ? Number(this.getAttribute("min")) : -Infinity;
+            const max = this.hasAttribute("max") ? Number(this.getAttribute("max")) : Infinity;
+            const disabled = input.disabled || input.readOnly;
+            const down = this.getStepper("decrement");
+            const up = this.getStepper("increment");
+            if (down)
+                down.disabled = disabled || (value !== null && value <= min);
+            if (up)
+                up.disabled = disabled || (value !== null && value >= max);
+        }
+        emitChange(input, sourceEvent, value, displayValue, emitValueChange = true) {
+            const detail = { value, displayValue, sourceEvent };
+            const committedValue = value === null ? "" : String(value);
+            this.currentValue = committedValue;
+            input.value = this.getAttribute("display-value") ?? committedValue;
+            this.draft = undefined;
+            this.previousDraft = undefined;
+            this.syncAria(input);
+            this.syncFormState(input);
+            this.updateButtons(input);
+            this.dispatchEvent(new CustomEvent("spui-commit", { detail, bubbles: true, composed: true }));
+            if (emitValueChange)
+                this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: committedValue, sourceEvent, committed: true }, bubbles: true, composed: true }));
+        }
+        commit(input, sourceEvent) {
+            const text = this.draft;
+            const parsed = text === undefined ? this.numberValue() : (text.trim() === "" ? null : Number(text));
+            if (parsed !== null && !Number.isFinite(parsed)) {
+                input.value = this.getAttribute("display-value") ?? this.currentValue ?? "";
+                this.draft = undefined;
+                this.previousDraft = undefined;
+                return;
+            }
+            const value = parsed === null ? null : this.bounds(parsed);
+            const oldValue = this.numberValue();
+            if (oldValue !== value || text !== undefined && text !== this.previousDraft)
+                this.emitChange(input, sourceEvent, value, text, false);
+            else {
+                input.value = this.getAttribute("display-value") ?? (value === null ? "" : String(value));
+                this.draft = undefined;
+                this.previousDraft = undefined;
+            }
+        }
+        step(input, event, direction, page = false) {
+            if (input.disabled || input.readOnly)
+                return;
+            const baseValue = this.draft !== undefined && this.draft.trim() !== "" ? Number(this.draft) : this.numberValue();
+            const step = Number(this.getAttribute(page ? "step-page" : "step") ?? "1");
+            const start = baseValue ?? (this.hasAttribute("min") ? Number(this.getAttribute("min")) : 0);
+            const next = this.bounds(start + direction * (Number.isFinite(step) && step > 0 ? step : 1));
+            if (this.numberValue() !== next || this.draft !== undefined)
+                this.emitChange(input, event, next);
+        }
+        getInput() {
+            const slot = this.shadowRoot?.querySelector('slot[name="input"]');
+            return slot?.assignedElements().find((element) => element instanceof HTMLInputElement)
+                ?? this.shadowRoot?.querySelector(".input-fallback") ?? undefined;
+        }
+        getStepper(direction) {
+            const name = direction === "increment" ? "incrementButton" : "decrementButton";
+            const slot = this.shadowRoot?.querySelector(`slot[name="${name}"]`);
+            return slot?.assignedElements().find((element) => element instanceof HTMLButtonElement)
+                ?? this.shadowRoot?.querySelector(`[part~="${direction}-button"]`) ?? undefined;
+        }
+        syncSlots() {
+            const input = this.getInput();
+            if (input) {
+                const fallback = this.shadowRoot?.querySelector(".input-fallback");
+                if (input !== fallback)
+                    this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
+                const defaults = input === fallback ? undefined : this.slotInputDefaults;
+                if (fallback) {
+                    const assigned = input !== fallback;
+                    fallback.hidden = assigned;
+                    fallback.setAttribute("aria-hidden", String(assigned));
+                    fallback.removeAttribute("name");
+                }
+                if (this.boundInput !== input) {
+                    this.boundInput?.removeEventListener("input", this.handleInput);
+                    this.boundInput?.removeEventListener("change", this.handleChange);
+                    this.boundInput?.removeEventListener("blur", this.handleBlur);
+                    this.boundInput?.removeEventListener("keydown", this.handleKeyDown);
+                    input.addEventListener("input", this.handleInput);
+                    input.addEventListener("change", this.handleChange);
+                    input.addEventListener("blur", this.handleBlur);
+                    input.addEventListener("keydown", this.handleKeyDown);
+                    this.boundInput = input;
+                }
+                if (!input.id)
+                    input.id = this.shadowRoot?.querySelector("label")?.htmlFor ?? `spin-${crypto.randomUUID()}`;
+                if (!input.hasAttribute("role"))
+                    input.setAttribute("role", "spinbutton");
+                if (!input.hasAttribute("aria-label") && !input.hasAttribute("aria-labelledby")) {
+                    const label = this.getAttribute("label");
+                    if (label)
+                        input.setAttribute("aria-label", label);
+                }
+                for (const name of ["min", "max", "aria-label", "aria-description", "aria-describedby", "aria-invalid"]) {
+                    if (input.hasAttribute(name))
+                        continue;
+                    const value = this.getAttribute(name);
+                    if (value !== null)
+                        input.setAttribute(name, value);
+                }
+                input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(defaults?.disabled);
+                input.required = this.hasAttribute("required") || Boolean(defaults?.required);
+                input.readOnly = this.hasAttribute("read-only") || Boolean(defaults?.readOnly);
+                input.removeAttribute("name");
+                if (this.draft === undefined)
+                    input.value = this.getAttribute("display-value") ?? this.currentValue ?? "";
+                this.syncAria(input);
+                this.syncFormState(input);
+                this.updateButtons(input);
+            }
+            const decrement = this.getStepper("decrement");
+            if (decrement && !decrement.hasAttribute("type"))
+                decrement.type = "button";
+            const decrementFallback = this.shadowRoot?.querySelector('[part~="decrement-button"]');
+            if (decrementFallback) {
+                const assigned = decrement !== decrementFallback;
+                decrementFallback.hidden = assigned;
+                decrementFallback.setAttribute("aria-hidden", String(assigned));
+            }
+            if (this.boundDecrement !== decrement) {
+                this.boundDecrement?.removeEventListener("click", this.handleDecrement);
+                this.boundDecrement?.removeEventListener("mousedown", this.handleDecrement);
+                this.boundDecrement?.removeEventListener("mouseup", this.handleHeldStepEnd);
+                this.boundDecrement?.removeEventListener("mouseleave", this.handleHeldStepEnd);
+                decrement?.addEventListener("click", this.handleDecrement);
+                decrement?.addEventListener("mousedown", this.handleDecrement);
+                decrement?.addEventListener("mouseup", this.handleHeldStepEnd);
+                decrement?.addEventListener("mouseleave", this.handleHeldStepEnd);
+                this.boundDecrement = decrement;
+            }
+            const increment = this.getStepper("increment");
+            if (increment && !increment.hasAttribute("type"))
+                increment.type = "button";
+            const incrementFallback = this.shadowRoot?.querySelector('[part~="increment-button"]');
+            if (incrementFallback) {
+                const assigned = increment !== incrementFallback;
+                incrementFallback.hidden = assigned;
+                incrementFallback.setAttribute("aria-hidden", String(assigned));
+            }
+            if (this.boundIncrement !== increment) {
+                this.boundIncrement?.removeEventListener("click", this.handleIncrement);
+                this.boundIncrement?.removeEventListener("mousedown", this.handleIncrement);
+                this.boundIncrement?.removeEventListener("mouseup", this.handleHeldStepEnd);
+                this.boundIncrement?.removeEventListener("mouseleave", this.handleHeldStepEnd);
+                increment?.addEventListener("click", this.handleIncrement);
+                increment?.addEventListener("mousedown", this.handleIncrement);
+                increment?.addEventListener("mouseup", this.handleHeldStepEnd);
+                increment?.addEventListener("mouseleave", this.handleHeldStepEnd);
+                this.boundIncrement = increment;
+            }
+        }
+        handleInput = (event) => {
+            const input = event.currentTarget;
+            if (this.draft === undefined)
+                this.previousDraft = this.getAttribute("display-value") ?? this.currentValue ?? "";
+            this.draft = input.value;
+            const parsed = this.draft.trim() === "" ? null : Number(this.draft);
+            if (parsed === null)
+                input.removeAttribute("aria-valuenow");
+            else if (Number.isFinite(parsed))
+                input.setAttribute("aria-valuenow", String(parsed));
+            this.internals?.setFormValue(parsed === null || !Number.isFinite(parsed) ? null : String(parsed));
+            this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: parsed === null ? "" : String(parsed), sourceEvent: event, committed: false }, bubbles: true, composed: true }));
+        };
+        handleChange = (event) => this.commit(event.currentTarget, event);
+        handleBlur = (event) => this.commit(event.currentTarget, event);
+        handleKeyDown = (rawEvent) => {
+            const event = rawEvent;
+            const input = event.currentTarget;
+            if (input.readOnly)
+                return;
+            if (event.key === "ArrowUp" || event.key === "ArrowDown")
+                this.step(input, event, event.key === "ArrowUp" ? 1 : -1);
+            else if (event.key === "PageUp" || event.key === "PageDown") {
+                event.preventDefault();
+                this.step(input, event, event.key === "PageUp" ? 1 : -1, true);
+            }
+            else if (event.key === "Home" && !event.shiftKey && this.hasAttribute("min")) {
+                const min = Number(this.getAttribute("min"));
+                if (this.numberValue() !== min)
+                    this.emitChange(input, event, min);
+            }
+            else if (event.key === "End" && !event.shiftKey && this.hasAttribute("max")) {
+                const max = Number(this.getAttribute("max"));
+                if (this.numberValue() !== max)
+                    this.emitChange(input, event, max);
+            }
+            else if (event.key === "Enter") {
+                this.commit(input, event);
+                this.submitFormFromEnter(input);
+            }
+            else if (event.key === "Escape" && this.draft !== undefined) {
+                input.value = this.getAttribute("display-value") ?? this.currentValue ?? "";
+                this.draft = undefined;
+                this.previousDraft = undefined;
+                this.syncAria(input);
+            }
+        };
+        submitFormFromEnter(input) {
+            const form = this.form;
+            if (!form || input.form === form)
+                return;
+            const submitter = Array.from(form.elements).find((control) => control instanceof HTMLButtonElement && control.type === "submit"
+                || control instanceof HTMLInputElement && (control.type === "submit" || control.type === "image"));
+            if (submitter) {
+                if (!submitter.disabled)
+                    form.requestSubmit(submitter);
+            }
+            else
+                form.requestSubmit();
+        }
+        handleDecrement = (event) => this.handleStepButton(event, -1);
+        handleIncrement = (event) => this.handleStepButton(event, 1);
+        handleStepButton(event, direction) {
+            if (event.type === "click" && event.detail !== 0)
+                return;
+            const input = this.getInput();
+            if (!input || input.disabled || input.readOnly)
+                return;
+            if (event.type === "mousedown" && event.button !== 0)
+                return;
+            this.clearHeldStep();
+            this.commit(input, event);
+            this.step(input, event, direction);
+            input.focus();
+            if (event.type !== "mousedown")
+                return;
+            this.heldStepDirection = direction;
+            this.heldStepInput = input;
+            this.heldStepEvent = event;
+            this.heldStepElapsed = 0;
+            this.scheduleHeldStep(300);
+        }
+        handleHeldStepEnd = () => this.clearHeldStep();
+        scheduleHeldStep(delay) {
+            this.heldStepTimer = setTimeout(() => {
+                const input = this.heldStepInput;
+                const stepper = this.getStepper(this.heldStepDirection > 0 ? "increment" : "decrement");
+                if (!this.heldStepDirection || !input || !stepper || stepper.disabled || input.disabled || input.readOnly) {
+                    this.clearHeldStep();
+                    return;
+                }
+                this.step(input, this.heldStepEvent ?? new Event("mousedown"), this.heldStepDirection);
+                this.heldStepElapsed += delay;
+                const progress = Math.min(1, this.heldStepElapsed / 1000);
+                this.scheduleHeldStep(300 + (80 - 300) * progress);
+            }, delay);
+        }
+        clearHeldStep() {
+            if (this.heldStepTimer !== undefined)
+                clearTimeout(this.heldStepTimer);
+            this.heldStepTimer = undefined;
+            this.heldStepDirection = 0;
+            this.heldStepInput = undefined;
+            this.heldStepEvent = undefined;
+            this.heldStepElapsed = 0;
+        }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const id = `spin-${crypto.randomUUID()}`;
+            const label = document.createElement("label");
+            label.htmlFor = id;
+            label.textContent = this.getAttribute("label") ?? "";
+            label.part.add("label");
+            const control = document.createElement("div");
+            control.part.add("control-group");
+            const input = document.createElement("input");
+            input.className = "input-fallback";
+            input.id = id;
+            input.type = "text";
+            input.inputMode = "decimal";
+            input.autocomplete = "off";
+            input.setAttribute("role", "spinbutton");
+            const initial = this.currentValue ?? this.getAttribute("value") ?? this.getAttribute("default-value") ?? this.querySelector('input[slot="input"]')?.value ?? "0";
+            this.currentValue = initial;
+            input.value = this.getAttribute("display-value") ?? initial;
+            for (const name of ["min", "max", "aria-label", "aria-description", "aria-describedby", "aria-invalid"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    input.setAttribute(name, value);
+            }
+            input.disabled = this.hasAttribute("disabled");
+            input.required = this.hasAttribute("required");
+            input.readOnly = this.hasAttribute("read-only");
+            input.part.add("input");
+            const buttons = document.createElement("span");
+            buttons.part.add("buttons");
+            const makeButton = (direction, fallback, symbol) => {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.tabIndex = -1;
+                button.setAttribute("aria-label", this.getAttribute(`${direction}-label`) ?? fallback);
+                button.part.add(`${direction}-button`);
+                button.innerHTML = `<svg aria-hidden="true" viewBox="0 0 16 16"><path d="${symbol}"/></svg>`;
+                return button;
+            };
+            const decrement = makeButton("decrement", "Decrement value", "m3.25 5.5 4.75 4.75 4.75-4.75");
+            const increment = makeButton("increment", "Increment value", "m3.25 10.5 4.75-4.75 4.75 4.75");
+            const inputSlot = document.createElement("slot");
+            inputSlot.name = "input";
+            inputSlot.part.add("input");
+            inputSlot.append(input);
+            inputSlot.addEventListener("slotchange", () => this.syncSlots());
+            const incrementSlot = document.createElement("slot");
+            incrementSlot.name = "incrementButton";
+            incrementSlot.part.add("increment-button-slot");
+            incrementSlot.append(increment);
+            incrementSlot.addEventListener("slotchange", () => this.syncSlots());
+            const decrementSlot = document.createElement("slot");
+            decrementSlot.name = "decrementButton";
+            decrementSlot.part.add("decrement-button-slot");
+            decrementSlot.append(decrement);
+            decrementSlot.addEventListener("slotchange", () => this.syncSlots());
+            buttons.append(incrementSlot, decrementSlot);
+            control.append(inputSlot, buttons);
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);width:100%}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}[part~=control-group]{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:1fr 1fr;min-height:var(--spui-control-height,32px);column-gap:4px;position:relative;isolation:isolate;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))));color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}[part~=control-group]:focus-within{outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}:host([size=small]) [part~=control-group]{min-height:24px}:host([appearance=underline]) [part~=control-group]{border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) [part~=control-group]{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) [part~=control-group]{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}input{grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}span[part=buttons]{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;min-height:0}button{display:grid;place-items:center;min-width:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}button:hover:not(:disabled){background:var(--spui-ui-surface-hover,#f5f5f5)}button:disabled{opacity:.42;cursor:not-allowed}button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}input:disabled{opacity:.55}input:read-only{cursor:default}@media(forced-colors:active){[part~=control-group]{border-color:FieldText}button:focus-visible,input:focus-visible{outline:1px solid Highlight}}`;
+            style.textContent += "[part~=control-group]{grid-template-rows:24px 24px;min-height:50px}:host([size=small]) [part~=control-group]{min-height:50px}span[part=buttons]{grid-template-rows:24px 24px;min-height:48px}button{min-height:24px}";
+            style.textContent += "slot[name=input]{display:contents}slot[name=input]::slotted(input){grid-column:1;grid-row:1/3;min-width:0;width:100%;padding-inline:var(--spui-control-padding-inline,10px);border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:none}slot[name=incrementButton],slot[name=decrementButton]{display:contents}slot[name=incrementButton]::slotted(button),slot[name=decrementButton]::slotted(button){display:grid;place-items:center;min-width:24px;min-height:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}slot[name=incrementButton]::slotted(button:disabled),slot[name=decrementButton]::slotted(button:disabled){opacity:.42;cursor:not-allowed}";
+            shadow.replaceChildren(style, label, control);
+            this.syncSlots();
+        }
+    }
+    customElements.define("spui-spin-button", SpuiSpinButton);
+}

package/dist/elements/spinner.d.ts

@@ -0,0 +1,4 @@
+export type SpinnerSize = "extra-tiny" | "tiny" | "extra-small" | "small" | "medium" | "large" | "extra-large" | "huge";
+export type SpinnerAppearance = "primary" | "inverted";
+export type SpinnerLabelPosition = "above" | "below" | "before" | "after";
+export declare function defineSpinner(): void;

package/dist/elements/spinner.js

@@ -0,0 +1,124 @@
+import { base } from "./shared.js";
+const sizes = ["extra-tiny", "tiny", "extra-small", "small", "medium", "large", "extra-large", "huge"];
+const positions = ["above", "below", "before", "after"];
+export function defineSpinner() {
+    if (customElements.get("spui-spinner"))
+        return;
+    class SpuiSpinner extends HTMLElement {
+        static observedAttributes = ["label", "size", "appearance", "label-position", "delay"];
+        delayTimer;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.sync();
+            this.syncDelay();
+        }
+        disconnectedCallback() { clearTimeout(this.delayTimer); this.delayTimer = undefined; }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "delay")
+                this.syncDelay();
+            this.sync();
+        }
+        sync() {
+            const ring = this.shadowRoot?.querySelector(".ring");
+            const label = this.shadowRoot?.querySelector("slot[name=label]");
+            if (!ring || !label)
+                return;
+            const size = this.getAttribute("size");
+            this.dataset.size = sizes.includes(size) ? size : "medium";
+            const appearance = this.getAttribute("appearance");
+            this.dataset.appearance = appearance === "inverted" ? "inverted" : "primary";
+            const position = this.getAttribute("label-position");
+            this.dataset.labelPosition = positions.includes(position) ? position : "after";
+            const text = this.getAttribute("label") ?? "Loading";
+            label.textContent = text;
+            if (!this.hasAttribute("aria-label"))
+                this.setAttribute("aria-label", text);
+            this.setAttribute("role", "progressbar");
+            this.setAttribute("aria-busy", "true");
+            ring.setAttribute("aria-hidden", "true");
+        }
+        syncDelay() {
+            clearTimeout(this.delayTimer);
+            this.delayTimer = undefined;
+            const delay = Number(this.getAttribute("delay") ?? 0);
+            if (!Number.isFinite(delay) || delay <= 0) {
+                this.removeAttribute("data-delay-pending");
+                return;
+            }
+            this.setAttribute("data-delay-pending", "");
+            this.delayTimer = setTimeout(() => { this.delayTimer = undefined; this.removeAttribute("data-delay-pending"); }, Math.min(delay, 60_000));
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const ring = document.createElement("span");
+            ring.className = "ring";
+            ring.part.add("indicator");
+            ring.setAttribute("aria-hidden", "true");
+            const spinnerSlot = document.createElement("slot");
+            spinnerSlot.name = "spinner";
+            spinnerSlot.append(ring);
+            const spinnerTail = document.createElement("slot");
+            spinnerTail.name = "spinner-tail";
+            spinnerTail.setAttribute("aria-hidden", "true");
+            const defaultTail = document.createElement("span");
+            defaultTail.className = "tail";
+            defaultTail.setAttribute("aria-hidden", "true");
+            spinnerTail.append(defaultTail);
+            const spinner = document.createElement("span");
+            spinner.className = "spinner";
+            spinner.part.add("spinner");
+            spinner.append(spinnerSlot, spinnerTail);
+            const label = document.createElement("span");
+            label.className = "label";
+            label.part.add("label");
+            label.setAttribute("aria-hidden", "true");
+            const slot = document.createElement("slot");
+            slot.name = "label";
+            label.append(slot);
+            const style = document.createElement("style");
+            style.textContent = `${base}
+        :host{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;min-width:min-content;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424))}
+        :host([data-delay-pending]){display:none}
+        :host([data-label-position=above]),:host([data-label-position=below]){flex-direction:column}
+        .spinner{position:relative;display:block;flex:none;width:var(--spui-spinner-size,32px);height:var(--spui-spinner-size,32px);background:var(--spui-spinner-track,var(--colorBrandStroke2Contrast,var(--spui-ui-stroke,#edebe9)));color:var(--spui-spinner-active,var(--colorBrandStroke1,var(--spui-ui-accent,#005a9e)));mask-image:radial-gradient(closest-side,transparent calc(100% - var(--spui-spinner-stroke,2px) - 1px),white calc(100% - var(--spui-spinner-stroke,2px)),transparent 100%);-webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--spui-spinner-stroke,2px) - 1px),white calc(100% - var(--spui-spinner-stroke,2px)),transparent 100%);animation:spui-spinner-rotate 1.5s linear infinite}
+        .ring,.tail{position:absolute;inset:0;display:block;width:100%;height:100%}
+        .ring{background:transparent;color:inherit}
+        .tail{mask-image:conic-gradient(transparent 105deg,white 105deg);-webkit-mask-image:conic-gradient(transparent 105deg,white 105deg);animation:spui-spinner-tail 1.5s var(--spui-motion-easing-standard,cubic-bezier(.33,0,.67,1)) infinite}
+        .tail::before,.tail::after{content:"";position:absolute;inset:0;display:block;width:100%;height:100%;background-image:conic-gradient(currentColor 135deg,transparent 135deg);animation:inherit}
+        .tail::before{animation-name:spui-spinner-tail-start}
+        .tail::after{animation-name:spui-spinner-tail-end}
+        slot[name=spinner],slot[name=spinner-tail]{position:absolute;inset:0;display:block;width:100%;height:100%}
+        slot[name=spinner]::slotted(*),slot[name=spinner-tail]::slotted(*){display:block;width:100%;height:100%}
+        :host([data-size=extra-tiny]){--spui-spinner-size:16px;--spui-spinner-stroke:2px}
+        :host([data-size=tiny]){--spui-spinner-size:20px;--spui-spinner-stroke:2px}
+        :host([data-size=extra-small]){--spui-spinner-size:24px;--spui-spinner-stroke:2px}
+        :host([data-size=small]){--spui-spinner-size:28px;--spui-spinner-stroke:2px}
+        :host([data-size=medium]){--spui-spinner-size:32px;--spui-spinner-stroke:2.5px}
+        :host([data-size=large]){--spui-spinner-size:36px;--spui-spinner-stroke:2.5px}
+        :host([data-size=extra-large]){--spui-spinner-size:40px;--spui-spinner-stroke:2.5px}
+        :host([data-size=huge]){--spui-spinner-size:44px;--spui-spinner-stroke:3px}
+        :host([data-label-position=before]) .label,:host([data-label-position=above]) .label{order:0}
+        :host([data-label-position=before]) .spinner,:host([data-label-position=above]) .spinner{order:1}
+        :host([data-label-position=after]) .spinner,:host([data-label-position=below]) .spinner{order:0}
+        :host([data-label-position=after]) .label,:host([data-label-position=below]) .label{order:1}
+        .label{display:block;max-width:100%;font:var(--spui-spinner-label-font,400 14px/1.4 var(--spui-font-family,inherit));color:var(--spui-spinner-label,var(--spui-ui-text,var(--spui-semantic-body-text,inherit)))}
+        :host([data-size=extra-tiny]) .label,:host([data-size=tiny]) .label,:host([data-size=extra-small]) .label,:host([data-size=small]) .label{font-size:12px}
+        :host([data-size=huge]) .label{font-size:16px}
+        :host([appearance=inverted]),:host([data-appearance=inverted]){--spui-spinner-track:var(--spui-spinner-track-inverted,color-mix(in srgb,var(--spui-ui-accent-text,#fff) 38%,transparent));--spui-spinner-active:var(--spui-spinner-active-inverted,var(--spui-ui-accent-text,#fff));--spui-spinner-label:var(--spui-spinner-label-inverted,var(--spui-ui-accent-text,#fff))}
+        :host([dir=rtl]) .tail{mask-image:conic-gradient(white 255deg,transparent 255deg);-webkit-mask-image:conic-gradient(white 255deg,transparent 255deg)}
+        :host([dir=rtl]) .tail::before,:host([dir=rtl]) .tail::after{background-image:conic-gradient(transparent 225deg,currentColor 225deg)}
+        @keyframes spui-spinner-rotate{to{transform:rotate(360deg)}}
+        @keyframes spui-spinner-tail{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}
+        @keyframes spui-spinner-tail-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(105deg)}}
+        @keyframes spui-spinner-tail-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(225deg)}}
+        @media(prefers-reduced-motion:reduce){.spinner,.tail,.tail::before,.tail::after{animation:none}.tail{background-image:conic-gradient(transparent 120deg,currentColor 360deg)}.tail::before,.tail::after{display:none}}
+        @media(forced-colors:active){.spinner{forced-color-adjust:none;color:Highlight}.ring{background:HighlightText;color:Highlight}.label{color:CanvasText}}
+      `;
+            shadow.append(style, spinner, label);
+        }
+    }
+    customElements.define("spui-spinner", SpuiSpinner);
+}

package/dist/elements/swatch-picker.d.ts

@@ -0,0 +1,5 @@
+export declare function defineColorSwatch(): void;
+export declare function defineImageSwatch(): void;
+export declare function defineEmptySwatch(): void;
+export declare function defineSwatchPickerRow(): void;
+export declare function defineSwatchPicker(): void;