@prolibu-suite/cobalt-core 0.10.0 → 0.10.1

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/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.js

@@ -1039,7 +1039,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/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/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/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-input/co-input.js

@@ -120,9 +120,13 @@ export class CoInput {
         }
     }
     /** Programmatically focus the inner input (post-hydration safe). */
-    async setFocus() {
+    /** Enfoca el input nativo. `options` se reenvía a `focus()` — p. ej.
+     *  `{ preventScroll: true }` para un buscador que vive en un panel
+     *  top-layer (co-popover): el scroll nativo hacia el foco trepa por los
+     *  ancestros del light DOM y arrastra al host (drawer) sin necesidad. */
+    async setFocus(options) {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
     componentDidLoad() {
         var _a;
@@ -742,18 +746,26 @@ export class CoInput {
         return {
             "setFocus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically focus the inner input (post-hydration safe).",
+                    "text": "Enfoca el input nativo. `options` se reenv\u00EDa a `focus()` \u2014 p. ej.\n`{ preventScroll: true }` para un buscador que vive en un panel\ntop-layer (co-popover): el scroll nativo hacia el foco trepa por los\nancestros del light DOM y arrastra al host (drawer) sin necesidad.",
                     "tags": []
                 }
             }

package/dist/collection/components/co-menu-item/co-menu-item.css

@@ -122,6 +122,15 @@
 
 .co-menu-item__trigger-wrap { display: block; }
 
+/* El trigger de un submenú va envuelto en co-popover, cuyo :host es inline-block:
+   sin esto la fila se encoge a su contenido y la flecha queda pegada al texto en
+   vez de al borde derecho del panel (las filas hoja no pasan por co-popover). Una
+   regla del scope exterior sobre el host gana a su :host. */
+.co-menu-item__wrap--submenu > co-popover {
+  display: block;
+  width: 100%;
+}
+
 .co-menu-item__submenu {
   /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
   background: var(--co-semantic-surface-secondary, #fff);

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

@@ -234,3 +234,9 @@
 .co-modal--no-dividers .co-modal__footer {
   border-top: none;
 }
+
+/* header-divider="false": the body runs straight under the heading. */
+.co-modal--no-header-divider .co-modal__body {
+  border-top: none;
+  padding-top: 0;
+}

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

@@ -3,7 +3,14 @@ import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
 /**
  * @slot        - Modal body content
+ * @slot header-leading - Control before the heading (e.g. a back arrow on a
+ *                        second screen of the same modal)
+ * @slot header-actions - Controls at the right end of the header (e.g. a settings
+ *                        icon-button), before the close button
  * @slot footer - Footer with action buttons
+ * @part modal | header | header-text | heading | description | body | footer -
+ *       layout/typography hooks for a consumer that must match a specific spec
+ *       (paddings, heading weight); colors stay on semantic tokens
  */
 export class CoModal {
     constructor() {
@@ -36,6 +43,9 @@ export class CoModal {
         this.size = 'md';
         /** Hide body section and all border dividers (compact confirm dialogs) */
         this.noDividers = false;
+        /** Hairline between header and body. `false` lets the body run straight
+         *  under the heading (Figma modals whose first row is a segmented control). */
+        this.headerDivider = true;
         /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
         this.hasFooter = false;
         this.handleFooterSlotChange = (e) => {
@@ -68,7 +78,7 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: '40c8e5bd7300ba5b9b9dbe5eed4d3f369f15002d', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '466391dc8b03381f4a00f4e95605c1c22d2eb052', class: "co-modal__frame co-sq-elevation-fallback" }, h("div", { key: 'af09fd79f4c716cfc76eda669ccab0da258d6dde', class: {
+        return (h("co-overlay", { key: '9b796364a697af4d4a0ede50e5dd5516ccaa299f', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'bea863aedb405cdc492277add25e2c08ea7ef258', class: "co-modal__frame co-sq-elevation-fallback" }, h("div", { key: '05f9e86f7a813243913f60c6a042fb93ed65a463', class: {
                 'co-modal': true,
                 'co-sq-clip': true,
                 'co-sq-elevation': true,
@@ -77,7 +87,8 @@ export class CoModal {
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '5149098013107e3dab0149131f4110e2f039d6b6', class: "co-modal__header", part: "header" }, h("div", { key: '2c9c7d6378b7bb536f9c4ade2af7643b4d1e8e9f', class: "co-modal__header-text" }, h("h2", { key: '36f1000d5795862fe319dda98c40b68578b794df', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ac1e07eb244b986b29763eecfbafcddab36626da', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '5727e992fef9c2e4ab7e53624734d71de8ef28fe', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'ad217f504bccd348576cb2badb63786179d70122', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '7a1c7801132cb4470914167acddafda8f789ec92', class: "co-modal__body", part: "body" }, h("slot", { key: 'd00f9a7566eb30a73a40539c42f55061e1c27e12' }))), h("div", { key: '461f22cf012d9ea515863ae249ed257337c17bff', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '641074e1b09f74d5bb817fe60ea97953fa1f6b99', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+                'co-modal--no-header-divider': !this.headerDivider,
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '8ecd9f7f4413339e484710e2abef1c21fc7f25d0', class: "co-modal__header", part: "header" }, h("slot", { key: '09df61b3aac8a26e0eb85a6a6aa48f9a7f547dbf', name: "header-leading" }), h("div", { key: '8e9a55561a1b5615f77eb3eb96284ddc68eddbc3', class: "co-modal__header-text", part: "header-text" }, h("h2", { key: '65c083247543448d9f527592cd8614a4c713cf4c', class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c871aa6549cf56265a02048ca18f736d92d1a482', class: "co-modal__description", part: "description" }, this.description))), h("slot", { key: '106a5be71c8c03736313c1084c61d3b836ebb495', name: "header-actions" }), this.closable && (h("button", { key: 'a0df67cd09e5f414c58f9f67f6a92c58b9f4773b', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'e766981fff30de0c79599756dde74c5981d5c9fd', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '355e455c19cbc4a0783c0e0c2689265e6f599484', class: "co-modal__body", part: "body" }, h("slot", { key: 'fa6d3310464ff33de17618561182736bc6cef0e5' }))), h("div", { key: '43b89751fac3fd1b707a284d260e91dd7d7ea8a6', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'e9821b0712a6903c923f9bb50393e4b85545c211', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -251,6 +262,26 @@ export class CoModal {
                 "reflect": true,
                 "attribute": "no-dividers",
                 "defaultValue": "false"
+            },
+            "headerDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hairline between header and body. `false` lets the body run straight\nunder the heading (Figma modals whose first row is a segmented control)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-divider",
+                "defaultValue": "true"
             }
         };
     }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '2bfd8f245fd8e93a2d085c5cecbe729a32f10754', class: {
+        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'a07380f56382e9b96b335ab9169a16c8ed9e042e' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -302,18 +302,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: 'd1b4cf4bbb6f9a01db718079c1e4686653d6cb69', class: {
+        return (h("div", { key: '1bcd7e60596bc28f5159f86a026d69d0d053f038', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '972f6a811230bc8e919bb13d82b00b697ef849d3', class: "co-number-field__labels" }, this.label && h("label", { key: 'cca4de1e86a0066464b6dc71289ee174cc29e229', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '80a8266109c1cede57e32c706fb4c0e47eb33249', required: this.required })), this.secondaryLabel && h("span", { key: '082db322206fedfbcd2f9a6c0fd4c439a0a96fd6', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '88fba5f119dab3a4feb2ad2380cd5023d760e7e9', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '28a2033ed8997597615edf6c6b591d4da205c888', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '4a562d696da337feeb4bb60b018b4a23024163ad', name: "minus", size: 16 }))), h("input", { key: 'f05ebf923249188da23edb73e6688ccd8ecf8233', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'aca2d9958374940304e05495ae05e74d627154c7', class: "co-number-field__labels" }, this.label && h("label", { key: '8cf05675830ad181005430526785984acc793d0b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '36aed2cf48890cf79506416d0c45f272ed329664', required: this.required })), this.secondaryLabel && h("span", { key: '636111436e1e3fff8d74fb4b9412c2192c93495a', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '6cbbb87a304cd9e415aafda276daede8dbe0b6a7', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'e11dfc41ee97b3287908877aa74f732a4cbe31fe', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '3f369b4d8293e9e987d18ba58fa1f010bd538016', name: "minus", size: 16 }))), h("input", { key: '8144b563cd4ae46774adbf224c45fa59378da4c7', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'b10fe23b0e16df1a9abc121923175aef3568d987', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'c963c856ea592a259e506ce9cc37948b105e28d3', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'd88127405a552237b103f794f449be98840254d5', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '0809f93bae05abd88549ffc707d3c4e9126f6d96', name: "suffix" }), !this.hideControls && (h("button", { key: 'd10d3900942acb5016448a8b509173a15ca86d43', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'f346237b4df54f3182b1702b953a17e07cb0a1ca', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'b9771e896812e73ba940d49419ec2eee3ba28ba3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '08fa68bb3f9ad4efab6722d59c5df480a0454f02', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'f8dd3318d47684c9c5ff0d761155174fa14d98aa', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '56e8b3a225f2332f9c3974ec195b63b3681d5b09', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'ea8325f7097c5b0b87bd51554163d44bdfe379ff', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c72d4e3a039752fbcf7cf4594421d24bc2f0570a', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '2a3dc1b5a3e22ade3db02389178dd4ae3b1d3295', name: "suffix" }), !this.hideControls && (h("button", { key: '3b9bf39d86c7aacb212576dc4cf4af548b56fbed', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '1655aaca9e66b51c0d97fc128c132326d3c740ad', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '397b37569cabdf68072d870b5e5781f7d39da8fe', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b574fddca9813af3e208ea3e9258480a992fd4f2', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'd17a39a82108f12100dee523d7754b50f147bb63', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { highlightMatch } from "../../utils/normalizeText";
 import { initOverlayScroll } from "../../utils/overlayScroll";
-import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveIndex, orderItems, parseItems, parseValue, selectedActiveIndex, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
+import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveIndex, orderItems, parseItems, parseValue, selectedActiveIndex, shouldResnapshotOnTerm, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
 /**
  * Núcleo de lista de opciones — la única fuente del look & behavior de los
  * dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete,
@@ -106,10 +106,15 @@ export class CoOptionList {
         };
         this.onSearchInput = (e) => {
             const v = e.target.value;
+            // Al volver a la lista completa el bloque selected-first se rearma con lo que
+            // se seleccionó durante la sesión del panel (ver shouldResnapshotOnTerm).
+            const resnapshot = shouldResnapshotOnTerm(this.term, v);
             this.term = v;
             this.activeIndex = -1;
             // Resultset nuevo: re-habilita fillViewport aunque venga del mismo largo.
             this.lastFillLen = -1;
+            if (resnapshot)
+                this.takeSnapshot();
             if (this.debounceTimer)
                 clearTimeout(this.debounceTimer);
             this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
@@ -280,6 +285,27 @@ export class CoOptionList {
             this.scrollTop = maxScrollTop;
         }
     }
+    /**
+     * Selected-first VIVO (decisión de producto 2026-09-14, campo Colaboradores):
+     * la partición sigue a `value` — marcar un ítem lo sube al bloque de
+     * seleccionados al instante y desmarcarlo lo devuelve a su lugar del orden del
+     * server. Reemplaza el snapshot congelado al abrir (evitaba saltos, pero se
+     * leía como "no pasó nada" al elegir). El reacomodo se anima con el mismo FLIP
+     * del reorder: tops capturados ANTES de re-particionar, runFlip corre en
+     * componentDidRender. El highlight de teclado se queda sobre el MISMO ítem
+     * (Enter sobre una fila la mueve; el índice viejo apuntaría a otra fila).
+     * Tras un drop del reorder el host manda el value en el orden del preview:
+     * mismo orden → deltas 0 → no-op visual.
+     */
+    onValueChange() {
+        var _a;
+        if (!this.selectedFirst)
+            return;
+        const activeId = this.activeIndex >= 0 ? (_a = this.orderedItems[this.activeIndex]) === null || _a === void 0 ? void 0 : _a._id : undefined;
+        this.pendingFlip = { tops: this.captureRowTops(), movedId: '', spring: false };
+        this.takeSnapshot();
+        this.activeIndex = activeId ? this.orderedItems.findIndex((i) => i._id === activeId) : -1;
+    }
     // ── Métodos públicos ───────────────────────────────────────
     /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     async snapshotOrder() {
@@ -713,11 +739,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: 'fc7f56eb7837405c1c3c1addabb9748f4c955fed', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '44a31021a6cd49ec0ddf169c2cf2a0cdd0088f1d', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '4d375787abbc1dd93fda1200a8cfb76928775e6f', name: "magnifying-glass", size: 16 }), h("input", { key: 'ffcad867196edd9f8384eda74d215873f2b2f857', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: 'a1d5b69d184accaf8ee4ff4b0674823cee4da659', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '3b6761a9bd95bcdaea14dd13619024841e9b6e22', class: "co-option-list__inner" }, showClear && (h("button", { key: '0b9fce9a2439733e5a3bb0d74542eafcbb3754b9', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '6db442c304c7d36fa9e41befb78a1ee4ebe8a415', name: "x-circle", size: 14 }), h("span", { key: '12d6b290acc9789dea62cfd036f62eae2a28b33d' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'cc358dc94a3db4208ef85f16f8dce2d0592d4193', class: "co-option-list__loading" }, h("co-loader", { key: '9373dbe39674b9e5b18d03cf540ffa83309ea3fe', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '732747e33e2ec29968eb7f19b050d89e4b2cca00', class: "co-option-list__empty" }, h("co-icon", { key: '6defcd47ad121509bea43da488382a47a846f728', name: "magnifying-glass", size: 20 }), h("span", { key: '73729f8c52962e522125b6c258b0f1fb04eff533' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: '3d1df259b90836a6a125627e850ff2d2e1556d4c', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '181a0c89ff38821301c0728f4eb5edb9c4e11b2d', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'cac54346c457d884fbbc1257b00dbe932e5419ca', name: "magnifying-glass", size: 16 }), h("input", { key: 'bbc27b7821651189718cf763e689dd08e6fa0050', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '993c2308c9d6e1958f8f3ddc73b08e9ebc0bd409', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '458e04427d5dd6a4e74537483b18d8e4ba9c71a5', class: "co-option-list__inner" }, showClear && (h("button", { key: '03d067e6a79dfb51f39aa52ad8b7b6464aa2f37d', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '394b7c318f942d74cb7d68859aa54fce5ed2dc58', name: "x-circle", size: 14 }), h("span", { key: '3dd47de0ed422bb5dd3a3c63ac7dc3936578fdaa' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '02dae3b4322ce67325617870c090fd3f3946f8c1', class: "co-option-list__loading" }, h("co-loader", { key: 'aaa67b4cf0f37be7364cbd00f2b156bed4018c13', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'caa5a5b33817577084b9e82a40f97632972e5068', class: "co-option-list__empty" }, h("co-icon", { key: '0cd622efe4ea8bc4483322b4a81c5e3a254f08ab', name: "magnifying-glass", size: 20 }), h("span", { key: 'ca1fb6cf98eacba682f308f610befe6f9da9edd2' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '915e9c5dd03a7f77a2d680137b962e0f100fa903', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dea515b0c90e0fac1f16fd4140ed38bddcd0cda4', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '9f3be3b39ccc00a380c3d88d30ac8695102e22a4', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '6b6a06ef1819241ef5f5ff5870e79ab8b0765ed8', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '7e9ce17adba91610cf8c2b4c7c1d544db4879122', class: "co-option-list__loading-more" }, h("co-loader", { key: '974bc5404e175c89f6a1972900f2e3b8e2d95373', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '34261e4bf8349cd4973a642d7137e72f80c2a867', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'e350a3a8e731f6d2bb609c84cd0e601e93e6b063', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -1501,6 +1527,9 @@ export class CoOptionList {
         return [{
                 "propName": "items",
                 "methodName": "onItemsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
 }

package/dist/collection/components/co-option-list/optionListLogic.js

@@ -28,12 +28,13 @@ export function parseValue(raw) {
  * snapshotDisplay los que la página actual no contiene) + resto en orden de
  * server; buscando → solo resultados reales, seleccionados primero.
  *
- * Invariante: todo id en `snapshotIds` DEBE tener una entrada correspondiente
- * en `snapshotDisplay` (armado por el caller desde selectedItems ∪ items al
- * tomar el snapshot). Un id sin display-item asociado se cae silenciosamente
- * de la lista en modo idle (el `byId.get(d._id) ?? d` sintetiza desde el
- * display-item mismo, pero no hay nada que sintetizar si el id nunca entró a
- * snapshotDisplay en primer lugar).
+ * El bloque idle se recorre por `snapshotIds` (Set ordenado por selección, igual
+ * que `snapshotDisplay`) resolviendo cada id contra la página primero y contra el
+ * display después. Así un seleccionado AUSENTE de `snapshotDisplay` pero presente
+ * en `items` sigue en la lista: `rest` filtra todo id del snapshot, así que sin
+ * esa resolución desaparecía de la lista entera, no sólo del bloque de arriba.
+ * Un id que no está en ninguna de las dos fuentes no tiene nada que pintar y se
+ * ignora (no hay label que mostrar).
  */
 export function orderItems(items, snapshotIds, snapshotDisplay, searching) {
     var _a;
@@ -42,8 +43,12 @@ export function orderItems(items, snapshotIds, snapshotDisplay, searching) {
     const byId = new Map(items.map((i) => [i._id, i]));
     const selectedBlock = [];
     if (!searching) {
-        for (const d of snapshotDisplay)
-            selectedBlock.push((_a = byId.get(d._id)) !== null && _a !== void 0 ? _a : d);
+        const displayById = new Map(snapshotDisplay.map((d) => [d._id, d]));
+        for (const id of snapshotIds) {
+            const resolved = (_a = byId.get(id)) !== null && _a !== void 0 ? _a : displayById.get(id);
+            if (resolved)
+                selectedBlock.push(resolved);
+        }
     }
     else {
         for (const i of items)
@@ -53,6 +58,24 @@ export function orderItems(items, snapshotIds, snapshotDisplay, searching) {
     const rest = items.filter((i) => !snapshotIds.has(i._id));
     return [...selectedBlock, ...rest];
 }
+/**
+ * ¿Hay que re-tomar el snapshot selected-first por el cambio del término?
+ *
+ * Sólo en el flanco "había búsqueda → ya no": volver a la lista completa es un
+ * contexto de listado nuevo, y ahí el bloque de arriba tiene que incluir lo que
+ * se seleccionó DURANTE la sesión del panel. Sin esto, un panel abierto sin nada
+ * seleccionado se quedaba con el snapshot VACÍO para siempre (`orderItems`
+ * cortocircuita en `size === 0`): lo elegido mientras se buscaba desaparecía de
+ * la lista al limpiar el término, porque el servidor devuelve la página 1 y esos
+ * registros casi nunca están ahí. Se leía como "se deselecciona solo".
+ *
+ * El re-snapshot por SELECCIÓN no pasa por acá: vive en el componente
+ * (`@Watch('value')`, selected-first vivo desde 2026-09-14 — marcar sube la fila
+ * al instante). Esta función solo decide el flanco del TÉRMINO.
+ */
+export function shouldResnapshotOnTerm(prevTerm, nextTerm) {
+    return !!prevTerm && !nextTerm;
+}
 /** Aplana a filas de render insertando un header cuando `group` cambia
  *  (groupItems de co-command-search). `index` cuenta solo items. */
 export function buildRows(items) {

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

@@ -189,7 +189,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '1664f81264046991c4d66285489001c4783138ec', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'fc220441149e20eb8b2ca1dcb7131d77e25dcdb3' })));
+        return (h("div", { key: '4fafc87768eca581018ff578875b2362cf5297d2', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2d18410bb6774701806101d38b6d41293b0e7ff9' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-page-header/co-page-header.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: '305f42c88d10f238351f362b72283abe82eaeb20', class: "co-page-header", part: "page-header" }, h("div", { key: '10185fe127049bfece585c59f92824888113861e', class: "co-page-header__left" }, this.icon && (h("span", { key: '017bc4f2aed8d05999c581ce0d7a4797aa84eff6', class: "co-page-header__icon" }, h("co-icon", { key: '7d5863437875aa09ad3bbe9e12c0b5d5c9f5c0c7', name: this.icon, size: 24 }))), h("span", { key: 'e62ead8cb061045d8995689dce3009e9843e3997', class: "co-page-header__title" }, h("slot", { key: '9e1d01a94942daeeb1c56f1d0f05534b45125422' }, this.heading))), h("div", { key: '5a2dd08e5b11ab33e64ddb581196d8535deb0925', class: "co-page-header__actions" }, h("slot", { key: '7fd3a5ea06593c9208a59ba2812bb827f1d39815', name: "actions" }))));
+        return (h("div", { key: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -159,7 +159,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '44113c6d2a4845b96b185bc1a291335ad099491b', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'aee2eced519f996ebf8941210e5151ebe32429d3', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '85b8d50b8062d0041b0f416beb7a140d29d06b1f', required: this.required }))), h("div", { key: '381313d069536477ded093cd236ff740dc534ae4', class: "co-phone-field__container" }, h("button", { key: '4aa81cd26e4824c45b9fd0530a4ff1016acbc877', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'd8ba9bbaae902853d97c37892ea2094a3a05c2ed', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '065c2daf2b277fd870204c989b3eb359aa68dec4', class: "co-phone-field__chevron" }, h("co-icon", { key: '53761d275d9f98010c197e7d8b8f5b20abf753fd', name: "caret-down", size: 14 }))), h("input", { key: '8340a483e8deaf24fd7b03d2239195064d392eb4', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '6e736fb24707feb8faf373a403b192670698a043', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f0750d83d3da8cebc3c1b39d21a35b31bc17bd4a', class: "co-phone-field__search" }, h("input", { key: '546c432e6e11010e2d685780e2f5eddfbf3ad73d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '5960b2979fbedf66ea197ff7f37093b6240242bc', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'fa9e15ba4f08abf2caff8b1b196ce25ce2e89bb9', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '122a32febae2d6f86e32d8b3d1f2ec2df9e573c7', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '6117ecd58a0c2ddefca94237f7c5d815fd5c3c79', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: 'a9c32c0be0ebd40ed647e76522424eb7e5e9aa18', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '37178a06aab45e8254fd0a366758e5302f2eaa46', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '03a342ae39b5f17ba154b5c41f38c68ed3b017ba', required: this.required }))), h("div", { key: '1ec715b8334d174369e2cf84c1599d98f99e0a46', class: "co-phone-field__container" }, h("button", { key: '4570d47ae1b5f29777ef83934f29238f41f39c72', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'eeea700daa0921575451e84229f756a8b07ba2bc', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '8a255cbcdd177d2c3df85e70cd533977401b4331', class: "co-phone-field__chevron" }, h("co-icon", { key: 'b7b7f8ae9ff2faa4aced5387cbdcafbdca3ab850', name: "caret-down", size: 14 }))), h("input", { key: '5c22124cf3b89be951b241dc5414ecfaa914f311', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '58a86dd712fff37ae8a15aa814ecffe68872c546', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '7641be732c29f0cb601b05a185ea10219fc45bae', class: "co-phone-field__search" }, h("input", { key: 'd77b2e9acb00dcf28babbc203b65692fb5b9c8e7', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'a80b7fbe6ac444f44ea802d8820b0dabff943885', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'c24516916b7d78d89eb18d03c8b70363567db9cf', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'e76e608653f1b45c7904bbfe0325a2813fe6aff1', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: 'b7f14cc4ad48df862eee0ba4b45e19fe29e26baa', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -358,7 +358,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }

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

@@ -18,12 +18,12 @@ export class CoProgressBar {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: '1d46449d4034da8868004f4204007301126526dd', class: {
+        return (h("div", { key: 'bcf5e566cfa6726eac8578288797d1004e4003fb', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '2bbc631c4ee331cc265b1fb779006b72f6cd436e', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '932537ab1521b2d7fcd0e1bb57c027a276dacaf3', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }