@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

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

@@ -681,7 +681,15 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
  * Figma original, 2026-07-29: a 12px el texto quedaba ilegible en paneles
  * densos como el picker de campos del filtro avanzado).
  * Todos los var() llevan fallback literal: el host puede tener un build de
- * tokens viejo sin los tokens nuevos (font-size-12, spacing-sm2, mono…). */
+ * tokens viejo sin los tokens nuevos (font-size-12, spacing-sm2, mono…).
+ * Overridables por host (además de `--co-option-list-max-height`, documentada
+ * junto a `.co-option-list__options`): `--co-option-list-item-min-height`
+ * (default 32px, fila más alta — p.ej. filas de dos líneas con precio),
+ * `--co-option-list-item-padding-y` (default `--co-spacing-xs`, padding
+ * vertical de la fila) y `--co-option-list-text-gap` (default
+ * `--co-spacing-xxs`, gap entre título y descripción). Ninguna afecta el
+ * pitch fijo 34 de `.co-option-list__spacer .co-option-list__option`
+ * (virtualización — ver comentario en esa regla). */
 .co-option-list {
   display: flex;
   flex-direction: column;
@@ -775,9 +783,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2, 8px);
   min-width: 0;
-  min-height: 32px;
+  min-height: var(--co-option-list-item-min-height, 32px);
   box-sizing: border-box;
-  padding: var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);
+  padding: var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-xs, 4px);
   border-radius: var(--co-border-radius-xs, 8px);
   cursor: pointer;
   font-size: var(--co-font-size-14, 14px);
@@ -831,7 +839,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-option-list__text {
   display: flex;
   flex-direction: column;
-  gap: var(--co-spacing-xxs, 2px);
+  gap: var(--co-option-list-text-gap, var(--co-spacing-xxs, 2px));
   flex: 1;
   min-width: 0;
 }
@@ -859,6 +867,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   flex-shrink: 1;
 }
 
