@prolibu-suite/cobalt-core 0.8.0 → 0.9.1

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

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

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

@@ -59,7 +59,7 @@
   min-height: 40px;
   overflow: hidden;
   box-sizing: border-box;
-  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);
 }
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
@@ -100,7 +100,7 @@
   color: var(--co-semantic-text-default);
   cursor: pointer;
   padding: 0;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-number-field__btn:hover:not(:disabled) {
@@ -137,7 +137,7 @@
   background: transparent;
   color: var(--co-semantic-text-muted);
   cursor: pointer;
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-number-field__clear:hover {

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

@@ -124,13 +124,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '851b1d89af98cc8a0ad9c925576b12fac545721d', class: {
+        return (h("div", { key: 'a17f3666d9fa62e3714231b1c512b67a15421e91', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ccb5f1b7e75e65b732d31c8f9fe7abb1ca127a21', class: "co-number-field__labels" }, this.label && h("label", { key: 'e5121754db6dff01c1e62a3b27503df9c8dcafa3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'ebaf4bf7d26267bf96e0d99ea1f1b4f448f801ca', required: this.required })), this.secondaryLabel && h("span", { key: '77b800626376802d8e25baa9af81eeb84298d175', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'da070461da5fc2be02dfde4a2196c910f406d459', class: "co-number-field__row" }, h("button", { key: '522b084d7582c7e223db943b96009bc75cc77c2d', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'b598a702578fe0b10ea7a7adde0a9ef638d177ff', name: "minus", size: 16 })), h("input", { key: 'f061fc874dfcd886f9e20132f10359476741dbaa', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: 'e007c2d1d46408bc961cbfdf316b49fbf2f6b2c8', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '73f440263698c26a25495e408529417e0ee80690', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '577021788bca76984f2bca56ff6cdec34ef47ac5', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '82f1be58f496c76d218c6d5550615ec03691c564', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '42f83b44defa32ec4efb9af84518fa1a0cbc6caa', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '68c4300d1b5fb9010bc07457cba7d1628c9d5dc7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'aef962d0b62920215685af9c4cd06bdc63fff92d', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'ea5a62af95585e27a791e43a2038036c098069b6', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '0a93904accabaa16d7a1e13442708ff44c8f907d', class: "co-number-field__labels" }, this.label && h("label", { key: '47bba6d60e6a62d67f2c74ba544484c917acecad', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'd453580e0956c1e91b0f3663c3c2d9d7c7e4c82c', required: this.required })), this.secondaryLabel && h("span", { key: '85c32f97a55c44808ce6a44336594e447c1e1cd4', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '4351f6817e3d08cdc79b4f6242311c64ebde99f2', class: "co-number-field__row" }, h("button", { key: '8576a67dbf23d9a299728f71415664e269fceef4', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '8441220f10d025ac209f6a682348efd1519e51c8', name: "minus", size: 16 })), h("input", { key: '6c33ebf3559addfccdd5a15ae90e4c34eaca183b', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '410d460daf25fcde952b5e58fc30b853f530f350', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '8e0369d14d2c8be2642efc70cc3f065a30dd287d', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '93b5cf7f38717df2efd7950c5b1624ebaf4b1bf6', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'effa948dedca998c27c17e768ff6b940ad8b9563', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'b9f4ac31129dac242e3a6cd3f48413b1e64b550a', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '53772e160a9268e8caa8714a1ec2de76c8f53916', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '3643cbdc11330d50b357ea5933c105d9214bcf97', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'ab0f3c59ebd154126c3c0a48e080afed2457a2ee', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -674,10 +674,12 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   font-family: var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
 }
 
-/* Figma spec (panel dropdown unificado): search 32px + filas 32px/12px
- * regular, pitch vertical 34px (= fila 32 + gap 2) — debe coincidir con
- * VIRTUAL_ITEM_HEIGHT en optionListLogic.ts. El chrome del panel (borde,
- * sombra, bg, ancho) es del host; aquí solo el interior.
+/* Figma spec (panel dropdown unificado): search 32px + filas 32px, pitch
+ * vertical 34px (= fila 32 + gap 2) — debe coincidir con VIRTUAL_ITEM_HEIGHT
+ * en optionListLogic.ts. El chrome del panel (borde, sombra, bg, ancho) es del
+ * host; aquí solo el interior. Labels/search a 14px (subidos del 12px del
+ * 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…). */
 .co-option-list {
@@ -723,7 +725,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: transparent;
   padding: 0;
   font-family: var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  font-size: var(--co-font-size-12, 12px);
+  font-size: var(--co-font-size-14, 14px);
   font-weight: 500;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   line-height: 1;
@@ -764,7 +766,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 /* ── Rows ────────────────────────────────────────────────── */
-/* 32px de alto, padding 4/8/4/4, radius 8, label 12px regular. */
+/* 32px de alto, padding 4/8/4/4, radius 8, label 14px regular. */
 .co-option-list__option {
   display: flex;
   align-items: center;
@@ -775,10 +777,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) 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-12, 12px);
+  font-size: var(--co-font-size-14, 14px);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-default, #1f1c1b);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* Filas virtualizadas: alto FIJO 32 + margen 2 = pitch 34 exacto
@@ -890,7 +892,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: 0;
   cursor: pointer;
   color: var(--co-semantic-text-muted, #888888);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-option-list__row-action:hover {
@@ -943,7 +945,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   cursor: pointer;
   text-align: left;
   font-family: var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  font-size: var(--co-font-size-12, 12px);
+  font-size: var(--co-font-size-14, 14px);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-secondary, #585858);
 }
@@ -965,7 +967,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2, 8px);
   padding: var(--co-spacing-md, 12px) var(--co-spacing-xs, 4px);
-  font-size: var(--co-font-size-12, 12px);
+  font-size: var(--co-font-size-14, 14px);
   color: var(--co-semantic-text-muted, #888888);
 }
 

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

@@ -245,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;
@@ -342,7 +354,7 @@ export class CoOptionList {
                 '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.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" }))));
+            }, 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);
@@ -353,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: '0c7bd9ada61fbe73efe303e5ea3745bf1390300f', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '7125f418aaf46bfc92bf96387d23975f2a97fdc1', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '34ef849033d03bbab79b020b77f31ecef32bb26c', name: "magnifying-glass", size: 16 }), h("input", { key: 'bcb6538309247d776fc12148786e19a5a8cdaf45', 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: 'eb0c6c9cede058369f87f8812f1fbdc500687f25', 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: '24528c2e44974d07a0fbd1358c54c5c4504a0815', class: "co-option-list__inner" }, showClear && (h("button", { key: '1ecbdd28f116ae0b94cc3ed9f321550601637fcb', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'bd2781f8450724065ca73f14cb3574e7183013a9', name: "x-circle", size: 14 }), h("span", { key: '6e3e73b331c42b9b5c479a28c5a20c8836d21549' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '671980fc29b319aed0065ce61b857ac144e0672c', class: "co-option-list__loading" }, h("co-loader", { key: '0677a97d9e97df7e5d183f0a7e430188887a2ef2', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '5f35f35d2251d2d0944005dd14f68170952ceef0', class: "co-option-list__empty" }, h("co-icon", { key: 'a166f1a172cec7d88ca230c0c3dc20fc1f54b9b3', name: "magnifying-glass", size: 20 }), h("span", { key: 'd913f59862e9e315875e6e37e088c4c92e5efa35' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'e71c23c9e944811e8a2fe22ed0da7e0079a09fc1', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '243cac58bf43d1d96517ce23339566f64ac0e829', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '88cacafb269fba4d2f257c3fb4e782aac87e6ccb', name: "magnifying-glass", size: 16 }), h("input", { key: 'bbf89cd00fb5abcf4da69cb8717dbde333c9bee5', 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: '7dad7f46277280ada5db040cc075600e1ca9fc8e', 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: 'ab0925bef3b21a9458bbf9e878050032bf12a314', class: "co-option-list__inner" }, showClear && (h("button", { key: 'f0191ab61018bf5f485e38a7ec91a3669be65d8c', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'f1fdecf5c762d0ea35fbc7b226db07af68ffe5f6', name: "x-circle", size: 14 }), h("span", { key: 'cc0f9bbbba12d77fe16b6257d1055ae0b5dfb412' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'a4d274d005e27eecc2aa00bc3e26200f609b6557', class: "co-option-list__loading" }, h("co-loader", { key: 'fc26901e715b626c554fbb966acaab6c6545dc65', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '8e5ec84e5b457fffe510811325167120bb93d0a4', class: "co-option-list__empty" }, h("co-icon", { key: 'f4432e87a933d6a26223095c8fb98c7d524e9ec5', name: "magnifying-glass", size: 20 }), h("span", { key: '9ff323be5cbef3a9e47a3a4df2d083e45ea8c66f' }, 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: 'b01020b03f69750a56d1b19c33773195ba284c8b', class: "co-option-list__loading-more" }, h("co-loader", { key: '7a7c78fb807ac6a4a30e6c36e59c98e491622b5d', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '010d69fe8d2a13f142226910d1f0755875dd3594', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'ef7037e0bd6ba1dac6c76641093200c952a4bcec', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '75da57f74983d6e1d6c51c9a7028ab5b60cb09fb', class: "co-option-list__loading-more" }, h("co-loader", { key: '2de686294f2b7420c914b7fc2de6ad61accef230', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'abfd2f90990eff232b87b64f5cfe80c158e2d51c', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'c8c245a8fd133ce0b24a135592a4bdac4d2da485', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -847,7 +859,7 @@ export class CoOptionList {
                 "name": "coSearch",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -862,14 +874,14 @@ export class CoOptionList {
                 "name": "coChange",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "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",
@@ -884,7 +896,7 @@ export class CoOptionList {
                 "name": "coLoadMore",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -899,7 +911,7 @@ export class CoOptionList {
                 "name": "coClearSelection",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -914,7 +926,7 @@ export class CoOptionList {
                 "name": "coRemoveItem",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -929,7 +941,7 @@ export class CoOptionList {
                 "name": "coReorder",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitido tras un drag-reorder: nuevo orden de ids seleccionados + \u00EDtem movido."

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: 'b801503a338c2fd3ed92a0448c09356970beebee', 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: 'ad290e1dde7d3c5bae0df9d69cd490c607d53bc8' })));
+        return (h("div", { key: '161c444c041a11e1582dc9f6ff9405a7cf7f58dd', 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: '81ca9b2a323b7bf5c8d47db1e0b4be1283063039' })));
     }
     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: '707564c0b96e4ef99a9cf99a34b19751808bd35a', class: "co-page-header", part: "page-header" }, h("div", { key: '8588626e6de02ba95f32966b40d2519fe3832e0e', class: "co-page-header__left" }, this.icon && (h("span", { key: 'de3903d4763f6db09651155ff1fc339fe347213f', class: "co-page-header__icon" }, h("co-icon", { key: '36b6931df7651c6daa86181280a741d391905516', name: this.icon, size: 24 }))), h("span", { key: '40946efea9e8a7cde96bf5a0de8dcafef4ff4797', class: "co-page-header__title" }, h("slot", { key: '0df50db78b3000f9b784b7e9c1d96cf7d2761861' }, this.heading))), h("div", { key: 'c8f84bd61e76a7d79f32b1985a476384f91ed6b6', class: "co-page-header__actions" }, h("slot", { key: 'a034ba5616842f98c6b4f2847dbfc22afc422aa7', name: "actions" }))));
+        return (h("div", { key: '305f42c88d10f238351f362b72283abe82eaeb20', class: "co-page-header", part: "page-header" }, h("div", { key: '10185fe127049bfece585c59f92824888113861e', class: "co-page-header__left" }, this.icon && (h("span", { key: '017bc4f2aed8d05999c581ce0d7a4797aa84eff6', class: "co-page-header__icon" }, h("co-icon", { key: '7d5863437875aa09ad3bbe9e12c0b5d5c9f5c0c7', name: this.icon, size: 24 }))), h("span", { key: 'e62ead8cb061045d8995689dce3009e9843e3997', class: "co-page-header__title" }, h("slot", { key: '9e1d01a94942daeeb1c56f1d0f05534b45125422' }, this.heading))), h("div", { key: '5a2dd08e5b11ab33e64ddb581196d8535deb0925', class: "co-page-header__actions" }, h("slot", { key: '7fd3a5ea06593c9208a59ba2812bb827f1d39815', name: "actions" }))));
     }
     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: '8284bc5388c552450f81718741a496f85fed978a', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'bec896d4bded4e50b7872468842b9ffc54c17d41', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'fd6aa534c7ce1e3a07144b975c767878c74478b0', required: this.required }))), h("div", { key: '2e76fbce6848dc629633f33b6c35240ef8d86ed9', class: "co-phone-field__container" }, h("button", { key: 'd10b160393d1387e5cb4ae5383cb799c7aa83c35', 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: 'b186df40f9625c1a948d0453b0c1c5552c0edcbc', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '18ac1c10191d9858b8f8ec6d2eacd0c5ea0200d4', class: "co-phone-field__chevron" }, h("co-icon", { key: '3ef2c5a5078f50b2142a4113c3dc06dd6ce5d1a1', name: "caret-down", size: 14 }))), h("input", { key: 'd802c344bd3f8b03bc6f4abafc827a116ad69529', 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: '1afbb3ac516442ce7aa31b234510cbfad91cdbea', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'c8d82c6dc2bac91e63fc6d436fa869c06b9f7127', class: "co-phone-field__search" }, h("input", { key: 'ed79f91223ee797a633c04401573592e30826b36', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'c17c257306957e24676efbe67dcacbbcb44cf860', 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: '715b34b6ddf4ffba355eb6adb8e1f1b95f84c427', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'bae83d720a649a103b5fb96e1d7574e5d7d43a96', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: 'cfff030caaf3479a7959244a8e2f55698aec962f', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '44113c6d2a4845b96b185bc1a291335ad099491b', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'aee2eced519f996ebf8941210e5151ebe32429d3', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '85b8d50b8062d0041b0f416beb7a140d29d06b1f', required: this.required }))), h("div", { key: '381313d069536477ded093cd236ff740dc534ae4', class: "co-phone-field__container" }, h("button", { key: '4aa81cd26e4824c45b9fd0530a4ff1016acbc877', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'd8ba9bbaae902853d97c37892ea2094a3a05c2ed', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '065c2daf2b277fd870204c989b3eb359aa68dec4', class: "co-phone-field__chevron" }, h("co-icon", { key: '53761d275d9f98010c197e7d8b8f5b20abf753fd', name: "caret-down", size: 14 }))), h("input", { key: '8340a483e8deaf24fd7b03d2239195064d392eb4', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '6e736fb24707feb8faf373a403b192670698a043', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f0750d83d3da8cebc3c1b39d21a35b31bc17bd4a', class: "co-phone-field__search" }, h("input", { key: '546c432e6e11010e2d685780e2f5eddfbf3ad73d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '5960b2979fbedf66ea197ff7f37093b6240242bc', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'fa9e15ba4f08abf2caff8b1b196ce25ce2e89bb9', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '122a32febae2d6f86e32d8b3d1f2ec2df9e573c7', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '6117ecd58a0c2ddefca94237f7c5d815fd5c3c79', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     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,8 @@
 import { h } from "@stencil/core";
 import { computePosition, findNearestScrollParent, 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}`);
 export class CoPopover {
     constructor() {
         // ── Props ──────────────────────────────────────────────────
@@ -11,7 +14,14 @@ export class CoPopover {
         this.matchWidth = false;
         /** Gap in px between trigger and panel. */
         this.offset = 4;
-        /** Close when clicking outside the component. */
+        /**
+         * Close when clicking outside the component.
+         *
+         * ⚠️ In a stacked popover scenario, only the top-of-stack layer reacts to
+         * outside clicks (see `handleDocumentClickManual`). If the TOP layer sets
+         * this to `false` (a persistent popover), outside clicks are swallowed
+         * entirely — popovers below it in the stack lose their dismiss too.
+         */
         this.closeOnClickOutside = true;
         /** Close when pressing Escape. */
         this.closeOnEscape = true;
@@ -37,6 +47,15 @@ export class CoPopover {
             // Early-exit keeps closed instances silent.
             if (!this.open || !this.closeOnClickOutside)
                 return;
+            // Solo el tope de la pila reacciona al click afuera: con popovers
+            // anidados (dropdown dentro de un panel de filtro), el primer click
+            // afuera cierra solo el de más arriba; el padre queda intacto. Nota: si
+            // el TOPE tiene closeOnClickOutside=false (popover persistente), el
+            // click afuera no cierra NADA — el padre queda protegido detrás del hijo
+            // persistente (comportamiento deseado: el hijo bloquea el dismiss del
+            // padre). Con un solo popover abierto, nada cambia respecto a hoy.
+            if (!isTopLayer(this.el))
+                return;
             const path = e.composedPath();
             if (!path.includes(this.el)) {
                 this.open = false;
@@ -45,6 +64,8 @@ export class CoPopover {
         this.handleDocumentKeydownManual = (e) => {
             if (!this.open || !this.closeOnEscape)
                 return;
+            if (!isTopLayer(this.el))
+                return; // solo el tope reacciona a ESC
             if (e.key === 'Escape') {
                 e.stopPropagation();
                 this.open = false;
@@ -55,8 +76,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 +124,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');
             }
         };
@@ -118,12 +163,14 @@ export class CoPopover {
             this.onOpenChange(true);
     }
     disconnectedCallback() {
+        removeLayer(this.el);
         this.unbindDocListeners();
         this.cleanupListeners();
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
         if (isOpen) {
+            pushLayer(this.el);
             this.coOpen.emit();
             this.bindDocListeners();
             // Schedule two updates: one immediate for initial position,
@@ -137,6 +184,7 @@ export class CoPopover {
             this.addScrollListeners();
         }
         else {
+            removeLayer(this.el);
             this.coClose.emit();
             this.cleanupListeners();
             this.unbindDocListeners();
@@ -223,13 +271,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: '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) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '3ceb088ee3bbb1cc0e721502e81a72aee13de267' })))));
+            } }, h("slot", { key: '3082d046fc973bd5f571b4f9b845844be6e6bf9c' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -343,7 +391,7 @@ export class CoPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Close when clicking outside the component."
+                    "text": "Close when clicking outside the component.\n\n\u26A0\uFE0F In a stacked popover scenario, only the top-of-stack layer reacts to\noutside clicks (see `handleDocumentClickManual`). If the TOP layer sets\nthis to `false` (a persistent popover), outside clicks are swallowed\nentirely \u2014 popovers below it in the stack lose their dismiss too."
                 },
                 "getter": false,
                 "setter": false,

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: '88de4aa234fc442abdd438c30e93cf98c1fc3602', class: {
+        return (h("div", { key: '1d46449d4034da8868004f4204007301126526dd', 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: '20302f98f83a18eda4477eeb333aadc6beead8ba', 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: '2bbc631c4ee331cc265b1fb779006b72f6cd436e', 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: '43d2823b3f20fb1c604fc0f9dab2cf15ca52db4e', class: {
+        return (h("div", { key: '161f80b35c78efff11e7ecbff1c9cb234bb85390', 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: '23165c28690602eeea2f22ecc66982dee7c2dd62', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '47b3c3ef7122c94c7ae216b7a3f5cb81cc9a028c', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: 'f68892a3b122f6ad97cb3a2415fd7456055fdc3a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '4bac057faa45335a4fba807b7a58eebdabd26489', 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.css

@@ -48,7 +48,7 @@
   background: transparent;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   overflow: hidden;
 }
 

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '336f85ea727de12ef444126ba6f428957463663c', class: {
+        return (h("div", { key: '4d3635f594d87efe5dbfee2dae2c57dd359c79f8', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '9f703411fc244639599918c9673e166ca6b820a6', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '8e438682bc870404be748acba71589ab87f63dec', 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: 'f7f027f702b41e9b52f281cb80ef05d57f0fae1b', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '17668c66e61b664e3b49a2acd230b99b2cf8409b', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-radio-group/co-radio-group.css

@@ -100,7 +100,7 @@
   background: transparent;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   overflow: hidden;
 }