@prolibu-suite/cobalt-core 0.8.0 → 0.9.0

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

@@ -36,16 +36,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '1f30917baf6de9922ebf76214c324b2669046f98', class: {
+        return (h("div", { key: 'e0c349a8291d8e6070491da043a7e25f6a1760c9', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: 'f03d4bd39a49f4e16d5724478f4c0f15ac3a8c92', class: "co-rating__label" }, this.label), h("div", { key: '96301d47ba510e923f0abd3f5fff63b5f8437099', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '9b94b9f984de01b62b4fa8d81b9306373ace35ea', class: "co-rating__label" }, this.label), h("div", { key: '314c6ad766a0166ec840ef09a4e25f7215e7b431', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '4e84ece3536c2e028057be76910eae6fa3ac6228', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a24e3451108027dc941c96dbf03988e1cab92424', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '734bc0b5515d95ac1d5545b20842d949e35a0d87', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '5dc15f3ca66f0c187ee8cd285f8750dbae053d4a', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'ef84a476928b566635cff02144637800b1e72e6e', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'b4ddff2a4fee37645bb5352ab4bbfa7e222f51e4', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,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);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -172,7 +172,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-ref-field__clear:hover {
@@ -303,7 +303,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-color-gray-500);
-  transition: color 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 
@@ -386,7 +386,7 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
   cursor: pointer;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   min-height: 32px;
 }

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

@@ -78,6 +78,18 @@ export class CoRefField {
             if (this.disabled)
                 e.stopPropagation();
         };
+        /** Change de la co-option-list: `value: null` = deselección explícita (la X
+         *  de la fila) → mismo camino que la X del trigger (clear + coClear). El
+         *  resto sigue por handleOptionClick con el ítem. */
+        this.handleListChange = (detail) => {
+            if (!this.multiple && detail.value === null) {
+                this.value = '';
+                this.coClear.emit();
+                this.isOpen = false;
+                return;
+            }
+            this.handleOptionClick(detail.item);
+        };
         this.handleOptionClick = (option) => {
             if (this.multiple) {
                 const current = this.parsedValue;
@@ -320,11 +332,11 @@ export class CoRefField {
                 'co-ref-field__panel': true,
                 'co-ref-field__panel--dark': this.panelTheme === 'dark',
                 'co-ref-field__panel--light': this.panelTheme === 'light',
-            } }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleOptionClick(e.detail.item), onCoReorder: (e) => this.handleReorder(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
+            } }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '0ce5a3a17573be110e31d9b9a852c9d38920ebe7', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'd8e57aa53a86c4a7eea93f5eb5bf599172028c8b', class: "co-ref-field__labels" }, this.label && (h("label", { key: '85047359916520cb24dd41806bc55105d58546c0', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '1a915ad0d00edde85e5a42c6aca46dd51d6934cd', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '117e40254873f5736cf0adf41f8e075975e46c28', required: this.required }))), this.secondaryLabel && (h("span", { key: '054f1fe59359d4dafda008396867f1c9b70607cb', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '56dbfeb3560e771908e9e0c4d41c34b0a69c8db4', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4fe5a05e993c561d5e721c778ed55e71a3e26260', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '9a49dcd557477db1c8460ee974682a13730b360e', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: 'a8868a9cf707dd1b202a86c03ccab43778857fe8', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'a11dbf26c8c975089d5e384316a154a2f03eab7b' }, this.helperText)))));
+        return (h("div", { key: '8b4d5429c6c13f9dbea56dfe5673be2f2bf8e234', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '6fb3fb006ed5c6bf089608205cbecc4399f8131f', class: "co-ref-field__labels" }, this.label && (h("label", { key: '045edee2c573f3b3a678377f7ac81baef16ca547', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '8a3fe75b68f69f6bbc1eead72e3a71e4a02d9ff9', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'd0935348ad1aaca3ebeb302abfd212250ca01d2c', required: this.required }))), this.secondaryLabel && (h("span", { key: 'f1b2f5578de05162b97f64041250ec92c2d0601b', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '126310c2e579a9f8ac530d0471db742f5f087433', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '07b0c236d0fadd7fef4f719b4f6f190e57a7c488', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '31b252868ebfaca932adf5a47e3f61f4b03dc5a3', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '123ec829c6a45a960212521cfc49e4a98d5e1785', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '24e573b9fb884a0f006d32136b00d9c7406e3722' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.css

@@ -40,7 +40,7 @@ co-rich-text-editor {
   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: 0;
   flex: 1;
   position: relative;
@@ -525,7 +525,7 @@ co-rich-text-editor {
   font-size: 11px;
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rte-bubble__select-trigger:hover {
@@ -700,7 +700,7 @@ co-rich-text-editor {
   border: none;
   border-radius: 3px;
   cursor: pointer;
-  transition: transform 0.1s, box-shadow 0.1s;
+  transition: transform var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast);
 }
 
 .co-rte-bubble__color-swatch:hover {
@@ -1225,7 +1225,7 @@ co-rich-text-editor {
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rte-img-layout__btn:hover {
@@ -1262,7 +1262,7 @@ co-rich-text-editor {
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   z-index: 100;
 }
 .co-rte-img-layout__btn[data-tooltip]:hover::after {

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js

@@ -2031,7 +2031,7 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: 'd600084f58be73fcade0b1a18111ccd1ab2a32ea', class: {
+        return (h("div", { key: 'd06c3fe4d1a84c49a525a694986d2f096b11df79', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2039,10 +2039,10 @@ export class CoRichTextEditor {
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 'co-rich-text-editor--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'f692d9fdadcf547da8fd0ba485d69fe882b14580', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '77ef28fee83ee26782deca75f0310abea3cbf64d', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'f26ce7f7457414e3c1353e33aff2ae9e40522643', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '20a121b30f139ec62b37a6248aa4309e71888771', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '7391cf2bc71e6c9636222b055d614845201b4d05', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'd9bba1f9e070de2e1e0210adf8a292a2052297fd', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '01f5ceb0e3e35da72480a422f434c16913e9aa7b', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf4ba75489c3e413a6dfcd1cac5ff964e3aa0290', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '106915b5caa63689763b01ff7c2253d085ddf628', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: 'd9e9367a4b549e5c1c751b9098219a632d295d60', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
                 e.stopPropagation();
                 this.coAttachmentsSelected.emit(e.detail);
-            }, ref: (el) => (this.toolbarEl = el) })), h("div", { key: '22847c8d57d9e9a903a2e2c6ffb658ea61f9d0a7', class: "co-rich-text-editor__box" }, h("div", { key: '70bb598dd6435c913044c6e9ae8e743f63a7efc5', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: 'c3875f25af1683b61eae18c3b0ddd7c07fe05970', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: 'd61a15129d7f5870126fb16ebd1bb9f069753000', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '4e75dfa744e3ba2240a0461f60bc407a85aa974e', name: this.helperIcon, size: 14 }), h("span", { key: '9a081b10f32da576769c6d7b11775a5d51c92951' }, this.helperText))), showCount && (h("span", { key: '82673395155bf73ff766d71c352d895d49f35539', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'bccd38caf855288ad9582720dd39c77ddfeaf998', class: "co-rich-text-editor__box" }, h("div", { key: 'a6f75d24d978e52f1337ee408ddc61417099bf13', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: 'dbdade68814a3d62c383ca3e545a6bf1912c3945', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '918e3b3c204e60aa5063828d82970857aca94e9a', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'dc1ee710ef02258eff5f42a9df736871bf9b27fa', name: this.helperIcon, size: 14 }), h("span", { key: '050d504bd35f4cfbb336e10bda956a686ae1844b' }, this.helperText))), showCount && (h("span", { key: 'b071610cf144259292a6f771038862f742ae09c8', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.css

@@ -53,7 +53,7 @@
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   z-index: 9999;
 }
 [data-tooltip]:hover::after {
@@ -85,7 +85,7 @@
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rich-text-toolbar__btn:hover:not(:disabled):not(.co-rich-text-toolbar__btn--active) {
@@ -128,7 +128,7 @@
   font-size: var(--co-font-size-12, 12px);
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__select-btn:hover:not(:disabled) {
@@ -209,7 +209,7 @@
   cursor: pointer;
   background: var(--co-semantic-surface-secondary, #fff);
   color: var(--co-semantic-text-default, #333);
-  transition: background 0.12s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__popover-btn:hover:not(.co-rich-text-toolbar__popover-btn--primary) {
@@ -246,7 +246,7 @@
   font-size: var(--co-font-size-14, 14px);
   cursor: pointer;
   text-align: left;
-  transition: background 0.1s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__popover-option:hover {
@@ -285,7 +285,7 @@
   font-size: var(--co-font-size-14, 14px);
   cursor: pointer;
   text-align: left;
-  transition: background 0.12s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__dropdown-item:hover {
@@ -360,7 +360,7 @@
   border: none;
   border-radius: 3px;
   cursor: pointer;
-  transition: transform 0.1s, box-shadow 0.1s;
+  transition: transform var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__color-swatch:hover {
@@ -459,7 +459,7 @@
   background: transparent;
   color: var(--co-semantic-text-secondary, #666);
   cursor: pointer;
-  transition: background 0.12s, color 0.12s;
+  transition: background var(--co-motion-duration-fast), color var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__table-tab:hover {
@@ -491,7 +491,7 @@
   border-radius: 3px;
   background: transparent;
   cursor: pointer;
-  transition: background 0.08s, border-color 0.08s;
+  transition: background var(--co-motion-duration-instant), border-color var(--co-motion-duration-instant);
 }
 
 .co-rich-text-toolbar__grid-cell:hover,
@@ -593,7 +593,7 @@
   border: none;
   border-radius: var(--co-border-radius-xxs, 4px);
   cursor: pointer;
-  transition: opacity 0.12s;
+  transition: opacity var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__table-btn--primary {
@@ -639,7 +639,7 @@
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rich-text-toolbar__split-caret:hover:not(:disabled),
@@ -680,7 +680,7 @@
   border-radius: 8px;
   background: var(--co-semantic-surface-secondary, #fff);
   cursor: pointer;
-  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+  transition: border-color var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast), background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__listpicker-item:hover {

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '0a4400aebb95a4c221a9a084a7b4fdf6e2a22558', class: {
+        return (h("div", { key: '7be514198a0f47409e33fc0feadadb2d8552253f', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: 'a87e3439e72b8e620b23270c6748f02329980fa5', class: "co-row__prefix" }, h("slot", { key: '1ef9640ca87642e61c6f8d76a1ffc725b65ed8d4', name: "prefix" })), h("div", { key: '56236a111369b8b70b68b9b36211555f7161b7bc', class: "co-row__content" }, h("slot", { key: 'c8faefc9609037a804d3e6045732af338a6df276' })), h("div", { key: '11632f0b2c99357e03fb044f3f402ac240a5a543', class: "co-row__suffix" }, h("slot", { key: '9b0d002049447a1e49a8bbfd4da889ef3368def7', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '0ac40c40dd298e54265899610508d53f4fe38355', class: "co-row__prefix" }, h("slot", { key: '0853d494025ad3a628a9eb3a4e2289b4771bdd2b', name: "prefix" })), h("div", { key: '6c6601273fb708aa91d4df52340a54a0f528fdd6', class: "co-row__content" }, h("slot", { key: 'e2046193d773aa0982c5f7b71e7f4ace816cecd7' })), h("div", { key: 'd754723e7a464f8ef23eb0eb64e6d6c99cf11e13', class: "co-row__suffix" }, h("slot", { key: '8584a30c593bc4e1db33e0bdcc26b450c4269893', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -735,7 +735,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   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);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -788,7 +788,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: transparent;
   cursor: pointer;
   color: var(--co-color-gray-500);
-  transition: color 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 
@@ -877,7 +877,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   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-select__clear:hover {
@@ -965,7 +965,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
   border-radius: var(--co-border-radius-xs);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: 32px;
   box-sizing: border-box;
 }

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: 'fa1b1c05d8d5dfb77619036555d1d8a13590f33a', class: {
+        return (h("hr", { key: 'e3dae08fe134e1d4e1769aa9e66c59b8b0eb62ae', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -11,7 +11,7 @@
   font-family: var(--co-font-family-primary);
   box-sizing: border-box;
   overflow: hidden;
-  transition: width 0.2s ease;
+  transition: width var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 /* ─── Modes ─────────────────────────────────────────────────── */

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '3c0842a02ed5a1bf40b1c69263efceff221aa193', class: {
+        return (h("nav", { key: 'a854ad248b6f55fdcb1b08ed15272154a5044e55', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '392937b5a15fe0c7f6abb78a717b34601c616bf4', class: "co-sidebar__header", part: "header" }, h("slot", { key: '28f3b073070f7dfa9e8b0a2260c911ef264e9c66', name: "header" })), h("div", { key: '622f3dd5167875811492a820e7fa9a12734a8247', class: "co-sidebar__body", part: "body" }, h("slot", { key: '10cec6e86c11203e167eed243aeb718ddeca4a98' })), h("div", { key: '55dc3013edc9c4e0c7531a52d15ddc7070722847', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'ec0bff733e378e23b6788b39b7cf18457b30c8a6', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '17a14f8625168e7f163c984d782df2b387c3684e', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'e9152aa47751f8ced84384a4a5ced1d05f410cf3', name: "header" })), h("div", { key: 'df4ad1cd15d33678c60c47ee231ac765993a3d28', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'be0e6031883c828b50bcf65f2052c4055370efba' })), h("div", { key: '6ab4f6793e2ce3c81f50e143cf0764b25a2b0048', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '930905e30ea4ddf297bb313294d5d2eb4dafa721', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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-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: '319cb18749e7b42bdb62cb8c845f97a3b92a3cae', 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: '4027635cf79ecb8673a36a63bda49528b3affe3d', 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: '63340e4f0e30dc8d764ec1e53d1382ed7439f2ff', class: "co-slider__labels" }, h("div", { key: '3d7eb11db7b0b3a02dca5ab7dfdad3d46eca0f99', class: "co-slider__labels-left" }, this.label && h("label", { key: 'ca00277f2008cb58bc28cf4783f445d2f56e8427', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '90b3d3afc80a0ecfafbd3e379c181a1679192aab', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'ac9f0a0b1dc054838c6d2635db0f036bcf8949ad', class: "co-slider__value" }, this.value))), h("div", { key: 'e16828daeb3549bb2b892cbb237313a90551c731', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '094704838f8898680e950ecb31d71a396fbd46ee', class: "co-slider__track" }, h("div", { key: '0c47a259e49d126aaf7471ef56e887b99c2636de', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '61cb3dd1621bdcb6b103f073eefceb5a11f08806', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '60ea2eb0db6393ca95d712e1441b316f34b2e39d', class: "co-slider__marks" }, h("span", { key: '3ef4f78b7ee3b920dc1be7be1cad43c2cd268ce6', class: "co-slider__mark" }, this.min), h("span", { key: 'c1b0bb6ada1ec898c7ae8ff9160f53c58454a5c9', class: "co-slider__mark" }, this.max))), h("input", { key: 'c38e3b83d4e546a3349fa504022592face8f7ef5', 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: 'f3a87f53d9411991b55656e964c826ed0f6a4583', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '5532c726e5aa75d9c24b850daf27162502fa898a', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'c992c8393ed716d12bbe70dccc62c998c16da751', 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: '9c2ab9ebe8300b1a0430ee3abd450844801dce02', 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: 'becf03e42f9d2df55852aeabcbeb5c0ee8526584', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'd7930e7325b081f72696d7c9714e87cfc8fdc4d3', 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: '916a6994673e9d91f9acd1a983f7a071f6e13de6', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '41ab06a752560079d9cde87bd761320aa44722eb', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'cd56a3a783507bb0aae71032ef71d8d1375fb96d', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'a6da50ef41d10d45d7d0b8a4fbdb8d1e445cc8be', required: this.required })), this.secondaryLabel && (h("span", { key: '294791b598a8ef01ce63d3324bad895e8751ec7c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '2a387c0a099a6d0774d9228c70a00a550f0515ab', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1184f6971047834c8527234c3b97bc4332425644', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'cbb3ea33790321d59111c74dc4282b9393be5c54', 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 {