@prolibu-suite/cobalt-core 0.10.0 → 0.10.2

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

@@ -41,10 +41,13 @@
   color: var(--co-semantic-on-primary);
   border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
+/* Knobs (heredan a través del shadow, mismo mecanismo y nombres que
+   --co-icon-button-bg/-color/-border): un consumidor con spec propia cambia la
+   superficie de la variante clara SIN un ::part de color. Defaults = look del DS. */
 .co-button--secondary {
-  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
-  color: var(--co-semantic-on-secondary);
-  border-color: var(--co-semantic-border-subtle);
+  background: color-mix(in srgb, var(--co-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);
+  color: var(--co-button-color, var(--co-semantic-on-secondary));
+  border-color: var(--co-button-border, var(--co-semantic-border-subtle));
 }
 .co-button--stroke {
   background: color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);
@@ -209,6 +212,15 @@
   flex-shrink: 0;
 }
 
+/* The glyph must not grow the line box. ICON_SIZE is font-size + 2 in every
+   size (l 20/18, m 18/16, s 16/14, xs 14/12) and the label sits at line-height 1,
+   so an icon-left button came out 2px taller than its text-only sibling in the
+   same row (34 vs 32 on square/s next to a co-toggle-button, 2026-09-17). Pull
+   the 1px overshoot per side back: text-only and icon buttons share one height. */
+.co-button > co-icon {
+  margin-block: -1px;
+}
+
 /* ─── FALLBACK: no backdrop-filter → solid, legible surfaces ──── */
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-button--primary { background: var(--co-semantic-surface-primary); }

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

@@ -9,11 +9,17 @@
   --co-calendar-day-size: 44px;
 }
 
+/* Knobs de layout (custom properties: cruzan el shadow, los fija el HOST):
+   --co-calendar-width      ancho del calendario (default: el de sus 7 celdas fijas)
+   --co-calendar-col        track de cada columna (default: la celda fija)
+   --co-calendar-day-width  ancho del botón de día (default: la celda fija)
+   co-date-range-picker los pone en 100% / minmax(celda, 1fr) / 100% para que el mes
+   llene el panel en vez de dejar el sobrante en blanco (reporte 2026-09-16). */
 .co-calendar {
   display: flex;
   flex-direction: column;
   gap: var(--co-spacing-sm);
-  width: max-content;
+  width: var(--co-calendar-width, max-content);
 }
 
 /* ── Header ──────────────────────────────────────────────── */
@@ -63,7 +69,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--co-spacing-xs);
-  width: calc(var(--co-calendar-day-size) * 7 + 12px);
+  width: var(--co-calendar-width, calc(var(--co-calendar-day-size) * 7 + 12px));
   padding-top: var(--co-spacing-xs);
 }
 
@@ -134,7 +140,7 @@
 
 .co-calendar__row {
   display: grid;
-  grid-template-columns: repeat(7, var(--co-calendar-day-size));
+  grid-template-columns: repeat(7, var(--co-calendar-col, var(--co-calendar-day-size)));
   gap: 2px;
 }
 
