@prolibu-suite/cobalt-core 0.8.0 → 0.9.1

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

@@ -75,7 +75,7 @@
 /* ─── CLICKABLE ─────────────────────────────────────────────── */
 .co-card--clickable {
   cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: box-shadow var(--co-motion-duration-base) var(--co-motion-ease-out), transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-card--clickable:hover {

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

@@ -33,7 +33,8 @@
   color: var(--co-semantic-text-disabled);
 }
 
-/* ---- Checkbox box ---- */.co-checkbox {
+/* ---- Checkbox box ---- */
+.co-checkbox {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -45,7 +46,8 @@
   overflow: hidden;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ─── SIZES ─────────────────────────────────────────────────── */
@@ -81,31 +83,7 @@
   border: none;
 }
 
-/* Checkmark via CSS ::after */
-.co-checkbox--checked::after {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  border-style: solid;
-  border-color: var(--co-semantic-on-primary);
-  border-width: 0 0 1.5px 1.5px;
-  transform: rotate(-45deg) translateY(-15%);
-}
-
-.co-checkbox--small.co-checkbox--checked::after {
-  width: 7px;
-  height: 4px;
-}
-
-.co-checkbox--medium.co-checkbox--checked::after {
-  width: 8px;
-  height: 5px;
-}
-
-.co-checkbox--large.co-checkbox--checked::after {
-  width: 10px;
-  height: 6px;
-}
+/* Check/dash glyphs: inline SVG for every appearance — see "GLYPH" below. */
 
 /* ─── INDETERMINATE ─────────────────────────────────────────── */
 .co-checkbox--indeterminate {
@@ -113,29 +91,6 @@
   border: none;
 }
 
-/* Dash (minus) icon via CSS ::after */
-.co-checkbox--indeterminate::after {
-  content: '';
-  display: block;
-  background: var(--co-semantic-on-primary);
-  border-radius: 1px;
-}
-
-.co-checkbox--small.co-checkbox--indeterminate::after {
-  width: 8px;
-  height: 1.5px;
-}
-
-.co-checkbox--medium.co-checkbox--indeterminate::after {
-  width: 10px;
-  height: 1.75px;
-}
-
-.co-checkbox--large.co-checkbox--indeterminate::after {
-  width: 12px;
-  height: 2px;
-}
-
 /* ─── DISABLED ──────────────────────────────────────────────── */
 .co-checkbox--disabled {
   opacity: 0.4;
@@ -144,7 +99,7 @@
 }
 
 /* ─── OVERLAY appearance (Drive selection chip) ─────────────── */
-/* Standalone frosted rounded square, no label, bespoke inline SVG glyphs. */
+/* Standalone frosted rounded square, no label, bespoke glyph metrics. */
 .co-checkbox--overlay {
   border-radius: 6px;
 }
@@ -177,17 +132,88 @@
   box-shadow: none;
 }
 
-/* Overlay uses inline SVG glyphs, so suppress the default ::after check/dash */
-.co-checkbox--overlay.co-checkbox--checked::after,
-.co-checkbox--overlay.co-checkbox--indeterminate::after {
-  content: none;
-}
-
+/* ─── GLYPH (check + dash) ──────────────────────────────────── */
+/* One inline SVG holds both paths, always mounted, centred by the box's flex.
+   Off state is double-hidden: the dash pattern is shifted fully out of the path
+   AND opacity is 0 (the opacity also guards the theoretical round-cap dot at
+   dashoffset 1, and any engine that ignored pathLength). */
 .co-checkbox__glyph {
   display: block;
+  pointer-events: none;
+}
+
+.co-checkbox__glyph path {
+  stroke: var(--co-semantic-on-primary);
+  /* pathLength="1" on both paths → the whole stroke is exactly 1 unit long,
+     so dasharray/dashoffset 1 = "not drawn yet", 0 = "fully drawn". */
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  opacity: 0;
+}
+
+/* Draw on check. The transition is declared ONLY in the on state, so turning the
+   checkbox off reverts instantly — no reverse-draw artifact. */
+.co-checkbox--checked .co-checkbox__check,
+.co-checkbox--indeterminate .co-checkbox__dash {
+  stroke-dashoffset: 0;
+  opacity: 1;
+  transition: stroke-dashoffset var(--co-motion-duration-base) var(--co-motion-ease-out);
+}
+
+/* Per-size glyph box + stroke, replicating the removed ::after geometry.
+   The check path's ink measures 9 × 6.5 of the 16-unit viewBox, so the glyph side
+   is 16 × (target check width) / 9, and stroke-width is 1.5px × 16 / glyph side.
+   Old check ink (centreline of the rotated 1.5px border L): 6.72 / 8.14 / 10.25px
+   wide. Old dash bar: 8 / 10 / 12px × 1.5 / 1.75 / 2px. */
+.co-checkbox--small .co-checkbox__glyph {
+  width: 12px;
+  height: 12px;
+}
+
+.co-checkbox--medium .co-checkbox__glyph {
+  width: 14px;
+  height: 14px;
+}
+
+.co-checkbox--large .co-checkbox__glyph {
+  width: 18px;
+  height: 18px;
+}
+
+.co-checkbox--small .co-checkbox__check {
+  stroke-width: 2; /* 1.5px */
+}
+
+.co-checkbox--medium .co-checkbox__check {
+  stroke-width: 1.714; /* 1.5px */
+}
+
+.co-checkbox--large .co-checkbox__check {
+  stroke-width: 1.333; /* 1.5px */
+}
+
+.co-checkbox--small .co-checkbox__dash {
+  stroke-width: 2; /* 1.5px */
+}
+
+.co-checkbox--medium .co-checkbox__dash {
+  stroke-width: 2; /* 1.75px */
+}
+
+.co-checkbox--large .co-checkbox__dash {
+  stroke-width: 1.778; /* 2px */
+}
+
+/* Overlay keeps its bespoke glyph metrics — full-box SVG, 2.2 stroke, white over
+   the accent fill (identical to the pre-unification inline attributes). */
+.co-checkbox--overlay .co-checkbox__glyph {
   width: 100%;
   height: 100%;
-  pointer-events: none;
+}
+
+.co-checkbox--overlay .co-checkbox__glyph path {
+  stroke: #fff;
+  stroke-width: 2.2;
 }
 
 @supports not (background: color-mix(in srgb, red, transparent)) {

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

@@ -47,7 +47,7 @@ export class CoCheckbox {
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: '75d235738fadf7408b5eb80c5178349f1ad53874', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e9a15cacae65f1f66096e10bf1a777a6e9eb0a31', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: '7e66ec4d016bbbbe050eeb10c57f562952b88209', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dd9c06e590b0cdccc24f6701ed4f5b80da36d091', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: 'a42bc52f90391be07a70cae1beec265080522b1a', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, h("svg", { key: 'a127c176e0233460f14c4261d8d2157e657689a9', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ad7dc0018cdae31156884cd04326bbcdba132b4f', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd665144b25aa51339cf9f6ce0e0edf65cfbe5a9', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '08d6c695e2cbb8188564dc8bb5aab9b569c24838', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -19,7 +19,7 @@
   max-width: 100%;
   overflow: hidden;
   border: 1px solid transparent;
-  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
   cursor: default;
   margin: 0;
   padding: 0;
@@ -287,7 +287,7 @@ button.co-chip--disabled {
   align-items: center;
   cursor: pointer;
   opacity: 1;
-  transition: opacity 0.1s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   border: none;
   background: transparent;
   padding: 0;

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

@@ -70,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: 'd08adf936ccb8e2b1ef10e82e4173571efc6fb9c', class: {
+        return (h(Tag, { key: '385173584372bbad8872565f1fc95e8ae8e14563', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -80,7 +80,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'b5d1841160ef7d72a5e41660a7cf161cca45c052', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'fba3454103156c3f0d2ffbed21bff3a0104d4351', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '371f6f6f3af2272892155f4d3e4f714aeea6d6b9', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'acce2aa1a4a8e5452154055912249b1aa1f1da67', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'f9f686487e6b31d85fc049d3ccbe9c20b29929c6', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '598a282686a50657283c2ea002e41584cade29e0', name: "icon-left" }))), h("span", { key: 'd5d62912bc89da7f6af34d48065a6ab8a63043ba', class: "co-chip__label" }, h("slot", { key: '67ee2a516d20d97eef9556c9c8e849d464ed6643' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '08d64c102684108eed55954881beab9a2078aa6a', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'b3439d3170f7ac2a63580e38ab7ca390e6bbf2ab', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: 'd3e5c2bc56c1e31a16a6e263dda57c19509ea459', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '89f2f5e870fbb629dcf56838f0ec394cd68ec5d3', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'a6d0133f96ef488d8e87d15269cd5d11d6bec2d1', name: "icon-right" }))), this.removable && (h("span", { key: 'c29aa14ff3fadd6c514dcfeffd7e1ed279783585', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '4ca4dea2ca89aa01187065618e63066c3e2d1631', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '97f5fc2b8e4f2624c3efe67a249f1b025b6aedb5', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'e15a293d9957fdbef33f22c1fe2b85423d22847c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'a680c376ac13140b2c073e01fc901f2cfa54bde8', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '73e58b8b90234eb883b6a1e49b5e37b267f03d1b', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'b944fbf0a0161846411d8fc2fe034c48c77d42ea', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'b24a5a3c64d0eda1b9d87c66ac93c0d4703973bc', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '9f1e7fa47bd86e1d7e4812ec0fe5f61490ab0878', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'e52df105783ff84c932bc289f6e88304ccc4240a', name: "icon-left" }))), h("span", { key: '269f54eca09a4ff301d9ec4e673bf9c8d19ccd87', class: "co-chip__label" }, h("slot", { key: '31fba7c9c05b830562800cc46c48e667e7dc046c' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: 'a455314236c688f2bff9185135787899da52ea5f', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '13e5862e03e2fcf7129230a4d68ce7e2b1b4f11e', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '66fc09efbdeea37f1dbce3b5ad4443a760618b66', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '7acfa1a23e294cb92b17d5174ec0a78161877624', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '9e8ded0f256a72ab81c587a82d2bb570930288f9', name: "icon-right" }))), this.removable && (h("span", { key: 'e30345ce825c823fbf7da1aaaec4141351e18a02', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '3d9777c29b706cda71ee64b313961c97e215b900', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd99af23fbbb7a8557b8cefd15a4cebdc7437ff43', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'aa99f2c0f6ec96f95656c607ca5846c282447e35', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,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);
 }
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48).
@@ -151,7 +151,7 @@
   border-radius: var(--co-border-radius-xxs);
   border: 2px solid transparent;
   cursor: pointer;
-  transition: transform 0.1s ease, border-color 0.1s ease;
+  transition: transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
 }
 
@@ -200,7 +200,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-xxs);
-  transition: color 0.15s ease, background 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-color-picker__copy-btn:hover {

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: '41a7a80f81aeaf71e1f8429e66aa5511437882fa', 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: '96404f15d058b7bc0b2d2c13b6744404cc11769a', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '16af407f56b58ad6ea649a19aa8a3c96f2caae04', required: this.required }))), h("co-popover", { key: '8eb3b862b8618b32d76e862ce003e667801c3262', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '0314b0dbf7404fdb23a0b5cd837b07b5879f85a1', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '0d08254d17a15786834c5de548526b6b359a09be', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'afbfa48cb5bd140767acdf2e1df35d7e8985948d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '9e0d22b668546a175c6e6559c2af5dd0de2a1843', class: "co-color-picker__panel" }, h("div", { key: '018fec91282680d660be82b01f340b29f13c73f7', 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: '83420abbf343f57fa57804c676fd22e91d2f6816', class: "co-color-picker__hex-row" }, h("span", { key: '1b9ce2cdb091734c9d34003c8ce48a165e8763a8', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '5733ec9110227e3ffa45c15c294629cfe420c485', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: '249b0f7eb80517c89ecaa11c09cf64ae70fd3d52', 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: 'aed9a2fe68c39047e6027c76c185a1cfc5abb097', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '276d4f39ca9f5be6add8bd2ae423a02960f82581', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '4f4323dc9f3d26581fb6ec1f5bd1e668e9a45011', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'ee725d0ce3a30985a71bf2d34e5e64124f89891b', 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: '6407a41a8e03d70e54cfd378747396a413eb0a11', 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: '86850ac9d0162b34369c70424549d101c9b72cc3', class: "co-column-picker__labels" }, this.label && h("label", { key: 'c05eccf88052fdcf8b593282daa1fc0f9a8bab1e', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'fe64f07fb1238d51506575c679bb33c7797c2edc', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'cb28e40aaf843c96a2649efef1e3803cde627345', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '37ab85bf708a3ba34f5ddb1ab416600b0d0be072', class: "co-column-picker__search" }, h("co-icon", { key: '8b10c859742279f5e11d764d6012429259bdec19', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '7f52dbbcc524bf78424cb85396ad62b68b16dac5', 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: 'ddbd0996534dcda27de900019d10b12eeb352d8d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'f4d997c88423b664f63fcc09acf5366f735f3a57', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '0e6ee3c9351c48c10affd4e2146cf9939a06971d', class: "co-column-picker__toolbar" }, h("button", { key: '101167f8a9da5f47dec86a94f9ffa0d4bb2edfbb', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '6e00fd6f1be5f2bc223dbb1b6800916d0872b7a2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '9446309b1a737059936a3fecdbbca37677544c49', class: "co-column-picker__toolbar-sep" }), h("button", { key: '7a014ee36386286cee3b97d1a67cafe8eca60ac4', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '09a58d24e5fef162b9c8452d905e36c89b5fb0a9', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '01468f7c6140081183cccb1c7ae063f8bbafad5e', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '94d9805ce88fed580da36d122d134c4f445df03f', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '95aab5f3408bf840d0e27f6e1de3908b6a9dd3c6', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '27533140acd117f09e981f307f0c39d741b92515', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7992e3f214985653e673f64f5b85e07be5298cc7', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '01eb7d766027a9c0cff30f91be730f3dbb4b2443', 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 {
@@ -204,8 +204,10 @@
    Dropdown panel
    ============================================================ */
 
+/* Sin padding propio: co-option-list ES el interior del panel (search margin
+ * 12 + options padding 12 — su contrato dice "el chrome es del host; aquí solo
+ * el interior"). Un padding acá se SUMA al suyo y deja gutters dobles (24px). */
 .co-combobox__dropdown {
-  padding: var(--co-spacing-md);
   display: flex;
   flex-direction: column;
   gap: var(--co-spacing-sm2);

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) })))),