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

package/dist/elements/slider.js

@@ -0,0 +1,248 @@
+import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+export function defineSlider() {
+    if (customElements.get("spui-slider"))
+        return;
+    class SpuiSlider extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["label", "value", "default-value", "min", "max", "step", "size", "vertical", "disabled", "name", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "aria-orientation", "aria-required", "aria-valuetext"];
+        internals;
+        currentValue;
+        currentDefaultValue;
+        formDisabled = false;
+        boundInput;
+        slotInputDefaults;
+        defaultAriaOrientation;
+        get form() { return this.internals?.form ?? null; }
+        constructor() {
+            super();
+            try {
+                this.internals = this.attachInternals();
+            }
+            catch { /* The native range input remains usable without ElementInternals. */ }
+        }
+        connectedCallback() { this.render(); }
+        disconnectedCallback() { stopHostAccessibleNameSync(this); }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (!this.isConnected)
+                return;
+            const input = this.getInput();
+            if (!input)
+                return;
+            if (name === "label") {
+                const label = this.shadowRoot?.querySelector("label");
+                if (label)
+                    label.textContent = value ?? "";
+            }
+            else if (name === "value") {
+                this.currentValue = value ?? "";
+                if (value !== null)
+                    input.value = value;
+                this.syncVisual(input);
+            }
+            else if (name === "default-value") {
+                this.currentDefaultValue = value ?? "";
+                if (this.getAttribute("value") === null)
+                    input.value = value ?? "0";
+                this.syncVisual(input);
+            }
+            else if (["min", "max", "step"].includes(name)) {
+                if (value === null)
+                    input.removeAttribute(name);
+                else
+                    input.setAttribute(name, value);
+                this.syncVisual(input);
+            }
+            else if (name === "size" || name === "vertical") {
+                if (value === null || value === "false")
+                    this.removeAttribute(name);
+                if (name === "vertical") {
+                    if (this.hasAttribute("vertical"))
+                        input.setAttribute("orient", "vertical");
+                    else
+                        input.removeAttribute("orient");
+                }
+            }
+            else if (name === "disabled")
+                input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(this.slotInputDefaults?.disabled);
+            else if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid" || name === "aria-orientation" || name === "aria-required" || name === "aria-valuetext") {
+                if (name === "aria-orientation")
+                    this.defaultAriaOrientation = undefined;
+                value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+            }
+            this.syncFormValue(input);
+            this.syncSlots();
+        }
+        get value() { return this.getInput()?.valueAsNumber ?? Number(this.currentValue ?? this.getAttribute("value")); }
+        set value(value) {
+            this.currentValue = String(value);
+            const input = this.getInput();
+            if (input) {
+                input.value = this.currentValue;
+                this.syncFormValue(input);
+                this.syncVisual(input);
+            }
+        }
+        get defaultValue() {
+            const value = this.currentDefaultValue ?? this.getAttribute("default-value");
+            if (value !== null && value !== undefined)
+                return Number(value);
+            const input = this.getInput();
+            const fallback = this.shadowRoot?.querySelector(".input-fallback");
+            return Number(input && input !== fallback ? this.slotInputDefaults?.defaultValue ?? input.defaultValue : 0);
+        }
+        set defaultValue(value) {
+            this.currentDefaultValue = String(value);
+            this.setAttribute("default-value", this.currentDefaultValue);
+        }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; this.syncSlots(); }
+        formResetCallback() { const input = this.getInput(); if (input) {
+            input.value = this.getAttribute("value") ?? String(this.defaultValue);
+            this.currentValue = input.value;
+            this.syncFormValue(input);
+            this.syncVisual(input);
+        } }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = Number(state); }
+        syncFormValue(input) { this.internals?.setFormValue(input.value); }
+        getInput() {
+            const slot = this.shadowRoot?.querySelector('slot[name="input"]');
+            return slot?.assignedElements().find((element) => element instanceof HTMLInputElement)
+                ?? this.shadowRoot?.querySelector(".input-fallback") ?? undefined;
+        }
+        syncVisual(input) {
+            const min = Number(input.min || 0);
+            const max = Number(input.max || 100);
+            const range = max - min;
+            const progress = range > 0 ? Math.max(0, Math.min(1, (input.valueAsNumber - min) / range)) : 0;
+            const track = this.shadowRoot?.querySelector(".track");
+            track?.style.setProperty("--spui-slider-progress", String(progress));
+            const thumbSlot = this.shadowRoot?.querySelector('slot[name="thumb"]');
+            const thumb = thumbSlot?.assignedElements()[0] ?? this.shadowRoot?.querySelector(".thumb");
+            const progressPercent = `${progress * 100}%`;
+            track?.style.setProperty("--spui-slider-progress-percent", progressPercent);
+            track?.style.setProperty("--spui-slider-fill-percent", progressPercent);
+            if (thumb) {
+                if (this.hasAttribute("vertical")) {
+                    thumb.style.insetInlineStart = "50%";
+                    thumb.style.insetBlockStart = `${(1 - progress) * 100}%`;
+                }
+                else {
+                    thumb.style.insetInlineStart = `${progress * 100}%`;
+                    thumb.style.insetBlockStart = "50%";
+                }
+            }
+        }
+        syncSlots() {
+            const input = this.getInput();
+            if (!input)
+                return;
+            const fallback = this.shadowRoot?.querySelector(".input-fallback");
+            if (input !== fallback)
+                this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
+            if (this.boundInput !== input) {
+                this.boundInput?.removeEventListener("input", this.handleInput);
+                input.addEventListener("input", this.handleInput);
+                this.boundInput = input;
+                input.value = this.currentValue ?? this.getAttribute("value") ?? this.currentDefaultValue ?? this.getAttribute("default-value") ?? input.value ?? "0";
+            }
+            if (fallback) {
+                const assigned = input !== fallback;
+                fallback.hidden = assigned;
+                fallback.setAttribute("aria-hidden", String(assigned));
+            }
+            input.type = "range";
+            input.removeAttribute("name");
+            if (!input.id)
+                input.id = this.shadowRoot?.querySelector("label")?.htmlFor ?? `slider-${crypto.randomUUID()}`;
+            if (this.hasAttribute("vertical"))
+                input.setAttribute("orient", "vertical");
+            else
+                input.removeAttribute("orient");
+            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", "step", "aria-description", "aria-describedby", "aria-invalid", "aria-orientation", "aria-required", "aria-valuetext"])
+                if (!input.hasAttribute(name)) {
+                    const value = this.getAttribute(name);
+                    if (value !== null)
+                        input.setAttribute(name, value);
+                }
+            const orientation = this.hasAttribute("vertical") ? "vertical" : "horizontal";
+            const previousDefault = this.defaultAriaOrientation;
+            const orientationWasDefaulted = previousDefault?.input === input && input.getAttribute("aria-orientation") === previousDefault.value;
+            if (orientationWasDefaulted || !input.hasAttribute("aria-orientation")) {
+                input.setAttribute("aria-orientation", orientation);
+                this.defaultAriaOrientation = { input, value: orientation };
+            }
+            else
+                this.defaultAriaOrientation = undefined;
+            syncHostAccessibleName(this, input);
+            input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(input === fallback ? false : this.slotInputDefaults?.disabled);
+            this.syncFormValue(input);
+            this.syncVisual(input);
+        }
+        handleInput = (event) => {
+            const input = event.currentTarget;
+            this.currentValue = input.value;
+            this.syncFormValue(input);
+            this.syncVisual(input);
+            this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: input.valueAsNumber, sourceEvent: event }, bubbles: true, composed: true }));
+        };
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const id = `slider-${crypto.randomUUID()}`;
+            const label = document.createElement("label");
+            label.htmlFor = id;
+            label.textContent = this.getAttribute("label") ?? "";
+            label.part.add("label");
+            const input = document.createElement("input");
+            input.className = "input-fallback";
+            input.id = id;
+            input.type = "range";
+            if (this.hasAttribute("vertical"))
+                input.setAttribute("orient", "vertical");
+            input.value = this.currentValue ?? this.getAttribute("value") ?? this.currentDefaultValue ?? this.getAttribute("default-value") ?? "0";
+            for (const name of ["min", "max", "step", "aria-label", "aria-description", "aria-describedby", "aria-invalid", "aria-required", "aria-valuetext"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    input.setAttribute(name, value);
+            }
+            input.disabled = this.hasAttribute("disabled");
+            input.part.add("control");
+            const track = document.createElement("div");
+            track.className = "track";
+            track.part.add("track");
+            const rail = document.createElement("div");
+            rail.className = "rail";
+            rail.part.add("rail");
+            const railSlot = document.createElement("slot");
+            railSlot.name = "rail";
+            railSlot.append(rail);
+            railSlot.addEventListener("slotchange", () => this.syncSlots());
+            const fill = document.createElement("div");
+            fill.className = "rail-fill";
+            fill.setAttribute("aria-hidden", "true");
+            const thumb = document.createElement("span");
+            thumb.className = "thumb";
+            thumb.part.add("thumb");
+            const thumbSlot = document.createElement("slot");
+            thumbSlot.name = "thumb";
+            thumbSlot.append(thumb);
+            thumbSlot.addEventListener("slotchange", () => this.syncSlots());
+            const inputSlot = document.createElement("slot");
+            inputSlot.name = "input";
+            inputSlot.part.add("input");
+            inputSlot.append(input);
+            inputSlot.addEventListener("slotchange", () => this.syncSlots());
+            track.append(railSlot, fill, thumbSlot, inputSlot);
+            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))}input{width:100%;min-height:var(--spui-control-height,32px);margin:0;accent-color:var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0f6cbd)));cursor:pointer}input:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:3px}input:disabled{opacity:.55;cursor:not-allowed}:host([size=small]) input{min-height:24px}:host([vertical]){display:inline-grid;justify-items:center;align-content:start}:host([vertical]) input{width:var(--spui-control-height,32px);height:160px;min-height:160px;writing-mode:vertical-lr;direction:rtl}:host([vertical]) label{grid-row:2}@media(forced-colors:active){input{accent-color:Highlight}input:focus-visible{outline-color:Highlight}}`;
+            style.textContent += `.track{position:relative;width:100%;min-width:0;height:var(--spui-control-height,32px);touch-action:pan-y}.rail{position:absolute;inset-inline:0;inset-block-start:50%;height:4px;transform:translateY(-50%);border-radius:999px;background:var(--spui-slider-rail,var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1)))}.rail-fill{position:absolute;inset-inline-start:0;inset-block-start:50%;width:var(--spui-slider-fill-percent,0%);height:4px;transform:translateY(-50%);border-radius:999px;background:var(--spui-slider-fill,var(--spui-ui-accent,var(--colorBrandBackground,#0f6cbd)));pointer-events:none}.thumb{position:absolute;inset-inline-start:var(--spui-slider-progress-percent,0%);inset-block-start:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:2px solid var(--spui-slider-thumb-border,var(--spui-ui-accent,var(--colorBrandBackground,#0f6cbd)));border-radius:50%;background:var(--spui-slider-thumb-background,var(--spui-ui-canvas,#fff));box-shadow:var(--shadow2,0 1px 2px rgb(0 0 0 / 20%));pointer-events:none}slot[name=rail]{position:absolute;inset:0;pointer-events:none}slot[name=rail]::slotted(*){position:absolute;inset-inline:0;inset-block-start:50%;height:4px;transform:translateY(-50%);border-radius:999px;background:var(--spui-slider-rail,var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1)))}slot[name=thumb]{position:absolute;inset:0;pointer-events:none}slot[name=thumb]::slotted(*){position:absolute;inset-inline-start:var(--spui-slider-progress-percent,0%);inset-block-start:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:2px solid var(--spui-slider-thumb-border,var(--spui-ui-accent,var(--colorBrandBackground,#0f6cbd)));border-radius:50%;background:var(--spui-slider-thumb-background,var(--spui-ui-canvas,#fff));box-shadow:var(--shadow2,0 1px 2px rgb(0 0 0 / 20%))}slot[name=input]{position:absolute;inset:0}input{position:absolute;inset:0;width:100%;height:100%;min-height:24px;opacity:0;appearance:none;cursor:pointer}input::-webkit-slider-thumb{appearance:none;width:24px;height:24px}input:focus-visible{outline:0}.track:focus-within{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px;border-radius:4px}:host([size=small]) .track{height:24px}:host([vertical]) .track{display:block;width:var(--spui-control-height,32px);height:160px;min-height:160px;touch-action:pan-x}:host([vertical]) .rail,:host([vertical]) slot[name=rail]::slotted(*){inset-inline:50%;inset-block:0;width:4px;height:auto;transform:translateX(-50%)}:host([vertical]) .rail-fill{inset-inline-start:50%;inset-block-start:auto;inset-block-end:0;width:4px;height:var(--spui-slider-fill-percent,0%);transform:translateX(-50%)}:host([vertical]) .thumb,:host([vertical]) slot[name=thumb]::slotted(*){inset-inline-start:50%;inset-block-start:calc(100% - var(--spui-slider-progress-percent,0%));transform:translate(-50%,-50%)}:host([vertical]) label{grid-row:2}:host([dir=rtl]) .rail-fill{inset-inline-start:auto;inset-inline-end:0}:host([dir=rtl]) .thumb,:host([dir=rtl]) slot[name=thumb]::slotted(*){inset-inline-start:auto;inset-inline-end:var(--spui-slider-progress-percent,0%);transform:translate(50%,-50%)}@media(forced-colors:active){.rail{background:CanvasText}.rail-fill{background:Highlight}.thumb{border-color:Highlight;background:Canvas}}`;
+            shadow.replaceChildren(style, label, track);
+            this.syncSlots();
+        }
+    }
+    customElements.define("spui-slider", SpuiSlider);
+}

package/dist/elements/spin-button.d.ts

@@ -0,0 +1,7 @@
+export type SpinButtonAppearance = "outline" | "underline" | "filled-darker" | "filled-lighter";
+export type SpinButtonSize = "small" | "medium";
+export type SpinButtonChangeData = {
+    value: number | null;
+    displayValue?: string;
+};
+export declare function defineSpinButton(): void;