@prolibu-suite/cobalt-core 0.8.0 → 0.9.0

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.css

@@ -16,13 +16,13 @@
   backdrop-filter: blur(var(--co-overlay-blur, 2px));
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.25s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-in);
 }
 
 .co-bottom-sheet-root--open .co-bottom-sheet__backdrop {
   opacity: 1;
   pointer-events: auto;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-bottom-sheet {
@@ -40,7 +40,7 @@
   border-radius: var(--co-border-radius-xl) var(--co-border-radius-xl) 0 0;
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
   transform: translateY(100%);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform;
   overflow: hidden;
   visibility: hidden;
@@ -53,7 +53,7 @@
 
 /* keep the slide-out visible while it animates */
 .co-bottom-sheet:not(.co-bottom-sheet--open) {
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out), visibility 0s linear var(--co-motion-duration-slow);
 }
 
 /* while the finger drives the sheet, nothing animates */
@@ -126,11 +126,3 @@
   background: var(--co-semantic-surface-page);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  /* near-zero (not zero) so transitionend still fires coAfterOpen/Close */
-  .co-bottom-sheet,
-  .co-bottom-sheet:not(.co-bottom-sheet--open),
-  .co-bottom-sheet__backdrop {
-    transition-duration: 0.01s !important;
-  }
-}

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.js

@@ -255,13 +255,13 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: 'ba3db3d99801b70af3d5adc93c83868e2b2df3e2', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '1003cdf6554d5594a3cd6ce51850cf767e76f5e2', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '8474a75c0b2bcf05e91f56274bbeef93e471b28f', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a0c45bd9389353b7c28a85cf02002e417e9295cd', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '36251f7b8031cb20ac95b9b8f674d094a5240789', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f6533a7ed9bf8985cf3712f6587fd129557aed75', class: {
+        return (h("div", { key: 'cbb30d66c27b5abd51309a1e55a920656a1a0c6a', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '0b6d164ff4a4520eb9f7cb54991540ba30a9d1e0', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'd0a06e9c2ef7389dee933edf6251e0578a78ca71', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: '749d7123e579ab46b63f6ccd14df28af0890f2fd', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '1c007545c0ab262abe4a2276fe10c18068c1d5c7', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'd1be5c0085c6dc30009ab792b91e86e97477861d', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: 'b7061e6c4d48b1a221805962ab55153e06edecf7', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '8180cb9cc8e1c234475cc02d7fdab3bc94fa7f31', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'e8094b7c7c0919b0cc724404b2c97c4c18b031c9', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '0b9271b2ad92c1a8f7bcfde66955ceb026b0fffd' })), h("footer", { key: '016e2c9974dc2a1c88aacfd0d5a7a6b6e10f1033', class: {
+            }, part: "header" }, h("slot", { key: '2163362b13cf19b1221f9655ec5b4b09085a2b6c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: 'c2f8f34cc167b14d62ac4a27396c8c72e05ab274', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'a89e7b39bd72311b5b0ccd5358c9f9e45618fa86', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '4424ce944ef083fc9c760774b30d66b48320fe8a' })), h("footer", { key: 'b3452533a6d25a0528c3f0456ce3413e9dcccef4', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: '5d571808b9b49eca346b7ce30525cab841b3ff4a', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: 'd697688035f2767aef0894f9cdf2b99bce9d2fb6', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "co-bottom-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class CoBreadcrumb {
     }
     render() {
         const data = this.parseItems();
-        return (h(Host, { key: '8ab383589f78948c7f11d38d4e25fa5509a56dbc', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: '25dce93deb73a903ac025ffeed54ca53ab1f22e3', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
             ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
             : h("slot", { onSlotchange: this.handleSlotChange })));
     }

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

@@ -29,10 +29,10 @@ export class CoBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: '16deecfc675429362263d3afb7257025e9170b26', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '255696950cd3a032a2c5e81afe2b7e495bc974f4', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '795723b3d89d48356ffe8f9a35df63d9d5dea836', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: 'a1bc3a756d0b2ead8a9f150f60688ae19f46cae0', name: this.separator, size: 13 })), h("span", { key: '6dada7bc4a556af7f3b9dc63d2b2d001c13e173e', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '63424dc201114b2a589559ee10324ee4cc9cc305', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'be25f19369d9f6d0459acd255793782c1580256e', name: this.icon, size: 16 }))), h("span", { key: 'e8f0919b4ab1ba60ae632ccd21e3f353b04deac7', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '0ac8d7d59e7828f939f637ef73ab7787a5c820d8' })))));
+            } }, h("span", { key: '6a54693a183953f9eaeabf2b4d687f28c479eef6', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '2bce60612e26554fd22a2bc03117e50e0d8efe36', name: this.separator, size: 13 })), h("span", { key: '889634ee730f05686916132456086e9f9a6f21db', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'c90e7812924e4fab4b928c7d892a4cba2f9a59f5', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: '344ff71c4fa9832600ad62df6935dcc695f9a4d7', name: this.icon, size: 16 }))), h("span", { key: '488e831a5cf405f135b7ddd20d95fe823e21ae29', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'c5b05d33b49d273cfc3360df9395ce2417234eae' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,10 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
   -webkit-font-smoothing: antialiased;
-  transition: opacity 0.15s ease, background 0.15s ease;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   -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));
@@ -137,6 +140,19 @@
   opacity: 0.88;
 }
 
