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

package/dist/elements/progress-bar.d.ts

@@ -0,0 +1,4 @@
+export type ProgressBarColor = "brand" | "success" | "warning" | "error";
+export type ProgressBarShape = "rounded" | "square";
+export type ProgressBarThickness = "medium" | "large";
+export declare function defineProgressBar(): void;

package/dist/elements/progress-bar.js

@@ -0,0 +1,82 @@
+import { base } from "./shared.js";
+export function defineProgressBar() {
+    if (customElements.get("spui-progress-bar"))
+        return;
+    class SpuiProgressBar extends HTMLElement {
+        static observedAttributes = ["value", "max", "label", "aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext", "color", "shape", "thickness"];
+        generatedLabel;
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const progress = document.createElement("div");
+                progress.className = "track";
+                progress.setAttribute("aria-hidden", "true");
+                progress.part.add("track");
+                const bar = document.createElement("slot");
+                bar.name = "bar";
+                bar.append(Object.assign(document.createElement("span"), { className: "indicator" }));
+                progress.append(bar);
+                const motion = document.createElement("slot");
+                motion.name = "indeterminateMotion";
+                motion.setAttribute("aria-hidden", "true");
+                progress.append(motion);
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:block;min-width:0}.track{position:relative;display:block;width:100%;height:2px;overflow:hidden;border-radius:var(--spui-progress-radius,999px);background:var(--spui-progress-track,color-mix(in srgb,currentColor 10%,transparent))}.indicator{position:absolute;inset-block:0;inset-inline-start:0;width:100%;border-radius:inherit;background:var(--spui-progress-color,var(--spui-ui-accent,var(--spui-semantic-focus-border,#0f6cbd)));transform-origin:left center}:host([dir=rtl]) .indicator{transform-origin:right center}:host([data-determinate-transition]) .indicator,:host([data-determinate-transition]) slot[name=bar]::slotted([slot=bar]){transition:transform 300ms ease,width 300ms ease}:host([thickness=large]) .track{height:4px}:host([shape=square]){--spui-progress-radius:0px}:host([color=success]){--spui-progress-color:var(--spui-ui-success,#107c10)}:host([color=warning]){--spui-progress-color:var(--spui-ui-warning,#835b00)}:host([color=error]){--spui-progress-color:var(--spui-ui-danger,#b10e1c)}:host([data-indeterminate]) .indicator{width:33%;animation:spui-progress-indeterminate 3s linear infinite}:host([dir=rtl][data-indeterminate]) .indicator{animation-name:spui-progress-indeterminate-rtl}:host([data-indeterminate][data-custom-motion]) .indicator{display:none}slot[name=bar]::slotted([slot=bar]){width:var(--spui-progress-value,100%);height:100%;border-radius:inherit;background:var(--spui-progress-color,var(--spui-ui-accent,var(--spui-semantic-focus-border,#0f6cbd)))}:host([data-indeterminate]) slot[name=bar]::slotted([slot=bar]){width:33%;animation:spui-progress-indeterminate 3s linear infinite}:host([dir=rtl][data-indeterminate]) slot[name=bar]::slotted([slot=bar]){animation-name:spui-progress-indeterminate-rtl}slot[name=indeterminateMotion]::slotted(*){position:absolute;inset-block:0;inset-inline-start:0;width:33%;height:100%}:host([dir=rtl]) slot[name=indeterminateMotion]::slotted(*){inset-inline-start:auto;inset-inline-end:0}@keyframes spui-progress-indeterminate{from{transform:translateX(-100%)}to{transform:translateX(300%)}}@keyframes spui-progress-indeterminate-rtl{from{transform:translateX(100%)}to{transform:translateX(-300%)}}@media(prefers-reduced-motion:reduce){.indicator{transition:none}:host([data-indeterminate]) .indicator,:host([dir=rtl][data-indeterminate]) .indicator{width:100%;animation:spui-progress-pulse 3s linear infinite}:host([data-indeterminate]) slot[name=bar]::slotted([slot=bar]),:host([dir=rtl][data-indeterminate]) slot[name=bar]::slotted([slot=bar]){width:100%;animation:spui-progress-pulse 3s linear infinite}}@keyframes spui-progress-pulse{0%,100%{opacity:.2}50%{opacity:1}}@media(forced-colors:active){.track{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}.indicator,slot[name=bar]::slotted([slot=bar]){background:Highlight}}`;
+                style.textContent += `:host(:not([color])),:host([color=brand]){--spui-progress-color:color-mix(in srgb,var(--spui-ui-accent,#0f6cbd) 45%,currentColor 55%)}:host([color=success]){--spui-progress-color:color-mix(in srgb,var(--spui-ui-success,#107c10) 45%,currentColor 55%)}:host([color=warning]){--spui-progress-color:color-mix(in srgb,var(--spui-ui-warning,#835b00) 45%,currentColor 55%)}:host([color=error]){--spui-progress-color:color-mix(in srgb,var(--spui-ui-danger,#b10e1c) 45%,currentColor 55%)}`;
+                shadow.append(style, progress);
+                progress.querySelectorAll("slot").forEach(slot => slot.addEventListener("slotchange", () => this.sync()));
+            }
+            this.sync();
+        }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            const progress = this.shadowRoot?.querySelector(".track");
+            if (!progress)
+                return;
+            this.toggleAttribute("data-custom-motion", (this.shadowRoot?.querySelector('slot[name="indeterminateMotion"]')?.assignedElements().length ?? 0) > 0);
+            this.setAttribute("role", "progressbar");
+            const max = Number(this.getAttribute("max"));
+            const normalizedMax = Number.isFinite(max) && max > 0 ? max : 1;
+            const raw = this.getAttribute("value");
+            const value = raw === null ? null : Number(raw);
+            this.setAttribute("aria-valuemin", "0");
+            this.setAttribute("aria-valuemax", String(normalizedMax));
+            if (value === null || !Number.isFinite(value)) {
+                this.setAttribute("data-indeterminate", "");
+                this.removeAttribute("data-determinate-transition");
+                this.removeAttribute("aria-valuenow");
+                const indicator = this.shadowRoot?.querySelector(".indicator");
+                if (indicator)
+                    indicator.style.removeProperty("transform");
+                const slottedBar = this.shadowRoot?.querySelector("slot[name=bar]")?.assignedElements()[0];
+                slottedBar?.style.removeProperty("--spui-progress-value");
+            }
+            else {
+                this.removeAttribute("data-indeterminate");
+                const bounded = Math.min(normalizedMax, Math.max(0, value));
+                this.toggleAttribute("data-determinate-transition", bounded / normalizedMax > 0.01);
+                this.setAttribute("aria-valuenow", String(bounded));
+                const indicator = this.shadowRoot?.querySelector(".indicator");
+                if (indicator)
+                    indicator.style.transform = `scaleX(${bounded / normalizedMax})`;
+                const slottedBar = this.shadowRoot?.querySelector("slot[name=bar]")?.assignedElements()[0];
+                slottedBar?.style.setProperty("--spui-progress-value", `${bounded / normalizedMax * 100}%`);
+            }
+            if (this.hasAttribute("aria-labelledby")) {
+                if (this.generatedLabel !== undefined && this.getAttribute("aria-label") === this.generatedLabel)
+                    this.removeAttribute("aria-label");
+                this.generatedLabel = undefined;
+            }
+            else if (this.getAttribute("aria-label") === null || this.getAttribute("aria-label") === this.generatedLabel) {
+                const label = this.getAttribute("label") ?? "Loading";
+                this.generatedLabel = label;
+                if (this.getAttribute("aria-label") !== label)
+                    this.setAttribute("aria-label", label);
+            }
+            else
+                this.generatedLabel = undefined;
+        }
+    }
+    customElements.define("spui-progress-bar", SpuiProgressBar);
+}

