@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

package/dist/collection/components/co-rich-text-toolbar/panelFit.js

@@ -0,0 +1,63 @@
+/**
+ * Encaje horizontal de los paneles de la toolbar (link, listas, color, tabla,
+ * callouts). Cuelgan de su botón por CSS (`position:absolute; left:0`), así que
+ * en una columna angosta —el inspector del ítem del cotizador— se salían por la
+ * derecha: los recortaba el `overflow` del contenedor, que además ganaba scroll
+ * horizontal y corría el editor. Aquí se calcula cuánto correrlos para que
+ * queden dentro del área VISIBLE (viewport ∩ ancestros que recortan).
+ */
+/** Aire mínimo contra el borde del área visible. */
+export const PANEL_EDGE_GAP = 8;
+/**
+ * Desplazamiento en px de viewport (negativo = a la izquierda) para que `panel`
+ * entre en `area`. Si el panel es más ancho que el área, gana su borde
+ * IZQUIERDO (el comienzo del contenido: el input, la primera fila).
+ */
+export function panelShiftX(panel, area, gap = PANEL_EDGE_GAP) {
+    let dx = 0;
+    if (panel.right > area.right - gap)
+        dx = area.right - gap - panel.right;
+    if (panel.left + dx < area.left + gap)
+        dx = area.left + gap - panel.left;
+    return dx;
+}
+const CLIPS = /(auto|scroll|hidden|clip)/;
+/**
+ * Área visible para un nodo: el viewport recortado por cada ancestro con
+ * `overflow-x` que recorta, cruzando shadow roots (el toolbar vive dentro del
+ * shadow del editor, que vive en la página).
+ */
+export function visibleArea(node, viewportWidth, overflowX) {
+    const area = { left: 0, right: viewportWidth };
+    let current = parentAcrossShadow(node);
+    while (current) {
+        if (CLIPS.test(overflowX(current))) {
+            const inner = innerBox(current);
+            area.left = Math.max(area.left, inner.left);
+            area.right = Math.min(area.right, inner.right);
+        }
+        current = parentAcrossShadow(current);
+    }
+    return area;
+}
+/**
+ * Lo que de verdad se ve de un contenedor que recorta: SIN su borde ni su
+ * scrollbar vertical (el rect los incluye; con el rect, el panel quedaba 3 px
+ * debajo de la scrollbar y el contenedor seguía con scroll-x). En px de
+ * viewport: `client*` son px CSS, se escalan si un ancestro tiene transform.
+ */
+function innerBox(node) {
+    const box = node.getBoundingClientRect();
+    if (node.clientWidth === undefined)
+        return box;
+    const scale = node.offsetWidth && box.width ? box.width / node.offsetWidth : 1;
+    const left = box.left + (node.clientLeft || 0) * scale;
+    return { left, right: left + node.clientWidth * scale };
+}
+function parentAcrossShadow(node) {
+    var _a, _b;
+    if (node.parentElement)
+        return node.parentElement;
+    const root = (_a = node.getRootNode) === null || _a === void 0 ? void 0 : _a.call(node);
+    return (_b = root === null || root === void 0 ? void 0 : root.host) !== null && _b !== void 0 ? _b : null;
+}

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.css

@@ -53,7 +53,8 @@
 }
 
 .co-rich-text-viewer a {
-  color: var(--co-color-primary-azul);
+  /* Tinta de enlace/activo: text-link gira con el tema (azul primitivo = 3,8:1 sobre gray-800). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
   text-decoration: underline;
 }
 

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

@@ -16,11 +16,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '077025b2a73f8440400c27923f1d3a7e38cfb346', class: {
+        return (h("div", { key: 'd052e6dba474ea6f1f136d677ebc538557685f07', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '2ffc2d8e5c0ab4779a5599736c877097039fd47f', class: "co-row__prefix" }, h("slot", { key: 'b6cb185d5f1bb577f78d19b9f78fce1be52c5252', name: "prefix" })), h("div", { key: 'f2a34f5554a832d6ae5030bb1138488928025d43', class: "co-row__content" }, h("slot", { key: 'a8ad430becc2e285e4fec43b16a6e29ba9088f8a' })), h("div", { key: '7fef31caadd3fb43571286a2ee13cf42ebbf8d78', class: "co-row__suffix" }, h("slot", { key: '63465e56defc9a0c11bc5a1eba46ac7f150d67fb', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '539f84f2fa75b7f21e434c59e712e37ee9ec8c97', class: "co-row__prefix" }, h("slot", { key: '53c1587065532465adc5a57e53486e1f95f6d62c', name: "prefix" })), h("div", { key: '6ac141b5b74f94ebea99ba3be6c7ec01e7c0303c', class: "co-row__content" }, h("slot", { key: '8e9312d7dbe9c085880a686735ac45a600e98802' })), h("div", { key: '3b7ae09f7dc1db532c76c2439d5632e59d16f916', class: "co-row__suffix" }, h("slot", { key: 'd42cc77971fb7c8e435538ce77192217f58a6c1b', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-segmented-bar/co-segmented-bar.js

@@ -160,7 +160,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
                             "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
                         }
                     }

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

@@ -804,7 +804,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-xs);
   padding: var(--co-spacing-xxs) var(--co-spacing-sm2);
-  background: var(--co-color-gray-100);
+  /* surface-control = gray-100 en claro y gira en oscuro: con la primitiva la etiqueta
+     (text-default, blanca en oscuro) quedaba blanco sobre blanco. */
+  background: var(--co-semantic-surface-control);
   border-radius: var(--co-border-radius-full);
   font-size: var(--co-font-size-14);
   line-height: 1;
@@ -826,7 +828,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--co-color-gray-500);
+  color: var(--co-semantic-text-muted);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
@@ -873,7 +875,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   cursor: not-allowed;
 }
 
