@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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

@@ -144,6 +144,16 @@ const DEFAULT_ICON_MAP = {
     // Sales / Billing extras
     PaymentReceipts: 'hand-coins',
     Coupons: 'seal-percent',
+    // Events
+    EventManager: 'calendar-star',
+    EventProspects: 'users-four',
+    BusinessEvents: 'briefcase',
+    EventExpense: 'coins',
+    // Content
+    Content: 'folder-open',
+    Portals: 'app-window',
+    // Communication Center
+    CommunicationCenter: 'headset',
     // Integrations
     Integrations: 'plugs-connected',
     Mcp: 'plug',
@@ -486,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: '6bf3b6d16c6baef9af2b41ee38c0823961595132', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '0264a43d3b83859b114001917c45e312fb702afe', class: {
+        h(Host, { key: '637707894cb777ff149c0516aff13786054e5393', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d98909c4d5d0f17eb478fbd01603884d040f45f', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '92437d9f022ec1a25adc04ea52b512dbb046bfc0', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'd46c1e3b5e60ded1d232e7ccf8beb768d34ffe88', 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: '62e14646999122acf4190e503bc89ba1a75a16a0', 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: '1f94a2bea59726bfe63dd0226e6c76aba6e5eed6', 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: '53731220f37468ad024ead0b930b7fa542ce3254', class: "co-slider__labels" }, h("div", { key: '39eccf3964f1463a7a84a8420f2963f0b79935ec', class: "co-slider__labels-left" }, this.label && h("label", { key: 'ab63ada93da100e8d613fcd392dad3b9c6fde6d4', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'a821f151830ef03296724a21241342348848006c', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '1c0888c1ccb60544a5d1fb20c3d44a04d73fa3a0', class: "co-slider__value" }, this.value))), h("div", { key: 'a766dc086713341329a560bc332130245160eb02', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a6aa57cafbf17efc2079627e822f4a909324fa35', class: "co-slider__track" }, h("div", { key: '07183ce09d776aea1249276d44383162f5634633', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e139f1cec3ec5060667602ac04bdf7e0e6d9ef6d', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5df827960aa6d8cb48305efd3a090ed8fe981c88', class: "co-slider__marks" }, h("span", { key: '8f3f20a7e2f5d15f1b8a10f548093b374b41eac0', class: "co-slider__mark" }, this.min), h("span", { key: '11196868d93fd21c9ab3e8f672aad51fcd1e2907', class: "co-slider__mark" }, this.max))), h("input", { key: '97bb0aa1e2ec72c5052c2c0018c5ba3d488aa704', 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: 'c5e41ad16c3548703c544dd412f121c1933976db', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f6d17f21068433ba9fea7fec7f7015fe7a03576d', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '8f85afae6cf7b6a1cbec2096a39312b9c691ac55', 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: '526145ecd1b1592cc650db93f0628ef07e5e1786', 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: '4e72f02ad08d6f15f0bbc6a202db9965666dbd45', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '3ce3f2a7f89c4c5017127df470166267f619a739', 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: 'c8189b585b70b08c269e04505a5edbbb3b3a064c', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '912328e5167f0db2704267713e988807cda0c318', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd86b976d95ec01fb16529034f75fa0b874e1c4f0', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '89623a1a38326a443598a7e0598035e6067ef977', required: this.required })), this.secondaryLabel && (h("span", { key: 'df602d9aa8eba9805674cc921447e7621338d551', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '63198303a7ba9fd9a3b6c306018867802491b535', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1f2790d86165562add0967856e1812ccce90d703', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '77ab535dc73ef130d360e4d31c0cc9b510a4b94c', 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 {

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: '7899f20cb7d2692331364a61cd2b9ef744f422ba', class: {
+        return (h("button", { key: '85ffca32d8f2fb7c2be25e9b2cf8c0570a438f54', 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: '535a9993eda5ee22c01bbbbed0bb3b357eac088b', name: this.iconLeft, size: iconSize })), h("span", { key: '46786bee82d9f0935fe23e09bea59aa50791e38c' }, this.label), this.badge && (h("span", { key: 'a9eaa06f970a70b6e55e9cb295709d340db3bdf4', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'bcf9ba9c5846592d47d81640e0e609cfa8dde5af', 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: 'a5084c288fbbf42f418450343b0cbcd1c36f3553', name: this.iconLeft, size: iconSize })), h("span", { key: '9dda4ae43156ee5e7274de262fb0df601b9a2221' }, this.label), this.badge && (h("span", { key: '84205996d20e27a69ac6dc49f88bf690ef9bb33d', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '7281ba1b981fca02a57b28f461877d2aa831e360', 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.css

@@ -1,11 +1,36 @@
 :host {
   display: flex;
+  /* El strip nunca fuerza el ancho del layout: clipea y scrollea adentro. */
+  max-width: 100%;
+  min-width: 0;
 }
 
 .co-tab-group {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm2);
+  /* Overflow: el track clipea y el scroll vive DENTRO (trackpad nativo; la
+     rueda del mouse se traduce en el onWheel del componente). Scrollbar
+     oculta a propósito — acá `scrollbar-width: none` es correcto (queremos
+     CERO scrollbar, no estilarla). */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  /* Al clickear un tab parcialmente fuera de vista, el navegador lo mete en
+     vista (focus scroll). Con smooth ese reajuste es un deslizamiento suave en
+     vez de un salto brusco. NO afecta la rueda: el onWheel asigna scrollLeft
+     directo, que es instantáneo por spec (scroll-behavior solo aplica a las
+     scrolling APIs y al focus/navegación del user-agent). */
+  scroll-behavior: smooth;
+}
+
+.co-tab-group::-webkit-scrollbar {
+  display: none;
+}
+
+/* Los tabs no se comprimen: el desborde se resuelve scrolleando, no encogiendo. */
+::slotted(co-tab) {
+  flex-shrink: 0;
 }
 
 /* ─── Underline variant ─────────────────────────────────────── */

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

@@ -9,6 +9,22 @@ export class CoTabGroup {
         this.onSlotChange = () => {
             this.syncTabs();
         };
+        /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
+            `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
+            Solo consume el evento si realmente puede desplazarse en esa dirección —
+            en los extremos deja pasar el scroll a la página. */
+        this.onWheel = (e) => {
+            const track = e.currentTarget;
+            const max = track.scrollWidth - track.clientWidth;
+            if (max <= 0)
+                return;
+            const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+            const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
+            if (next === track.scrollLeft)
+                return;
+            track.scrollLeft = next;
+            e.preventDefault();
+        };
     }
     onTabSelect(e) {
         e.stopPropagation();
@@ -33,10 +49,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'fa78f36e2c58a2dfa33280ecc58a8e22b55a0238', class: {
+        return (h("div", { key: '8987563ec721e13e7cbc186b11ab4c6b28f82068', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group" }, h("slot", { key: '0c27dbc561fa7aac4cb7697abb3b71187c9c53ff', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '9adad54c12867486cdf0677e92f5c5007f2b55e1', 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: '3b98e21db568fa88fc353e855330cf40fcec03f8', class: {
+        return (h("div", { key: '1cddcc09b84bd9986332518809b22727e0ea6be8', 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: '5a2e5da6096a2c5b660c3e884d2d4b0dbe9128bb', class: "co-tags-field__labels" }, h("label", { key: '51403414e956b9205bf88d6cf8a6c43ad4806de9', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '19ab6f22b8615a52b5487c8661f112a1861e6c09', required: this.required })))), h("div", { key: '67052a465dc337616565f0309d3de6f9dce5e82f', class: "co-tags-field__field-row" }, h("div", { key: 'cb350c84d48e7eeb2cc5620291466bab58e9cabe', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6cd869c8b7da5280475016b3e89a0bcf42da3cc7', 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: '2a17c1550fb77d74795e29019865decf25b62637', class: "co-tags-field__labels" }, h("label", { key: 'b4fa98a4375ebf9cb09854528bae440310dd6e7a', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '491ec28ffeade76cc659e5920654d4b25474348b', required: this.required })))), h("div", { key: '5959a21a0586e453bdd260a32aa4e9e6f9ee5b97', class: "co-tags-field__field-row" }, h("div", { key: 'babe8f7f15287758aaa6e644edbdd20bea271085', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6f2a17374c0fd13463cd62f9596f7ff896b0b4b4', 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: '616f9c3e45ee685e4f05241a9d718c02b585f87f', 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: '1846e3cb5e3f8d4bd532e598e69dbb5508589bc7', class: {
+                : undefined }))), showInput && (h("input", { key: '13fb645e7da2b931d565591cdca76010cc585d3d', 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: 'c7285e54cc7fbad03c5f0b107d01c31e63204f4b', 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: '2c31acff9b897ef7394e087e24cb6ad1954a5b6a', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '5fb8c29516afc9e92bd29a9702a67028434d4e07', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '8e71625ae0d1d1ac3de1b92c1520229669ba8fb6', 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: '9361a6e3f0d35bb2e976106a77dd6ee3c0053490', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b0d3ea0609153c6237337bdf7463d3eaac0977d5', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'be4a5527ef638303d3c4583063a364f03a26fbf6', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '865454377e41eca5fa36b8a7cb1bfe39b4e6afaa', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: 'd4d7f2f106bcccd3e11cdf1eb759a4b1d9de22f3', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'b945852d4bc7cebf2440afb5507be3151009a789', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '92a7ac0cc4d84f63a4c9ca4b17c922bae485ffd6', 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: 'fb292b8285b753e8164150fada241d766c065ea5', class: {
+        return (h("div", { key: '9d323b813a3c11f045f48556233675ce07ceb79d', 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: '52ec29df68b495a8a290a449324bf0108eb0fc4e', class: "co-textarea__labels" }, this.label && (h("label", { key: '7573a521ef57b8128153e331a504b6b1e0162184', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'f7d1ad43c16b98f604f8c0d7620e59c3533347be', required: this.required }))), this.secondaryLabel && (h("span", { key: '1223a9000424080857b100585b5af3924a74fae1', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '297970dd56b64ec6bed080841fff838053fd120f', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'fcd8ec4a9db5e7c576c72029c1bc71a529bcf0af', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'efd2f5901bbb5e9ecd6ef6cecf9c58917dc310bc', class: "co-textarea__labels" }, this.label && (h("label", { key: '006c3e9b5b219164e1794617e0fee742a195f18e', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '7a2842c50c8151104fb529bba60ea02045384744', required: this.required }))), this.secondaryLabel && (h("span", { key: '76798fcfeae6ed5f7fa7dcd5be4c5c32fc345198', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '8ea7e80d1d39807d4b5097a7c010e79726caf6cf', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'aeed03e98299c0bbdc11dc35c7ffb8964b5f5785', 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: 'ec698cec38f105ed0deb2ebf1ebb443bb3601924', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '44e5994116fd9c430181b84f4cee7a18fd63872c', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'd088f3c27f70a155a32078d7b63945491ca81664', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '1baf81a8fd8a568e0508175b03e81e59588f254e', 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: '886cea9e161fff68046654f854a110f8fbefa320', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8f1055f7e0ea57b0811c0bed69e41fb7e70aaf34', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '998fe8b200baac9f1f8198747b05f6836fedeb3d', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'deef703967cf1e57dab1a6df16b2e04139e41ed5', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '3d807c485144679809cc3fa994692b4f21ece752', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '15b6c9458c38cb562276aae042cfd7bbb35ee9cc', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '4e3e9750db0ede3b2381f3504e7a8975ebd5c272', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '6f42cf1cb23657ca1db2cb2b5db5a4bbad94c05b', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '85ab87ee37978ee22fffbca0cfc75d9609b97212', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '97a0c33e19dc4f39da62daadb3122a1373884622', 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);
+}