@prolibu-suite/cobalt-core 0.9.6 → 0.10.0

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

@@ -1,19 +1,117 @@
 /**
- * Default color presets derived from Cobalt design tokens (base.json).
- * Uses primary colors + secondary-100 (full saturation, best contrast).
- * Names are English by default — consumers can override with translated presets.
+ * Normaliza lo que llega por la prop `presets` a la forma interna, dejando
+ * anotado si la `key` vino declarada o se sintetizó.
+ *
+ * `ColorPreset.key` es OPCIONAL porque el tipo es superficie pública (lo
+ * re-exporta `components.d.ts`): exigirla rompería a todo host que hoy pasa
+ * `[{ name, value }]`. Puertas adentro la damos por garantizada, así que se
+ * rellena acá. Un hex suelto no tiene identidad traducible: su propio hex
+ * ES su identidad.
+ *
+ * Vive acá y no en el componente porque es el ÚNICO lugar que sintetiza keys, y
+ * `splitPaletteGroups` —su consumidor— depende de esa marca: separarlos deja el
+ * invariante a un import de distancia de romperse en silencio.
+ */
+export const resolvePreset = (p) => {
+    var _a;
+    if (typeof p === 'string')
+        return { key: p, name: p, value: p, synthesizedKey: true };
+    // La key declarada se conserva tal cual; si no vino, la cadena de siempre.
+    if (p.key != null)
+        return { key: p.key, name: p.name, value: p.value };
+    return { key: (_a = p.name) !== null && _a !== void 0 ? _a : p.value, name: p.name, value: p.value, synthesizedKey: true };
+};
+/**
+ * Paleta por default: 5 neutros + los 12 de marca (base.json).
+ * Los nombres vienen en inglés; el consumidor los traduce POR `key` — nunca
+ * duplicando la lista de valores, que fue lo que hizo derivar a FieldColor.vue.
+ *
+ * Sin blanco puro a propósito (spec §2): una etiqueta blanca desaparece sobre
+ * el fondo blanco. Los encabezados de documento lo pasan por la prop `presets`.
+ *
+ * Los hex son literales porque son DATA del picker, no estilo.
  */
 export const DEFAULT_PRESETS = [
-    { name: 'Green', value: '#02A270' },
-    { name: 'Yellow', value: '#FDBF00' },
-    { name: 'Blue', value: '#2563EB' },
-    { name: 'Pink', value: '#F32A73' },
-    { name: 'Red', value: '#EB1E1E' },
-    { name: 'Orange', value: '#F0821E' },
-    { name: 'Teal', value: '#00AFAF' },
-    { name: 'Light blue', value: '#00BEE6' },
-    { name: 'Electric blue', value: '#000AFF' },
-    { name: 'Violet', value: '#5F4BD7' },
-    { name: 'Burgundy', value: '#811137' },
-    { name: 'Olive', value: '#AAB43C' },
+    { key: 'black', name: 'Black', value: '#1F1C1B' },
+    { key: 'gray', name: 'Gray', value: '#585858' },
+    { key: 'silver', name: 'Silver', value: '#C4C4C4' },
+    { key: 'smoke', name: 'Smoke', value: '#E3E3E3' },
+    { key: 'bone', name: 'Bone', value: '#F7F6F0' },
+    { key: 'green', name: 'Green', value: '#02A270' },
+    { key: 'olive', name: 'Olive', value: '#AAB43C' },
+    { key: 'yellow', name: 'Yellow', value: '#FDBF00' },
+    { key: 'orange', name: 'Orange', value: '#F0821E' },
+    { key: 'red', name: 'Red', value: '#EB1E1E' },
+    { key: 'pink', name: 'Pink', value: '#F32A73' },
+    { key: 'burgundy', name: 'Burgundy', value: '#811137' },
+    { key: 'violet', name: 'Violet', value: '#5F4BD7' },
+    { key: 'electricBlue', name: 'Electric blue', value: '#000AFF' },
+    { key: 'blue', name: 'Blue', value: '#2563EB' },
+    { key: 'lightBlue', name: 'Light blue', value: '#00BEE6' },
+    { key: 'teal', name: 'Teal', value: '#00AFAF' },
 ];
