@prolibu-suite/cobalt-core 0.8.0 → 0.9.0

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

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '2833a06b0f1ced02b1c1d7b4002757985e5f6184', class: {
+        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '74bdab766a1820cb43b88b9a994ea158e1a8f0ae', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'f8b117b8b9e1d6db47785783acab5e60e4bb9e7a', name: this.icon, size: 18 }), h("slot", { key: '4c96820ce0925af1a2fec623c4038cc117d2f5c6', name: "prefix" })), h("div", { key: '3c988300fe272d3da9b2ae6a463a4fdc6b683224', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '6f3d61fb883dc3d6fe4751044569ef791a87db03', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '37edcae63b25f9c54e27349cfcc121804255c83e', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '778b003dc31bc196a770a7dc6c4eebe649faf8c3', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: '609ad1694738508bed362594fc34609565eb5559', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '4c2231492bab190bda98189ae5d770aaf3aec3e0', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: 'edc4e2d138c4a888fa78981568a57beb9a5ef7e1' })), h("span", { key: 'ed100617bd1d7f54df33b05696948a187f5df07a', class: "co-list-item__suffix" }, h("slot", { key: '7f76f1a12a0b6c8f2e71e3140125797b62626e90', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -23,13 +23,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: '787947d309049a7ca5fa739a7748993833dfb80c', class: {
+        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '74c58b90643aa7cc33be7b42081a48e9f89127ed', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '752f888648a9c7dcbedadf880566646ff8280331', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'ee76649c415fbe00737d00584099bf359c1abcca', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dd160a9aec688bc4d97fb3a9245bcd613ff85cb4', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: 'a6ec84bed9d75673b7b917b2cb513f01545d5bf2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '9ce636bf0a3d9e53eb271803fc0bbd60f4314989', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '07016dfed6ee4ff793650d830f152d2555731550', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '825b3921b94248f28b30ce91b63525fd2fda5b35', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '92d59b733eb81e53e003ebcbe4324480fbcb4475', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'd8e70f68b13dd8f96a75d2f5c96b87651e1afc18', name: "trigger", slot: "trigger" }), h("div", { key: '2787503b2711a88baafcacad615814c0abbeceb0', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'f3e4139845c8f77970b735631e26f5cfc6710405' }))));
+        return (h("co-popover", { key: 'a386ccd371e9eb5627b6c70f43e66d6844df0b8a', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '9115ac2e7689183d9d397bd602d1a8651dcf364d', name: "trigger", slot: "trigger" }), h("div", { key: 'a56a14dfc5810144b93ca68ce54aceb7e5c2b85c', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '045510a7bbde56d841eee17d7561249a090e6de3' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: 'a305638c4f791be63278b343966cb22d92448ad9', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@
   color: var(--co-semantic-text-default);
   text-align: left;
   cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: var(--co-menu-item-height, 36px);
   box-sizing: border-box;
 }

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

@@ -54,7 +54,7 @@
   font-family: var(--co-font-family-primary);
   transform: translateY(8px);
   opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-slow) var(--co-motion-ease-out);
 }
 
 .co-modal--sm { max-width: 400px; }
