@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -22,11 +22,18 @@ 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 = '';
         /** Current sort direction */
         this.sortOrder = '';
+        /* ─── COLUMN FILTERS ────────────────────────────────────── */
+        /** Fields with an active column filter (funnel filled + always visible). JSON string or array. */
+        this.filteredFields = '[]';
+        /** Fields filtered by OTHER filter layers (funnel dimmed hint). JSON string or array. */
+        this.indirectFilteredFields = '[]';
         /* ─── SELECTION ─────────────────────────────────────────── */
         /** Enable row selection with checkboxes */
         this.selectable = false;
@@ -39,6 +46,8 @@ export class CoDataTable {
         this.parsedColumns = [];
         this.parsedRows = [];
         this.parsedSelectedKeys = new Set();
+        this.parsedFilteredFields = [];
+        this.parsedIndirectFields = [];
         this.columnWidths = new Map();
         this.resizingColumn = null;
         this.resizeStartX = 0;
@@ -81,10 +90,28 @@ export class CoDataTable {
             this.parsedSelectedKeys = new Set();
         }
     }
+    parseFilteredFields() {
+        try {
+            this.parsedFilteredFields = typeof this.filteredFields === 'string' ? JSON.parse(this.filteredFields) : (this.filteredFields || []);
+        }
+        catch (_a) {
+            this.parsedFilteredFields = [];
+        }
+    }
+    parseIndirectFields() {
+        try {
+            this.parsedIndirectFields = typeof this.indirectFilteredFields === 'string' ? JSON.parse(this.indirectFilteredFields) : (this.indirectFilteredFields || []);
+        }
+        catch (_a) {
+            this.parsedIndirectFields = [];
+        }
+    }
     componentWillLoad() {
         this.parseColumns();
         this.parseRows();
         this.parseSelectedKeys();
+        this.parseFilteredFields();
+        this.parseIndirectFields();
     }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
@@ -172,6 +199,15 @@ export class CoDataTable {
         e.stopPropagation();
         this.coColumnPin.emit({ field });
     }
