@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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-card/co-card.js

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: 'e1ea28f75af30a37b0a0792b9302c982c2b45094', class: {
+        return (h("div", { key: 'c0d3f41a0cff0f996107efeb837028cb9df5622f', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'e0019a733fcff7c2dfd83e828e7dd5e65febf833', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'aff49ea9c68e0d7a9f01660204e7dee4adfce624', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '4a72f6d3549a1495e39a18ce3ee940c49e336a84', class: "co-card__body", part: "body" }, h("slot", { key: '48b574aac71e28f58938c8a7586f00f120a372f5' })), h("div", { key: 'cc6bd0344905c13602383e0a6c89b725cbffe2fb', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'fb5bfec7c5b62715002cc002807889e81a2f5df4', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '89c672edd380accecd0f6a56095b62d3d240e59d', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '96adc4a95d1c92b04c2ba9dd30cf9397c593a71a', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '996fa0fbf2d208968302546d22874cec83a7ee14', class: "co-card__body", part: "body" }, h("slot", { key: '437234dfa32ac3d4b70f03db835f10a772ce462f' })), h("div", { key: '45c69a6951e26da78ef1ee010cb88fed12e69c91', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '0d782397843ed0c0219ad846712dff60df87a1b2', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -303,11 +303,11 @@ export class CoCarousel {
         };
         if (this.dragging)
             trackStyle.transition = 'none';
-        return (h(Host, { key: '29c8bdeb6a2c402aa46e6a1b3a442abbb8f9967c' }, h("div", { key: '5a57b4b999cdac0def308039ba0a4edcfba9adf5', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("div", { key: 'a20cec4e9d8144868ac4f53f72d536272def9119', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, h("div", { key: '98755bee7cd2d8da45a8ffb2abcd048f0de440ad', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'a3e9a2bffb93be5ebb60ba61130ab362f3793ccb', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '516649b789c44ba235991f6fe3c6aab2a6a2fcf7', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, h("co-icon", { key: 'ffcddd1e02ce1d699052290e8df6ab2463b27a20', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: 'a7d6989b1c18d3598dc6c7c9e6606b2cf31fc026', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, h("co-icon", { key: '9e26adf68047395cd0cb265cfeaba3b4af6b950e', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
+        return (h(Host, { key: '6f8c3beab5f19295967112e74f2e6a6851ea5540' }, h("div", { key: 'b9c208d9157085b462812114dec5ff08269147d2', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("div", { key: 'eae4ec92ae6e6fdbe79b5a519bafc6673aef2b79', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, h("div", { key: 'a322e37ee9c414b38215de1ba2ba3f2f0a0a1bba', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'f4fcfbe79986c5883acc1f04f2fb064991713b7d', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '8c2b328e0d4303079b50d498f36e1148dbd10236', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, h("co-icon", { key: '126f86fe6944188ff046a1257a911d3478b571d1', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: '1139fadd622c526aaed8e0603dfec25215257ca4', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, h("co-icon", { key: 'd10dececc05054417ce07c15e435f516e3836f64', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
         // APG grouped-carousel picker pattern: plain always-tabbable
         // buttons in a labelled group (tablist/tab would demand
         // aria-controls + roving tabindex we don't implement).
-        h("div", { key: 'd64ee6b57da49e5025c6f5a6faa3f58ba6855f49', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
+        h("div", { key: '97c9b77dc7b838b75ee152f3f2cbdc85025b8df8', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
     }
     static get is() { return "co-carousel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CoCarouselItem {
     render() {
-        return (h(Host, { key: '70a79bb97b8a0dd47b48c1df02e58a63d9a0f712', role: "group", "aria-roledescription": "slide" }, h("slot", { key: '9b639772cf96b15aa38ff4b2821ef9ca2a7faa53' })));
+        return (h(Host, { key: '1c40138cc7732c414e5355dc9e0e77a1424f005e', role: "group", "aria-roledescription": "slide" }, h("slot", { key: '55d8ca50e2831597de8c142abecd1400394bc546' })));
     }
     static get is() { return "co-carousel-item"; }
     static get encapsulation() { return "shadow"; }

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 ─────────────────────────────────────────────────── */
@@ -72,7 +74,7 @@
   background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
   -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  border: 1px solid var(--co-semantic-border-subtle);
+  border: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
 }
 
 /* ─── CHECKED ───────────────────────────────────────────────── */
@@ -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

@@ -37,17 +37,17 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
-        return (h("div", { key: '7d7318c97238d5784bc5e97b4d062324567f4298', class: {
+        return (h("div", { key: '8512f4efb36fc42d7099bc157a691de4968f2490', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '6a9eb80dd31b3fdcbad3fd5375c24a7039d7ed91', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '372501973b4a30b12b1ed972b7bbe02cfa21c645', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 '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: 'ea2fc2c66f3fdf9a385d30fe1c15a50196d61502', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '9a0c46128e14f5e62e956f51d292f8d59aa23bee', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: '5898d1b96e97a2ba71bd80ef4ee9446a1250e88e', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '9dcac76996e654417555489e7d2c1467848ca242', 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: '3833a6596021f89ac26cd5201911d8fa4ca2f19a', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, h("svg", { key: '035d30ff80e7211c8ffc1a8fd52a02bbefdb2bad', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '9e193614634bbeb551c7425540e6b5b3746d3840', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '47acfb0fd751073079d362750d2f261a3b422201', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: 'c139d59e1f591a4fe4a2df5af4c137ccf7776706', 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: '05440263b3d6ba10c01b5c85e345dcaa121e3237', class: {
+        return (h(Tag, { key: '2eded6f64036918a71cb6d826ff46f3c4f23bf56', 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: 'd71d63015f9a594587f146cc041032381b22d369', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'fbf6114ccdbac2b6f7cce84d98b5d695a141bcd1', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'db9984dcec5a53b9ddbd3d535031b46e25477b83', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'cd745b03f23e86da95bc0eba975ebc3764b9661c', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '696a9b35c06a12b107cff95192e01584e167f147', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'c485bf176b6f45ad04de0ce40e76c3fee9810a44', name: "icon-left" }))), h("span", { key: '30f93d2f29ced9dc817619f9b83c7e12e69c6664', class: "co-chip__label" }, h("slot", { key: '3e103e98d2557ac3fa9eb130a1ddac431c2005d3' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '65bd6af3007737372daef2afe379820ccc8addef', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'acac0c84b83a53ad1fb9b22143ae2f31701ac226', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '60ad2e85d2c5658b3c4be23709c9aca6578fc4ac', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '020918e258d6d24b1a7d9f40dc8b90f31ce85690', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '1fdd279b5f3c8b24c8a6668441e09b6c3e90f900', name: "icon-right" }))), this.removable && (h("span", { key: '46bc990ba24fcf03ae0eb8f32797908c728ccddd', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'f18f1110893d39b013bb4d8f4bea117f107a8509', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '08ec959ca465adf3ac138336c7511293874bf540', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'cd706e153280db4f0a4aa039e569d4cc123b8348', 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: 'edb4ba89143cd35f03289454fc300c23a6f66937', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '6f1f32ac64632d33b37990a3ec89480be21e9fb7', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '884da98449796a656940642180f2c378cd34b497', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'e05a7cf7c293e8508301e02f7322aab9e2b9665c', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'b36181f6ca4d301ede3db88eff2443a860e96f23', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '4307af0a174e9d0bf76df1bb049cd2234c9ae8b4', name: "icon-left" }))), h("span", { key: 'c4c961ea007fc48451baaa9753295bf233aeeb3b', class: "co-chip__label" }, h("slot", { key: '001941b642afaf196126d504d86aa757f68e7755' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '967d58dbd630191286d80b0f91c928a6fb9cb064', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '41bbeba200a447f0e8de92e5ec0dab9c783c4cef', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '78f78aff00ddc41496e18b7eb0559f687a0a6657', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '718b94bfe81dcd45966c26460e083f111affab3d', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'bc5844d1a367981eaba3f511b5bfd702a3129550', name: "icon-right" }))), this.removable && (h("span", { key: '785b85d4d55589f3a78276b2c2c2d4ef0aa703b3', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '4407166fef4e6d7fd52a096877e26dfa99e62141', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '8777ee3042923c17c632f6f4e76141cf0bf6c3df', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '39cc12d2838488eb5cbc5d97ab94870083314715', 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: 'bf1e124470ecaf6d214835e8bc01d481496c1c20', 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: 'af52a09e440de00f4f1951715043dfcc24291653', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'f6a5f5c10920f7289993d9d965e3b2eeff1e9a08', required: this.required }))), h("co-popover", { key: '865fe6f411d3f2312b1b1d0a089aae7ae19b4e6f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '29feea25617531aec3072b6002a2cd3c13eb25e2', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '60ccd85b737ba09947ef2b5a9e64a0647bebfa6c', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '1fae7ddf9b14ed14a9603cf9d9ed45b358d735b1', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '6cea80c1c13136d9526ab93d667c209bd1871f02', class: "co-color-picker__panel" }, h("div", { key: '637520727a4452a3de87a0a11715804a8a2cfe2f', 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: '21c2ea411903edcd18b40e91afdec27344e55185', class: "co-color-picker__hex-row" }, h("span", { key: 'ab7ec79d4edaf97e957735a64bb2cd806acdb8a2', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '2526d185d375c0ac45c0ac088c3820e28bd94853', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'b2a5e1905f629bce7e910261eaa9731bef53110b', 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: 'c642e0f8093ae192cd23439e8cd80694f90d2ecf', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'f66cf310df66ac16283afa1d47974a71af66816b', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'c9578df8cc86de8ab277f44a72fae56f5f586004', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'c9b47133735bba79269e62d80b402766c4a8b019', 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: '6b8c6cfe2e881d0cba238960fae867205aae32c9', 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: 'b390d0401f69250a1a926f933d181be9a57e4f09', class: "co-column-picker__labels" }, this.label && h("label", { key: '6a073085876d0a24fc0e6083645de267c63ae16a', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'cd41ce02c3bee55bb80fc05cfbc69c662e747c5d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'e508300691a608eba74f0eed4564d3eb00d473ce', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '849fa75718686b0616ba36af36eacf2445e68e95', class: "co-column-picker__search" }, h("co-icon", { key: '5a5ff7c464cc5966164621e7c60e58e87cd42c6d', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '2e4c97aa689ffbec464e63b27ff502cfdea1da20', 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: '2ee4f153a3c3ac3788338c94a7864602630f59fb', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '281833ffc8f4a0bbe0287c55733fc0fdcd5cd1b6', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'cd4c8b1f1bfd728f118668aec42e486a4a9cbaae', class: "co-column-picker__toolbar" }, h("button", { key: 'c903f236b2c08a8d879c2b04eaaa54dc719ce7e2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '42846fde5f9f53eb7bfe40b61781fd9ce7fbdb51', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: 'fda2bf84b90e2523cd27d35eca52c99b9b036101', class: "co-column-picker__toolbar-sep" }), h("button", { key: '2e084ef4652b9286a917849b790f053b65a33096', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'e853c6a5177863da0ed836b46cf4d446801b2c33', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'e68c03ccbdd3ae1f1402caacd08454574614ec9f', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: 'e132ebee1af4b1b73d7587589c9f6de5d6c663b0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'ee5c9f8d58f0a36073bd2dc206b5113002464f6d', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '15e9d64ea94e93119198cf33a375927f37d4f795', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '75539629763f3efc4a8c354954a3c0d166e108df', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'b84d6dee0cc0fc6cbe91aa67599e26a71e1a3a3c', 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": {}
                 }
             }, {