@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-color-picker.entry.js

@@ -0,0 +1,760 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+/* ════════════════════════════════════════════════════════════════════════
+ * sui-color-picker — catálogos, mapas y helpers.
+ *
+ * Stencil prohíbe `export const` / `export function` / `export enum` en el
+ * archivo del @Component (rompe el build entero), así que TODA la data y los
+ * helpers HSV↔RGB↔HEX viven acá, en el archivo hermano `.data.ts`. El `.tsx`
+ * importa de aquí lo que necesita.
+ *
+ * Portado 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-picker/).
+ * ════════════════════════════════════════════════════════════════════════ */
+/* ── Re-export de la data del color-dot (mismos valores canon) ──
+ * Se re-declaran acá los 10 colores + el mapa preset→hex para que el picker
+ * no dependa de ningún `export const` dentro del .tsx del color-dot (que NO
+ * los expone — Stencil lo prohíbe). Mismos valores exactos que
+ * sui-color-dot.data.ts. */
+const SUI_COLOR_DOT_COLORS = [
+    'gray',
+    'blue',
+    'orange',
+    'red',
+    'green',
+    'yellow',
+    'purple',
+    'sky',
+    'pink',
+    'teal',
+];
+/** Mapa preset → hex canónico (Figma `<color>/500`). orange = #fa7319 brand. */
+const SUI_COLOR_DOT_HEX = {
+    gray: '#7b7b7b',
+    blue: '#335cff',
+    orange: '#fa7319',
+    red: '#fb3748',
+    green: '#1fc16b',
+    yellow: '#f6b51e',
+    purple: '#7d52f4',
+    sky: '#47c2ff',
+    pink: '#fb4ba3',
+    teal: '#22d3bb',
+};
+/** Mapa inverso: hex (lowercase, 6 chars con #) → preset name. */
+const SUI_HEX_TO_COLOR = Object.entries(SUI_COLOR_DOT_HEX).reduce((acc, [name, hex]) => {
+    acc[hex.toLowerCase()] = name;
+    return acc;
+}, {});
+/** Labels en español de cada preset (para el trigger label y aria-labels). */
+const SUI_COLOR_DOT_LABELS = {
+    gray: 'Gris',
+    blue: 'Azul',
+    orange: 'Naranja',
+    red: 'Rojo',
+    green: 'Verde',
+    yellow: 'Amarillo',
+    purple: 'Morado',
+    sky: 'Celeste',
+    pink: 'Rosado',
+    teal: 'Turquesa',
+};
+/* ════════════════════════════════════════════════════════════════════════
+ * HSV ↔ RGB ↔ HEX conversion helpers
+ *
+ * Internal model: { h: [0..360), s: [0..1], v: [0..1] }, alpha [0..1].
+ * Public value:   `#rrggbb` (6 chars) cuando alpha=off o a===1;
+ *                 `#rrggbbaa` (8 chars) cuando alpha=on y a<1.
+ *
+ * Math reference:
+ *   https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative
+ * ════════════════════════════════════════════════════════════════════════ */
+function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+function hsvToRgb(h, s, v) {
+    // Implementación canon — h in [0,360), s/v in [0,1], r/g/b out in [0,255].
+    const c = v * s;
+    const hh = (h % 360) / 60;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hh < 1) {
+        r1 = c;
+        g1 = x;
+        b1 = 0;
+    }
+    else if (hh < 2) {
+        r1 = x;
+        g1 = c;
+        b1 = 0;
+    }
+    else if (hh < 3) {
+        r1 = 0;
+        g1 = c;
+        b1 = x;
+    }
+    else if (hh < 4) {
+        r1 = 0;
+        g1 = x;
+        b1 = c;
+    }
+    else if (hh < 5) {
+        r1 = x;
+        g1 = 0;
+        b1 = c;
+    }
+    else {
+        r1 = c;
+        g1 = 0;
+        b1 = x;
+    }
+    const m = v - c;
+    return {
+        r: Math.round((r1 + m) * 255),
+        g: Math.round((g1 + m) * 255),
+        b: Math.round((b1 + m) * 255),
+    };
+}
+function rgbToHsv(r, g, b) {
+    const r1 = r / 255;
+    const g1 = g / 255;
+    const b1 = b / 255;
+    const max = Math.max(r1, g1, b1);
+    const min = Math.min(r1, g1, b1);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === r1)
+            h = ((g1 - b1) / d) % 6;
+        else if (max === g1)
+            h = (b1 - r1) / d + 2;
+        else
+            h = (r1 - g1) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h, s, v };
+}
+function rgbToHex(r, g, b) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+/**
+ * Normaliza un string hex al formato canon `#rrggbb` (lowercase, con #).
+ * Devuelve null si el input no es un hex válido (3 o 6 chars).
+ * Aceptado: '#fff', 'FFF', '#FFFFFF', 'ffffff'.
+ */
+function normalizeHex(input) {
+    if (!input)
+        return null;
+    const raw = input.trim().replace(/^#/, '').toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(raw)) {
+        return ('#' +
+            raw
+                .split('')
+                .map((ch) => ch + ch)
+                .join(''));
+    }
+    if (/^[0-9a-f]{6}$/.test(raw)) {
+        return '#' + raw;
+    }
+    return null;
+}
+/**
+ * Parsea un hex 3/4/6/8 chars → { hex: #rrggbb, alpha: [0..1], hasAlpha }.
+ * Devuelve null si no es válido. Soporta:
+ *   #rgb, #rgba, #rrggbb, #rrggbbaa (con o sin `#`, case-insensitive).
+ */
+function parseHexWithAlpha(input) {
+    if (!input)
+        return null;
+    let raw = input.trim().replace(/^#/, '').toLowerCase();
+    // Expand shorthand 3/4 → 6/8
+    let hadAlphaShorthand = false;
+    if (/^[0-9a-f]{3}$/.test(raw)) {
+        raw = raw
+            .split('')
+            .map((ch) => ch + ch)
+            .join('');
+    }
+    else if (/^[0-9a-f]{4}$/.test(raw)) {
+        raw = raw
+            .split('')
+            .map((ch) => ch + ch)
+            .join('');
+        hadAlphaShorthand = true;
+    }
+    if (/^[0-9a-f]{6}$/.test(raw) && !hadAlphaShorthand) {
+        return { hex: '#' + raw, alpha: 1, hasAlpha: false };
+    }
+    if (/^[0-9a-f]{8}$/.test(raw)) {
+        const alpha = parseInt(raw.slice(6, 8), 16) / 255;
+        return { hex: '#' + raw.slice(0, 6), alpha, hasAlpha: true };
+    }
+    return null;
+}
+function hexToRgb(hex) {
+    const n = normalizeHex(hex);
+    if (!n)
+        return null;
+    return {
+        r: parseInt(n.slice(1, 3), 16),
+        g: parseInt(n.slice(3, 5), 16),
+        b: parseInt(n.slice(5, 7), 16),
+    };
+}
+/** Convierte alpha [0..1] → 2-char hex (00..ff). */
+function alphaToHex(alpha) {
+    return Math.round(clamp01(alpha) * 255)
+        .toString(16)
+        .padStart(2, '0');
+}
+
+const suiColorPickerCss = () => `@charset "UTF-8";.sc-sui-color-picker-h{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-color-picker__trigger.sc-sui-color-picker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger.sc-sui-color-picker:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__trigger.sc-sui-color-picker:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger.sc-sui-color-picker:active{transform:none}[data-sui-open].sc-sui-color-picker-h .sui-color-picker__trigger.sc-sui-color-picker{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}[data-sui-disabled].sc-sui-color-picker-h .sui-color-picker__trigger.sc-sui-color-picker{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__swatch.sc-sui-color-picker{position:relative;display:inline-block;flex-shrink:0;width:24px;height:24px}.sui-color-picker__swatch.sc-sui-color-picker::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--c)}.sui-color-picker__swatch.sc-sui-color-picker::before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid var(--c)}[data-sui-size=large].sc-sui-color-picker-h .sui-color-picker__trigger.sc-sui-color-picker{padding:9px 12px 9px 9px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}.sui-color-picker__placeholder-dot.sc-sui-color-picker{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label.sc-sui-color-picker{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron.sc-sui-color-picker{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-open].sc-sui-color-picker-h .sui-color-picker__chevron.sc-sui-color-picker{transform:rotate(180deg)}.sui-color-picker__panel.sc-sui-color-picker{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-flip].sc-sui-color-picker-h .sui-color-picker__panel.sc-sui-color-picker{top:auto;bottom:calc(100% + 6px)}[data-sui-align-end].sc-sui-color-picker-h .sui-color-picker__panel.sc-sui-color-picker{left:auto;right:0}@keyframes sui-color-picker__fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section.sc-sui-color-picker{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors.sc-sui-color-picker{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended.sc-sui-color-picker{gap:8px}[data-sui-presets-only].sc-sui-color-picker-h .sui-color-picker__section--recommended.sc-sui-color-picker{border-bottom:none}.sui-color-picker__canvas.sc-sui-color-picker{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))}.sui-color-picker__canvas-thumb.sc-sui-color-picker{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);transform:translate(-50%, -50%);pointer-events:none}.sui-color-picker__slider.sc-sui-color-picker{position:relative;width:100%;height:16px;cursor:pointer;user-select:none;touch-action:none}.sui-color-picker__slider-track.sc-sui-color-picker{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue.sc-sui-color-picker .sui-color-picker__slider-track.sc-sui-color-picker{background-image: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(0, 100%, 50%))}.sui-color-picker__opacity.sc-sui-color-picker .sui-color-picker__slider-track.sc-sui-color-picker{background-color:#fff;background-image:linear-gradient(to right, transparent, var(--opacity-color, #335cff)), conic-gradient(#ebebeb 0 25%, transparent 0 50%, #ebebeb 0 75%, transparent 0);background-size:auto, 10.88px 10.88px}.sui-color-picker__slider-thumb.sc-sui-color-picker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);transform:translate(-50%, -50%);pointer-events:none}.sui-color-picker__opacity.sc-sui-color-picker .sui-color-picker__slider-thumb.sc-sui-color-picker{background-image:linear-gradient(var(--thumb-color, #335cff), var(--thumb-color, #335cff)), conic-gradient(#ebebeb 0 25%, #fff 0 50%, #ebebeb 0 75%, #fff 0);background-size:auto, 6px 6px}.sui-color-picker__color-input.sc-sui-color-picker{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format.sc-sui-color-picker{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label.sc-sui-color-picker{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);white-space:nowrap}.sui-color-picker__format-chevron.sc-sui-color-picker{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row.sc-sui-color-picker{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip.sc-sui-color-picker{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip.sc-sui-color-picker:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip.sc-sui-color-picker:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip.sc-sui-color-picker:active{transform:none}.sui-color-picker__hex-cell.sc-sui-color-picker{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell.sc-sui-color-picker:last-child{border-right:none}.sui-color-picker__hex-field.sc-sui-color-picker{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);text-transform:uppercase}.sui-color-picker__hex-field.sc-sui-color-picker::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell.sc-sui-color-picker{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field.sc-sui-color-picker{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__opacity-suffix.sc-sui-color-picker{color:var(--sui-text-sub-600);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__panel-label.sc-sui-color-picker{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid.sc-sui-color-picker{display:flex;flex-wrap:wrap;gap:4px;width:100%}.sui-color-picker__grid--large.sc-sui-color-picker{gap:12px}`;
+
+const SuiColorPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.changed = createEvent(this, "changed");
+        /**
+         * 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) })))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "colors": [{
+                "onColorsChange": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SuiColorPicker.style = suiColorPickerCss();
+
+export { SuiColorPicker as sui_color_picker };