@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

package/dist/collection/components/co-command-search/co-command-search.css

@@ -22,7 +22,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   font-family: var(--co-font-family-primary);
   transform: translateY(8px) scale(0.98);
   opacity: 0;
-  transition: transform 0.15s ease, opacity 0.15s ease;
+  transition: transform var(--co-motion-duration-fast) var(--co-motion-ease-out), opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   margin-top: -15vh;
 }
 
@@ -120,7 +120,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-command-search__facet-chip-remove:hover {
@@ -134,10 +134,20 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-md);  /* even breathing room from the input divider + bottom border */
   overflow-x: auto;
+  /* overflow-x:auto alone promotes overflow-y from `visible` to `auto` (CSS spec):
+     the horizontal scrollbar then eats a few px of height and triggers a spurious
+     VERTICAL scrollbar. Pin overflow-y:hidden so only the horizontal axis scrolls. */
+  overflow-y: hidden;
+  /* This row's scroll affordance is the left fade + sticky "Más" chip, not a
+     scrollbar — hide the native chrome (robust across OS "always show scrollbars"). */
+  scrollbar-width: none;          /* Firefox + Chromium ≥121 */
   border-bottom: 1px solid var(--co-semantic-border-default);
   /* Keep the active tab clear of the sticky "Más" chip when scrolled into view. */
   scroll-padding-right: 104px;
 }
+.co-command-search__tabs::-webkit-scrollbar {
+  display: none;                  /* Safari / older WebKit */
+}
 /* Tabs are co-chip components. Keep them from shrinking in the scroll row. */
 .co-command-search__tab {
   flex: 0 0 auto;
@@ -177,7 +187,7 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   font-family: inherit;
   text-align: center;
   min-width: 0;
-  transition: background 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .co-command-search__fav-card:hover {
   background: var(--co-semantic-surface-hover);

package/dist/collection/components/co-command-search/co-command-search.js

@@ -70,6 +70,18 @@ export class CoCommandSearch {
             if (item)
                 this.selectItem(item);
         };
+        /**
+         * Escape a nivel PANEL: el `handleKeyDown` del input solo dispara con el input
+         * enfocado, así que al hacer click en una tab/chip/"Más" o mover el foco a la
+         * lista de resultados el Escape se perdía (el palette quedaba atrapado hasta
+         * completar una acción). El keydown burbujea desde cualquier hijo hasta acá.
+         */
+        this.handlePanelKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+            }
+        };
         this.handleOverlayClick = () => {
             this.close();
         };
@@ -150,20 +162,22 @@ export class CoCommandSearch {
         this.close();
     }
     close() {
+        if (!this.open)
+            return; // idempotente: overlay-click + Escape + input-handler no deben doble-emitir
         this.open = false;
         this.coClose.emit();
     }
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '6e45f5a53f39f516cc8a3eb43180b4c6f6c413fd', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '0dbbb33bf84b9a0fcf94d71802b87a2d0d240522', name: "trigger" })),
-            h("co-overlay", { key: 'b7f46dde81f6f3462b550c3ccde29388604f9404', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '745f5b7e2a31897b88303deb6b49ba3787b7c7b8', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: '90f367e679c3e971cbe7823e766152cb02b2a018', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: 'f084dde02745550de0ebe92840f4a3f62e7eb543', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            h("div", { key: '2fa819f611d5e106367baecd8d0d468ef538abb9', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: 'ee17e409b1253cc447d9813a458c3b123597caa1', name: "trigger" })),
+            h("co-overlay", { key: '57f2be7cc61b9c73d20af7cabe44f27f52da130b', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '8e582bca997ca0b0ed0b77a26a2f5bce17540159', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick, onKeyDown: this.handlePanelKeyDown }, h("div", { key: '6252fab9df91285b063186c0814a678c2f91aec9', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '4ce68141969cd823f3b6d1e286dcd62609244587', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: 'd00091dd6ba08d3924a00965b769eec12bade9da', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: 'b7c60019d203f7575535a0d12525c55441ba9f69', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '6bb4a4c2745b060f5fc118ce42eeb233709e6cde', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'bc77af8a7d44a3156af87c1e0fb16392acca7aa8', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '565abed1c59c32ce3336e110cd9da6afadb693b5', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: 'f84db9e0b3f9c53d8eae6ab6edb790f189b3e49d', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '7f9e3b653c9d52d0438fafbb645506f3a7aa7f2c', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'fd734ad98b004d5e08f601631d6e2c547ef70dca', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (h("co-chip", { key: 'ac6931618eacc84c32006f53c8e0c5bbfec3d929', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'cd70456639c4e41268ddfff11f921c7a1dbede7e', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '024125d66406fb564e972f207f10972e7bbd944f', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '9b165c53215a7818efe9ca3ee7d601df25f03e7e', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'f1f97b1606aaafab94cc8f9d2ab66ce4948cae0b', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
+            }), this.hasMore && (h("co-chip", { key: 'f5812a94f9f24df93b34abd9588e43b354d6c5e8', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'b21f950593d51ecb05ffa7f752cd3b8eebf0ef08', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '054210475307154dbd369a6468e5bd38a88534a2', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '4cc849cf107af9b94cb9715a7d054f6567e75345', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'b48e7eb20f3591e8539211343908fa84ca1ebd1f', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
                     _id: it.value, label: it.label, icon: it.icon, description: it.subtitle, group: it.section,
                     disabled: it.disabled,
                 }))), autoHighlight: true, highlightMatches: true, highlightTerm: this.query, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListPick(e.detail.item._id) })))),

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

