@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

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

@@ -84,24 +84,26 @@
   line-height: 1;
 }
 
+/* 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-switch-wrapper__helper--error .co-switch-wrapper__helper-icon,
 .co-switch-wrapper__helper--error .co-switch-wrapper__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 .co-switch-wrapper__helper--success .co-switch-wrapper__helper-icon,
 .co-switch-wrapper__helper--success .co-switch-wrapper__helper-text {
-  color: var(--co-semantic-status-success);
+  color: var(--co-semantic-text-success, var(--co-semantic-status-success));
 }
 
 .co-switch-wrapper__helper--warning .co-switch-wrapper__helper-icon,
 .co-switch-wrapper__helper--warning .co-switch-wrapper__helper-text {
-  color: var(--co-color-status-review);
+  color: var(--co-semantic-text-warning, var(--co-color-status-review));
 }
 
 .co-switch-wrapper__helper--info .co-switch-wrapper__helper-icon,
 .co-switch-wrapper__helper--info .co-switch-wrapper__helper-text {
-  color: var(--co-semantic-status-info);
+  color: var(--co-semantic-text-info, var(--co-semantic-status-info));
 }
 
 /* ---- Switch track ---- */
@@ -126,8 +128,12 @@
 .co-switch--on  { background: var(--co-semantic-surface-primary); }
 .co-switch--off {
   /* Sin backdrop-filter (D2): el track off vive sobre fondo uniforme
-     (CellActiveToggle en fila de datatable, forms) → blur inerte. */
-  background: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent);
+     (CellActiveToggle en fila de datatable, forms) → blur inerte.
+     Pista apagada por --co-semantic-control-track-off (D8, auditoría oscuro): en claro vale
+     el mismo color-mix de siempre (también es el fallback); en oscuro, gray-500 opaco — el
+     35% de surface-muted quedaba a 1,06:1 de la página y el pulgar oscuro se perdía encima.
+     El pulgar sigue en control-thumb (base-negro en oscuro: 4,78:1 sobre la pista). */
+  background: var(--co-semantic-control-track-off, color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent));
 }
 
 /* ─── THUMB ─────────────────────────────────────────────────── */
@@ -154,9 +160,10 @@
   pointer-events: none;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .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 {
@@ -170,6 +177,8 @@
   content: var(--co-field-required-text, ' (required)');
 }
 
+/* Sin color-mix el token claro (un color-mix) sería inválido en tiempo de cómputo y dejaría la
+   pista transparente: este respaldo legado se queda en surface-muted pelado. */
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-switch--off { background: var(--co-semantic-surface-muted); }
 }

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

@@ -38,16 +38,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: 'ea7d325ff800a4f4db50c46cc4d2198cd9fd4417', class: {
+        return (h("div", { key: '6aabc6ae0391fbf4fa7426b76bc681055ecbf2d3', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'a1f781028f45bdb9aa7d7dfc23e16b0f7fdc6eea', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '97177558e46e8fd58636339ac3a2c6990a473cfe', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '4873bb3271632fc90720c04b3354a1ba01237575', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'b393832df4eabb3d3411373517de4cc10942b847', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '0227ea14f20b836226e5c9af5115c09bbec833d6', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '4abd7d4ca1a3defc7c77c5ea3f79cb615e651c53', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '255b45047435c01f5b99c66c123faa19c4ac2f0e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '7d1754be733fed89bd5cdb57175a68bd84bcb59b', required: this.required })), this.secondaryLabel && (h("span", { key: 'd790d306315a1ffa5601c775133de433f708e3ea', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '0fa80b2cea84d461d1bd95d598cf56b3c021c487', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f8b55daf30cdad200f57baa316c841acd2387e7', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '297f6d425ebc33eb752d140df2aa6aa4288dfe37', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '22caaea1c694f5a18193c83cb3777c42dd8c76e1', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: 'a4bd9311e6dffdce3478bcf58d7aa1dbce60eb2f', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '7be285b4acfd32bcaa6aaf87ea73cfaa62f4e1ba', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '50aa4b8a2895781424d9b9e5049c51ab0d105ccd', required: this.required })), this.secondaryLabel && (h("span", { key: '77d37cc202438af84f5b80638bb8592f07168882', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '8133fa87b018a7a2ec96368ec0687652319c40ec', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'c55bad51cdddcc583de762b563dfbabf39cb7d76', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '9f99e4fcf3ea29a1db4b7fdb7bc7d1e81ec56c31', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,6 @@
+/**
+ * @prop --co-tab-cursor: Cursor del tab (default pointer); co-tab-group lo pone en «grabbing» al presionar para desplazar el strip.
+ */
 :host {
   display: inline-flex;
 }
@@ -8,14 +11,15 @@
   gap: var(--co-spacing-sm2);
   border: none;
   outline: none;
-  cursor: pointer;
+  /* El grupo lo cambia a «grabbing» mientras se arrastra el strip (co-tab-group). */
+  cursor: var(--co-tab-cursor, pointer);
   font-family: var(--co-font-family-primary);
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
   border-radius: var(--co-border-radius-full);
   background: transparent;
-  color: var(--co-color-gray-500, #888);
+  color: var(--co-semantic-text-muted);
   transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
 }
@@ -48,19 +52,19 @@
    has no hover rule. Every pill tab carries `.co-tab--pill`, so this
    reproduces the previous `.co-tab:hover` behavior exactly. */
 .co-tab--pill:hover:not(:disabled) {
-  background: var(--co-color-gray-100, #f6f6f6);
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-control);
+  color: var(--co-semantic-text-default);
 }
 
 .co-tab--selected {
-  background: var(--co-color-gray-100, #f6f6f6);
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-control);
+  color: var(--co-semantic-text-default);
   font-weight: 500;
 }
 
 .co-tab--pill.co-tab--selected:hover:not(:disabled) {
-  background: var(--co-color-gray-100, #f6f6f6);
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-control);
+  color: var(--co-semantic-text-default);
 }
 
 .co-tab--disabled {
@@ -85,7 +89,7 @@
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   background: transparent;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted);
   font-size: var(--co-font-size-14, 14px);
   font-weight: 400;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
@@ -94,8 +98,8 @@
 
 .co-tab--underline.co-tab--selected {
   background: transparent;
-  border-bottom-color: var(--co-color-base-negro, #1f1c1b);
-  color: var(--co-color-base-negro, #1f1c1b);
+  border-bottom-color: var(--co-semantic-text-default);
+  color: var(--co-semantic-text-default);
   font-weight: 500;
 }
 
@@ -112,13 +116,13 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1;
-  background: var(--co-color-gray-200, #e3e3e3);
-  color: var(--co-color-gray-600, #585858);
+  background: var(--co-semantic-surface-muted);
+  color: var(--co-semantic-text-secondary);
 }
 
 .co-tab--selected .co-tab__badge {
-  background: var(--co-color-base-negro, #1f1c1b);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
 }
 
 /* ─── Segmented variant ─────────────────────────────────────── */
@@ -134,26 +138,26 @@
   font-size: var(--co-font-size-14);
   font-weight: 400;
   letter-spacing: -0.03em;
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary);
   background: transparent;
 }
 
 .co-tab--segmented:hover:not(:disabled) {
   background: transparent;
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default);
 }
 
 .co-tab--segmented.co-tab--selected {
-  background: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-page);
   border-color: var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   box-shadow: var(--co-shadow-lg);
   font-weight: 500;
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default);
 }
 
 .co-tab--segmented.co-tab--selected:hover:not(:disabled) {
-  background: var(--co-color-base-blanco, #fff);
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
 }
 
 /* ─── Segmented size s (28px, escala unificada D-19) ────────────── */
@@ -172,15 +176,15 @@
   border-radius: var(--co-spacing-sm, 6px);
   font-size: var(--co-font-size-12, 12px);
   font-weight: 500;
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary);
   background: transparent;
 }
 
 .co-tab--segmented.co-tab--s.co-tab--selected {
-  background: var(--co-color-base-blanco, #fff);
-  border-color: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  background: var(--co-semantic-surface-page);
+  border-color: var(--co-semantic-border-subtle);
   box-shadow: var(--co-shadow-lg);
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default);
   font-weight: 500;
 }
 
@@ -194,14 +198,14 @@
   border-radius: var(--co-spacing-sm, 6px);
   font-size: var(--co-font-size-10, 10px);
   font-weight: 500;
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary);
   background: transparent;
 }
 
 .co-tab--segmented.co-tab--xs.co-tab--selected {
-  background: var(--co-color-base-blanco, #fff);
-  border-color: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  background: var(--co-semantic-surface-page);
+  border-color: var(--co-semantic-border-subtle);
   box-shadow: var(--co-shadow-lg);
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default);
   font-weight: 500;
 }

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

@@ -39,13 +39,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '7b388ddd5338499064d43f30c0fa854d0be6773c', class: {
+        return (h("button", { key: 'f969b1dbfaa65dd1a82f0850074c028cba683b4e', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'ae4c8bd29005e3d51a882eb1104b5e63a6ef69e5', name: this.iconLeft, size: iconSize })), h("span", { key: '6617a4e1af257a3b9d847a77915f202560940733' }, this.label), this.badge && (h("span", { key: 'a2b327941ab6e7578113b5ef05a2e3725132fcb0', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '8a41a7df2c8f37c281c97bf4ab3c81f8ea476a45', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '22119752dd8e2606ece1ed07abc8c8174b7aa2c2', name: this.iconLeft, size: iconSize })), h("span", { key: '35646e95c0b2e1b05ad3f6ad51fd8399e3c31f1b' }, this.label), this.badge && (h("span", { key: 'd44bcd2989aca1694d3755d60f9eba9f4c6e1422', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'c4065c2011bd20a614e0b93cd92b26e3ada849cb', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

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 ──