@prolibu-suite/cobalt-core 0.11.5 → 0.11.7

package/dist/collection/components/co-tab-group/co-tab-group.css

@@ -18,16 +18,36 @@
   scrollbar-width: none;
   /* Al clickear un tab parcialmente fuera de vista, el navegador lo mete en
      vista (focus scroll). Con smooth ese reajuste es un deslizamiento suave en
-     vez de un salto brusco. NO afecta la rueda: el onWheel asigna scrollLeft
-     directo, que es instantáneo por spec (scroll-behavior solo aplica a las
-     scrolling APIs y al focus/navegación del user-agent). */
+     vez de un salto brusco. Asignar `scrollLeft` TAMBIÉN respeta esta
+     propiedad (anima): por eso la rueda y el arrastre del componente mueven el
+     track con `scrollTo({ behavior: 'instant' })` (ver `scrollTrack`). */
   scroll-behavior: smooth;
 }
 
+/* Strip agarrado (mouse presionado con pestañas que desbordan): manito de arrastre en todo el
+   strip, también sobre los tabs (--co-tab-cursor hereda al shadow de cada co-tab). */
+.co-tab-group--grabbing {
+  cursor: grabbing;
+  --co-tab-cursor: grabbing;
+  user-select: none;
+}
+
 .co-tab-group::-webkit-scrollbar {
   display: none;
 }
 
+/* Arrastrando el strip (onPointerMove): el desplazamiento sigue al puntero (sin el smooth de
+   arriba), mano cerrada y sin seleccionar texto de las pestañas mientras se recorre. */
+.co-tab-group--dragging {
+  scroll-behavior: auto;
+  cursor: grabbing;
+  user-select: none;
+}
+
+.co-tab-group--dragging ::slotted(co-tab) {
+  pointer-events: none;
+}
+
 /* Los tabs no se comprimen: el desborde se resuelve scrolleando, no encogiendo. */
 ::slotted(co-tab) {
   flex-shrink: 0;
@@ -54,7 +74,7 @@
    their own `margin-bottom: -1px`. */
 .co-tab-group--underline {
   gap: var(--co-spacing-xs, 4px);
-  border-bottom: 1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  border-bottom: 1px solid var(--co-semantic-border-subtle);
 }
 
 /* ─── Segmented variant ─────────────────────────────────────── */
@@ -66,8 +86,8 @@
   display: inline-flex;
   gap: var(--co-spacing-xxs, 2px);
   padding: var(--co-spacing-sm, 6px);
-  background: var(--co-color-gray-100, #f6f6f6);
-  border-bottom: 1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));
+  background: var(--co-semantic-surface-control);
+  border-bottom: 1px solid var(--co-semantic-border-hairline);
   border-radius: var(--co-border-radius-sm, 12px);
 }
 

package/dist/collection/components/co-tab-group/co-tab-group.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { revealScrollLeft, tabEdgesInTrack } from "./revealTab";
+import { dragScrollLeft, passedDragThreshold, wheelScrollLeft } from "./trackScroll";
 /**
  * Grupo de pestañas (`co-tab`) que controla cuál está activa: `value` marca la
  * pestaña, al elegir otra se actualiza y emite `coTabChange`. Propaga `variant`,
@@ -33,19 +34,75 @@ export class CoTabGroup {
             this.revealSelected();
         };
         /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
-            `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
-            Solo consume el evento si realmente puede desplazarse en esa dirección —
-            en los extremos deja pasar el scroll a la página. */
+            `overflow-x`, ver CSS): la rueda VERTICAL del mouse scrollea el strip. El
+            gesto horizontal (trackpad) lo resuelve el scroll nativo, y en los extremos
+            el evento sigue a la página. */
         this.onWheel = (e) => {
             const track = e.currentTarget;
-            const max = track.scrollWidth - track.clientWidth;
-            if (max <= 0)
+            const next = wheelScrollLeft(track.scrollLeft, track.scrollWidth - track.clientWidth, e.deltaX, e.deltaY);
+            if (next === null)
                 return;
-            const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
-            const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
-            if (next === track.scrollLeft)
+            this.scrollTrack(track, next);
+            e.preventDefault();
+        };
+        this.swallowClick = false;
+        this.onPointerDown = (e) => {
+            const track = e.currentTarget;
+            // Un arrastre anterior cuyo click nunca llegó no puede comerse este.
+            this.swallowClick = false;
+            if (e.pointerType !== 'mouse' || e.button !== 0)
+                return;
+            if (track.scrollWidth <= track.clientWidth)
+                return;
+            this.drag = { pointerId: e.pointerId, startX: e.clientX, startLeft: track.scrollLeft, moved: false };
+            // La manito de arrastre sale al PRESIONAR (no recién al moverse): se ve que el strip se agarra.
+            track.classList.add('co-tab-group--grabbing');
+        };
+        this.onPointerMove = (e) => {
+            var _a;
+            const drag = this.drag;
+            if (!drag || e.pointerId !== drag.pointerId)
                 return;
-            track.scrollLeft = next;
+            const track = e.currentTarget;
+            if (!drag.moved) {
+                if (!passedDragThreshold(drag.startX, e.clientX))
+                    return;
+                drag.moved = true;
+                // Captura para no perder el arrastre si el puntero sale del strip; si el navegador la
+                // rechaza (puntero ya liberado), el arrastre sigue igual.
+                try {
+                    (_a = track.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(track, e.pointerId);
+                }
+                catch ( /* sin captura */_b) { /* sin captura */ }
+                track.classList.add('co-tab-group--dragging');
+            }
+            this.scrollTrack(track, dragScrollLeft(drag.startLeft, drag.startX, e.clientX, track.scrollWidth - track.clientWidth));
+        };
+        this.onPointerEnd = (e) => {
+            var _a;
+            const drag = this.drag;
+            if (!drag || e.pointerId !== drag.pointerId)
+                return;
+            const track = e.currentTarget;
+            track.classList.remove('co-tab-group--grabbing');
+            if (drag.moved) {
+                this.swallowClick = true;
+                track.classList.remove('co-tab-group--dragging');
+                try {
+                    if ((_a = track.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(track, e.pointerId))
+                        track.releasePointerCapture(e.pointerId);
+                }
+                catch ( /* no estaba capturado */_b) { /* no estaba capturado */ }
+            }
+            this.drag = undefined;
+        };
+        /** Captura: corre ANTES que el click de la pestaña (que vive más abajo en el
+            árbol). Solo se traga el click que cierra un arrastre. */
+        this.onClickCapture = (e) => {
+            if (!this.swallowClick)
+                return;
+            this.swallowClick = false;
+            e.stopPropagation();
             e.preventDefault();
         };
     }
@@ -133,12 +190,22 @@ export class CoTabGroup {
             this.raisedFullWidth.delete(tab);
         }
     }
+    /** Mueve el track SIN animar. El CSS tiene `scroll-behavior: smooth` (para el
+        reajuste al enfocar un tab) y asignar `scrollLeft` TAMBIÉN lo respeta: cada
+        evento de rueda/arrastre reiniciaba la animación desde una posición que
+        todavía no había avanzado y el strip apenas se movía (se sentía roto). */
+    scrollTrack(track, left) {
+        if (typeof track.scrollTo === 'function')
+            track.scrollTo({ left, behavior: 'instant' });
+        else
+            track.scrollLeft = left;
+    }
     render() {
-        return (h("div", { key: 'e226f6ba6da4566f95011d121a176697218ffaba', class: {
+        return (h("div", { key: '6bec54850c1e0180a8513770b99b3b4dba865962', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
                 [`co-tab-group--size-${this.size}`]: !!this.size,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '93689e301da64a7ca850571cb623c339294c2122', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerEnd, onPointerCancel: this.onPointerEnd, onClickCapture: this.onClickCapture }, h("slot", { key: '08d10802582e1255cc8a7cef14bf0fe84dd6f3b6', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tab-group/trackScroll.js

@@ -0,0 +1,31 @@
+/**
+ * Desplazamiento del track de pestañas cuando desborda: rueda del mouse y
+ * arrastre con el puntero. Puro (sin DOM) para testearlo; el componente aplica
+ * el resultado con `scrollTo({ behavior: 'instant' })`.
+ */
+/** px que el puntero tiene que moverse antes de que un press cuente como arrastre
+    (por debajo sigue siendo un click en la pestaña). */
+export const DRAG_THRESHOLD = 5;
+const clamp = (value, max) => Math.max(0, Math.min(max, value));
+/**
+ * `scrollLeft` destino para un evento de rueda, o `null` si el componente NO
+ * debe intervenir:
+ * - gesto horizontal (trackpad, shift+rueda): el scroll nativo ya lo resuelve;
+ * - en el extremo hacia el que empuja: el scroll sigue a la página.
+ */
+export function wheelScrollLeft(scrollLeft, max, deltaX, deltaY) {
+    if (max <= 0)
+        return null;
+    if (Math.abs(deltaX) >= Math.abs(deltaY))
+        return null;
+    const next = clamp(scrollLeft + deltaY, max);
+    return next === scrollLeft ? null : next;
+}
+/** `scrollLeft` mientras se arrastra: el contenido sigue al puntero. */
+export function dragScrollLeft(startScrollLeft, startX, x, max) {
+    return clamp(startScrollLeft - (x - startX), max);
+}
+/** ¿El puntero ya se movió lo suficiente para que el press sea un arrastre? */
+export function passedDragThreshold(startX, x) {
+    return Math.abs(x - startX) >= DRAG_THRESHOLD;
+}

package/dist/collection/components/co-tags-field/co-tags-field.css

@@ -36,9 +36,11 @@
   cursor: default;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -260,18 +262,21 @@
 }
 
 /* ---- Invalid (mirrors co-input error) ---- */
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-tags-field--invalid .co-tags-field__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-tags-field--invalid.co-tags-field--focused .co-tags-field__field {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
 .co-tags-field__helper--error .co-tags-field__helper-icon,
 .co-tags-field__helper--error .co-tags-field__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

package/dist/collection/components/co-tags-field/co-tags-field.js

@@ -193,14 +193,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '81725f6d5bd9c22fa799825abf44d1e71a34b33a', class: {
+        return (h("div", { key: 'fd91a99e457cbf54c88d423be8af54c566f3066c', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'c5c913633aa37306acccbd0ca15abb3e265a60cd', class: "co-tags-field__labels" }, h("label", { key: '5898720b85700f9d6f3567c1399806bfa3e28d2d', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c95129fbedfa41a2d735bc4f912f4a98b83c796f', required: this.required })))), h("div", { key: '940a2cd420b5b2e1cb981c21ff2df0957b7c39d6', class: "co-tags-field__field-row" }, h("div", { key: 'a100b3644ac42d71034d99be426d594b37275e71', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '3eac2458a1cf8e4bdbad67c57f323cfa4d7a5c85', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '49bfcb174303ee8660e5acc4f98217aaf66f40ac', class: "co-tags-field__labels" }, h("label", { key: '79762edec0be8829ccaca058eba30a3bde927254', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c70bec9252eb1921c481ecd61d8b6fe63a3d6c10', required: this.required })))), h("div", { key: '32a0647964bd4acc982a2a790647c93a40801c36', class: "co-tags-field__field-row" }, h("div", { key: '4e8368806c1f672c72eb02331f113669db4cf8d1', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '4ad6a373fd8c05ee5aac5bff758ce2fbe4312dc8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -208,13 +208,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '4bda12b201fd72a40a3b6edd900373890d2d84be', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1dedc650b5688bdd820e5253bad57c5a6c5a1725', class: {
+                : undefined }))), showInput && (h("input", { key: 'f225a29c660941323b3e83344cf4b5524bbd72a2', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '37317b91ff4f58ca30ae13d7d639fcc79efaeb3b', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '21dcfc3fe3e72ba8d1557fcd9a9c3d4c774e942e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '7f829d899b73f76f8a66ce5766e0906756ebb5fa', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'c5a053f84171586ca0902815996430359647aadf', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'f29e8727db13e9ce6b6fc72e38786aeb619a51b1', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '592bcd5ecd3f552ac6c8adb87fbd9dab04ec0e40', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '7402a33a90484fdce495df229b7325d6e6527991', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'fcdb85825b3b54b126ed055832bd1e509901ca87', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '8f6845e58e30c2f5a62f715b7e9b4b12566c4402', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8b9116529e02f275ef957e23ad98adb8d726b375', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '5f952c6feb9b82b46552bb8e8faeb5aaeb4abc29', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,9 +46,11 @@
   text-align: right;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -207,7 +209,7 @@
 }
 
 .co-textarea__counter--over {
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
   font-weight: 500;
 }
 
@@ -230,18 +232,21 @@
 }
 
 /* ---- Error ---- */
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-textarea--error .co-textarea__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-textarea--error.co-textarea--focused .co-textarea__field {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
 .co-textarea--error .co-textarea__helper-icon,
 .co-textarea--error .co-textarea__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ---- Success ---- */
@@ -266,7 +271,7 @@
 
 /* ---- Over character limit ---- */
 .co-textarea--over-limit .co-textarea__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

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

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: 'e5e01322a905a357de6f2d509b7aca83cea49047', class: {
+        return (h("div", { key: '83ba9b546aafdd51bcd45a9028cd344c72b2e34c', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '62466350843dafc15c75c6e4c29b13faec7b5639', class: "co-textarea__labels" }, this.label && (h("label", { key: '06059b9f859cc62b7f7673c354577d504a2c2b45', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '2a48d38ac6b87dfd158eb0d7d9b1b3b2b1f95b5d', required: this.required }))), this.secondaryLabel && (h("span", { key: 'b24adbb11cf6ec84250ff3ce7552a9a519d53c3e', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '115cbef3d79afead80004feffde7b2ad7cc48f2d', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'a77b4842c08dc16e36cdb900aa35ddecb4663b57', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '12527c009c32f5937c6036c726db5ef813acd14c', class: "co-textarea__labels" }, this.label && (h("label", { key: '1db33924205a7f36ed9b6ef3cf6c65b9370e5b2c', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '28ee5a526fd254194b59a024159a6131e3778957', required: this.required }))), this.secondaryLabel && (h("span", { key: '72eabbd1a11d81d704515cd6954936a04c971f10', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'a35c69ff044866ba72fbe3f167196b9226801daa', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'f72b550b747592bbed8e5348f1ba7fbfb6cde153', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'bcd4b99d6be969a6a8e9d8b8be5ab9f5f70ad872', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1c5feae936fb38feb4476074f0b440f44f7baad8', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '6bdef97075337ced6529246ca7aa367c4e79e031', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'b72d17d0ceede08590afe947b0b99c789c91305e', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '75c339ff7f805a0982e4662d4584a9d8c187d47f', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1df2b361fa5e5b7436cb1f5f08c89571663cc2b1', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '9e386d088cef6678ed80eb0d693eea4c9d6f93cc', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '5701602f224670cf59ae0bd410e44ed462030615', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '446fc7cd38b8bd6f65c4695c3b600b5a9ae9919e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '52035f4b099e808c0318205060492749a161a426', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '176b97555fad8ce83a38ee2af66b68edf0b26319', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '7e5d0173f5c9f82272b5e57b220715fc178edc2c', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: 'ef184483745654568a57ab5aa56c457205eff33c', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'f5fa0e53edd03a7dffe065c22857b858b726ae58', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -66,7 +66,7 @@ export class CoTile {
         return !this.disabled && e.target === this.el;
     }
     render() {
-        return (h(Host, { key: '407cbb0c7c2f76d206f17233450ad4f7148d4860', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: '73b397c1f2a4bd4f5a964b223ced9809f9c5f19c', class: "co-tile", part: "tile" }, h("slot", { key: 'e4b5b8a6855e838d51efd2d503cb893d68d6c2d3', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: '3b356385347ea64b2a80289b592fa4f1244e60af', class: "co-tile__label", part: "label" }, this.label))));
+        return (h(Host, { key: '261a2e475fc44a1f003f85807a46d4a0365f272a', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: 'd85fd1aae282a41a4555a5e580694a2b4a8c6ab8', class: "co-tile", part: "tile" }, h("slot", { key: '65c674f0ae7cb098d89df7bb9b9c214084e0bf6d', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: '6fb4ad0eeb044422ef9bfae0917daf237f07468c', class: "co-tile__label", part: "label" }, this.label))));
     }
     static get is() { return "co-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-time-field/co-time-field.js

@@ -318,7 +318,7 @@ export class CoTimeField {
     }
     render() {
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'b35cb03c86b6073d7af850316ef15754bedc059c', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'dd3325ea0193f0819f4e8c2341eab0c0671cf421', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '4bfae37879f6cb2fa00d26bdabdbdc04eb7701ad', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '196fcdc84979ee4631cefd208ef78b8d7a46d0c8', class: "co-time-field__steppers" }, h("button", { key: '1e2dbe2b2746048f6a1de6bdff3304180028bb90', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '7b3a75bfb9b8038667dc709b65b1b1ea8ebecc0e', name: "caret-up", size: 10 })), h("button", { key: '948ae31bfe775c72269ff2bbdea8839c15d2f076', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '357072a670ee75c74569bd59e6ea4bcdebf216ac', name: "caret-down", size: 10 })))));
+        return (h("div", { key: '1eb2bed23d36204e93e5118dfd90977120bab249', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'f9ae6d5353b49e51a03e449e0daec153a1947b13', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: 'bb25e1e804e37d3740b2d67b4d9301bedf3319b2', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: 'a0c601d45ed167bf6ba8b445ee7a242a7a92d169', class: "co-time-field__steppers" }, h("button", { key: 'fc10a1e000e7b7bed8512217b6fad8c304817326', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: 'c293e1cbc842867401c01cd1a482900e127a0223', name: "caret-up", size: 10 })), h("button", { key: 'c60eb3694573641425204e59ed4ac882c8c39402', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: 'c2b7ce55d167c8501ac3a3c66b419db04db00f29', name: "caret-down", size: 10 })))));
     }
     static get is() { return "co-time-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,9 +55,10 @@
   padding-top: 2px;
 }
 
-/* Progress icon is always the azul upload accent */
+/* Progress icon is always the azul upload accent. Glifo → text-link (= primary-azul en claro;
+   en oscuro el azul legible sobre gray-800). */
 .co-toast--progress .co-toast__icon {
-  color: var(--co-color-primary-azul, #2563eb);
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul, #2563eb));
 }
 
 .co-toast__body {
@@ -137,44 +138,51 @@
 /* ─── Semantic variants ──────────────────────────────────────────────
  * Per Figma: tinted surface + saturated text/icon + filled dismiss circle
  * in the variant color with white X.
- * Neutral keeps the base (clean white) design.                          */
+ * Neutral keeps the base (clean white) design.
+ *
+ * Superficie y tinta van por semánticos que giran con el tema (D4): en claro
+ * surface-{estado} = status-bg-* y text-{estado} = status-* (lo de siempre);
+ * en oscuro, tinte oscuro con tinta clara — el pastel fijo era una caja clara
+ * en la app oscura. El círculo del ✕ es RELLENO: queda en status-* con la X
+ * blanca fija en ambos temas. warning = familia review (text-warning en claro
+ * = status-review, surface-warning = status-bg-review).                 */
 
 .co-toast--success {
-  --co-toast-bg: var(--co-color-status-bg-success);
-  --co-toast-border: var(--co-color-status-bg-success);
-  --co-toast-text: var(--co-color-status-success);
-  --co-toast-text-secondary: var(--co-color-status-success);
-  --co-toast-icon: var(--co-color-status-success);
+  --co-toast-bg: var(--co-semantic-surface-success, var(--co-color-status-bg-success));
+  --co-toast-border: var(--co-semantic-surface-success, var(--co-color-status-bg-success));
+  --co-toast-text: var(--co-semantic-text-success, var(--co-color-status-success));
+  --co-toast-text-secondary: var(--co-semantic-text-success, var(--co-color-status-success));
+  --co-toast-icon: var(--co-semantic-text-success, var(--co-color-status-success));
   --co-toast-dismiss-bg: var(--co-color-status-success);
   --co-toast-dismiss-color: var(--co-color-base-blanco);
 }
 
 .co-toast--error {
-  --co-toast-bg: var(--co-color-status-bg-error);
-  --co-toast-border: var(--co-color-status-bg-error);
-  --co-toast-text: var(--co-color-status-error);
-  --co-toast-text-secondary: var(--co-color-status-error);
-  --co-toast-icon: var(--co-color-status-error);
+  --co-toast-bg: var(--co-semantic-surface-error, var(--co-color-status-bg-error));
+  --co-toast-border: var(--co-semantic-surface-error, var(--co-color-status-bg-error));
+  --co-toast-text: var(--co-semantic-text-error, var(--co-color-status-error));
+  --co-toast-text-secondary: var(--co-semantic-text-error, var(--co-color-status-error));
+  --co-toast-icon: var(--co-semantic-text-error, var(--co-color-status-error));
   --co-toast-dismiss-bg: var(--co-color-status-error);
   --co-toast-dismiss-color: var(--co-color-base-blanco);
 }
 
 .co-toast--warning {
-  --co-toast-bg: var(--co-color-status-bg-review);
-  --co-toast-border: var(--co-color-status-bg-review);
-  --co-toast-text: var(--co-color-status-review);
-  --co-toast-text-secondary: var(--co-color-status-review);
-  --co-toast-icon: var(--co-color-status-review);
+  --co-toast-bg: var(--co-semantic-surface-warning, var(--co-color-status-bg-review));
+  --co-toast-border: var(--co-semantic-surface-warning, var(--co-color-status-bg-review));
+  --co-toast-text: var(--co-semantic-text-warning, var(--co-color-status-review));
+  --co-toast-text-secondary: var(--co-semantic-text-warning, var(--co-color-status-review));
+  --co-toast-icon: var(--co-semantic-text-warning, var(--co-color-status-review));
   --co-toast-dismiss-bg: var(--co-color-status-review);
   --co-toast-dismiss-color: var(--co-color-base-blanco);
 }
 
 .co-toast--info {
-  --co-toast-bg: var(--co-color-status-bg-progress);
-  --co-toast-border: var(--co-color-status-bg-progress);
-  --co-toast-text: var(--co-color-status-progress);
-  --co-toast-text-secondary: var(--co-color-status-progress);
-  --co-toast-icon: var(--co-color-status-progress);
+  --co-toast-bg: var(--co-semantic-surface-info, var(--co-color-status-bg-progress));
+  --co-toast-border: var(--co-semantic-surface-info, var(--co-color-status-bg-progress));
+  --co-toast-text: var(--co-semantic-text-info, var(--co-color-status-progress));
+  --co-toast-text-secondary: var(--co-semantic-text-info, var(--co-color-status-progress));
+  --co-toast-icon: var(--co-semantic-text-info, var(--co-color-status-progress));
   --co-toast-dismiss-bg: var(--co-color-status-progress);
   --co-toast-dismiss-color: var(--co-color-base-blanco);
 }
@@ -205,7 +213,8 @@
   font-weight: 400;
   line-height: 1.25;
   letter-spacing: var(--co-font-letter-spacing-body);
-  color: var(--co-color-gray-500, #888888);
+  /* text-muted: en claro gray-550 (cambio aprobado de contraste), en oscuro gray-500. */
+  color: var(--co-semantic-text-muted, var(--co-color-gray-500, #888888));
   font-variant-numeric: tabular-nums;
 }
 
@@ -214,7 +223,9 @@
   height: 6px;
   margin-top: 9px;
   border-radius: 9999px;
-  background: var(--co-color-gray-100, #f6f6f6);
+  /* surface-control = gray-100 en claro; en oscuro, gray-700 (el gris claro fijo era una
+     franja blanca sobre el toast oscuro). La barra de relleno sigue azul. */
+  background: var(--co-semantic-surface-control, var(--co-color-gray-100, #f6f6f6));
   overflow: hidden;
 }
 

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

@@ -189,7 +189,7 @@ export class CoToast {
                     "references": {
                         "CoToastActionsLayout": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-audio-peaks/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
                         }
                     }
@@ -215,7 +215,7 @@ export class CoToast {
                     "references": {
                         "CoToastVariant": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-audio-peaks/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastVariant"
                         }
                     }

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

@@ -261,3 +261,50 @@
 :host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled) {
   background: var(--co-color-celeste-100);
 }
+
+/* Pill — chips de filtro del Figma (página Academy): pastillas sueltas de 40px,
+   la seleccionada en la superficie inversa. Todo semántico: gira en oscuro. */
+:host([variant='pill']) .co-toggle-button {
+  height: 40px;
+  padding: 0 var(--co-spacing-lg);
+  border-radius: var(--co-border-radius-full);
+  border-color: transparent;
+  background: var(--co-semantic-surface-control);
+  color: var(--co-toggle-button-color, var(--co-semantic-text-default));
+  font-size: var(--co-toggle-button-font-size, var(--co-font-size-14));
+  font-weight: var(--co-font-weight-regular);
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+}
+
+:host([variant='pill']) .co-toggle-button:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover);
+}
+
+:host([variant='pill']) .co-toggle-button--selected {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-toggle-button-color-selected, var(--co-semantic-on-primary));
+}
+
+:host([variant='pill']) .co-toggle-button--selected:hover:not(:disabled) {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-toggle-button-color-selected, var(--co-semantic-on-primary));
+}
+
+/* Oscuro: el par celeste-100/primary-azul era una pastilla CLARA dentro de la app oscura. Con
+   light-dark() la pastilla y la tinta giran juntas (claro = celeste-100 + azul primitivo, exactos;
+   oscuro = text-link al 18% sobre la página + text-link, 5,2:1). Todo dentro de @supports: sin
+   light-dark() (Safari <17.5) la declaración con var() quedaría inválida en valor computado
+   (fondo transparente) y una tinta que gira sobre el pastel fijo daría 2,7:1 — ahí se queda el
+   par de siempre. */
+@supports (color: light-dark(white, black)) {
+  :host([variant='soft']) .co-toggle-button--selected {
+    color: var(--co-toggle-button-color-selected, var(--co-semantic-text-link, var(--co-color-primary-azul)));
+  }
+
+  :host([variant='soft']) .co-toggle-button--selected,
+  :host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled) {
+    background: light-dark(var(--co-color-celeste-100), color-mix(in srgb, var(--co-semantic-text-link, var(--co-color-primary-azul)) 18%, var(--co-semantic-surface-page)));
+  }
+}