package/dist/elements/radio-group.d.ts

@@ -0,0 +1 @@
+export declare function defineRadioGroup(): void;

package/dist/elements/radio-group.js

@@ -0,0 +1,303 @@
+import { base, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+function radioOptionLabel(option, fallback) {
+    const text = [...option.childNodes].filter(node => !(node instanceof Element && ["input", "indicator", "label"].includes(node.getAttribute("slot") ?? ""))).map(node => node.textContent ?? "").join("").trim();
+    return option.getAttribute("label") ?? (text || fallback);
+}
+const radioRootInputAttributes = new WeakMap();
+const radioManagedInputAttributes = new Set(["checked", "disabled", "hidden", "label", "label-position", "name", "required", "slot", "type", "value"]);
+function isForwardableRadioInputAttribute(name) {
+    return !radioManagedInputAttributes.has(name) && !name.startsWith("on");
+}
+function syncRadioRootProps(option, input, label) {
+    label.className = option.getAttribute("class") ?? option.getAttribute("classname") ?? "";
+    label.style.cssText = option.getAttribute("style") ?? "";
+    for (const name of radioRootInputAttributes.get(input) ?? [])
+        input.removeAttribute(name);
+    const applied = new Set();
+    for (const attribute of [...option.attributes]) {
+        if (attribute.name !== "class" && attribute.name !== "style" && isForwardableRadioInputAttribute(attribute.name)) {
+            input.setAttribute(attribute.name, attribute.value);
+            applied.add(attribute.name);
+        }
+    }
+    radioRootInputAttributes.set(input, applied);
+}
+const radioInputSlotAttributes = new WeakMap();
+function syncRadioInputSlot(source, input) {
+    for (const name of radioInputSlotAttributes.get(input) ?? [])
+        input.removeAttribute(name);
+    const applied = new Set();
+    if (!source) {
+        radioInputSlotAttributes.set(input, applied);
+        return;
+    }
+    for (const attribute of [...source.attributes]) {
+        if (isForwardableRadioInputAttribute(attribute.name)) {
+            input.setAttribute(attribute.name, attribute.value);
+            applied.add(attribute.name);
+        }
+    }
+    radioInputSlotAttributes.set(input, applied);
+}
+function createRadioIndicator(source) {
+    const indicator = source?.cloneNode(true) ?? document.createElement("span");
+    indicator.removeAttribute("slot");
+    indicator.removeAttribute("hidden");
+    indicator.setAttribute("aria-hidden", "true");
+    indicator.classList.add("radio-indicator");
+    indicator.part.add("indicator");
+    return indicator;
+}
+function createRadioLabel(source, text) {
+    const label = document.createElement("span");
+    label.dataset.radioLabel = "";
+    if (source) {
+        const content = source.cloneNode(true);
+        content.removeAttribute("slot");
+        content.removeAttribute("hidden");
+        label.append(content);
+    }
+    else
+        label.textContent = text;
+    return label;
+}
+export function defineRadioGroup() {
+    if (customElements.get("spui-radio-group"))
+        return;
+    class SpuiRadioGroup extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["label", "value", "default-value", "disabled", "required", "name", "orientation", "layout", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
+        internals;
+        observer;
+        currentValue;
+        formDisabledValue = false;
+        constructor() {
+            super();
+            try {
+                this.internals = this.attachInternals();
+            }
+            catch { /* Keep the controls usable where custom form association is unavailable. */ }
+        }
+        get form() { return this.internals?.form ?? null; }
+        get validity() { return this.internals?.validity; }
+        get validationMessage() { return this.internals?.validationMessage ?? ""; }
+        get willValidate() { return this.internals?.willValidate ?? false; }
+        checkValidity() { return this.internals?.checkValidity() ?? true; }
+        reportValidity() { return this.internals?.reportValidity() ?? true; }
+        connectedCallback() {
+            this.render();
+            this.observer = new MutationObserver(records => {
+                let optionsChanged = false;
+                const textChanged = new Set();
+                for (const record of records) {
+                    if (record.type === "attributes") {
+                        const option = record.target instanceof Element ? record.target.closest("spui-radio-option") : null;
+                        if (option?.parentElement === this && record.target === option && ["value", "disabled", "checked"].includes(record.attributeName ?? ""))
+                            optionsChanged = true;
+                        else if (option?.parentElement === this)
+                            textChanged.add(option);
+                        else if (record.target === this)
+                            optionsChanged = true;
+                        continue;
+                    }
+                    const target = record.target instanceof Element ? record.target : record.target.parentElement;
+                    const option = target?.closest("spui-radio-option");
+                    if (option?.parentElement === this)
+                        textChanged.add(option);
+                    else if (record.target === this)
+                        optionsChanged = true;
+                }
+                if (optionsChanged)
+                    this.syncOptions();
+                else
+                    for (const option of textChanged)
+                        this.syncOptionLabel(option);
+            });
+            this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true });
+        }
+        disconnectedCallback() { this.observer?.disconnect(); stopHostAccessibleNameSync(this); }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (!this.isConnected)
+                return;
+            const fieldset = this.shadowRoot?.querySelector("fieldset");
+            if (!fieldset)
+                return;
+            if (name === "label") {
+                const legend = this.shadowRoot?.querySelector("legend");
+                if (legend)
+                    legend.textContent = value ?? "";
+            }
+            if (name === "disabled")
+                fieldset.disabled = this.formDisabledValue || this.hasAttribute("disabled");
+            if (name === "orientation" || name === "layout")
+                fieldset.dataset.layout = this.getLayout();
+            if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid") {
+                const value = this.getAttribute(name);
+                if (value === null)
+                    fieldset.removeAttribute(name);
+                else
+                    fieldset.setAttribute(name, value);
+                syncHostAccessibleName(this, fieldset);
+            }
+            if (name === "value")
+                this.currentValue = value ?? "";
+            for (const radio of fieldset.querySelectorAll('input[type="radio"]')) {
+                if (name === "name")
+                    radio.name = value ?? (this.id || "spui-radio-group");
+                if (name === "required")
+                    radio.required = this.hasAttribute("required");
+                if (name === "value")
+                    radio.checked = radio.value === (this.currentValue ?? "");
+                if (name === "disabled")
+                    radio.disabled = this.hasAttribute("disabled") || radio.dataset.optionDisabled === "true";
+            }
+            this.syncFormValue();
+        }
+        get value() { return this.currentValue ?? this.getAttribute("value") ?? this.shadowRoot?.querySelector('input[type="radio"]:checked')?.value ?? ""; }
+        set value(value) {
+            this.currentValue = value;
+            const fieldset = this.shadowRoot?.querySelector("fieldset");
+            if (fieldset) {
+                for (const radio of fieldset.querySelectorAll('input[type="radio"]'))
+                    radio.checked = radio.value === value;
+                this.syncFormValue();
+            }
+        }
+        get defaultValue() { return this.getAttribute("default-value") ?? this.querySelector(':scope > spui-radio-option[checked]')?.getAttribute("value") ?? ""; }
+        set defaultValue(value) { this.setAttribute("default-value", value); }
+        formDisabledCallback(disabled) {
+            this.formDisabledValue = disabled;
+            for (const radio of this.shadowRoot?.querySelectorAll('input[type="radio"]') ?? [])
+                radio.disabled = disabled || this.hasAttribute("disabled") || radio.dataset.optionDisabled === "true";
+            this.syncFormValue();
+        }
+        formResetCallback() {
+            const options = [...this.querySelectorAll(":scope > spui-radio-option")];
+            const initial = options.find(option => option.hasAttribute("checked"))?.getAttribute("value") ?? "";
+            this.value = this.getAttribute("value") ?? this.getAttribute("default-value") ?? initial;
+        }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = state; }
+        syncFormValue() {
+            const checked = this.shadowRoot?.querySelector('input[type="radio"]:checked');
+            const disabled = this.formDisabledValue || this.hasAttribute("disabled");
+            const value = checked?.value ?? "";
+            for (const label of this.shadowRoot?.querySelectorAll("fieldset > label") ?? [])
+                label.dataset.checked = String(Boolean(label.querySelector("input")?.checked));
+            this.internals?.setFormValue(checked && !disabled ? value : null);
+            try {
+                const anchor = checked ?? this.shadowRoot?.querySelector('input[type="radio"]');
+                const missing = !disabled && this.hasAttribute("required") && !checked;
+                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? anchor?.validationMessage ?? "" : "", missing ? anchor ?? undefined : undefined);
+            }
+            catch { /* Some engines do not accept shadow descendants as validity anchors. */ }
+        }
+        syncOptionLabel(option) {
+            const index = [...this.querySelectorAll(":scope > spui-radio-option")].indexOf(option);
+            const label = this.shadowRoot?.querySelectorAll("fieldset > label")[index];
+            const input = label?.querySelector("input");
+            const text = label?.querySelector(":scope > [data-radio-label]");
+            if (input) {
+                syncRadioRootProps(option, input, label);
+                syncRadioInputSlot(option.querySelector(":scope > input[slot=input]"), input);
+                const sourceIndicator = option.querySelector(":scope > [slot=indicator]");
+                const currentIndicator = label?.querySelector(".radio-indicator");
+                if (currentIndicator && sourceIndicator)
+                    currentIndicator.replaceWith(createRadioIndicator(sourceIndicator));
+                else if (currentIndicator && !sourceIndicator)
+                    currentIndicator.remove();
+                else if (label && sourceIndicator)
+                    label.insertBefore(createRadioIndicator(sourceIndicator), text ?? null);
+                label?.toggleAttribute("data-custom-indicator", Boolean(sourceIndicator));
+                input.dataset.customIndicator = String(Boolean(sourceIndicator));
+                if (label)
+                    label.dataset.labelPosition = option.getAttribute("label-position") ?? (this.getLayout() === "horizontal-stacked" ? "below" : "after");
+            }
+            if (label && input) {
+                const nextText = createRadioLabel(option.querySelector(":scope > [slot=label]"), radioOptionLabel(option, input.value));
+                if (text)
+                    text.replaceWith(nextText);
+                else
+                    label.append(nextText);
+            }
+        }
+        syncOptions() {
+            const fieldset = this.shadowRoot?.querySelector("fieldset");
+            if (!fieldset)
+                return;
+            const current = this.currentValue ?? this.getAttribute("value") ?? this.getAttribute("default-value") ?? fieldset.querySelector('input[type="radio"]:checked')?.value ?? "";
+            const options = [...this.querySelectorAll(":scope > spui-radio-option")];
+            const radios = options.map((option, index) => this.createRadio(option, index));
+            fieldset.replaceChildren(fieldset.querySelector("legend"), ...radios);
+            const checked = fieldset.querySelector(`input[type="radio"][value="${CSS.escape(current)}"]`);
+            if (checked)
+                checked.checked = true;
+            this.syncFormValue();
+        }
+        createRadio(option, index) {
+            const label = document.createElement("label");
+            label.part.add("option");
+            label.dataset.labelPosition = option.getAttribute("label-position") ?? (this.getLayout() === "horizontal-stacked" ? "below" : "after");
+            const inputSource = option.querySelector(":scope > input[slot=input]");
+            const input = (inputSource?.cloneNode(false) ?? document.createElement("input"));
+            input.removeAttribute("slot");
+            input.removeAttribute("hidden");
+            input.type = "radio";
+            input.name = this.getAttribute("name") ?? (this.id || "spui-radio-group");
+            input.value = option.getAttribute("value") ?? String(index);
+            input.disabled = this.formDisabledValue || this.hasAttribute("disabled") || option.hasAttribute("disabled");
+            input.required = this.hasAttribute("required");
+            input.dataset.optionDisabled = String(option.hasAttribute("disabled"));
+            input.part.add("control");
+            syncRadioRootProps(option, input, label);
+            syncRadioInputSlot(inputSource, input);
+            const text = createRadioLabel(option.querySelector(":scope > [slot=label]"), radioOptionLabel(option, input.value));
+            const indicatorSource = option.querySelector(":scope > [slot=indicator]");
+            label.toggleAttribute("data-custom-indicator", Boolean(indicatorSource));
+            input.dataset.customIndicator = String(Boolean(indicatorSource));
+            label.append(input);
+            if (indicatorSource)
+                label.append(createRadioIndicator(indicatorSource));
+            label.append(text);
+            input.addEventListener("change", event => {
+                if (!input.checked)
+                    return;
+                this.currentValue = input.value;
+                this.syncFormValue();
+                option.dispatchEvent(new CustomEvent("spui-radio-change", { detail: { value: input.value, sourceEvent: event }, bubbles: true, composed: true }));
+                this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: input.value, sourceEvent: event }, bubbles: true, composed: true }));
+            });
+            return label;
+        }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const fieldset = document.createElement("fieldset");
+            fieldset.disabled = this.formDisabledValue || this.hasAttribute("disabled");
+            fieldset.dataset.layout = this.getLayout();
+            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    fieldset.setAttribute(name, value);
+            }
+            const legend = document.createElement("legend");
+            legend.textContent = this.getAttribute("label") ?? "";
+            legend.part.add("label");
+            const options = [...this.querySelectorAll(":scope > spui-radio-option")];
+            const radios = options.map((option, index) => this.createRadio(option, index));
+            const initial = this.currentValue ?? this.getAttribute("value") ?? this.getAttribute("default-value") ?? options.find(option => option.hasAttribute("checked"))?.getAttribute("value") ?? "";
+            const selected = radios.find(label => label.querySelector("input")?.value === initial)?.querySelector("input");
+            if (selected)
+                selected.checked = true;
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block}fieldset{display:flex;flex-direction:column;gap:var(--spui-control-gap,8px);min-width:0;margin:0;padding:0;border:0}fieldset[data-layout="horizontal"],fieldset[data-layout="horizontal-stacked"]{flex-direction:row;flex-wrap:wrap;column-gap:var(--spui-control-gap,16px)}label[data-label-position="below"]{flex-direction:column;align-items:flex-start;justify-content:center}legend{margin-bottom:var(--spui-control-gap,8px);padding:0;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit));font-size:14px;font-weight:600}label{display:inline-flex;align-items:center;gap:8px;min-height:var(--spui-control-height,32px);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));cursor:pointer}input{width:18px;height:18px;margin:0;accent-color:var(--spui-ui-accent,var(--spui-semantic-input-background-checked,var(--colorBrandBackground,#0f6cbd)));cursor:pointer}input:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}input:disabled{cursor:not-allowed}label:has(input:disabled){opacity:.55;cursor:not-allowed}@media(forced-colors:active){input{accent-color:Highlight}input:focus-visible{outline-color:Highlight}}`;
+            style.textContent += `.radio-indicator[hidden]{display:none!important}.radio-indicator{box-sizing:border-box;display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#8a8886));border-radius:50%;color:var(--spui-ui-accent,var(--spui-semantic-accent,#0f6cbd));background:var(--spui-ui-surface,var(--spui-semantic-body-background,#fff))}.radio-indicator::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,ease)}label[data-checked=true] .radio-indicator{border-color:currentColor}label[data-checked=true] .radio-indicator::after{transform:scale(1)}input[data-custom-indicator=true]{position:absolute;inset-inline-start:0;inset-block-start:calc(50% - 9px);z-index:1;opacity:0}input[data-custom-indicator=true]:focus-visible{outline:0}input[data-custom-indicator=true]:focus-visible+.radio-indicator{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}@media(prefers-reduced-motion:reduce){.radio-indicator::after{transition:none}}@media(forced-colors:active){.radio-indicator{border-color:ButtonText;background:Canvas;color:Highlight}.radio-indicator::after{background:Highlight}}`;
+            fieldset.append(legend, ...radios);
+            fieldset.addEventListener("change", () => this.syncFormValue());
+            shadow.replaceChildren(style, fieldset);
+            syncHostAccessibleName(this, fieldset);
+            this.syncFormValue();
+        }
+        getLayout() { return this.getAttribute("layout") ?? this.getAttribute("orientation") ?? "vertical"; }
+    }
+    customElements.define("spui-radio-group", SpuiRadioGroup);
+}

package/dist/elements/rating-display.d.ts

@@ -0,0 +1,2 @@
+export declare function defineRatingItem(): void;
+export declare function defineRatingDisplay(): void;

package/dist/elements/rating-display.js

@@ -0,0 +1,125 @@
+import { base } from "./shared.js";
+function ratingValue(element) {
+    const parent = element.closest("spui-rating-display");
+    const maxRaw = Number(parent?.getAttribute("max") ?? element.getAttribute("max") ?? 5);
+    const max = Number.isInteger(maxRaw) && maxRaw > 1 ? Math.min(20, maxRaw) : 5;
+    const valueRaw = Number(parent?.getAttribute("value") ?? element.getAttribute("rating") ?? 0);
+    return { value: Number.isFinite(valueRaw) ? Math.max(0, Math.min(max, valueRaw)) : 0, max };
+}
+export function defineRatingItem() {
+    if (customElements.get("spui-rating-item"))
+        return;
+    class SpuiRatingItem extends HTMLElement {
+        static observedAttributes = ["value", "rating", "max", "size", "color"];
+        connectedCallback() { this.render(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.render(); }
+        render() {
+            const { value: rating } = ratingValue(this);
+            const raw = Number(this.getAttribute("value") ?? 1);
+            const itemValue = Number.isInteger(raw) && raw > 0 ? raw : 1;
+            const amount = Math.max(0, Math.min(1, rating - itemValue + 1));
+            this.setAttribute("aria-hidden", "true");
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{position:relative;display:inline-block;flex:none;width:var(--spui-rating-size,24px);height:var(--spui-rating-size,24px);font-size:var(--spui-rating-size,24px);line-height:1;color:var(--spui-rating-empty,color-mix(in srgb,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 65%,var(--spui-ui-surface,var(--spui-semantic-body-background,#ffffff)) 35%));user-select:none}.outline,.filled{position:absolute;inset:0;display:block;overflow:hidden;white-space:nowrap}.outline slot::slotted(*),.filled slot::slotted(*){font:inherit}.outline slot::slotted(*){color:var(--spui-rating-empty,color-mix(in srgb,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 65%,var(--spui-ui-surface,var(--spui-semantic-body-background,#ffffff)) 35%))}.filled{inset-inline-start:0;width:${amount * 100}%;color:var(--spui-rating-color,var(--spui-ui-accent,#0078d4))}.filled slot::slotted(*){color:var(--spui-rating-color,var(--spui-ui-accent,#0078d4))}:host(:not([color])),:host([color=neutral]){--spui-rating-color:var(--spui-ui-text,var(--spui-semantic-body-text,currentColor))}:host([color=brand]){--spui-rating-color:color-mix(in srgb,var(--spui-ui-accent,#0078d4) 65%,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 35%)}:host([color=marigold]){--spui-rating-color:color-mix(in srgb,var(--spui-rating-marigold,#c58b00) 65%,var(--spui-ui-text,var(--spui-semantic-body-text,#242424)) 35%)}:host([size=small]){--spui-rating-size:18px}:host([size=medium]){--spui-rating-size:24px}:host([size=large]){--spui-rating-size:30px}:host([size=extra-large]){--spui-rating-size:36px}@media(forced-colors:active){:host{color:CanvasText}.filled{color:Highlight}}`;
+            const outline = document.createElement("span");
+            outline.className = "outline";
+            outline.part.add("unselected-icon");
+            const outlineSlot = document.createElement("slot");
+            outlineSlot.name = "unselected-icon";
+            outlineSlot.textContent = "☆";
+            outline.append(outlineSlot);
+            const filled = document.createElement("span");
+            filled.className = "filled";
+            filled.part.add("selected-icon");
+            const filledSlot = document.createElement("slot");
+            filledSlot.name = "selected-icon";
+            filledSlot.textContent = "★";
+            filled.append(filledSlot);
+            shadow.replaceChildren(style, outline, filled);
+        }
+    }
+    customElements.define("spui-rating-item", SpuiRatingItem);
+}
+export function defineRatingDisplay() {
+    defineRatingItem();
+    if (customElements.get("spui-rating-display"))
+        return;
+    class SpuiRatingDisplay extends HTMLElement {
+        static observedAttributes = ["value", "max", "count", "compact", "size", "color", "aria-label", "lang"];
+        connectedCallback() { this.render(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.render(); }
+        render() {
+            const maxRaw = Number(this.getAttribute("max") ?? 5);
+            const max = Number.isInteger(maxRaw) && maxRaw > 1 ? Math.min(20, maxRaw) : 5;
+            const hasValue = this.hasAttribute("value");
+            const valueRaw = Number(this.getAttribute("value") ?? 0);
+            const value = Number.isFinite(valueRaw) ? Math.max(0, Math.min(max, valueRaw)) : 0;
+            const countRaw = this.getAttribute("count");
+            const explicitLabel = this.getAttribute("aria-label");
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font-family:var(--spui-font-family,inherit)}.root{display:inline-flex;align-items:center;gap:6px}.items{display:inline-flex;align-items:center;gap:2px}.value-text,.count-text{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font-size:var(--spui-rating-label-size,14px);font-variant-numeric:tabular-nums}.count-text:before{content:"("}.count-text:after{content:")"}:host([compact]) .items{gap:0}@media(forced-colors:active){:host{color:CanvasText}}`;
+            const root = document.createElement("span");
+            root.className = "root";
+            root.setAttribute("role", "img");
+            root.setAttribute("aria-label", explicitLabel || `${value} of ${max}${countRaw === null ? "" : `, ${Number(countRaw).toLocaleString(this.lang || undefined)} ratings`}`);
+            const items = document.createElement("span");
+            items.className = "items";
+            items.part.add("items");
+            const slot = document.createElement("slot");
+            const hasItems = [...this.children].some(child => child.localName === "spui-rating-item");
+            if (!hasItems) {
+                const itemCount = this.hasAttribute("compact") ? 1 : max;
+                for (let index = 1; index <= itemCount; index++) {
+                    const item = document.createElement("spui-rating-item");
+                    item.setAttribute("value", String(index));
+                    item.setAttribute("rating", String(value));
+                    item.setAttribute("max", String(max));
+                    if (this.hasAttribute("size"))
+                        item.setAttribute("size", this.getAttribute("size"));
+                    if (this.hasAttribute("color"))
+                        item.setAttribute("color", this.getAttribute("color"));
+                    items.append(item);
+                }
+            }
+            else {
+                slot.addEventListener("slotchange", () => this.syncItems(slot, value, max));
+                items.append(slot);
+            }
+            const valueText = document.createElement("span");
+            valueText.className = "value-text";
+            valueText.part.add("value-text");
+            const valueSlot = document.createElement("slot");
+            valueSlot.name = "value-text";
+            valueSlot.textContent = String(value);
+            valueText.append(valueSlot);
+            const countText = document.createElement("span");
+            countText.className = "count-text";
+            countText.part.add("count-text");
+            const countSlot = document.createElement("slot");
+            countSlot.name = "count-text";
+            countSlot.textContent = countRaw === null ? "" : Number(countRaw).toLocaleString(this.lang || undefined);
+            countText.append(countSlot);
+            if (!hasValue)
+                valueText.hidden = true;
+            if (countRaw === null)
+                countText.hidden = true;
+            root.append(items, valueText, countText);
+            shadow.replaceChildren(style, root);
+            if (hasItems)
+                this.syncItems(slot, value, max);
+        }
+        syncItems(slot, value, max) {
+            for (const item of slot.assignedElements().filter((node) => node.localName === "spui-rating-item")) {
+                item.setAttribute("rating", String(value));
+                item.setAttribute("max", String(max));
+                for (const name of ["size", "color"])
+                    this.hasAttribute(name) ? item.setAttribute(name, this.getAttribute(name)) : item.removeAttribute(name);
+            }
+        }
+    }
+    customElements.define("spui-rating-display", SpuiRatingDisplay);
+}

package/dist/elements/rating.d.ts

@@ -0,0 +1,2 @@
+/** Selectable, form-associated star rating with optional half steps. */
+export declare function defineRating(): void;