@prolibu-suite/cobalt-core 0.8.0 → 0.9.0

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -82,10 +82,10 @@ export class CoColorPicker {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: '49d28cf02d9f34c887f7e14a062d8fa2a5c59d1a', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'a4b178f117d73a45a9d2ba0374646ab408b2fd6f', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '5be202bbcf4edfd7c565069213f749aaefef9319', required: this.required }))), h("co-popover", { key: '3f4435572ce8597f29d7feba26c9c5fe00c58b28', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f9980b7fa0c89648bc65dbf65017ae4489420fd5', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: 'd98f1d31fbede3d4c080e12789e5adf17f158510', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '73071f85034a2014e254001b1511dc89cbfdf526', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '75d0b455d0e74e642e8be472a1a4e436731f307a', class: "co-color-picker__panel" }, h("div", { key: 'f881490c55ce08e145fccfc6a9bd0759826a0542', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: '39bee984713a560a11494da8bcceab036edc81d5', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '765670fbc4a69ebf4879c0df7e92b3ba0981a110', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '0c6e39571005901dbe0dd2ebf00403a9974cb3ff', required: this.required }))), h("co-popover", { key: '67265bd33c0925214d995147c8903c2006b06eee', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'a4e2faa594b882fae5bf8de6e45a1724da4960c9', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '5a51908a5b101c580e2485080f7fbcad16ab686a', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'e24a5ffb3e920b01326658bca60d677035ab29ad', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '637e89f21b39dcb734b368d45b7d0d6461a0a0a8', class: "co-color-picker__panel" }, h("div", { key: '0cf67e473e847afe6219eb39279a971a37f25c60', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (h("div", { key: 'f909b634288d07472da28289a0baa98cf3fe372b', class: "co-color-picker__hex-row" }, h("span", { key: '566a04e86a1a0efc9f42458a893e7416b95427aa', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '18898c82c2aaf7c7b87c39c5d9d70bd31d3d04cc', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'bbdcfe3eb919ce5e09d288c496c445c58d3084ae', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '599526103113f33ba8e96a3700e047730956feb4', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '8c1550acdddf738736fcf1ea371a4d97eb3ff6b3', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '5465917158f37b874e7ae91c7b41d21f9953f607', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'f530d23a12e501a3574e6b9ecbf04f71c2bba160', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: '217066b5de2b03887e4dc98e13802eadcf0c02f7', class: "co-color-picker__hex-row" }, h("span", { key: '11d1ef4a88cad73e838357b924c0e72d1088ba50', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: 'c2669ea08315ba1597468a1a7d8570fa83d069df', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: '86683f2cc0e34bb7f38fdc7a5722a6670b5df4bf', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '73e74f4d090c64e991dbf08a618ff1a3560cfce9', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'ed69274b319c7113aa8f04dca3efbc58de520040', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '8cf77ec66eb909c1fd669422f77980a5b4a87939', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '965655ec9f90401dcfac3f73872e78ab0d3dcae6', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-column-picker/co-column-picker.css

@@ -61,7 +61,7 @@
   min-height: 40px;
   box-sizing: border-box;
   cursor: pointer;
-  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);
 }
 
 .co-column-picker__field--focused {
@@ -122,7 +122,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-column-picker__field-clear:hover {
@@ -133,7 +133,7 @@
   color: var(--co-semantic-text-muted);
   display: flex;
   align-items: center;
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-column-picker__field--open .co-column-picker__field-caret {
@@ -163,7 +163,7 @@
   gap: var(--co-spacing-xs);
   padding: var(--co-spacing-xs) var(--co-spacing-md);
   border-bottom: 1px solid var(--co-semantic-border-subtle);
-  transition: border-color 0.2s ease;
+  transition: border-color var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-column-picker__search:focus-within {
@@ -206,7 +206,7 @@
   color: var(--co-semantic-text-muted);
   padding: 0;
   border-radius: var(--co-border-radius-xxs);
-  transition: all 0.15s ease;
+  transition: all var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-column-picker__search-clear:hover {
@@ -239,7 +239,7 @@
   cursor: pointer;
   padding: 3px var(--co-spacing-xs);
   font-weight: 500;
-  transition: all 0.15s ease;
+  transition: all var(--co-motion-duration-fast) var(--co-motion-ease-out);
   border-radius: var(--co-border-radius-xxs);
   line-height: 1.4;
 }
@@ -291,7 +291,7 @@
   padding: 0 12px 0 10px;
   gap: var(--co-spacing-xs);
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-column-picker__node-row:hover {
@@ -386,7 +386,7 @@
   justify-content: center;
   color: var(--co-semantic-text-muted);
   margin-left: var(--co-spacing-xs);
-  transition: transform 0.2s ease, color 0.2s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out), color var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-column-picker__chevron:hover {

package/dist/collection/components/co-column-picker/co-column-picker.js

@@ -165,13 +165,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: 'a80fc1d3dcad1747d1d806300b81c3e72a10beb9', class: {
+        return (h("div", { key: '5cbbc6be16b4d266a510071fe49767c7631230f8', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ca8bc69a870b65f4b16026875a0feb799e8e70d3', class: "co-column-picker__labels" }, this.label && h("label", { key: '173aa03b66e2fec3f9157f92fbda875d1a23a2dd', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '46f6e14d50567ecc0cf3ef11e1f5b554700aaad3', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'bd9f290112ac732bf1d79762402eb9e487e529ba', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'b21d0dafb2c65cb0571e8cf070e757f03a2d668d', class: "co-column-picker__search" }, h("co-icon", { key: '48eac4a99e9badddcada4fe6b927b918c28bd59d', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '8f59474e4d593c9b9a6dceba72f13f57aa0faced', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '85db810426d03c4beace3ef5895a467dd2215807', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '616eb12fac37df98e30426bb431bf282f35c384c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '7fd12775dd7b756b1e6193a6a6d792ae688bfddb', class: "co-column-picker__toolbar" }, h("button", { key: '50821fab94549af6b92e911bbe8e2cff821e3b45', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '978f21c455f5651f6f62c35aebda69cda4967676', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '744cc9367dbe98058ddb6a71d3742b0c5867f372', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0369927d132be8feed66e0d4fcd077a937f60c0e', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '779a95a5949d2f6e09d593ab8e09b92fc027bd60', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'b33b051ee96dfd5b74929644429b11003ade8eb4', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '3e1f360328307d2493bbde4867767c36342608b8', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '2c36eed809b92c5114a9300ddfbd53347fcb5391', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '66a8cd7433e2f556227187631fec18975319ea3b', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '05b34fe973453b6c7ad30ccd426ff2994072b97b', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'a7bc18db7dd835f3384279a7bcc8d536db2f2fab', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '33713af3998ee49e4eb5530befc524be05748592', class: "co-column-picker__labels" }, this.label && h("label", { key: 'e4cf7db20568a098de850e9ef92a0f7149a9d86d', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '7686554a161210bfa911f4fa06e97b60bb2b5f03', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'e51ac5b668622f9c6ead8b4a8c944a76abfe1c94', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'd5cb02f41b24b1fdc93bca4e39411f8cfc55219b', class: "co-column-picker__search" }, h("co-icon", { key: 'a3a5fc81f70ec9f0e95eb49d17bb6a56d5f1dcda', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '589be3699eb770c74640a0bf8474e02031175492', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '92970f59b8b9a86252ae544f19cf22bba2c05b4f', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '7ceca0875ebaf7b99b1de777b69e22f741d665bd', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '5727d26c94d8204e8d82e08089f11775fbd6a201', class: "co-column-picker__toolbar" }, h("button", { key: 'f4429cb595b1e63c2469dffc1598d3f6acde9485', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '691ceb26cad861455227f28a0e663bec09b6e769', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: 'f73627c10fc45f7e5b92ca7dd7b9d5eddb161d7b', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'e2c6f0768a20d2942950699042f5993ae7e3009c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'd4b003607f2785c0ccf64aac7c4bfb067a29e443', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'b468c81d59ad9582f4395876b6296a2383c1f0b3', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '921cd53de036b62148a53607a47e909298857044', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '6bd3fcf4a1fcc5fe9b0ee8bacc297618689d626b', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'fd0e9f1ed158200848db8e9a4b2f703e1fbd59db', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2f41eab22739bae9a6f53e7f454fd79afaf231f3', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '93e3da474f483a441d4437074adf5eb14b6dcbbc', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@
   min-height: 40px;
   box-sizing: border-box;
   cursor: pointer;
-  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);
   overflow: hidden;
 }
 
@@ -181,7 +181,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-combobox__clear:hover {

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

@@ -69,6 +69,14 @@ export class CoCombobox {
          * normalizado `{ value, item }`.
          */
         this.handleListChange = (detail) => {
+            // co-option-list emite value:null al DESELECCIONAR → limpiar y PROPAGAR el
+            // deselect (value:null) para que el host distinga "vacío" de "sin cambio".
+            if (detail.value == null) {
+                this.value = '[]';
+                this.isOpen = false;
+                this.coChange.emit({ value: null, item: null });
+                return;
+            }
             if (this.multiple) {
                 const next = detail.value;
                 this.value = JSON.stringify(next);
@@ -224,15 +232,15 @@ export class CoCombobox {
         }
     }
     render() {
-        return (h("div", { key: '49723329c7a66fc87bac2280c36993aa7488e723', class: {
+        return (h("div", { key: '115947444bbca6363647eadfa82af752c5e9c59a', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a32ea355689787cf5e4175964284512bd10041f7', class: "co-combobox__labels" }, this.label && h("label", { key: '2ec23463de4b263fbbf3669fe7c6930719b97572', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '0fab4c10366d9f773eeef6912904a43e376685b5', required: this.required })), this.secondaryLabel && (h("span", { key: '3117d08e3d61799b840b6e12fd9bce7ed0eb74e8', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '28d93c37ef62f757ae27f25621036aac8bb3e752', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6e390e5d89d6e26abf75d3d8619bacb3e479388f', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: 'f0df056dcd2a6b6990e920efb88daadde3e1fee1', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: 'b25c9da054983f6d572f7d63ac063a9735871753', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '775183563b76c909d4d566b0f829a3a7cf7927f2', class: "co-combobox__labels" }, this.label && h("label", { key: '38441f5d492f9c0976fb20f299d82ac6129b2ef6', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '921136617ac8082a7f54e21fd4954e2a8a25870f', required: this.required })), this.secondaryLabel && (h("span", { key: 'f93bc3b87b8d16736f2326a54cc63799612fd7b2', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '295160e48bacd17ee7ec69b8f1c77da2436acbe5', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'e0f2595637c0e2362d6b07e36302c8080b31064a', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '560b912264de5ebf0e05c1e67afcd85c7e890d5f', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '455830491a53919efc40396c7664576e583f19ab', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'ac7ff27f3d4149260f441b3b81fba8b92d49bedf', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'ad11ddb7806a2b1cfe044f6d1773ac9e19c5afb9', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: '634a149b26996d648cb88095e80531314d0c13dd', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '8ac8d146143869b39c6f3908a3580220dab41642', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '82f61579e15806878fa2b0e3797e20b77a8d5465', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: 'b697324b29132b95d7c9d593f36452052933f22e', ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '151517f62b1188dd7ea3a3c53f69be9260e2cbd8', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'd6b65a3aa77340142038818d43cce73c39914897', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'e77f399023eab01cb6de4dd356a9dc897da58755', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'cad08054732494180772c881622362e9d592df26', class: "co-combobox__helper-text" }, this.helperText)))));
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'cd033364eb722a95343b8fd1229d1bd4e86ac6eb', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '9734b00f8d48310ec7643ecad7c37dc67b8d10a5', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'b5b4441482bd896ca54e651dd491ea947a72a163', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '2c1e33a3a5e13d77d7c4a646be2f723021608ce1', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '2860fe141048ca0e6eb3fd4d0354fec49d1a9234', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: '04a725a827b086bcd2942ca96b1e2739a459ac57', ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '40f9a6ba691c5766bd5d9c0dcf8cb9c467139ba7', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'e518fc76d1e94f2a9cf74e3ea6f934966b24f837', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: '72e7890676a61ff832894bf92530a032c6c5c85d', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'c5bf6bf198c8380cd787214e68eb2eacadb88f44', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -671,8 +679,8 @@ export class CoCombobox {
                     "text": "Emitted when the selection changes. `item` is the picked option (the\noption-list's native `{ _id, label }` shape); `null` on clear."
                 },
                 "complexType": {
-                    "original": "{ value: string[] | string; item: { _id: string; label: string } | null }",
-                    "resolved": "{ value: string | string[]; item: { _id: string; label: string; } | null; }",
+                    "original": "{ value: string[] | string | null; item: { _id: string; label: string } | null }",
+                    "resolved": "{ value: string | string[] | null; item: { _id: string; label: string; } | null; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/co-command-search/co-command-search.css

@@ -22,7 +22,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   font-family: var(--co-font-family-primary);
   transform: translateY(8px) scale(0.98);
   opacity: 0;
-  transition: transform 0.15s ease, opacity 0.15s ease;
+  transition: transform var(--co-motion-duration-fast) var(--co-motion-ease-out), opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   margin-top: -15vh;
 }
 
@@ -120,7 +120,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-command-search__facet-chip-remove:hover {
@@ -134,10 +134,20 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-md);  /* even breathing room from the input divider + bottom border */
   overflow-x: auto;
+  /* overflow-x:auto alone promotes overflow-y from `visible` to `auto` (CSS spec):
+     the horizontal scrollbar then eats a few px of height and triggers a spurious
+     VERTICAL scrollbar. Pin overflow-y:hidden so only the horizontal axis scrolls. */
+  overflow-y: hidden;
+  /* This row's scroll affordance is the left fade + sticky "Más" chip, not a
+     scrollbar — hide the native chrome (robust across OS "always show scrollbars"). */
+  scrollbar-width: none;          /* Firefox + Chromium ≥121 */
   border-bottom: 1px solid var(--co-semantic-border-default);
   /* Keep the active tab clear of the sticky "Más" chip when scrolled into view. */
   scroll-padding-right: 104px;
 }
+.co-command-search__tabs::-webkit-scrollbar {
+  display: none;                  /* Safari / older WebKit */
+}
 /* Tabs are co-chip components. Keep them from shrinking in the scroll row. */
 .co-command-search__tab {
   flex: 0 0 auto;
@@ -177,7 +187,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   font-family: inherit;
   text-align: center;
   min-width: 0;
-  transition: background 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .co-command-search__fav-card:hover {
   background: var(--co-semantic-surface-hover);

package/dist/collection/components/co-command-search/co-command-search.js

@@ -70,6 +70,18 @@ export class CoCommandSearch {
             if (item)
                 this.selectItem(item);
         };
+        /**
+         * Escape a nivel PANEL: el `handleKeyDown` del input solo dispara con el input
+         * enfocado, así que al hacer click en una tab/chip/"Más" o mover el foco a la
+         * lista de resultados el Escape se perdía (el palette quedaba atrapado hasta
+         * completar una acción). El keydown burbujea desde cualquier hijo hasta acá.
+         */
+        this.handlePanelKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+            }
+        };
         this.handleOverlayClick = () => {
             this.close();
         };
@@ -150,20 +162,22 @@ export class CoCommandSearch {
         this.close();
     }
     close() {
+        if (!this.open)
+            return; // idempotente: overlay-click + Escape + input-handler no deben doble-emitir
         this.open = false;
         this.coClose.emit();
     }
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '6e45f5a53f39f516cc8a3eb43180b4c6f6c413fd', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '0dbbb33bf84b9a0fcf94d71802b87a2d0d240522', name: "trigger" })),
-            h("co-overlay", { key: 'b7f46dde81f6f3462b550c3ccde29388604f9404', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '745f5b7e2a31897b88303deb6b49ba3787b7c7b8', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: '90f367e679c3e971cbe7823e766152cb02b2a018', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: 'f084dde02745550de0ebe92840f4a3f62e7eb543', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            h("div", { key: '2fa819f611d5e106367baecd8d0d468ef538abb9', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: 'ee17e409b1253cc447d9813a458c3b123597caa1', name: "trigger" })),
+            h("co-overlay", { key: '57f2be7cc61b9c73d20af7cabe44f27f52da130b', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '8e582bca997ca0b0ed0b77a26a2f5bce17540159', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick, onKeyDown: this.handlePanelKeyDown }, h("div", { key: '6252fab9df91285b063186c0814a678c2f91aec9', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '4ce68141969cd823f3b6d1e286dcd62609244587', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: 'd00091dd6ba08d3924a00965b769eec12bade9da', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: 'b7c60019d203f7575535a0d12525c55441ba9f69', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '6bb4a4c2745b060f5fc118ce42eeb233709e6cde', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'bc77af8a7d44a3156af87c1e0fb16392acca7aa8', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '565abed1c59c32ce3336e110cd9da6afadb693b5', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: 'f84db9e0b3f9c53d8eae6ab6edb790f189b3e49d', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '7f9e3b653c9d52d0438fafbb645506f3a7aa7f2c', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'fd734ad98b004d5e08f601631d6e2c547ef70dca', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (h("co-chip", { key: 'ac6931618eacc84c32006f53c8e0c5bbfec3d929', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'cd70456639c4e41268ddfff11f921c7a1dbede7e', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '024125d66406fb564e972f207f10972e7bbd944f', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '9b165c53215a7818efe9ca3ee7d601df25f03e7e', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'f1f97b1606aaafab94cc8f9d2ab66ce4948cae0b', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
+            }), this.hasMore && (h("co-chip", { key: 'f5812a94f9f24df93b34abd9588e43b354d6c5e8', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'b21f950593d51ecb05ffa7f752cd3b8eebf0ef08', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '054210475307154dbd369a6468e5bd38a88534a2', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '4cc849cf107af9b94cb9715a7d054f6567e75345', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'b48e7eb20f3591e8539211343908fa84ca1ebd1f', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
                     _id: it.value, label: it.label, icon: it.icon, description: it.subtitle, group: it.section,
                     disabled: it.disabled,
                 }))), autoHighlight: true, highlightMatches: true, highlightTerm: this.query, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListPick(e.detail.item._id) })))),

package/dist/collection/components/co-data-table/co-data-table.css

@@ -108,7 +108,7 @@ co-data-table {
   color: var(--co-color-gray-300);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__pin-icon--active {
@@ -132,7 +132,7 @@ co-data-table {
   color: var(--co-color-gray-300);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__th:hover .co-data-table__filter-icon {
@@ -164,7 +164,7 @@ co-data-table {
   align-items: center;
   flex-shrink: 0;
   color: var(--co-color-gray-400);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__sort-icon--active {
@@ -232,7 +232,7 @@ co-data-table {
   pointer-events: none;
   opacity: 0;
   background: linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ─── RESIZE HANDLE ─────────────────────────────────────────── */
@@ -259,7 +259,7 @@ co-data-table {
 /* ─── BODY ──────────────────────────────────────────────────── */
 .co-data-table__row {
   height: 48px;
-  transition: background-color 0.15s ease;  /* Browser-native rendering optimization: skips layout/paint
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);  /* Browser-native rendering optimization: skips layout/paint
      for rows outside the viewport. No JS virtual scrolling needed,
      no VDOM conflicts. Supported in Chrome/Edge 85+. */
   content-visibility: auto;

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.css

@@ -57,7 +57,7 @@
   text-align: center;
   padding: 0 var(--co-spacing-xs);
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__jump-input:focus {
@@ -76,7 +76,7 @@
   cursor: pointer;
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xxs);
-  transition: background-color 0.15s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-size-trigger:hover {
@@ -112,7 +112,7 @@
   color: var(--co-semantic-text-default);
   text-align: left;
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-size-option:hover {
@@ -143,7 +143,7 @@
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   white-space: nowrap;
 }
 
@@ -169,7 +169,7 @@
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-secondary);
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-btn:hover {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: 'ad2d4cf540fbae67f997c4e8800316297815a9c2', class: "co-pagination", part: "pagination" }, h("div", { key: 'df28ba06ed542fe90c20d1fa1b7fa0c9d52b70d9', class: "co-pagination__section" }, h("span", { key: 'f4342d215bcee3af2ad7a21b48807a56da1fd83a', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '8a43bbddf9541755d699bf945bbd9f3f2d86a24c', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: 'ccf2b514ca05bb56014a2adf60cc5b4a55e8c60c', class: "co-pagination", part: "pagination" }, h("div", { key: '49649c806450bf111bb7b2e26d004ac3c0b20373', class: "co-pagination__section" }, h("span", { key: '8419a89097e4e6a89777b346de6627da9331d0f6', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '315b8a1675fe6d7f3fca8fe0f1992bcbca9325a0', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '0c6dda33a8fb2b5117b92a450fd69fe5f441cacc', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'ac831c093350dba3acfa1411d56df5fb1593144f', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '259a54e96723ef0b7f6cef648665d446bf049c83', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '692fc67a27fa66edce0e1fda13fd4de1c9b76a6b', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '3cd29507bea87f9b9e079acd587b137e9e2ab66f', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '4ea1fdbfe7c1eb5b7fb67003ef38391e8e9045a4', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: 'a97c699d390734902220805bec64420deeb4fd6a', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'fcd095371ce699102ce8c66787918c065481e35d', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '1ba988e2bd9c457feefa8af4cd76b0bded02fd12', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '51d5d3917d817c9752433a729427550a38750e56', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '093883ae845b9f813337d296711c42ba130323a7', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'bbab8ec16c6abbd6f311bcbaafa1b9409f3c8a0f', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '2fd3277a44095c93825d8f7b11f6ae159edf9606', class: "co-pagination__spacer" }), h("div", { key: 'a3d16fd95c6c6e791818c6d1be760b5163187b90', class: "co-pagination__section" }, h("span", { key: 'dc536a071d1ca0b2bc3485bfc0c3aaecfd2178c0', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '415d04a264767e615fa742da1d7b3e509352555f', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '6b49bbb0cb284e1c0cdc38858412e3599d4a1206', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '970ec69d86943f9a2ce03427ca046767c853761d', class: "co-pagination__spacer" }), h("div", { key: 'd3b9ac58040df59daf1cb8848237ad8ed2b05604', class: "co-pagination__section" }, h("span", { key: '6c28ef609f8f3da05791e5b8ff56d84164984def', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '5a0d8770c82e23e93d3a5101111e65842af027d9', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '2bea97c046df6ee0d2a7d7de80762659eb2bf9b0', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '146515ae084df5f5e8d783a2e2c3f0d46ab971a3', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '0e432cb2ec4ff54997a0297ddd864bfe050c01a0', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,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;
   overflow: hidden;
@@ -116,7 +116,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-date-field__clear--hidden {

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

@@ -162,20 +162,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: '6d81792bd047804a420165f06bdd859a49d6b02e', class: {
+        return (h("div", { key: '58824a62494004dc20539095b0dc4b0abd672429', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '2d44a36188dca997cc42b7e165690348e61ff175', class: "co-date-field__labels" }, h("label", { key: '746f684d7f82ddcb520fc70e4ad745455b7cdfc2', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f0579a7f7916d3d9a0cb0be68e6fb02c0d3dc0d5', required: this.required })))), h("div", { key: '1299f5619feb689440fffef7f0871dae663990e0', class: "co-date-field__field-row" }, h("div", { key: '9e6ee26e724056007151ff41018723d3e92649fc', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '6fcf9075eff0d6cd3e034a7f1edfd346c30a26ab', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '75bbaa8dfd1c3adab3c59d3f5a9c909e43087464', class: "co-date-field__input-wrapper" }, h("input", { key: '95da11005e53369a65f3a9e0cb4aa2b7714c0739', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '31115e35a4c00f4bb41437e35a73ee6e7df9290e', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '35cbbc4dfcce22b17758b9585762bc7fe01463d1', class: "co-date-field__labels" }, h("label", { key: '172c4d990dc882b9fa6010287fdda46664473c5c', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'a2145c6218cf73a6ef8f248279eb3c468562d709', required: this.required })))), h("div", { key: '86b90e9a67887cbd164ec85822c2c9650cd4c6d6', class: "co-date-field__field-row" }, h("div", { key: '6ce335d82253cc3ae10d97ee76c7b7d19386fb41', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '93c3e62fba825f40062d6f4113802314c51fbc04', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'c9b227f14857a568ee2197590257313e805ef58d', class: "co-date-field__input-wrapper" }, h("input", { key: 'f756ae8a58864fb31bb707e65548e4c58c7cf217', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '2e2c361974484bb390d9d6f80b55f03857ffe568', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'daccf6656333b81a5b7aedc14f9fe358ad296cde', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b86c2a20e668f62de9dfce6b9dcd2a3eff0940ea', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '46951e15c38162880460268b278e1a90bebed78c', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'c1c29a37857c1c2d6894da49bb32d243cc2cf8dd', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'a0b4b27a1101a2993f488b88f072e681e4d6ef0c', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'eae215d0d4c99c6105fd72c8ee6704f8a1c8444f', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '401c012d2e6635920228d80675681da8f6c05e4d', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '0cb6f7e05efe31cdd32e09206b8367bc5fe180fa', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'afc623261826da8d6e94c866808b6eff58da1a44', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '20e477abb5f1069673f2b65100aa3b6c40b85a6b', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range/co-date-range.js

@@ -33,7 +33,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: '8f9d549eb8f80d07555a2cd97677ce3969fb4aba', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: '4c6ae7f2b043b03a896c94411ffb8dcd6b375ffc', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.css

@@ -46,7 +46,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-default);
   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);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -167,7 +167,7 @@
   font-family: inherit;
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .co-date-range-picker__preset:hover {
   background: var(--co-semantic-surface-hover);

package/dist/collection/components/co-date-time-picker/co-date-time-picker.css

@@ -56,7 +56,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;
   overflow: hidden;
@@ -134,7 +134,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-date-time-picker__clear--hidden {

package/dist/collection/components/co-date-time-picker/co-date-time-picker.js

@@ -367,10 +367,10 @@ export class CoDateTimePicker {
     render() {
         var _a;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '45d0284c91912bd5ee6f2c6a348611e0ef7c0dfc', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+        return (h("div", { key: '60bb94ab59fc09e96a930a5a615671e8f3eb1baf', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
             h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
             h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
-        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '1afc6190afea10f2dc7c9a04ed2624cc3a80e0f5', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '820935f800a6a1ecb036751e9267edfdad8f574d', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
     }
     static get is() { return "co-date-time-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform;
   z-index: 1;
   /* Elevation: a layered soft drop-shadow that follows the squircle silhouette
@@ -166,7 +166,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 .co-drawer__close:hover  { background: var(--co-semantic-surface-hover); }