@prolibu-suite/cobalt-core 0.3.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 = '';
@@ -273,30 +275,34 @@ export class CoDataTable {
                 '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: '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: '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: '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() {
@@ -477,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,
@@ -696,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: '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: '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: '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: '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: '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: '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: '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: '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.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: '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: '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: '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: '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: '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: '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: '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: '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: '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-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); }
 
@@ -176,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: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', 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: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', name: "footer" })))));
+            }, 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,

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

@@ -0,0 +1,285 @@
+:host {
+  display: block;
+}
+
+/* ─── Shared surface ─────────────────────────────────────────── */
+.co-drive-card {
+  --dc-accent: var(--co-color-primary-azul, #2563eb);
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 14px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--co-font-family-primary);
+  background: var(--co-color-base-blanco, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card:focus-visible {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* ─── FOLDER layout — flex row ───────────────────────────────── */
+.co-drive-card--folder {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: box-shadow 0.14s ease, background 0.12s ease;
+}
+
+.co-drive-card--folder.co-drive-card--comfy {
+  padding: 14px;
+}
+
+.co-drive-card--folder.co-drive-card--compact {
+  padding: 10px 12px;
+}
+
+.co-drive-card--folder:hover:not(.co-drive-card--selected) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--folder.co-drive-card--selected {
+  background: color-mix(in srgb, var(--dc-accent) 7%, white);
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Icon tile */
+.co-drive-card__tile {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--dc-accent) 12%, white);
+  color: var(--dc-accent);
+}
+
+.co-drive-card--comfy .co-drive-card__tile {
+  width: 44px;
+  height: 44px;
+}
+
+.co-drive-card--compact .co-drive-card__tile {
+  width: 38px;
+  height: 38px;
+}
+
+/* Name + meta text block */
+.co-drive-card__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.co-drive-card__name {
+  font-family: var(--co-font-family-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--co-color-base-negro, #1f1c1b);
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-drive-card__meta {
+  font-family: var(--co-font-family-primary);
+  font-size: 12px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 2px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Trailing region (star + slot) */
+.co-drive-card__trailing {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.co-drive-card__star {
+  display: inline-flex;
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── FILE layout — column with thumb ────────────────────────── */
+.co-drive-card--file {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: box-shadow 0.14s ease;
+}
+
+.co-drive-card--file.co-drive-card--comfy {
+  padding: 10px;
+}
+
+.co-drive-card--file.co-drive-card--compact {
+  padding: 8px;
+}
+
+.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected) {
+  box-shadow: inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+}
+
+.co-drive-card--file.co-drive-card--selected {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Thumb region */
+.co-drive-card__thumb {
+  display: block;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+.co-drive-card--comfy .co-drive-card__thumb {
+  height: 132px;
+}
+
+.co-drive-card--compact .co-drive-card__thumb {
+  height: 96px;
+}
+
+.co-drive-card__thumb ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.co-drive-card__thumb ::slotted(img) {
+  object-fit: cover;
+}
+
+/* File name overrides folder size */
+.co-drive-card--file .co-drive-card__name {
+  font-size: 13px;
+}
+
+.co-drive-card__sub {
+  font-family: var(--co-font-family-primary);
+  font-size: 11.5px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 1px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Foot row */
+.co-drive-card__foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px 2px;
+}
+
+.co-drive-card__type {
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.co-drive-card__foot-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fading action affordance — stays in layout, no reflow */
+.co-drive-card__actions {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--co-color-gray-400, #a0a0a0);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__actions {
+  opacity: 1;
+}
+
+/* Star overlay (file) */
+.co-drive-card__star-overlay {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--co-color-base-blanco, #fff);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__star-overlay,
+.co-drive-card--starred .co-drive-card__star-overlay {
+  opacity: 1;
+}
+
+.co-drive-card--starred .co-drive-card__star-overlay {
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── Corner select chip (both layouts) ──────────────────────── */
+.co-drive-card__select {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
+}
+
+.co-drive-card:hover .co-drive-card__select,
+.co-drive-card--selected .co-drive-card__select {
+  opacity: 1;
+}
+
+.co-drive-card--folder .co-drive-card__select {
+  top: 8px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+.co-drive-card--file .co-drive-card__select {
+  top: 16px;
+  left: 16px;
+  width: 22px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+/* Checked fill — placed after the variant rules so it wins on ties */
+.co-drive-card--selected .co-drive-card__select {
+  background: var(--dc-accent);
+  box-shadow: none;
+}
+
+.co-drive-card__check {
+  display: block;
+  pointer-events: none;
+}