@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,936 @@
+import { Host, h, } from "@stencil/core";
+import { SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_COLOR_DOT_LABELS, SUI_HEX_TO_COLOR, alphaToHex, clamp01, hexToRgb, hsvToRgb, normalizeHex, parseHexWithAlpha, rgbToHex, rgbToHsv, } from "./sui-color-picker.data";
+/**
+ * `<sui-color-picker>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-picker/). Misma API
+ * pública (colors / value / placeholder / recommendedLabel / presetsOnly /
+ * alpha / eyedropper / showFormatLabel / disabled / accessibleLabel → props;
+ * valueChange + changed → events), TODAS las variantes/estados, mismo
+ * comportamiento (overlay popover, drag por pointer events, teclado, eyedropper,
+ * outside-click + Esc) y mismos VALORES exactos (tokens del DS). El accent del DS
+ * es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma — el
+ * preset `orange` y el color del thumb del trigger reflejan el value real.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 4456:115795 "Color Picker [1.1]".
+ *  Doc canon: la guía del DS (color picker).
+ *
+ * Implementación 100% custom — NO usa `<input type="color">` (que abre el picker
+ * nativo distinto en iOS / Android / desktop). Toda la UI es markup + CSS +
+ * pointer events para que se vea idéntico en cualquier WebView.
+ *
+ * Features (homologados vs Figma):
+ *  1. HSV Color Spectrum — alto 232px, w-full (radius-8), drag por pointer events
+ *     (touch + mouse + pen unificado). Thumb circular 16px sigue al puntero.
+ *  2. Hue slider arcoíris — track h-8px, thumb 16px.
+ *  3. Opacity (alpha) slider — track checkerboard + transparent→color, thumb 16px.
+ *     Visible por default (alpha on); ocultable con `alpha="false"`.
+ *  4. Color Input row — fila bordeada (radius-8) con: sip (eyedropper) | hex
+ *     field | opacity field. Hex validado con parse 3/4/6/8 chars.
+ *  5. Format label "Hex" + chevron (arrow-down-s-line 20px) — visual del Figma.
+ *     Hex-only (ver el .ts del Angular para PENDING VERIFY de RGB/HSL).
+ *  6. Eyedropper (sip-line) — usa la EyeDropper API nativa con feature-detect.
+ *     Oculto cuando el browser no la soporta (Safari/iOS/Android/Firefox).
+ *  7. Recommended Colors — grid flex-wrap gap-4px de dots (`<sui-color-dot>`).
+ *  8. Trigger button — muestra el dot del value actual + label + chevron.
+ *
+ * Reactividad Stencil: el state source-of-truth durante el drag es HSV(+alpha)
+ * en `@State` (h/s/v/a) — cualquier cambio re-renderea y mueve los thumbs por
+ * inline style. El `value` (`@Prop` mutable) se sincroniza one-way vía `@Watch`
+ * cuando el consumer lo setea desde afuera; los sets internos se marcan con
+ * `_internalSet` para no re-disparar el watcher (mismo patrón que el effect
+ * `externalValueSync` del Angular).
+ *
+ * GOTCHAS de API (renombres vs el Angular original):
+ *  - `ariaLabel` → `accessibleLabel` (`ariaLabel` no es reservado pero se evita
+ *    chocar con el atributo del host; se expone como aria-label del trigger).
+ *  - El output `change` del Angular → evento `changed` (`change` colisiona con
+ *    el evento DOM nativo `change` que burbujea desde los `<input>` internos).
+ *  - El model `value` → `@Prop({ mutable: true }) value` + evento `valueChange`
+ *    (Stencil no tiene two-way binding nativo; el consumer escucha `valueChange`).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])` y
+ * los `<sui-icon>` / `<sui-color-dot>` proyectados translan limpio sin pelear
+ * con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView :active fix: touchstart/touchend pasivos en el host; el touchend
+ * suelta el foco del botón tocado (trigger, gotero).
+ */
+export class SuiColorPicker {
+    constructor() {
+        /**
+         * Lista de colores recomendados (grid). Default los 10 canon SUI. El
+         * consumer puede pasar sublista (array) para limitar opciones (ej. solo brand
+         * colors). Vía atributo HTML aceptar un CSV (`"blue,orange,red"`) o un JSON
+         * array string; se parsea en `componentWillLoad`.
+         */
+        this.colors = SUI_COLOR_DOT_COLORS;
+        /**
+         * Valor actual en formato HEX. Mutable (`@Prop({ mutable: true })`) + evento
+         * `valueChange` para emular el two-way del Angular (`[(value)]`). Acepta hex
+         * con o sin `#`, 3/4/6/8 chars, lo normaliza internamente. Emite `#rrggbb`
+         * (6 chars) cuando alpha=off o a===1; emite `#rrggbbaa` (8 chars) cuando
+         * `alpha` on y a<1. Default `null` = sin valor seleccionado.
+         */
+        this.value = null;
+        /** Label visible cuando no hay color seleccionado. Default `Elige un color` (imperativo con tuteo). */
+        this.placeholder = 'Elige un color';
+        /** Etiqueta de la sección Recommended Colors dentro del panel. */
+        this.recommendedLabel = 'Colores recomendados';
+        /** Si true, oculta el HSV spectrum + sliders + hex input — solo grid de presets. */
+        this.presetsOnly = false;
+        /**
+         * Canal alpha — controla la visibilidad del slider Opacity + el campo "%".
+         * Default `true` (homologación Figma 4456:115795: slider + campo "100%"
+         * SIEMPRE presentes). Con a===1 el value sigue siendo 6 chars; con a<1 crece
+         * a 8 chars (#rrggbbaa). Pasar `alpha="false"` oculta el control y fuerza
+         * siempre 6 chars.
+         */
+        this.alpha = true;
+        /**
+         * Muestra el botón eyedropper (sip-line). Default `true` — pero internamente
+         * solo se renderea si la EyeDropper API existe (feature-detect). En browsers
+         * sin soporte (Safari/iOS/Android/Firefox) NO se muestra nunca.
+         */
+        this.eyedropper = true;
+        /** Muestra el label del formato ("Hex") + chevron arriba del input. */
+        this.showFormatLabel = true;
+        /** Deshabilita el picker (trigger no abre, estado visual disabled). */
+        this.disabled = false;
+        /** aria-label del trigger / panel. Renombrado de `ariaLabel` del Angular. */
+        this.accessibleLabel = 'Seleccionar color';
+        /**
+         * `medium` (default): trigger de 38, puntos de 24 · `large`: trigger de 44 con
+         * texto 16 y puntos del panel de 32 separados 12 (paso de 44) — piso táctil
+         * 44 en el teléfono (04-10-2026).
+         */
+        this.size = 'medium';
+        /** Estado abierto del popover (reflejado al host como `data-sui-open`). */
+        this.open = false;
+        /* ── Internal HSV state — source of truth durante el drag ── */
+        this.flipUp = false;
+        this.alignEnd = false;
+        this.h = 220; // matiz default azul
+        this.s = 1;
+        this.v = 1;
+        /** Canal alpha [0..1]. Solo relevante cuando `alpha` on. */
+        this.a = 1;
+        /** Hex input visible (separate del value para validación en blur). */
+        this.hexInput = '';
+        /** Lista de colores resuelta (parseada del prop array/CSV/JSON). */
+        this.resolvedColors = SUI_COLOR_DOT_COLORS;
+        /** Feature-detect de la EyeDropper API (solo Chromium desktop). */
+        this.eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;
+        /**
+         * Flag para evitar que el watcher de `value` reaccione a sus propios sets.
+         * Es field (no @State) — el watcher solo lo lee en el momento de ejecución.
+         * La limpieza via `queueMicrotask` da tiempo a procesar el tick antes de
+         * aceptar el próximo evento externo.
+         */
+        this._internalSet = false;
+        /**
+         * Último hex emitido. Defensiva contra re-emisión del mismo hex durante drag
+         * rapid-fire o cuando value y HSV convergen al mismo color por caminos
+         * distintos. NUNCA dispara `changed`/`valueChange` si `_lastEmittedHex === hex`.
+         */
+        this._lastEmittedHex = null;
+        /* ── Estado de drag por slider ── */
+        this.canvasDragging = false;
+        this.hueDragging = false;
+        this.opacityDragging = false;
+        /* ════════ Trigger toggle / close ════════ */
+        this.toggle = () => {
+            var _a;
+            if (this.disabled)
+                return;
+            this.open = !this.open;
+            if (this.open) {
+                const parsed = parseHexWithAlpha(this.value);
+                this.hexInput = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.hex) !== null && _a !== void 0 ? _a : '';
+                this.flipUp = false;
+                this.alignEnd = false;
+                requestAnimationFrame(() => this.place());
+            }
+        };
+        /* ════════ HSV spectrum drag ════════ */
+        this.onCanvasPointerDown = (ev) => {
+            var _a;
+            const el = this.canvasEl;
+            if (!el)
+                return;
+            this.canvasDragging = true;
+            (_a = el.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(el, ev.pointerId);
+            this.updateCanvasFromPointer(ev);
+            ev.preventDefault();
+        };
+        this.onCanvasPointerMove = (ev) => {
+            if (!this.canvasDragging)
+                return;
+            this.updateCanvasFromPointer(ev);
+        };
+        this.onCanvasPointerUp = (ev) => {
+            var _a, _b;
+            if (!this.canvasDragging)
+                return;
+            this.canvasDragging = false;
+            (_b = (_a = this.canvasEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, ev.pointerId);
+        };
+        /* ════════ Hue slider drag ════════ */
+        this.onHuePointerDown = (ev) => {
+            var _a;
+            const el = this.hueEl;
+            if (!el)
+                return;
+            this.hueDragging = true;
+            (_a = el.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(el, ev.pointerId);
+            this.updateHueFromPointer(ev);
+            ev.preventDefault();
+        };
+        this.onHuePointerMove = (ev) => {
+            if (!this.hueDragging)
+                return;
+            this.updateHueFromPointer(ev);
+        };
+        this.onHuePointerUp = (ev) => {
+            var _a, _b;
+            if (!this.hueDragging)
+                return;
+            this.hueDragging = false;
+            (_b = (_a = this.hueEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, ev.pointerId);
+        };
+        /* ════════ Opacity (alpha) slider drag ════════ */
+        this.onOpacityPointerDown = (ev) => {
+            var _a;
+            const el = this.opacityEl;
+            if (!el)
+                return;
+            this.opacityDragging = true;
+            (_a = el.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(el, ev.pointerId);
+            this.updateOpacityFromPointer(ev);
+            ev.preventDefault();
+        };
+        this.onOpacityPointerMove = (ev) => {
+            if (!this.opacityDragging)
+                return;
+            this.updateOpacityFromPointer(ev);
+        };
+        this.onOpacityPointerUp = (ev) => {
+            var _a, _b;
+            if (!this.opacityDragging)
+                return;
+            this.opacityDragging = false;
+            (_b = (_a = this.opacityEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, ev.pointerId);
+        };
+        /* ════════ Hex input ════════ */
+        this.onHexInputChange = (ev) => {
+            const value = ev.target.value;
+            this.hexInput = '#' + value.replace(/^#/, '');
+        };
+        /** Commit en blur o Enter — solo si es válido. Sino restaura el value actual. */
+        this.onHexCommit = () => {
+            var _a;
+            const parsed = parseHexWithAlpha(this.hexInput);
+            if (!parsed) {
+                const current = parseHexWithAlpha(this.value);
+                this.hexInput = (_a = current === null || current === void 0 ? void 0 : current.hex) !== null && _a !== void 0 ? _a : '';
+                return;
+            }
+            this.setColor(parsed.hex);
+        };
+        this.onHexKeyDown = (ev) => {
+            var _a;
+            if (ev.key === 'Enter') {
+                (_a = ev.target) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+            else if (ev.key === 'Escape') {
+                this.close();
+            }
+        };
+        /* ════════ Opacity field (%) ════════ */
+        this.onOpacityFieldCommit = (ev) => {
+            const raw = ev.target.value.replace(/[^0-9]/g, '');
+            const pct = Math.max(0, Math.min(100, parseInt(raw, 10) || 0));
+            this.a = pct / 100;
+            const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+            const hex = rgbToHex(r, g, b);
+            this.emitHex(this.composeHex(hex));
+        };
+        /* ════════ Eyedropper (sip-line) ════════ */
+        this.onEyedropper = async () => {
+            if (!this.eyeDropperSupported)
+                return;
+            try {
+                const EyeDropperCtor = window.EyeDropper;
+                const result = await new EyeDropperCtor().open();
+                const normalized = normalizeHex(result.sRGBHex);
+                if (normalized)
+                    this.setColor(normalized);
+            }
+            catch (_a) {
+                // user canceló (Esc) — no-op.
+            }
+        };
+    }
+    componentWillLoad() {
+        this.resolvedColors = this.parseColors(this.colors);
+        // Sync inicial del HSV interno desde el value entrante (si lo hay).
+        const parsed = parseHexWithAlpha(this.value);
+        if (parsed) {
+            const rgb = hexToRgb(parsed.hex);
+            if (rgb) {
+                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                if (s > 0)
+                    this.h = h;
+                this.s = s;
+                this.v = v;
+                if (this.alpha && parsed.hasAlpha)
+                    this.a = parsed.alpha;
+                this.hexInput = parsed.hex;
+                this._lastEmittedHex = this.value;
+            }
+        }
+    }
+    onColorsChange(next) {
+        this.resolvedColors = this.parseColors(next);
+    }
+    /** Acepta array, CSV (`"blue,orange"`) o JSON array string del atributo HTML. */
+    parseColors(raw) {
+        if (Array.isArray(raw)) {
+            return raw.length ? raw : SUI_COLOR_DOT_COLORS;
+        }
+        if (typeof raw === 'string' && raw.trim()) {
+            const str = raw.trim();
+            try {
+                const json = JSON.parse(str);
+                if (Array.isArray(json) && json.length) {
+                    return json;
+                }
+            }
+            catch (_a) {
+                // No es JSON — probar CSV.
+            }
+            const csv = str
+                .split(',')
+                .map((c) => c.trim())
+                .filter(Boolean);
+            if (csv.length)
+                return csv;
+        }
+        return SUI_COLOR_DOT_COLORS;
+    }
+    /**
+     * Watcher de `value`: sync externo one-way. Cuando el consumer setea `value`
+     * desde afuera, refleja en el HSV interno. Los sets internos se marcan con
+     * `_internalSet` para no re-disparar (mismo patrón que el effect del Angular).
+     */
+    onValueChange(next) {
+        if (this._internalSet)
+            return;
+        const parsed = parseHexWithAlpha(next);
+        if (!parsed)
+            return;
+        // Hex que el HSV interno ya representa: skip (evita loop).
+        const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+        const currentHsvHex = this.composeHex(rgbToHex(r, g, b));
+        if (currentHsvHex === next)
+            return;
+        const rgb = hexToRgb(parsed.hex);
+        if (!rgb)
+            return;
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        if (hsv.s > 0)
+            this.h = hsv.h;
+        this.s = hsv.s;
+        this.v = hsv.v;
+        if (this.alpha && parsed.hasAlpha)
+            this.a = parsed.alpha;
+        this.hexInput = parsed.hex;
+        // Sync `_lastEmittedHex` con el value externo: un drag posterior al mismo
+        // hex NO re-emite.
+        this._lastEmittedHex = next;
+    }
+    /* ════════ Derived getters ════════ */
+    /** El botón eyedropper se muestra solo si el consumer lo pide Y hay soporte. */
+    get showEyedropper() {
+        return this.eyedropper && this.eyeDropperSupported;
+    }
+    /** Color base para el HSV spectrum (hue puro, full saturation/value). */
+    get hueColor() {
+        const { r, g, b } = hsvToRgb(this.h, 1, 1);
+        return rgbToHex(r, g, b);
+    }
+    /** Hex actual derivado del HSV interno (input + dot preview). */
+    get currentHex() {
+        const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+        return rgbToHex(r, g, b);
+    }
+    /** Si el value matchea un preset, devuelve su nombre (dot estilizado). */
+    get currentPreset() {
+        var _a;
+        const parsed = parseHexWithAlpha(this.value);
+        if (!parsed)
+            return null;
+        return (_a = SUI_HEX_TO_COLOR[parsed.hex]) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Label del trigger (nombre del preset si match, sino el hex). */
+    get currentLabel() {
+        const v = this.value;
+        if (!v)
+            return this.placeholder;
+        const preset = this.currentPreset;
+        if (preset)
+            return SUI_COLOR_DOT_LABELS[preset];
+        return v.toUpperCase();
+    }
+    /** Position del thumb en el spectrum (% based). */
+    get canvasThumbX() {
+        return (this.s * 100).toFixed(2) + '%';
+    }
+    get canvasThumbY() {
+        return ((1 - this.v) * 100).toFixed(2) + '%';
+    }
+    /** Position del thumb en el hue slider (% based). */
+    get hueThumbX() {
+        return ((this.h / 360) * 100).toFixed(2) + '%';
+    }
+    /** Position del thumb en el opacity slider (% based). */
+    get opacityThumbX() {
+        return (this.a * 100).toFixed(2) + '%';
+    }
+    /** Color rgb(a) para el thumb del opacity slider. */
+    get opacityThumbColor() {
+        const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+        return `rgba(${r}, ${g}, ${b}, ${this.a.toFixed(3)})`;
+    }
+    /** Color del dot preview en el trigger (con alpha si aplica). */
+    get previewColor() {
+        const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+        return this.alpha ? `rgba(${r}, ${g}, ${b}, ${this.a.toFixed(3)})` : rgbToHex(r, g, b);
+    }
+    /** Round del hue para aria-valuenow. */
+    get hueRounded() {
+        return Math.round(this.h);
+    }
+    /** Alpha en porcentaje entero (0..100) para el campo "%". */
+    get alphaPercent() {
+        return Math.round(this.a * 100);
+    }
+    /** Valor mostrado en el hex field (sin `#`, uppercase — convención Figma "335CFF"). */
+    get hexDisplayValue() {
+        return this.hexInput.replace(/^#/, '').toUpperCase();
+    }
+    /* ════════ Emit / set core ════════ */
+    /** Hex a emitir según alpha. Off (o a===1) → 6 chars; on y a<1 → 8 chars. */
+    composeHex(rgbHex) {
+        if (!this.alpha || this.a >= 1)
+            return rgbHex;
+        return rgbHex + alphaToHex(this.a);
+    }
+    /**
+     * Punto único de emit. Garantiza:
+     *  1. `value` solo se setea si difiere del hex (skip redundante).
+     *  2. los eventos solo se emiten si el hex difiere del último emitido.
+     */
+    emitHex(hex) {
+        if (this.value !== hex) {
+            this._internalSet = true;
+            this.value = hex;
+            queueMicrotask(() => {
+                this._internalSet = false;
+            });
+        }
+        if (this._lastEmittedHex !== hex) {
+            this._lastEmittedHex = hex;
+            this.valueChange.emit(hex);
+            this.changed.emit(hex);
+        }
+    }
+    /**
+     * Operación atómica: setea HSV(+alpha) + value + hexInput en un solo paso.
+     * Resuelve el round-trip HSV→hex lossy (Math.round ±1). Acepta hex 6 u 8 chars.
+     */
+    setColor(hex) {
+        const parsed = parseHexWithAlpha(hex);
+        if (!parsed)
+            return;
+        const rgb = hexToRgb(parsed.hex);
+        if (!rgb)
+            return;
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        // Para grayscale (saturación 0), preservar el hue actual del slider — sino
+        // el indicador del hue saltaría a 0 cada vez que el value pasa por un gris.
+        if (hsv.s > 0)
+            this.h = hsv.h;
+        this.s = hsv.s;
+        this.v = hsv.v;
+        // Solo sobreescribir alpha cuando el hex traía canal alpha explícito (8 chars).
+        // Un preset/eyedropper (6 chars) preserva el alpha actual del slider.
+        if (this.alpha && parsed.hasAlpha)
+            this.a = parsed.alpha;
+        const out = this.composeHex(parsed.hex);
+        this.hexInput = parsed.hex;
+        this.emitHex(out);
+    }
+    /**
+     * Lado del panel — replica las posiciones del overlay del Angular (abajo-inicio,
+     * abajo-fin, arriba-inicio, arriba-fin; margen 8). Se decide al abrir, ya
+     * pintado, y queda fijo mientras está abierto (lockedPosition: sin saltos en
+     * scroll). El panel es absolute dentro del host, así que acompaña al trigger.
+     */
+    place() {
+        const panel = this.el.querySelector('.sui-color-picker__panel');
+        if (!panel)
+            return;
+        const t = this.el.getBoundingClientRect();
+        const m = 8;
+        const below = window.innerHeight - t.bottom;
+        this.flipUp = below < panel.offsetHeight + m && t.top > below;
+        this.alignEnd = t.left + panel.offsetWidth > window.innerWidth - m && t.right - panel.offsetWidth >= m;
+    }
+    close() {
+        if (this.open)
+            this.open = false;
+    }
+    /* ════════ Recommended dot click ════════ */
+    onPresetClick(preset) {
+        this.setColor(SUI_COLOR_DOT_HEX[preset]);
+        this.close();
+    }
+    updateCanvasFromPointer(ev) {
+        const el = this.canvasEl;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const newS = clamp01((ev.clientX - rect.left) / rect.width);
+        const newV = 1 - clamp01((ev.clientY - rect.top) / rect.height);
+        this.s = newS;
+        this.v = newV;
+        const { r, g, b } = hsvToRgb(this.h, newS, newV);
+        const hex = rgbToHex(r, g, b);
+        this.hexInput = hex;
+        this.emitHex(this.composeHex(hex));
+    }
+    updateHueFromPointer(ev) {
+        const el = this.hueEl;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const newH = clamp01((ev.clientX - rect.left) / rect.width) * 360;
+        this.h = newH;
+        const { r, g, b } = hsvToRgb(newH, this.s, this.v);
+        const hex = rgbToHex(r, g, b);
+        this.hexInput = hex;
+        this.emitHex(this.composeHex(hex));
+    }
+    updateOpacityFromPointer(ev) {
+        const el = this.opacityEl;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const newA = clamp01((ev.clientX - rect.left) / rect.width);
+        this.a = newA;
+        const { r, g, b } = hsvToRgb(this.h, this.s, this.v);
+        const hex = rgbToHex(r, g, b);
+        this.hexInput = hex;
+        this.emitHex(this.composeHex(hex));
+    }
+    /* ════════ iOS :active fix sobre botones internos ════════ */
+    /* Pasivos y en el host (SuiToque del Angular, 15-10-2026): un touchstart no
+       pasivo en el botón frenaba el scroll con el dedo encima. */
+    onTouchStart() { }
+    onTouchEnd(event) {
+        var _a, _b;
+        (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('button')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    /* ════════ Outside click + Esc (document-level) ════════ */
+    onDocumentClick(ev) {
+        if (!this.open)
+            return;
+        const target = ev.target;
+        if (target && !this.el.contains(target)) {
+            this.close();
+        }
+    }
+    onDocumentKeydown(ev) {
+        if (ev.key === 'Escape')
+            this.close();
+    }
+    /* ════════ Render ════════ */
+    render() {
+        const preset = this.currentPreset;
+        return (h(Host, { key: '6cbcd9b206a3fbe201324697d104ff725ae5d288', "aria-label": this.accessibleLabel || undefined, "data-sui-open": this.open ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-presets-only": this.presetsOnly ? '' : null, "data-sui-size": this.size, "data-sui-flip": this.flipUp ? '' : null, "data-sui-align-end": this.alignEnd ? '' : null }, h("button", { key: '1e81af15f22d2020cc1b68d94c39447f6b4b77ce', type: "button", class: "sui-color-picker__trigger", disabled: this.disabled || undefined, "aria-label": this.accessibleLabel, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', onClick: this.toggle }, this.value ? (
+        /* Muestra: un <span>, no sui-color-dot (fix a11y 04-10-2026): el dot es
+           un <button role="radio"> y quedaba un botón dentro de otro. */
+        h("span", { class: "sui-color-picker__swatch", "aria-hidden": "true", style: {
+                '--c': preset
+                    ? preset === 'gray'
+                        ? 'var(--sui-neutral-500)'
+                        : `var(--sui-${preset}-500)`
+                    : this.previewColor,
+            } })) : (h("span", { class: "sui-color-picker__placeholder-dot", "aria-hidden": "true" })), h("span", { key: '5427dd92da1c284132474b10910a3be92072c8f9', class: "sui-color-picker__label" }, this.currentLabel), h("sui-icon", { key: '88f81797e4732da060f037cd1f146c9a129bce04', name: "arrow-down-s-line", size: 16, class: "sui-color-picker__chevron" })), this.open && (h("div", { key: '79742f42000da44dc8b54f09c6b2d229d68767eb', class: "sui-color-picker__panel", role: "dialog", "aria-label": this.accessibleLabel }, !this.presetsOnly && (
+        /* Sección "Colors" — Figma 4456:115716 */
+        h("div", { key: 'eceb120b9a0985e66da6d07d1752f77112e55b4f', class: "sui-color-picker__section sui-color-picker__section--colors" }, h("div", { key: 'ca5d80229cf89b71054f7a72f22e5f3d985f316d', ref: (el) => (this.canvasEl = el), class: "sui-color-picker__canvas", role: "application", "aria-label": "Saturaci\u00F3n y brillo", style: { '--hue-color': this.hueColor }, onPointerDown: this.onCanvasPointerDown, onPointerMove: this.onCanvasPointerMove, onPointerUp: this.onCanvasPointerUp, onPointerCancel: this.onCanvasPointerUp }, h("div", { key: 'ce5926da00e641c7dfd1572737d1e7a3eab0a481', class: "sui-color-picker__canvas-thumb", style: {
+                left: this.canvasThumbX,
+                top: this.canvasThumbY,
+                backgroundColor: this.currentHex,
+            } })), h("div", { key: 'f1367e4167aed7a58355a501464a80aec20b94b1', ref: (el) => (this.hueEl = el), class: "sui-color-picker__slider sui-color-picker__hue", role: "slider", "aria-label": "Matiz", "aria-valuemin": "0", "aria-valuemax": "360", "aria-valuenow": String(this.hueRounded), onPointerDown: this.onHuePointerDown, onPointerMove: this.onHuePointerMove, onPointerUp: this.onHuePointerUp, onPointerCancel: this.onHuePointerUp }, h("div", { key: 'd43a85e3c45ca47b73fff36bf3bf63005077ef90', class: "sui-color-picker__slider-track" }), h("div", { key: '7b5f4880adcb7aef55048671cefd66f4324c7e2b', class: "sui-color-picker__slider-thumb", style: { left: this.hueThumbX, backgroundColor: this.hueColor } })), this.alpha && (h("div", { key: 'd08f3a88c339f2f27f7cf4a1055061b2a2fcaa41', ref: (el) => (this.opacityEl = el), class: "sui-color-picker__slider sui-color-picker__opacity", role: "slider", "aria-label": "Opacidad", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(this.alphaPercent), style: { '--opacity-color': this.currentHex }, onPointerDown: this.onOpacityPointerDown, onPointerMove: this.onOpacityPointerMove, onPointerUp: this.onOpacityPointerUp, onPointerCancel: this.onOpacityPointerUp }, h("div", { key: 'f91360c0de2e2358f4be6cc5b5ba82b9d17d04f8', class: "sui-color-picker__slider-track" }), h("div", { key: '25ea6a0a654c8e8bd13b064d0c52732649479af4', class: "sui-color-picker__slider-thumb", style: {
+                left: this.opacityThumbX,
+                '--thumb-color': this.opacityThumbColor,
+            } }))), h("div", { key: 'c1160b7153f83b5b8054c30a38ea5cbdbd73eefe', class: "sui-color-picker__color-input" }, this.showFormatLabel && (h("div", { key: '1e5df41567ccb8f622484862b92c519e2499c1ce', class: "sui-color-picker__format", "aria-hidden": "true" }, h("span", { key: '398bbff96496c52fc1e07ba77488a6ebfe401946', class: "sui-color-picker__format-label" }, "Hex"), h("sui-icon", { key: '0f1a374afb37d3cc1a37c4c0ca872b9059f2a3d4', name: "arrow-down-s-line", size: 20, class: "sui-color-picker__format-chevron" }))), h("div", { key: '3307996b1a9f73027be87b57c12d45abd89b1688', class: "sui-color-picker__input-row" }, this.showEyedropper && (h("button", { key: '78cdaaff5d18042296c62478df6e902c3b4501df', type: "button", class: "sui-color-picker__sip", "aria-label": "Cuentagotas", onClick: this.onEyedropper }, h("sui-icon", { key: 'b5056186cfd1e77b97389300472cdb5010df41ad', name: "sip-line", size: 20 }))), h("div", { key: 'b69c9bbde73a137c0ef7e2a4f9afdad87a438344', class: "sui-color-picker__hex-cell" }, h("input", { key: '3157ad1b6f439190ccf6868bf41b28d912fa0696', class: "sui-color-picker__hex-field", type: "text", autocomplete: "off", spellcheck: "false", maxLength: 8, "aria-label": "Valor hexadecimal", value: this.hexDisplayValue, onInput: this.onHexInputChange, onKeyDown: this.onHexKeyDown, onBlur: this.onHexCommit })), this.alpha && (h("div", { key: '815bc8cbe0d053805cf729ea207ce2b6b71fcab8', class: "sui-color-picker__opacity-cell" }, h("input", { key: 'fbf19c21836acd8f8e915f9d1bf1e0bfb6909f4b', class: "sui-color-picker__opacity-field", type: "text", inputmode: "numeric", autocomplete: "off", maxLength: 3, "aria-label": "Opacidad", value: String(this.alphaPercent), onChange: this.onOpacityFieldCommit, onKeyDown: this.onHexKeyDown }), h("span", { key: '080109c253a9251e04f53012d9a0f5181e6f7501', class: "sui-color-picker__opacity-suffix", "aria-hidden": "true" }, "%"))))))), h("div", { key: 'aef7ee73e852ac2011e9b0e25e236b9aad2ee825', class: "sui-color-picker__section sui-color-picker__section--recommended" }, h("p", { key: '6657b3dd3084ef8a2359bb11ad9460fdddcf8085', class: "sui-color-picker__panel-label" }, this.recommendedLabel), h("div", { key: '1bf6d18a5ead8f773e5ac17719214130f704267b', class: {
+                'sui-color-picker__grid': true,
+                'sui-color-picker__grid--large': this.size === 'large',
+            }, role: "radiogroup" }, this.resolvedColors.map((c) => (h("sui-color-dot", { key: c, color: c, size: this.size === 'large' ? 'large' : 'medium', state: preset === c ? 'selected' : 'default', onClicked: () => this.onPresetClick(c) })))))))));
+    }
+    static get is() { return "sui-color-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-color-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly SuiColorDotColor[] | string",
+                    "resolved": "readonly SuiColorDotColor[] | string",
+                    "references": {
+                        "SuiColorDotColor": {
+                            "location": "import",
+                            "path": "../sui-color-dot/sui-color-dot",
+                            "id": "src/components/sui-color-dot/sui-color-dot.tsx::SuiColorDotColor",
+                            "referenceLocation": "SuiColorDotColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de colores recomendados (grid). Default los 10 canon SUI. El\nconsumer puede pasar sublista (array) para limitar opciones (ej. solo brand\ncolors). V\u00EDa atributo HTML aceptar un CSV (`\"blue,orange,red\"`) o un JSON\narray string; se parsea en `componentWillLoad`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colors",
+                "defaultValue": "[\n  'gray',\n  'blue',\n  'orange',\n  'red',\n  'green',\n  'yellow',\n  'purple',\n  'sky',\n  'pink',\n  'teal',\n]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor actual en formato HEX. Mutable (`@Prop({ mutable: true })`) + evento\n`valueChange` para emular el two-way del Angular (`[(value)]`). Acepta hex\ncon o sin `#`, 3/4/6/8 chars, lo normaliza internamente. Emite `#rrggbb`\n(6 chars) cuando alpha=off o a===1; emite `#rrggbbaa` (8 chars) cuando\n`alpha` on y a<1. Default `null` = sin valor seleccionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label visible cuando no hay color seleccionado. Default `Elige un color` (imperativo con tuteo)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Elige un color'"
+            },
+            "recommendedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Etiqueta de la secci\u00F3n Recommended Colors dentro del panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recommended-label",
+                "defaultValue": "'Colores recomendados'"
+            },
+            "presetsOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si true, oculta el HSV spectrum + sliders + hex input \u2014 solo grid de presets."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "presets-only",
+                "defaultValue": "false"
+            },
+            "alpha": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canal alpha \u2014 controla la visibilidad del slider Opacity + el campo \"%\".\nDefault `true` (homologaci\u00F3n Figma 4456:115795: slider + campo \"100%\"\nSIEMPRE presentes). Con a===1 el value sigue siendo 6 chars; con a<1 crece\na 8 chars (#rrggbbaa). Pasar `alpha=\"false\"` oculta el control y fuerza\nsiempre 6 chars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alpha",
+                "defaultValue": "true"
+            },
+            "eyedropper": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el bot\u00F3n eyedropper (sip-line). Default `true` \u2014 pero internamente\nsolo se renderea si la EyeDropper API existe (feature-detect). En browsers\nsin soporte (Safari/iOS/Android/Firefox) NO se muestra nunca."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "eyedropper",
+                "defaultValue": "true"
+            },
+            "showFormatLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el label del formato (\"Hex\") + chevron arriba del input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-format-label",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el picker (trigger no abre, estado visual disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del trigger / panel. Renombrado de `ariaLabel` del Angular."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessible-label",
+                "defaultValue": "'Seleccionar color'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiColorPickerSize",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "SuiColorPickerSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-color-picker/sui-color-picker.tsx",
+                            "id": "src/components/sui-color-picker/sui-color-picker.tsx::SuiColorPickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`medium` (default): trigger de 38, puntos de 24 \u00B7 `large`: trigger de 44 con\ntexto 16 y puntos del panel de 32 separados 12 (paso de 44) \u2014 piso t\u00E1ctil\n44 en el tel\u00E9fono (04-10-2026)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado abierto del popover (reflejado al host como `data-sui-open`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "flipUp": {},
+            "alignEnd": {},
+            "h": {},
+            "s": {},
+            "v": {},
+            "a": {},
+            "hexInput": {},
+            "resolvedColors": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido cuando el value cambia (cualquier interacci\u00F3n). Two-way `value`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "changed",
+                "name": "changed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido cuando el value cambia (paridad con el output `change` del Angular)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colors",
+                "methodName": "onColorsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}