@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -22,6 +22,8 @@ export class CoDataTable {
         this.emptyMessage = 'No records found';
         /** Empty state icon (Phosphor icon name). */
         this.emptyIcon = 'magnifying-glass';
+        /** Variant for the prop-driven empty-action button. */
+        this.emptyActionVariant = 'stroke';
         /* ─── SORT ──────────────────────────────────────────────── */
         /** Current sort field */
         this.sortField = '';
@@ -93,14 +95,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 +246,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,41 +265,44 @@ 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() }))))))));
     }
-    renderBody() {
-        if (this.loading) {
-            return (h("tbody", { class: "co-data-table__body" }, Array.from({ length: this.skeletonRows }).map((_, rowIndex) => (h("tr", { class: "co-data-table__row co-data-table__row--skeleton", key: `skeleton-${rowIndex}` }, this.selectable && (h("td", { class: "co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky", style: { left: '0px' } }, h("div", { class: "co-data-table__skeleton co-data-table__skeleton--checkbox" }))), this.parsedColumns.map(col => (h("td", { class: {
-                    'co-data-table__td': true,
-                    'co-data-table__td--sticky': !!col.sticky,
-                }, style: Object.assign({}, this.getColumnStyle(col)) }, h("div", { class: "co-data-table__skeleton" })))))))));
-        }
-        // When not loading, delegate row rendering to the consumer via default slot.
-        // This avoids Stencil's costly per-cell named-slot relocation (N rows × M cols).
-        // The consumer (e.g. Vue) renders <tbody> directly using co-data-table CSS classes.
-        return h("slot", null);
+    // Skeleton rows shown WHILE loading. Rendered as a SEPARATE <tbody> that
+    // co-exists with the always-mounted default <slot/> (see render()) — it never
+    // REPLACES it. Previously the body position was swapped between this skeleton
+    // and <slot/> on every `loading` toggle; that swap tore the slot down and
+    // orphaned the consumer's projected rows (e.g. Vue's <tbody>), so a concurrent
+    // consumer patch threw "insertBefore ... not a child of this node" on data/model
+    // switches. Row rendering itself is still delegated to the consumer via the
+    // default slot — this avoids Stencil's costly per-cell named-slot relocation.
+    renderSkeletonBody() {
+        return (h("tbody", { class: "co-data-table__body co-data-table__body--skeleton", "aria-hidden": "true" }, Array.from({ length: this.skeletonRows }).map((_, rowIndex) => (h("tr", { class: "co-data-table__row co-data-table__row--skeleton", key: `skeleton-${rowIndex}` }, this.selectable && (h("td", { class: "co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky", style: { left: '0px' } }, h("div", { class: "co-data-table__skeleton co-data-table__skeleton--checkbox" }))), this.parsedColumns.map(col => (h("td", { class: {
+                'co-data-table__td': true,
+                'co-data-table__td--sticky': !!col.sticky,
+            }, style: Object.assign({}, this.getColumnStyle(col)) }, h("div", { class: "co-data-table__skeleton" })))))))));
     }
     renderEmpty() {
         if (this.loading || this.parsedRows.length > 0)
             return null;
-        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" }))));
+        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" }, this.emptyActionLabel
+            ? (h("co-button", { variant: this.emptyActionVariant, size: "m", label: this.emptyActionLabel, iconLeft: this.emptyActionIcon, onClick: () => this.coEmptyAction.emit() }))
+            : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: 'a5c4cb6afafe73264b5b6643c762867a449bcf1f', class: {
+        return (h("div", { key: '0ca5b4b0a0a31c1ea7488a7ca22b64683a9d35e1', 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: 'b2155d0ad52836223b65bb396775bfe726f25966', class: "co-data-table__scroll" }, h("table", { key: 'f950dc3e38660fd1d80f6883bb58384f6e03ef07', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: '33751ea8dfef38c5c285b8a08dc763845f509bb7' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -463,6 +483,64 @@ export class CoDataTable {
                 "attribute": "empty-icon",
                 "defaultValue": "'magnifying-glass'"
             },
+            "emptyActionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty-state action button, rendered BY the component (not via slot). Prefer\nthis over the `empty-action` slot: a non-shadow component relocates slotted\nlight-DOM nodes, so projecting togglable framework content (e.g. a Vue\n`v-if` button) corrupts that framework's virtual DOM. Leave empty to fall\nback to the `empty-action` slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-action-label"
+            },
+            "emptyActionVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"stroke\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant for the prop-driven empty-action button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-action-variant",
+                "defaultValue": "'stroke'"
+            },
+            "emptyActionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional left icon (Phosphor name) for the prop-driven empty-action button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-action-icon"
+            },
             "sortField": {
                 "type": "string",
                 "mutable": true,
@@ -588,8 +666,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": {}
                 }
             }, {
@@ -682,6 +760,21 @@ export class CoDataTable {
                     "resolved": "{ row: any; index: number; }",
                     "references": {}
                 }
+            }, {
+                "method": "coEmptyAction",
+                "name": "coEmptyAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the prop-driven empty-action button (`emptyActionLabel`) is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

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: '58fdc57923ac061b83b248ad47bfc898b66fb512', class: "co-pagination", part: "pagination" }, h("div", { key: '918fdaecef593fdde7095353be9d28a19b1a89c4', class: "co-pagination__section" }, h("span", { key: '4b962d74a9655b6fd6a6ec670df4139b28bd49c1', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'c4db59aea2a672f6b103ec1b3183af94c10168b2', 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: '76de3483638cab4fbd2161c3ecd0331d8ce479c9', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '816fce2951c214419670d7bc060476beb1d3dda3', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'c65b889eb1c7287559c40e7449e4053e3ffafa87', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '72191c99bb24055f6a239aeb301452240ad954b3', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: 'f9688b7b17af70c9348b837bdacc2cf879a50e71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '47273c123ecdcfd8aee50d6d67d27bddcd78efcb', 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: '38fa750720d8df2087b6579d287f79681c6b0ff8', class: "co-pagination__spacer" }), h("div", { key: '17f1557e704f2f466efe06babc9ba4d065d67c7f', class: "co-pagination__section" }, h("span", { key: '376d1c381f7efc92ee1afafa664e665ab80f6b17', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'cea4fe162d5610c6fd847be228f672fc3ae088cb', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '64b7983f49a768631265f82af2904b15b6b927ef', 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: 'efd6ec713cb22bdb9eb6774e094f8fbc12cb4811', 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: '5ac31e35bf25f081826ab545e81905a584a4d4a7', 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: 'bdae8bdc967b23279ec74d529a37364ec337f95b', class: "co-date-field__labels" }, h("label", { key: '0b12b042cebc4b0eb63db437e42e04aedfb53464', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'd75f215b97944fa284f5fd7551ea9064b6178680', required: this.required })))), h("div", { key: '46e3bf5add9a72130008e3b5813fed3ecbbaca95', class: "co-date-field__field-row" }, h("div", { key: 'ee34b6d0a3cb8e61fc04b6c4f1758ca8d64d793f', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '00fb0a1eda9a4fc85f859fce9382c1ff11e7589c', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8c57abb7af49e3779886b48d84fcc9c8e779588b', class: "co-date-field__input-wrapper" }, h("input", { key: 'c6cd280e83d99f3fdae60f52632d0ebeeebf6ca6', 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: '9fdf9250b8d15d25a3589c3439b76b5280146037', 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: '7ada74a22ec6a2256335e0ddf6da6afaa0b7a352', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'e7d9c399df18fcc9853e39a2098ba69e0da134f6', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '7548567c188927716305d008e29a6d374445a240', 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: '1f333eb340a795d57eb10994a2df16b5c791aa16', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '26e3c105607810fcfdedf864f5c182fc6d882d86', 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: 'a366a10a7980292014ac8a9f48a97077cac09299', 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

@@ -26,7 +26,8 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  border-radius: 24px;
+  /* Match the app-shell surface radius (same knob co-app-shell uses). */
+  border-radius: var(--co-shell-r, var(--co-border-radius-md));
   transform: translateX(calc(100% + 12px));
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
@@ -39,7 +40,8 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  border-radius: 24px;
+  /* Match the app-shell surface radius (same knob co-app-shell uses). */
+  border-radius: var(--co-shell-r, var(--co-border-radius-md));
   transform: translateX(calc(-100% - 12px));
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
@@ -54,7 +56,8 @@
   width: auto;
   transform: translateY(calc(100% + 12px));
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
-  border-radius: 24px;
+  /* Match the app-shell surface radius (same knob co-app-shell uses). */
+  border-radius: var(--co-shell-r, var(--co-border-radius-md));
 }
 .co-drawer--bottom.co-drawer--open { transform: translateY(0); }
 
@@ -150,6 +153,7 @@
 .co-drawer__body {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: var(--co-spacing-xl);
   position: relative;
 }
@@ -175,3 +179,17 @@
     width: 100vw !important;
   }
 }
+
+/* ─── Modeless (no overlay) ───────────────────────────────────────────── */
+/* The aside renders standalone with popover="manual" (top-layer). The UA
+   [popover] stylesheet sets inset:0/border/padding/margin:auto — neutralize
+   what our position rules don't already override. z-index is the fallback
+   layer for browsers without the Popover API. */
+.co-drawer--modeless {
+  z-index: 1000;
+  border: 0;
+  padding: 0;
+}
+.co-drawer--modeless.co-drawer--right  { left: auto; bottom: auto; }
+.co-drawer--modeless.co-drawer--left   { right: auto; bottom: auto; }
+.co-drawer--modeless.co-drawer--bottom { top: auto; }

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

@@ -25,6 +25,12 @@ export class CoDrawer {
         this.closeOnOverlay = true;
         /** Close when pressing Escape */
         this.closeOnEscape = true;
+        /** Render without the modal overlay: no scrim, no body-scroll lock — the
+         *  page behind stays fully interactive. The panel promotes itself to the
+         *  browser top layer (Popover API) so ancestor filters/transforms can't
+         *  clip it. Close vectors: X button, Escape, or the consumer flipping
+         *  `open` — there is deliberately no click-outside in this mode. */
+        this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
         this.handleOverlayClose = () => {
@@ -45,6 +51,23 @@ export class CoDrawer {
             else
                 this.coAfterClose.emit();
         };
+        /** Modeless only: keep the aside promoted to the top layer for its whole
+         *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
+         *  automatic). */
+        this.promoteModeless = (el) => {
+            if (el)
+                this.asideEl = el;
+            const aside = this.asideEl;
+            if (!this.modeless || !aside || typeof aside.showPopover !== 'function')
+                return;
+            try {
+                if (!aside.matches(':popover-open'))
+                    aside.showPopover();
+            }
+            catch (_a) {
+                /* not connected yet or already shown — safe to ignore */
+            }
+        };
     }
     onOpenChange(next, prev) {
         if (next && !prev)
@@ -55,13 +78,20 @@ export class CoDrawer {
             this.coClose.emit();
         }
     }
+    componentDidLoad() {
+        this.promoteModeless();
+    }
     render() {
-        return (h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
+        const aside = (h("aside", { class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
+                'co-drawer--modeless': this.modeless,
                 [`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" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" }))));
+        if (this.modeless)
+            return aside;
+        return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));
     }
     static get is() { return "co-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -257,6 +287,26 @@ export class CoDrawer {
                 "attribute": "close-on-escape",
                 "defaultValue": "true"
             },
+            "modeless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render without the modal overlay: no scrim, no body-scroll lock \u2014 the\npage behind stays fully interactive. The panel promotes itself to the\nbrowser top layer (Popover API) so ancestor filters/transforms can't\nclip it. Close vectors: X button, Escape, or the consumer flipping\n`open` \u2014 there is deliberately no click-outside in this mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "modeless",
+                "defaultValue": "false"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,