@prolibu-suite/cobalt-core 0.8.0 → 0.9.1

package/dist/collection/components/co-data-table/co-data-table.css

@@ -108,7 +108,7 @@ co-data-table {
   color: var(--co-color-gray-300);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__pin-icon--active {
@@ -132,7 +132,7 @@ co-data-table {
   color: var(--co-color-gray-300);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__th:hover .co-data-table__filter-icon {
@@ -164,7 +164,7 @@ co-data-table {
   align-items: center;
   flex-shrink: 0;
   color: var(--co-color-gray-400);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-data-table__sort-icon--active {
@@ -220,6 +220,39 @@ co-data-table {
   z-index: 3;
 }
 
+/* ⚠️ Una celda STICKY NO puede establecer un clip propio (overflow hidden/clip,
+   contain:paint). Doble clase para ganarle por especificidad al `overflow:hidden`
+   de las reglas base .co-data-table__th / .co-data-table__td (que van después en
+   este archivo), sin depender del orden.
+
+   Dos defectos, ambos verificados en vivo (Chromium 141, scrollbars clásicas):
+
+   1. HIT-TEST FUERA DEL SCROLLPORT — Chromium no intersecta la región de
+      hit-test de una celda sticky que tiene clip propio con el borde INFERIOR
+      del scrollport: la celda de la última fila (recortada a medias) y sus
+      hijos siguen siendo hitteables dentro del canal de 11px de la scrollbar
+      horizontal y le roban el puntero al thumb. Efecto: sobre las columnas
+      fijadas el thumb no toma :hover ni se puede arrastrar — funciona en el
+      resto del ancho. `elementFromPoint` en el canal devolvía el contenido de
+      la celda en vez de .co-data-table__scroll.
+   2. CONTENEDOR DE SCROLL FANTASMA — con la sombra ::after en right:-4px,
+      scrollWidth > clientWidth convierte a la celda en un scroll container
+      horizontal incapaz de scrollear, y el trackpad engancha el swipe al eje
+      vertical solo sobre esa columna.
+
+   Matriz medida: static+hidden = OK · sticky+visible = OK ·
+   sticky+hidden / sticky+clip / sticky+contain:paint = AMBOS defectos.
+   El z-index no influye.
+
+   El truncado NO se pierde: vive en el contenido (.co-data-table__cell-text y
+   .co-data-table__th-label ya traen overflow:hidden + text-overflow:ellipsis,
+   y sus min-width:auto resuelven a 0 por tener overflow≠visible). Bonus: la
+   sombra ::after ya no queda recortada en el <th>. */
+.co-data-table__th.co-data-table__th--sticky,
+.co-data-table__td.co-data-table__td--sticky {
+  overflow: visible;
+}
+
 /* Shadow for sticky columns on scroll */
 .co-data-table__td--sticky::after,
 .co-data-table__th--sticky::after {
@@ -232,7 +265,7 @@ co-data-table {
   pointer-events: none;
   opacity: 0;
   background: linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ─── RESIZE HANDLE ─────────────────────────────────────────── */
@@ -259,7 +292,7 @@ co-data-table {
 /* ─── BODY ──────────────────────────────────────────────────── */
 .co-data-table__row {
   height: 48px;
-  transition: background-color 0.15s ease;  /* Browser-native rendering optimization: skips layout/paint
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);  /* Browser-native rendering optimization: skips layout/paint
      for rows outside the viewport. No JS virtual scrolling needed,
      no VDOM conflicts. Supported in Chrome/Edge 85+. */
   content-visibility: auto;

package/dist/collection/components/co-data-table/co-data-table.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { edgeAutoScrollSpeed, resizeWidth } from "../../utils/columnResize";
 /**
  * @slot - Default slot for custom row content (advanced usage)
  */
@@ -52,6 +53,17 @@ export class CoDataTable {
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
+        // Edge auto-scroll drag state — plain fields (not @State): they mutate per
+        // frame and the re-render is already driven by the columnWidths Map swap.
+        this.resizeEdgeExtra = 0;
+        this.resizeLastClientX = 0;
+        this.resizeAutoScrollRaf = 0;
+        // Scroll owed to the auto-scroll growth, applied in componentDidRender —
+        // NEVER in the tick itself: the @State render is async, so at max scroll a
+        // same-tick scrollLeft advance clamps against the not-yet-grown table and
+        // the scroll falls permanently behind the width (boundary drifts off the
+        // pointer). Deferring to didRender lands width + scroll in the SAME paint.
+        this.resizePendingScroll = 0;
         // Swallows the click the browser synthesizes right after a resize drag ends.
         // The resize handle lives inside the sortable <th>, so without this a resize
         // would bubble to the header's onClick and trigger a sort (+ a full refetch).
@@ -113,6 +125,18 @@ export class CoDataTable {
         this.parseFilteredFields();
         this.parseIndirectFields();
     }
+    componentDidRender() {
+        // Auto-scroll parity: the resize tick grew the column (async @State render)
+        // and owes the container the same px of scroll. Here the DOM already has
+        // the new table width, so the advance can't clamp — width and scroll land
+        // in the same paint and the drag boundary stays pinned under the pointer.
+        if (this.resizePendingScroll) {
+            const scrollEl = this.el.querySelector('.co-data-table__scroll');
+            if (scrollEl)
+                scrollEl.scrollLeft += this.resizePendingScroll;
+            this.resizePendingScroll = 0;
+        }
+    }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
         // Ignore the click synthesized by a resize drag that ended on this <th>.
@@ -164,16 +188,74 @@ export class CoDataTable {
         this.resizingColumn = field;
         this.resizeStartX = e.clientX;
         this.resizeStartWidth = this.columnWidths.get(field) || 150;
+        this.resizeEdgeExtra = 0;
+        this.resizeLastClientX = e.clientX;
+        const scrollEl = this.el.querySelector('.co-data-table__scroll');
+        const columnMinWidth = () => { var _a; return ((_a = this.parsedColumns.find(c => c.field === this.resizingColumn)) === null || _a === void 0 ? void 0 : _a.minWidth) || 80; };
+        const applyWidth = () => {
+            const column = this.resizingColumn;
+            if (!column)
+                return 0;
+            const newWidth = resizeWidth({
+                startWidth: this.resizeStartWidth,
+                minWidth: columnMinWidth(),
+                pointerDelta: this.resizeLastClientX - this.resizeStartX,
+                autoScrollExtra: this.resizeEdgeExtra,
+            });
+            this.columnWidths = new Map(this.columnWidths.set(column, newWidth));
+            return newWidth;
+        };
+        // Growing a column past the viewport needs the container to CHASE the
+        // pointer: while it hovers the edge zone, each frame adds `speed` px to the
+        // width AND owes the container the same px of scroll, so the boundary stays
+        // pinned under the pointer instead of dying at the viewport edge (the old
+        // drag forced release → scrollbar → drag again to keep growing). The owed
+        // scroll is NOT applied here — see resizePendingScroll/componentDidRender:
+        // the @State render is async, so a same-tick scrollLeft advance would clamp
+        // against the not-yet-grown table and fall permanently behind the width.
+        const autoScrollTick = () => {
+            this.resizeAutoScrollRaf = 0;
+            const column = this.resizingColumn;
+            if (!column || !scrollEl)
+                return;
+            const rect = scrollEl.getBoundingClientRect();
+            const speed = edgeAutoScrollSpeed({
+                pointerX: this.resizeLastClientX,
+                containerLeft: rect.left,
+                containerRight: rect.right,
+            });
+            if (!speed)
+                return;
+            // Shrinking at the left edge: once the column bottoms out at minWidth
+            // stop the loop — accumulating further negative extra would rubber-band
+            // the next rightward drag.
+            if (speed < 0 && (this.columnWidths.get(column) || this.resizeStartWidth) <= columnMinWidth())
+                return;
+            this.resizeEdgeExtra += speed;
+            this.resizePendingScroll += speed;
+            // applyWidth swaps the Map reference → guarantees a render → guarantees
+            // componentDidRender flushes the pending scroll right after the paint
+            // that shows the wider table.
+            applyWidth();
+            this.resizeAutoScrollRaf = requestAnimationFrame(autoScrollTick);
+        };
         const onMouseMove = (ev) => {
-            var _a;
             if (!this.resizingColumn)
                 return;
-            const diff = ev.clientX - this.resizeStartX;
-            const minWidth = ((_a = this.parsedColumns.find(c => c.field === this.resizingColumn)) === null || _a === void 0 ? void 0 : _a.minWidth) || 80;
-            const newWidth = Math.max(minWidth, this.resizeStartWidth + diff);
-            this.columnWidths = new Map(this.columnWidths.set(this.resizingColumn, newWidth));
+            this.resizeLastClientX = ev.clientX;
+            applyWidth();
+            if (!this.resizeAutoScrollRaf)
+                this.resizeAutoScrollRaf = requestAnimationFrame(autoScrollTick);
         };
         const onMouseUp = () => {
+            if (this.resizeAutoScrollRaf) {
+                cancelAnimationFrame(this.resizeAutoScrollRaf);
+                this.resizeAutoScrollRaf = 0;
+            }
+            // resizePendingScroll is NOT zeroed here: it is only ever nonzero with a
+            // render already in flight (each tick increments it right before
+            // applyWidth), so its flush in componentDidRender is the legitimate tail
+            // of the drag — zeroing it would strand the boundary short of the pointer.
             if (this.resizingColumn) {
                 const width = this.columnWidths.get(this.resizingColumn) || 150;
                 this.coColumnResize.emit({ field: this.resizingColumn, width });
@@ -339,12 +421,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: 'baf9a797b25e76d4b054513b3e4c90aacce24a80', class: {
+        return (h("div", { key: '6ba1f3bb555252c55246c8af73b8ce08610e93b0', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, h("div", { key: '132100357cb7fed5d27054e2e3a66c218dddad9d', class: "co-data-table__scroll" }, h("table", { key: '0e183744b6f1c7c44ec8dd741eb8cdbbbdf5b638', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'c3c58515f63fdfdfa760ba483f00c686863ddb20' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
+            } }, h("div", { key: '69bc61a98f48ac06006d9b5ab132abf15bbeeb64', class: "co-data-table__scroll" }, h("table", { key: 'bc7627b050900ca6c8887981e47368bfb7f181ea', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'fc98863e680b660844ec968af6ebc645160ee32e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.css

@@ -57,7 +57,7 @@
   text-align: center;
   padding: 0 var(--co-spacing-xs);
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__jump-input:focus {
@@ -76,7 +76,7 @@
   cursor: pointer;
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xxs);
-  transition: background-color 0.15s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-size-trigger:hover {
@@ -112,7 +112,7 @@
   color: var(--co-semantic-text-default);
   text-align: left;
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-size-option:hover {
@@ -143,7 +143,7 @@
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   white-space: nowrap;
 }
 
@@ -169,7 +169,7 @@
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-secondary);
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-pagination__page-btn:hover {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: 'ad2d4cf540fbae67f997c4e8800316297815a9c2', class: "co-pagination", part: "pagination" }, h("div", { key: 'df28ba06ed542fe90c20d1fa1b7fa0c9d52b70d9', class: "co-pagination__section" }, h("span", { key: 'f4342d215bcee3af2ad7a21b48807a56da1fd83a', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '8a43bbddf9541755d699bf945bbd9f3f2d86a24c', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '185e1d7a9d69e1bacd7aeb697c70e9cefae6057d', class: "co-pagination", part: "pagination" }, h("div", { key: '93dcff37dcd024519d00176b3bf52c6fc94c00ec', class: "co-pagination__section" }, h("span", { key: 'f13f0b987bd3634046b26225b867b4a3f8766eb3', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'aed4e49fe945dac3dab1b84d97119f7e5c298142', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '0c6dda33a8fb2b5117b92a450fd69fe5f441cacc', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'ac831c093350dba3acfa1411d56df5fb1593144f', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '259a54e96723ef0b7f6cef648665d446bf049c83', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '692fc67a27fa66edce0e1fda13fd4de1c9b76a6b', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '3cd29507bea87f9b9e079acd587b137e9e2ab66f', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '4ea1fdbfe7c1eb5b7fb67003ef38391e8e9045a4', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '67a1d54ce40eb1cc003d5f88ea644df994d0c590', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '877cb7ebbf427e505f399d14e48cec4011282ab4', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'ef55eceda68aa0d561a3066a6a9f864171350f94', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '1813de04f69717833fe432ec5188aaa00a379128', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '20ba29bbb24dfbd03551a439ad9f7cbbbb233f8e', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '99bf24b654f5171fb2bf6a0b720057179e7931f1', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '2fd3277a44095c93825d8f7b11f6ae159edf9606', class: "co-pagination__spacer" }), h("div", { key: 'a3d16fd95c6c6e791818c6d1be760b5163187b90', class: "co-pagination__section" }, h("span", { key: 'dc536a071d1ca0b2bc3485bfc0c3aaecfd2178c0', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '415d04a264767e615fa742da1d7b3e509352555f', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '6b49bbb0cb284e1c0cdc38858412e3599d4a1206', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '1b0a013033bffc0ef849590f4bd2b19ba78346f3', class: "co-pagination__spacer" }), h("div", { key: '02bcc300d05ff7e2710c2bbb1373ef695e563b6e', class: "co-pagination__section" }, h("span", { key: '3942e7ef9ac9d7b295c1c81685fbeec6032df795', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '6e88cd0855d6f34ce0e38d1ee89234b8cf929ad0', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '81b26b3f719a1eca429a6820bf7da6d68b79398f', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '146515ae084df5f5e8d783a2e2c3f0d46ab971a3', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '83448292b1fba7470971b46e8ab14267e8a762dc', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,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;
@@ -116,7 +116,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-date-field__clear--hidden {

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

@@ -162,20 +162,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: '6d81792bd047804a420165f06bdd859a49d6b02e', class: {
+        return (h("div", { key: '76448762ebc35a510daa099e2b10fffb304a09c1', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '2d44a36188dca997cc42b7e165690348e61ff175', class: "co-date-field__labels" }, h("label", { key: '746f684d7f82ddcb520fc70e4ad745455b7cdfc2', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f0579a7f7916d3d9a0cb0be68e6fb02c0d3dc0d5', required: this.required })))), h("div", { key: '1299f5619feb689440fffef7f0871dae663990e0', class: "co-date-field__field-row" }, h("div", { key: '9e6ee26e724056007151ff41018723d3e92649fc', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '6fcf9075eff0d6cd3e034a7f1edfd346c30a26ab', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '75bbaa8dfd1c3adab3c59d3f5a9c909e43087464', class: "co-date-field__input-wrapper" }, h("input", { key: '95da11005e53369a65f3a9e0cb4aa2b7714c0739', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '31115e35a4c00f4bb41437e35a73ee6e7df9290e', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'e50f105a589cc7a4098281d2466b875fc70c706c', class: "co-date-field__labels" }, h("label", { key: '3dbb87b7f1a4b229afa920352f352cefa0b5be51', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'adad4708c70542e18e241c73dc16522ffc83a52f', required: this.required })))), h("div", { key: 'ef8bbba2b0070c21cbff8feba625ada99a75e50f', class: "co-date-field__field-row" }, h("div", { key: 'a385b086440ef6842049159424664d1f4a9a5cb5', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '5ebc11e2f8a0ccaa0534682c6633228c66565396', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8ee80f5304623f8da75f20eb93d6fe3eb927d0f1', class: "co-date-field__input-wrapper" }, h("input", { key: 'c156767ea4818750c5b00f2f965c026417ef6bd2', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '4d0b388e20ad3f862e310c951ad7a07d620f9d76', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'daccf6656333b81a5b7aedc14f9fe358ad296cde', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b86c2a20e668f62de9dfce6b9dcd2a3eff0940ea', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '46951e15c38162880460268b278e1a90bebed78c', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '8eb87bc05e53b340b97bdb5f17a3bbd08e2844fc', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b182c4196a15168a1ad654f00e4c83823b0bf894', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'f2cdef4f478972926e417c03aa6c23269c87fd32', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '401c012d2e6635920228d80675681da8f6c05e4d', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '0cb6f7e05efe31cdd32e09206b8367bc5fe180fa', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e4a0acf05080876968835be09f4cf04b4b3ee80f', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '2329cec15faab426f09107615e3038428b26182f', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range/co-date-range.js

@@ -33,7 +33,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: '8f9d549eb8f80d07555a2cd97677ce3969fb4aba', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: 'c72ef0bfac5b2fb196286b77c39c84cf1d72e06d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.css

@@ -46,7 +46,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-default);
   box-sizing: border-box;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -167,7 +167,7 @@
   font-family: inherit;
   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);
 }
 .co-date-range-picker__preset:hover {
   background: var(--co-semantic-surface-hover);

package/dist/collection/components/co-date-time-picker/co-date-time-picker.css

@@ -56,7 +56,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;
@@ -134,7 +134,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-date-time-picker__clear--hidden {

package/dist/collection/components/co-date-time-picker/co-date-time-picker.js

@@ -367,10 +367,10 @@ export class CoDateTimePicker {
     render() {
         var _a;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '45d0284c91912bd5ee6f2c6a348611e0ef7c0dfc', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+        return (h("div", { key: '8ccc0e31d77dfce13ab5fdd27294d6a93944f5ae', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
             h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
             h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
-        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '1afc6190afea10f2dc7c9a04ed2624cc3a80e0f5', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: 'c54ad2d2ebeccc0f6f4c836d25b5de0bee6376fc', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
     }
     static get is() { return "co-date-time-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform;
   z-index: 1;
   /* Elevation: a layered soft drop-shadow that follows the squircle silhouette
@@ -166,7 +166,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 .co-drawer__close:hover  { background: var(--co-semantic-surface-hover); }

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: 'fef9abf2a536fe08fa6c65fcc4e37955c5bc5373', 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: '95256dff45bfd8c003a8c4e81aa221873b850df3', 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: '4a5841592fdb7cba17a51eb49bf617f1c5c88a03' }), this.active && (h("div", { key: '80d179ef44a5c5fd6294c1252fd17c35ac1e6f28', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '32fcd18641cd0d766273ce2390d83460347cb358', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'c193069fd16d3935c037f6ce69606bc9342d9ad8', name: this.icon, size: 34 })), h("span", { key: 'c6827e6f837f3707778c3b6b330b29907840e46c', 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: '4011b99b59671ad38cf5c90b5adc1b42a0353817', 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: 'a6899c6690bb8b9fcdd858fb63a30644b7094672', class: "co-empty-state__icon" }, h("co-icon", { key: '312945448815ae5be78074e03840909b04e5f3c4', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '7fd7fdb5fc4922bf2c7d6aab5200bc80947c20ba', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'da5cddc1aa7afc32ee30f59293f66f1e30507614', class: "co-empty-state__description" }, this.description)), h("div", { key: '940a1b9ffa4022a3ee2623b7a6892000c63abfd4', class: "co-empty-state__actions" }, h("slot", { key: 'b6b9fbd93e79890193500d5c3bbbe72d32fa1e20' }))));
     }
     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: 'eb07a859a28ba0d09a3880a77a5b122c1ae063fb', class: "cal" }, h("div", { key: '693683cddfad9a1aed4be0bf3651cfff8b2ba1c7', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '48f8fc44179b2950ea0498205f8f8a5d91d33e04', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '387a1cee67da85bf72e791ca2adc67f7482eb629', class: "cal__title-group" }, h("button", { key: '24d316422fb98f7d7c66ed6154a90f54a56cab12', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'd0c575fce693943e91de8c578bb3371bfdb6425a', name: "caret-left", size: 16 })), h("h2", { key: '1bc26dd2c49d67854a1fc922cffc519485437f6a', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '0e152157ed337011d00699b450b6a5cd10016b97', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'c821a72abc278e325cadfeae54b4d2b05984d3ba', 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: '2472ed0d314a489f41f2f46dc7988ce8860a64c2', 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: '9d9ef1be12cef8d6703df32d7e768bd4b33f5894' }, h("div", { key: 'ea63b1ab102045fc94c9d095cfcace4975f3fa70', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: 'c7f1c90eadd6fad31c60e6ac9878d7a5aa473ba0', class: "pop__actions", part: "actions" }, h("slot", { key: '84dd97edf67abeabba540914167b5bc3873587b3', name: "actions" })), h("div", { key: '41b360d62f4e61826a67a3445a0554a29a80d58a', class: "pop__head" }, this.dot && h("span", { key: '7b5d2f30b23464a73164f056719ae65d28786696', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: 'f9ef28f360297b6e145929ecbbcc4145b1ea855c', class: "pop__body", part: "body" }, h("slot", { key: '9029fc9c2c99a8202185a21f1a0212145b61334b' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }