@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.css

@@ -86,8 +86,14 @@
   display: inline-flex;
   gap: 2px;
   padding: 3px;
+  /* border-box: con [full-width] el div interno lleva width:100% y este padding;
+     en content-box pintaba 6px más ancho que el host (sin part= para parchear afuera). */
+  box-sizing: border-box;
   border-radius: 10px;
-  background: var(--co-color-gray-100, #f6f6f6);
+  /* Track un escalón más oscuro (muted = gray-200) + hairline: sobre gray-100 la pill
+     blanca no se despegaba. Semántico: se tematiza en dark. */
+  background: var(--co-semantic-surface-muted);
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-subtle);
 }
 
 .co-toggle-button-group--track ::slotted(co-toggle-button) {

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.js

@@ -65,13 +65,13 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: '1b6e22dee9634178aea0d3dc3a0f411ec91cc5aa', class: {
+        return (h("div", { key: '791c8d809965eb0287cf8c4fd8d23787e7956932', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 [`co-toggle-button-group--${this.variant}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: 'a86ecce7e4e3ade114cee1e6f023df88c0a6df4c' })));
+            }, role: "group" }, h("slot", { key: 'fa4b4b06eeac7b90e2fa8df41f9f1b6c7b34accc' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tooltip/co-tooltip.css

@@ -54,6 +54,12 @@
   font-size: var(--co-font-size-12, 12px);
   line-height: 1.4;
   font-weight: 400;
+  /* El panel NO hereda la tipografía del contexto donde se usa. Sin esto, un
+     tooltip dentro de un encabezado en versalitas (text-transform: uppercase +
+     letter-spacing) sale GRITADO y espaciado: el resto de la tipografía ya se
+     fija arriba, faltaban estas dos, que también son heredables. */
+  text-transform: none;
+  letter-spacing: var(--co-font-letter-spacing-body, normal);
 
   padding: var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);
   border-radius: var(--co-border-radius-xxs, 4px);
@@ -63,7 +69,7 @@
   word-wrap: break-word;
 
   /* Entry animation */
-  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out), transform var(--co-motion-duration-base) var(--co-motion-ease-out);
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-tooltip__panel--positioned {
@@ -71,6 +77,17 @@
   opacity: 1;
 }
 
+/* Exit animation: fades out in place (no slide) — the panel keeps its
+   --positioned transform (translate 0), so only opacity needs to move.
+   `instant` matches the short-lived nature of a tooltip. */
+.co-tooltip__panel--closing {
+  visibility: visible;
+  opacity: 0;
+  transition:
+    opacity var(--co-motion-duration-instant) var(--co-motion-ease-in),
+    transform var(--co-motion-duration-instant) var(--co-motion-ease-in);
+}
+
 /* Slide-in from direction */
 .co-tooltip__panel--top {
   transform: translateY(4px);

package/dist/collection/components/co-tooltip/co-tooltip.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { computePosition, findNearestScrollParent, getOffsetAncestor } from "../../utils/positioning";
+import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
 export class CoTooltip {
     constructor() {
         // ── Props ──────────────────────────────────────────────────
@@ -10,7 +10,7 @@ export class CoTooltip {
         /** Gap in px between the trigger and tooltip. */
         this.offset = 8;
         /** Delay in ms before showing the tooltip on hover. */
-        this.showDelay = 300;
+        this.showDelay = 80;
         /** Delay in ms before hiding the tooltip on mouse leave. */
         this.hideDelay = 100;
         /** Prevent the tooltip from appearing. */
@@ -28,6 +28,8 @@ export class CoTooltip {
         // ── State ──────────────────────────────────────────────────
         this.visible = false;
         this.actualPlacement = 'top';
+        /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
+        this.closing = false;
         /** Activación del trigger (click/tap): el tooltip se oculta y queda
          *  SUPRIMIDO hasta que el puntero salga y vuelva a entrar (o el foco salga).
          *  Sin esto, el tooltip re-aparece SOBRE el menú/popover que el click abrió
@@ -59,6 +61,21 @@ export class CoTooltip {
             this.clearTimers();
             this.visible = false;
         };
+        // ── Closing phase ──────────────────────────────────────────
+        this.finishClose = () => {
+            clearTimeout(this.closeFallbackTimer);
+            if (this.visible)
+                return; // reabierto durante el cierre
+            this.closing = false;
+            this.panelEl = undefined;
+        };
+        this.handlePanelTransitionEnd = (e) => {
+            if (this.visible || !this.closing)
+                return;
+            if (e.target !== this.panelEl || e.propertyName !== 'opacity')
+                return;
+            this.finishClose();
+        };
         // ── Event handlers ─────────────────────────────────────────
         this.handleMouseEnter = () => {
             this.scheduleShow();
@@ -135,10 +152,17 @@ export class CoTooltip {
     disconnectedCallback() {
         this.clearTimers();
         this.cleanupListeners();
+        clearTimeout(this.closeFallbackTimer);
+        // Desconectado a mitad del exit: si se reconecta luego sin haber pasado
+        // por finishClose, `closing` quedaría stale en true y el panel nacería
+        // en fase de salida (mismo fix que co-popover).
+        this.closing = false;
     }
     // ── Watchers ───────────────────────────────────────────────
     onVisibleChange(isVisible) {
         if (isVisible) {
+            this.closing = false;
+            clearTimeout(this.closeFallbackTimer);
             this.scheduleUpdate();
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
@@ -151,10 +175,16 @@ export class CoTooltip {
             this.cleanupListeners();
             this.cachedOffsetAncestor = null;
             this.offsetAncestorComputed = false;
-            // The panel is removed from the DOM by the conditional render (which also
-            // evicts it from the top layer); drop the now-detached ref so no async
-            // updatePosition can touch a stale element before the next show re-sets it.
-            this.panelEl = undefined;
+            // Panel keeps its ref/position frozen through the exit animation — the ref
+            // is dropped only when `finishClose` actually unmounts the node
+            // (transitionend, or the fallback timer). `panelEl` is intentionally NOT
+            // cleared here (mirrors co-popover).
+            this.closing = true;
+            // Fallback por si transitionend no dispara (tab oculta, display:none ancestro).
+            // ⚠️ Atado al token: debe superar --co-motion-duration-instant (80ms) con
+            // margen — si el retune sube `instant` bastante, revisar esta constante.
+            clearTimeout(this.closeFallbackTimer);
+            this.closeFallbackTimer = setTimeout(() => this.finishClose(), 250);
         }
     }
     onDisabledChange(isDisabled) {
@@ -200,14 +230,15 @@ export class CoTooltip {
         }
     }
     // ── Scroll/resize listeners ────────────────────────────────
+    // Mismo criterio que co-popover: el capture de window no ve el scroll de un
+    // contenedor que vive dentro de un shadow root (los eventos `scroll` no son
+    // `composed`), así que hay que engancharse a los scrollers reales.
     addScrollListeners() {
         window.addEventListener('resize', this.scheduleUpdate, { passive: true });
         window.addEventListener('scroll', this.scheduleUpdate, { passive: true, capture: true });
-        this.scrollParents = [];
-        const scrollAncestor = findNearestScrollParent(this.el);
-        if (scrollAncestor) {
-            scrollAncestor.addEventListener('scroll', this.scheduleUpdate, { passive: true });
-            this.scrollParents.push(scrollAncestor);
+        this.scrollParents = findScrollParents(this.el);
+        for (const parent of this.scrollParents) {
+            parent.addEventListener('scroll', this.scheduleUpdate, { passive: true });
         }
     }
     cleanupListeners() {
@@ -225,16 +256,17 @@ export class CoTooltip {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '0b716923cacfbf88ec2fbb06c2fcf3b641fcc778', class: "co-tooltip" }, h("div", { key: 'c6229d2d8680bca5b43560e7b424226dc920fe76', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: 'd295ed465e59b83768f1cbedfa29782e6f1ed49b' })), this.visible && this.content && (h("div", { key: '8b1ae750b750f1b935338f9829546be6ce632d0f', id: "tooltip-panel", class: {
+        return (h("div", { key: '816929fb58effd04bcf80d05701958908ec519ab', class: "co-tooltip" }, h("div", { key: 'c10088f6be74066442214018b7caa96a74720854', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '59ccc1dc05c746a6e7b1bc28162286c82104af55' })), (this.visible || this.closing) && this.content && (h("div", { key: 'e6df791ab51d0d7f02687d13adbcf75783d93f60', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
-            }, role: "tooltip", popover: "manual", ref: (el) => {
+                'co-tooltip__panel--closing': this.closing,
+            }, role: "tooltip", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'a460586e3da5c050c24a290ae4271e3ca4656ca2', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'ecb878eac97a22f9071d9e379a795cd560031ff7', class: "co-tooltip__content" }, this.content)))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: 'b9d9ac7b80f011641b50f26d1e9d4a596ee5a355', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '2b6ff2b0408b4529d6c63d173846dde96dce8e16', class: "co-tooltip__content" }, this.content)))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -335,7 +367,7 @@ export class CoTooltip {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-delay",
-                "defaultValue": "300"
+                "defaultValue": "80"
             },
             "hideDelay": {
                 "type": "number",
@@ -462,7 +494,8 @@ export class CoTooltip {
     static get states() {
         return {
             "visible": {},
-            "actualPlacement": {}
+            "actualPlacement": {},
+            "closing": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/co-transfer-list/co-transfer-list.js

@@ -205,7 +205,7 @@ export class CoTransferList {
                     "references": {
                         "TransferOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
                             "id": "src/components/co-transfer-list/co-transfer-list.tsx::TransferOption"
                         }
                     }

package/dist/collection/components/co-video/co-video.js

@@ -197,6 +197,12 @@ export class CoVideo {
             }
         };
         this.handleContainerTouchStart = () => {
+            // `controlsAutoHide={false}` significa controles FIJOS: sin este guard un
+            // solo tap los apaga y ya no vuelven mientras siga reproduciendo (el resto
+            // de caminos que los reponen sí respetan el prop). En un visor que además
+            // atrapa el Tab, eso deja controles invisibles pero focusables.
+            if (!this.controlsAutoHide)
+                return;
             if (this.showControlBar && this.isPlaying) {
                 this.showControlBar = false;
             }
@@ -210,7 +216,11 @@ export class CoVideo {
                 return;
             this.duration = this.videoEl.duration;
             this.hasError = false;
-            this.coReady.emit({ duration: this.duration });
+            this.coReady.emit({
+                duration: this.duration,
+                width: this.videoEl.videoWidth,
+                height: this.videoEl.videoHeight,
+            });
             if (this.currentTime > 0 && this.currentTime < this.duration) {
                 this.videoEl.currentTime = this.currentTime;
             }
@@ -568,10 +578,16 @@ export class CoVideo {
     // LIFECYCLE
     // ═══════════════════════════════════════════════════
     componentWillLoad() {
+        var _a, _b;
         this.parseRates();
-        this.volumeLevel = Math.max(0, Math.min(1, this.volume));
-        this.isMuted = this.muted;
-        this.internalPlaybackRate = this.playbackRate;
+        // Los `?? default` no son paranoia: bajo el transform de @stencil/vitest
+        // los defaults de class-field (y por tanto de @Prop) no están aplicados
+        // todavía acá, así que `this.volume` llega undefined → NaN → jsdom tira
+        // al asignar `videoEl.volume` en componentDidLoad y ABORTA el resto del
+        // hook (bind de eventos ya hecho, pero autoplay y seeds no).
+        this.volumeLevel = Math.max(0, Math.min(1, (_a = this.volume) !== null && _a !== void 0 ? _a : 1));
+        this.isMuted = (_b = this.muted) !== null && _b !== void 0 ? _b : false;
+        this.internalPlaybackRate = this.playbackRate || 1;
     }
     componentDidLoad() {
         if (this.videoEl) {
@@ -579,6 +595,15 @@ export class CoVideo {
             this.videoEl.volume = this.volumeLevel;
             this.videoEl.muted = this.isMuted;
             this.videoEl.playbackRate = this.internalPlaybackRate;
+            // Metadata (and even `canplay`) can land BEFORE these listeners bind —
+            // a cached or local file resolves inside the same task the vdom created
+            // the <video> in. The events that would have set duration / cleared the
+            // loader are already gone by now, so the player would sit forever on
+            // "0:00" with a dead seek bar. Seed from the element's own state.
+            if (this.videoEl.readyState >= 1)
+                this.onLoadedMetadata();
+            if (this.videoEl.readyState >= 3)
+                this.onCanPlay();
             if (this.autoplay && this.muted) {
                 this.videoEl.play().catch(() => { });
             }
@@ -789,14 +814,14 @@ export class CoVideo {
     // ═══════════════════════════════════════════════════
     render() {
         const aspectClass = `co-video--${this.aspectRatio.replace(':', '-')}`;
-        return (h(Host, { key: '144618baaec004b7463e60aba02101b72b25aba2' }, h("div", { key: 'ea68f39191f31f9ee58537e24f0feac63b31fd9d', class: {
+        return (h(Host, { key: '57e64ad600356a7243a63db39a54ee20e45b3f81' }, h("div", { key: '4f76f20be1f9c0d6994c58fc41fc5a9cda08de20', class: {
                 'co-video': true,
                 [aspectClass]: true,
                 [`co-video--rounded-${this.rounded}`]: true,
                 'co-video--disabled': this.disabled,
                 'co-video--fullscreen': this.isFullscreen,
                 'co-video--playing': this.isPlaying,
-            }, part: "container", ref: el => (this.containerEl = el), role: "region", "aria-label": this.t.player, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseMove: this.handleContainerMouseMove, onMouseLeave: this.handleContainerMouseLeave, onTouchStart: this.handleContainerTouchStart }, h("video", { key: '548fab677d588d471e69ce2572990498085ed369', ref: el => (this.videoEl = el), class: "co-video__native", part: "video", src: this.src || undefined, poster: undefined, preload: this.preload, loop: this.loop, playsinline: true, tabindex: -1, controlsList: this.allowDownload ? undefined : 'nodownload' }), this.renderPoster(), this.renderLoader(), this.renderBigPlayButton(), this.renderError(), h("div", { key: 'cabe6a6d5b1c18cb92034fffd6464873eef25a7c', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
+            }, part: "container", ref: el => (this.containerEl = el), role: "region", "aria-label": this.t.player, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseMove: this.handleContainerMouseMove, onMouseLeave: this.handleContainerMouseLeave, onTouchStart: this.handleContainerTouchStart }, h("video", { key: '518abe8e649c46e5478f4f2d8b37f827fb1559c0', ref: el => (this.videoEl = el), class: "co-video__native", part: "video", src: this.src || undefined, poster: undefined, preload: this.preload, loop: this.loop, playsinline: true, tabindex: -1, controlsList: this.allowDownload ? undefined : 'nodownload' }), this.renderPoster(), this.renderLoader(), this.renderBigPlayButton(), this.renderError(), h("div", { key: '368f4a7857a0def28ebfe830fff8c38280c35900', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
     }
     static get is() { return "co-video"; }
     static get encapsulation() { return "shadow"; }
@@ -1455,11 +1480,11 @@ export class CoVideo {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Metadata lista. Incluye el tama\u00F1o INTR\u00CDNSECO del medio para que el host\npueda ajustar su caja al frame (0 \u00D7 0 si el navegador a\u00FAn no lo sabe)."
                 },
                 "complexType": {
-                    "original": "{ duration: number }",
-                    "resolved": "{ duration: number; }",
+                    "original": "{ duration: number; width: number; height: number }",
+                    "resolved": "{ duration: number; width: number; height: number; }",
                     "references": {}
                 }
             }, {

package/dist/collection/utils/amountText.js

@@ -0,0 +1,95 @@
+/**
+ * Texto de montos para co-number-field `format="amount"`.
+ *
+ * El campo pinta coma = miles y punto = decimal (formato de la app). El texto
+ * PEGADO, en cambio, viene con el formato de DONDE se copió: es-CO usa el punto
+ * para miles (`121.123,20`), en-US al revés (`121,123.20`). Los dos separadores
+ * intercambian rol según el locale, así que no alcanza con borrar lo que no sea
+ * dígito: hay que decidir CUÁL es el decimal antes de descartar el otro.
+ * Puerto del util probado de V1 (shared-components `utils/numericInput.js`).
+ */
+/**
+ * Topes de longitud: pegar una COLUMNA entera de Excel concatena todos los
+ * dígitos en un solo número — sin tope, cada tecla siguiente re-formatea un
+ * string gigante (y la agrupación de miles se vuelve costosa) y parseFloat
+ * termina en Infinity. 15 enteros = rango seguro de Number; 8 decimales =
+ * paridad con el numeral de V1 (`$ 0,0.[00000000]`).
+ */
+const MAX_INTEGER_DIGITS = 15;
+const MAX_DECIMAL_DIGITS = 8;
+const capDigits = (integer, decimals) => ({
+    integer: integer.slice(0, MAX_INTEGER_DIGITS),
+    decimals: decimals.slice(0, MAX_DECIMAL_DIGITS),
+});
+/**
+ * Interpreta un número pegado sin saber de qué locale viene.
+ *
+ * Reglas, en orden:
+ * 1. Con AMBOS separadores, el ÚLTIMO es el decimal (`121.123,20` → `121123.20`).
+ * 2. Separador repetido = miles (`123.123.123` → `123123123`).
+ * 3. Uno solo: grupo de exactamente 3 dígitos detrás = miles (`34,640` → `34640`,
+ *    como formatea la propia app); cualquier otra cantidad = decimal (`121,20`).
+ *
+ * Devuelve el número crudo listo para `parseFloat` ('' si no hay dígitos).
+ */
+export function parseNumericText(text) {
+    const cleaned = String(text !== null && text !== void 0 ? text : '').replace(/[^\d.,]/g, '');
+    if (!cleaned)
+        return '';
+    const lastDot = cleaned.lastIndexOf('.');
+    const lastComma = cleaned.lastIndexOf(',');
+    let decimalIndex = -1;
+    if (lastDot >= 0 && lastComma >= 0) {
+        decimalIndex = Math.max(lastDot, lastComma);
+    }
+    else if (lastDot >= 0 || lastComma >= 0) {
+        const separator = lastDot >= 0 ? '.' : ',';
+        const groups = cleaned.split(separator);
+        if (groups.length === 2 && groups[1].length !== 3)
+            decimalIndex = cleaned.lastIndexOf(separator);
+    }
+    const { integer, decimals } = capDigits((decimalIndex >= 0 ? cleaned.slice(0, decimalIndex) : cleaned).replace(/[.,]/g, ''), decimalIndex >= 0 ? cleaned.slice(decimalIndex + 1).replace(/[.,]/g, '') : '');
+    if (!integer && !decimals)
+        return '';
+    return decimals ? `${integer || '0'}.${decimals}` : integer;
+}
+/**
+ * Deja texto que YA está en el formato del campo (coma = miles, punto = decimal)
+ * como número crudo: dígitos y un único punto, con signo sólo si se permite.
+ * Un "-" solo se conserva como estado transitorio de tipeo (parseFloat da NaN
+ * y el caller no emite).
+ */
+export function stripAmountText(text, allowNegative = false) {
+    const source = String(text !== null && text !== void 0 ? text : '');
+    const negative = allowNegative && /^\s*-/.test(source);
+    const cleaned = source.replace(/[^\d.]/g, '');
+    const [rawInteger, ...rawDecimals] = cleaned.split('.');
+    const { integer, decimals } = capDigits(rawInteger, rawDecimals.join(''));
+    const raw = rawDecimals.length ? `${integer}.${decimals}` : integer;
+    if (!raw)
+        return negative ? '-' : '';
+    return negative ? `-${raw}` : raw;
+}
+/**
+ * Agrupa la parte ENTERA de un número crudo con comas de miles, sin tocar los
+ * decimales ni un punto colgante a medio tipear (`1234.` → `1,234.`).
+ */
+export function formatAmountText(raw) {
+    if (!raw)
+        return '';
+    const negative = raw.startsWith('-');
+    const body = negative ? raw.slice(1) : raw;
+    const dotIndex = body.indexOf('.');
+    const integer = dotIndex >= 0 ? body.slice(0, dotIndex) : body;
+    const rest = dotIndex >= 0 ? body.slice(dotIndex) : '';
+    // Recorrido O(n): el idiom con lookahead (`/\B(?=(\d{3})+(?!\d))/g`) es
+    // CUADRÁTICO en la cantidad de dígitos — inofensivo para un número, letal
+    // dentro de un handler de input (medido: 12k dígitos ≈ 81ms por tecla en M4).
+    let grouped = '';
+    for (let i = 0; i < integer.length; i++) {
+        if (i > 0 && (integer.length - i) % 3 === 0)
+            grouped += ',';
+        grouped += integer[i];
+    }
+    return `${negative ? '-' : ''}${grouped}${rest}`;
+}

package/dist/collection/utils/color.js

@@ -1,11 +1,14 @@
 /**
  * Shared color utilities for Cobalt components.
- * WCAG sRGB relative luminance for contrast detection.
+ * WCAG sRGB relative luminance for contrast detection + conversión HSV para el picker.
  */
-function parseHex(hex) {
+/** Antes privada: la necesita el picker, no sólo `luminance`. */
+export function parseHex(hex) {
     if (!hex || typeof hex !== 'string')
         return null;
-    const h = hex.replace('#', '');
+    const h = hex.trim().replace('#', '');
+    if (!/^[0-9a-f]+$/i.test(h))
+        return null;
     if (h.length === 3) {
         return { r: parseInt(h[0] + h[0], 16), g: parseInt(h[1] + h[1], 16), b: parseInt(h[2] + h[2], 16) };
     }
@@ -14,6 +17,109 @@ function parseHex(hex) {
     }
     return null;
 }
+/**
+ * Clampea a 0–255 y redondea. Un canal no finito cuenta como 0: sin eso,
+ * `NaN.toString(16)` es `'nan'` y salía `'#NAN0000'` — un string truthy que NO es
+ * hex y que el consumidor guarda en el modelo sin enterarse.
+ */
+export function rgbToHex(r, g, b) {
+    const to2 = (n) => Math.max(0, Math.min(255, Math.round(Number.isFinite(n) ? n : 0)))
+        .toString(16)
+        .padStart(2, '0')
+        .toUpperCase();
+    return `#${to2(r)}${to2(g)}${to2(b)}`;
+}
+export function hexToHsv(hex) {
+    const c = parseHex(hex);
+    if (!c)
+        return null;
+    const r = c.r / 255, g = c.g / 255, b = c.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === r)
+            h = ((g - b) / d) % 6;
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else
+            h = (r - g) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s: max === 0 ? 0 : (d / max) * 100, v: max * 100 };
+}
+/**
+ * TOTAL por contrato: siempre devuelve un `#RRGGBB` válido, con cualquier entrada
+ * numérica. Un canal no finito (NaN / ±Infinity) entra como 0.
+ * ⚠️ No es paranoia: el arrastre saca el ángulo de `(clientX - rect.left) / rect.width`,
+ * y un panel medido antes del layout (o con `display:none`) da `rect.width === 0`
+ * → NaN/Infinity. Sin este saneo, `table[Math.floor(NaN) % 6]` es `undefined` y el
+ * destructuring TIRA `TypeError` en pleno drag; con `s`/`v` no finitos salía el
+ * string `'#NANNANNAN'`, que es peor porque es truthy y se guarda en el modelo.
+ */
+export function hsvToHex({ h, s, v }) {
+    const finite = (n) => (Number.isFinite(n) ? n : 0);
+    const hh = ((finite(h) % 360) + 360) % 360;
+    const S = finite(s) / 100, V = finite(v) / 100;
+    const c = V * S;
+    const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+    const m = V - c;
+    const seg = Math.floor(hh / 60);
+    const table = [
+        [c, x, 0],
+        [x, c, 0],
+        [0, c, x],
+        [0, x, c],
+        [x, 0, c],
+        [c, 0, x],
+    ];
+    const [r, g, b] = table[seg % 6];
+    return rgbToHex((r + m) * 255, (g + m) * 255, (b + m) * 255);
+}
+/** 3 o 6 dígitos, con o sin `#`. 8 dígitos NO: este picker no maneja alpha. */
+export function isValidHex(v) {
+    return /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test((v || '').trim());
+}
+/**
+ * Normaliza lo que se pega desde otra herramienta. Cubre hex, `rgb()/rgba()` y
+ * `hsl()/hsla()`. NO cubre nombres CSS (`rebeccapurple`): necesitarían una tabla
+ * de 148 entradas o un elemento de medición, y este módulo corre en el proyecto
+ * de tests de Node, sin DOM.
+ */
+export function parseCssColor(input) {
+    const s = (input || '').trim();
+    if (!s)
+        return null;
+    if (isValidHex(s)) {
+        const c = parseHex(s);
+        return rgbToHex(c.r, c.g, c.b);
+    }
+    // Los grupos del regex admiten formas que `+` convierte a NaN ('1.2.3', '-', '--5').
+    // Se RECHAZAN (null), no se clampean: ante un pegado corrupto, devolver rojo o negro
+    // sería una mentira, y `null` ya es parte del contrato. Esto NO toca el clamp de lo
+    // bien formado pero fuera de rango — `rgb(300, 300, 300)` sigue dando '#FFFFFF'.
+    const rgb = s.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+[\d.%]+)?\s*\)$/i);
+    if (rgb) {
+        const [r, g, b] = [+rgb[1], +rgb[2], +rgb[3]];
+        if (![r, g, b].every(Number.isFinite))
+            return null;
+        return rgbToHex(r, g, b);
+    }
+    const hsl = s.match(/^hsla?\(\s*([\d.-]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%(?:[\s,/]+[\d.%]+)?\s*\)$/i);
+    if (hsl) {
+        const H = +hsl[1], L = +hsl[3] / 100, Sl = +hsl[2] / 100;
+        if (![H, L, Sl].every(Number.isFinite))
+            return null;
+        // HSL → HSV, y de ahí al hex por el mismo camino que todo lo demás.
+        const v = L + Sl * Math.min(L, 1 - L);
+        const sv = v === 0 ? 0 : 2 * (1 - L / v);
+        return hsvToHex({ h: H, s: sv * 100, v: v * 100 });
+    }
+    return null;
+}
 /** WCAG sRGB relative luminance (0–1). */
 export function luminance(hex) {
     const c = parseHex(hex);

package/dist/collection/utils/colorPickerI18n.js

@@ -0,0 +1,55 @@
+/**
+ * Textos de co-color-picker. Mismo patrón que fileI18n/dateI18n: el componente
+ * shipea es/en/pt keyado por la prop `locale`. Defaults en INGLÉS — un literal
+ * en español dentro de un co-* deja al host sin forma de traducirlo.
+ * Las plantillas usan `{n}` y se resuelven con `fillTemplate` de fileI18n
+ * (que ya existe exportado ahí: se reutiliza, no se duplica).
+ */
+import { langFromLocale } from "./fileI18n";
+const DICT = {
+    en: {
+        swatches: 'Color presets',
+        groupNeutrals: 'Neutrals', groupBrand: 'Brand colors',
+        area: 'Saturation and brightness',
+        hue: 'Hue', hueValue: '{n} degrees',
+        saturation: 'Saturation', satValue: 'Saturation {n}%',
+        brightness: 'Brightness', briValue: 'Brightness {n}%',
+        area2D: '2D slider',
+        hexField: 'Hex code',
+        eyedropper: 'Pick a color from the screen',
+        copy: 'Copy',
+    },
+    es: {
+        swatches: 'Colores predefinidos',
+        groupNeutrals: 'Neutros', groupBrand: 'Colores de marca',
+        area: 'Saturación y brillo',
+        hue: 'Matiz', hueValue: '{n} grados',
+        saturation: 'Saturación', satValue: 'Saturación {n} %',
+        brightness: 'Brillo', briValue: 'Brillo {n} %',
+        area2D: 'Control 2D',
+        hexField: 'Código hexadecimal',
+        eyedropper: 'Elegir un color de la pantalla',
+        copy: 'Copiar',
+    },
+    pt: {
+        swatches: 'Cores predefinidas',
+        groupNeutrals: 'Neutros', groupBrand: 'Cores da marca',
+        area: 'Saturação e brilho',
+        hue: 'Matiz', hueValue: '{n} graus',
+        saturation: 'Saturação', satValue: 'Saturação {n} %',
+        brightness: 'Brilho', briValue: 'Brilho {n} %',
+        area2D: 'Controle 2D',
+        hexField: 'Código hexadecimal',
+        eyedropper: 'Escolher uma cor da tela',
+        copy: 'Copiar',
+    },
+};
+/**
+ * Resuelve los textos para un locale BCP-47. La resolución del idioma se
+ * reutiliza de `fileI18n` (mismo fallback a 'en'): tener dos implementaciones
+ * del mismo mapeo es exactamente la duplicación que el Step 0 vino a evitar
+ * cuando exigió reutilizar `fillTemplate` de ese archivo.
+ */
+export function getColorPickerStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}