+/* suffixAlign="end": el suffix sale del título y pinta como columna a la
+ * derecha de la fila (precio/meta) — sin el guion inline, alineado y con
+ * cifras tabulares para que varias filas apiladas no "bailen". */
+.co-option-list__suffix--end {
+  flex-shrink: 0;
+  margin-left: auto;
+  text-align: right;
+  white-space: nowrap;
+  font-size: var(--co-font-size-13, 13px);
+  color: var(--co-semantic-text-default, #1f1c1b);
+  font-variant-numeric: tabular-nums;
+}
+
 .co-option-list__badge {
   flex-shrink: 0;
   padding: 0 var(--co-spacing-xs, 4px);

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,
@@ -60,6 +60,9 @@ export class CoOptionList {
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
         this.avatarShape = 'circle';
+        /** `end` pinta el suffix como columna a la derecha de la fila (precio/meta),
+         *  sin el guion; `inline` = junto al label (default). */
+        this.suffixAlign = 'inline';
         // ── Navegación ─────────────────────────────────────────────
         /** Auto-resalta la primera fila navegable al montar y en cada cambio de
          *  items (paridad command-palette: tipear + Enter = primer resultado).
@@ -103,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);
@@ -277,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() {
@@ -699,7 +728,7 @@ export class CoOptionList {
                 'co-option-list__option--lifted': !this.listDragActive && this.dragKey === item._id,
                 'co-option-list__option--drop-before': this.listDragActive && this.overKey === item._id && !this.dropAfter,
                 'co-option-list__option--drop-after': this.listDragActive && this.overKey === item._id && this.dropAfter,
-            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && this.suffixAlign !== 'end' && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), item.suffix && this.suffixAlign === 'end' && h("span", { class: "co-option-list__suffix co-option-list__suffix--end" }, item.suffix), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
     }
     renderVirtual(items, selectedIds) {
         const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
@@ -710,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: 'a5754821517230b914fd9f23b024afc523e4ee9d', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '9988f2e6834b5c8cf4c4832d609fb6665c9a46cc', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '8b8f2e72fb6f9aa9b498455757aefe943627af80', name: "magnifying-glass", size: 16 }), h("input", { key: 'e434b657655cb855ef77611671db90a7e8f78850', 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: '9e3c8ff1cb005274b74cf50b1c8db469958bbfc0', 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: '8087c3de1d857b562918a358f98a7a195cbe66d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'b067aedd7e0dbb29db12c35d0d217147359bc5f7', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '406e84a7bcc5d8509383527caa0f49d5f93fda53', name: "x-circle", size: 14 }), h("span", { key: '9347b010b58d51363a68aab65781cae7de31cca1' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '774fcb348a3553a945b70de822621ee24e410808', class: "co-option-list__loading" }, h("co-loader", { key: 'f760bf3ec0b27cfd0c57e2a56a613b8390faa935', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f018550513d4057bdbddaf64846ba7d4cd016a45', class: "co-option-list__empty" }, h("co-icon", { key: '7925a8b7c385389b1d59548d5d550a0d7f0d163e', name: "magnifying-glass", size: 20 }), h("span", { key: 'b31e52eef274434599db7ff217a9bfc634ebdf7f' }, 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: '7de231a83a96a2aca0cb240a68c3c9e6ab9b475c', class: "co-option-list__loading-more" }, h("co-loader", { key: '087234fb45c3cbea3bd3f2888957d3b2751753ad', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '456bc75bb53a3f0d01f7fd850ca4b8227baf326d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2935b1dd65ec2409c18c3f72e0200d5ed1c19323', 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"; }
@@ -1204,6 +1233,26 @@ export class CoOptionList {
                 "attribute": "avatar-shape",
                 "defaultValue": "'circle'"
             },
+            "suffixAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'end'",
+                    "resolved": "\"end\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`end` pinta el suffix como columna a la derecha de la fila (precio/meta),\nsin el guion; `inline` = junto al label (default)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "suffix-align",
+                "defaultValue": "'inline'"
+            },
             "autoHighlight": {
                 "type": "boolean",
                 "mutable": false,
@@ -1478,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

@@ -106,8 +106,10 @@ export class CoOverlay {
     }
     /**
      * Promote the scrim to the browser top layer so it covers the whole viewport
-     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
-     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * regardless of ancestor containing blocks — `contain: layout` on the
+     * app-shell `.main` / `.co-drawer` / `.co-modal__frame` (which replaced the
+     * old ancestor `filter`/`mask`), or any `transform` — that would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim.
      * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
      * reconciliation are untouched. No-ops gracefully where unsupported.
      */
@@ -187,7 +189,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '686e2708db09be6fbbb35bb267e3969d240bba4f', 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: '61b7864c03339835d2373efe36804d781f770d3a' })));
+        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: 'cc4d3011b35cf0c7e409e26e81c0443d4acf7116', class: "co-page-header", part: "page-header" }, h("div", { key: 'd0d79d2a1f1e55ef178ae6deb4a4bda9a718f3f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '5d6c4210d2f18a69c9f1371ec79ba63a884a586b', class: "co-page-header__icon" }, h("co-icon", { key: '3bd905fa57f3c772cd2f61cd9de1e2d60407af62', name: this.icon, size: 24 }))), h("span", { key: '9656285b6a3d91f442d00e4acf9c55a8300ca5a0', class: "co-page-header__title" }, h("slot", { key: '1b31917e3bcbacdc111d8c5f46be03a56d188548' }, this.heading))), h("div", { key: 'fa551bee2dade362de86402835532b09547bdb30', class: "co-page-header__actions" }, h("slot", { key: '8ecfd5b89dd1c1fb5d62f5d78c375e918f6abff6', 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: '39e358a001c1c0df6b6fb626f031ea2efd416e78', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '3210c553f76fafdfec97bab4f9468e2438f0c5c2', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'f9057119f8e7d7d37765ae758829aef9ef4b47c6', required: this.required }))), h("div", { key: '782a76b6c15bdac59b6e33964f326451ce85a5ef', class: "co-phone-field__container" }, h("button", { key: 'fc31bf1af8767f56508f9fcff28e9c50be6da447', 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: 'd98253ada8bbf1a905ef6eadd4b30723dd4ec4ee', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '746626be2b166e290af16181f5f9e9837ae8e3dc', class: "co-phone-field__chevron" }, h("co-icon", { key: 'bffa21af2ceee3dad2d045cdf07996b4da1ad0bb', name: "caret-down", size: 14 }))), h("input", { key: '51d59eb3fa78d64984f59f6096f8ca5ea013cb3d', 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: 'e0b96accd38c9226812da68f811db79ae1f39e06', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '919556f077ab5b55fb7b72dcec7cfa43c4ae2b25', class: "co-phone-field__search" }, h("input", { key: 'f3d78c9daa4bb43f8617d06b6d9bb9efdb88dc58', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'ad53c211f9130391585e21da43435777f156bdf1', 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: 'a39f039fe9ae6216e84e032c9f8ef1b18791d224', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'fd32dedcbd326365ae80f71d58ad1a7653a0474c', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '369daab4e46552564be76402d739f56b3f46b669', 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.css

@@ -43,7 +43,7 @@
      exactamente igual de invisible que antes — sin estado nuevo que limpiar. */
   visibility: hidden;
   opacity: 0;
-  transform: scale(0.98);
+  transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-sm, 12px);
@@ -51,8 +51,9 @@
   overflow: visible;
 }
 
-/* La transición vive en --positioned (solo entrada): el cierre desmonta el nodo,
-   no hay fase de salida que animar. */
+/* Transición de entrada. La de salida vive en --closing, declarada DESPUÉS
+   (misma especificidad, gana por orden de cascada) — el nodo sigue montado
+   durante el cierre (tsx difiere el unmount hasta transitionend). */
 .co-popover__panel--positioned {
   visibility: visible;
   opacity: 1;
@@ -62,6 +63,20 @@
     transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
+/* Fase de salida: el nodo sigue montado (tsx difiere el unmount hasta transitionend).
+   Debe declararse después de --positioned: misma especificidad, gana por orden.
+   pointer-events: none — el panel moribundo sigue :popover-open en el top layer
+   ~150ms; sin esto, un click durante el exit aterriza en el menú fantasma. */
+.co-popover__panel--closing {
+  visibility: visible;
+  opacity: 0;
+  transform: scale(0.99);
+  pointer-events: none;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-in),
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-in);
+}
+
 /* Origen según el lado resuelto (post-flip) por el que abre el panel. */
 .co-popover__panel--bottom {
   transform-origin: top center;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { computePosition, findNearestScrollParent, getOffsetAncestor } from "../../utils/positioning";
+import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
 import { pushLayer, removeLayer, isTopLayer } from "../../utils/popover-stack";
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
@@ -27,6 +27,8 @@ export class CoPopover {
         this.closeOnEscape = true;
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
+        /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
+        this.closing = false;
         this.scrollParents = [];
         // Cached offset ancestor + a flag to distinguish "not computed yet" from
         // "computed and there is none". Avoids re-walking the DOM + calling
@@ -38,6 +40,20 @@ export class CoPopover {
         // had every popover instance (open or not) running capture-phase document
         // click handlers, growing O(N) with popover count in the page.
         this.docListenersBound = false;
+        this.finishClose = () => {
+            clearTimeout(this.closeFallbackTimer);
+            if (this.open)
+                return; // reabierto durante el cierre
+            this.closing = false;
+            this.panelEl = undefined;
+        };
+        this.handlePanelTransitionEnd = (e) => {
+            if (this.open || !this.closing)
+                return;
+            if (e.target !== this.panelEl || e.propertyName !== 'transform')
+                return;
+            this.finishClose();
+        };
         // ── Click outside (manual, capture phase) ──────────────────
         // Attached/detached in connectedCallback/disconnectedCallback. Using capture
         // phase so we run before any inner-element listeners that might stop
@@ -77,8 +93,8 @@ export class CoPopover {
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
             // ⚠️ El panel arrastra el `transform: scale()` de la entrada, y
-            // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.98× al montar y
-            // ~0.982× en la segunda pasada del watcher (~16ms de los 180ms). Medir con
+            // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.97× al montar y
+            // ~0.972× en la segunda pasada del watcher (~16ms de los `base` 250ms). Medir con
             // ella metía el factor de escala DENTRO de la matemática de posicionamiento,
             // y ~2% del error quedaba en la posición de reposo: las alineaciones que
             // restan el tamaño del panel (`bottom-end` — el default de co-menu —, `top*`,
@@ -133,6 +149,7 @@ export class CoPopover {
                 if (!this.panelEl.classList.contains(sideClass)) {
                     this.panelEl.classList.remove(...SIDE_CLASSES);
                     this.panelEl.classList.add(sideClass);
+                    this.coPlacement.emit({ placement: actualPlacement });
                 }
                 this.panelEl.classList.add('co-popover__panel--positioned');
             }
@@ -166,10 +183,18 @@ export class CoPopover {
         removeLayer(this.el);
         this.unbindDocListeners();
         this.cleanupListeners();
+        clearTimeout(this.closeFallbackTimer);
+        // Desconectado a mitad del exit (p.ej. host removido por un v-if del
+        // padre mientras corre la transición de cierre): si se reconecta luego
+        // (:key remount, teleport) sin pasar por finishClose, `closing` quedaría
+        // stale en true y el panel nacería en fase de salida.
+        this.closing = false;
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
         if (isOpen) {
+            this.closing = false;
+            clearTimeout(this.closeFallbackTimer);
             pushLayer(this.el);
             this.coOpen.emit();
             this.bindDocListeners();
@@ -190,10 +215,16 @@ export class CoPopover {
             this.unbindDocListeners();
             this.cachedOffsetAncestor = null;
             this.offsetAncestorComputed = false;
-            // The panel is removed from the DOM by the conditional render (which also
-            // evicts it from the top layer); drop the now-detached ref so no async
-            // updatePosition can touch a stale element before the next open re-sets it.
-            this.panelEl = undefined;
+            // Panel keeps its ref/position frozen through the exit animation — the
+            // ref is dropped only when `finishClose` actually unmounts the node
+            // (transitionend, or the fallback timer). `panelEl` is intentionally
+            // NOT cleared here.
+            this.closing = true;
+            // Fallback por si transitionend no dispara (tab oculta, display:none ancestro).
+            // ⚠️ Atado al token: debe superar --co-motion-duration-fast (150ms) con margen —
+            // si el retune sube `fast` por encima de ~350ms, revisar esta constante.
+            clearTimeout(this.closeFallbackTimer);
+            this.closeFallbackTimer = setTimeout(() => this.finishClose(), 400);
         }
     }
     bindDocListeners() {
@@ -242,19 +273,24 @@ export class CoPopover {
         }
     }
     // ── Scroll/resize listeners ────────────────────────────────
-    // Listen to window resize/scroll (covers most layout changes) and to the
-    // NEAREST scrollable ancestor (covers internal-scroll containers like a
-    // datatable body or co-drawer). Previously walked the entire ancestor chain,
-    // attaching N listeners per popover open — for deep trees, that was 5-10
-    // extra listeners per popover × per-scroll-tick getBoundingClientRect calls.
+    // Listen to window resize/scroll and to every ancestor that ACTUALLY scrolls
+    // (co-drawer/co-modal body, datatable body…).
+    //
+    // El listener de window NO alcanza por sí solo: los eventos `scroll` no son
+    // `composed`, así que el de un scroller que vive dentro de un shadow root
+    // —el caso de `.co-drawer__body`— nunca cruza el límite y el capture de
+    // window no lo ve. Por eso hay que engancharse al scroller mismo.
+    //
+    // Se recorre la cadena entera y no solo el ancestro más cercano porque los
+    // scrollers se anidan; `findScrollParents` ya filtra por `overflow` real, así
+    // que la lista queda en 1-2 elementos y no en los 5-10 que motivaron acotar
+    // esto a uno solo en su momento.
     addScrollListeners() {
         window.addEventListener('resize', this.scheduleUpdate, { passive: true });
         window.addEventListener('scroll', this.scheduleUpdate, { passive: true, capture: true });
-        this.scrollParents = [];
-        const scrollAncestor = findNearestScrollParent(this.el);
-        if (scrollAncestor) {
-            scrollAncestor.addEventListener('scroll', this.scheduleUpdate, { passive: true });
-            this.scrollParents.push(scrollAncestor);
+        this.scrollParents = findScrollParents(this.el);
+        for (const parent of this.scrollParents) {
+            parent.addEventListener('scroll', this.scheduleUpdate, { passive: true });
         }
     }
     cleanupListeners() {
@@ -271,13 +307,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: '8a4ccad04a131824d9990759a41905e4772fd56c', class: "co-popover" }, h("div", { key: 'b71344c25aa5f785dbcb65425931f25403877173', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '3a2ad77fbf1d79f917f9c7278faef8ecb65a364e', name: "trigger" })), this.open && (h("div", { key: 'dd6d65a867b15ad3d6fe18658d1f3fdd89be8806', class: "co-popover__panel", popover: "manual", ref: (el) => {
+        return (h("div", { key: 'f8460e212fabe8828f1e33f08304d7e680a7cab0', class: "co-popover" }, h("div", { key: 'c9caad8ae7f16c82173e4b30ad5cc053dc73b6da', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'afa0443ba85607cf24f517e8c7fe0cee689df024', name: "trigger" })), (this.open || this.closing) && (h("div", { key: 'd2a081f8923f53ac456edd6e5eb7422dc5ab7daa', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '3082d046fc973bd5f571b4f9b845844be6e6bf9c' })))));
+            } }, h("slot", { key: '8466f617bd6b8a497e2040d3275b384156de126c' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -322,7 +358,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/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"
                         }
                     }
@@ -441,6 +477,11 @@ export class CoPopover {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coOpen",
@@ -472,6 +513,28 @@ export class CoPopover {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coPlacement",
+                "name": "coPlacement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "El placement REAL con el que qued\u00F3 el panel, ya pasado por el flip \u2014 que\npuede no ser el de la prop `placement`. Lo consume `co-menu-item` para que\nuna cadena de submen\u00FAs herede la direcci\u00F3n (ver utils/submenu.ts): sin\nesto, un submen\u00FA anidado vuelve a abrir hacia la derecha y se dibuja\nencima del men\u00FA padre del que sali\u00F3.\n\nSe emite SOLO cuando el lado cambia (mismo guard que la clase del panel),\nas\u00ED el path de scroll/resize no dispara un evento por tick."
+                },
+                "complexType": {
+                    "original": "{ placement: Placement }",
+                    "resolved": "{ placement: Placement; }",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/positioning",
+                            "id": "src/utils/positioning.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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: 'ec9ad8aa5fec0758148920a219a9ad38bbb2d26a', 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: '18185890f38b6fba049d914a98644c655d0f5cbe', 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"; }

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

@@ -19,7 +19,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: '54589f277b5c2b8b0d79ee514d96c58fc82f7f55', class: {
+        return (h("div", { key: 'bc100ca3ef731aab3168a247098102b8e9ab9537', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -27,7 +27,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '531012a9eb019c39b11037e0ab6748ece8c946f1', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '6ca9aff7a1069d59ad8cc65e5fb8c913084c6aa2', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '48862f1f57c0bb8cd6e03c2f0a84a1ae324d3ec1', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0ff2c6995740504e1df9b11dfa10e0a9f9d368c5', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '1726b4dd23985c0cae5ce04d795924e069511ccb', class: {
+        return (h("div", { key: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '2164e458b160a853127a50af15560c6ff94bb3e5', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'ac519d76a29d186bcbfa8b5e100272f3ccb305ef', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }