@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/collection/components/co-color-area/co-color-area.css

@@ -0,0 +1,87 @@
+/* Thumb compartido del picker de color (co-color-area + co-color-slider).
+   Se `@import`-a como PRIMER statement del CSS de cada componente (Stencil
+   inlinea los @import locales en build). El elemento que lo lleva es el
+   `part="thumb"` de ambos.
+
+   Receta (Task C15): 16 px = anillo blanco 4 px + color actual + --co-shadow-lg.
+   El hairline de 1 px (--co-semantic-border-hairline = negro-4) va ADEMÁS de la sombra: sin él el anillo
+   blanco se pierde por completo en la esquina blanca del área (S 0 / V 100) y en
+   el extremo transparente del slider de alpha — --co-shadow-lg es 5 % de alpha.
+   Es configurable por el host vía `--co-color-thumb-hairline` (un color); para
+   el look exacto del brief, sin hairline: `--co-color-thumb-hairline: transparent`.
+
+   El color entra por `--co-color-thumb-fill` (inline, desde el tsx): hex para el
+   área y el tono; para alpha es una pila color-mix + damero, así el thumb
+   muestra la opacidad real. `pointer-events: none`: el gesto lo captura el
+   contenedor (área/track), nunca el thumb. */
+
+.co-color-thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--co-color-thumb-size, 16px);
+  height: var(--co-color-thumb-size, 16px);
+  border-radius: var(--co-border-radius-full);
+  border: 4px solid var(--co-color-base-blanco, #fff);
+  background: var(--co-color-thumb-fill, transparent);
+  box-shadow:
+    0 0 0 1px var(--co-color-thumb-hairline, var(--co-semantic-border-hairline)),
+    var(--co-shadow-lg);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  /* Solo saltos discretos (teclado) transicionan: el arrastre pone --dragging
+     en el contenedor y apaga la transición (ver cada componente). */
+  transition:
+    left var(--co-motion-duration-instant) var(--co-motion-ease-out),
+    top var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+
+/**
+ * @prop --co-color-area-radius: Radio del área (default 8px; default en `:host`, se sobrescribe sobre el elemento).
+ */
+
+/* co-color-area — área saturación/valor del picker de color.
+   Caja 236×200 por defecto: ancho fluido y la proporción fija la altura; el
+   host puede fijar el ancho y la caja escala. */
+
+:host {
+  display: block;
+  width: 100%;
+  --co-color-area-radius: var(--co-border-radius-xs); /* 8 px */
+}
+
+.co-color-area {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  aspect-ratio: 236 / 200;
+  border-radius: var(--co-color-area-radius);
+  /* Eje X: blanco → tono puro; eje Y: transparente → negro (V 0 abajo).
+     Los literales son el modelo de color, no tema: no van a tokens. */
+  background:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, hsl(var(--co-color-area-hue, 0) 100% 50%));
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+}
+
+.co-color-area--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Manipulación directa = sin transición del thumb (evita el desfase con el
+   puntero); los saltos de teclado sí transicionan (--co-motion-duration-instant). */
+.co-color-area--dragging .co-color-area__thumb {
+  transition: none;
+}
+
+/* Anillo de foco por teclado — solo :focus-visible, el click no lo enciende
+   (el foco se mueve a mano en pointerdown y el browser no lo marca visible). */
+.co-color-area:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}

package/dist/collection/components/co-color-area/co-color-area.js