+    handleColumnFilter(field, e) {
+        e.stopPropagation();
+        const el = e.currentTarget;
+        const r = el.getBoundingClientRect();
+        this.coHeaderFilter.emit({
+            field,
+            rect: { top: r.top, left: r.left, bottom: r.bottom, right: r.right, width: r.width, height: r.height },
+        });
+    }
     /* ─── HELPERS ───────────────────────────────────────────── */
     formatCellValue(value) {
         if (value == null)
@@ -268,35 +304,47 @@ export class CoDataTable {
                 : 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' })), 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: {
+            }, 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)), col.filterable && (h("span", { class: {
+                'co-data-table__filter-icon': true,
+                'co-data-table__filter-icon--active': this.parsedFilteredFields.includes(col.field),
+                'co-data-table__filter-icon--indirect': !this.parsedFilteredFields.includes(col.field) && this.parsedIndirectFields.includes(col.field),
+            }, title: this.parsedFilteredFields.includes(col.field)
+                ? 'Edit column filter'
+                : this.parsedIndirectFields.includes(col.field)
+                    ? 'Filtered by other filters'
+                    : 'Filter column', onClick: (e) => this.handleColumnFilter(col.field, e) }, h("co-icon", { name: "funnel", size: 14, weight: this.parsedFilteredFields.includes(col.field) ? 'fill' : 'regular' })))), 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: 'ca97ff4e2b3fb28ff64e49654c35e3081e43b036', class: {
+        return (h("div", { key: 'baf9a797b25e76d4b054513b3e4c90aacce24a80', 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: '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()));
+            } }, h("div", { key: '132100357cb7fed5d27054e2e3a66c218dddad9d', class: "co-data-table__scroll" }, h("table", { key: '0e183744b6f1c7c44ec8dd741eb8cdbbbdf5b638', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'c3c58515f63fdfdfa760ba483f00c686863ddb20' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -477,6 +525,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,
@@ -517,6 +623,46 @@ export class CoDataTable {
                 "attribute": "sort-order",
                 "defaultValue": "''"
             },
+            "filteredFields": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields with an active column filter (funnel filled + always visible). JSON string or array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "filtered-fields",
+                "defaultValue": "'[]'"
+            },
+            "indirectFilteredFields": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields filtered by OTHER filter layers (funnel dimmed hint). JSON string or array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indirect-filtered-fields",
+                "defaultValue": "'[]'"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,
@@ -584,6 +730,8 @@ export class CoDataTable {
             "parsedColumns": {},
             "parsedRows": {},
             "parsedSelectedKeys": {},
+            "parsedFilteredFields": {},
+            "parsedIndirectFields": {},
             "columnWidths": {},
             "resizingColumn": {},
             "resizeStartX": {},
@@ -666,6 +814,21 @@ export class CoDataTable {
                     "resolved": "{ field: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "coHeaderFilter",
+                "name": "coHeaderFilter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a column's filter icon is clicked (rect = icon bounding box for anchoring)."
+                },
+                "complexType": {
+                    "original": "{ field: string; rect: { top: number; left: number; bottom: number; right: number; width: number; height: number } }",
+                    "resolved": "{ field: string; rect: { top: number; left: number; bottom: number; right: number; width: number; height: number; }; }",
+                    "references": {}
+                }
             }, {
                 "method": "coRowDblClick",
                 "name": "coRowDblClick",
@@ -696,6 +859,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"; }
@@ -709,6 +887,12 @@ export class CoDataTable {
             }, {
                 "propName": "selectedKeys",
                 "methodName": "parseSelectedKeys"
+            }, {
+                "propName": "filteredFields",
+                "methodName": "parseFilteredFields"
+            }, {
+                "propName": "indirectFilteredFields",
+                "methodName": "parseIndirectFields"
             }];
     }
 }

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: '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) => {
+        return (h("div", { key: 'a0634afed71b18005f42921052b2bb41b5710818', class: "co-pagination", part: "pagination" }, h("div", { key: '08afef194748764e581c9c0e173af57bd7484e6a', class: "co-pagination__section" }, h("span", { key: '8bf238dd11b3c322becb18e07afbe087584ce3e0', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '109f501ce7a1dc4ee2c109d75f7fcbc81aa3bfcc', 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: '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: {
+            }, part: "jump-input" })), h("div", { key: '706f537a7165004e18a4cf9f3b172392cbc25657', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '15102e983f876658cf56c2aba8d94d29d132fa47', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '5eb114f934a1f694c45ae4165d3dc32e120fd7c9', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: 'f767df618ae0f1193dd107d8b8ab66434ab3da92', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '013df9bfa151cbc9c266c10e94e18823edd48050', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '634d6cdb5ceaaf6e0ffee6ee3533d568765d8868', 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: '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: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '9cd537ceee590fdf03fb71f1e703c468e88881c5', class: "co-pagination__spacer" }), h("div", { key: '4f958f5ce6d1d5bb77a232d49dcf0375cadd8bff', class: "co-pagination__section" }, h("span", { key: '50717cd14f6dd64a47c31d64c6b98064316c5363', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'd133196b3970aed10f5e80fe8edc16576d3ef723', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '497d2dec11447e6426810770a38ff09564796336', 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: '9b3cdab026b566275248734a8db218d70a81b082', 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: '86ef170b109112e82cc2b7e53932a1ce1594e3cf', 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,10 +56,10 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  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);
+  /* Figma Text Field parity (same box as co-input): solid page surface +
+     Negro 25% border — tinted glass didn't read as editable on white. */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -240,6 +240,3 @@
   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: '88be9ead58abc8f3c417e66482aa8f05fee57337', class: {
+        return (h("div", { key: '7c7de06d53bf9ab7dab40906d533bfaf1874e41e', 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: '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: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '30828a7b19aae5f304a26ec5025dba14039060d2', class: "co-date-field__labels" }, h("label", { key: '0b004de41209191ee0a03cf8436eb4dba96bb99c', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '810008c09dbc2fd5e889adc71230a546ab4e78df', required: this.required })))), h("div", { key: '8e488bd0ceb0b011fc4a903d66f3dd17a668cea3', class: "co-date-field__field-row" }, h("div", { key: '9a7fb685c5fc65ee9f731dba6c34a527044a1388', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '81aa74d44ff1b524c253e278345c8add4fb3fe9f', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4dc0d25d37fb8d099860566af1c2ac59d5111e4a', class: "co-date-field__input-wrapper" }, h("input", { key: '1aedac94aff9df44316509d9062e41f86a405a33', 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: '0e91b71755c341971064186ee1371d59353cdd1c', 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: '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: {
+            }, 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: 'c4714d0444f27adf4c85f9303d0a510cb63af406', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '257a873a76fdf65494778b1d514717ae2627f4ef', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '345fe8ad6fd0c5c512c038249f7d8f95ff286838', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, 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)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '32b6d53b1f8d78fdff90c960c039ac109c80c137', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6f9ad478ddb4401d314ad7ef4fb98b21230b5ef1', 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: '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() }));
+        return (h("co-date-range-picker", { key: '4982a84de425fdf533128dc3ce3665b51d8c885d', 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,10 +38,10 @@
   width: 100%;
   min-height: 40px;
   padding: 0 var(--co-spacing-md);
-  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);
+  /* Figma Text Field parity (same box as co-input): solid page surface +
+     Negro 25% border — tinted glass didn't read as editable on white. */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   cursor: pointer;
   color: var(--co-semantic-text-default);
@@ -189,8 +189,11 @@
 }
 
 .co-date-range-picker__btn--primary {
-  background: var(--co-color-primary-azul);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+}
+.co-date-range-picker__btn--primary:hover:not(:disabled) {
+  opacity: 0.88;
 }
 .co-date-range-picker__btn--primary:disabled {
   opacity: 0.5;
@@ -252,6 +255,3 @@
   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

@@ -4,14 +4,26 @@
 
 .co-drawer {
   position: fixed;
-  background: var(--co-semantic-surface-page);
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
   will-change: transform;
   z-index: 1;
+  /* Elevation: a layered soft drop-shadow that follows the squircle silhouette
+     of the inner card (drop-shadow respects the child mask; a box-shadow here
+     would be rectangular and the inner mask would clip it away). Same recipe
+     as co-app-shell .main / co-modal .co-modal__frame. */
+  filter:
+    drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))
+    drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));
+  /* Squircle geometry — shared with .co-drawer__card. Match the app-shell
+     surface radius (same knob co-app-shell uses). */
+  --co-drawer-r: var(--co-shell-r, var(--co-border-radius-md));
+  --co-sq-tl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-tr: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-bl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-br: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");
 }
 
 /* ─── Position: right (default) ───────────────────────────── */
@@ -26,9 +38,7 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  border-radius: 24px;
   transform: translateX(calc(100% + 12px));
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
 .co-drawer--right.co-drawer--open { transform: translateX(0); }
 
@@ -39,9 +49,7 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  border-radius: 24px;
   transform: translateX(calc(-100% - 12px));
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
 .co-drawer--left.co-drawer--open { transform: translateX(0); }
 
@@ -53,8 +61,6 @@
   margin: 6px;
   width: auto;
   transform: translateY(calc(100% + 12px));
-  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
-  border-radius: 24px;
 }
 .co-drawer--bottom.co-drawer--open { transform: translateY(0); }
 
@@ -64,7 +70,7 @@
 .co-drawer--right.co-drawer--md,
 .co-drawer--left.co-drawer--md   { width: 520px; max-width: 100vw; }
 .co-drawer--right.co-drawer--lg,
-.co-drawer--left.co-drawer--lg   { width: 720px; max-width: 100vw; }
+.co-drawer--left.co-drawer--lg   { width: 672px; max-width: 100vw; } /* Figma drawer */
 .co-drawer--right.co-drawer--xl,
 .co-drawer--left.co-drawer--xl   { width: 960px; max-width: 100vw; }
 .co-drawer--right.co-drawer--full,
@@ -77,6 +83,36 @@
 .co-drawer--bottom.co-drawer--xl   { height: 95vh; }
 .co-drawer--bottom.co-drawer--full { height: 100vh; }
 
+/* The visible card: smooth (squircle) corners, background + clip live here
+   (not on .co-drawer) so .co-drawer's drop-shadow isn't clipped by the mask. */
+.co-drawer__card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--co-semantic-surface-page);
+  border-radius: 0; /* the mask defines the (smooth) shape */
+  /* Squircle via 4 corner pieces + a cross of 2 bars (H full-width, V full-height).
+     The bars are sized `calc(... + 2px)` so they OVERLAP each corner by ~1px on
+     every side — same anti-seam trick as co-app-shell .main__card / co-modal
+     .co-modal (prevents a sub-pixel transparent seam that flickers with zoom). */
+  -webkit-mask:
+    var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,
+    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat;
+          mask:
+    var(--co-sq-tl) top left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-tr) top right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-bl) bottom left / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    var(--co-sq-br) bottom right / var(--co-drawer-r) var(--co-drawer-r) no-repeat,
+    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-drawer-r) + 2px) no-repeat,
+    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-drawer-r) + 2px) 100% no-repeat;
+}
+
 /* ─── Header ──────────────────────────────────────────────── */
 .co-drawer__header {
   display: flex;
@@ -113,7 +149,7 @@
 
 .co-drawer__description {
   margin: var(--co-spacing-xs) 0 0;
-  font-size: var(--co-font-size-13);
+  font-size: var(--co-font-size-13, 13px);
   font-weight: 400;
   color: var(--co-semantic-text-muted);
   line-height: 1.4;
@@ -176,3 +212,20 @@
     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;
+  /* UA [popover] pinta background: Canvas en el aside — sin esto, un rect
+     blanco cuadrado asoma detrás de las esquinas squircle del card. */
+  background: transparent;
+}
+.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; }