@prolibu-suite/cobalt-core 0.4.0 → 0.6.0

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

@@ -29,6 +29,11 @@ export class CoDataTable {
         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;
@@ -41,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;
@@ -83,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) {
@@ -174,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)
@@ -270,7 +304,15 @@ 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() }))))))));
@@ -297,12 +339,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '0ca5b4b0a0a31c1ea7488a7ca22b64683a9d35e1', 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: '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()));
+            } }, 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() {
@@ -581,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,
@@ -648,6 +730,8 @@ export class CoDataTable {
             "parsedColumns": {},
             "parsedRows": {},
             "parsedSelectedKeys": {},
+            "parsedFilteredFields": {},
+            "parsedIndirectFields": {},
             "columnWidths": {},
             "resizingColumn": {},
             "resizeStartX": {},
@@ -730,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",
@@ -788,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: '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) => {
+        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: '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: {
+            }, 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: '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: {
+            }, 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: 'efd6ec713cb22bdb9eb6774e094f8fbc12cb4811', 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: '5ac31e35bf25f081826ab545e81905a584a4d4a7', 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: '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: {
+            }, 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: '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: {
+            }, 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: '1f333eb340a795d57eb10994a2df16b5c791aa16', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '26e3c105607810fcfdedf864f5c182fc6d882d86', 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: '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() }));
+        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,10 +38,7 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  /* 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);
 }
 .co-drawer--right.co-drawer--open { transform: translateX(0); }
 
@@ -40,10 +49,7 @@
   margin: 6px;
   height: 100vh;
   height: -webkit-fill-available;
-  /* 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);
 }
 .co-drawer--left.co-drawer--open { transform: translateX(0); }
 
@@ -55,9 +61,6 @@
   margin: 6px;
   width: auto;
   transform: translateY(calc(100% + 12px));
-  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
-  /* 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); }
 
@@ -67,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,
@@ -80,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;
@@ -116,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;
@@ -189,6 +222,9 @@
   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; }

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

@@ -74,9 +74,14 @@ export class CoDrawer {
             this.coOpen.emit();
     }
     handleKey(e) {
-        if (this.open && this.closeOnEscape && e.key === 'Escape') {
-            this.coClose.emit();
-        }
+        if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
+            return;
+        // A modeless drawer yields Escape while a MODAL surface is open on top
+        // (record/filter drawers, modals) — one Esc must not close both layers.
+        // Hosts are light-DOM with reflected props, so a document query works.
+        if (this.modeless && document.querySelector('co-drawer[open]:not([modeless]), co-modal[open]'))
+            return;
+        this.coClose.emit();
     }
     componentDidLoad() {
         this.promoteModeless();
@@ -88,7 +93,7 @@ export class CoDrawer {
                 'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, 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" }))));
+            }, 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("div", { class: "co-drawer__card" }, 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));

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: 'f9e2b706825032260ad30201232bd9cf0d04d1ac', class: {
+        return (h("div", { key: '8f843886a6953476f075dcec86567da6d6160d51', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: 'd226ecd72105f1d7123224a73cbd97815278d92a', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'bd89c2a02c19a463bbd1123b359a1c96f4652454' }), this.active && (h("div", { key: '7293c928999e6be658f79f653d2a886933250a8b', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'd30b7f79f026830e838a4814cd0c6e37f0fea5d5', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'e9e7276fb71e4b7af92f4408342ac0da95ab349b', name: this.icon, size: 34 })), h("span", { key: 'd7384806639985414c1178d4b239e1a52d7af87f', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '015443db8a6c29e05a99dfd947c9dbc258a244a2', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '5d1756f75bf122e538842f146635ed7d6181b376' }), this.active && (h("div", { key: '1f52982512900c61cfbfa38f2fcf05db785c656e', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '32a754269cb02d8010403545ab351eaa870e42e7', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'fa72d2e3802970233742faf1ce48b16594fd1d25', name: this.icon, size: 34 })), h("span", { key: '92d2d4b8daa9d1cb3eb1d79c1fe0a59ac290c9aa', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  background: var(--co-semantic-surface-subtle);
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-semantic-text-muted);
   margin-bottom: var(--co-spacing-xl);
 }

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

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: 'c7336e586fbce927c39b6f7e8d852849e0312e83', class: {
+        return (h("div", { key: '4cf85c1fd72560c3fde039901adbac86a4fc147f', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: 'f58b6073926822e44fa22862ea907b664a61395e', class: "co-empty-state__icon" }, h("co-icon", { key: 'a4269c6f9926407f22dd1200b75186c0f37f7af1', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '94f7bc1e6c270253ab80c7dc54b2c3b080826d2f', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'fa263779ebe981cdbe4944883337a9daf8eaef2f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'e41f7fa89d2ee5d99793dedc377c50c0f983e8ab', class: "co-empty-state__actions" }, h("slot", { key: 'f81de2fc06cd14a6793fc1e5613d73f499482df3' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: '4f8e8922631a5b88a9e158c2a6235515e8d09022', class: "co-empty-state__icon" }, h("co-icon", { key: '66fe90f142047bd3c03f901443e91b9a654e2bfa', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: 'fba5fe8abb82a90902e069d2f06730a3240b3cff', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '82bb5115feb16737e9a6658a508ba6faa1ab1e24', class: "co-empty-state__description" }, this.description)), h("div", { key: '048fb44e84e107232753f0d203f512dba556338b', class: "co-empty-state__actions" }, h("slot", { key: 'd7b1111baa84f9eeda18606f18b721865678bfd5' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -146,10 +146,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: '0c5af4d184497f5fc8c04cc62d66f572db2a7a01', class: "cal" }, h("div", { key: 'c75f5290fd13d52d82eb639d6aff951c13e40ed3', class: "cal__toolbar", part: "toolbar" }, h("div", { key: 'eca46b8aa1cd485dbeacf235a868065af736aee3', class: "cal__nav-group" }, h("button", { key: 'e9f1e03c8c94698d66aea9ee7a292e82c132d603', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '017d7b8a2f19cfe4785213d5d77f90ee895fbad5', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '296bdcdf30e130a085cc859a84eb3d590b9ef5b7', name: "caret-left", size: 16 })), h("button", { key: '53baaddc224a924fc06a5555cb297e05ee8785d9', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '736ae81e00e458fd1c71414ad8dcf309a13faee0', name: "caret-right", size: 16 }))), h("h2", { key: '87261ba9a5b7d7dd0ba3c3641c21d15ce37eebed', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: 'dce81390ee349de59285e31506ec397aead8c1c5', class: "cal" }, h("div", { key: '58f3acb8a74558505aab88e95fbea15bc65cce2f', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '9249edf79de99180871667f813aa40e288f130b7', class: "cal__nav-group" }, h("button", { key: '2cb250065f64860466b141b6dcaffeef60158dcc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '15ebc01c5be71b48042735ee6247ad16a957493b', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'dc74fc8780144c952c7012cf0e984998650e96a7', name: "caret-left", size: 16 })), h("button", { key: 'e4d2ee75a2c8fa818d327a9d82fa23051ec8a24c', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'd489365423552d000655898ac267fdbfddd216c0', name: "caret-right", size: 16 }))), h("h2", { key: '370e61c61a12860d36b4a04cdbc5dee447fdfe46', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: 'f0962c6de9446110ef52455839a7cf5cb570cee0', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '26677d79d63d957315c09df9b18597009c9681cc', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,6 +23,7 @@
 }
 
 /* ── Sizes ──────────────────────────────────────────────────── */