@@ -0,0 +1,342 @@
+import { h } from "@stencil/core";
+import { clamp, hsvToHex } from "../../utils/hsv";
+/**
+ * Área saturación/valor (el "cuadrado" del picker de color). El tono viene de
+ * afuera (`hue`, normalmente de un `co-color-slider channel="hue"`); el usuario
+ * elige saturación (eje X) y valor (eje Y) arrastrando o con el teclado.
+ *
+ * Contrato de eventos (pensado para el historial de deshacer del editor):
+ *  - `coInput`  → en cada movimiento del arrastre (vista previa) y en cada paso
+ *                 de teclado.
+ *  - `coChange` → UNA vez al terminar el gesto (pointerup/pointercancel), solo
+ *                 si el gesto cambió el valor, o tras cada paso de teclado que
+ *                 lo cambie. Es el punto de commit: nunca un commit vacío.
+ *
+ * Los valores de puntero NO se redondean (una caja de 236 px da ~0,4 % por
+ * píxel; redondear a enteros dejaría hex inalcanzables). El teclado suma ±1
+ * (±10 con Shift) sobre el valor vigente. Quien muestre números redondea.
+ *
+ * @part thumb - El indicador circular (16 px, anillo blanco + color actual). *
+ * Wrapper Vue: `CoColorArea` de `@prolibu-suite/cobalt-vue`.
+ */
+export class CoColorArea {
+    constructor() {
+        /** Tono 0–360. Pinta el fondo; el área no lo modifica. */
+        this.hue = 0;
+        /** Saturación 0–100 (eje X). Mutable: el área se actualiza sola al arrastrar. */
+        this.saturation = 100;
+        /** Valor/brillo 0–100 (eje Y, 100 arriba). Mutable: el área se actualiza sola al arrastrar. */
+        this.value = 100;
+        /** Deshabilita puntero y teclado; no emite nada. */
+        this.disabled = false;
+        this.dragging = false;
+        /** ¿Algún coInput real durante el gesto? Sin cambio no hay coChange de cierre. */
+        this.changedInGesture = false;
+        // ── Puntero ────────────────────────────────────────────────────────────
+        this.handlePointerDown = (e) => {
+            var _a;
+            // Solo el botón primario; un segundo puntero (multi-touch) no roba el gesto en curso.
+            if (this.disabled || e.button !== 0 || this.dragging)
+                return;
+            // Evita selección de texto y el mousedown de compatibilidad; el foco se
+            // mueve a mano para que las flechas funcionen después del click.
+            e.preventDefault();
+            (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            this.capturePointer(e);
+            this.dragging = true;
+            this.activePointerId = e.pointerId;
+            this.changedInGesture = false;
+            this.applyPointer(e);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.applyPointer(e);
+        };
+        this.handlePointerEnd = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.dragging = false;
+            this.activePointerId = undefined;
+            this.releasePointer(e);
+            // Terminar el gesto DESARMA la bandera (hermano del `endGesture()` de
+            // co-slider). Hoy es defensa y no un fix: este componente no tiene
+            // `disconnectedCallback`, así que nadie vuelve a leerla después del gesto
+            // — en co-slider, que sí lo tiene, la bandera armada le hacía reemitir un
+            // `coChange` con el valor ya escrito en CADA desmontaje. Junto con el
+            // `if (this.dragging)` de `commitInput` (el teclado no la arma), fuera de
+            // un gesto la bandera está SIEMPRE apagada.
+            const huboCambio = this.changedInGesture;
+            this.changedInGesture = false;
+            // Un click sobre el valor actual (o en un extremo ya alcanzado) no cambia
+            // nada: sin coChange, igual que el teclado en el borde. Un commit vacío
+            // entraría al historial de deshacer del editor como paso sin efecto.
+            if (huboCambio)
+                this.coChange.emit(this.detail);
+        };
+        // ── Teclado ────────────────────────────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const step = e.shiftKey ? 10 : 1;
+            let ds = 0;
+            let dv = 0;
+            switch (e.key) {
+                case 'ArrowRight':
+                    ds = step;
+                    break;
+                case 'ArrowLeft':
+                    ds = -step;
+                    break;
+                case 'ArrowUp':
+                    dv = step;
+                    break;
+                case 'ArrowDown':
+                    dv = -step;
+                    break;
+                default: return;
+            }
+            e.preventDefault();
+            const s = clamp(this.saturation + ds, 0, 100);
+            const v = clamp(this.value + dv, 0, 100);
+            // En el borde no hay cambio → sin eventos (un commit vacío ensuciaría el historial).
+            if (this.commitInput(s, v))
+                this.coChange.emit(this.detail);
+        };
+    }
+    get detail() {
+        return { saturation: this.saturation, value: this.value };
+    }
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    isActivePointer(e) {
+        return this.dragging && e.pointerId == this.activePointerId;
+    }
+    /** `setPointerCapture` sigue el gesto fuera de la caja. jsdom no lo implementa
+     *  y un browser lanza NotFoundError con un pointerId sintético: guardado. */
+    capturePointer(e) {
+        const el = this.areaEl;
+        if (!el || typeof el.setPointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* pointerId inactivo (evento sintético): sin captura, el gesto sigue dentro de la caja */
+        }
+    }
+    releasePointer(e) {
+        const el = this.areaEl;
+        if (!el || typeof el.releasePointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* ya liberado */
+        }
+    }
+    /** clientX/Y → saturación (X, 0 izquierda) y valor (Y, 100 arriba), acotados a la caja. */
+    applyPointer(e) {
+        var _a;
+        const rect = (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0)
+            return;
+        const s = clamp((e.clientX - rect.left) / rect.width, 0, 1) * 100;
+        const v = (1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)) * 100;
+        this.commitInput(s, v);
+    }
+    /** Aplica s/v y emite `coInput` solo si algo cambió (los moves repetidos no
+     *  disparan re-render ni trabajo en el host). */
+    commitInput(s, v) {
+        if (s === this.saturation && v === this.value)
+            return false;
+        this.saturation = s;
+        this.value = v;
+        // Solo un GESTO arma la bandera: el teclado también pasa por acá (y cierra
+        // él mismo con su `coChange`), y armarla fuera de un arrastre la dejaba
+        // prendida sin nadie que la apague.
+        if (this.dragging)
+            this.changedInGesture = true;
+        this.coInput.emit(this.detail);
+        return true;
+    }
+    render() {
+        var _a, _b, _c;
+        // `??`: el harness de spec no materializa defaults de class-field.
+        const hue = (_a = this.hue) !== null && _a !== void 0 ? _a : 0;
+        const s = clamp((_b = this.saturation) !== null && _b !== void 0 ? _b : 100, 0, 100);
+        const v = clamp((_c = this.value) !== null && _c !== void 0 ? _c : 100, 0, 100);
+        const fill = hsvToHex({ h: hue, s, v });
+        return (h("div", { key: '6611eb74820088bdd7fd23a915cc5f0fd4b29f17', class: {
+                'co-color-area': true,
+                'co-color-area--disabled': this.disabled,
+                'co-color-area--dragging': this.dragging,
+            }, style: { '--co-color-area-hue': String(hue) }, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(Math.round(s)), "aria-valuetext": `S ${Math.round(s)}% V ${Math.round(v)}%`, "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.areaEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '480fedf78cd542849742c351c64f1a1f6ec91cbd', class: "co-color-thumb co-color-area__thumb", part: "thumb", style: { left: `${s}%`, top: `${100 - v}%`, '--co-color-thumb-fill': fill } })));
+    }
+    static get is() { return "co-color-area"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-color-area.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-color-area.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hue": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tono 0\u2013360. Pinta el fondo; el \u00E1rea no lo modifica."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hue",
+                "defaultValue": "0"
+            },
+            "saturation": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Saturaci\u00F3n 0\u2013100 (eje X). Mutable: el \u00E1rea se actualiza sola al arrastrar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "saturation",
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor/brillo 0\u2013100 (eje Y, 100 arriba). Mutable: el \u00E1rea se actualiza sola al arrastrar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "100"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita puntero y teclado; no emite nada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible del slider (`aria-label`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Vista previa: cada movimiento del arrastre y cada paso de teclado."
+                },
+                "complexType": {
+                    "original": "ColorAreaDetail",
+                    "resolved": "ColorAreaDetail",
+                    "references": {
+                        "ColorAreaDetail": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-color-area/co-color-area.tsx",
+                            "id": "src/components/co-color-area/co-color-area.tsx::ColorAreaDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Commit: una vez al soltar (o cancelar) el gesto si cambi\u00F3 el valor, y tras cada paso de teclado que lo cambie."
+                },
+                "complexType": {
+                    "original": "ColorAreaDetail",
+                    "resolved": "ColorAreaDetail",
+                    "references": {
+                        "ColorAreaDetail": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-color-area/co-color-area.tsx",
+                            "id": "src/components/co-color-area/co-color-area.tsx::ColorAreaDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -59,6 +59,8 @@ const flattenGroups = (groups) => groups.reduce((acc, g) => acc.concat(g.items),
  * @event coChange - Emits the committed hex string (e.g. "#0066FF"): pointer
  * release, arrow key, swatch click, paste, and the end of a hex-field edit
  * (blur, Enter or panel close).
+ *
+ * Wrapper Vue: `CoColorPicker` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoColorPicker {
     constructor() {
@@ -995,12 +997,12 @@ export class CoColorPicker {
     render() {
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: '5e4239ff9ef0dc3f15004898d2d891f8d231e95d', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '003a893c3c840cd03d87c4291795499ac80b8b73', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '4c14eaf668b0677b91b23a00f001ffaa4c21f5c5', required: this.required }))), h("co-popover", { key: 'f4a489f77c2d629ea1d9b69786cfad0f95d5422b', open: this.isOpen, placement: "bottom-start",
+        return (h("div", { key: '6746d83ad6d123c58a88dd3a236f3288758eb507', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'd37d7b2e7b457cc366006e18f5188dd76171c3bb', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'dbb125918398dc5d55f9083e88f0f1948281d5b0', required: this.required }))), h("co-popover", { key: '91b03300c502c85e068e28e235feadf06fbbb76c', open: this.isOpen, placement: "bottom-start",
             // Sin `matchWidth`: el panel tiene ancho INTRÍNSECO (grilla de 8
             // swatches fijos de 32px). Copiar el ancho del trigger achica los
             // tracks bajo 32px con un campo angosto (media columna de un modal) y
             // los swatches desbordan el card — guard: panel-width.spec.
-            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '229e0095d6b6a723e77cf0d001d780cf51116851', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '9267f104b7f0542653038ef381fb81a7f7f0188e', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '64efb900a60576022b3f487db56380973d2934c9', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '22abcb6c79531f41a6655fc48320e4c108a33049', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '901b7094f7da8c09ea25cad568eda8d5fcaf2d6e', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'fb341f791466f133f6a6c4bd04a8dd71c519c7c0', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '0ecfc7d46a07c741d42b59660979559fb78117df', class: "co-color-picker__helper-text" }, this.helperText)))));
+            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'fec8eb5f52f4a95c478cee49a1a05b8ca93a40b4', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '648331ab929d1874f09ebd59d722839312434bcd', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '07f235dfd673b4d31f9fb994eccc7e38d1f866ec', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'e6ad5d5190d9341afde82de0c8897249e173463e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '057dabe6f2fd8853f6a1df6d0c1c8d6574393f45', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '674e0cf71b0a2d1cc367c929196a7876c23c966c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '001b3df1f014b0039bfe0cdd588aae91d92a78bd', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-color-slider/co-color-slider.css

@@ -0,0 +1,115 @@
+/* Thumb compartido del picker de color (co-color-area + co-color-slider).
+   Se `@import`-a como PRIMER statement del CSS de cada componente (Stencil
+   inlinea los @import locales en build). El elemento que lo lleva es el
+   `part="thumb"` de ambos.
+
+   Receta (Task C15): 16 px = anillo blanco 4 px + color actual + --co-shadow-lg.
+   El hairline de 1 px (--co-semantic-border-hairline = negro-4) va ADEMÁS de la sombra: sin él el anillo
+   blanco se pierde por completo en la esquina blanca del área (S 0 / V 100) y en
+   el extremo transparente del slider de alpha — --co-shadow-lg es 5 % de alpha.
+   Es configurable por el host vía `--co-color-thumb-hairline` (un color); para
+   el look exacto del brief, sin hairline: `--co-color-thumb-hairline: transparent`.
+
+   El color entra por `--co-color-thumb-fill` (inline, desde el tsx): hex para el
+   área y el tono; para alpha es una pila color-mix + damero, así el thumb
+   muestra la opacidad real. `pointer-events: none`: el gesto lo captura el
+   contenedor (área/track), nunca el thumb. */
+
+.co-color-thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--co-color-thumb-size, 16px);
+  height: var(--co-color-thumb-size, 16px);
+  border-radius: var(--co-border-radius-full);
+  border: 4px solid var(--co-color-base-blanco, #fff);
+  background: var(--co-color-thumb-fill, transparent);
+  box-shadow:
+    0 0 0 1px var(--co-color-thumb-hairline, var(--co-semantic-border-hairline)),
+    var(--co-shadow-lg);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  /* Solo saltos discretos (teclado) transicionan: el arrastre pone --dragging
+     en el contenedor y apaga la transición (ver cada componente). */
+  transition:
+    left var(--co-motion-duration-instant) var(--co-motion-ease-out),
+    top var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+
+/* co-color-slider — slider de tono / alpha del picker de color.
+   Track 192×16 en el diseño: ancho fluido (lo fija el host), 16 px de alto,
+   radio completo. El thumb (16) va inset: nunca se sale del track. */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.co-color-slider {
+  position: relative;
+  width: 100%;
+}
+
+.co-color-slider__track {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 16px;
+  border-radius: var(--co-border-radius-full);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+}
+
+/* Tono: escala HSL UNIFORME 0 → 360 en pasos de 60 (D-31). Sin posiciones de
+   parada: el reparto por defecto es lineal, igual que el mapeo valor → thumb.
+   (Los literales son el modelo de color, no tema: no van a tokens.) */
+.co-color-slider__track--hue {
+  background: linear-gradient(
+    to right,
+    hsl(0 100% 50%),
+    hsl(60 100% 50%),
+    hsl(120 100% 50%),
+    hsl(180 100% 50%),
+    hsl(240 100% 50%),
+    hsl(300 100% 50%),
+    hsl(360 100% 50%)
+  );
+}
+
+/* Alpha: transparente → color base sobre damero de 8 px (#ebebeb / #fafafa). */
+.co-color-slider__track--alpha {
+  background:
+    linear-gradient(to right, transparent, var(--co-color-slider-color, #000)),
+    repeating-conic-gradient(#ebebeb 0 25%, #fafafa 0 50%) 0 0 / 8px 8px;
+}
+
+/* Thumb inset: centro en [size/2, 100% − size/2] según la proporción 0–1 que
+   expone el tsx (--co-color-slider-ratio). */
+.co-color-slider__thumb {
+  top: 50%;
+  left: calc(
+    var(--co-color-thumb-size, 16px) / 2 +
+      (100% - var(--co-color-thumb-size, 16px)) * var(--co-color-slider-ratio, 0)
+  );
+}
+
+.co-color-slider--disabled .co-color-slider__track {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Manipulación directa = sin transición del thumb (evita el desfase con el
+   puntero); los saltos de teclado sí transicionan (--co-motion-duration-instant). */
+.co-color-slider--dragging .co-color-slider__thumb {
+  transition: none;
+}
+
+/* Anillo de foco por teclado — solo :focus-visible, el click no lo enciende
+   (el foco se mueve a mano en pointerdown y el browser no lo marca visible). */
+.co-color-slider__track:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}