-.co-select--error .co-select__trigger { border-color: var(--co-semantic-status-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).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
+.co-select--error .co-select__trigger { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-select--success .co-select__trigger { border-color: var(--co-semantic-status-success); }
 .co-select--warning .co-select__trigger { border-color: var(--co-color-status-review); }
 .co-select--info .co-select__trigger { border-color: var(--co-semantic-status-info); }
@@ -1033,9 +1038,11 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-axis: 2px;
   --os-track-bg: transparent;
   --os-handle-border-radius: var(--co-border-radius-full);
-  --os-handle-bg: var(--co-color-opacity-negro-16);
-  --os-handle-bg-hover: var(--co-color-opacity-negro-25);
-  --os-handle-bg-active: var(--co-color-opacity-negro-50);
+  /* border-default/field/strong = negro 16/25/50 en claro; en oscuro giran a blanco (el asa
+     negra no se veía sobre el panel oscuro). */
+  --os-handle-bg: var(--co-semantic-border-default);
+  --os-handle-bg-hover: var(--co-semantic-border-field);
+  --os-handle-bg-active: var(--co-semantic-border-strong);
   --os-handle-min-size: 24px;
 }
 
@@ -1118,17 +1125,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   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-select__helper--error .co-select__helper-icon,
-.co-select__helper--error .co-select__helper-text { color: var(--co-semantic-status-error); }
+.co-select__helper--error .co-select__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-select__helper--success .co-select__helper-icon,
-.co-select__helper--success .co-select__helper-text { color: var(--co-semantic-status-success); }
+.co-select__helper--success .co-select__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-select__helper--warning .co-select__helper-icon,
-.co-select__helper--warning .co-select__helper-text { color: var(--co-color-status-review); }
+.co-select__helper--warning .co-select__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-select__helper--info .co-select__helper-icon,
-.co-select__helper--info .co-select__helper-text { color: var(--co-semantic-status-info); }
+.co-select__helper--info .co-select__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
    Set --co-field-label-width on a container to align labels across fields. */
@@ -1156,9 +1165,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   min-width: 0;
 }
 
+/* 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 {
@@ -1242,7 +1252,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 /* Caret gray-600 en este layout puntual (Figma 6-#10), pisando el
    default text-default de arriba. */
 .co-select--inline-help .co-select__caret {
-  color: var(--co-color-gray-600);
+  color: var(--co-semantic-text-secondary); /* gray-600 en claro; gira en oscuro */
 }
 
 /* ── menu-surface="dark" ──────────────────────────────────────────

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

@@ -481,7 +481,9 @@ export class CoSelect {
         var _a;
         const active = document.activeElement;
         if (active === this.el || this.el.contains(active)) {
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Sin scroll: si el panel se cerró porque el campo salió de la vista de su scroller
+            // (co-popover), devolverle el foco llevaba al usuario de vuelta arriba del formulario.
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         }
     }
     // OverlayScrollbars: floating, auto-hide handle that overlays the content (no
@@ -547,7 +549,7 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: '12cb506f80422c39f8f5a17b81afa6c01831f237', class: {
+        return (h("div", { key: 'd121ba9ec0b29e6e70702185d055f9f2590fcf60', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
@@ -556,22 +558,22 @@ export class CoSelect {
                 'co-select--flat': this.variant === 'flat',
                 'co-select--soft': this.variant === 'soft',
                 'co-select--inline-help': this.labelStyle === 'inline-help',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'bbb454e9d0ab08fd3abf5462711654c6eb8fe253', class: "co-select__labels" }, this.label && h("label", { key: '2dbf39a9e4fca24b95777078ecb6fea060aa2e19', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'f5a62c06aa12a5556fc78d93918d673982183dfa', required: this.required })), this.secondaryLabel && h("span", { key: '2082ba20405dee16a08d35ec1ff67b59294056a0', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '4f7e00909286922ff2b9d05f1ee4f42f8bc7aed9', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b5ba06d1b361ba3f0488b3835e2ae9fbc723ee3f', class: "co-select__labels" }, this.label && h("label", { key: '8131f52d757b71d694ddbb5fe2e83e0762237627', class: "co-select__label" }, this.label, h(RequiredMark, { key: '31de4113e6cc17e7be6ecf82cf4d9108878cad67', required: this.required })), this.secondaryLabel && h("span", { key: 'd499ef261e4c8b375e6058eae2b18fa9e755008b', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2cb6fc46ec1ecab4e1ccdae6a44d9394201fb339', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
             // menuSurface="dark": el panel oscuro pinta su propio chrome (fondo
             // negro, radio xs, sin borde ni sombra — Figma 4750:23242), así que
             // el co-popover va `bare` para no sumar el borde hairline ni la
             // sombra del panel claro (y cualquier --co-popover-shadow heredada
             // del contexto). En "light" (default) no cambia nada.
-            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '8537fcefbd02707af785ad623bcb1f19b276d3c4', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '6714adb30bb2c24824cf80048b579a05825652b9', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '8c0c6cca536a5edba4e3caa50ecd196f9e70117c', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4e85e1c3256c40b93336fc282afaf5cb684f3af0', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: 'b70cb41a5da6e4b0fb5c70d88658d9a15b8ff730', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: 'e594304493fc463f48c35a8a7526488664d7300e', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '65f1295511998e7ec9685ee45433e01c14ae65df', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '23416924a88739bf6326095298bfaaeabbe980e1', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'd4c3c23b8ceb6ef0b918348e8b0f724051380681', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'd591730000ed4e58f6c2474b58949ae15cf65593', class: {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '73a50ae2aa6c1a9f449a5abb9851fdef231e7ffc', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ade7609dc136ec20a0412fd7e460a95e50d516e4', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '7b5bba8fb8fca31613879ab8743f884b1bd71802', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '2e6bd8187439a7920fe6ad151886da76f79426fc', class: {
                 'co-select__dropdown': true,
                 'co-select__dropdown--dark': this.menuSurface === 'dark',
-            } }, this.isOpen && this.searchable && (h("div", { key: 'd663fdb315d997ed2325a5c385bbd5728bebdaa1', class: "co-select__search" }, h("co-icon", { key: '13d5e0bd54b6dfa6d926f7e9ec2057f814720e16', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'e7edfe009febe2c681c47fa92105b62c868b53d5', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'bd0befdaba2cbead771171b609e2021c714ea247', class: "co-select__empty" }, this.emptyText)), h("div", { key: '0e395475bba6b693419986ff2cf582192a15a2e6', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+            } }, this.isOpen && this.searchable && (h("div", { key: '75b3f339a256945a1c5153453033ab3ad0b5902e', class: "co-select__search" }, h("co-icon", { key: '95f2a28646ffba6416fe7582a360b7c6b4ce58a9', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '8e539a698da9d3ff68e3cce544cac9da4c285afa', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b0ed2db9c7e397dae2f59cf3f11d9a2ccdf27ab8', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'ec2381d0de5d9a928510d0e15b7ca78b449844b1', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (
             // Los wrappers del virtualizador van `presentation` para que las
@@ -587,7 +589,7 @@ export class CoSelect {
                         'co-select__option--active': index === this.activeIndex,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
             }))));
-        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'b5991f9a23e145990ba8d1a01f67c1744165aa36', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '04d08f975108f5f86dcbf4078271cbb16c47f4c6', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '26ab3e89c81d4c64aef536f561921d5c3f08ea62', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '0743ba35903d666a3ab4598e4639e8c0f94a190b', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'e46141c876fdd0e8f05a14318f969ed370c2e201', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '13b7b84f7241bed5afdfd70c1867045ae4fcd820', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '0f4a854f367a34b7a314ba0a768d02a35b03df07', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '965b58e53ac2bfd55c4d416e07062067c9f686b7', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -846,7 +848,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }

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

@@ -64,7 +64,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '1b15a22f07b7bf656d9b20b53d602bc7d47e3cf2', class: {
+        return (h("hr", { key: 'be9301c81ce59544b33c78d5d70561a5530896f6', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -18,10 +18,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: 'de782225d3dc1ef1def8af333a2a81809b50a84d', class: {
+        return (h("nav", { key: '757c703d5b48b3a0a9279efb72fcb4e75766cb70', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '7c4466bf0d14cba9ca008d0a1cf9c28972726301', class: "co-sidebar__header", part: "header" }, h("slot", { key: '1389f2fa757adcd7b97586534de4144f9b08d1a7', name: "header" })), h("div", { key: '298ea9f0183bb31b0a4b6d83053029b8f181fb7d', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'f1c0c4b26b4be0441048f7f961529ce5371d4c6d' })), h("div", { key: '62666b4e1b9591c70196fccb73caf683925de906', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '83566f1745b802296b7db7b90032a3ca13849126', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: 'ca01fa4c56c52459b7be32e19111bd183b1c7824', class: "co-sidebar__header", part: "header" }, h("slot", { key: '7bb16f14df6569ae262b776813525ca5f827f485', name: "header" })), h("div", { key: 'd3a20aae579d1af533834d5ee98f4e597a879688', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'eff38bf3159dcc554310924ba691631733f09a8e' })), h("div", { key: '79da90c337b0c566013db7c88bd34901862edb63', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '6b183536a98528a1f01978ea9ed72538c3dcc99a', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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: {