@prolibu-suite/cobalt-core 0.8.0 → 0.9.1

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

@@ -18,7 +18,7 @@
   font-weight: 500;
   white-space: nowrap;
   box-sizing: border-box;
-  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-shadow: 0 4px 12px rgba(31, 28, 27, 0.15);
 }
 
@@ -49,8 +49,8 @@
   justify-content: flex-start;
   overflow: hidden;
   /* Colapso rápido y SIN rebote — el spring vive solo en el estado expandido. */
-  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease,
-    box-shadow 0.15s ease, transform 0.1s ease;
+  transition: width var(--co-motion-duration-slow) var(--co-motion-ease-in-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand.co-fab--xl { padding: 0 20px; }
@@ -61,13 +61,13 @@
 .co-fab--hover-expand:hover:not(:disabled),
 .co-fab--hover-expand:focus-visible {
   width: calc(var(--co-fab-size) + var(--co-spacing-sm2) + var(--co-fab-label-w, 0px));
-  transition: width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease,
-    box-shadow 0.15s ease, transform 0.1s ease;
+  transition: width var(--co-motion-duration-slower) var(--co-motion-ease-spring), background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand co-icon {
   flex-shrink: 0;
-  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform var(--co-motion-duration-slower) var(--co-motion-ease-spring);
 }
 
 .co-fab--hover-expand:hover:not(:disabled) co-icon,
@@ -83,21 +83,27 @@
   flex-shrink: 0;
   opacity: 0;
   transform: translateX(-6px);
-  transition: opacity 0.12s ease, transform 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand:hover:not(:disabled) .co-fab__label,
 .co-fab--hover-expand:focus-visible .co-fab__label {
   opacity: 1;
   transform: translateX(0);
-  transition: opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out) 0.1s, transform var(--co-motion-duration-slow) var(--co-motion-ease-spring) 0.1s;
 }
 
+/* El resto de las transitions de hover-expand ya cuelgan de
+   var(--co-motion-duration-*) — el zeroing global (cobalt.css) las deja en
+   0.01ms bajo reduced-motion, así que no hace falta un guard propio para
+   ellas. La ÚNICA sobreviviente es el delay 0.1s del label expandido (arriba):
+   es literal (no existe --co-motion-delay-*) y el zeroing de duración no lo
+   toca, así que sin este guard un usuario reduced-motion sufre una espera
+   muerta de 100ms antes del cambio (ya casi instantáneo). */
 @media (prefers-reduced-motion: reduce) {
-  .co-fab--hover-expand,
-  .co-fab--hover-expand co-icon,
-  .co-fab--hover-expand .co-fab__label {
-    transition: none;
+  .co-fab--hover-expand:hover:not(:disabled) .co-fab__label,
+  .co-fab--hover-expand:focus-visible .co-fab__label {
+    transition-delay: 0s;
   }
 }
 
@@ -146,11 +152,14 @@
   box-shadow: none;
 }
 
-/* ── Fixed positions ────────────────────────────────────────── */
-.co-fab--bottom-right { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
-.co-fab--bottom-left  { position: fixed; bottom: 24px; left: 24px; z-index: 1000; }
-.co-fab--top-right    { position: fixed; top: 24px; right: 24px; z-index: 1000; }
-.co-fab--top-left     { position: fixed; top: 24px; left: 24px; z-index: 1000; }
+/* ── Fixed positions ──────────────────────────────────────────
+   Los offsets son overridables por CSS var (default 24px) para que el
+   consumidor pueda separar el FAB de barras inferiores (ej. la paginación del
+   datatable): setear --co-fab-offset-bottom en el host levanta el FAB. */
+.co-fab--bottom-right { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--bottom-left  { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
+.co-fab--top-right    { position: fixed; top: var(--co-fab-offset-top, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--top-left     { position: fixed; top: var(--co-fab-offset-top, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
 
 /* ── Label ──────────────────────────────────────────────────── */
 .co-fab__label {

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

@@ -28,7 +28,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: 'ffedc2aea8b7b813b8e646872f4a0814589f80ab', class: {
+        return (h("button", { key: 'f0d1612601922430df403628c5349b322ee8e88d', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +36,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '34242af8b8de622400507b106e566b8214f53534', name: this.icon, size: iconSize }), this.label && (h("span", { key: '56cd6e22505608ebf909a1c0356ecba5c0bae418', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'fc53d94af9263b20cfce36656608962158d480ab', name: this.icon, size: iconSize }), this.label && (h("span", { key: '5a16cdace79b8fb7b6ead260d14ee4ae018ed02b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@
   border-radius: var(--co-border-radius-sm);
   cursor: pointer;
   text-align: center;
-  transition: border-color 0.15s ease, background 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-file-field__dropzone:hover {
@@ -94,7 +94,7 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   line-height: 1;
   cursor: pointer;
-  transition: box-shadow 0.15s ease, transform 0.15s 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);
 }
 
 .co-file-field__upload-btn:hover {
@@ -169,7 +169,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.2s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-file-field__preview:hover img {
@@ -287,7 +287,7 @@
   width: 40%;
   border-radius: var(--co-border-radius-full);
   background: var(--co-semantic-status-info);
-  transition: width 0.2s ease;
+  transition: width var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 /* When the host doesn't report progress, animate an indeterminate sweep. */
@@ -315,7 +315,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-secondary);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-file-field__action:hover {

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

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: 'd69adf5472c920d9fda750d390c8d66495c7d912', class: {
+        return (h("div", { key: 'f0f1cf1e1f8e7b3551a7f2cf9cda0c780e89a5cd', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '3e084a96b7fbd714fa07aeeea09146c3782af2b0', class: "co-file-field__labels" }, h("label", { key: '6618041eec9358983794238014f49ae8ad724d79', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '16aa21951eedafb190180ee40c1cba13230ef128', required: this.required })))), showDropzone && (h("div", { key: '33bfe60be00c270fe9861f0250ffe6e4ddcf820b', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '1f2f390d2d83efa97c1aaa8721caed6a6c14347b', class: "co-file-field__labels" }, h("label", { key: 'd60c45bc97aed3e3a5a01078e9f0985378fc6d55', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '99a129fd1477928257771d97dd3800a0ed0bc7b3', required: this.required })))), showDropzone && (h("div", { key: '404e7314e1fc2cb92751fae3e01685517649e2a5', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '219538469e33b0e5e2a1e26e1591d2b578b548ef', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '5021d06fe31100f7b4c6028a868b707aeb3df0c8', name: "file-arrow-up", size: 18 }), h("span", { key: 'ba785ab9e8cd6173f367ebf0a4320a37fa4b0832' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '1fae290aace7b669b27cd53529ea30c36e009805', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '999ac1eda129973f4b8710bd252337786e4eb99c', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'd2ce4783e5eba96fdf59e998f37411ef0f418458', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '55e22bcaff045708471a2837d1c0345d53a0a748', name: "actions" })), h("input", { key: '773880ce9b881512d03eac3be0465942c6376843', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '57164ac1e53062957a99ef182394ae9da7636c3e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '91894d7e208c62e0aa9407812bbaf7ad491ca275', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'c7f74b97051085770677b6433adb7b54fcf4405d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '4c55ead3dcdff97d502c2f41af86d372712ba478', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '323e98d5e7e25fcfc7c6b616f375f10bfc072c1f', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'b9862962a720cfd1f2c9774499be80f25070ce58', name: "file-arrow-up", size: 18 }), h("span", { key: '9e2aead4e161f89a85480200f77b58f3893ce9d9' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '85eb14b7a6e7e7bfdca34b65a9e2bc76a98d8a85', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '2c18fd7507c4cf1ff9a62290378ff17a695123a2', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '6d2fe109efb9d611ae0e9d0750264c07082d2293', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'c4004efe0aaee962fcb21ec9de3672ec747d9c5a', name: "actions" })), h("input", { key: 'd2e7504aec97b8cd210b938ed546662b321a0c67', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'be86d4a85621ebb3ac99a54381ea31f147f7d91e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '09a9769ee8a72011600b2516fbea7e2fdb6a8e78', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'f1e9d57bfaf98939d1371262cc469c770dda1cbb', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '05308858680195f999764585cb6de75629a88db7', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'ba03c24a5c7e6e0c774b68af85f60ec2fc4a2f0e', class: {
+        })))), helper && (h("div", { key: 'ebbbb0cffa70dbf5125ffafd5ebdafd6cc03c1d9', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ed936a52670f30b4626a1339ce7e6a246bdb65dd', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '295f5de6a6dda88246441816f636cce156aefbe8', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'bb81007afb2e2cb36d63045d09b784c6ce0aa7f1', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '28618bdc3f08a5e226751e8ac5388e7aea02567f', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -54,7 +54,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: '5eb049a7b3503d2bc82245403da53bdd7fab0ee5', class: {
+        return (h("span", { key: '1df6dee1c0f729279f36463be6df9137bcbf4af0', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -64,7 +64,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'ebb6d9ea5ffc35daefab825ad26519cb42ce2293', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '566163b957b853911e3eef15cd38c7573cf749b4', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: 'e0e318d1f4c3a9f524d11d3a9ad648960d26bb7f', class: {
+        return (h("div", { key: '2c4ae2b671b16dfda50eea3dd33b92c5661812fb', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'a65678c3cf9a832ffde08f4f47e09974338745ff', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'c3667f4f4b6e53748d5a90ab2fe12e3fcb9cdb2a', class: "co-helper-text__message" }, h("slot", { key: 'f854e37b266feee82a4b6281070d3ed84555f13c' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '18a15852e651204d06279be5a685c79ed927c6d0', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '62c3d084abd1b62f90b2631953f51306293b23b7', class: "co-helper-text__message" }, h("slot", { key: '06604123763ac0f84fe1bc2ec1dd840d6ee2756d' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '3d1fa57953812f68ff8a972f85aaf0d3f7b3ea9e', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'a1f3cfef2067bd672a17c19666821b6fac0b3027', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '07413295bbb15dcbacfaaca47e7a25d28744c71e', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'cc92c6ea6d2ab5f59a7e793f166f2ae685f7928c', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,10 @@
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  transition: opacity 0.15s ease, background 0.15s ease;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
@@ -123,6 +126,12 @@
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
 
+/* Feedback de presión: squish instantáneo; el release usa la transición base. */
+.co-icon-button:active:not(:disabled) {
+  transform: scale(0.97);
+  transition-duration: var(--co-motion-duration-instant);
+}
+
 /* ─── FALLBACK: no backdrop-filter → solid surfaces ──────────── */
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-icon-button--filled { background: var(--co-semantic-surface-primary); }

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

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '380bc110b581dba4f897ba8c8b733598c9e4f9ca', class: {
+        return (h("button", { key: 'a49770e4411aed2b27e25e42903ccc9b29de5603', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

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

@@ -90,7 +90,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;
   overflow: hidden;
@@ -209,7 +209,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-input__clear--hidden {
@@ -239,7 +239,7 @@
   line-height: 1;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
 }
 

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

@@ -60,7 +60,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;
 }

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

@@ -97,17 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: 'd8b9c23bee6f09946081ce7cb91c1697941087e0', class: {
+        return (h("div", { key: '6e303939542b1c400432876149a7f7cf94dbfad4', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'f2ed5ce77d91b1387241a1094d56a75cb23ffe56', class: "co-json-field__labels" }, h("label", { key: 'bb29ba11182753c531d9c32a54312a85c82d79be', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f43ada2a1eedea7338022114dcd1a9f3678a2eac', required: this.required })))), h("div", { key: 'c49bbb7fbebfb654bad666d651229fefc4fa1527', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'e79137036d429efa440931e7b46f1d7e72cf8194', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: 'f84bb6f034b7fe724af92d42b8d19fe6b9e183b1', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '077147072123742355123df6e56fbbff44b12037', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '77c4793e6755c159d70943be68d94dc9a8f6f82c', class: "co-json-field__labels" }, h("label", { key: 'fa060ddb64fea5a78f339cf10ff46b8bbc3f6c9c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'fd130517bb57f0b5c012f39e61cd4ef905c34b42', required: this.required })))), h("div", { key: '752bccc5c2193a81ef174415b0e22936d1729914', class: "co-json-field__field", part: "field" }, h("textarea", { key: '397b3e80d4d252c55f55d9e6c444083f8ee2a28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '8d658f97252824dce51a262c19e251b664de9c4e', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '857a97a47b5a88b0a778680329670b474ff1eac1', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ba83b63c2283eb2ce26e43ceed41a7806f7a7b6', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '7da6904539ed1ae85b2ceac2432824d0b9a7fbe2', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'df90fefaedba9e8340b1fbfd19dd8350ab8e26af', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '3ba614c007e38009f7cda47be0d705d63397359f', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@
   background: var(--co-color-opacity-negro-80);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-lightbox--open {
@@ -87,7 +87,7 @@
   font-family: inherit;
   font-size: var(--co-font-size-13, 13px);
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-lightbox__btn:hover {
@@ -116,7 +116,7 @@
   max-height: calc(100vh - var(--co-spacing-5xl) * 2);
   border-radius: var(--co-border-radius-xs);
   user-select: none;
-  transition: transform 0.18s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-lightbox__img--zoomed {
@@ -144,7 +144,7 @@
   background: var(--co-color-opacity-blanco-8);
   color: var(--co-color-base-blanco);
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-lightbox__nav:hover {

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

@@ -313,17 +313,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: '409eeaf562838f77035c1ec68db8de59aa862f5e', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '1e92d6f50ab44b6a70407a2c55acba360c0c66c0', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '0181054cd227183e0b942e1262d42a29125852b5', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '97cb4d596a790dc1fe41cda38bdd4b0b4a7d873f', class: "co-lightbox__zoom" }, h("button", { key: '8c37c4b6978b8bfb1ce7a33a52fce30e2d740d4b', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '294ee562bfe7be7bb2a181a8411045a4d0c1b684', name: "minus", size: 16 })), h("button", { key: 'f32438655d3a7e81a08196720471212443594d7d', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'c82db20eda5ef0bd671f551f24ff96771f30a579', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '855559de89e53c3aa8ae34802fbc04da8a04e28d', name: "plus", size: 16 }))), h("button", { key: '00cbfeec37137ba3a5c86801caf5e41e17a25c57', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '62f5c52bd92b3470b3940f59e61c4f89fad7e86b', name: "arrow-square-out", size: 16 })), h("button", { key: '800b50c607772142b2229b4a19fe970998a8e886', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '9850ddfb8c2aa409fa35ea9f357bbea2ace3aa41', name: "x", size: 16 })))), img && (h("div", { key: '4b669e9c6599a25743ba6d194c80faf1cdbfceec', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '34218bfdd2691dc399ed03ca25d64ee81106114c', class: {
+        return (h("div", { key: 'ee47c98cd468a05ffc7536756b72818bfa9391da', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '80859431215ee33bc0480f8788a32886486d4e7c', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '09ee3dc94fdb88f66516a1d5e5f44f1f2a90d850', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '86a02fb7b0c0e92eb633d5d61464c1a8e044564c', class: "co-lightbox__zoom" }, h("button", { key: '3e83390c0b22ef8986c39dc399f04e2cad48556e', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'e4241a61696d191b262270370924ee4700949e98', name: "minus", size: 16 })), h("button", { key: '92b11da3129dfdd181b9114c613fc3624c9df41a', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'e224e703bf5902f7b72acb6428ed5ec46ace49a1', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '4216032ce75fee7e05bdbc50095ddc7037910876', name: "plus", size: 16 }))), h("button", { key: '8ec864104b0127f0d6150d91179a46b35270fb4c', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '836480f7857396b613e99abf85fedabbf73fa43a', name: "arrow-square-out", size: 16 })), h("button", { key: '736dbb247d0af9e261fa5bf21ec6113f8d40f612', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '0c45bcfb64245b5388452216204effd74482a862', name: "x", size: 16 })))), img && (h("div", { key: 'af2d7a221312f18a62895579a067e740e878caf3', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'fac630a31bf240d6ef5ffe3c85136e5534722b26', class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: 'dc9a8e78cfdf8e220e2173a8960f06a8bdeaea59', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '3cca38f856ec367dc40596acc988875d6b334f60', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '020e87affb9ad79b48ec9d77a7796923127b45b4', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '5dd82a8b66cc3b2abc4c04483141032a7a07bf2d', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: 'f5c296f6802355140cb64b690401f12faac29faa', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: 'a0104539bcc4a9ebc4090d28636c7fae7cfcf1ae', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: '85e8aaebc526455e22eb635b2e64f5105730b56e', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6976d3bb7f5594e8d40cf01b05cc7611cb6066cb', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '6adef24091aeaa4df0bf92cbade32bdf9273c015', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6a31e663231a66339621c26aba74c28e3c9b152e', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-footer/co-list-footer.css

@@ -23,7 +23,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-list-footer/co-list-footer.js

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: '54b813b714dbcdfb535349f6f49c715e53bdadd7', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '6fdf4c75f1803532e43b0609fd765aeb79ae3d89', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'e4199ccd7f50044b12aa7bc16b3233fbc4ffd9bf', name: this.secondaryIcon, size: 16 }), h("span", { key: 'f6f81eaf8ae03526fd3cf5e31946d1470523adb3' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '5ab90aceea926978ef73f6be77b7c9aa8fd45156', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '2693de047b35e795ee24932612b4b01c8050ef1f', name: this.primaryIcon, size: 16 }), h("span", { key: 'e29b11a48ee4bf3acda5a7a4f493cafdd6fc691d' }, this.primaryLabel))), h("slot", { key: '7f9ed9622ff7ed6486b5c253f9c3bd4e5c2ce1e3' })));
+        return (h("div", { key: '8dacde70abe5f58b86003a6bb82dad4bbc4b0394', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'd6049cfd2e018323dc9426da5cc267b8ddbd3479', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '04c33cf918267dc57d6955f53be90c1aa61065a1', name: this.secondaryIcon, size: 16 }), h("span", { key: '8062a62489076b81f6dd16dc95245bee1e57826e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '26c8305842045d4ebd1c37d6fc304efa67c8329b', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '62a0cab190325e97536f72393d4a5b8accb5e9c7', name: this.primaryIcon, size: 16 }), h("span", { key: '2a7eb0c0bda8112823090f5dfdb6aa8aa6329a09' }, this.primaryLabel))), h("slot", { key: '385b7fddd09c86e8d3e0c793cf205ba9358718ec' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-item/co-list-item.css

@@ -10,7 +10,7 @@
   font-family: var(--co-font-family-primary);
   cursor: pointer;
   border-radius: var(--co-border-radius-sm);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   min-height: 40px;
 }

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

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '2833a06b0f1ced02b1c1d7b4002757985e5f6184', class: {
+        return (h("div", { key: '5b4255d0896c4b411e4b558623d23404f9a0a099', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '74bdab766a1820cb43b88b9a994ea158e1a8f0ae', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'f8b117b8b9e1d6db47785783acab5e60e4bb9e7a', name: this.icon, size: 18 }), h("slot", { key: '4c96820ce0925af1a2fec623c4038cc117d2f5c6', name: "prefix" })), h("div", { key: '3c988300fe272d3da9b2ae6a463a4fdc6b683224', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '6f3d61fb883dc3d6fe4751044569ef791a87db03', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '37edcae63b25f9c54e27349cfcc121804255c83e', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '8f2d21c6e38644a825dc7d90d03c8bb1ecdb9dbc', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '42f7f82814dea4979aa42dfc199137cadca84d50', name: this.icon, size: 18 }), h("slot", { key: '2e8b8279c24afd6d6a3377a3e6407de3a946ce2d', name: "prefix" })), h("div", { key: '441c477e26e4188bf5fc57296e64ec7394244946', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '77c6f39d6f9758dd06f8d6b3684dea9d670dc591', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '6cb1798690cd602b5d3a41259420422ec5d9f147', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: '609ad1694738508bed362594fc34609565eb5559', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '4c2231492bab190bda98189ae5d770aaf3aec3e0', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: 'd514a4554ec7160e192575c019c2036bafacad93', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'ff1a1fcf77f4fcb1c8da4aa686e325609652cbb0', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: 'edc4e2d138c4a888fa78981568a57beb9a5ef7e1' })), h("span", { key: 'ed100617bd1d7f54df33b05696948a187f5df07a', class: "co-list-item__suffix" }, h("slot", { key: '7f76f1a12a0b6c8f2e71e3140125797b62626e90', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: 'd449919d91bab89c6152bb506e79a89670182951' })), h("span", { key: '88003131b37470c9b922c9511c38f6e95af8c55a', class: "co-list-item__suffix" }, h("slot", { key: '2e55673f5a17d14b5194490e87a332cbce70daf6', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -23,13 +23,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: '787947d309049a7ca5fa739a7748993833dfb80c', class: {
+        return (h("div", { key: '42fce6b31a7fe5a35b41b28d96a67c800151bcec', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '74c58b90643aa7cc33be7b42081a48e9f89127ed', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '752f888648a9c7dcbedadf880566646ff8280331', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'ee76649c415fbe00737d00584099bf359c1abcca', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dd160a9aec688bc4d97fb3a9245bcd613ff85cb4', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '4430246548961644d9f42f92553500940f4df104', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '77caecbab8334f1cfdc962ad0324a3955b96efa4', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'ebec80f90e363b1702bbb4c7dbc769d2e864a9a5', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '8e8d03f91df6cf4fb9cf18f03805739689563eb0', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '92d59b733eb81e53e003ebcbe4324480fbcb4475', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'd8e70f68b13dd8f96a75d2f5c96b87651e1afc18', name: "trigger", slot: "trigger" }), h("div", { key: '2787503b2711a88baafcacad615814c0abbeceb0', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'f3e4139845c8f77970b735631e26f5cfc6710405' }))));
+        return (h("co-popover", { key: 'afc38289103988c2e71fd219e397f475924ebddc', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '35c3defb8ea82fc1a077cd77f75168d1455d8a5c', name: "trigger", slot: "trigger" }), h("div", { key: '4a741c330a25f412396a4331dd63e839334acba4', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '3448b69c6c6be4aa2fcf8dcbe1cef4298b266699' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: 'a305638c4f791be63278b343966cb22d92448ad9', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: 'c20412fd7e29eb932a241e743250e8009f2a9f1e', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-item/co-menu-item.css

@@ -23,7 +23,7 @@
   color: var(--co-semantic-text-default);
   text-align: left;
   cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: var(--co-menu-item-height, 36px);
   box-sizing: border-box;
 }

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

@@ -54,7 +54,7 @@
   font-family: var(--co-font-family-primary);
   transform: translateY(8px);
   opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-slow) var(--co-motion-ease-out);
 }
 
 .co-modal--sm { max-width: 400px; }
@@ -124,7 +124,7 @@
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
   flex-shrink: 0;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-modal__close:hover {

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

@@ -62,14 +62,14 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: 'aef8eefd5790e210ada8e53f1d904dd7652b75dd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'dcf89aa4a6e783e16e99b3c350b917e073c26b76', class: "co-modal__frame" }, h("div", { key: 'c579fe7b0ac3b92c4a413eac9cc4a9da3ec06f69', class: {
+        return (h("co-overlay", { key: '1e7dd281f39fb58a7f5a098ee82021025a65ec90', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '5e59d91ea3ff39bc12e6138466d656613ff3e31d', class: "co-modal__frame" }, h("div", { key: 'bff3571a675e6440825d84f68aa841916679b522', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '37bcab4a7d73d99ed199a4dc3ddbcb5d452f7f67', class: "co-modal__header", part: "header" }, h("div", { key: '1761b1fa2761ec89b74da943652533873ffb041d', class: "co-modal__header-text" }, h("h2", { key: 'f8ee41c7c122956431c388222cdde6263089118f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f719d9f6b3f974f0f677ac9daba1611e8e90d162', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'c893a1c5f36631743061ad71f5c120ba6d695081', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'afcce2e70b4045188ee37897798d8f54add996c2', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'ab2890e8f0e3308d9fe989107eebb6ca24161f6d', class: "co-modal__body", part: "body" }, h("slot", { key: '2991f8166a1fc52dbb58350ab5573d67a35ed2ad' }))), h("div", { key: '3d2a5f9aa2ba1eac6d11828e0653be775d9f9152', class: "co-modal__footer", part: "footer" }, h("slot", { key: '62ff2668995d3d9d33719b29a85a8afd31013042', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: 'a39e9156bbc67391944c2c7440ebdee5c9b1d049', class: "co-modal__header", part: "header" }, h("div", { key: '76f92b37830dbd3567ee2868b6fc487fb7dcf522', class: "co-modal__header-text" }, h("h2", { key: '78240a5ecb721be55a5904740fba50fe517a3450', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '99de158b468cfb91cd6cef9c5506993e646f2b8a', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '442ce1a4c773e53bb6f28475fc6e609ff4606cbf', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '8ce906f10902504246c7f981d9978dc1312c2612', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'f5220757d63d74977ba8c7e8dbab1395310020ed', class: "co-modal__body", part: "body" }, h("slot", { key: 'f110c632c9f69a871e38805b32073c821cb3731f' }))), h("div", { key: 'bb4b829a0731a4dedfbeed8d13c051b23da81b38', class: "co-modal__footer", part: "footer" }, h("slot", { key: '7d489353555a36144fa0bc0acdbb960124036e50', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }