@prolibu-suite/cobalt-core 0.11.6 → 0.11.7

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.css

@@ -209,6 +209,12 @@
   letter-spacing: 0.08em;
   padding: var(--co-spacing-lg) var(--co-spacing-sm) var(--co-spacing-xs);
   user-select: none;
+  /* Una sola línea SIEMPRE (como __item-label): mientras el sidebar anima 64→256
+     el rótulo ("VENTAS Y MARKETING") se partía en dos líneas a media animación y
+     empujaba todo lo de abajo ~10px — el ítem activo "saltaba" al expandir. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .co-sidebar-nav__category-items {
@@ -217,17 +223,30 @@
   gap: var(--co-spacing-xxs);
 }
 
-/* — Mini-mode category group — no label, but preserves the section spacing so the
-   collapsed sidebar still reads as grouped (an extra gap between groups vs. items). */
+/* — Mini-mode category group — misma geometría que la categoría de full: el
+   rótulo se reemplaza por un spacer invisible con sus métricas y el margen entre
+   grupos es el mismo, así cada icono queda a la misma altura en ambos modos. */
 .co-sidebar-nav__category--min {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--co-spacing-xxs);
 }
 
 .co-sidebar-nav__category--min + .co-sidebar-nav__category--min {
-  margin-top: var(--co-spacing-md);
+  margin-top: var(--co-spacing-sm);
+}
+
+.co-sidebar-nav__category-spacer {
+  visibility: hidden;
+  white-space: nowrap;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Los ítems van en su propio contenedor con gap en full; acá son hermanos del
+   spacer → el gap va por margen para no sumarlo también bajo el spacer. */
+.co-sidebar-nav__category--min > :not(.co-sidebar-nav__category-spacer) + * {
+  margin-top: var(--co-spacing-xxs);
 }
 
 /* — Leaf item — */
@@ -260,7 +279,8 @@
 
 .co-sidebar-nav__item--active {
   background: var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover));
-  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+  /* Fallback por text-link (en claro = primary-azul; en oscuro, azul legible sobre gray-800). */
+  color: var(--co-sidebar-nav-active-color, var(--co-semantic-text-link, var(--co-color-primary-azul)));
   font-weight: var(--co-font-weight-medium);
   /* Frosted glass (Cobalt glass system): translucent fill + backdrop blur. The
      active bg is set translucent from the app (--co-sidebar-nav-active-bg); the
@@ -279,7 +299,7 @@
    gray hover; this rule (0,3,0) wins so the active state persists on hover. */
 .co-sidebar-nav__item--active:hover {
   background: var(--co-sidebar-nav-active-bg-min, var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover)));
-  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+  color: var(--co-sidebar-nav-active-color, var(--co-semantic-text-link, var(--co-color-primary-azul)));
 }
 
 .co-sidebar-nav__item-icon {
@@ -310,10 +330,21 @@
   border-radius: var(--co-border-radius-xxs);
 }
 
+/* co-tooltip envuelve cada ítem colapsado en wrappers `inline-block`: su caja de
+   línea (strut de 21px + línea base del contenido) estiraba la fila a 29-30px
+   según el ícono (img del workspace, co-icon de 20) y corría todo lo de abajo
+   respecto de full. Sin strut la fila mide lo que el botón (28). El panel fija su
+   propio line-height, así que el texto del tooltip no se entera. */
+.co-sidebar-nav--min co-tooltip {
+  line-height: 0;
+}
+
 /* — Mini mode item overrides — */
+/* Alto = el de la fila de full (padding xs + icono 20 = 28): colapsar/expandir
+   no mueve los iconos en vertical. */
 .co-sidebar-nav--min .co-sidebar-nav__item {
   width: 36px;
-  height: 36px;
+  height: 28px;
   padding: 0;
   justify-content: center;
   /* Same corner radius as full-mode rows so the active/hover chip reads
@@ -337,8 +368,12 @@
   position: fixed;
   min-width: 180px;
   max-width: 240px;
-  background: var(--co-color-base-blanco);
-  border: 1px solid var(--co-color-opacity-negro-8);
+  /* Superficie de panel que gira con el tema (como co-popover): en claro, los mismos
+     base-blanco / opacity-negro-8 / base-negro de siempre; en oscuro, gray-800 con hairline
+     blanco. Antes eran primitivas y el flyout salía como caja blanca en la app oscura (D5). */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-subtle);
+  color: var(--co-semantic-text-default);
   border-radius: var(--co-border-radius-sm);
   box-shadow: var(--co-shadow-lg);
   padding: var(--co-spacing-md);
@@ -358,14 +393,15 @@
   font-family: var(--co-font-family-mono);
   font-size: var(--co-font-size-10);
   font-weight: 400;
-  color: var(--co-color-gray-500);
+  /* text-muted (claro = gray-550, aprobado: 5,3:1 sobre blanco; oscuro = gray-500). */
+  color: var(--co-semantic-text-muted);
   line-height: 110%;
   letter-spacing: var(--co-font-letter-spacing-overline);
   padding: var(--co-spacing-xxs) var(--co-spacing-sm) var(--co-spacing-xs);
   user-select: none;
 }
 
-/* Flyout items — icon + label, forced light colors */
+/* Flyout items — icon + label, tinta del tema (text-default) */
 .co-sidebar-nav__flyout .co-sidebar-nav__item {
   width: 100%;
   height: 32px;
@@ -373,13 +409,14 @@
   border-radius: var(--co-border-radius-xs);
   gap: var(--co-spacing-md);
   font-weight: var(--co-font-weight-regular);
-  color: var(--co-color-base-negro);
+  color: var(--co-semantic-text-default);
   line-height: var(--co-font-line-height-none);
   justify-content: flex-start;
 }
 
 .co-sidebar-nav__flyout .co-sidebar-nav__item:hover {
-  background: var(--co-color-gray-100);
+  /* surface-control = gray-100 en claro; en oscuro, gray-700 sobre el panel gray-800. */
+  background: var(--co-semantic-surface-control);
 }
 
 /* Active flyout item = solid workspace-color pill + adaptive text/icon, mirroring
@@ -388,8 +425,8 @@
    flat gray-100 background rendered white-on-gray (invisible). Pairing a solid
    workspace bg with the adaptive fg keeps it readable on BOTH light and dark themes. */
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active {
-  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));
-  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+  background: var(--co-sidebar-nav-active-bg-min, var(--co-semantic-surface-control));
+  color: var(--co-sidebar-nav-active-color, var(--co-semantic-text-link, var(--co-color-primary-azul)));
   font-weight: var(--co-font-weight-medium);
 }
 
@@ -399,8 +436,8 @@
    texto seguía en el color adaptativo del activo — blanco sobre gris en workspaces
    oscuros, ilegible (Bibliotecas › Plantillas de contenido, tarea QA #61). 0,4,0. */
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active:hover {
-  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));
-  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+  background: var(--co-sidebar-nav-active-bg-min, var(--co-semantic-surface-control));
+  color: var(--co-sidebar-nav-active-color, var(--co-semantic-text-link, var(--co-color-primary-azul)));
 }
 
 .co-sidebar-nav__flyout .co-sidebar-nav__item-icon {
@@ -410,12 +447,12 @@
 }
 
 .co-sidebar-nav__flyout .co-sidebar-nav__item-icon co-icon {
-  color: var(--co-color-base-negro);
+  color: var(--co-semantic-text-default);
 }
 
 /* Icon follows the active text color so it stays visible on the solid pill. */
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon {
-  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+  color: var(--co-sidebar-nav-active-color, var(--co-semantic-text-link, var(--co-color-primary-azul)));
 }
 
 @keyframes co-flyout-in {

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -185,6 +185,8 @@ const DEFAULT_ICON_MAP = {
     Telegram: 'telegram-logo',
     Discord: 'discord-logo',
 };
+/** Ícono de un ítem en modo `min` (sin label): 18 (20 se veía pesado; 16 = el de full, se perdía). */
+const MIN_ICON_SIZE = 18;
 /**
  * A complete sidebar navigation component that renders a hierarchical menu.
  * Accepts the raw `uiSchemas.sideBar` JSON from the Prolibu API and
@@ -428,7 +430,7 @@ export class CoSidebarNav {
         const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, showLabel ? 16 : 18)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, showLabel ? 16 : MIN_ICON_SIZE)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
         // Collapsed (icon-only) items get a Cobalt tooltip with the label instead of
         // the native `title`. Flyout items (forceLabel) already show their label.
         if (this.mode === 'min' && !forceLabel) {
@@ -478,7 +480,7 @@ export class CoSidebarNav {
                     else {
                         this.openFlyout(item.key, anchor || undefined, ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0);
                     }
-                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, 18))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
+                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, MIN_ICON_SIZE))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
         }
         return (h("div", { class: {
                 'co-sidebar-nav__expansion': true,
@@ -488,10 +490,10 @@ export class CoSidebarNav {
     }
     renderCategory(item) {
         if (this.mode === 'min') {
-            // In mini mode, drop the category label but keep a group wrapper so the
-            // sections stay visually separated by vertical spacing (mirrors the
-            // section gaps of full mode — the structure is still legible collapsed).
-            return (h("div", { class: "co-sidebar-nav__category--min" }, item.children.map(child => this.renderItem(child))));
+            // In mini mode the label text is dropped but its BOX is kept (invisible
+            // spacer with the same metrics): every icon sits at the same y collapsed
+            // and expanded, so toggling the sidebar doesn't make the rail jump.
+            return (h("div", { class: "co-sidebar-nav__category--min" }, h("span", { class: "co-sidebar-nav__category-label co-sidebar-nav__category-spacer", "aria-hidden": "true" }, '\u00a0'), item.children.map(child => this.renderItem(child))));
         }
         return (h("div", { class: "co-sidebar-nav__category" }, h("span", { class: "co-sidebar-nav__category-label" }, this.renderHighlightedLabel(item.key)), h("div", { class: "co-sidebar-nav__category-items" }, item.children.map(child => this.renderItem(child)))));
     }
@@ -512,10 +514,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: 'ef90beff11ad03c2cf4e13b74c9898cca380e8eb', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'cc9788f795e8ac66b4143195e7ffa3c4efe58bc1', class: {
+        h(Host, { key: '7e9637d98b9a2a698f6b82050b0f9cdadda66798', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'c3ad14a4e294be4c2b803c93a4ddbf42daae5dd0', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'c77b51b21c0d5d70ff90213f3c7a5bc0e104bdec', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: '2b2f5c39b6a529e1993695f4cda5ba5c5965c17e', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -718,7 +720,7 @@ export class CoSidebarNav {
                     "references": {
                         "NavigateDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
                             "id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
                         }
                     }

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

@@ -53,7 +53,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '26e69f4c94f59664827c617fa3d54983ac56cd1d', class: {
+        return (h("div", { key: 'e4f8d19b4993eed4acce3f5a3db3a126ea728fbe', class: {
                 'co-skeleton': true,
                 [`co-skeleton--${this.variant}`]: true,
                 'co-skeleton--revealed': this.revealed,

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

@@ -322,14 +322,16 @@
   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-slider__helper--error .co-slider__helper-icon,
-.co-slider__helper--error .co-slider__helper-text { color: var(--co-semantic-status-error); }
+.co-slider__helper--error .co-slider__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-slider__helper--success .co-slider__helper-icon,
-.co-slider__helper--success .co-slider__helper-text { color: var(--co-semantic-status-success); }
+.co-slider__helper--success .co-slider__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-slider__helper--warning .co-slider__helper-icon,
-.co-slider__helper--warning .co-slider__helper-text { color: var(--co-color-status-review); }
+.co-slider__helper--warning .co-slider__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-slider__helper--info .co-slider__helper-icon,
-.co-slider__helper--info .co-slider__helper-text { color: var(--co-semantic-status-info); }
+.co-slider__helper--info .co-slider__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }

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

@@ -263,13 +263,13 @@ export class CoSlider {
     render() {
         const pct = this.percentage;
         const vertical = this.isVertical;
-        return (h("div", { key: '4993b9d6827cdda362ce482151bffaf84c916442', class: {
+        return (h("div", { key: 'da5fc7fabb36e990804b05d16b6b236c905df846', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 'co-slider--vertical': vertical,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '707c5bda972f1c1c3a45d6716f1a7b1debc2e9ee', class: "co-slider__labels" }, h("div", { key: '2ea2bd4c5e9eafcc8e87214134ad3ee4881b990f', class: "co-slider__labels-left" }, this.label && h("label", { key: '8a509cbaaae01919f3e29627492762021bc6b001', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '9ac5b791724b1f106c0d50bea0eef55367187dcb', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '77fd3b3c5db03128a19fc37797832e334a31a9cd', class: "co-slider__value" }, this.value))), h("div", { key: '8d16d1b89ea5c4f0226787482f4cf307cefb5f99', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2d74659caca41e9255fe792e3b172e3cd6e4f3d9', class: "co-slider__track" }, h("div", { key: '169501854773b01341072f8024d89e665ed5527e', class: "co-slider__fill", style: vertical ? { height: `${pct}%` } : { width: `${pct}%` } })), h("div", { key: 'a1ea0b12371df5f0df4204a6be870fcf70141c43', class: "co-slider__thumb", style: vertical ? { bottom: `${pct}%` } : { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8e8d55e60e058b1336c9819c11100c3e82f56097', class: "co-slider__marks" }, h("span", { key: '0e6b74aed9a56f40147a8e96290834c3e51d82c4', class: "co-slider__mark" }, this.min), h("span", { key: '4b735e6e20f5d49f5ab6047129b43e05210c5726', class: "co-slider__mark" }, this.max))), h("input", { key: 'ddbb917734f98c92564477b502f29f51f2c492ca', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, onKeyDown: vertical ? this.handleVerticalKeyDown : undefined, "aria-label": this.ariaLabelText || this.label || 'Slider', "aria-orientation": vertical ? 'vertical' : undefined }), this.helperText && (h("div", { key: '68ba7ef8a27b006011ad0d1beba1cd9557103f8a', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '99f8b511f7de45809967a8a7588d8d736365247e', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '22f3ecf666b54d2bf5c97816c1b8253a7c6b233b', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '0b3638dbe9d4186a04ce534fe60ac834aab351ae', class: "co-slider__labels" }, h("div", { key: '0737d00ba66e8f0e6e2c44662753d5cfb93c9711', class: "co-slider__labels-left" }, this.label && h("label", { key: 'e3441b145401123f5ac9dcdc483502d5f9593db8', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'bed45a80b14db1ebfc52ebbd1745205ac109010d', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '6f0f74b7db80965898fa29423089fbfe8830d163', class: "co-slider__value" }, this.value))), h("div", { key: '813bcb1262402ba04286526e71205938bdf3383a', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '9d41b1af3a3d2fa572cc7e83afdf5ba6fb2386ca', class: "co-slider__track" }, h("div", { key: '70816acf85e41f5b3a2aa67fec1ed6d01a305f2e', class: "co-slider__fill", style: vertical ? { height: `${pct}%` } : { width: `${pct}%` } })), h("div", { key: '232b3b9723cba46a179cd169ef339316137717e4', class: "co-slider__thumb", style: vertical ? { bottom: `${pct}%` } : { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'bab9b7196e986eab2f04d245e1d55466fe118ca5', class: "co-slider__marks" }, h("span", { key: 'eee4f257d446dedce4030f8273cdb38799948df8', class: "co-slider__mark" }, this.min), h("span", { key: 'f1c7f913caa9a4946f3bda477c9c94a8c867e05e', class: "co-slider__mark" }, this.max))), h("input", { key: 'a1e9bc6e927e4eb3ab9ebae75d51d624bd0d47b1', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, onKeyDown: vertical ? this.handleVerticalKeyDown : undefined, "aria-label": this.ariaLabelText || this.label || 'Slider', "aria-orientation": vertical ? 'vertical' : undefined }), this.helperText && (h("div", { key: 'c01d56b150164352cfe3c44b27b5e36d82563e60', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '5a5772e1a6c64b2c25d7c326047c009c0612339b', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '3ae4c236fd30ee93d282c52d8c31ff0c726f7f88', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-swatch-grid/co-swatch-grid.js

@@ -86,7 +86,7 @@ export class CoSwatchGrid {
         // Roving tabindex: una sola parada de tab (el seleccionado, o el primero).
         const tabbableIndex = selected >= 0 ? selected : 0;
         this.swatchEls = [];
-        return (h("div", { key: '37b221ff9dbebc184310f1cd51d539b833876adf', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
+        return (h("div", { key: '670f2b3440c895991f601798fd353061830d05c3', class: "co-swatch-grid", role: "listbox", "aria-label": this.label || s.gridLabel, style: { gridTemplateColumns: `repeat(${this.columnCount}, ${size}px)`, gap: `${gap}px` } }, this.colorList.map((color, i) => (h("button", { type: "button", key: `${i}-${color}`, ref: (el) => {
                 if (el)
                     this.swatchEls[i] = el;
             }, class: {

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"; }