@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/spin-button.js

@@ -1,499 +0,0 @@
-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{border-width:2px;border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline:0;box-shadow:none}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}: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=underline]) [part~=control-group]:focus-within{border-width:0 0 2px}: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:focus-visible{outline:0}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}[part~=control-group]:focus-within{border-width:2px;border-color:Highlight;outline:0;box-shadow:none}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText}[part~=control-group]:has(input[aria-invalid]:not([aria-invalid=false])):focus-within{border-color:Highlight}:host([appearance=underline]) [part~=control-group]:focus-within{border-width:0 0 2px}button:focus-visible{outline:1px solid Highlight}input:focus-visible{outline:0}}`;
-            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!important;border-radius:inherit;background:transparent;color:inherit;font:inherit;outline:0!important;box-shadow:none!important}slot[name=input]::slotted(input:focus-visible){border:0!important;outline:0!important;outline-offset:0;box-shadow:none!important}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

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

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

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