@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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, nextActiveIndex, orderItems, parseItems, parseValue, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
+import { buildRows, deriveMore, nextActiveIndex, orderItems, parseItems, parseValue, reorderIds, 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,
@@ -28,6 +28,8 @@ export class CoOptionList {
         this.selectedAffordance = 'check';
         /** Botón remove por fila seleccionada en multiple (tags de combobox). */
         this.removableItems = false;
+        /** Habilita reorder por drag del bloque de seleccionados (selected-first). */
+        this.reorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -59,6 +61,14 @@ export class CoOptionList {
         this.term = '';
         this.activeIndex = -1;
         this.scrollTop = 0;
+        /** Fila armada para drag (handle presionado). */
+        this.armedKey = '';
+        /** Fila que se está arrastrando. */
+        this.dragKey = '';
+        /** Fila hover como drop-target. */
+        this.overKey = '';
+        /** Dirección del drop sobre overKey (true = el ítem cae DESPUÉS del target). */
+        this.dropAfter = false;
         /** Snapshot selected-first (ver snapshotOrder). */
         this.sortSnapshot = new Set();
         this.displaySnapshot = [];
@@ -88,6 +98,19 @@ export class CoOptionList {
                 clearTimeout(this.debounceTimer);
             this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
         };
+        this.handleRowDragEnd = () => { this.resetDragState(); };
+        this.handleRowDragLeave = (e, id) => {
+            // Limpia el highlight al salir de la fila (evita drop-target stale al pasar sobre
+            // el bloque no-seleccionado, que no tiene onDragOver). Guard `contains`: dragleave
+            // también dispara al entrar a un hijo, no solo al salir de la fila.
+            if (this.overKey === id && !e.currentTarget.contains(e.relatedTarget)) {
+                this.overKey = '';
+            }
+        };
+        this.disarmDrag = () => {
+            if (this.armedKey && !this.dragKey)
+                this.armedKey = '';
+        };
         this.onNativeScroll = (e) => {
             // Fallback pre-OverlayScrollbars (primer frame) — misma lógica.
             const el = e.target;
@@ -126,12 +149,16 @@ export class CoOptionList {
             });
         }
     }
+    connectedCallback() {
+        window.addEventListener('mouseup', this.disarmDrag);
+    }
     disconnectedCallback() {
         var _a;
         if (this.debounceTimer)
             clearTimeout(this.debounceTimer);
         (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         this.osInstance = undefined;
+        window.removeEventListener('mouseup', this.disarmDrag);
     }
     onItemsChange() {
         // Nueva página / nuevos resultados: si autoHighlight, re-resalta la primera fila
@@ -218,6 +245,18 @@ export class CoOptionList {
                 return false;
         }
     }
+    /** X "deselect" de la fila seleccionada: emite la DESELECCIÓN real. pick()
+     *  no sirve acá: en single re-emite el mismo id (re-selección no-op) — el
+     *  consumidor jamás se enteraba y la X parecía muerta (bug del workspace). */
+    deselectItem(item) {
+        if (this.multiple) {
+            const next = this.selectedIds.filter((id) => id !== item._id);
+            this.coChange.emit({ value: next, item });
+        }
+        else {
+            this.coChange.emit({ value: null, item });
+        }
+    }
     pick(item) {
         if (this.multiple) {
             const current = this.selectedIds;
@@ -229,6 +268,50 @@ export class CoOptionList {
             this.coChange.emit({ value: item._id, item });
         }
     }
+    // ── Reorder (drag del bloque selected-first) ───────────────
+    handleRowDragStart(e, id) {
+        if (this.armedKey !== id) {
+            e.preventDefault();
+            return;
+        }
+        this.dragKey = id;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', id);
+        }
+    }
+    handleRowDragOver(e, id) {
+        if (!this.dragKey || this.dragKey === id)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        this.overKey = id;
+        // Dirección: al arrastrar hacia abajo (from<to) el ítem cae DESPUÉS del target
+        // (semántica de reorderIds) → el indicador va en el borde inferior; hacia arriba, superior.
+        const ids = this.displaySnapshot.map((d) => d._id);
+        this.dropAfter = ids.indexOf(this.dragKey) < ids.indexOf(id);
+    }
+    handleRowDrop(e, id) {
+        e.preventDefault();
+        e.stopPropagation();
+        const fromId = this.dragKey;
+        const order = this.displaySnapshot.map((d) => d._id);
+        this.resetDragState();
+        // Solo reordenar dentro del bloque seleccionado
+        if (fromId === id || !order.includes(fromId) || !order.includes(id))
+            return;
+        const next = reorderIds(order, fromId, id);
+        const byId = new Map(this.displaySnapshot.map((d) => [d._id, d]));
+        this.displaySnapshot = next.map((x) => byId.get(x)); // reflow en vivo del panel
+        this.coReorder.emit({ value: next, item: byId.get(fromId) });
+    }
+    resetDragState() {
+        this.armedKey = '';
+        this.dragKey = '';
+        this.overKey = '';
+        this.dropAfter = false;
+    }
     maybeLoadMore(scrollTop, clientHeight, scrollHeight) {
         if (this.loading)
             return;
@@ -262,12 +345,16 @@ export class CoOptionList {
     }
     renderRow(item, index, selectedIds) {
         const isSelected = selectedIds.includes(item._id);
+        const canDrag = this.reorderable && this.selectedFirst && isSelected && !this.term;
         return (h("div", { class: {
                 'co-option-list__option': true,
                 'co-option-list__option--selected': isSelected,
                 'co-option-list__option--active': index === this.activeIndex,
                 'co-option-list__option--disabled': !!item.disabled,
-            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; } }, 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 && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), 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.pick(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" }))));
+                'co-option-list__option--dragging': this.dragKey === item._id,
+                'co-option-list__option--drop-before': this.overKey === item._id && !this.dropAfter,
+                'co-option-list__option--drop-after': this.overKey === item._id && this.dropAfter,
+            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: canDrag && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: canDrag ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: canDrag ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: canDrag ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: canDrag ? this.handleRowDragEnd : undefined, onDragLeave: canDrag ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, canDrag && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: () => (this.armedKey = item._id), 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 && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), 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);
@@ -278,11 +365,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: '8e4a0e5e6b0831d1413fccc5d58f5548e756ca90', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '91658cdefff07570ae339a7e4c785493c200b690', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '28900e1543e8cd50d7e789de2f6d8815eafd1fb7', name: "magnifying-glass", size: 16 }), h("input", { key: '3455b4f3d4e54b81291b997bceb64d95ef1be105', 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: '32f315ed929802532c1a050d6e42aaa4150a2d11', 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: '374a2383399a56d90afcb048f5e6343d4f9275d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'be34ee751a34147660e8bc7846b12d8ab1f937d4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'c3c70f93b6d4ce7c0774b4c5ff1ebd7f2549dd93', name: "x-circle", size: 14 }), h("span", { key: 'a9970acd4f67dc84afd4d7f10317d4e35f0feebf' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '6b1bb04068d2832bd71f0d9b9b9205662a3184f2', class: "co-option-list__loading" }, h("co-loader", { key: '1de716e5fac313dbc10a9aeed2dd8f61e491f020', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '29f51655d034fcd1b5aac08df9537fb176090ce7', class: "co-option-list__empty" }, h("co-icon", { key: 'c7c51260cfe80d82ae75ae0a3510560f5258a3ad', name: "magnifying-glass", size: 20 }), h("span", { key: 'af1c571186f203f2a128b4a7f2d26e5171bf7951' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: '7abdf55cbf87783da5a7fb6526e54b80f743c971', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'b7ebe6f402048db7f1565cfb1a387b2fde63a9ae', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '155de622b297b3b39ec7ee4c1760885c1422020e', name: "magnifying-glass", size: 16 }), h("input", { key: '79374bea9a1afc5ee0b93392bd8409315000d65a', 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: 'cff1206bc9e5ad472319b6d38c06f8e3b15cf133', 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: 'b12077f8e6e97f3548ba4bd4da0c05f2b1a19909', class: "co-option-list__inner" }, showClear && (h("button", { key: '129731579fa9c6eb6da59886fe2c6b8554487846', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '9d4b7f51e3043e9cb3fede1c7db53074cd538c8c', name: "x-circle", size: 14 }), h("span", { key: '946279b2732f63a74a4e388c5a27b09236bd88d1' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'ef4bd3ca4192ca8a17f87a53199838428aa0873c', class: "co-option-list__loading" }, h("co-loader", { key: 'c98049223d10b7e5e2e5ddff03cd2da1a4e26555', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '3d828a24b260b9ad44adc7c3e8f223dec5413e42', class: "co-option-list__empty" }, h("co-icon", { key: '5952137642716cdacf8f07222482a1e9bd17d357', name: "magnifying-glass", size: 20 }), h("span", { key: '5661973b0a3dc745670eae494785eefe8e3e4569' }, 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: '0322e0c734d57f0fdc80ace2753276b2bc2a33ad', class: "co-option-list__loading-more" }, h("co-loader", { key: 'e305edb2317d433b27e581a97f35e99083306bff', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '31d25badb8cbefa515eaedd1a849b943274a2f9d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2df4d5c4c55db9647b378eb9d09c828a76e563f1', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '673a6ef5157b4873e1ea3c0d7481880661ead459', class: "co-option-list__loading-more" }, h("co-loader", { key: '39d822a93415d7adc1eb87ad2fc9f221e0364e34', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '2e0ef5fabb28f2638bb992271972387c8bf57f61', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '17f5b0c9d9989f7ba4df15c5f19cb71218886a51', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -452,6 +539,26 @@ export class CoOptionList {
                 "attribute": "removable-items",
                 "defaultValue": "false"
             },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita reorder por drag del bloque de seleccionados (selected-first)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,
@@ -738,7 +845,12 @@ export class CoOptionList {
         return {
             "term": {},
             "activeIndex": {},
-            "scrollTop": {}
+            "scrollTop": {},
+            "armedKey": {},
+            "dragKey": {},
+            "overKey": {},
+            "dropAfter": {},
+            "displaySnapshot": {}
         };
     }
     static get events() {
@@ -768,8 +880,8 @@ export class CoOptionList {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ value: string | string[]; item: OptionListItem }",
-                    "resolved": "{ value: string | string[]; item: OptionListItem; }",
+                    "original": "{ value: string | string[] | null; item: OptionListItem }",
+                    "resolved": "{ value: string | string[] | null; item: OptionListItem; }",
                     "references": {
                         "OptionListItem": {
                             "location": "import",
@@ -824,6 +936,28 @@ export class CoOptionList {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "coReorder",
+                "name": "coReorder",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido tras un drag-reorder: nuevo orden de ids seleccionados + \u00EDtem movido."
+                },
+                "complexType": {
+                    "original": "{ value: string[]; item: OptionListItem }",
+                    "resolved": "{ value: string[]; item: OptionListItem; }",
+                    "references": {
+                        "OptionListItem": {
+                            "location": "import",
+                            "path": "./optionListLogic",
+                            "id": "src/components/co-option-list/optionListLogic.ts::OptionListItem",
+                            "referenceLocation": "OptionListItem"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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

@@ -68,6 +68,19 @@ export function buildRows(items) {
     }
     return rows;
 }
+/** Mueve `fromId` a la posición de `toId` en `order`. No muta el input;
+ *  devuelve el mismo array (referencia) si es no-op. */
+export function reorderIds(order, fromId, toId) {
+    if (fromId === toId)
+        return order;
+    const from = order.indexOf(fromId);
+    const to = order.indexOf(toId);
+    if (from === -1 || to === -1)
+        return order;
+    const next = [...order];
+    next.splice(to, 0, next.splice(from, 1)[0]);
+    return next;
+}
 /** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
 export function nextActiveIndex(current, delta, items) {
     const positions = [];

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

@@ -25,11 +25,11 @@
   backdrop-filter: blur(var(--co-overlay-blur, 2px));
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-in);
 }
 
 .co-overlay--open {
   opacity: 1;
   pointer-events: auto;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out);
 }

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

@@ -187,7 +187,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '41b0ea10b8078a2bf3c46f68fe35869bf2778130', 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: '35e1ec1b7921c1439a177b8f526f128351c5fdec' })));
+        return (h("div", { key: '4945d0a43fbe34f58e630f2cb67b3b4301e5743f', 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: '4196e5718d8f8aace2a24439b770ef16ff2c2efb' })));
     }
     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: '9170d832d0e51cc8e721a4a331f85abb8543b893', class: "co-page-header", part: "page-header" }, h("div", { key: 'ca13df04f2b81a2ce14ab0223a5f651aaa0c921d', class: "co-page-header__left" }, this.icon && (h("span", { key: 'efe024a0388ae60afc2c4e3ce0861b65e0fa9923', class: "co-page-header__icon" }, h("co-icon", { key: '3051bda0f31d1002142e53db09d0aabd7ecf13bf', name: this.icon, size: 24 }))), h("span", { key: '7b714ebec4e82dffaca71d9e8152330b7fe0a38f', class: "co-page-header__title" }, h("slot", { key: '021b7da34753a3946b94bb104f515b1c4781d837' }, this.heading))), h("div", { key: '52d2d1f3510b23c1684aecacb97d341e56fc7619', class: "co-page-header__actions" }, h("slot", { key: 'da455091aa0467df02674fdd38241fd7e70bab13', name: "actions" }))));
+        return (h("div", { key: '0d1ce2960b81a9a7ace9a47e4dfe4211f9aa5751', class: "co-page-header", part: "page-header" }, h("div", { key: 'cd0989d7a005a8549cebb5a443afa95c38edb551', class: "co-page-header__left" }, this.icon && (h("span", { key: 'b5bbc595c87abea99bb3aea5141b796241ae9232', class: "co-page-header__icon" }, h("co-icon", { key: '514c8687d716cf7b70a2166d5f618fa97d715051', name: this.icon, size: 24 }))), h("span", { key: 'b8c3f604c0122e961bd964c6816112cbc9467c0b', class: "co-page-header__title" }, h("slot", { key: '460a789271c89a4f9defdeb7640fe97434a1e6e8' }, this.heading))), h("div", { key: '84b84a5e9df01d796e5d0bd2c4736da6e47b59f3', class: "co-page-header__actions" }, h("slot", { key: 'c89df3f9fd5e0e8c2017881a4f62b5fac3ad8adb', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@
   background: var(--co-semantic-surface-page);
   border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: 40px;
   box-sizing: border-box;
 }

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: 'e1851152e30c4e1580dd533ba0880eeef8933c0c', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'd6adc2584613b7c2ebe72933275ff3058c9d6eef', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'e02252f85db26cc8ac82a791d86b096630026e9f', required: this.required }))), h("div", { key: 'a1433e7df570481200e39aa366e343d41e85441d', class: "co-phone-field__container" }, h("button", { key: 'da306e01f096755f7da014bbfaf21db41fb99c51', 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: '920e1cfffbcae7266dcde4bd37e339e550adcae0', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '2dec0f362a9a75b718ea4aade2c981fba6777ecb', class: "co-phone-field__chevron" }, h("co-icon", { key: 'ad77c5446f2352cc8fa07230af125500dff3f4b6', name: "caret-down", size: 14 }))), h("input", { key: '926302b2660eb32b8d86a2e421700acebc1b8e11', 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: '4e86eb6353ad92839a68400ebfa9d8b5dff0111b', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'bdd3d82c8b1e46741f9fca118ffe35b2e8c0690f', class: "co-phone-field__search" }, h("input", { key: '699189bbdd5027436c2757569ddf5945f2c29e78', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '8ec344b5aeb8a80fd0bb72ad1773ac3416a6d1e6', 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: 'e248da6a7e2c62c9ed01d2ad0a204caea51f55a6', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'ab6fbf9894d8d71fde4e00e07eb81eece230eafb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '0608d49c56d3a20c65cc966c733607440bf73900', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '7d4a0a1226f8ba40202afa669447f8c419d395e4', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '15895fc034d0d4303dce675cd8f9daf57c71fcc6', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'edc44ea4d7a3bc0ae68eaf60b62a87b718de2407', required: this.required }))), h("div", { key: '60619b262eb6d6d46333f6f672b0576b4ad55d86', class: "co-phone-field__container" }, h("button", { key: '688f1646916dc07743f5d97dc3cf882d6083e4df', 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: '6b0595471c189a7a9c3e501afd4288efe3fba936', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'c00388c1846b422a966937e58908bae0a10e049c', class: "co-phone-field__chevron" }, h("co-icon", { key: 'f8100593b1dfbbcd2bd814a8af92636094a50de4', name: "caret-down", size: 14 }))), h("input", { key: 'c55322191719935623e8faa6a083f7da90d86573', 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: '4724a073146df0aa8d5dc4f46fc759c412e838ff', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '6b1ee6a39128da83634f7336bfd48a8c9ec96c9c', class: "co-phone-field__search" }, h("input", { key: '2ca5d2020ee5d0a0795c8cb3493c8d6d752fde6d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '611a469f17f4de85b01c48ec57faed7d433fe8f4', 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: '2ebbd43a0168fbeda12fe8e8d03b90852feab678', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '0b78b938f0a32ed8c7dd53e907894298a9a20582', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '9e4751a137675b5e0929959f8e6d74968959fe79', 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

@@ -37,7 +37,13 @@
   max-width: none;
   max-height: none;
   z-index: 10000;
+  /* Estado inicial de la entrada. `visibility: hidden` ya ocultaba el panel
+     hasta que JS lo posiciona (--positioned); opacity/scale se suman a esa
+     misma puerta, así que si el posicionamiento no corre el panel queda
+     exactamente igual de invisible que antes — sin estado nuevo que limpiar. */
   visibility: hidden;
+  opacity: 0;
+  transform: scale(0.98);
   background: var(--co-semantic-surface-page, #fff);
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-sm, 12px);
@@ -45,6 +51,27 @@
   overflow: visible;
 }
 
+/* La transición vive en --positioned (solo entrada): el cierre desmonta el nodo,
+   no hay fase de salida que animar. */
 .co-popover__panel--positioned {
   visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--co-motion-duration-base) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-base) var(--co-motion-ease-out);
+}
+
+/* Origen según el lado resuelto (post-flip) por el que abre el panel. */
+.co-popover__panel--bottom {
+  transform-origin: top center;
+}
+.co-popover__panel--top {
+  transform-origin: bottom center;
+}
+.co-popover__panel--right {
+  transform-origin: center left;
+}
+.co-popover__panel--left {
+  transform-origin: center right;
 }

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

@@ -1,5 +1,7 @@
 import { h } from "@stencil/core";
 import { computePosition, findNearestScrollParent, getOffsetAncestor } from "../../utils/positioning";
+/** Side classes driving the entrance `transform-origin` (see co-popover.css). */
+const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
 export class CoPopover {
     constructor() {
         // ── Props ──────────────────────────────────────────────────
@@ -55,8 +57,22 @@ export class CoPopover {
             if (!this.open || !this.triggerEl || !this.panelEl)
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
-            const panelRect = this.panelEl.getBoundingClientRect();
-            const { top, left } = computePosition(triggerRect, panelRect, {
+            // ⚠️ 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
+            // 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*`,
+            // `left`) quedaban corridas y saltaban al re-medirse en scale(1) en el primer
+            // scroll. `offsetWidth/offsetHeight` son la caja de borde SIN transform.
+            // computePosition usa el panelRect solo como input de TAMAÑO: lee width y
+            // height y nada más (positioning.ts:61-113 — nunca x/y/top/left), por eso
+            // acá se construye a partir del tamaño y se ahorra el getBoundingClientRect.
+            const panelRect = DOMRect.fromRect({
+                width: this.panelEl.offsetWidth,
+                height: this.panelEl.offsetHeight,
+            });
+            const { top, left, actualPlacement } = computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
                 flip: this.flip,
@@ -89,6 +105,16 @@ export class CoPopover {
             // Apply styles directly to DOM to avoid triggering a re-render loop
             if (this.panelEl) {
                 Object.assign(this.panelEl.style, style);
+                // Side of the RESOLVED placement (post-flip), not of the `placement` prop:
+                // it drives the entrance `transform-origin` so the panel grows out of the
+                // trigger. Re-positioning (scroll/resize) can flip sides, so the class is
+                // re-evaluated on every run — but only written when it actually changed,
+                // to keep the scroll path free of per-tick class-attribute churn.
+                const sideClass = `co-popover__panel--${actualPlacement.split('-')[0]}`;
+                if (!this.panelEl.classList.contains(sideClass)) {
+                    this.panelEl.classList.remove(...SIDE_CLASSES);
+                    this.panelEl.classList.add(sideClass);
+                }
                 this.panelEl.classList.add('co-popover__panel--positioned');
             }
         };
@@ -223,13 +249,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'b39b9ec82457b91b62a5a82e400d598a45c99f95', class: "co-popover" }, h("div", { key: '925ffcd374f6f92ddc6991ed658eb7053f7fad44', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '15cc3984fe8792738912406fb5479984f6de814e', name: "trigger" })), this.open && (h("div", { key: '61beaefd72b8b86e2deb8d8a4ba4e85a57cb4757', class: "co-popover__panel", popover: "manual", ref: (el) => {
+        return (h("div", { key: '52d7ebec42ee6e0306bbc31f177454810299fd97', class: "co-popover" }, h("div", { key: '7b3b35302f130c9aef3d352b896ded7aa85590a4', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'b601a5bfa04b45a5d4d7fe8001b4537a855ef168', name: "trigger" })), this.open && (h("div", { key: '7281452d76e80934192c5d0c945e8b00672dab0c', class: "co-popover__panel", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '3ceb088ee3bbb1cc0e721502e81a72aee13de267' })))));
+            } }, h("slot", { key: 'd0903b97d26f0f16be36054f15dd64d6ae9a3d77' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }

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: '77313f1edbd0a70e8b783155e71ba39ac6c2b905', class: {
+        return (h("div", { key: '03c7bc9c161cd1e44401cd6671c99dee6f317f59', 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: '1c6e1942e8128d49f01bb2fedac113eee2f31ac6', 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: 'fcc7e309aa98fdb0442d5532320df3ab1d6fe902', 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.css

@@ -15,7 +15,7 @@
     var(--_color) var(--co-pc-angle, 0deg),
     var(--_track) var(--co-pc-angle, 0deg)
   );
-  transition: background 0.3s ease;
+  transition: background var(--co-motion-duration-slow) var(--co-motion-ease-out);
 }
 
 .co-progress-circle__track {

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: '879a0c95c7d4aa279eed21447b093bc1461afa4c', class: {
+        return (h("div", { key: '6c378b05df9c04d7856d0514fe773f2b63d07f23', 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: '7f2ece80cede1b6eda659706fe4a2b8cbfc6f47a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '83cbbe79663dae93962da7d1d9ae1f27a6e46fa4', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '4adb6940868fca1bab3c1e8bd09088c69cae244e', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: 'a54ed3aad5460777dc765874007a6cb665cbca19', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-provider-logo/co-provider-logo.css

@@ -0,0 +1,23 @@
+/* co-provider-logo */
+
+:host {
+  display: inline-flex;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
+.co-provider-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Disco blanco: la marca a color sobre una superficie teñida (chip de evento
+   externo) necesita su propio fondo para leerse. Blanco literal, no un token
+   semántico: el plato existe para dar el contraste que la marca asume, y en
+   dark mode debe seguir siendo blanco igual. */
+.co-provider-logo--plated {
+  background: #fff;
+  border-radius: var(--co-border-radius-full);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
+}