+.co-fab--xl { width: 64px; height: 64px; font-size: var(--co-font-size-16); } /* Figma FAB */
 .co-fab--l  { width: 56px; height: 56px; font-size: var(--co-font-size-16); }
 .co-fab--m  { width: 48px; height: 48px; font-size: var(--co-font-size-14); }
 .co-fab--s  { width: 40px; height: 40px; font-size: var(--co-font-size-14); }
@@ -32,14 +33,20 @@
   border-radius: var(--co-border-radius-lg);
 }
 
+.co-fab--extended.co-fab--xl { padding: 0 var(--co-spacing-xl); }
 .co-fab--extended.co-fab--l  { padding: 0 var(--co-spacing-xl); }
 .co-fab--extended.co-fab--m  { padding: 0 var(--co-spacing-lg); }
 .co-fab--extended.co-fab--s  { padding: 0 var(--co-spacing-md); }
 
 /* ── Variants ───────────────────────────────────────────────── */
 .co-fab--primary {
-  background: var(--co-semantic-surface-primary);
+  /* Figma FAB: Negro 80% + Blur_1 — vidrio oscuro. El backdrop-filter vive en
+     .co-fab (tiene border-radius propio) para que el esmerilado quede clipeado
+     a las esquinas redondeadas. */
+  background: var(--co-fab-bg, var(--co-color-opacity-negro-80, rgba(31, 28, 27, 0.8)));
   color: var(--co-semantic-on-primary);
+  -webkit-backdrop-filter: blur(40px);
+  backdrop-filter: blur(40px);
 }
 
 .co-fab--primary:hover:not(:disabled) {