+/**
+ * Los 5 primeros son neutros. Frontera ÚNICA: la grilla agrupa por acá y el
+ * seed sortea del resto. No repetir el `5` a mano en ningún otro lado.
+ */
+export const NEUTRAL_PRESET_KEYS = ['black', 'gray', 'silver', 'smoke', 'bone'];
+/**
+ * Sólo las de marca, derivadas de la frontera. El seed aleatorio al CREAR un
+ * registro sortea de acá: nacer con una etiqueta gris es peor que el estado
+ * anterior.
+ */
+export const BRAND_PRESET_KEYS = DEFAULT_PRESETS
+    .filter((p) => !NEUTRAL_PRESET_KEYS.includes(p.key))
+    .map((p) => p.key);
+// Índices de membresía, armados UNA vez a nivel de módulo: `splitPaletteGroups`
+// corre en un getter que el render lee en cada pasada.
+const NEUTRAL_KEYS = new Set(NEUTRAL_PRESET_KEYS);
+const BRAND_KEYS = new Set(BRAND_PRESET_KEYS);
+/**
+ * Parte una lista de presets en [neutros, marca], o devuelve `null` si no hay
+ * una partición que signifique algo.
+ *
+ * Se decide por MEMBRESÍA de `key`, nunca por identidad de referencia contra
+ * `DEFAULT_PRESETS`. La identidad es frágil por definición —dos arrays con el
+ * mismo contenido se comportan distinto— y ya costó un bug real: `FieldColor.vue`
+ * re-serializa la paleta para colgarle los nombres traducidos, así que llegaba
+ * como un array nuevo, caía en la rama "custom" y los `role="group"` +
+ * `aria-label` del spec §4 no se renderizaban NUNCA en la aplicación. La a11y
+ * existía sólo en los tests, que sí pasaban la paleta por identidad.
+ *
+ * Devuelve `null` en tres casos, y los tres terminan en un grupo único SIN
+ * rótulo:
+ * - alguna `key` la sintetizamos nosotros (`synthesizedKey`): el host no declaró
+ *   nuestra paleta, y como doce de las keys son nombres de color CSS, mirar sólo
+ *   el texto haría pasar por paleta nuestra a unos strings sueltos;
+ * - alguna `key` declarada es desconocida (paleta custom del host): no hay nada
+ *   semántico que declarar;
+ * - falta alguno de los dos lados: un grupo solo no particiona nada, así que
+ *   rotularlo anunciaría al lector de pantalla una frontera que no existe.
+ *
+ * ORDEN (decisión explícita): cuando la paleta se reconoce, se re-emite en orden
+ * canónico —neutros primero, marca después—, conservando el orden relativo del
+ * host DENTRO de cada lado. No es evitable: dos grupos contiguos no se pueden
+ * renderizar respetando un orden intercalado. Entre perder la agrupación
+ * semántica (spec §4) y perder un orden que el host no pudo curar sin adoptar
+ * antes nuestro vocabulario de keys, gana la agrupación. `flatPresets` y
+ * `focusedIndex` derivan de `presetGroups`, así que las flechas recorren el
+ * orden RENDERIZADO y no se desincronizan.
+ */
+export function splitPaletteGroups(presets) {
+    const neutrals = [];
+    const brand = [];
+    for (const p of presets) {
+        if (p.synthesizedKey)
+            return null;
+        if (NEUTRAL_KEYS.has(p.key))
+            neutrals.push(p);
+        else if (BRAND_KEYS.has(p.key))
+            brand.push(p);
+        else
+            return null;
+    }
+    if (!neutrals.length || !brand.length)
+        return null;
+    return { neutrals, brand };
+}

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

