@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -0,0 +1,27 @@
+import { rankByMatch } from "../../utils/normalizeText.js";
+/**
+ * Pure: should the component keep open and emit coScopeChange
+ * instead of the default coSelect+close?
+ */
+export function shouldKeepOpen(item) {
+    return item.keepOpen === true;
+}
+/**
+ * Pure: should coBackspaceEmpty fire?
+ * True when the user presses Backspace with an empty query.
+ */
+export function isEmptyBackspace(key, query) {
+    return key === 'Backspace' && query === '';
+}
+/**
+ * Pure: client-side item filtering.
+ * Mirrors the filteredItems getter logic from co-command-search.tsx.
+ * When async=true all items pass through (host already filtered them).
+ */
+export function applyClientFilter(items, query, async) {
+    if (async)
+        return items;
+    if (!query)
+        return items;
+    return rankByMatch(items, query, item => [item.label, item.value]);
+}

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

@@ -9,6 +9,10 @@ co-data-table {
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  /* The inner .co-data-table / .co-data-table__scroll subtree settles 0->full
+   * during the custom-element upgrade + skeleton->data swap. Contain that
+   * layout so the settle does not propagate as a page-level shift. */
+  contain: layout;
 }
 
 /* ─── CONTAINER ───────────────────────────────────────────────────── */
@@ -132,6 +136,31 @@ co-data-table {
   color: var(--co-semantic-text-default);
 }
 
+/* ─── SORT BUTTON (keyboard-operable header) ────────────────────────────────────────── */
+.co-data-table__sort-button {
+  flex: 1;
+  min-width: 0;                 /* allow the label to ellipsis */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-sm);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.co-data-table__sort-button:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));
+  outline-offset: -2px;
+  border-radius: var(--co-border-radius-xxs);
+}
+
 /* ─── CHECKBOX COLUMN ───────────────────────────────────────── */
 .co-data-table__th--checkbox,
 .co-data-table__td--checkbox {
@@ -212,7 +241,14 @@ co-data-table {
 }
 
 .co-data-table__td {
-  padding: var(--co-spacing-xs);
+  /* Figma row spec: 48px tall, dense. MUST stay a table-cell (real <table> +
+     table-layout:fixed — `display:flex` on the <td> collapses the grid). The
+     fixed 48px height + vertical-align:middle centers content vertically, so
+     padding is horizontal-only (12px / space-md); the row height supplies the
+     vertical rhythm. Any horizontal flex (space-between) goes on an inner
+     wrapper, never on the cell itself. */
+  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);

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

@@ -93,14 +93,17 @@ export class CoDataTable {
             this.suppressNextSort = false;
             return;
         }
+        // Standalone 3-state cycle: asc → desc → unsorted ('').
+        // (Controlled consumers like suite-v2 ignore `order` and drive sortField/
+        // sortOrder via props, so their own policy wins regardless of this.)
         let order;
         if (this.sortField === field) {
-            order = this.sortOrder === 'asc' ? 'desc' : 'asc';
+            order = this.sortOrder === 'asc' ? 'desc' : this.sortOrder === 'desc' ? '' : 'asc';
         }
         else {
             order = 'asc';
         }
-        this.sortField = field;
+        this.sortField = order === '' ? '' : field;
         this.sortOrder = order;
         this.coSort.emit({ field, order });
     }
@@ -241,6 +244,18 @@ export class CoDataTable {
     renderColgroup() {
         return (h("colgroup", null, this.selectable && h("col", { style: { width: '48px' } }), this.parsedColumns.map(col => (h("col", { style: { width: `${this.getColumnWidth(col)}px`, minWidth: `${col.minWidth || 80}px` } })))));
     }
+    renderSortIcon(col) {
+        if (!col.sortable)
+            return null;
+        const isActive = this.sortField === col.field && this.sortOrder !== '';
+        const iconName = !isActive
+            ? 'caret-up-down'
+            : (this.sortOrder === 'asc' ? 'caret-up' : 'caret-down');
+        return (h("span", { class: {
+                'co-data-table__sort-icon': true,
+                'co-data-table__sort-icon--active': isActive,
+            } }, h("co-icon", { name: iconName, size: 16, weight: isActive ? 'fill' : 'regular' })));
+    }
     renderHeader() {
         return (h("thead", { class: "co-data-table__head" }, h("tr", { class: "co-data-table__header-row" }, this.selectable && (h("th", { class: "co-data-table__th co-data-table__th--checkbox co-data-table__th--sticky", style: { left: '0px' } }, h("co-checkbox", { size: "small", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onCoChange: () => this.handleSelectAll() }))), this.parsedColumns.map((col, i) => (h("th", { class: {
                 'co-data-table__th': true,
@@ -248,13 +263,12 @@ export class CoDataTable {
                 'co-data-table__th--sortable': !!col.sortable,
                 'co-data-table__th--sorted': this.sortField === col.field,
                 [`co-data-table__th--align-${col.align || 'left'}`]: true,
-            }, style: this.getColumnStyle(col), onClick: () => col.sortable && this.handleSort(col.field) }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
+            }, style: this.getColumnStyle(col), "aria-sort": col.sortable && this.sortField === col.field && this.sortOrder !== ''
+                ? (this.sortOrder === 'asc' ? 'ascending' : 'descending')
+                : undefined }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
                 'co-data-table__pin-icon': true,
                 'co-data-table__pin-icon--active': !!col.sticky,
-            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), h("span", { class: "co-data-table__th-label" }, col.label), col.sortable && (h("span", { class: {
-                'co-data-table__sort-icon': true,
-                'co-data-table__sort-icon--active': this.sortField === col.field,
-            } }, h("co-icon", { name: "caret-up-down", size: 16, weight: this.sortField === col.field ? 'fill' : 'regular' })))), this.resizable && i < this.parsedColumns.length - 1 && (h("span", { class: {
+            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("span", { class: "co-data-table__th-label" }, col.label), this.renderSortIcon(col))) : (h("span", { class: "co-data-table__th-label" }, col.label))), this.resizable && i < this.parsedColumns.length - 1 && (h("span", { class: {
                 'co-data-table__resize-handle': true,
                 'co-data-table__resize-handle--active': this.resizingColumn === col.field,
             }, onMouseDown: (e) => this.handleResizeStart(col.field, e), onClick: (e) => e.stopPropagation() }))))))));
@@ -277,12 +291,12 @@ export class CoDataTable {
         return (h("div", { class: "co-data-table__empty", part: "empty" }, h("div", { class: "co-data-table__empty-icon" }, h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), h("div", { class: "co-data-table__empty-action" }, h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: 'a5c4cb6afafe73264b5b6643c762867a449bcf1f', class: {
+        return (h("div", { key: 'ca97ff4e2b3fb28ff64e49654c35e3081e43b036', 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: '22f664b7c45ab3882665c45bb398f7e41bad331d', class: "co-data-table__scroll" }, h("table", { key: '6cc6e81e405f4d560800aa983b193902eb8ecb5c', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
+            } }, h("div", { key: '9ffdd459a8b46f4c019309412cf85fe7e12f803d', class: "co-data-table__scroll" }, h("table", { key: 'f621aaba41690f6fe6060b0641817908d5c3ae92', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -588,8 +602,8 @@ export class CoDataTable {
                     "text": "Emitted when a column sort is requested"
                 },
                 "complexType": {
-                    "original": "{ field: string; order: 'asc' | 'desc' }",
-                    "resolved": "{ field: string; order: \"desc\" | \"asc\"; }",
+                    "original": "{ field: string; order: 'asc' | 'desc' | '' }",
+                    "resolved": "{ field: string; order: \"\" | \"desc\" | \"asc\"; }",
                     "references": {}
                 }
             }, {

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: '4b7d41e571e1c8a6e353b413b5e790b48ea37995', class: "co-pagination", part: "pagination" }, h("div", { key: '8a0dedd2ea3b54dd19d2286c5e114fe61f732278', class: "co-pagination__section" }, h("span", { key: 'e4629e6610c5d4e9b1d1cfb24b5edf0e2703c80e', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'fd25c034fdd8c05bf665c6aeffa9686a32573bd9', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: 'ae314d39c78125c7a0b237d30b6d298c5c699a75', class: "co-pagination", part: "pagination" }, h("div", { key: 'eff8732e235bfcbb6578a144377736f6a5c05d91', class: "co-pagination__section" }, h("span", { key: 'e4a5b980aaae92eec46b5e090e7b87745938fe81', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '012b0613c8cfce667687ca27ad434b6271845900', 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: '4ddc38a6e5817cb1f516b35dd07e46d811a2006b', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'b4aca717ecd742f1dcb60da8ec64bc194d7cd47b', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '53169bfff85ffe4a97fb8ce369f3be9ecc163725', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '01b9e912b864fd989548b03ae8119ada87e6de49', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: 'a56598b548e6635296886750354c315b12fbe2d8', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '093a6b2c02f2c7309a14b9b3c7d44e4801643d32', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '76016cea5933b9b057256e4c54717925b95396e4', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'ec1ac8b20b71a01483ef6f33170ccea9dc60baf2', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '3db2891ead65d088b2a9a19868c00576fc3d212b', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '2be8c9861d4509df5b695b5c07e25cc346b77628', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '91ba0332b4eb496b3de3fe271d78686aad429d71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '4a7f2a17c52d71762c3a9b15e8ed55aa78b894a8', 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: 'b2c6703a5cb87eba43264acd998e837eebbff342', class: "co-pagination__spacer" }), h("div", { key: 'a48a4bdf1cc1ee9dc80901504c11741589a9ebc3', class: "co-pagination__section" }, h("span", { key: '1c7cb0c55a537530d4322a1e7b452c810f32ea94', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '60b13b593caf9b08396dd30ac1b9e513ec6a3197', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '125da6a4b3e175fc7651d25ee020316f6d64e3d6', 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: 'e8e81ef1186485963908cd923fab0f5974e4cbf3', class: "co-pagination__spacer" }), h("div", { key: '04fd583b0fff46d13d8abe384cb7896d2c4b8799', class: "co-pagination__section" }, h("span", { key: '69bf9e0a8fd0e9f3b5fe06c9951300323fce42bf', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'a90b8a8b5cdd5cfc945fb0fa00d50b44b4ab88b7', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '6b14f2a16c691a202bf81cc1fff8f505f5ce0f29', 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: '068e6184593877f651a41573d8aa456f9ef2ef49', 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: '9b3cdab026b566275248734a8db218d70a81b082', 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

@@ -56,7 +56,9 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -237,3 +239,7 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-date-field__field { background: var(--co-semantic-surface-secondary); }
+}

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: 'bd42272c21a560d339158f2b82edd0cb61623e31', class: {
+        return (h("div", { key: '88be9ead58abc8f3c417e66482aa8f05fee57337', 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: '210bac89442729649bf59f14eeecb4d3a1d53855', class: "co-date-field__labels" }, h("label", { key: '79a151b05d97b47cec8461c3bd32d0838d9e2d66', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '75a513ad61d0801863d2c01a1f5a2da2023e78d1', required: this.required })))), h("div", { key: 'ebe1983e55ef1a33f17faa95609ee076f957fcdb', class: "co-date-field__field-row" }, h("div", { key: 'b420fa05fbe6a9ea89f02284c52a0e3686cdbaaa', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '19f698a0798c1a32497a1d427ecbf8462027d400', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4aafe0476089a55f1defb4384101442bbc48fdf0', class: "co-date-field__input-wrapper" }, h("input", { key: '7170645098dfa8f08b7fad8f65d590cb22c098da', 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: '53bd2c0e74a031f5d351617fb7f12d7ed21e8269', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'c916f0e36ba63ffdcf2a6cd08ffe295c93e9aa91', class: "co-date-field__labels" }, h("label", { key: '0d84f75656c45fff7e695ecea68d9e93b5031e7e', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '3fc035181fb79cb0879736dfa91ff979d4d6f8ab', required: this.required })))), h("div", { key: 'e423c62b5ed75b52786732944be251ec4c565692', class: "co-date-field__field-row" }, h("div", { key: '6c902beccd2d3d50166c027d755c4bd9687fa770', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '87ac25c7d1816069d60f488c7d4ca0ab6902954b', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'ac1d1ee4b641ce034a5723487bf1bfb6f1f834ff', class: "co-date-field__input-wrapper" }, h("input", { key: '54d4478118e7c02185619b07a1c44034e2d0cbe0', 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: '484bdacdb620dec400355efe868779f91ec352b7', 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: '28dc6e38810c755d34fcbab2252f011999f0b4d3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '58146749042da81c9a2e0f71edd082fbf478297f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'b1d13979e2b54558950e15bc88f690888ca9345c', 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: '9d5ce8fa3cf07062ac62fb50cd95bfd3841a6298', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '6bf071d3aaa3b02542860c5cd12156df1a34d6f3', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '39ac15b77ff7f6c7e710b714709f42a67decb4db', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'd4a8a63210d503600f5c268e4e8b920c81aca8d1', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6fc66017a9f1bedcb0e0e554643d504683860fbe', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '2c652605bf6f0a04bb08a0fa679ffaace1aaa110', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: 'c1022e560275a0f263af532304e948b78a0d4318', 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: '52a80ab59ff863209e62f5dcddbc674ea32a662c', 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: '0523f38971fe7b9289838d36737fe40f43c8cadc', 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

@@ -38,7 +38,9 @@
   width: 100%;
   min-height: 40px;
   padding: 0 var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   cursor: pointer;
@@ -249,3 +251,7 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-date-range-picker__trigger { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -150,6 +150,7 @@
 .co-drawer__body {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: var(--co-spacing-xl);
   position: relative;
 }

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

@@ -56,12 +56,12 @@ export class CoDrawer {
         }
     }
     render() {
-        return (h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
+        return (h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '3569d4b2a581eedc42637a769ab0d1e46f818c66', class: "co-drawer__header", part: "header" }, h("div", { key: '0e811a18325188b4e3ef4105370a88126ad1d98b', class: "co-drawer__header-content" }, h("slot", { key: '00f0249a2683fefc712de952055a229abdff2247', name: "header" }, h("div", { key: '8e817ae4ef809410799c66892a22f99f5f2bb053', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '4a1b54a9686c173c28e039cb54ba5d40a9327754', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: 'a09b2e8ffc080f8d73d8b480c32911bc1a36451f', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'bf2c3b8fca185608120387bbccb007317b34d09a', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: 'b1bb85ea967aac2c14e5d86324c222ce44d168ef', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'dd95e54ae9b3152d001b864cceba60cd65561580', name: "x", size: 20 })))), h("div", { key: '5049854b50e2e1f42faca4fc8c2fca705e4731a5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '13f4acf903542f287d7f8047280dfe4c211de1d3', name: "tabs" })), h("div", { key: '208ff3f785ae347a385518ac217eb05927366836', class: "co-drawer__body", part: "body" }, h("slot", { key: '938e78913ef13925b67512512a35a79f3f1a87c4' }), h("co-loader", { key: '624228401019ad3b8d3b14907268702c46c996e8', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '283d37c8784f59e77fc7009d98cf5dd83e71ed81', class: "co-drawer__footer", part: "footer" }, h("slot", { key: '85dfa2065ddca4b2ac6079aa50f85b0f61fdc8d0', name: "footer" })))));
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', name: "footer" })))));
     }
     static get is() { return "co-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoEmptyState {
     render() {
-        return (h("div", { key: '6ceb9e648d3afd9d00d235be09c062b2271abf81', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '126201691f3b95f58c2e1e6a299bd76c6e2469a8', class: "co-empty-state__icon" }, h("co-icon", { key: '60e803bec3cac493264240203003f0b76a58b751', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '9b3a6fc68f92680fe93af4e17defd01979117e92', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'b78224486e9c3b12bb6c4ecccf937f613cc9853e', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b7c66fe9a617b553244f33d35ec515b2c00511ff', class: "co-empty-state__actions" }, h("slot", { key: '6e5cf479c0ecc6ccb0c718d5a062fbbc0836e6d8' }))));
+        return (h("div", { key: '68397ba09dd6d82282d7db563661336ccc486386', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '85b31861da503e36312d14a941d3cc143cc07806', class: "co-empty-state__icon" }, h("co-icon", { key: '2592b0d3f395455a4bf9986ce91e7df38506baec', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: 'f949906b9403693d90b7591fa92232cb65820fcd', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '229b1ec71c70b1fdd5caa1e00b8013e5d0b55c8f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b24817feb623386a92d4c7442631f624828f9f4a', class: "co-empty-state__actions" }, h("slot", { key: 'f5819e1b60a761950b2f1c7d16ac40db9f120d97' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,146 @@
+/*
+ * co-event-calendar — shell chrome (toolbar + body). The grid itself is themed
+ * by co-calendar-month via --co-cal-* tokens; the shell only styles the toolbar,
+ * reusing semantic Cobalt tokens so dark mode and brand overrides apply for free.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  font-family: var(--co-font-family-primary);
+  color: var(--co-semantic-text-default);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+.cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────── */
+.cal__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-md);
+}
+
+.cal__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+}
+
+.cal__title {
+  flex: 1 1 auto;
+  margin: 0;
+  text-align: center;
+  font-size: var(--co-font-size-16, 16px);
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--co-semantic-text-default);
+}
+
+.cal__views-spacer {
+  /* keeps the title visually centered when no view switcher is shown */
+  flex: 0 0 auto;
+  inline-size: 1px;
+}
+
+.cal__btn {
+  height: 32px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+.cal__icon-btn {
+  height: 32px;
+  width: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__icon-btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__icon-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── View switcher ───────────────────────────────────────────── */
+.cal__views {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--co-semantic-surface-hover);
+  border-radius: var(--co-border-radius-xs);
+}
+.cal__view-btn {
+  height: 28px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xxs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.cal__view-btn--active {
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.cal__view-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── Body ────────────────────────────────────────────────────── */
+.cal__body {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
+}
+.cal__body co-calendar-month {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.cal__placeholder {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  color: var(--co-semantic-text-muted);
+  text-transform: capitalize;
+}