@@ -62,8 +62,8 @@ co-data-table {
   height: 40px; /* Figma header 40 — altura dura, centrado por flex/vertical-align */
   padding: 0 var(--co-spacing-md);
   background: var(--co-color-base-blanco);
-  border-bottom: 1px solid var(--co-color-opacity-negro-8);
-  border-right: 1px solid var(--co-color-opacity-negro-8);
+  border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   text-align: left;
   vertical-align: middle;
   font-size: var(--co-font-size-14);
@@ -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 {
@@ -232,7 +232,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 +259,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;
@@ -287,8 +287,8 @@ co-data-table {
   height: 48px;
   padding: 0 var(--co-spacing-md);
   background: inherit;
-  border-bottom: 1px solid var(--co-color-opacity-negro-8);
-  border-right: 1px solid var(--co-color-opacity-negro-8);
+  border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   vertical-align: middle;
   font-size: var(--co-font-size-12);
   font-weight: var(--co-font-weight-medium); /* Figma Btn4/Medium para contenido de celda */

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: '9bda0302cc65a11065744a33ce2c48ad2d86f905', class: "co-pagination", part: "pagination" }, h("div", { key: '2605fca75f90b5f764ca8f070d79654d0653d6eb', class: "co-pagination__section" }, h("span", { key: '2296d9f00584bf8243cf6b1c32eeb8ce79b14fdc', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '7a6a3a24ed99d708940f6da784d05f7c490d2f42', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: 'ccf2b514ca05bb56014a2adf60cc5b4a55e8c60c', class: "co-pagination", part: "pagination" }, h("div", { key: '49649c806450bf111bb7b2e26d004ac3c0b20373', class: "co-pagination__section" }, h("span", { key: '8419a89097e4e6a89777b346de6627da9331d0f6', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '315b8a1675fe6d7f3fca8fe0f1992bcbca9325a0', 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: '5d8af4318ba1a8e4e5c13862e7ea3877ae6b3bc4', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '758ea59d9e614de2d7a5ebc3fe93e3af2cc28ae6', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '841f93bea5d817cdd42f076b1a056da6a3707cb2', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '8e381335184c0790c3379f0223239c7c478030c3', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '415dd90e5fb5f41071a35f4214f4d02387740c71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '845b73359db84f19583ec716d79c1dc8310f87b3', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: 'a97c699d390734902220805bec64420deeb4fd6a', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'fcd095371ce699102ce8c66787918c065481e35d', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '1ba988e2bd9c457feefa8af4cd76b0bded02fd12', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '51d5d3917d817c9752433a729427550a38750e56', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '093883ae845b9f813337d296711c42ba130323a7', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'bbab8ec16c6abbd6f311bcbaafa1b9409f3c8a0f', 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: '55bf44bc21ed00c5058ad0197621cfcb1d81ec2d', class: "co-pagination__spacer" }), h("div", { key: '2c2a5384f9fda9a3de7c1abc3f2adca9f413e7e6', class: "co-pagination__section" }, h("span", { key: '6f1b81541df05323f428db30e88e467c0aa93a21', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '50c630088453b650deb17c77c4cfef90e5275ccb', class: "co-pagination__section co-pagination__nav" }, h("button", { key: 'e4755f11fba6d27ce861f1c41659f802427dabc4', 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: '970ec69d86943f9a2ce03427ca046767c853761d', class: "co-pagination__spacer" }), h("div", { key: 'd3b9ac58040df59daf1cb8848237ad8ed2b05604', class: "co-pagination__section" }, h("span", { key: '6c28ef609f8f3da05791e5b8ff56d84164984def', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '5a0d8770c82e23e93d3a5101111e65842af027d9', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '2bea97c046df6ee0d2a7d7de80762659eb2bf9b0', 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: '1e1a386b40fb40f169c13619e6cb79993406d16d', 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: '0e432cb2ec4ff54997a0297ddd864bfe050c01a0', 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: '3536bc260fea07e059915baf8b094426b5304b7f', class: {
+        return (h("div", { key: '58824a62494004dc20539095b0dc4b0abd672429', 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: '5e241dc942081c61b96b8c58a69e03bba89ccdce', class: "co-date-field__labels" }, h("label", { key: '0b5c7b758d48d322dcb4587a662ebb4ca2f5843b', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '3b134781a1b1199bf96140a74e37e5269ec58f86', required: this.required })))), h("div", { key: '3985035d2fb8b52c91dd3e5ad12989e0e94d59a6', class: "co-date-field__field-row" }, h("div", { key: '075d979038a918cb9936153031e8a4753d6fed19', class: "co-date-field__field", part: "field" }, h("co-icon", { key: 'c95e2441e0301031e54a57dfac9f58b071f50e9c', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'bc0c45cf1bcc0f26cdb3e0e5d757fe1db60b2b5e', class: "co-date-field__input-wrapper" }, h("input", { key: '804eedd12a02fc505e2b6743b17d189c4f3cf7cb', 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: 'f39034c484ebb4d07e173feea4bcc7fe16d53b5a', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '35cbbc4dfcce22b17758b9585762bc7fe01463d1', class: "co-date-field__labels" }, h("label", { key: '172c4d990dc882b9fa6010287fdda46664473c5c', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'a2145c6218cf73a6ef8f248279eb3c468562d709', required: this.required })))), h("div", { key: '86b90e9a67887cbd164ec85822c2c9650cd4c6d6', class: "co-date-field__field-row" }, h("div", { key: '6ce335d82253cc3ae10d97ee76c7b7d19386fb41', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '93c3e62fba825f40062d6f4113802314c51fbc04', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'c9b227f14857a568ee2197590257313e805ef58d', class: "co-date-field__input-wrapper" }, h("input", { key: 'f756ae8a58864fb31bb707e65548e4c58c7cf217', 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: '2e2c361974484bb390d9d6f80b55f03857ffe568', 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: 'ca94d8bca29632e70e08f99ef5605f24df458d25', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '3dd400a30b59443f232d8001852811aeaa4945f5', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'd5981fda3e0ab19fea518acddc4cf1c2641bbdd1', 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: 'c1c29a37857c1c2d6894da49bb32d243cc2cf8dd', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'a0b4b27a1101a2993f488b88f072e681e4d6ef0c', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'eae215d0d4c99c6105fd72c8ee6704f8a1c8444f', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e111d135454ac081770edddb290929903c376fea', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: 'da47256ba021dce0590ce3adfcd602b8715d7184', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'afc623261826da8d6e94c866808b6eff58da1a44', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '20e477abb5f1069673f2b65100aa3b6c40b85a6b', 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: 'f4fb3c7ea22266e6ff8516ecdfda885365a34985', 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: '4c6ae7f2b043b03a896c94411ffb8dcd6b375ffc', 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

@@ -0,0 +1,325 @@
+/* ============================================================
+   co-date-time-picker — the field box mirrors co-date-field /
+   co-input (same Text Field anatomy) so a datetime field is
+   visually identical to every other form control. The panel is
+   the co-calendar grid + a Google-style scrollable hour list.
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-date-time-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+/* ---- Label (mirrors co-date-field/co-input) ---- */
+.co-date-time-picker__label {
+  padding: 0 var(--co-spacing-xs);
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/*
+ * co-popover's :host defaults to inline-block (sized to content) — right for
+ * button triggers, wrong for a full-width field. This descendant selector
+ * (0,1,1) outranks co-popover's own :host rule (0,1,0). We do NOT use
+ * match-width (that would stretch the panel to the field width).
+ */
+.co-date-time-picker co-popover {
+  display: block;
+  width: 100%;
+}
+
+.co-date-time-picker__trigger {
+  display: block;
+  width: 100%;
+}
+
+/* ---- Field box ---- */
+.co-date-time-picker__field {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
+  border-radius: var(--co-border-radius-xs);
+  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;
+  min-width: 0;
+}
+
+/* Size variants (mirror co-input/co-date-field: s 28 / sm 32 / md 40 / lg 48) */
+.co-date-time-picker__field--s { min-height: 28px; padding: var(--co-spacing-xxs) var(--co-spacing-sm); }
+.co-date-time-picker__field--sm { min-height: 32px; padding: var(--co-spacing-xs) var(--co-spacing-sm); }
+.co-date-time-picker__field--lg { min-height: 48px; padding: var(--co-spacing-sm) var(--co-spacing-lg); }
+
+/* ── Variant: flat (no border/background — reads as content) ──
+   Declared BEFORE the state rules below: same specificity (0,2,0), so the
+   focused/invalid/disabled treatments still win on source order. */
+:host([variant='flat']) .co-date-time-picker__field {
+  background: transparent;
+  border-color: transparent;
+}
+
+.co-date-time-picker__icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+/* The value itself is the trigger: a real button (keyboard-operable), styled
+   as plain text inside the field box. */
+.co-date-time-picker__display {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: inherit;
+  line-height: 1;
+  color: var(--co-semantic-text-default);
+  text-align: left;
+  cursor: pointer;
+  /* The focus ring is drawn on the field box (:focus-within), like co-input. */
+  outline: none;
+}
+
+/* Truncation: the formatted instant can outgrow a narrow column. */
+.co-date-time-picker__text,
+.co-date-time-picker__placeholder {
+  display: block;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-date-time-picker__placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ---- Clear button ---- */
+.co-date-time-picker__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-date-time-picker__clear--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.co-date-time-picker__clear:hover {
+  color: var(--co-semantic-text-default);
+}
+
+/* ---- States ---- */
+.co-date-time-picker__field:focus-within {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-date-time-picker__field--disabled {
+  background: var(--co-semantic-surface-disabled);
+  border-color: transparent;
+  cursor: not-allowed;
+  /* Clicks must not reach co-popover's trigger box. */
+  pointer-events: none;
+}
+
+.co-date-time-picker__field--disabled .co-date-time-picker__display,
+.co-date-time-picker__field--disabled .co-date-time-picker__placeholder,
+.co-date-time-picker__field--disabled .co-date-time-picker__icon {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+}
+
+.co-date-time-picker__field--readonly .co-date-time-picker__display {
+  cursor: default;
+}
+
+.co-date-time-picker__field--invalid {
+  border-color: var(--co-semantic-status-error);
+}
+
+.co-date-time-picker__field--invalid:focus-within {
+  border-color: var(--co-semantic-status-error);
+  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+}
+
+/* ---- Helper text ---- */
+.co-date-time-picker__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-xs);
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-date-time-picker__helper--error {
+  color: var(--co-semantic-status-error);
+}
+
+/* ============================================================
+   Panel: calendar | hour list
+   ============================================================ */
+.co-date-time-picker__panel {
+  display: flex;
+  align-items: stretch;
+  gap: var(--co-spacing-md);
+  padding: var(--co-spacing-md);
+}
+
+.co-date-time-picker__calendar {
+  flex: 0 0 auto;
+}
+
+.co-date-time-picker__times {
+  position: relative; /* offsetTop anchor for the open-scroll */
+  flex: 0 0 auto;
+  width: 7.5rem;
+  max-height: 17.5rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-left: var(--co-spacing-sm2);
+  border-left: 1px solid var(--co-semantic-border-default);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.co-date-time-picker__times:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-date-time-picker__time {
+  padding: var(--co-spacing-sm) var(--co-spacing-sm2);
+  border-radius: var(--co-border-radius-xxs);
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+
+/* Keyboard cursor — distinct from the committed selection. */
+.co-date-time-picker__time--active:not(.co-date-time-picker__time--selected) {
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-focus);
+}
+
+/* SELECTED — solid fill + inverse text, same treatment as co-calendar's day. */
+.co-date-time-picker__time--selected {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+  font-weight: 600;
+}
+
+/* ---- Mobile bottom sheet: calendar on top, hours below ---- */
+.co-date-time-picker__sheet {
+  display: flex;
+  justify-content: center;
+  padding: var(--co-spacing-sm) 0 var(--co-spacing-lg);
+}
+
+.co-date-time-picker__panel--touch {
+  flex-direction: column;
+  align-items: center;
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__times {
+  width: 100%;
+  max-width: 20rem;
+  max-height: 12rem;
+  padding-left: 0;
+  padding-top: var(--co-spacing-sm2);
+  border-left: none;
+  border-top: 1px solid var(--co-semantic-border-default);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__time {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-date-time-picker {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-date-time-picker__label {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-date-time-picker > :not(.co-date-time-picker__label) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}