@@ -165,13 +165,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: '6407a41a8e03d70e54cfd378747396a413eb0a11', class: {
+        return (h("div", { key: 'bf11db2386df7088dfcec622ee02ce527fcef54f', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '86850ac9d0162b34369c70424549d101c9b72cc3', class: "co-column-picker__labels" }, this.label && h("label", { key: 'c05eccf88052fdcf8b593282daa1fc0f9a8bab1e', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'fe64f07fb1238d51506575c679bb33c7797c2edc', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'cb28e40aaf843c96a2649efef1e3803cde627345', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '37ab85bf708a3ba34f5ddb1ab416600b0d0be072', class: "co-column-picker__search" }, h("co-icon", { key: '8b10c859742279f5e11d764d6012429259bdec19', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '7f52dbbcc524bf78424cb85396ad62b68b16dac5', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: 'ddbd0996534dcda27de900019d10b12eeb352d8d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'f4d997c88423b664f63fcc09acf5366f735f3a57', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '0e6ee3c9351c48c10affd4e2146cf9939a06971d', class: "co-column-picker__toolbar" }, h("button", { key: '101167f8a9da5f47dec86a94f9ffa0d4bb2edfbb', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '6e00fd6f1be5f2bc223dbb1b6800916d0872b7a2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '9446309b1a737059936a3fecdbbca37677544c49', class: "co-column-picker__toolbar-sep" }), h("button", { key: '7a014ee36386286cee3b97d1a67cafe8eca60ac4', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '09a58d24e5fef162b9c8452d905e36c89b5fb0a9', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '01468f7c6140081183cccb1c7ae063f8bbafad5e', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '94d9805ce88fed580da36d122d134c4f445df03f', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '95aab5f3408bf840d0e27f6e1de3908b6a9dd3c6', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '27533140acd117f09e981f307f0c39d741b92515', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7992e3f214985653e673f64f5b85e07be5298cc7', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '01eb7d766027a9c0cff30f91be730f3dbb4b2443', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '27543398ce1e3fc9e0f08ee2e4d59167e4e79894', class: "co-column-picker__labels" }, this.label && h("label", { key: '7051f1b7c44c7f0da7ae0e741a14cbe8a3f3ba26', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '17d011a13a7f5f7c1c44f3738f15b3438180fc7b', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '4dcb6cb4289630a8238e53010aec69ec0cfc2e2a', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '0233bff4eeb82fe7fdf91aad530c97fc6dcac06f', class: "co-column-picker__search" }, h("co-icon", { key: '64d1e6fc90c2380e509ca750854a40e416a902c1', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '60e75c92d5fa2991542063e5add78d8b1c79861b', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: 'c894d1f8cd91368d9662e63f288384a111b7ffe0', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'ea9d732d1c828fb3146046418d6b5d8dbc5c3c1b', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '1aa8fde242c2b5d531411d67ef7ea96da4b0dbef', class: "co-column-picker__toolbar" }, h("button", { key: 'ce0bf82e65376e0eef1d83ee2e977617116e53ea', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '7e418708aa8234f8e60ffd64d1ef7aad5baa5c98', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '5f1d2021e7b7ac9d51b4fb4f530a52204558818b', class: "co-column-picker__toolbar-sep" }), h("button", { key: '67a4b15e8b7ca43942866b502c2e28da9edb48d2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'c832eff1b36989819ad1b89c30c55398877c33b3', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '1b0644a54e796cb85280850375dcade772a35648', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '4292ea60a8c533dc67c57b029dee1c19403d68ed', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '9b06012caa39e9704698a77981b994d31c1d60e3', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'c6c169d84d6b495101741df8012307cee8ada693', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e5e6d35e4b5356dbe1880742fe3c35ee9d845ae6', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'e3a626266f8f68277ae8dbfa2d4194a57855af8d', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-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/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-combobox/co-combobox.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/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/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/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.js

@@ -450,7 +450,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }

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

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: '185e1d7a9d69e1bacd7aeb697c70e9cefae6057d', class: "co-pagination", part: "pagination" }, h("div", { key: '93dcff37dcd024519d00176b3bf52c6fc94c00ec', class: "co-pagination__section" }, h("span", { key: 'f13f0b987bd3634046b26225b867b4a3f8766eb3', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'aed4e49fe945dac3dab1b84d97119f7e5c298142', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '7bb75d863d77c1ee257994eb81557f4efd320cf3', class: "co-pagination", part: "pagination" }, h("div", { key: '593441b0dc0178fd73a333636764e29fe60efa49', class: "co-pagination__section" }, h("span", { key: '453dc30bbfbd9eb899c8bd2e7aa112e9f183a8d8', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'a806c23c5515f81d4751a69950f3ff944a41c9b9', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '67a1d54ce40eb1cc003d5f88ea644df994d0c590', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '877cb7ebbf427e505f399d14e48cec4011282ab4', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'ef55eceda68aa0d561a3066a6a9f864171350f94', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '1813de04f69717833fe432ec5188aaa00a379128', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '20ba29bbb24dfbd03551a439ad9f7cbbbb233f8e', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '99bf24b654f5171fb2bf6a0b720057179e7931f1', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '9eadd04de3cab8260445a2eb133734c3c3aa7cf6', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'e3dd5337ee92d9fa715fb27b1ff689b4e6fd4559', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '8699129db80a836d122b150d357f3c6d72b21683', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: 'cfc74fc55c23887dc2d13efa379458d8ef9dd947', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '700821528fd851f6c8cbafb07ffe3ba95838d977', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'd0cd76772f54b3a5853d8158dd72d5972a9ef5e8', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '1b0a013033bffc0ef849590f4bd2b19ba78346f3', class: "co-pagination__spacer" }), h("div", { key: '02bcc300d05ff7e2710c2bbb1373ef695e563b6e', class: "co-pagination__section" }, h("span", { key: '3942e7ef9ac9d7b295c1c81685fbeec6032df795', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '6e88cd0855d6f34ce0e38d1ee89234b8cf929ad0', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '81b26b3f719a1eca429a6820bf7da6d68b79398f', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '1389c60c3985201af55ba9ba609e020e6fb43c86', class: "co-pagination__spacer" }), h("div", { key: '6254c6c322e1ca929c6f2654ec80887efad30615', class: "co-pagination__section" }, h("span", { key: 'aeb3619ad97e67f866cc982745efb56aafc25f87', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'fae17e08dd1383aaf71587b7efe504d575e198c6', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '912bfea50023f5e039364a5f4e3dc1d7bb2f05e7', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '83448292b1fba7470971b46e8ab14267e8a762dc', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '7c933d5a710cb5509b360d23fa0512df1a7a8bc4', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -162,20 +162,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: '76448762ebc35a510daa099e2b10fffb304a09c1', class: {
+        return (h("div", { key: '0153dfa52a577f005fdcf86035611a0cecf56ecc', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'e50f105a589cc7a4098281d2466b875fc70c706c', class: "co-date-field__labels" }, h("label", { key: '3dbb87b7f1a4b229afa920352f352cefa0b5be51', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'adad4708c70542e18e241c73dc16522ffc83a52f', required: this.required })))), h("div", { key: 'ef8bbba2b0070c21cbff8feba625ada99a75e50f', class: "co-date-field__field-row" }, h("div", { key: 'a385b086440ef6842049159424664d1f4a9a5cb5', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '5ebc11e2f8a0ccaa0534682c6633228c66565396', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8ee80f5304623f8da75f20eb93d6fe3eb927d0f1', class: "co-date-field__input-wrapper" }, h("input", { key: 'c156767ea4818750c5b00f2f965c026417ef6bd2', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '4d0b388e20ad3f862e310c951ad7a07d620f9d76', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '477602a3cb3c1440b10d612c194f7d2ae5e03456', class: "co-date-field__labels" }, h("label", { key: '3f0b5d1243e703f70e827a48200355bf028ae4ca', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '47d3b8f98cd50e63412d3ae6ed9f4e300210a60b', required: this.required })))), h("div", { key: '4f3b093f9c159e8476f6285402a5f8349bc55112', class: "co-date-field__field-row" }, h("div", { key: '37bff398a2377f38d34b6a1c6e15b1e0e2de783e', class: "co-date-field__field", part: "field" }, h("co-icon", { key: 'fe82197dcc67464415c3f49e565009acfe7b40b2', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '069847b02a6028e2ad0bc3c4a0d3817c899c2fbf', class: "co-date-field__input-wrapper" }, h("input", { key: '4669fc7cf06aff450707bf7975fd1141efdd8304', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: 'fd52945af291236aecf4068625f8872b09e7d22f', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '8eb87bc05e53b340b97bdb5f17a3bbd08e2844fc', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b182c4196a15168a1ad654f00e4c83823b0bf894', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'f2cdef4f478972926e417c03aa6c23269c87fd32', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'b4552bb9b1c77ffb156684464f14579530c00508', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '00e95a4ebc29f4d6b9a6dae1dc14456dcb7af21f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '6c0b2272a6ba4139ad7bbd5e8755ef599f2ebe03', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e4a0acf05080876968835be09f4cf04b4b3ee80f', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '2329cec15faab426f09107615e3038428b26182f', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e9340bf5490100f6b1a93fa7af1950253ae442e7', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '5bd1d55005d6df5ef159bbd6e60b14c69b0314cc', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: 'c72ef0bfac5b2fb196286b77c39c84cf1d72e06d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: '2d03e6fa36f8f44830beb798a1a3096b93f3478d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1039,7 +1039,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/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 +1060,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/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"
                         }
                     }

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

@@ -211,50 +211,109 @@
   flex: 0 0 auto;
 }
 
-.co-date-time-picker__times {
-  position: relative; /* offsetTop anchor for the open-scroll */
-  flex: 0 0 auto;
-  width: 7.5rem;
-  max-height: 17.5rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-left: var(--co-spacing-sm2);
+/* ---- Columna derecha: atajos + hora exacta + footer ---- */
+.co-date-time-picker__side {
+  width: 12.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+  padding-left: var(--co-spacing-md);
   border-left: 1px solid var(--co-semantic-border-default);
-  outline: none;
   box-sizing: border-box;
 }
 
-.co-date-time-picker__times:focus-visible {
-  outline: 2px solid var(--co-semantic-border-focus);
-  outline-offset: 1px;
-  border-radius: var(--co-border-radius-xxs);
+.co-date-time-picker__sect {
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm2) 0;
+  font-size: var(--co-font-size-11);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--co-semantic-text-muted);
 }
 
-.co-date-time-picker__time {
-  padding: var(--co-spacing-sm) var(--co-spacing-sm2);
-  border-radius: var(--co-border-radius-xxs);
-  color: var(--co-semantic-text-default);
+.co-date-time-picker__sect--time {
+  padding-top: var(--co-spacing-sm2);
+  border-top: 1px solid var(--co-semantic-border-subtle);
+}
+
+.co-date-time-picker__presets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xxs);
+}
+
+.co-date-time-picker__preset {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  min-height: 32px;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm2);
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  background: transparent;
+  font-family: inherit;
   font-size: var(--co-font-size-14);
-  line-height: 1;
+  letter-spacing: inherit;
+  color: var(--co-semantic-text-default);
+  text-align: left;
   white-space: nowrap;
   cursor: pointer;
-  user-select: none;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
-.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected) {
+.co-date-time-picker__preset:hover {
   background: var(--co-semantic-surface-hover);
 }
 
-/* Keyboard cursor — distinct from the committed selection. */
-.co-date-time-picker__time--active:not(.co-date-time-picker__time--selected) {
-  box-shadow: inset 0 0 0 1px var(--co-semantic-border-focus);
+.co-date-time-picker__preset:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+.co-date-time-picker__preset-icon {
+  color: var(--co-semantic-text-muted);
+}
+
+.co-date-time-picker__preset-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* SELECTED — solid fill + inverse text, same treatment as co-calendar's day. */
-.co-date-time-picker__time--selected {
+.co-date-time-picker__preset-hint {
+  margin-left: auto;
+  font-size: var(--co-font-size-12);
+  color: var(--co-semantic-text-muted);
+}
+
+.co-date-time-picker__footer {
+  margin-top: auto;
+  padding-top: var(--co-spacing-sm2);
+  border-top: 1px solid var(--co-semantic-border-subtle);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.co-date-time-picker__btn {
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  height: 28px;
+  padding: 0 var(--co-spacing-md);
+  font-family: inherit;
+  font-size: var(--co-font-size-13);
+  font-weight: 500;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+.co-date-time-picker__btn--primary {
   background: var(--co-semantic-surface-primary);
   color: var(--co-semantic-on-primary);
-  font-weight: 600;
+}
+
+.co-date-time-picker__btn--primary:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
 }
 
 /* ---- Mobile bottom sheet: calendar on top, hours below ---- */
@@ -269,20 +328,57 @@
   align-items: center;
 }
 
-.co-date-time-picker__panel--touch .co-date-time-picker__times {
+/* ---- Bottom sheet: columna → calendario arriba, atajos como chips, campo y
+   Listo full-width. Targets ≥44px. ---- */
+.co-date-time-picker__panel--touch .co-date-time-picker__side {
   width: 100%;
   max-width: 20rem;
-  max-height: 12rem;
   padding-left: 0;
-  padding-top: var(--co-spacing-sm2);
   border-left: none;
+  padding-top: var(--co-spacing-sm2);
   border-top: 1px solid var(--co-semantic-border-default);
 }
 
-.co-date-time-picker__panel--touch .co-date-time-picker__time {
+.co-date-time-picker__panel--touch .co-date-time-picker__sect {
+  display: none; /* el sheet respira menos: los grupos se leen solos */
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__sect--time {
+  display: none;
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__presets {
+  flex-direction: row;
+  gap: var(--co-spacing-sm);
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-inline-end: var(--co-spacing-2xl);
+  scroll-padding-inline-end: var(--co-spacing-2xl);
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--co-spacing-2xl)), transparent);
+  mask-image: linear-gradient(90deg, #000 calc(100% - var(--co-spacing-2xl)), transparent);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__preset {
+  flex: 0 0 auto;
   min-height: 44px;
-  display: flex;
-  align-items: center;
+  padding: 0 var(--co-spacing-md);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-full);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__preset-hint {
+  display: none; /* el chip queda corto; la hora la muestra el campo al elegir */
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__footer {
+  margin-top: var(--co-spacing-sm2);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__btn--primary {
+  width: 100%;
+  height: 44px;
+  font-size: var(--co-font-size-15, 15px);
+  border-radius: var(--co-border-radius-sm);
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──