@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/color-picker.js

@@ -1,1004 +0,0 @@
-import { base, syncHostAccessibleName } from "./shared.js";
-function pickerFor(control) { return control.closest("spui-color-picker"); }
-const standaloneControls = new WeakMap();
-function parseControlColor(raw) {
-    if (!raw)
-        return undefined;
-    try {
-        const value = JSON.parse(raw);
-        if (!value || typeof value !== "object")
-            return undefined;
-        const { h, s, v, a } = value;
-        if (![h, s, v].every(channel => typeof channel === "number" && Number.isFinite(channel)))
-            return undefined;
-        return { h: ((h % 360) + 360) % 360, s: Math.max(0, Math.min(1, s)), v: Math.max(0, Math.min(1, v)), a: typeof a === "number" && Number.isFinite(a) ? Math.max(0, Math.min(1, a)) : 1 };
-    }
-    catch {
-        return undefined;
-    }
-}
-function standaloneController(control) {
-    const state = standaloneControls.get(control) ?? { color: { h: 0, s: 0, v: 0, a: 1 }, dirty: false };
-    standaloneControls.set(control, state);
-    const read = parseControlColor;
-    const apply = (color, emit, sourceEvent) => {
-        const normalized = read(JSON.stringify(color));
-        if (!normalized)
-            return;
-        state.color = normalized;
-        state.dirty = state.dirty || emit;
-        control.syncFromPicker?.();
-        if (emit)
-            control.dispatchEvent(new CustomEvent("spui-color-change", { detail: { color: { ...normalized }, event: sourceEvent, type: "change" }, bubbles: true, composed: true }));
-    };
-    const initial = read(control.getAttribute("color")) ?? read(control.getAttribute("default-color"));
-    if (initial && !state.dirty)
-        state.color = initial;
-    return Object.assign(control, {
-        getColorState: () => {
-            const hex = hsvToHex(state.color.h, state.color.s, state.color.v);
-            return { value: hex, alpha: state.color.a ?? 1, hue: state.color.h, saturation: state.color.s, brightness: state.color.v, color: { ...state.color }, disabled: control.hasAttribute("disabled"), readOnly: control.hasAttribute("read-only") };
-        },
-        setHsvFromControl: (h, s, v, _source, sourceEvent) => apply({ ...state.color, h, s, v }, true, sourceEvent),
-        setAlphaFromControl: (a, _source, sourceEvent) => apply({ ...state.color, a }, true, sourceEvent),
-        setControlColor: (color) => apply(color, false),
-        getControlLabel: (name) => control.getAttribute(name) ?? "",
-    });
-}
-function controlController(control) { return pickerFor(control) ?? standaloneController(control); }
-export function defineColorArea() {
-    if (customElements.get("spui-color-area"))
-        return;
-    class SpuiColorArea extends HTMLElement {
-        static observedAttributes = ["aria-label", "shape", "disabled", "color", "default-color"];
-        picker = null;
-        area;
-        inputX;
-        inputY;
-        boundInputX;
-        boundInputY;
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.picker = controlController(this);
-            this.syncFromPicker();
-        }
-        get color() { return this.picker?.getColorState().color ?? { h: 0, s: 0, v: 0, a: 1 }; }
-        set color(value) { const controller = (this.picker ?? controlController(this)); controller.setControlColor?.(value); }
-        get defaultColor() { return parseControlColor(this.getAttribute("default-color") || this.getAttribute("color")) ?? this.color; }
-        set defaultColor(value) { this.setAttribute("default-color", JSON.stringify(value)); }
-        focus(options) { this.inputX?.focus(options); }
-        syncFromPicker() {
-            const state = this.picker?.getColorState();
-            if (!state || !this.area)
-                return;
-            this.inputX = this.axisInput("x");
-            this.inputY = this.axisInput("y");
-            this.area.style.setProperty("--picker-hue", `${state.hue}deg`);
-            this.area.style.setProperty("--picker-saturation", `${state.saturation * 100}%`);
-            this.area.style.setProperty("--picker-brightness", `${(1 - state.brightness) * 100}%`);
-            const shape = this.getAttribute("shape") || this.picker?.getAttribute("shape");
-            this.style.setProperty("--picker-radius", shape === "square" ? "var(--spui-control-radius,4px)" : "10px");
-            this.area.removeAttribute("aria-valuenow");
-            this.area.removeAttribute("aria-valuetext");
-            this.area.setAttribute("aria-label", this.getAttribute("aria-label") || this.picker?.getControlLabel("area-label") || "Saturation and brightness");
-            this.area.setAttribute("aria-disabled", String(state.disabled || state.readOnly || this.hasAttribute("disabled")));
-            this.area.removeAttribute("aria-readonly");
-            this.inputX.value = String(Math.round(state.saturation * 100));
-            this.inputY.value = String(Math.round(state.brightness * 100));
-            this.inputX.disabled = this.inputY.disabled = state.disabled || state.readOnly || this.hasAttribute("disabled");
-            this.inputX.setAttribute("aria-valuetext", String(Math.round(state.saturation * 100)) + "% saturation");
-            this.inputY.setAttribute("aria-valuetext", String(Math.round(state.brightness * 100)) + "% brightness");
-            this.inputX.setAttribute("aria-valuenow", String(Math.round(state.saturation * 100)));
-            this.inputY.setAttribute("aria-valuenow", String(Math.round(state.brightness * 100)));
-            this.inputX.setAttribute("aria-readonly", String(state.readOnly));
-            this.inputY.setAttribute("aria-readonly", String(state.readOnly));
-            const thumb = this.shadowRoot?.querySelector(".thumb") ?? this.shadowRoot?.querySelector('slot[name="thumb"]')?.assignedElements()[0];
-            if (thumb) {
-                thumb.style.insetInlineStart = String(state.saturation * 100) + "%";
-                thumb.style.insetBlockStart = String((1 - state.brightness) * 100) + "%";
-            }
-        }
-        axisInput(axis) {
-            const slot = this.shadowRoot?.querySelector(`slot[name="input${axis.toUpperCase()}"]`);
-            const fallback = this.shadowRoot?.querySelector(`.input-${axis}`);
-            const assigned = slot?.assignedElements().find((element) => element instanceof HTMLInputElement);
-            const input = assigned ?? fallback;
-            if (input) {
-                input.type = "range";
-                input.min = "0";
-                input.max = "100";
-                input.step = "1";
-                if (!input.hasAttribute("aria-label") && !input.hasAttribute("aria-labelledby"))
-                    input.setAttribute("aria-label", this.picker?.getControlLabel(axis === "x" ? "saturation-label" : "value-label") || (axis === "x" ? "Saturation" : "Brightness"));
-                fallback.hidden = Boolean(assigned);
-                fallback.setAttribute("aria-hidden", String(Boolean(assigned)));
-                const bound = axis === "x" ? this.boundInputX : this.boundInputY;
-                if (bound !== input) {
-                    bound?.removeEventListener("input", axis === "x" ? this.handleAxisX : this.handleAxisY);
-                    input.addEventListener("input", axis === "x" ? this.handleAxisX : this.handleAxisY);
-                    if (axis === "x")
-                        this.boundInputX = input;
-                    else
-                        this.boundInputY = input;
-                }
-            }
-            return input;
-        }
-        handleAxisX = (event) => { if (this.blocked())
-            return; const state = this.picker?.getColorState(); if (state)
-            this.picker?.setHsvFromControl(state.hue, Number(event.currentTarget.value) / 100, state.brightness, this, event); };
-        handleAxisY = (event) => { if (this.blocked())
-            return; const state = this.picker?.getColorState(); if (state)
-            this.picker?.setHsvFromControl(state.hue, state.saturation, Number(event.currentTarget.value) / 100, this, event); };
-        attributeChangedCallback(name) { if (name === "color" || name === "default-color")
-            this.color = this.defaultColor; this.syncFromPicker(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}.area{position:relative;width:min(260px,100%);height:160px;border:1px solid var(--spui-ui-stroke,var(--colorNeutralStroke1,#8a8886));border-radius:var(--picker-radius,var(--spui-control-radius,8px));background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue,0deg) 100% 50%));touch-action:none;cursor:crosshair}.thumb{position:absolute;inset-inline-start:var(--picker-saturation,0%);top:var(--picker-brightness,100%);width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}.area:focus-within{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:3px}.inputs{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.inputs slot{display:contents}.inputs input{position:absolute;width:1px;height:1px}@media(forced-colors:active){.area{border-color:FieldText}.area:focus-within{outline-color:Highlight}.thumb{border-color:Canvas;box-shadow:0 0 0 1px CanvasText}}`;
-            this.area = document.createElement("div");
-            this.area.className = "area";
-            this.area.setAttribute("role", "group");
-            this.area.setAttribute("aria-label", this.getAttribute("aria-label") || "Saturation and brightness");
-            this.area.part.add("control");
-            this.area.addEventListener("pointerdown", event => { if (this.blocked())
-                return; this.area.setPointerCapture(event.pointerId); this.updateFromPointer(event); });
-            this.area.addEventListener("pointermove", event => { if (this.area.hasPointerCapture(event.pointerId))
-                this.updateFromPointer(event); });
-            const thumb = document.createElement("span");
-            thumb.className = "thumb";
-            thumb.setAttribute("aria-hidden", "true");
-            const thumbSlot = document.createElement("slot");
-            thumbSlot.name = "thumb";
-            thumbSlot.append(thumb);
-            thumbSlot.addEventListener("slotchange", () => this.syncFromPicker());
-            this.area.append(thumbSlot);
-            const inputs = document.createElement("div");
-            inputs.className = "inputs";
-            const makeInput = (axis) => { const input = document.createElement("input"); input.type = "range"; input.min = "0"; input.max = "100"; input.step = "1"; input.className = `input-${axis}`; return input; };
-            this.inputX = makeInput("x");
-            this.inputY = makeInput("y");
-            const inputXSlot = document.createElement("slot");
-            inputXSlot.name = "inputX";
-            inputXSlot.append(this.inputX);
-            inputXSlot.addEventListener("slotchange", () => this.syncFromPicker());
-            const inputYSlot = document.createElement("slot");
-            inputYSlot.name = "inputY";
-            inputYSlot.append(this.inputY);
-            inputYSlot.addEventListener("slotchange", () => this.syncFromPicker());
-            inputs.append(inputXSlot, inputYSlot);
-            shadow.append(style, this.area, inputs);
-        }
-        blocked() { const state = this.picker?.getColorState(); return !state || state.disabled || state.readOnly || this.hasAttribute("disabled"); }
-        updateFromPointer(event) {
-            const state = this.picker?.getColorState(), bounds = this.area.getBoundingClientRect();
-            if (!state || !bounds.width || !bounds.height)
-                return;
-            const x = Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width));
-            this.picker?.setHsvFromControl(state.hue, x, 1 - Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height)), this, event);
-        }
-    }
-    customElements.define("spui-color-area", SpuiColorArea);
-}
-function defineRangeControl(tag, alpha) {
-    if (customElements.get(tag))
-        return;
-    class SpuiColorRangeControl extends HTMLElement {
-        static observedAttributes = ["channel", "vertical", "transparency", "aria-label", "disabled", "shape", "color", "default-color"];
-        picker = null;
-        input;
-        boundInput;
-        track;
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.picker = controlController(this); this.syncFromPicker(); }
-        get color() { return this.picker?.getColorState().color ?? { h: 0, s: 0, v: 0, a: 1 }; }
-        set color(value) { const controller = (this.picker ?? controlController(this)); controller.setControlColor?.(value); }
-        get defaultColor() { return parseControlColor(this.getAttribute("default-color") || this.getAttribute("color")) ?? this.color; }
-        set defaultColor(value) { this.setAttribute("default-color", JSON.stringify(value)); }
-        focus(options) { this.input?.focus(options); }
-        syncFromPicker() {
-            const state = this.picker?.getColorState();
-            if (!state || !this.input)
-                return;
-            this.input = this.getInput();
-            const channel = this.getAttribute("channel") === "saturation" || this.getAttribute("channel") === "value" ? this.getAttribute("channel") : "hue";
-            this.input.max = alpha ? "100" : channel === "hue" ? "360" : "100";
-            this.input.classList.remove("hue", "saturation", "value", "alpha");
-            this.input.classList.add(alpha ? "alpha" : channel);
-            const transparency = alpha && this.hasAttribute("transparency");
-            const value = alpha ? (transparency ? 1 - state.alpha : state.alpha) * 100 : channel === "hue" ? state.hue : (channel === "saturation" ? state.saturation : state.brightness) * 100;
-            this.input.value = String(Math.round(value));
-            this.input.setAttribute("aria-valuenow", this.input.value);
-            this.input.setAttribute("aria-valuetext", `${this.input.value}${alpha ? "%" : channel === "hue" ? "°" : "%"}`);
-            this.input.setAttribute("aria-label", this.input.getAttribute("aria-label") || this.getAttribute("aria-label") || (alpha ? this.picker?.getControlLabel("alpha-label") : channel === "hue" ? this.picker?.getControlLabel("hue-label") : this.picker?.getControlLabel(channel === "saturation" ? "saturation-label" : "value-label")) || (alpha ? "Opacity" : "Hue"));
-            this.input.setAttribute("aria-orientation", this.hasAttribute("vertical") ? "vertical" : "horizontal");
-            this.input.disabled = state.disabled || state.readOnly || this.hasAttribute("disabled");
-            this.input.style.writingMode = this.hasAttribute("vertical") ? "vertical-lr" : "horizontal-tb";
-            this.input.style.direction = this.hasAttribute("vertical") ? "rtl" : getComputedStyle(this).direction;
-            this.track.classList.toggle("vertical", this.hasAttribute("vertical"));
-            this.track.classList.toggle("horizontal", !this.hasAttribute("vertical"));
-            const progress = Math.max(0, Math.min(1, Number(this.input.value) / Number(this.input.max || 100)));
-            this.track.style.setProperty("--color-range-progress", String(progress * 100) + "%");
-            const railSlot = this.shadowRoot?.querySelector('slot[name="rail"]');
-            const rail = railSlot?.assignedElements()[0] ?? this.shadowRoot?.querySelector(".rail");
-            if (rail && rail === this.shadowRoot?.querySelector(".rail"))
-                rail.style.backgroundImage = getComputedStyle(this.input).backgroundImage;
-            const thumbSlot = this.shadowRoot?.querySelector('slot[name="thumb"]');
-            const thumb = thumbSlot?.assignedElements()[0] ?? this.shadowRoot?.querySelector(".thumb");
-            if (thumb) {
-                thumb.style.insetInlineStart = String(progress * 100) + "%";
-                thumb.style.insetBlockStart = this.hasAttribute("vertical") ? String((1 - progress) * 100) + "%" : "50%";
-            }
-            const hex = state.value;
-            this.style.setProperty("--picker-current-color", `#${hex.slice(1)}`);
-            this.style.setProperty("--picker-hue", `${state.hue}deg`);
-            const shape = this.getAttribute("shape") || this.picker?.getAttribute("shape");
-            this.style.setProperty("--picker-radius", shape === "square" ? "var(--spui-control-radius,4px)" : "10px");
-        }
-        attributeChangedCallback(name) { if (name === "color" || name === "default-color")
-            this.color = this.defaultColor; this.syncFromPicker(); }
-        getInput() {
-            const slot = this.shadowRoot?.querySelector('slot[name="input"]');
-            const fallback = this.shadowRoot?.querySelector(".input-fallback");
-            const assigned = slot?.assignedElements().find((element) => element instanceof HTMLInputElement);
-            const input = assigned ?? fallback;
-            if (input) {
-                input.type = "range";
-                input.min = "0";
-                input.step = "1";
-                fallback.hidden = Boolean(assigned);
-                fallback.setAttribute("aria-hidden", String(Boolean(assigned)));
-                if (this.boundInput !== input) {
-                    this.boundInput?.removeEventListener("input", this.handleInput);
-                    input.addEventListener("input", this.handleInput);
-                    this.boundInput = input;
-                }
-            }
-            return input;
-        }
-        handleInput = (event) => {
-            const state = this.picker?.getColorState();
-            if (!state || state.disabled || state.readOnly)
-                return;
-            const value = Number(event.currentTarget.value);
-            if (alpha)
-                this.picker?.setAlphaFromControl((this.hasAttribute("transparency") ? 100 - value : value) / 100, this, event);
-            else {
-                const channel = this.getAttribute("channel");
-                this.picker?.setHsvFromControl(channel === "hue" || !channel ? value : state.hue, channel === "saturation" ? value / 100 : state.saturation, channel === "value" ? value / 100 : state.brightness, this, event);
-            }
-        };
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;width:min(260px,100%);min-width:80px}.track{position:relative;width:100%;height:32px;touch-action:none}.track.vertical{width:32px;height:160px}.rail{position:absolute;inset:8px 0;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:var(--picker-radius,999px);background-color:var(--spui-ui-canvas,#fff);background-size:100% 100%}.track.vertical .rail{inset:0 8px}.thumb{position:absolute;inset-inline-start:var(--color-range-progress,0%);top:50%;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;background:var(--picker-current-color,#fff);transform:translate(-50%,-50%);pointer-events:none}.track.vertical .thumb{inset-inline-start:50%;top:calc(100% - var(--color-range-progress,0%))}slot[name=thumb]::slotted(*){position:absolute;inset-inline-start:var(--color-range-progress,0%);top:50%;transform:translate(-50%,-50%)}.track.vertical slot[name=thumb]::slotted(*){inset-inline-start:50%;top:calc(100% - var(--color-range-progress,0%))}input{box-sizing:border-box;position:absolute;z-index:1;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:.001;cursor:pointer;accent-color:var(--spui-ui-accent,#78716c);direction:ltr}input:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.track.vertical input{writing-mode:vertical-lr;direction:rtl}input.hue{background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}input.saturation{background-image:linear-gradient(to right,#888,hsl(var(--picker-hue,0deg) 100% 50%))}input.value{background-image:linear-gradient(to right,#000,var(--picker-current-color,#fff))}input.alpha{background-image:linear-gradient(to right,transparent,var(--picker-current-color,#000))}@media(forced-colors:active){.rail{border-color:CanvasText;background:Canvas}.thumb{border-color:Canvas;box-shadow:0 0 0 1px CanvasText}.track:focus-within{outline:2px solid Highlight}}`;
-            style.textContent += `slot[name=rail]::slotted(*){position:absolute;inset:8px 0;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:var(--picker-radius,999px)}.track.vertical slot[name=rail]::slotted(*){inset:0 8px}`;
-            this.track = document.createElement("div");
-            this.track.className = "track";
-            const railFallback = document.createElement("span");
-            railFallback.className = "rail";
-            const rail = document.createElement("slot");
-            rail.name = "rail";
-            rail.append(railFallback);
-            rail.addEventListener("slotchange", () => this.syncFromPicker());
-            const thumbFallback = document.createElement("span");
-            thumbFallback.className = "thumb";
-            thumbFallback.setAttribute("aria-hidden", "true");
-            const thumb = document.createElement("slot");
-            thumb.name = "thumb";
-            thumb.append(thumbFallback);
-            thumb.addEventListener("slotchange", () => this.syncFromPicker());
-            this.input = document.createElement("input");
-            this.input.className = "input-fallback";
-            this.input.type = "range";
-            this.input.min = "0";
-            this.input.step = "1";
-            this.input.part.add("input");
-            const input = document.createElement("slot");
-            input.name = "input";
-            input.append(this.input);
-            input.addEventListener("slotchange", () => this.syncFromPicker());
-            this.track.append(rail, thumb, input);
-            shadow.append(style, this.track);
-        }
-    }
-    customElements.define(tag, SpuiColorRangeControl);
-}
-export function defineColorSlider() { defineRangeControl("spui-color-slider", false); }
-export function defineAlphaSlider() { defineRangeControl("spui-alpha-slider", true); }
-function normalizeHex(value) {
-    const hex = value.trim().replace(/^#/, "");
-    if (/^[\da-f]{3}$/i.test(hex))
-        return `#${[...hex].map(character => character + character).join("").toUpperCase()}`;
-    return /^[\da-f]{6}$/i.test(hex) ? `#${hex.toUpperCase()}` : undefined;
-}
-function colorToHex(color) {
-    const channels = color.match(/[\d.]+/g)?.map(Number);
-    if (!channels || channels.length < 3 || channels.slice(0, 3).some(channel => !Number.isFinite(channel)))
-        return undefined;
-    return `#${channels.slice(0, 3).map(channel => Math.max(0, Math.min(255, Math.round(channel))).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
-}
-function hexToHsv(hex) {
-    const channels = [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16) / 255);
-    const [r, g, b] = channels;
-    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
-    let hue = 0;
-    if (delta)
-        hue = max === r ? 60 * (((g - b) / delta) % 6) : max === g ? 60 * ((b - r) / delta + 2) : 60 * ((r - g) / delta + 4);
-    return [(hue + 360) % 360, max ? delta / max : 0, max];
-}
-function hsvToHex(hue, saturation, brightness) {
-    const chroma = brightness * saturation;
-    const x = chroma * (1 - Math.abs((hue / 60) % 2 - 1));
-    const offset = brightness - chroma;
-    const [r, g, b] = hue < 60 ? [chroma, x, 0] : hue < 120 ? [x, chroma, 0] : hue < 180 ? [0, chroma, x] : hue < 240 ? [0, x, chroma] : hue < 300 ? [x, 0, chroma] : [chroma, 0, x];
-    return `#${[r, g, b].map(channel => Math.round((channel + offset) * 255).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
-}
-function rgbToHex(red, green, blue) {
-    return `#${[red, green, blue].map(channel => Math.max(0, Math.min(255, Math.round(channel))).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
-}
-export function defineColorPicker() {
-    defineColorArea();
-    defineColorSlider();
-    defineAlphaSlider();
-    if (customElements.get("spui-color-picker"))
-        return;
-    class SpuiColorPicker extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["label", "value", "default-value", "default-color", "alpha", "default-alpha", "disabled", "required", "read-only", "name", "size", "shape", "colors", "color-format", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "color-input-label", "hex-input-label", "hue-label", "area-label", "area-value-text", "format-label", "rgb-label", "red-label", "green-label", "blue-label", "alpha-label", "saturation-label", "value-label", "swatches-label", "swatch-label", "invalid-message"];
-        internals;
-        currentValue = "#000000";
-        currentAlpha = 1;
-        hue = 0;
-        saturation = 0;
-        brightness = 0;
-        dirty = false;
-        formDisabled = false;
-        customError = "";
-        colorOptions;
-        themeObserver;
-        get form() { return this.internals?.form ?? null; }
-        constructor() {
-            super();
-            try {
-                this.internals = this.attachInternals();
-            }
-            catch { /* Native color selection still works without form association. */ }
-        }
-        get value() { return this.currentValue; }
-        set value(value) { this.setColor(value, this.currentAlpha, true); }
-        get color() { return this.currentColor(); }
-        set color(value) { this.setHsvColor(value, true); }
-        getColorState() { return { value: this.currentValue, alpha: this.currentAlpha, hue: this.hue, saturation: this.saturation, brightness: this.brightness, color: this.currentColor(), disabled: this.formDisabled || this.hasAttribute("disabled"), readOnly: this.hasAttribute("read-only") }; }
-        getControlLabel(name) { return this.getAttribute(name) || ({ "area-label": "Saturation and brightness", "hue-label": "Hue", "alpha-label": "Opacity", "saturation-label": "Saturation", "value-label": "Brightness" }[name]); }
-        setHsvFromControl(hue, saturation, brightness, source, sourceEvent) {
-            const state = this.getColorState();
-            if (state.disabled || state.readOnly)
-                return;
-            this.hue = ((hue % 360) + 360) % 360;
-            this.saturation = Math.max(0, Math.min(1, saturation));
-            this.brightness = Math.max(0, Math.min(1, brightness));
-            this.commitHsv(sourceEvent);
-            if (source)
-                source.dispatchEvent(new CustomEvent("spui-color-change", { detail: { color: this.currentColor(), event: sourceEvent, type: "change" } }));
-        }
-        setAlphaFromControl(alpha, source, sourceEvent) {
-            const state = this.getColorState();
-            if (state.disabled || state.readOnly)
-                return;
-            this.currentAlpha = Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1;
-            this.dirty = true;
-            const input = this.shadowRoot?.querySelector(".alpha");
-            if (input)
-                input.value = String(Math.round(this.currentAlpha * 100));
-            const preview = this.shadowRoot?.querySelector(".preview");
-            if (preview)
-                preview.style.backgroundColor = this.cssColor();
-            this.syncComposedControls();
-            this.syncForm();
-            this.dispatchChange(sourceEvent);
-            if (source)
-                source.dispatchEvent(new CustomEvent("spui-color-change", { detail: { color: this.currentColor(), event: sourceEvent, type: "change" } }));
-        }
-        get alpha() { return this.currentAlpha; }
-        set alpha(value) { this.setColor(this.currentValue, value, true); }
-        get format() { return this.getAttribute("color-format") === "rgb" ? "rgb" : "hex"; }
-        set format(value) { this.setAttribute("color-format", value === "rgb" ? "rgb" : "hex"); }
-        get name() { return this.getAttribute("name") ?? ""; }
-        set name(value) { this.setAttribute("name", value); }
-        get disabled() { return this.hasAttribute("disabled"); }
-        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
-        get required() { return this.hasAttribute("required"); }
-        set required(value) { this.toggleAttribute("required", Boolean(value)); }
-        get readOnly() { return this.hasAttribute("read-only"); }
-        set readOnly(value) { this.toggleAttribute("read-only", Boolean(value)); }
-        get validity() { return this.internals?.validity ?? this.validationInput()?.validity; }
-        get validationMessage() { return this.internals?.validationMessage ?? this.validationInput()?.validationMessage ?? ""; }
-        get willValidate() { return this.internals?.willValidate ?? Boolean(this.validationInput() && !this.disabled && !this.readOnly && !this.formDisabled); }
-        get defaultAlpha() { return this.readAlpha(this.getAttribute("default-alpha") ?? this.getAttribute("alpha")); }
-        set defaultAlpha(value) { this.setAttribute("default-alpha", String(value)); }
-        get defaultValue() { return normalizeHex(this.getAttribute("default-value") ?? this.getAttribute("value") ?? "#000000") ?? "#000000"; }
-        set defaultValue(value) { this.setAttribute("default-value", value); }
-        get defaultColor() {
-            const color = this.readHsv(this.getAttribute("default-color"));
-            if (color)
-                return { ...color, a: color.a ?? this.defaultAlpha };
-            const [h, s, v] = hexToHsv(this.defaultValue);
-            return { h, s, v, a: this.defaultAlpha };
-        }
-        set defaultColor(value) { this.setAttribute("default-color", JSON.stringify(value)); }
-        currentColor() { return { h: this.hue, s: this.saturation, v: this.brightness, a: this.currentAlpha }; }
-        readHsv(value) {
-            if (!value)
-                return undefined;
-            try {
-                const color = JSON.parse(value);
-                if (!color || typeof color !== "object")
-                    return undefined;
-                const { h, s, v, a } = color;
-                if (![h, s, v].every(channel => typeof channel === "number" && Number.isFinite(channel)))
-                    return undefined;
-                return { h: ((h % 360) + 360) % 360, s: Math.max(0, Math.min(1, s)), v: Math.max(0, Math.min(1, v)), ...(typeof a === "number" && Number.isFinite(a) ? { a: Math.max(0, Math.min(1, a)) } : {}) };
-            }
-            catch {
-                return undefined;
-            }
-        }
-        setHsvColor(color, dirty) {
-            const normalized = this.readHsv(JSON.stringify(color));
-            if (!normalized)
-                return;
-            this.hue = normalized.h;
-            this.saturation = normalized.s;
-            this.brightness = normalized.v;
-            this.currentAlpha = normalized.a ?? (dirty ? 1 : this.defaultAlpha);
-            this.currentValue = hsvToHex(this.hue, this.saturation, this.brightness);
-            if (dirty)
-                this.dirty = true;
-            this.syncValueInputs();
-            const preview = this.shadowRoot?.querySelector(".preview");
-            if (preview)
-                preview.style.backgroundColor = this.cssColor();
-            this.syncPickerArea();
-            this.syncForm();
-            this.syncComposedControls();
-        }
-        changeDetail() { return { value: this.currentValue, alpha: this.currentAlpha, color: this.currentColor() }; }
-        get colors() { return this.colorOptions ?? this.parseColors(this.getAttribute("colors")); }
-        set colors(value) { this.colorOptions = value.map(normalizeHex).filter((color) => Boolean(color)); this.renderSwatches(); }
-        checkValidity() { return this.internals?.checkValidity() ?? this.validationInput()?.checkValidity() ?? true; }
-        reportValidity() { return this.internals?.reportValidity() ?? this.validationInput()?.reportValidity() ?? true; }
-        setCustomValidity(message) { this.customError = message; this.syncForm(); }
-        connectedCallback() {
-            if (!this.shadowRoot) {
-                this.currentValue = this.readInitialValue();
-                this.currentAlpha = this.defaultAlpha;
-                [this.hue, this.saturation, this.brightness] = hexToHsv(this.currentValue);
-                const defaultColor = this.readHsv(this.getAttribute("default-color"));
-                if (defaultColor) {
-                    this.hue = defaultColor.h;
-                    this.saturation = defaultColor.s;
-                    this.brightness = defaultColor.v;
-                    this.currentAlpha = defaultColor.a ?? this.defaultAlpha;
-                    this.currentValue = hsvToHex(this.hue, this.saturation, this.brightness);
-                }
-                this.render();
-            }
-            this.observeThemeColors();
-        }
-        disconnectedCallback() { this.themeObserver?.disconnect(); }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (!this.isConnected || !this.shadowRoot)
-                return;
-            if (name === "value" || name === "default-value") {
-                if (!this.dirty)
-                    this.setColor(this.readInitialValue(), this.currentAlpha, false);
-            }
-            else if (name === "alpha" || name === "default-alpha") {
-                const alpha = this.readAlpha(value);
-                if (!this.dirty)
-                    this.setColor(this.currentValue, alpha, false);
-            }
-            else if (name === "default-color") {
-                const color = this.readHsv(value);
-                if (!this.dirty && color)
-                    this.setHsvColor(color, false);
-            }
-            else if (name === "label") {
-                const label = this.shadowRoot.querySelector("label");
-                if (label)
-                    label.textContent = value ?? "";
-                this.syncInputLabels();
-            }
-            else if (name === "disabled" || name === "read-only")
-                this.syncDisabled();
-            else if (name === "size")
-                this.shadowRoot.querySelector(".picker").dataset.size = value || "medium";
-            else if (name === "shape")
-                this.shadowRoot.querySelector(".picker").dataset.shape = value || "rounded";
-            else if (name === "colors")
-                this.renderSwatches();
-            else if (name === "color-format") {
-                this.syncFormat();
-                this.syncForm();
-            }
-            else if (["color-input-label", "hex-input-label", "hue-label", "area-label", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "rgb-label", "red-label", "green-label", "blue-label"].includes(name))
-                this.syncInputLabels();
-            else if (name === "area-value-text")
-                this.syncPickerArea();
-            else if (name === "format-label")
-                this.syncFormat();
-            else if (["alpha-label", "swatches-label"].includes(name))
-                this.syncGroupLabels();
-            else if (name === "swatch-label")
-                this.renderSwatches();
-            else if (name === "invalid-message")
-                this.syncForm();
-            this.syncComposedControls();
-        }
-        formDisabledCallback(disabled) { this.formDisabled = disabled; this.syncDisabled(); }
-        formResetCallback() { this.dirty = false; const color = this.readHsv(this.getAttribute("default-color")); if (color)
-            this.setHsvColor(color, false);
-        else
-            this.setColor(this.defaultValue, this.defaultAlpha, false); }
-        formStateRestoreCallback(state) {
-            if (typeof state !== "string")
-                return;
-            const [value, alpha] = state.split("|");
-            this.setColor(value, alpha === undefined ? 1 : Number(alpha), false);
-        }
-        readInitialValue() { return normalizeHex(this.getAttribute("value") ?? this.getAttribute("default-value") ?? "#000000") ?? "#000000"; }
-        readAlpha(value) { const alpha = Number(value ?? 1); return Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1; }
-        parseColors(value) { return (value ?? "").split(/[\s,]+/).map(normalizeHex).filter((color) => Boolean(color)); }
-        syncValueInputs(preserveHex = false) {
-            const color = this.shadowRoot?.querySelector('input[type="color"]');
-            const hex = this.shadowRoot?.querySelector(".hex");
-            const channels = this.shadowRoot?.querySelectorAll(".channel-value");
-            if (color)
-                color.value = this.currentValue.toLowerCase();
-            if (hex && !preserveHex) {
-                hex.value = this.currentValue;
-                hex.setCustomValidity("");
-            }
-            if (channels?.length === 3) {
-                const values = [1, 3, 5].map(index => parseInt(this.currentValue.slice(index, index + 2), 16));
-                channels.forEach((channel, index) => { channel.value = String(values[index]); });
-            }
-            const hue = this.shadowRoot?.querySelector(".hue");
-            if (hue)
-                hue.value = String(Math.round(this.hue));
-        }
-        syncFormat() {
-            const select = this.shadowRoot?.querySelector(".format");
-            const hex = this.shadowRoot?.querySelector(".hex");
-            const channels = this.shadowRoot?.querySelector(".channels");
-            if (select)
-                select.value = this.format;
-            if (hex)
-                hex.hidden = this.format !== "hex";
-            if (channels)
-                channels.hidden = this.format !== "rgb";
-        }
-        validationInput() {
-            if (this.format === "rgb")
-                return [...(this.shadowRoot?.querySelectorAll(".channel-value") ?? [])].find(input => !input.validity.valid) ?? this.shadowRoot?.querySelector(".channel-value") ?? undefined;
-            return this.shadowRoot?.querySelector(".hex") ?? undefined;
-        }
-        setColor(value, alpha, dirty) {
-            const normalized = normalizeHex(value);
-            if (normalized)
-                this.currentValue = normalized;
-            this.currentAlpha = Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 1;
-            if (dirty)
-                this.dirty = true;
-            const range = this.shadowRoot?.querySelector(".alpha");
-            [this.hue, this.saturation, this.brightness] = hexToHsv(this.currentValue);
-            this.syncValueInputs();
-            if (range)
-                range.value = String(Math.round(this.currentAlpha * 100));
-            const preview = this.shadowRoot?.querySelector(".preview");
-            if (preview)
-                preview.style.backgroundColor = this.cssColor();
-            this.syncPickerArea();
-            this.syncForm();
-            this.syncComposedControls();
-        }
-        syncPickerArea() {
-            const area = this.shadowRoot?.querySelector(".area");
-            if (!area)
-                return;
-            area.style.setProperty("--picker-hue", `${this.hue}deg`);
-            area.style.setProperty("--picker-saturation", `${this.saturation * 100}%`);
-            area.style.setProperty("--picker-brightness", `${(1 - this.brightness) * 100}%`);
-            area.setAttribute("aria-valuenow", String(Math.round(this.saturation * 100)));
-            area.setAttribute("aria-valuetext", (this.getAttribute("area-value-text") || "{saturation}% saturation, {brightness}% brightness").replaceAll("{saturation}", String(Math.round(this.saturation * 100))).replaceAll("{brightness}", String(Math.round(this.brightness * 100))));
-        }
-        commitHsv(sourceEvent) {
-            this.currentValue = hsvToHex(this.hue, this.saturation, this.brightness);
-            this.dirty = true;
-            this.syncValueInputs();
-            const preview = this.shadowRoot?.querySelector(".preview");
-            if (preview)
-                preview.style.backgroundColor = this.cssColor();
-            this.syncPickerArea();
-            this.syncForm();
-            this.syncComposedControls();
-            this.dispatchChange(sourceEvent);
-        }
-        commitRgb(sourceEvent) {
-            const channels = [...(this.shadowRoot?.querySelectorAll(".channel-value") ?? [])];
-            if (channels.length !== 3 || channels.some(channel => !channel.value || !channel.validity.valid)) {
-                this.syncForm();
-                return;
-            }
-            const [red, green, blue] = channels.map(channel => Number(channel.value));
-            this.setColor(rgbToHex(red, green, blue), this.currentAlpha, true);
-            this.dispatchChange(sourceEvent);
-        }
-        updateAreaFromPointer(event, area) {
-            const bounds = area.getBoundingClientRect();
-            if (!bounds.width || !bounds.height)
-                return;
-            this.saturation = Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width));
-            this.brightness = 1 - Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height));
-            this.commitHsv(event);
-        }
-        cssColor() {
-            const alpha = Math.round(this.currentAlpha * 1000) / 1000;
-            return `rgb(${parseInt(this.currentValue.slice(1, 3), 16)} ${parseInt(this.currentValue.slice(3, 5), 16)} ${parseInt(this.currentValue.slice(5, 7), 16)} / ${alpha})`;
-        }
-        syncForm() {
-            const activeInput = this.validationInput();
-            const validity = activeInput?.validity;
-            const valid = Boolean(validity?.valid) && !this.customError;
-            const alphaHex = Math.round(this.currentAlpha * 255).toString(16).padStart(2, "0").toUpperCase();
-            this.internals?.setFormValue(this.currentAlpha < 1 ? `${this.currentValue}${alphaHex}` : this.currentValue, `${this.currentValue}|${this.currentAlpha}`);
-            try {
-                this.internals?.setValidity(valid ? {} : { badInput: Boolean(validity?.badInput), patternMismatch: Boolean(validity?.patternMismatch), rangeOverflow: Boolean(validity?.rangeOverflow), rangeUnderflow: Boolean(validity?.rangeUnderflow), stepMismatch: Boolean(validity?.stepMismatch), valueMissing: Boolean(validity?.valueMissing), customError: Boolean(this.customError || validity?.customError) }, valid ? "" : (this.customError || activeInput?.validationMessage) ?? "", activeInput ?? undefined);
-            }
-            catch { /* Native input validity remains available if the browser rejects a shadow validity anchor. */ }
-        }
-        syncDisabled() {
-            const disabled = this.formDisabled || this.hasAttribute("disabled");
-            for (const input of this.shadowRoot?.querySelectorAll("input") ?? [])
-                input.disabled = disabled || this.hasAttribute("read-only");
-            for (const button of this.shadowRoot?.querySelectorAll("button") ?? [])
-                button.disabled = disabled || this.hasAttribute("read-only");
-            const format = this.shadowRoot?.querySelector(".format");
-            if (format)
-                format.disabled = disabled || this.hasAttribute("read-only");
-            const area = this.shadowRoot?.querySelector(".area");
-            if (area) {
-                area.tabIndex = disabled ? -1 : 0;
-                area.setAttribute("aria-disabled", String(disabled || this.hasAttribute("read-only")));
-                area.setAttribute("aria-readonly", String(this.hasAttribute("read-only")));
-            }
-            this.syncComposedControls();
-        }
-        syncInputLabels() {
-            const color = this.shadowRoot?.querySelector("input[type=color]");
-            const hex = this.shadowRoot?.querySelector(".hex");
-            const colorLabel = this.getAttribute("color-input-label") || "Choose color";
-            if (color)
-                color.setAttribute("aria-label", colorLabel);
-            if (hex)
-                hex.setAttribute("aria-label", this.getAttribute("hex-input-label") || "Hex color");
-            const picker = this.shadowRoot?.querySelector(".picker");
-            if (picker)
-                syncHostAccessibleName(this, picker);
-            if (picker) {
-                const invalid = this.getAttribute("aria-invalid");
-                if (invalid === null)
-                    picker.removeAttribute("aria-invalid");
-                else
-                    picker.setAttribute("aria-invalid", invalid);
-            }
-            const describedBy = this.getAttribute("aria-describedby");
-            const hue = this.shadowRoot?.querySelector(".hue");
-            const area = this.shadowRoot?.querySelector(".area");
-            const alpha = this.shadowRoot?.querySelector(".alpha");
-            const channels = this.shadowRoot?.querySelectorAll(".channel-value");
-            const format = this.shadowRoot?.querySelector(".format");
-            if (hue)
-                hue.setAttribute("aria-label", this.getAttribute("hue-label") || "Hue");
-            if (area)
-                area.setAttribute("aria-label", this.getAttribute("area-label") || "Saturation and brightness");
-            if (channels?.length === 3)
-                ["red-label", "green-label", "blue-label"].forEach((name, index) => channels[index].setAttribute("aria-label", this.getAttribute(name) || ["Red", "Green", "Blue"][index]));
-            if (format)
-                format.setAttribute("aria-label", this.getAttribute("format-label") || "Color format");
-            for (const input of [color, hex, hue, alpha, area, format, ...(channels ?? [])]) {
-                if (!input)
-                    continue;
-                if (describedBy)
-                    input.setAttribute("aria-describedby", describedBy);
-                else
-                    input.removeAttribute("aria-describedby");
-                const description = this.getAttribute("aria-description");
-                if (description)
-                    input.setAttribute("aria-description", description);
-                else
-                    input.removeAttribute("aria-description");
-                const invalid = this.getAttribute("aria-invalid");
-                if (invalid)
-                    input.setAttribute("aria-invalid", invalid);
-                else
-                    input.removeAttribute("aria-invalid");
-            }
-            if (picker) {
-                if (describedBy)
-                    picker.setAttribute("aria-describedby", describedBy);
-                else
-                    picker.removeAttribute("aria-describedby");
-            }
-        }
-        syncGroupLabels() {
-            const alpha = this.shadowRoot?.querySelector(".alpha");
-            const swatches = this.shadowRoot?.querySelector(".swatches");
-            const channels = this.shadowRoot?.querySelector(".channels");
-            alpha?.setAttribute("aria-label", this.getAttribute("alpha-label") || "Opacity");
-            swatches?.setAttribute("aria-label", this.getAttribute("swatches-label") || "Color swatches");
-            channels?.setAttribute("aria-label", this.getAttribute("rgb-label") || "RGB color values");
-        }
-        renderSwatches() {
-            const root = this.shadowRoot?.querySelector(".swatches");
-            if (!root)
-                return;
-            const labelTemplate = this.getAttribute("swatch-label") || "Select {color}";
-            const theme = [
-                ["--spui-ui-accent", "#78716C"], ["--spui-ui-success", "#107C10"],
-                ["--spui-ui-warning", "#835B00"], ["--spui-ui-danger", "#B10E1C"]
-            ];
-            const buttons = theme.map(([token, fallback]) => {
-                const button = document.createElement("button");
-                button.type = "button";
-                button.dataset.token = token;
-                button.style.backgroundColor = `var(${token},${fallback})`;
-                button.setAttribute("aria-label", labelTemplate.replaceAll("{color}", fallback));
-                button.addEventListener("click", event => this.commitSwatch(colorToHex(getComputedStyle(button).backgroundColor) ?? fallback, event));
-                return button;
-            });
-            for (const color of this.colors) {
-                const button = document.createElement("button");
-                button.type = "button";
-                button.style.backgroundColor = color;
-                button.setAttribute("aria-label", labelTemplate.replaceAll("{color}", color));
-                button.addEventListener("click", event => this.commitSwatch(color, event));
-                buttons.push(button);
-            }
-            root.replaceChildren(...buttons);
-            for (const button of root.querySelectorAll("button[data-token]")) {
-                const color = colorToHex(getComputedStyle(button).backgroundColor) ?? "#78716C";
-                button.setAttribute("aria-label", labelTemplate.replaceAll("{color}", color));
-            }
-        }
-        observeThemeColors() {
-            this.themeObserver?.disconnect();
-            this.themeObserver = new MutationObserver(() => {
-                const template = this.getAttribute("swatch-label") || "Select {color}";
-                for (const button of this.shadowRoot?.querySelectorAll("button[data-token]") ?? []) {
-                    const color = colorToHex(getComputedStyle(button).backgroundColor);
-                    if (color)
-                        button.setAttribute("aria-label", template.replaceAll("{color}", color));
-                }
-            });
-            for (let current = this; current; current = current.parentElement) {
-                this.themeObserver.observe(current, { attributes: true, attributeFilter: ["style", "class", "data-spui-appearance", "data-spui-base-appearance"] });
-            }
-        }
-        commitSwatch(color, sourceEvent) {
-            this.setColor(color, this.currentAlpha, true);
-            this.dispatchChange(sourceEvent);
-        }
-        dispatchChange(sourceEvent) {
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { ...this.changeDetail(), event: sourceEvent, type: "change" }, bubbles: true, composed: true }));
-        }
-        syncComposedControls() {
-            for (const control of this.querySelectorAll("spui-color-area,spui-color-slider,spui-alpha-slider"))
-                control.syncFromPicker?.();
-        }
-        render() {
-            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
-            const id = `color-${crypto.randomUUID()}`;
-            const label = document.createElement("label");
-            label.htmlFor = `${id}-color`;
-            label.part.add("label");
-            label.textContent = this.getAttribute("label") ?? "";
-            const picker = document.createElement("div");
-            picker.className = "picker";
-            picker.dataset.size = this.getAttribute("size") || "medium";
-            picker.dataset.shape = this.getAttribute("shape") || "rounded";
-            picker.setAttribute("role", "group");
-            picker.setAttribute("aria-label", this.getAttribute("aria-label") || this.getAttribute("label") || "Color picker");
-            for (const name of ["aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    picker.setAttribute(name, value);
-            }
-            const color = document.createElement("input");
-            color.type = "color";
-            color.id = `${id}-color`;
-            color.value = this.currentValue.toLowerCase();
-            color.part.add("color-input");
-            const hex = document.createElement("input");
-            hex.type = "text";
-            hex.id = `${id}-hex`;
-            hex.className = "hex";
-            hex.value = this.currentValue;
-            hex.pattern = "#(?:[\\da-fA-F]{3}|[\\da-fA-F]{6})";
-            hex.required = this.hasAttribute("required");
-            hex.autocomplete = "off";
-            hex.spellcheck = false;
-            hex.part.add("hex-input");
-            const formatLabel = document.createElement("label");
-            formatLabel.className = "format-label";
-            formatLabel.append(document.createTextNode(`${this.getAttribute("format-label") || "Color format"} `));
-            const format = document.createElement("select");
-            format.className = "format";
-            format.part.add("format-select");
-            for (const [value, text] of [["hex", "HEX"], ["rgb", "RGB"]]) {
-                const option = document.createElement("option");
-                option.value = value;
-                option.textContent = text;
-                format.append(option);
-            }
-            formatLabel.append(format);
-            const channels = document.createElement("div");
-            channels.className = "channels";
-            channels.setAttribute("role", "group");
-            channels.part.add("rgb-inputs");
-            for (const [key, labelText, index] of [["red", "Red", 0], ["green", "Green", 1], ["blue", "Blue", 2]]) {
-                const field = document.createElement("label");
-                field.className = "channel";
-                field.htmlFor = `${id}-${key}`;
-                field.textContent = this.getAttribute(`${key}-label`) || labelText;
-                const input = document.createElement("input");
-                input.id = `${id}-${key}`;
-                input.className = "channel-value";
-                input.type = "number";
-                input.min = "0";
-                input.max = "255";
-                input.step = "1";
-                input.required = this.hasAttribute("required");
-                input.inputMode = "numeric";
-                input.value = String(parseInt(this.currentValue.slice(1 + index * 2, 3 + index * 2), 16));
-                input.part.add(`${key}-input`);
-                field.append(input);
-                channels.append(field);
-            }
-            const preview = document.createElement("span");
-            preview.className = "preview";
-            preview.setAttribute("aria-hidden", "true");
-            preview.part.add("preview");
-            preview.style.backgroundColor = this.cssColor();
-            const alpha = document.createElement("input");
-            alpha.type = "range";
-            alpha.className = "alpha";
-            alpha.min = "0";
-            alpha.max = "100";
-            alpha.value = String(Math.round(this.currentAlpha * 100));
-            alpha.part.add("alpha-input");
-            const alphaRow = document.createElement("div");
-            alphaRow.className = "alpha-row";
-            alphaRow.append(alpha);
-            const hue = document.createElement("input");
-            hue.type = "range";
-            hue.className = "hue";
-            hue.min = "0";
-            hue.max = "360";
-            hue.value = String(Math.round(this.hue));
-            hue.part.add("hue-input");
-            const area = document.createElement("div");
-            area.className = "area";
-            area.tabIndex = 0;
-            area.setAttribute("role", "slider");
-            area.setAttribute("aria-valuemin", "0");
-            area.setAttribute("aria-valuemax", "100");
-            area.part.add("color-area");
-            const areaSlot = document.createElement("slot");
-            areaSlot.name = "area";
-            areaSlot.append(area);
-            const sliderSlot = document.createElement("slot");
-            sliderSlot.name = "sliders";
-            sliderSlot.append(hue);
-            const alphaSlot = document.createElement("slot");
-            alphaSlot.name = "alpha";
-            alphaSlot.append(alphaRow);
-            const swatches = document.createElement("div");
-            swatches.className = "swatches";
-            swatches.part.add("swatches");
-            color.setAttribute("aria-label", this.getAttribute("color-input-label") || "Choose color");
-            hex.setAttribute("aria-label", this.getAttribute("hex-input-label") || "Hex color");
-            alpha.setAttribute("aria-label", this.getAttribute("alpha-label") || "Opacity");
-            swatches.setAttribute("role", "group");
-            swatches.setAttribute("aria-label", this.getAttribute("swatches-label") || "Color swatches");
-            for (const name of ["aria-describedby"]) {
-                const value = this.getAttribute(name);
-                if (value) {
-                    color.setAttribute(name, value);
-                    hex.setAttribute(name, value);
-                    alpha.setAttribute(name, value);
-                }
-            }
-            color.addEventListener("input", event => this.commitInput(color.value, hex, event));
-            hex.addEventListener("input", event => {
-                const normalized = normalizeHex(hex.value);
-                hex.setCustomValidity(normalized ? "" : this.getAttribute("invalid-message") || "Enter a 3 or 6 digit hex color, for example #336699.");
-                if (normalized)
-                    this.commitInput(normalized, hex, event, true);
-                else
-                    this.syncForm();
-            });
-            hex.addEventListener("blur", () => { const normalized = normalizeHex(hex.value); if (normalized)
-                hex.value = normalized; });
-            alpha.addEventListener("input", event => this.setAlphaFromControl(Number(alpha.value) / 100, undefined, event));
-            format.value = this.format;
-            format.addEventListener("change", () => { this.format = format.value; this.dispatchEvent(new CustomEvent("spui-format-change", { detail: { format: this.format }, bubbles: true, composed: true })); });
-            for (const input of channels.querySelectorAll(".channel-value"))
-                input.addEventListener("input", event => this.commitRgb(event));
-            hue.addEventListener("input", event => this.setHsvFromControl(Number(hue.value), this.saturation, this.brightness, undefined, event));
-            area.addEventListener("pointerdown", event => { if (this.hasAttribute("disabled") || this.hasAttribute("read-only") || this.formDisabled)
-                return; area.setPointerCapture(event.pointerId); this.updateAreaFromPointer(event, area); });
-            area.addEventListener("pointermove", event => { if (area.hasPointerCapture(event.pointerId))
-                this.updateAreaFromPointer(event, area); });
-            area.addEventListener("keydown", event => {
-                if (this.hasAttribute("disabled") || this.hasAttribute("read-only") || this.formDisabled)
-                    return;
-                const step = event.shiftKey ? 0.1 : 0.01;
-                const rtl = getComputedStyle(area).direction === "rtl";
-                if (event.key === "ArrowLeft")
-                    this.saturation = Math.max(0, Math.min(1, this.saturation + (rtl ? step : -step)));
-                else if (event.key === "ArrowRight")
-                    this.saturation = Math.max(0, Math.min(1, this.saturation + (rtl ? -step : step)));
-                else if (event.key === "ArrowUp")
-                    this.brightness = Math.min(1, this.brightness + step);
-                else if (event.key === "ArrowDown")
-                    this.brightness = Math.max(0, this.brightness - step);
-                else if (event.key === "Home")
-                    this.saturation = 0;
-                else if (event.key === "End")
-                    this.saturation = 1;
-                else
-                    return;
-                event.preventDefault();
-                this.commitHsv(event);
-            });
-            picker.append(color, hex, preview);
-            shadow.replaceChildren();
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,8px);min-width:0}label:empty{display:none}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.picker{display:flex;align-items:center;gap:var(--spui-control-gap,8px);min-width:0}.picker[data-size=small]{--picker-height:32px}.picker[data-size=medium]{--picker-height:40px}.picker[data-size=large]{--picker-height:48px}.picker[data-shape=square]{--picker-radius:var(--spui-control-radius,4px)}.picker[data-shape=rounded]{--picker-radius:10px}.picker:focus-within{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#78716c));outline-offset:2px;border-radius:var(--picker-radius)}input,select{box-sizing:border-box;min-height:var(--picker-height,40px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--picker-radius,10px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit}input[type=color]{flex:none;width:var(--picker-height,40px);padding:4px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:calc(var(--picker-radius,10px) - 3px)}input.hex{width:10ch;max-width:42vw;padding-inline:10px;font-variant-numeric:tabular-nums;text-transform:uppercase}input:disabled,select:disabled{opacity:.55;cursor:not-allowed}input.hex:invalid{border-color:var(--spui-ui-danger,var(--spui-semantic-error-text,#b10e1c))}.format-label{display:flex;align-items:center;gap:8px}.format{min-height:32px;padding-inline:8px}.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(320px,100%)}.channels[hidden],.hex[hidden]{display:none!important}.channel{display:grid;gap:3px;font-size:12px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))}.channel-value{width:100%;min-height:32px;padding-inline:6px;direction:ltr;text-align:start;font-variant-numeric:tabular-nums}.preview{flex:none;width:var(--picker-height,40px);height:var(--picker-height,40px);border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:var(--picker-radius,10px)}.area{position:relative;width:min(260px,100%);height:160px;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:var(--picker-radius,10px);background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue,0deg) 100% 50%));touch-action:none;cursor:crosshair}.area::after{content:"";position:absolute;left:var(--picker-saturation,0%);top:var(--picker-brightness,100%);width:14px;height:14px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}.area:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#78716c));outline-offset:3px}.hue{direction:ltr;max-width:260px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.hue::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.hue::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.alpha-row{display:flex;align-items:center;gap:8px;max-width:320px}input[type=range]{width:100%;min-height:32px;accent-color:var(--spui-ui-accent,#78716c)}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatches button{box-sizing:border-box;width:36px;height:36px;padding:0;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:10px;cursor:pointer}:host([shape=square]) .swatches button{border-radius:var(--spui-control-radius,4px)}.swatches button:hover{outline:2px solid var(--spui-ui-accent,#78716c);outline-offset:1px}.swatches button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#78716c));outline-offset:2px}@media(forced-colors:active){input,select,.area,.swatches button{border-color:FieldText}.area:focus-visible,.swatches button:focus-visible,input:focus-visible,select:focus-visible{outline-color:Highlight}}@media(prefers-reduced-motion:reduce){.area::after{transition:none}}`;
-            style.textContent += ".picker:focus-within{outline:none}input.hex{direction:ltr;text-align:left}";
-            style.textContent += "slot[name=area],slot[name=sliders],slot[name=alpha]{display:block;max-width:100%}slot[name=sliders]{display:flex;align-items:center;gap:var(--spui-control-gap,8px);flex-wrap:wrap}slot[name=area]>spui-color-area,slot[name=sliders]>spui-color-slider,slot[name=alpha]>spui-alpha-slider{max-width:100%}";
-            shadow.append(style, label, picker, areaSlot, sliderSlot, formatLabel, channels, alphaSlot, swatches);
-            syncHostAccessibleName(this, picker);
-            this.syncInputLabels();
-            this.syncGroupLabels();
-            this.syncDisabled();
-            this.renderSwatches();
-            this.syncPickerArea();
-            this.syncFormat();
-            this.syncForm();
-            this.syncComposedControls();
-        }
-        commitInput(value, hex, sourceEvent, preserveHex = false) {
-            const normalized = normalizeHex(value);
-            if (!normalized)
-                return;
-            this.currentValue = normalized;
-            this.dirty = true;
-            if (!preserveHex)
-                hex.value = normalized;
-            hex.setCustomValidity("");
-            const preview = this.shadowRoot?.querySelector(".preview");
-            if (preview)
-                preview.style.backgroundColor = this.cssColor();
-            [this.hue, this.saturation, this.brightness] = hexToHsv(normalized);
-            this.syncValueInputs(preserveHex);
-            this.syncPickerArea();
-            this.syncForm();
-            this.dispatchChange(sourceEvent);
-        }
-    }
-    customElements.define("spui-color-picker", SpuiColorPicker);
-}