@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

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

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

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

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

package/dist/elements/radio-group.js

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

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

package/dist/elements/rating-display.js

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

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