@prolibu-suite/cobalt-core 0.8.0 → 0.9.1

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.css

@@ -240,7 +240,7 @@
   width: 100%;
   text-align: left;
   color: var(--co-semantic-text-default);
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   font-family: var(--co-font-family-primary);
   font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
@@ -267,6 +267,16 @@
   backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
 }
 
+/* Hover on the ACTIVE item: keep the workspace pill, just MORE opaque (solid
+   --co-sidebar-nav-active-bg-min vs the resting 85% glass) + keep the adaptive
+   active fg. `.co-sidebar-nav__item:hover` (class + pseudo = 0,2,0) otherwise
+   outranks `--active` (single class = 0,1,0) and swaps the pill for the generic
+   gray hover; this rule (0,3,0) wins so the active state persists on hover. */
+.co-sidebar-nav__item--active:hover {
+  background: var(--co-sidebar-nav-active-bg-min, var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover)));
+  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+}
+
 .co-sidebar-nav__item-icon {
   display: flex;
   align-items: center;
@@ -310,7 +320,8 @@
    .co-sidebar-nav__item--active treatment (frosted --co-sidebar-nav-active-bg +
    backdrop blur + adaptive --co-sidebar-nav-active-color) so the collapsed
    active chip matches the expanded one in color and treatment.
-   (--co-sidebar-nav-active-bg-min is no longer consumed.) */
+   (--co-sidebar-nav-active-bg-min = the SOLID workspace color; consumed by the
+   active :hover state above and by the flyout active item as the opaque pill.) */
 
 /* — Flyout (mini mode hover popover) — */
 .co-sidebar-nav__flyout-anchor {
@@ -329,7 +340,12 @@
   display: flex;
   flex-direction: column;
   z-index: 9999;
-  animation: co-flyout-in 0.15s ease;
+  /* Tokenizado para caer bajo el zeroing global de reduced-motion. 0.15s → fast
+     por consistencia con la tabla de mapping de la task 8 (0.15s -> duration-fast,
+     96 ocurrencias hermanas migradas así); no "base" pese a ser la convención de
+     entrada de co-popover — un feel más lento para este panel es decisión de
+     polish (task 19), no de esta migración mecánica. */
+  animation: co-flyout-in var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-sidebar-nav__flyout-title {
@@ -361,8 +377,13 @@
   background: var(--co-color-gray-100);
 }
 
+/* Active flyout item = solid workspace-color pill + adaptive text/icon, mirroring
+   the collapsed mini active chip. The background MUST pair with the app's adaptive
+   --co-sidebar-nav-active-color: on dark workspaces that color is #fff, so the old
+   flat gray-100 background rendered white-on-gray (invisible). Pairing a solid
+   workspace bg with the adaptive fg keeps it readable on BOTH light and dark themes. */
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active {
-  background: var(--co-color-gray-100);
+  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));
   color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
   font-weight: var(--co-font-weight-medium);
 }
@@ -377,6 +398,11 @@
   color: var(--co-color-base-negro);
 }
 
+/* Icon follows the active text color so it stays visible on the solid pill. */
+.co-sidebar-nav__flyout .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon {
+  color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
+}
+
 @keyframes co-flyout-in {
   from {
     opacity: 0;
@@ -406,7 +432,7 @@
   width: 100%;
   text-align: left;
   color: var(--co-semantic-text-secondary);
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   font-family: var(--co-font-family-primary);
   font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
@@ -426,7 +452,7 @@
 .co-sidebar-nav__expansion-caret {
   margin-left: auto;
   flex-shrink: 0;
-  transition: transform 0.2s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
   color: var(--co-semantic-text-muted);
 }
 
@@ -442,7 +468,7 @@
   overflow: hidden;
   max-height: 0;
   opacity: 0;
-  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
+  transition: max-height var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out), padding var(--co-motion-duration-base) var(--co-motion-ease-out);
   padding-left: var(--co-spacing-xl);
 }
 

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -496,10 +496,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: '637707894cb777ff149c0516aff13786054e5393', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d98909c4d5d0f17eb478fbd01603884d040f45f', class: {
+        h(Host, { key: 'fa9a50c4a517fa550406669bb3d40abbf12db32a', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '5df964b67ed0e376a268dd28e1095b985c0b328b', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'd46c1e3b5e60ded1d232e7ccf8beb768d34ffe88', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'c276aacf1b0b9eb66e35977d124465c400c96cd1', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '233bdc2410690a010be28e57f71880f885edd711', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: 'c7eca2183d2d738c8eb59980c05c8a83a8344d68', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
     }
     static get is() { return "co-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@
   height: 100%;
   background: var(--co-semantic-surface-primary);
   border-radius: var(--co-border-radius-full);
-  transition: width 0.05s ease;
+  transition: width var(--co-motion-duration-instant) var(--co-motion-ease-out);
 }
 
 .co-slider--disabled .co-slider__fill {
@@ -101,7 +101,7 @@
   border: 2px solid var(--co-semantic-surface-secondary);
   box-shadow: var(--co-semantic-control-shadow, 0 1px 4px rgba(0,0,0,0.12));
   transform: translate(-50%, -50%);
-  transition: box-shadow 0.15s ease, transform 0.1s ease;
+  transition: box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   pointer-events: none;
 }
 
@@ -110,6 +110,13 @@
   box-shadow: 0 0 0 4px var(--co-semantic-border-focus-ring);
 }
 