+/* Feedback de presión: squish instantáneo; el release usa la transición base. */
+.co-button:active:not(:disabled) {
+  transform: scale(0.97);
+  transition-duration: var(--co-motion-duration-instant);
+}
+/* Primary rebota al soltar: el transform de la base viaja con spring suave. */
+.co-button--primary {
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-slow) var(--co-motion-ease-spring);
+}
+
 /* ─── ELEVATED · secondary → white raised button ─────────────────
    Opt-in via elevated + variant="secondary": shadow-sm resting lift
    plus an inset hairline so it reads on a white surface. */

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

@@ -53,7 +53,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: 'e765a1fcb3b4efcc7c43e155015b3c178a536d3c', class: {
+        return (h("button", { key: '297591f38c986f90e08de4e93a0da6da1b619a04', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -63,7 +63,7 @@ export class CoButton {
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabelText || undefined, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '8dd3e816276a67ba6072eeed1ad34a982b60389e' }, this.label), this.iconRight
+            : null, h("slot", { key: 'cec4aa8696050277860cc6d569b89b725647b3a8' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }

package/dist/collection/components/co-button-group/co-button-group.js

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', class: {
+        return (h("div", { key: '3d04106570e94fdd1787e5a1336b84b523c22607', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'c583ee5dd23aceea08c3178b93b6f1227101e96e' })));
+            }, role: "group" }, h("slot", { key: '6121a73fbe3f565b251f4db3f9d2ab45450f0a3c' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,7 @@
   color: var(--co-semantic-text-default);
   cursor: pointer;
   text-transform: capitalize;
-  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected) {
   background: var(--co-semantic-surface-hover);
@@ -168,7 +168,7 @@
   font-family: inherit;
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected) {

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '795529e38ec7b72934d786b9dcaa5046e73fbde8', class: "co-calendar", part: "root" }, h("div", { key: 'f409d1670f4f649d8e91f21915e0008d9ed330ac', class: "co-calendar__header", part: "header" }, h("button", { key: '23a4f12ec30cd86e49661daf755a6d2e23b209ad', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'ce6b736011e3ed13781cac180fe4542ec38c75c3', name: "caret-left", size: 16 })), h("button", { key: 'b1fcbb3d09e33b0b462bc278b46e14a348f9f9a9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'dbe1800ed74e234dc8f334183e504d19d8ab9d74', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'bdbda5999d20cb799aeabe48ebad6e8a4d7d89ff', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'ec2e268c38d04d1f298cfb12d29647b530b03a94', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '171842ca3d4b05a3bbc74266e4472914d3fdd075', class: "co-calendar", part: "root" }, h("div", { key: '4016b24331a9c6bf7da4b49ed37a21d0e4c8bbca', class: "co-calendar__header", part: "header" }, h("button", { key: 'a9483d553caeffd67a61a267e1de25b6ed8445f8', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'a866dd1fb1803e2550abb0711b75400e89b83fec', name: "caret-left", size: 16 })), h("button", { key: 'efd4f17cebfce1dd1bdfdfd0bf8e1aa9ca7ecc5d', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '9f137fb78bc788d5a9d482102dbcd3cb82d1369a', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '7cca94d77736780850cf33e11b84212fcc722d77', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '94e0659623a61aec52608280793c7a356fb329d0', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-calendar-month/co-calendar-month.css

@@ -82,7 +82,7 @@
   border-right: 1px solid var(--co-cal-border);
   padding: var(--co-spacing-xxs);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal-month__day:last-child {
   border-right: 0;

package/dist/collection/components/co-calendar-month/co-calendar-month.js

@@ -269,7 +269,7 @@ export class CoCalendarMonth {
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: 'f8bcb53b7ef7c47a1ff59caee0305dfc1a3f1fc2', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '11acf9973a13ad661590a04dd934c86ceaa10f5d', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: '2ed94ebcddb0f595f740adf3859dc4dcaff49b3c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '7348dc62431ab4a27295529ac8d596798eee87b5', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);

package/dist/collection/components/co-calendar-timegrid/co-calendar-timegrid.js

@@ -704,11 +704,11 @@ export class CoCalendarTimegrid {
             '--co-cal-hour-h': `calc(${60 / this.slotM} * var(--co-cal-slot-h))`,
             '--co-cal-hour-offset': `calc(${((60 - (this.minM % 60)) % 60) / this.slotM} * var(--co-cal-slot-h))`,
         };
-        return (h("div", { key: '6714fb717616dff758156f0fcf6d50370bcc52e0', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '86aa3ebcc5c8c3e66fc200b25819b8806a8883fa', class: "tg__head" }, h("div", { key: '63353e0fb0765f90ecaf6942bad3323497638a17', class: "tg__head-spacer" }), h("div", { key: '842770c40be192de75e8e3d8635d2f78976ee492', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
+        return (h("div", { key: '57f7c14647a8dbca49f999bfc256cf4dd58c6d5c', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: 'f50ac115f074e8749c19d57d47b3bb3486ae68c1', class: "tg__head" }, h("div", { key: 'adf1e34eae02f86ae7eb3721374660ff4c1e4fe8', class: "tg__head-spacer" }), h("div", { key: '5907deb540459a618374a1eb42736ddd3f3d23f6', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
             const ymd = parseISO(d);
             const dow = utcDayOfWeek(d);
             return (h("div", { class: { 'tg__head-day': true, 'tg__head-day--today': compareYMD(d, today) === 0 } }, h("span", { class: "tg__head-dow" }, short[dow]), h("span", { class: "tg__head-num" }, ymd.day)));
-        }))), this.allDaySlot && (h("div", { key: 'f78e9159e84ecc4a0259c296e1120830b2a2513b', class: "tg__allday" }, h("div", { key: '255ad5c8e6a8c93377c2898acb8ecc06e0a0eb6d', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '5023271e34910ac5dead15f4b4a4bd4c588b6594', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates.length, byId))))), h("div", { key: '5d37824151562d8a53906ecb059d96afdee93d3e', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: 'ebeac3733271bd3ebcaca2343a9f5f01285a7f05', class: "tg__body" }, h("div", { key: '9eed6c09dfe67a9613c0641dbc305ba594312166', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (h("span", { class: "tg__axis-hour", style: { top: `${minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), h("div", { key: 'bc8f8c0e5bf00c8fc92bb6c823fa9ba6c321ad2c', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
+        }))), this.allDaySlot && (h("div", { key: 'e517b7a6418d50c418d5d799d0bc623b5946cafd', class: "tg__allday" }, h("div", { key: 'b470f6f08482c15459f05a95508c66f0e2244860', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '50f2a093550f7320b602cc81dcfd1d1438071539', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates.length, byId))))), h("div", { key: 'fc2f4ad9bf8ab22930907c6ca2f7239ed4a57659', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: 'db4a5798f1d587485b31884ebaa2ed853417c031', class: "tg__body" }, h("div", { key: '168e7a54caee97f7219a26d46e6b42b51ac86f88', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (h("span", { class: "tg__axis-hour", style: { top: `${minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), h("div", { key: 'e0f1a5558b07db8abb5586d01cdf3f30eb5f0e3f', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
             var _a;
             const isToday = compareYMD(d, today) === 0;
             return (h("div", { class: { tg__col: true, 'tg__col--today': isToday }, "data-col-date": d, onPointerDown: (e) => this.startSelection(e, d, e.currentTarget), onPointerMove: (e) => this.extendSelection(e, e.currentTarget) }, this.loading

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: '52e3eb679a025b1b53854b38063b6fa951cf9f70', 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: '753b2277a6629673e8583774e126b2472709221d', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'f73192e7fa291c8a2d831a0f9db7ebe8a7ef8907', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2916b424d3cb1feacf438678132d10217df51ad9', class: "co-card__body", part: "body" }, h("slot", { key: 'f957907056567d135c3de5d412251911c7cf8db0' })), h("div", { key: 'f1f183b7d3eacbd11787e0cc3d0ef438f8272480', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '2171a95906d5b862c7b39a756cafee17d86f7dbc', 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: '2e2d00e6956b5de4af5950ad6725a77023420f11' }, h("div", { key: '40878a4740b4ad9bf70cf9816d7edc89b8bafeda', 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: '5c0ec11025ae5c6eb3a88b10595c243a9b910671', 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: '746d85f914bc24ca86ad88005fe95a214de7cd31', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'b33c34a9cb6e03af50176094a89b1c79d363f13d', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '4f30b56e84da8f7e15b6cea71a0238f5cd19f39e', 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: '09eaa1a665762f7e2b372eb264860e182e411d17', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: '7026bfe945ee42ef7b0f9194ecf6a04f0ef1ab1c', 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: '564f5bc3bef0b0ce23e8be91bed8e37540209a7b', 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: 'b19aed5296fa2f3547e85e6c439589703809bae3', 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: 'ae04768a65db80be93705a0ff9d0852ae2e6d0cc', role: "group", "aria-roledescription": "slide" }, h("slot", { key: '7a9f94454ca5e2574b4161ed06d863728c88a814' })));
+        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 ─────────────────────────────────────────────────── */
@@ -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: '31690de633689da0b273e3c88cc200cabb4cee75', class: {
+        return (h("div", { key: '8512f4efb36fc42d7099bc157a691de4968f2490', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '2b0c4ebbe4c7a7a8046cf726e682a3d42ae3ebbe', 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: '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: '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: 'd08adf936ccb8e2b1ef10e82e4173571efc6fb9c', 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: '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: '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 {