@@ -124,7 +124,7 @@
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
   flex-shrink: 0;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-modal__close:hover {

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

@@ -62,14 +62,14 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: 'aef8eefd5790e210ada8e53f1d904dd7652b75dd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'dcf89aa4a6e783e16e99b3c350b917e073c26b76', class: "co-modal__frame" }, h("div", { key: 'c579fe7b0ac3b92c4a413eac9cc4a9da3ec06f69', class: {
+        return (h("co-overlay", { key: 'ff50cf55b239e9b98ecfd047f612b0ccbe53812d', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '344ca11c6dca11be7f130316979a0042c58a2727', class: "co-modal__frame" }, h("div", { key: 'd91ac84494926b9bee4f347dd14a9f1ca900c997', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '37bcab4a7d73d99ed199a4dc3ddbcb5d452f7f67', class: "co-modal__header", part: "header" }, h("div", { key: '1761b1fa2761ec89b74da943652533873ffb041d', class: "co-modal__header-text" }, h("h2", { key: 'f8ee41c7c122956431c388222cdde6263089118f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f719d9f6b3f974f0f677ac9daba1611e8e90d162', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'c893a1c5f36631743061ad71f5c120ba6d695081', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'afcce2e70b4045188ee37897798d8f54add996c2', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'ab2890e8f0e3308d9fe989107eebb6ca24161f6d', class: "co-modal__body", part: "body" }, h("slot", { key: '2991f8166a1fc52dbb58350ab5573d67a35ed2ad' }))), h("div", { key: '3d2a5f9aa2ba1eac6d11828e0653be775d9f9152', class: "co-modal__footer", part: "footer" }, h("slot", { key: '62ff2668995d3d9d33719b29a85a8afd31013042', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '9c2e4c0abfb160f422db6c048ba291fbfe403eb6', class: "co-modal__header", part: "header" }, h("div", { key: 'e35895ad9eca4b1ef77530353e86f1ea06e853dd', class: "co-modal__header-text" }, h("h2", { key: 'd628fe5b03db72fd8b632ff05df78deeeef1e85e', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '388698d018ccae8c14c3280c30e3039efe6285ed', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '9a9e313e0f6f39aa25ebbcf12a3893afc5dc48c9', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'ae3d4a26f37c459c9ecd9badb037fe4dfb8d1b20', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '13a32d3db0aed81e11670d64c41fb7022e26e16d', class: "co-modal__body", part: "body" }, h("slot", { key: '68edd276b236c35f73652ea8c676e736a9b939dc' }))), h("div", { key: '2346c64810c60f47424383c5e8cbccc909e2dcf6', class: "co-modal__footer", part: "footer" }, h("slot", { key: '8e824c5d5b8042046b0fa8605cb21b5081f5f97c', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }

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: '2bfd8f245fd8e93a2d085c5cecbe729a32f10754', 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: 'a07380f56382e9b96b335ab9169a16c8ed9e042e' })));
     }
     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: '5778de74c2122527e5e1dd5374ca7462c9777602', 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: '13944093fe31d72ffc4ed4170dfb756224d22e41', class: "co-number-field__labels" }, this.label && h("label", { key: '1bc489c56bb27e91da2f81e56632d3a7ae3fdf13', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'e69950bb76c776673c758086777fdf6329850981', required: this.required })), this.secondaryLabel && h("span", { key: 'd7418acba4cc4f4f585f339c74ff65ef2e7925eb', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '2c48d204e0f73570a6e8fb7fc1e62bc4edece3e5', class: "co-number-field__row" }, h("button", { key: '2c8e1a93f645b4abea04f3c1208420b33360dac3', 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: '5b97f5ee852aa45ad2a23479de2935a3bded9949', name: "minus", size: 16 })), h("input", { key: '71a9b87401cd8ae246feb7a11b6ade377449737b', 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: '8d1f92d1a292095a025123df72cbb1eddd856554', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'acfbb71c7e6da0f6af4a202453ab41d71f00cc0b', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '17ab4abf993d782e607a112d6eace5dcf98634d4', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '30d79b2b4e5ad4d9dd2d5c11b0ed176de32d3447', 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: '333ced48d340087501dce733c6e54708de8b5ac9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: 'fdeab7f5a8f87c4374e4d1c19dd722b013df093d', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '959111c29e78996eba76e0e4dc0b9a81139536e8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '57696fb113011d84e158cc3dfcbd619a0951c002', 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

@@ -778,7 +778,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   font-size: var(--co-font-size-12, 12px);
   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 +890,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 {

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: '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: '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: '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"; }
@@ -868,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",

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: '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: '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: '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: '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: '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: '88de4aa234fc442abdd438c30e93cf98c1fc3602', 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: '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: '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: '43d2823b3f20fb1c604fc0f9dab2cf15ca52db4e', 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: '23165c28690602eeea2f22ecc66982dee7c2dd62', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '47b3c3ef7122c94c7ae216b7a3f5cb81cc9a028c', 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-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: '58271c736f2b068e5453c904aac03fdb38b128f5', 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: '9bf5caf7c7b0197caa624e0893acb26c42b446d7', 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: '4f09ee5fe9807a7f2ebca3a1497edcfa482dbd99', 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;
 }
 

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

@@ -40,7 +40,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-border-subtle);
-  transition: color 0.1s ease, transform 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rating__star:hover:not(:disabled) {