@@ -156,7 +162,7 @@
 
 /* ── Day cell ────────────────────────────────────────────── */
 .co-calendar__day {
-  width: var(--co-calendar-day-size);
+  width: var(--co-calendar-day-width, var(--co-calendar-day-size));
   height: var(--co-calendar-day-size);
   display: inline-flex;
   align-items: center;

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

@@ -307,7 +307,11 @@ export class CoCalendar {
         const monthLabel = getMonthLabel(this.viewYear, this.viewMonth, this.locale, 'long');
         const shortLabels = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const longLabels = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
-        const matrix = getMonthMatrix(this.viewYear, this.viewMonth, this.firstDayOfWeek);
+        // Solo las semanas que tocan el mes: la matriz trae siempre 6, y un mes de
+        // 5 semanas cerraba con una fila ENTERA del mes siguiente en gris, que se
+        // leía como una franja en blanco al pie del panel (reporte 2026-09-16). El
+        // teclado no la necesita: moveFocus ya cambia de mes al salir de él.
+        const matrix = getMonthMatrix(this.viewYear, this.viewMonth, this.firstDayOfWeek).filter((week) => week.some((cell) => cell.inMonth));
         return (h("div", { class: "co-calendar__grid", part: "grid", role: "grid", "aria-label": monthLabel, onKeyDown: this.handleGridKeyDown }, h("div", { class: "co-calendar__row co-calendar__row--dow", role: "row" }, shortLabels.map((lbl, i) => (h("span", { class: "co-calendar__dow", role: "columnheader", "aria-label": longLabels[i] }, lbl)))), matrix.map((week) => (h("div", { class: "co-calendar__row", role: "row" }, week.map((cell) => {
             const disabled = this.isDayDisabled(cell.value);
             const isFocused = compareYMD(cell.value, this.focused) === 0;
@@ -363,7 +367,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '795529e38ec7b72934d786b9dcaa5046e73fbde8', class: "co-calendar", part: "root" }, h("div", { key: 'f409d1670f4f649d8e91f21915e0008d9ed330ac', class: "co-calendar__header", part: "header" }, h("button", { key: '23a4f12ec30cd86e49661daf755a6d2e23b209ad', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'ce6b736011e3ed13781cac180fe4542ec38c75c3', name: "caret-left", size: 16 })), h("button", { key: 'b1fcbb3d09e33b0b462bc278b46e14a348f9f9a9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'dbe1800ed74e234dc8f334183e504d19d8ab9d74', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'bdbda5999d20cb799aeabe48ebad6e8a4d7d89ff', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'ec2e268c38d04d1f298cfb12d29647b530b03a94', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '3b9f57fa8513746cb3133d80d574a0fafbc8b31e', class: "co-calendar", part: "root" }, h("div", { key: '6b3b0f8d1c582abbbf04c8b936486bd1e3fedaec', class: "co-calendar__header", part: "header" }, h("button", { key: '57f854f84162a5b09119385339c9993ee25cef72', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '772ec0dfb48dfee33d506549e68ab7598ec0cf00', name: "caret-left", size: 16 })), h("button", { key: 'b9f3851082fbbe2d5f696dd0a51c442410b15fa1', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '3f660d39a851c97f299e6a6cc8c0ad8b5ed4ee7f', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '6ac9d1af5f3dc36a34e94e129ab2db313dee74d2', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'c8c962be3435e108f81968f6dde5f6f481c40733', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,17 +43,17 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.checkedColor && isOn ? { background: this.checkedColor } : undefined;
-        return (h("div", { key: 'ba8053a262557bdfc35e16d743158b26e1783932', class: {
+        return (h("div", { key: 'cfcbd567066331d7751064f857407a8f9d56d386', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: 'fa4f7cddb61bce3636c949bba3b3cd0b681d3744', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, class: {
+            }, onClick: this.handleClick }, h("span", { key: '21c39833a43324e47718cc83ba74253f00e67e82', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || this.ariaLabelText || '', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, h("svg", { key: '3eb81bcb492a7ef932538542ddb37cb0143596e4', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '1affb22b56c8a907d5c98bd4bba88dc52d19fb76', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'ad29a5205bc73f358333f648847e34ceedcb9800', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '09b729390669959e52c78a54b426b56c22267bde', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, h("svg", { key: '6e49dd81e78da092340b1cbdb5c45ee6e345fb3c', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dbcadf848fb8cb64acea875fb03186258210c43f', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '0b58a11353c3d8b8249e5852933f290cd63f0705', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: 'e1a4beabf2b472aeff1fe5ecd5bcb458e949ee11', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -168,6 +168,25 @@ export class CoCheckbox {
                 "reflect": false,
                 "attribute": "label"
             },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name when there is NO visible `label` (icon-less row toggles).\nSame `ariaLabelText` precedent as co-button; `label` wins when present.\nAn `aria-label` on the host never reaches the inner role=\"checkbox\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -231,7 +231,7 @@ export class CoCheckboxGroup {
                     "references": {
                         "CheckboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
                             "id": "src/components/co-checkbox-group/co-checkbox-group.tsx::CheckboxOption"
                         }
                     }

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -306,6 +306,12 @@ export class CoColorPicker {
         };
         this.handleGridKeyDown = (e) => {
             var _a;
+            // La grilla es el único control del panel que es un `<div>`: no hereda
+            // `disabled` del DOM como el range o el input, así que el guard tiene que
+            // ser explícito. Sin él, deshabilitar con el panel abierto dejaba la
+            // navegación por flechas viva y Enter commiteando sobre un campo apagado.
+            if (this.disabled)
+                return;
             // `presetGroups` re-parsea el JSON de `presets` y remapea en CADA lectura, y
             // todos los consumidores reales pasan presets custom por prop: se resuelve
             // UNA vez por tecla y se pasa por parámetro, no dos veces por getter.
@@ -531,8 +537,10 @@ export class CoColorPicker {
      *    que `this.hsv` llega `undefined` al primer render y el destructuring de
      *    `renderArea` tira). Los otros @State del componente lo toleraban porque
      *    `undefined` es falsy justo donde se usan.
-     * Sin hex válido el estado arranca en negro, que es lo que pinta el área
-     * mientras no hay color elegido.
+     * Sin hex válido el estado arranca en `EMPTY_HSV` —rojo puro, el vértice
+     * VIVO—, no en negro: ver su docstring, que explica por qué el vértice negro
+     * dejaría dos de los tres controles sin poder producir color. Es un seed de
+     * display; `value` sigue vacío y el trigger sigue mostrando el placeholder.
      */
     componentWillLoad() {
         const parsed = hexToHsv(this.value || '');
@@ -694,6 +702,11 @@ export class CoColorPicker {
         }
     }
     handleSwatchClick(hex) {
+        // Mismo guard que el resto de los controles del panel: el host puede
+        // deshabilitar el campo CON EL PANEL ABIERTO, y un swatch deshabilitado no
+        // commitea. El `pointer-events:none` del CSS tapa el mouse, no el teclado.
+        if (this.disabled)
+            return;
         // Elegir un preset es un commit como cualquier otro: la asignación y el
         // emit viven en `commit`, no duplicados acá (si no, el swatch dejaría el
         // HSV del color anterior y el área abriría en el color equivocado).
@@ -799,7 +812,16 @@ export class CoColorPicker {
         h("div", { class: "co-color-picker__grid-group", key: g.from, role: g.label ? 'group' : 'presentation', "aria-label": g.label }, g.items.map((preset, j) => {
             const i = g.from + j;
             const selected = preset.value.toUpperCase() === (this.value || '').toUpperCase();
-            return (h("div", { key: preset.value, role: "option", "aria-selected": selected ? 'true' : 'false', "aria-label": preset.name, tabIndex: i === this.focusedIndex ? 0 : -1, class: {
+            return (h("div", { key: preset.value, role: "option", "aria-selected": selected ? 'true' : 'false', "aria-label": preset.name,
+                // El `aria-label` cubre al lector de pantalla; al usuario con
+                // mouse no le dice nada. Sin el `title`, la paleta por default
+                // deja dos grises contiguos ("Humo" y "Hueso") indistinguibles
+                // salvo por el pixel de color. El tooltip nativo es la
+                // convención de este design system para celdas de grilla
+                // —co-emoji-picker:419 hace exactamente esto, y el propio
+                // panel ya lo usa en gotero y copiar—; la regla que lo prohíbe
+                // es de suite-v2, no de cobalt core.
+                title: preset.name, tabIndex: i === this.focusedIndex ? 0 : -1, class: {
                     'co-color-picker__grid-item': true,
                     'co-color-picker__grid-item--selected': selected,
                     // Un swatch claro se pierde contra el panel: se decide por
@@ -922,12 +944,20 @@ export class CoColorPicker {
             this.hsv = EMPTY_HSV;
         if ((this.value || '').toUpperCase() === (target || '').toUpperCase())
             return;
-        // SIN sellar: acá el @Watch sí tiene que re-derivar el HSV, para que el área
-        // vuelva al color commiteado y no se quede en el que se abandonó.
+        // SIN sellar a mano: el @Watch re-deriva el HSV —que es lo que hace volver
+        // el área al color commiteado en vez de quedarse en el abandonado— y sella
+        // `emitted` él mismo, ANTES del guard de parseo, así que también cubre el
+        // caso en que `target` no es un hex (nunca se commiteó nada y el campo
+        // vuelve a vacío).
+        //
+        // Acá vivía un `this.emitted = target` con un comentario que describía el
+        // orden VIEJO de `syncFromValue` (sellado gateado por el parseo). Desde que
+        // el sellado subió, la línea era muerta por dos vías: o el @Watch ya la
+        // dejó idéntica, o entró por su guard de eco —que compara contra `emitted`—
+        // y entonces `emitted` ya era `target` salvo por mayúsculas, que es el único
+        // lector que tiene. Medido: una sonda en esa línea sobre la suite entera la
+        // alcanza cuatro veces y las cuatro con `emitted === target` estricto.
         this.value = target;
-        // El @Watch no sella cuando `target` no es un hex (nunca se commiteó nada y
-        // el campo vuelve a vacío), así que se sella acá.
-        this.emitted = target;
         // El preview se anunció por `coInput`; retirarlo también. Un host que
         // previsualiza en vivo se quedaría si no con el color que nadie eligió.
         this.coInput.emit(target);
@@ -965,12 +995,12 @@ export class CoColorPicker {
     render() {
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: 'd0069249895cc3cf148c963f149ff7b3a15ab939', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'e28d265aefc19f7e86ed36bfbfe6b6ec537d1ca2', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '0aff2dde3002e1c9a79f2c3a385b64d33dc3418c', required: this.required }))), h("co-popover", { key: 'edac2d09e0d15c2f09dfff2ea0a2b95f5384d8de', open: this.isOpen, placement: "bottom-start",
+        return (h("div", { key: '5e4239ff9ef0dc3f15004898d2d891f8d231e95d', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '003a893c3c840cd03d87c4291795499ac80b8b73', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '4c14eaf668b0677b91b23a00f001ffaa4c21f5c5', required: this.required }))), h("co-popover", { key: 'f4a489f77c2d629ea1d9b69786cfad0f95d5422b', open: this.isOpen, placement: "bottom-start",
             // Sin `matchWidth`: el panel tiene ancho INTRÍNSECO (grilla de 8
             // swatches fijos de 32px). Copiar el ancho del trigger achica los
             // tracks bajo 32px con un campo angosto (media columna de un modal) y
             // los swatches desbordan el card — guard: panel-width.spec.
-            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '98c2e3c5ed50f8cc869c1cf791ddce85e8887b8e', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '65e49a6246c71b6366f7907c715c64259c30be46', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'd8e6e852383ec925c4336f9b49a69e73d88e2234', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '2893b57d82d7ac2edc4e3bd8eac266fdc6cbfba0', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: 'ca583c8033afaafa5bdd59ccd63e711eaf02e6df', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'aca2fd8186658e7d4e13ab67dc7a6e93c2fd8b89', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'e8e3cdf72353a1f5fb8b53fe725389386c7d75ea', class: "co-color-picker__helper-text" }, this.helperText)))));
+            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '229e0095d6b6a723e77cf0d001d780cf51116851', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '9267f104b7f0542653038ef381fb81a7f7f0188e', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '64efb900a60576022b3f487db56380973d2934c9', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '22abcb6c79531f41a6655fc48320e4c108a33049', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '901b7094f7da8c09ea25cad568eda8d5fcaf2d6e', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'fb341f791466f133f6a6c4bd04a8dd71c519c7c0', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '0ecfc7d46a07c741d42b59660979559fb78117df', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -531,7 +531,7 @@ export class CoCombobox {
                     "references": {
                         "ComboboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-combobox/co-combobox.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-combobox/co-combobox.tsx",
                             "id": "src/components/co-combobox/co-combobox.tsx::ComboboxOption"
                         }
                     }

package/dist/collection/components/co-command-search/co-command-search.js

@@ -246,7 +246,7 @@ export class CoCommandSearch {
                     "references": {
                         "CommandItem": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-command-search/co-command-search.tsx",
                             "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
                         }
                     }

package/dist/collection/components/co-data-table/co-data-table.css

@@ -153,8 +153,18 @@ co-data-table {
   color: var(--co-semantic-text-muted);
 }
 
-.co-data-table__th-label {
+/* Wrapper co-tooltip[block] del label: toma el track flex que antes ocupaba el
+   label (min-width:0 = deja truncar; sus hermanos pin/sort/funnel llevan
+   flex-shrink:0). El tooltip sale del host (tsx), gateado por truncado. */
+.co-data-table__th-tip {
   flex: 1;
+  min-width: 0;
+}
+
+/* Dentro del trigger del tooltip el label ya no es flex item: block explícito
+   o el ellipsis (overflow/text-overflow solo aplican a cajas block) no engancha. */
+.co-data-table__th-label {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -208,6 +218,16 @@ co-data-table {
   line-height: 0; /* el co-checkbox inline mete baseline-gap y estira el header a 43 */
 }
 
+/* Sin separador entre la casilla y la primera columna: la selección no es una
+   columna de datos y su borde derecho dibujaba un recuadro alrededor del check
+   (pedido de diseño 2026-09-16). Doble clase para ganarle al `border-right` de
+   las reglas base .co-data-table__th / .co-data-table__td, que van DESPUÉS en
+   este archivo. */
+.co-data-table__th.co-data-table__th--checkbox,
+.co-data-table__td.co-data-table__td--checkbox {
+  border-right: none;
+}
+
 /* ─── STICKY COLUMNS ───────────────────────────────────────── */
 .co-data-table__th--sticky,
 .co-data-table__td--sticky {
@@ -268,6 +288,42 @@ co-data-table {
   transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
+/* Tinte de hover/selected de las celdas sticky: un overlay ANIMABLE.
+   La fila pinta su tinte translúcido en el <tr> y lo transiciona
+   (background-color, duration-fast). Una celda sticky lleva base opaca —no
+   puede dejar ver lo que scrollea debajo—, así que el tinte va compuesto
+   ENCIMA de esa base. Componerlo con `background-image` (gradiente) no es
+   animable: la columna fijada prendía y apagaba de golpe mientras el resto de
+   la fila se desvanecía (2026-09-07). `::before` con opacity/background-color
+   y la MISMA transición que la fila. z-index -1 dentro del stacking context
+   de la celda (position:sticky + z-index) = encima de su base opaca, debajo
+   de su contenido. Los tokens espejan los de .co-data-table__row de abajo. */
+.co-data-table__td--sticky::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-color: var(--co-semantic-surface-hover);
+  opacity: 0;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-data-table__row:hover .co-data-table__td--sticky::before {
+  opacity: 1;
+}
+
+.co-data-table__row--selected .co-data-table__td--sticky::before {
+  opacity: 1;
+  background-color: var(--co-color-opacity-negro-4);
+}
+
+.co-data-table__row--selected:hover .co-data-table__td--sticky::before {
+  background-color: var(--co-color-opacity-negro-8);
+}
+
 /* ─── RESIZE HANDLE ─────────────────────────────────────────── */
 .co-data-table__resize-handle {
   position: absolute;
@@ -319,7 +375,12 @@ co-data-table {
      wrapper, never on the cell itself. */
   height: 48px;
   padding: 0 var(--co-spacing-md);
-  background: inherit;
+  /* Transparente, NUNCA `inherit`: el hover/selected es un tinte translúcido
+     pintado en el <tr>. Con `inherit` cada celda normal lo repintaba encima
+     (doble tinte, ~15%) mientras las sticky —base opaca + un gradiente del
+     mismo tinte— quedaban al 8%: la columna fijada se veía más clara que el
+     resto de la fila en hover. Guard: co-data-table-cell-background-guard.test.ts */
+  background: transparent;
   border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   vertical-align: middle;

package/dist/collection/components/co-data-table/co-data-table.js

@@ -1,3 +1,4 @@
+import { measureTruncatedHeaders } from "./headerTruncationLogic";
 import { h } from "@stencil/core";
 import { edgeAutoScrollSpeed, resizeWidth } from "../../utils/columnResize";
 /**
@@ -50,6 +51,9 @@ export class CoDataTable {
         this.parsedFilteredFields = [];
         this.parsedIndirectFields = [];
         this.columnWidths = new Map();
+        /** Columnas cambiadas → re-medir tras el render (un cambio de texto con el
+         *  mismo ancho no dispara el ResizeObserver). */
+        this.headerMeasurePending = false;
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
@@ -71,6 +75,7 @@ export class CoDataTable {
     }
     /* ─── WATCHERS ──────────────────────────────────────────── */
     parseColumns() {
+        this.headerMeasurePending = true;
         try {
             const cols = typeof this.columns === 'string' ? JSON.parse(this.columns) : this.columns;
             this.parsedColumns = cols;
@@ -119,13 +124,39 @@ export class CoDataTable {
         }
     }
     componentWillLoad() {
+        // Recursos por instancia acá y no en inicializadores de campo: la instancia
+        // envuelta de @stencil/vitest los omite (ver nota en co-data-table.spec.tsx).
+        this.headerLabelEls = new Map();
+        this.truncatedHeaders = {};
         this.parseColumns();
         this.parseRows();
         this.parseSelectedKeys();
         this.parseFilteredFields();
         this.parseIndirectFields();
     }
+    componentDidLoad() {
+        // Tooltip del header SOLO cuando el label trunca (patrón co-list-item). El
+        // estado tiene que estar correcto ANTES del hover: Stencil re-renderiza en
+        // rAF, así que una medida en el pointerenter del <th> llega después de que
+        // co-tooltip leyó `disabled` al agendar su show (verificado headless
+        // 2026-09-07). Un ResizeObserver re-mide cuando el label cambia de ancho
+        // (resize de columna, panel que se muestra, viewport) — y en la carga.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.headerResizeObserver = new ResizeObserver(() => this.measureHeaderTruncation());
+            this.headerLabelEls.forEach((el) => this.headerResizeObserver.observe(el));
+        }
+        this.measureHeaderTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.headerResizeObserver = undefined;
+    }
     componentDidRender() {
+        if (this.headerMeasurePending) {
+            this.headerMeasurePending = false;
+            this.measureHeaderTruncation();
+        }
         // Auto-scroll parity: the resize tick grew the column (async @State render)
         // and owes the container the same px of scroll. Here the DOM already has
         // the new table width, so the advance can't clamp — width and scroll land
@@ -277,6 +308,29 @@ export class CoDataTable {
     handleRowDblClick(row, index) {
         this.coRowDblClick.emit({ row, index });
     }
+    /** Escritura guardada: misma referencia = sin re-render de la tabla. */
+    measureHeaderTruncation() {
+        const next = measureTruncatedHeaders(this.truncatedHeaders, this.headerLabelEls);
+        if (next !== this.truncatedHeaders)
+            this.truncatedHeaders = next;
+    }
+    /** ref del label: registra/observa al montar, limpia al desmontar (ref null). */
+    registerHeaderLabel(field, el) {
+        var _a, _b, _c;
+        const prev = this.headerLabelEls.get(field);
+        if (el) {
+            if (prev === el)
+                return;
+            if (prev)
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(prev);
+            this.headerLabelEls.set(field, el);
+            (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        }
+        else if (prev) {
+            (_c = this.headerResizeObserver) === null || _c === void 0 ? void 0 : _c.unobserve(prev);
+            this.headerLabelEls.delete(field);
+        }
+    }
     handleColumnPin(field, e) {
         e.stopPropagation();
         this.coColumnPin.emit({ field });
@@ -386,7 +440,7 @@ export class CoDataTable {
                 : undefined }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
                 'co-data-table__pin-icon': true,
                 'co-data-table__pin-icon--active': !!col.sticky,
-            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("span", { class: "co-data-table__th-label" }, col.label), this.renderSortIcon(col))) : (h("span", { class: "co-data-table__th-label" }, col.label)), col.filterable && (h("span", { class: {
+            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label)), this.renderSortIcon(col))) : (h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label))), col.filterable && (h("span", { class: {
                 'co-data-table__filter-icon': true,
                 'co-data-table__filter-icon--active': this.parsedFilteredFields.includes(col.field),
                 'co-data-table__filter-icon--indirect': !this.parsedFilteredFields.includes(col.field) && this.parsedIndirectFields.includes(col.field),
@@ -421,12 +475,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '6ba1f3bb555252c55246c8af73b8ce08610e93b0', class: {
+        return (h("div", { key: '6f71533676a2c66ae46b1ee9940b405744cef174', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, h("div", { key: '69bc61a98f48ac06006d9b5ab132abf15bbeeb64', class: "co-data-table__scroll" }, h("table", { key: 'bc7627b050900ca6c8887981e47368bfb7f181ea', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'fc98863e680b660844ec968af6ebc645160ee32e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
+            } }, h("div", { key: '8176dca34858e32ba2ce008ac44cf444ea952f08', class: "co-data-table__scroll" }, h("table", { key: 'f285815728244a7161d91dbed6ca87b158db4de6', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: '97f4ed9020a7bdb8b262313a10451e9aff754a8e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -450,7 +504,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }
@@ -815,6 +869,7 @@ export class CoDataTable {
             "parsedFilteredFields": {},
             "parsedIndirectFields": {},
             "columnWidths": {},
+            "truncatedHeaders": {},
             "resizingColumn": {},
             "resizeStartX": {},
             "resizeStartWidth": {}

package/dist/collection/components/co-data-table/headerTruncationLogic.js

@@ -0,0 +1,34 @@
+/**
+ * Lógica pura del tooltip de header truncado (sin DOM real: testeable en vitest).
+ * Misma regla que co-list-item y `useEllipsisTooltip` de suite-v2: +1px de
+ * tolerancia porque el navegador redondea a enteros y 1px de más NO es corte.
+ */
+export function isEllipsisTruncated(node) {
+    return !!node && node.scrollWidth > node.clientWidth + 1;
+}
+/**
+ * Próximo mapa field → truncado. Devuelve el MISMO objeto si nada cambió (un
+ * @State de Stencil se compara por referencia: escribir siempre re-renderiza la
+ * tabla entera en cada hover de header).
+ */
+export function nextTruncatedHeaders(prev, field, truncated) {
+    if (!!prev[field] === truncated)
+        return prev;
+    return Object.assign(Object.assign({}, prev), { [field]: truncated });
+}
+/**
+ * Mide TODOS los labels registrados (field → nodo) en una pasada y devuelve el
+ * próximo mapa; la MISMA referencia si ningún field cambió. Un field que ya no
+ * está registrado (columna quitada) desaparece del mapa.
+ */
+export function measureTruncatedHeaders(prev, labels) {
+    let changed = Object.keys(prev).some((field) => !labels.has(field));
+    const next = {};
+    labels.forEach((node, field) => {
+        const truncated = isEllipsisTruncated(node);
+        next[field] = truncated;
+        if (!!prev[field] !== truncated)
+            changed = true;
+    });
+    return changed ? next : prev;
+}

package/dist/collection/components/co-date-range-picker/co-date-range-picker.css

@@ -129,6 +129,19 @@
   align-items: flex-start;
 }
 
+/* El calendario llena el ancho del panel. Ese ancho lo fija la fila de los dos campos de
+   fecha, y el calendario era `max-content` (7 celdas fijas): sin presets quedaban ~170px en
+   blanco a la derecha (reporte 2026-09-16). Knobs de co-calendar: ancho fluido, columnas que
+   reparten el sobrante y día a ancho de columna (la banda del rango sigue continua; el día
+   es un rectángulo redondeado, no un círculo). En touch va centrado con celdas de 44px. */
+.co-date-range-picker__body:not(.co-date-range-picker__body--touch) co-calendar {
+  flex: 1;
+  min-width: 0;
+  --co-calendar-width: 100%;
+  --co-calendar-col: minmax(var(--co-calendar-day-size), 1fr);
+  --co-calendar-day-width: 100%;
+}
+
 /* Mobile bottom-sheet: stack presets (horizontal scroll) above the calendar. */
 .co-date-range-picker__body--touch {
   flex-direction: column;

package/dist/collection/components/co-date-range-picker/co-date-range-picker.js

@@ -271,6 +271,8 @@ export class CoDateRangePicker {
             return `${f} → ${to}`;
         if (f)
             return `${f} → …`;
+        if (to)
+            return `… → ${to}`; // solo fin (p. ej. un ticket con vencimiento y sin inicio): no ocultar el dato
         return this.placeholder || t.setDate; // `||`: empty string → localized default
     }
     presetItems(t) {
@@ -1039,7 +1041,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }
@@ -1060,7 +1062,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }