@prolibu-suite/cobalt-core 0.8.0 → 0.9.0

package/dist/collection/components/co-drive-card/co-drive-card.css

@@ -25,7 +25,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  transition: box-shadow 0.14s ease, background 0.12s ease;
+  transition: box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card--folder.co-drive-card--comfy {
@@ -116,7 +116,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  transition: box-shadow 0.14s ease;
+  transition: box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card--file.co-drive-card--comfy {
@@ -209,7 +209,7 @@
   align-items: center;
   color: var(--co-color-gray-400, #a0a0a0);
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card:hover .co-drive-card__actions {
@@ -227,7 +227,7 @@
   cursor: pointer;
   color: var(--co-color-base-blanco, #fff);
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card:hover .co-drive-card__star-overlay,
@@ -248,7 +248,7 @@
   border-radius: 6px;
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   background: rgba(255, 255, 255, 0.9);
   box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
 }

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: 'de146bee6d498936524230709866a1b79ad3b34f', class: {
+        return (h("div", { key: '62056a659681c95fb1bdd8dc471b8543581f1662', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: 'cafe8242c821aa2258ab579cd5ecc82b77e2d7b3', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'ec3c95cda838eab85e6a825c437954a190c0d25c' }), this.active && (h("div", { key: '74150a61764fde4ae351a7105916cde81ad42c80', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'a7622e82346dd8657e6fbfeb7476b7f948e5ad25', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '73725c98333f7a9fef978b82c447f631c742996b', name: this.icon, size: 34 })), h("span", { key: 'cf5900ec506c13664149598f6a509c50b405f7af', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: 'a5bf9dd9d62d7d7d2ec1b0d277a267b721ea430d', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '609343dd414c752617e50f73f36f55d4edfc773f' }), this.active && (h("div", { key: '03f38f63b2cf7d9a166d31541f1c21bb2953c80f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '7b8cd9daa821d224e40507646a166190ea5f917f', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'f5f201175801233c4d32772dab7f947c8886ca34', name: this.icon, size: 34 })), h("span", { key: '766d7defd61ab35ab07b6b51c3fe177eb3afee2e', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: '20c49e1fdadfe4813274a443b13686e9bf628449', class: {
+        return (h("div", { key: 'fd0802c7ab379e2ff69d181a89e82f9af50c7eb7', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: 'd8a2167915f146c1de68475f8c0852c3dfc87a01', class: "co-empty-state__icon" }, h("co-icon", { key: '13d13be52c5754baf96fe7b699169e2f0a3761ab', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: 'ef0b94049516827ba30b63022c591b367f2d4081', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '25a21c6d97a387ac36eb8ff9abfc00806becab46', class: "co-empty-state__description" }, this.description)), h("div", { key: '6118e691a0d6ad780f06b23fae588cae43a6fa74', class: "co-empty-state__actions" }, h("slot", { key: 'dbd56768f75258c08bc9958ea4665c1d95500bfe' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: '0e37fbc4e087c5bc5ac69eee01cecd9fcde09f49', class: "co-empty-state__icon" }, h("co-icon", { key: '0e75bba07af87b883e7cb236800282af51c4b84f', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '69ea3039e73b48f77fa6e58d673802d34506c4ef', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '223d8321af110cbde025a59e3677338abee0cc33', class: "co-empty-state__description" }, this.description)), h("div", { key: 'bfba2044eacf53aae426fb99dc1f2d5314a0b8e6', class: "co-empty-state__actions" }, h("slot", { key: 'b22df42a753f9ca5797b373a611421e07881d3e1' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,7 +67,7 @@
   font-size: var(--co-font-size-14, 14px);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal__btn:hover {
   background: var(--co-semantic-surface-hover);
@@ -88,7 +88,7 @@
   border-radius: var(--co-border-radius-xs);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal__icon-btn:hover {
   background: var(--co-semantic-surface-hover);

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

@@ -223,10 +223,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: '12c11a1954cd53034be9717fc5fdd80c4195ae6f', class: "cal" }, h("div", { key: '44e56be42b6ac944983a6ba29e4aba95c67589ab', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '26db9f5e32e604bf6d3f5645b14a92510d224f4c', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '40878237f7d076531fa210b0b765087923e0256f', class: "cal__title-group" }, h("button", { key: '59bb0f5d15e834f95f54a7a2575dc097d213d5ce', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '0db880709e17ab918507bcf9ee0377dd260fbb10', name: "caret-left", size: 16 })), h("h2", { key: '772eb75bb0f749c78da037e0fb918cfa2dd3bc12', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '3ec51c2cd9485841aee0b7b9145756e1721791e3', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '95d54c3fcd198d16ae8d874afe558480323b993c', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: '5fc690577299cbb5d2e4e75d41279ee6f49b9e80', class: "cal" }, h("div", { key: '55b342eacfa324b5eb3e1c819948aba5783e028e', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '7e190cb82abe886d5740b314aeacc136732e0538', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '0d12537595e3fb72a7214e968cd952ce68f09b90', class: "cal__title-group" }, h("button", { key: '7d658998a4df6144b9b7752103cae448eb9bea6e', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '4b793fef900dfd76f1356b1e78c7f5ed10b3da4f', name: "caret-left", size: 16 })), h("h2", { key: '0461afb4b372f7c95b528f5746b2ba6008181dcc', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '7b169bb04482f6049f4af0c19cf8bf86a962dabf', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'b426d015251b5a476e2cd34b01d1c7d5d92be71d', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: 'c866ef7e6117d662309e57805511a024640fd18d', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '417cc54fe753d802f30d13992fef86d055c823a3', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-popover/co-event-popover.css

@@ -15,10 +15,9 @@
   z-index: 1000;
   font-family: var(--co-font-family-primary);
   color: var(--co-semantic-text-default);
-  animation: co-pop-in 0.15s cubic-bezier(0.05, 0.7, 0.1, 1);
+  animation: co-pop-in var(--co-motion-duration-fast) var(--co-motion-ease-out);
   outline: none;
 }
-@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }
 @keyframes co-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
 .pop__actions { display: flex; justify-content: flex-end; gap: var(--co-spacing-xxs); padding: var(--co-spacing-sm2) var(--co-spacing-sm2) 0; }
 .pop__head { display: flex; gap: var(--co-spacing-md); padding: var(--co-spacing-xs) var(--co-spacing-xl) var(--co-spacing-xl); }

package/dist/collection/components/co-event-popover/co-event-popover.js

@@ -115,7 +115,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: 'ac4fad8add6f42cd02cd516f32e0820f1bc7b1c6' }, h("div", { key: 'bd0f4d1adb5d21d329ec5b6dd06c08ef13e86cf4', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '22599ea7ff5fdc39c38b0546ecc6869f6a6e0036', class: "pop__actions", part: "actions" }, h("slot", { key: 'fd9fd75cce78007b7407be5e7a0ef54f49ce2dcc', name: "actions" })), h("div", { key: '16b5af287977fbab204b69cc94e1591c5db963fb', class: "pop__head" }, this.dot && h("span", { key: '6bb8f39ef10c5a81ee461557e42837f43cd44c20', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '0dcd02e0da924f914015ada88388ddc1d9732447', class: "pop__body", part: "body" }, h("slot", { key: 'b00ade5c89b5a1e908e9cb463c6b461720609121' }))))));
+        return (h(Host, { key: '0d80c0a501c72d7428c85ba44075a4c9cab05f6f' }, h("div", { key: 'a772efeb2c49d71f42b53f63ba56858019fcfdcd', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '8eff11fdc9ae6ebd0de3967dc3a6522cd159bfa0', class: "pop__actions", part: "actions" }, h("slot", { key: 'b9c5c598356d8acc6b0cf135e3c5347de937a33b', name: "actions" })), h("div", { key: '0e1f10c5727d66170d9c1a5b8137ba48c61a867b', class: "pop__head" }, this.dot && h("span", { key: '78ab616e697fb9e4cdc354e791a4e2184ea20123', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '1abdeb6c16aa3daf5adfb652f4f2ede5e0abb891', class: "pop__body", part: "body" }, h("slot", { key: 'f28a87f62acaa8c617cf24f264462b525065ecbc' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

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;
   }
 }
 

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: '67d54b40024fa3851d0ea79960949861ecaeaf4c', 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: 'e5e75805115a8b31530a56d8210dcdae66e28ab5', name: this.icon, size: iconSize }), this.label && (h("span", { key: '2e659c02f0056f848f5c0566069dd39f4cd48d2c', 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: '11e79bc9c1b3b56c10c0558b0d504821db7e8cd6', 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: '9e3f1d834e5a1b70411747568d7a1055b3e0d8f1', class: "co-file-field__labels" }, h("label", { key: '1c138fbe71432df15c970b00f910e0ddcc69a333', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '34b7d0fe683a911fc10352f0d7c79cb01c559999', required: this.required })))), showDropzone && (h("div", { key: '9d046b734982edfd7d9743e9dab5b95593e15383', 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: '9af47292af70f8da16062a0bbac21ea520a52a39', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '68f3467892671d62648ccf2d1302cd579cd6601c', name: "file-arrow-up", size: 18 }), h("span", { key: 'a167aa0aef4f1e209660f251dd945ac41576b39f' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'b1bcfb1eabab417cd46920ccc43f624e52d1470c', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '44a29cb6fcd9ea9a65de12794d1313c0ef9da7b9', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '4d4f68f6684b976ec1610ebd45bc59ece67a13a9', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '000fe510d61916cb016a9a2d9968426c0edabe62', name: "actions" })), h("input", { key: '16169cf42cc8072d63c36bb3a25f9c5d540e48c3', 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: '23dae3bd944ad6cbd7e0d10898832aa1367956a5', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'ca0c17ecc64a68594758c626d41bd14ad6a19633', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '343ca190a8ebb4a2589b90d6b9718e91f7d23bf1', 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: '9b911d176a0ac02b6f76c084c8b7f33c2c8637aa', 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: 'c2edda6419a9f6e75f7c16fac61ce3271159d816', 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: '0772a3d9fdf8fc818b0738ce4c7f0297c6eb4984', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6153f585fdd804fb49b09e1d106c6625e473b917', 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: '174e628c4a7fdd118cd5573c0054677c7c006989', 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: '815957f4dd756fec566b4bbc996083e80aed0ab5', 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: 'c09b28c4e20a80ce87275beb8c8f38c4ec9a6ac3', 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: '48bee19674872e9ed7b06a9f0706063111abc3ae', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9b1e0cd4c00ad73c915f826df299cbb05156ca02', class: "co-helper-text__message" }, h("slot", { key: '41c95d86b31bb19be88b619057aba484748f1dfc' }, 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: '81319f5bcb43f9f095f7ae6328002bcffe22bc42', "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: '4875243b3b1c0d40d82abc65307e398e83363b61', 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: '430b2aa64f664a6bd7cb40da53f592606c4b5308', 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: '37c5b552e44d19e321bfd64a35da61e54418013c', 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: '5ab03329fc4828abf624e473aef67bfa6878a4b1', class: "co-json-field__labels" }, h("label", { key: '14babf193d87564b813174f34df4ae4fc299155b', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '635dd453ef2ed9ee720cc1c3f1c07a7b744d61ec', required: this.required })))), h("div", { key: '83763a2b5438b74da65e51bcbbdd6e6776eda45a', class: "co-json-field__field", part: "field" }, h("textarea", { key: '1f3929e95d98aca26d8f47b3fbce6c2c37aea3fa', 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: '1dd77538a40085b72ba6b407e88d31faa73cd8dc', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '6fb332624ab9dfa6b21af159ad3153eea4066c9a', 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: 'f4da415f949ee8d127eece321f4d8feecdd3a1ff', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '7e3b458f7173be6ac4fdcf7df42d3a132ab5082b', 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: 'c1743a4e71ebdb84af2271962ba1b76a434bbe24', 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: 'f12555c4b7e8f4f061b7a449d3cb6665c4846cda', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '4bb66de1922f388886d000342f983ab852db0045', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '9fbdc078e7dbe0af9813a91a60155c1545e7309e', class: "co-lightbox__zoom" }, h("button", { key: 'b780571cec8da08b9ae069e1ffb6be1d933c4ea1', 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: '05ffc5137ff964d4159fed49191c2af17abec51f', name: "minus", size: 16 })), h("button", { key: 'b3d6751bb3b81233ccfb61b9692b9d14dda3307f', 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: '34ffc666558698b6e8dd3c0559ed1c5372c7947b', 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: 'a0c066dfb0cf6026b08f85821e197e2340963979', name: "plus", size: 16 }))), h("button", { key: '12f8f66333d043214c57cebb81d1a153be72f9b3', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'c60b9a9856aa62728576c356af09880ca2d7710d', name: "arrow-square-out", size: 16 })), h("button", { key: '8a7caebb371e5f509051b92a730712f6e304eac2', 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: 'efcd1f9672c2fa61b74f75b25771574ec6108004', name: "x", size: 16 })))), img && (h("div", { key: 'fc99ed851d5ffd99fb09b7c98fb4d317bcaa1f2a', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '7e43afbd4e170ab2b1a818501b7e34d4147c143e', 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: '461444963dde42d1d72af6bd88fe2013ab3858ee', 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: 'a69c348080ac70da9d5af641c502e6a1f206f7dd', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '56504889f11cb56cea40aef5676ea6916aade850', 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: '44cb0a0c644aa75c581bdd863df98590dbd0ebc3', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6642109e875532fea123fc75fe0cf0ea6129be85', 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: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
     }
     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;
 }