+/* Manipulación directa = sin transición del fill (evita el desfase fill/thumb
+   al arrastrar); el token --co-motion-duration-instant queda para saltos
+   discretos (teclado/click). */
+.co-slider--dragging .co-slider__fill {
+  transition: none;
+}
+
 .co-slider--disabled .co-slider__thumb {
   background: var(--co-semantic-text-disabled);
 }

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: '5b112a7975ab5dee865814fae75fe1d4ca8099ed', class: {
+        return (h("div", { key: '9b0393d126f0951918b8579542019448949f8537', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '215199cccc16293c239ad543e19965de8016bc49', class: "co-slider__labels" }, h("div", { key: '0c72aed8099eb04a7be3fd978643ff1807b450b7', class: "co-slider__labels-left" }, this.label && h("label", { key: '19addd8933e918b73bb12e8c5e600d95f082f755', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'e7128961c9aea173ff13d81b03062ad2cfc38084', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'f82b30d226e562521a5564d4348a03ccc978715b', class: "co-slider__value" }, this.value))), h("div", { key: '0a42dc4519dd991b332bc62eb8ff59c44acbdd79', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'b85ba951d913ef68ee454c2f70a8e5517c4262bf', class: "co-slider__track" }, h("div", { key: 'f06c1d1d9b602c078fcd6cfb3ab1f486b9ae0c63', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'be52d64df84ef2620ebdc11b75793a804b3c7a4e', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'd0bf46d74c1d9cffc35db3af25bd39de8c041899', class: "co-slider__marks" }, h("span", { key: '779c25fb6669e0e3ce8c73d2a59686204a19b6fb', class: "co-slider__mark" }, this.min), h("span", { key: 'd61b61a373332bf22fc524d879c595047782c585', class: "co-slider__mark" }, this.max))), h("input", { key: '426f58b9210369dbd0c976555965ac62d20ce198', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '72de59ff964142aa3e63f1c1da203d6ae5a015b4', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '07c8dacb49fcb50b57014ae16a4f0220757064c8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '64464d85a972b1bc523d5f28f2f8ac82f194fb8a', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'e5a6e71de571099179da3fff7fad8a49f4007b58', class: "co-slider__labels" }, h("div", { key: 'e2e7b16b04ab4405efefe3c706f0b17e554e3403', class: "co-slider__labels-left" }, this.label && h("label", { key: '5bfdab322661e6a4ff23c3f51b98f92beb7f71d2', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'badb1274cb50e9fd5aa4ffe0ecd2fcdf7e356ac5', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '100c039646a494ab2311fe665dcca69ac373412c', class: "co-slider__value" }, this.value))), h("div", { key: 'cccc6eec3cb96c59fde0dd61f243b99d4dd906a5', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'f2e4c77eaad6f282a8516cbecf658309d288e960', class: "co-slider__track" }, h("div", { key: 'a4b4e062c0f4fc63fe06c0f82635b7938d362872', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '82aaafcee3e10dabda359e1633d3d43cb907efef', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'df196b5f77697d80ba347049252f06bd941210af', class: "co-slider__marks" }, h("span", { key: '842cf8078d2ce44015bfff1ef5c6af9e81226c65', class: "co-slider__mark" }, this.min), h("span", { key: 'e9016d28e3cccb5422ee69fc420ffe8573261bb5', class: "co-slider__mark" }, this.max))), h("input", { key: 'e39cf4e0e392b19bbc69a8824b5304923690a111', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '8f63357fba596c559f7a8844588c7c95f85c7216', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'bd3cb81a4b8e934f97db8520566f41094b4054be', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '2840f87c55a9404b682b00be36f90807ba2e5cab', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@
   cursor: pointer;
   padding: 0;
   overflow: hidden;
-  transition: background 0.2s ease;
+  transition: background var(--co-motion-duration-base) var(--co-motion-ease-out);
   box-sizing: border-box;
   flex-shrink: 0;
 }
@@ -130,17 +130,18 @@
 .co-switch__thumb {
   position: absolute;
   top: 50%;
+  left: 2px; /* estático: el desplazamiento va por transform (compositor-only) */
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   border-radius: var(--co-border-radius-full);
   background: var(--co-semantic-control-thumb);
-  transition: left 0.2s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
   box-shadow: 0 1px 3px var(--co-semantic-control-shadow);
 }
 
-.co-switch--off .co-switch__thumb { left: 2px; }
-.co-switch--on  .co-switch__thumb { left: 22px; }
+.co-switch--off .co-switch__thumb { transform: translateY(-50%) translateX(0); }
+.co-switch--on  .co-switch__thumb { transform: translateY(-50%) translateX(20px); }
 
 /* ─── DISABLED ──────────────────────────────────────────────── */
 .co-switch--disabled {

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '2d54e4a245ff8e7bac33f720c0bf22b16e2f2863', class: {
+        return (h("div", { key: 'cf5f5cf9c86e531772cab2fc89ce7f671fac6b88', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'a8c0d9067596dc7ba2cde7db13936ac98f4a308f', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '920210333625a69b9aa505a50cfd147ad7f71357', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '1b4a84420f7cbf55b797c900633278226e6bb876', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '84935bfd4332c5f75d9a55c302a215704255687e', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b9bafc85e62aa24ed0243359d53210f31d984e13', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '38ca77e6f9bf4c2b9e911fd1f98588df0b273320', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd25c10a12a6e3bd7dd49ee6e25d7a4e710622604', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'b6e434fe0dcae3ed7a23aa2a3c4686783debc736', required: this.required })), this.secondaryLabel && (h("span", { key: 'da01d07fc4a7519fad7e5c6d8d283e4dfd72763a', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6d518eb23a4459ad5853159d4e33632d758f419e', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '96772daea7dc0b3c3304f4394f55856bd74b2fc6', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'de1d5474326eb79396cad519faf48a3595adf755', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '5fd9ccdee226488b7bf40135310dfa8edc6f21ca', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '8c218d1e80fde949aaaeddb5beb82f0db903c5fd', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '8ac9fd5b3c508f1aa8d5dc68958b3503088c6573', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '6484f45dcf71fde79d7e9b2dcb1e05736222eb43', required: this.required })), this.secondaryLabel && (h("span", { key: 'cafa4abbf0b8bab98992a1fc8450828eddf5a84e', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '50b2fa3efe5f9231b334785a5fcc12976e100529', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'd43268eb4c94458681cd0d29c25e63c6f228e744', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'dca85627fe32f4991716e5bd0d74f52ee7825159', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@
   border-radius: var(--co-border-radius-full);
   background: transparent;
   color: var(--co-color-gray-500, #888);
-  transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
 }
 
@@ -79,7 +79,7 @@
   font-size: var(--co-font-size-14, 14px);
   font-weight: 400;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
-  transition: color 0.12s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-tab--underline.co-tab--selected {

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

@@ -21,13 +21,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: 'b8673b45961dbde0d1227cc11c5901c3ac835a5f', class: {
+        return (h("button", { key: 'f569dd0913e8a6640fbbaecbf2b083e480f6f137', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '56c288e6ef62ddbae146e433e7cbd5c26ac59671', name: this.iconLeft, size: iconSize })), h("span", { key: '0960be9c2f886e6997d34e430c80a5c7ffad15d5' }, this.label), this.badge && (h("span", { key: '38c8c970f55ce333b950746d65e166bddc6877e4', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '70b527b463734e8181287cf1c6f0b499e9b3825c', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '8bd16fd9d62bcf85872743b4508b1d7e774564a7', name: this.iconLeft, size: iconSize })), h("span", { key: 'e2477eb4d568a14cbc2751478b193f72fe485827' }, this.label), this.badge && (h("span", { key: '8d66cc9036bb4a70ffc51b29edbd1a766e650c41', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'f7e31ab5fed7cc1c1df82655f16e52efd6459c04', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,10 +49,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'cdc42835ffb5727ceb6de152ccf91064ebfc9cf9', class: {
+        return (h("div", { key: 'b4a12a70b2ea662d7560b44dee50ecdbbb9314bb', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '2815afe02e2e34378cd33f0d6a21e2fe658eac53', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '4427ca133a60ae07f53f1c50ef6dd9ee39784aa6', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,7 +68,7 @@
   background: var(--co-semantic-surface-page);
   border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: 40px;
   box-sizing: border-box;
   flex: 1;
@@ -145,7 +145,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 
@@ -201,7 +201,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-tags-field__clear--hidden {

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

@@ -186,14 +186,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '47f84ca4f1ca42b71bb652f557e5a8718ab5a463', class: {
+        return (h("div", { key: 'e7035dd352d920f06cf7ae067f4d5016fceff48b', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '718b221eab4b3e7ed2397bde6e13a3f5f8c5f703', class: "co-tags-field__labels" }, h("label", { key: 'e3479f790451e5d2e7d89977f88af29db2bd3269', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '5a544537e8a663a53bc44d3333788e1fa1270112', required: this.required })))), h("div", { key: '0174ad7bb299efa97d98450de80c4c8dd9378f35', class: "co-tags-field__field-row" }, h("div", { key: '25b80d7f435195f9c789f4eb8553d3c326984b31', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'b4eb779b42ffc118e584d36ff6896de6e39148bc', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '4ff2eb4ab1fb00a193679063a30069847d85c6be', class: "co-tags-field__labels" }, h("label", { key: '238e18f48cb6c482de2957cd0f466c9875c71c20', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '4a86dbeb54674e7b0f38052bb7f9c9a6b96e2380', required: this.required })))), h("div", { key: '2ce5b7b6c520aac7d10e0ae2aad06ca27d12b705', class: "co-tags-field__field-row" }, h("div", { key: 'aa2e01fbbeeaddc8a53ffcb62c4c871ba2fe57d6', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'bb6b037edb3036b029a664f7ef6d72b110e7b6a8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +201,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '35e2946e38d6b3e69e1a1cdad49ade9999ad1c48', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1be954210a0d61e36cf987d12127594119b40095', class: {
+                : undefined }))), showInput && (h("input", { key: '419fa34260f36353b30c58b0883b8ebbaaca0176', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '06372259382dfc3a6edeba8f7e6dd5b9617ae306', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'c1a4975e339115a6a2fc933a2d73a3d5ff0b4653', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'bd3e4bf286efe97939e9933d3b4c3bda0909f54f', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'e32c923da1928cfa6bc1bf041e257e41809df047', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '1a2985e18467e778c56ae21c4de64ca7444cebcb', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '0a97d32c8efa0b29e0f050eceb4015cec8d55512', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '7225ade1dad3a5a63ad3214ae80890c082e89e19', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ab523ee51f9f3525985d6f7ec5b0cede3dd1d61', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '24641df824075583a1ece04e202b6f419a99c54d', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '42225192d8d73f9e091ee069f7f5307ea42f5516', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '75eefd041a4d17ef9514ed24d7a3a417e89dc19c', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@
   background: var(--co-semantic-surface-page);
   border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -157,7 +157,7 @@
   color: var(--co-semantic-text-muted);
   cursor: pointer;
   padding: 0;
-  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-textarea__clear:hover {

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

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: '83cddaf39334bbd1ee8c3c2804bf879a1678be31', class: {
+        return (h("div", { key: '26a30e39d13d782711adb94e4c12c6c0db282095', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '78e5e03b10e3d19e565fc5a617efa42f4a0102c3', class: "co-textarea__labels" }, this.label && (h("label", { key: '65bde2a35c48be79ae04aa0d2b040970cdad7b8c', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'd46b4a35d8daeff39cdaaed33c9d4b38071d0663', required: this.required }))), this.secondaryLabel && (h("span", { key: '526f358820bedf0184f9353d0cad8fe54afb1557', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'f9133145a9a50f963bafb10546e6f46fa3dbfedf', class: "co-textarea__field", part: "field" }, h("textarea", { key: '83e91e506c84939b4c4ff06da316c81e38540ea1', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'b4f8df968cff2b5b175cfcbf1e68b31ca29d9afe', class: "co-textarea__labels" }, this.label && (h("label", { key: 'af366be59684f535c8fb87e9b974ce759cc18076', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'e8a27b76c9fde30eef0aef8fbbbc46e296edf537', required: this.required }))), this.secondaryLabel && (h("span", { key: '945182ab7091298aab4631167615df0b742250d2', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '23d1c1c7af5a03b0cd9196bfc18f24746f5e523d', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'def518b0c40dad1749d9c4271f6b0b4bb08abb64', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '5fd7d570f0fa628fd69739b1245892791073a04a', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'aa8d7ec05dae2ffc62caa62261d7a26fb0c74f72', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'bf78c1beb45928d0494699bd4fa108c9941d4011', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '6a607e88c55a7c370e319a6972be00ca92beab53', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '207bde67b9f3adcca674b93dbb135bb10d448f5e', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '927918569b359aebd7c1f2e0ae8c7be607453531', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '4374030bb6cbf6fa45c40f464481c2bf40cba6fc', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'b92692e4149b404999221cb6ef3de0d2adb73291', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: 'd5b027fb53b600f7a527ffddb3a819463b360255', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '9e180c6e956efa75558dc1d3027f28760d3d39d4', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'cc32a43d1e804910dbb948e9dd004fe36d428a1e', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '544c72f9baa84f61b76104e62373dc8ba4d445e0', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '531d0c60b322ce09760889cc1b979e3c48046847', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '72eadc738677c3bbf50c9d0bdeb1cee713528507', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -110,7 +110,7 @@
   color: var(--co-toast-dismiss-color);
   cursor: pointer;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -214,3 +214,65 @@
   background: var(--co-color-primary-azul, #2563eb);
   transition: width 0.3s ease;
 }
+
+/* ─── Entrada (on-mount) ─────────────────────────────────────────────
+ * co-toast se monta/desmonta desde afuera y no tiene estado `open`: nace
+ * oculto y un frame después del mount el propio componente se marca
+ * `.co-toast--in` (@State `entered` en co-toast.tsx). La SALIDA sigue
+ * siendo del host.
+ *
+ * Todo esto ocurre en el nodo INTERNO `.co-toast`, nunca en `:host`, por dos
+ * motivos independientes:
+ *   1. El transform: el contenedor que apila los toasts ya usa el transform
+ *      del host para su enter/leave/move (p. ej. el TransitionGroup de
+ *      suite-v2), y dos transforms sobre el mismo nodo se pisan. Un único
+ *      nodo lleva el transform de entrada.
+ *   2. La bandera: el host es del consumidor. Vue (y cualquiera que use
+ *      `setAttribute('class', …)`) reescribe `className` ENTERO al patchear
+ *      un `:class` dinámico, borrando la clase — y con `opacity: 0` de base
+ *      el toast quedaría invisible para siempre. Dentro del shadow es
+ *      inmune. */
+
+.co-toast {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+}
+
+.co-toast--in {
+  opacity: 1;
+  transform: none;
+  transition:
+    opacity var(--co-motion-duration-base) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-base) var(--co-motion-ease-out);
+}
+
+/* Success entra con pop: el transform rebota (spring) y dura un poco más.
+ * La opacidad se queda en base/ease-out — un spring sobre opacity
+ * sobrepasaría de 1 y el rebote no se vería, solo se recortaría.
+ * Ambas clases caen en el MISMO nodo, así que el selector compuesto tiene
+ * más especificidad (0,2,0) que `.co-toast--in` (0,1,0) y gana sin depender
+ * del orden. */
+.co-toast--in.co-toast--success {
+  transition:
+    opacity var(--co-motion-duration-base) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-slow) var(--co-motion-ease-spring);
+}
+
+/* ─── Check dibujado (success sin icono propio) ──────────────────────
+ * Mismo patrón que el glyph de co-checkbox: pathLength="1" normaliza el
+ * trazo a 1 unidad, así dasharray/dashoffset 1 = "sin dibujar" y 0 =
+ * "dibujado". El path se monta ya con su estado inicial, y la transición
+ * se declara SOLO en el estado final para que no haya dibujo inverso. */
+
+.co-toast__check path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+}
+
+/* Se dibuja con la misma clase que la entrada, pero con un delay `fast`:
+ * el toast aterriza primero y el check se traza encima. */
+.co-toast--in .co-toast__check path {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--co-motion-duration-slow)
+    var(--co-motion-ease-out) var(--co-motion-duration-fast);
+}

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

@@ -20,6 +20,15 @@ const ALERT_VARIANTS = ['error', 'warning'];
  */
 export class CoToast {
     constructor() {
+        /**
+         * Bandera de entrada. Vive en el SHADOW (clase del root interno), no en el
+         * host: el host es de quien monta el toast, y frameworks como Vue asignan
+         * `el.className` ENTERO al patchear un `:class` dinámico — una bandera puesta
+         * ahí con `classList.add` se borraría y, como el estado base es `opacity: 0`
+         * y `componentDidLoad` ya corrió, el toast quedaría invisible para siempre
+         * sin forma de recuperarse. Adentro del shadow nadie puede pisarla.
+         */
+        this.entered = false;
         /** Toast message (title row) */
         this.message = '';
         /** Show dismiss (X) button */
@@ -29,6 +38,20 @@ export class CoToast {
         /** Semantic variant — drives left accent color, icon tint, default icon, and announced ARIA role. */
         this.variant = 'neutral';
     }
+    /**
+     * El toast se monta/desmonta desde afuera y no tiene estado `open`, así que
+     * la entrada la dispara él mismo: nace oculto (CSS) y un frame después del
+     * mount se marca `.co-toast--in` en el root interno, que es lo que la
+     * transición interpola. El rAF es obligatorio — cambiar el estado en el
+     * mismo frame que el markup dejaría un solo recálculo de estilo y la
+     * transición no arrancaría.
+     * La SALIDA sigue siendo del host (ver comentario "Entrada" en el CSS).
+     */
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.entered = true;
+        });
+    }
     render() {
         var _a;
         const hasDescription = !!this.description;
@@ -37,7 +60,13 @@ export class CoToast {
         const clampedProgress = hasProgress
             ? Math.max(0, Math.min(100, this.progress))
             : 0;
-        const resolvedIcon = (_a = this.icon) !== null && _a !== void 0 ? _a : (hasProgress ? 'upload-simple' : DEFAULT_ICON[this.variant]);
+        // Success sin icono propio dibuja su check en vez del co-icon por defecto.
+        // Con `icon` custom manda el consumidor; con `progress` manda el icono de
+        // subida (azul), que es la señal de la barra — ninguno de los dos se pisa.
+        const drawsCheck = this.variant === 'success' && !this.icon && !hasProgress;
+        const resolvedIcon = drawsCheck
+            ? null
+            : (_a = this.icon) !== null && _a !== void 0 ? _a : (hasProgress ? 'upload-simple' : DEFAULT_ICON[this.variant]);
         const role = ALERT_VARIANTS.includes(this.variant) ? 'alert' : 'status';
         const rootClass = {
             'co-toast': true,
@@ -45,9 +74,10 @@ export class CoToast {
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
             'co-toast--progress': hasProgress,
+            'co-toast--in': this.entered,
         };
-        const content = (h("div", { key: '4727f0b593050826892f25a3da53fd42edfad744', class: "co-toast__content" }, h("span", { key: '8c1a29b562d9a8b6aed4a60bef8be39647fc8b7a', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'ccb7b545065311525ba40d7e066dd1dc12be995f', class: "co-toast__description" }, this.description))));
-        return (h("div", { key: '49d0d786f54a7d9e9fb648dd4aa0dd0e1122ecdc', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: 'f67cff3e6b14cbe9be11090c17cb33fb7dd944e9', class: "co-toast__icon" }, h("co-icon", { key: '6c45e2ad5d844228f4352f0593bb111b23b715b9', name: resolvedIcon, size: 20 }))), h("div", { key: '61942396846ec88cc1fb8ee04b4da6b5e9541b11', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '48cbdafb944ddac91c62154f59b08c7401e7ca9f', class: "co-toast__actions" }, h("slot", { key: '15d119f0724e3bf791ed65bba140bff394395396', name: "action" })))), !isStacked && (h("div", { key: '87cc2aa477b3ede5ec648047b920d6747360a712', class: "co-toast__actions" }, h("slot", { key: 'bdecde963be2ce12ef437b3524bab17ffd51a200', name: "action" }))), this.dismissible && (h("button", { key: '1da56cebd4714f72b3396ff7c00405341654c421', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'a0061ab640565171efc109a790a599adf4f90b86', name: "x", size: 16 })))));
+        const content = (h("div", { key: '5479799fdc6e1290192530a8cbda7308a610821e', class: "co-toast__content" }, h("span", { key: '7d3b310377e78b8e5551cc80f2941aa621ea9bcb', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f3d0a88cc99ba0884875217454192bf285480b65', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '1194ce0b8e6b279dcf747467df23903c9f79770d', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '46c9ed361690be9f2ad60235efbefbd9ab30bb0d', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: 'e277b37fccc9c3770e3c102cb0039cd97f83223a', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '029587321c2cd209fa838c24a435027b7a029a90', class: "co-toast__actions" }, h("slot", { key: 'c937442479f63185efc37428b9c25680ed72248d', name: "action" })))), !isStacked && (h("div", { key: 'b4f2be5646b30478315256d04cf86e4eb939fcb9', class: "co-toast__actions" }, h("slot", { key: '689ef19ee688a4f4abc38b4c8ec7918aed4338bf', name: "action" }))), this.dismissible && (h("button", { key: '7424c7bacc165e5e6828fa28233c3e8151c769f3', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '64149b651baa0cdd39a4ed17a865d5624872d4a9', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -214,6 +244,11 @@ export class CoToast {
             }
         };
     }
+    static get states() {
+        return {
+            "entered": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coDismiss",

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

@@ -32,7 +32,7 @@
   font-family: var(--co-font-family-primary);
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease, 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), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   white-space: nowrap;
   box-sizing: border-box;
   line-height: 1;

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

@@ -18,13 +18,13 @@ export class CoToggleButton {
     render() {
         const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: '6beac8a34985f6a26940ec47f311d39f4d9c9638', class: {
+        return (h("button", { key: 'c12171239c10c23954b6e2bc33f26583e3bfdde9', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'fdf638c8ef852a470dd3a0adeae95ed4c2edb859', name: "leading" }), this.iconLeft && h("co-icon", { key: '1d3e827014602f30963ecd6d052483d94fa7ee21', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: 'dddc3ca99579d68c8db7239e161f556e92ab2061', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'bc6f81715ab9396e9d47e22ccb32f84d3f0203c8', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: '99f4fd25830d9a39473496cb92b9b5e038bb45bc', name: "leading" }), this.iconLeft && h("co-icon", { key: '6a4fc7af28557a64a01cf62a0b53e95173fe0669', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '6483a804b6d43d7ffe6e004c40bacec5c6e00980', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'bd6d165f96b8ae2fd036380f840fa308ac236200', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }