@prolibu-suite/cobalt-core 0.9.0 → 0.9.1

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { edgeAutoScrollSpeed, resizeWidth } from "../../utils/columnResize";
 /**
  * @slot - Default slot for custom row content (advanced usage)
  */
@@ -52,6 +53,17 @@ export class CoDataTable {
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
+        // Edge auto-scroll drag state — plain fields (not @State): they mutate per
+        // frame and the re-render is already driven by the columnWidths Map swap.
+        this.resizeEdgeExtra = 0;
+        this.resizeLastClientX = 0;
+        this.resizeAutoScrollRaf = 0;
+        // Scroll owed to the auto-scroll growth, applied in componentDidRender —
+        // NEVER in the tick itself: the @State render is async, so at max scroll a
+        // same-tick scrollLeft advance clamps against the not-yet-grown table and
+        // the scroll falls permanently behind the width (boundary drifts off the
+        // pointer). Deferring to didRender lands width + scroll in the SAME paint.
+        this.resizePendingScroll = 0;
         // Swallows the click the browser synthesizes right after a resize drag ends.
         // The resize handle lives inside the sortable <th>, so without this a resize
         // would bubble to the header's onClick and trigger a sort (+ a full refetch).
@@ -113,6 +125,18 @@ export class CoDataTable {
         this.parseFilteredFields();
         this.parseIndirectFields();
     }
+    componentDidRender() {
+        // Auto-scroll parity: the resize tick grew the column (async @State render)
+        // and owes the container the same px of scroll. Here the DOM already has
+        // the new table width, so the advance can't clamp — width and scroll land
+        // in the same paint and the drag boundary stays pinned under the pointer.
+        if (this.resizePendingScroll) {
+            const scrollEl = this.el.querySelector('.co-data-table__scroll');
+            if (scrollEl)
+                scrollEl.scrollLeft += this.resizePendingScroll;
+            this.resizePendingScroll = 0;
+        }
+    }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
         // Ignore the click synthesized by a resize drag that ended on this <th>.
@@ -164,16 +188,74 @@ export class CoDataTable {
         this.resizingColumn = field;
         this.resizeStartX = e.clientX;
         this.resizeStartWidth = this.columnWidths.get(field) || 150;
+        this.resizeEdgeExtra = 0;
+        this.resizeLastClientX = e.clientX;
+        const scrollEl = this.el.querySelector('.co-data-table__scroll');
+        const columnMinWidth = () => { var _a; return ((_a = this.parsedColumns.find(c => c.field === this.resizingColumn)) === null || _a === void 0 ? void 0 : _a.minWidth) || 80; };
+        const applyWidth = () => {
+            const column = this.resizingColumn;
+            if (!column)
+                return 0;
+            const newWidth = resizeWidth({
+                startWidth: this.resizeStartWidth,
+                minWidth: columnMinWidth(),
+                pointerDelta: this.resizeLastClientX - this.resizeStartX,
+                autoScrollExtra: this.resizeEdgeExtra,
+            });
+            this.columnWidths = new Map(this.columnWidths.set(column, newWidth));
+            return newWidth;
+        };
+        // Growing a column past the viewport needs the container to CHASE the
+        // pointer: while it hovers the edge zone, each frame adds `speed` px to the
+        // width AND owes the container the same px of scroll, so the boundary stays
+        // pinned under the pointer instead of dying at the viewport edge (the old
+        // drag forced release → scrollbar → drag again to keep growing). The owed
+        // scroll is NOT applied here — see resizePendingScroll/componentDidRender:
+        // the @State render is async, so a same-tick scrollLeft advance would clamp
+        // against the not-yet-grown table and fall permanently behind the width.
+        const autoScrollTick = () => {
+            this.resizeAutoScrollRaf = 0;
+            const column = this.resizingColumn;
+            if (!column || !scrollEl)
+                return;
+            const rect = scrollEl.getBoundingClientRect();
+            const speed = edgeAutoScrollSpeed({
+                pointerX: this.resizeLastClientX,
+                containerLeft: rect.left,
+                containerRight: rect.right,
+            });
+            if (!speed)
+                return;
+            // Shrinking at the left edge: once the column bottoms out at minWidth
+            // stop the loop — accumulating further negative extra would rubber-band
+            // the next rightward drag.
+            if (speed < 0 && (this.columnWidths.get(column) || this.resizeStartWidth) <= columnMinWidth())
+                return;
+            this.resizeEdgeExtra += speed;
+            this.resizePendingScroll += speed;
+            // applyWidth swaps the Map reference → guarantees a render → guarantees
+            // componentDidRender flushes the pending scroll right after the paint
+            // that shows the wider table.
+            applyWidth();
+            this.resizeAutoScrollRaf = requestAnimationFrame(autoScrollTick);
+        };
         const onMouseMove = (ev) => {
-            var _a;
             if (!this.resizingColumn)
                 return;
-            const diff = ev.clientX - this.resizeStartX;
-            const minWidth = ((_a = this.parsedColumns.find(c => c.field === this.resizingColumn)) === null || _a === void 0 ? void 0 : _a.minWidth) || 80;
-            const newWidth = Math.max(minWidth, this.resizeStartWidth + diff);
-            this.columnWidths = new Map(this.columnWidths.set(this.resizingColumn, newWidth));
+            this.resizeLastClientX = ev.clientX;
+            applyWidth();
+            if (!this.resizeAutoScrollRaf)
+                this.resizeAutoScrollRaf = requestAnimationFrame(autoScrollTick);
         };
         const onMouseUp = () => {
+            if (this.resizeAutoScrollRaf) {
+                cancelAnimationFrame(this.resizeAutoScrollRaf);
+                this.resizeAutoScrollRaf = 0;
+            }
+            // resizePendingScroll is NOT zeroed here: it is only ever nonzero with a
+            // render already in flight (each tick increments it right before
+            // applyWidth), so its flush in componentDidRender is the legitimate tail
+            // of the drag — zeroing it would strand the boundary short of the pointer.
             if (this.resizingColumn) {
                 const width = this.columnWidths.get(this.resizingColumn) || 150;
                 this.coColumnResize.emit({ field: this.resizingColumn, width });
@@ -339,12 +421,12 @@ export class CoDataTable {
             : h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: 'baf9a797b25e76d4b054513b3e4c90aacce24a80', class: {
+        return (h("div", { key: '6ba1f3bb555252c55246c8af73b8ce08610e93b0', 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: '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()));
+            } }, h("div", { key: '69bc61a98f48ac06006d9b5ab132abf15bbeeb64', class: "co-data-table__scroll" }, h("table", { key: 'bc7627b050900ca6c8887981e47368bfb7f181ea', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: 'fc98863e680b660844ec968af6ebc645160ee32e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {

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: 'ccf2b514ca05bb56014a2adf60cc5b4a55e8c60c', class: "co-pagination", part: "pagination" }, h("div", { key: '49649c806450bf111bb7b2e26d004ac3c0b20373', class: "co-pagination__section" }, h("span", { key: '8419a89097e4e6a89777b346de6627da9331d0f6', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '315b8a1675fe6d7f3fca8fe0f1992bcbca9325a0', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '185e1d7a9d69e1bacd7aeb697c70e9cefae6057d', class: "co-pagination", part: "pagination" }, h("div", { key: '93dcff37dcd024519d00176b3bf52c6fc94c00ec', class: "co-pagination__section" }, h("span", { key: 'f13f0b987bd3634046b26225b867b4a3f8766eb3', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'aed4e49fe945dac3dab1b84d97119f7e5c298142', 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: 'a97c699d390734902220805bec64420deeb4fd6a', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'fcd095371ce699102ce8c66787918c065481e35d', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '1ba988e2bd9c457feefa8af4cd76b0bded02fd12', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '51d5d3917d817c9752433a729427550a38750e56', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '093883ae845b9f813337d296711c42ba130323a7', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'bbab8ec16c6abbd6f311bcbaafa1b9409f3c8a0f', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '67a1d54ce40eb1cc003d5f88ea644df994d0c590', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '877cb7ebbf427e505f399d14e48cec4011282ab4', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'ef55eceda68aa0d561a3066a6a9f864171350f94', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '1813de04f69717833fe432ec5188aaa00a379128', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '20ba29bbb24dfbd03551a439ad9f7cbbbb233f8e', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '99bf24b654f5171fb2bf6a0b720057179e7931f1', 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: '970ec69d86943f9a2ce03427ca046767c853761d', class: "co-pagination__spacer" }), h("div", { key: 'd3b9ac58040df59daf1cb8848237ad8ed2b05604', class: "co-pagination__section" }, h("span", { key: '6c28ef609f8f3da05791e5b8ff56d84164984def', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '5a0d8770c82e23e93d3a5101111e65842af027d9', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '2bea97c046df6ee0d2a7d7de80762659eb2bf9b0', 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: '1b0a013033bffc0ef849590f4bd2b19ba78346f3', class: "co-pagination__spacer" }), h("div", { key: '02bcc300d05ff7e2710c2bbb1373ef695e563b6e', class: "co-pagination__section" }, h("span", { key: '3942e7ef9ac9d7b295c1c81685fbeec6032df795', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '6e88cd0855d6f34ce0e38d1ee89234b8cf929ad0', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '81b26b3f719a1eca429a6820bf7da6d68b79398f', 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: '0e432cb2ec4ff54997a0297ddd864bfe050c01a0', 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: '83448292b1fba7470971b46e8ab14267e8a762dc', 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: '58824a62494004dc20539095b0dc4b0abd672429', class: {
+        return (h("div", { key: '76448762ebc35a510daa099e2b10fffb304a09c1', 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: '35cbbc4dfcce22b17758b9585762bc7fe01463d1', class: "co-date-field__labels" }, h("label", { key: '172c4d990dc882b9fa6010287fdda46664473c5c', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'a2145c6218cf73a6ef8f248279eb3c468562d709', required: this.required })))), h("div", { key: '86b90e9a67887cbd164ec85822c2c9650cd4c6d6', class: "co-date-field__field-row" }, h("div", { key: '6ce335d82253cc3ae10d97ee76c7b7d19386fb41', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '93c3e62fba825f40062d6f4113802314c51fbc04', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'c9b227f14857a568ee2197590257313e805ef58d', class: "co-date-field__input-wrapper" }, h("input", { key: 'f756ae8a58864fb31bb707e65548e4c58c7cf217', 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: '2e2c361974484bb390d9d6f80b55f03857ffe568', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'e50f105a589cc7a4098281d2466b875fc70c706c', class: "co-date-field__labels" }, h("label", { key: '3dbb87b7f1a4b229afa920352f352cefa0b5be51', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'adad4708c70542e18e241c73dc16522ffc83a52f', required: this.required })))), h("div", { key: 'ef8bbba2b0070c21cbff8feba625ada99a75e50f', class: "co-date-field__field-row" }, h("div", { key: 'a385b086440ef6842049159424664d1f4a9a5cb5', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '5ebc11e2f8a0ccaa0534682c6633228c66565396', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '8ee80f5304623f8da75f20eb93d6fe3eb927d0f1', class: "co-date-field__input-wrapper" }, h("input", { key: 'c156767ea4818750c5b00f2f965c026417ef6bd2', 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: '4d0b388e20ad3f862e310c951ad7a07d620f9d76', 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: 'c1c29a37857c1c2d6894da49bb32d243cc2cf8dd', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'a0b4b27a1101a2993f488b88f072e681e4d6ef0c', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'eae215d0d4c99c6105fd72c8ee6704f8a1c8444f', 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: '8eb87bc05e53b340b97bdb5f17a3bbd08e2844fc', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b182c4196a15168a1ad654f00e4c83823b0bf894', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'f2cdef4f478972926e417c03aa6c23269c87fd32', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'afc623261826da8d6e94c866808b6eff58da1a44', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '20e477abb5f1069673f2b65100aa3b6c40b85a6b', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e4a0acf05080876968835be09f4cf04b4b3ee80f', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '2329cec15faab426f09107615e3038428b26182f', 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: '4c6ae7f2b043b03a896c94411ffb8dcd6b375ffc', 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: 'c72ef0bfac5b2fb196286b77c39c84cf1d72e06d', 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-time-picker/co-date-time-picker.js

@@ -367,10 +367,10 @@ export class CoDateTimePicker {
     render() {
         var _a;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '60bb94ab59fc09e96a930a5a615671e8f3eb1baf', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+        return (h("div", { key: '8ccc0e31d77dfce13ab5fdd27294d6a93944f5ae', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
             h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
             h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
-        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '820935f800a6a1ecb036751e9267edfdad8f574d', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: 'c54ad2d2ebeccc0f6f4c836d25b5de0bee6376fc', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
     }
     static get is() { return "co-date-time-picker"; }
     static get encapsulation() { return "shadow"; }

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: '62056a659681c95fb1bdd8dc471b8543581f1662', class: {
+        return (h("div", { key: 'fef9abf2a536fe08fa6c65fcc4e37955c5bc5373', 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: 'a5bf9dd9d62d7d7d2ec1b0d277a267b721ea430d', 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: '609343dd414c752617e50f73f36f55d4edfc773f' }), this.active && (h("div", { key: '03f38f63b2cf7d9a166d31541f1c21bb2953c80f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '7b8cd9daa821d224e40507646a166190ea5f917f', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'f5f201175801233c4d32772dab7f947c8886ca34', name: this.icon, size: 34 })), h("span", { key: '766d7defd61ab35ab07b6b51c3fe177eb3afee2e', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '95256dff45bfd8c003a8c4e81aa221873b850df3', 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: '4a5841592fdb7cba17a51eb49bf617f1c5c88a03' }), this.active && (h("div", { key: '80d179ef44a5c5fd6294c1252fd17c35ac1e6f28', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '32fcd18641cd0d766273ce2390d83460347cb358', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'c193069fd16d3935c037f6ce69606bc9342d9ad8', name: this.icon, size: 34 })), h("span", { key: 'c6827e6f837f3707778c3b6b330b29907840e46c', 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.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: 'fd0802c7ab379e2ff69d181a89e82f9af50c7eb7', class: {
+        return (h("div", { key: '4011b99b59671ad38cf5c90b5adc1b42a0353817', 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: '0e37fbc4e087c5bc5ac69eee01cecd9fcde09f49', class: "co-empty-state__icon" }, h("co-icon", { key: '0e75bba07af87b883e7cb236800282af51c4b84f', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '69ea3039e73b48f77fa6e58d673802d34506c4ef', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '223d8321af110cbde025a59e3677338abee0cc33', class: "co-empty-state__description" }, this.description)), h("div", { key: 'bfba2044eacf53aae426fb99dc1f2d5314a0b8e6', class: "co-empty-state__actions" }, h("slot", { key: 'b22df42a753f9ca5797b373a611421e07881d3e1' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'a6899c6690bb8b9fcdd858fb63a30644b7094672', class: "co-empty-state__icon" }, h("co-icon", { key: '312945448815ae5be78074e03840909b04e5f3c4', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '7fd7fdb5fc4922bf2c7d6aab5200bc80947c20ba', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'da5cddc1aa7afc32ee30f59293f66f1e30507614', class: "co-empty-state__description" }, this.description)), h("div", { key: '940a1b9ffa4022a3ee2623b7a6892000c63abfd4', class: "co-empty-state__actions" }, h("slot", { key: 'b6b9fbd93e79890193500d5c3bbbe72d32fa1e20' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -223,10 +223,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: '5fc690577299cbb5d2e4e75d41279ee6f49b9e80', class: "cal" }, h("div", { key: '55b342eacfa324b5eb3e1c819948aba5783e028e', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '7e190cb82abe886d5740b314aeacc136732e0538', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '0d12537595e3fb72a7214e968cd952ce68f09b90', class: "cal__title-group" }, h("button", { key: '7d658998a4df6144b9b7752103cae448eb9bea6e', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '4b793fef900dfd76f1356b1e78c7f5ed10b3da4f', name: "caret-left", size: 16 })), h("h2", { key: '0461afb4b372f7c95b528f5746b2ba6008181dcc', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '7b169bb04482f6049f4af0c19cf8bf86a962dabf', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'b426d015251b5a476e2cd34b01d1c7d5d92be71d', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: 'eb07a859a28ba0d09a3880a77a5b122c1ae063fb', class: "cal" }, h("div", { key: '693683cddfad9a1aed4be0bf3651cfff8b2ba1c7', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '48f8fc44179b2950ea0498205f8f8a5d91d33e04', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '387a1cee67da85bf72e791ca2adc67f7482eb629', class: "cal__title-group" }, h("button", { key: '24d316422fb98f7d7c66ed6154a90f54a56cab12', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'd0c575fce693943e91de8c578bb3371bfdb6425a', name: "caret-left", size: 16 })), h("h2", { key: '1bc26dd2c49d67854a1fc922cffc519485437f6a', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '0e152157ed337011d00699b450b6a5cd10016b97', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'c821a72abc278e325cadfeae54b4d2b05984d3ba', name: "caret-right", size: 16 }))), 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: '417cc54fe753d802f30d13992fef86d055c823a3', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, 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, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (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: '2472ed0d314a489f41f2f46dc7988ce8860a64c2', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, 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, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (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-event-popover/co-event-popover.js

@@ -115,7 +115,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '0d80c0a501c72d7428c85ba44075a4c9cab05f6f' }, h("div", { key: 'a772efeb2c49d71f42b53f63ba56858019fcfdcd', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '8eff11fdc9ae6ebd0de3967dc3a6522cd159bfa0', class: "pop__actions", part: "actions" }, h("slot", { key: 'b9c5c598356d8acc6b0cf135e3c5347de937a33b', name: "actions" })), h("div", { key: '0e1f10c5727d66170d9c1a5b8137ba48c61a867b', class: "pop__head" }, this.dot && h("span", { key: '78ab616e697fb9e4cdc354e791a4e2184ea20123', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '1abdeb6c16aa3daf5adfb652f4f2ede5e0abb891', class: "pop__body", part: "body" }, h("slot", { key: 'f28a87f62acaa8c617cf24f264462b525065ecbc' }))))));
+        return (h(Host, { key: '9d9ef1be12cef8d6703df32d7e768bd4b33f5894' }, h("div", { key: 'ea63b1ab102045fc94c9d095cfcace4975f3fa70', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: 'c7f1c90eadd6fad31c60e6ac9878d7a5aa473ba0', class: "pop__actions", part: "actions" }, h("slot", { key: '84dd97edf67abeabba540914167b5bc3873587b3', name: "actions" })), h("div", { key: '41b360d62f4e61826a67a3445a0554a29a80d58a', class: "pop__head" }, this.dot && h("span", { key: '7b5d2f30b23464a73164f056719ae65d28786696', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: 'f9ef28f360297b6e145929ecbbcc4145b1ea855c', class: "pop__body", part: "body" }, h("slot", { key: '9029fc9c2c99a8202185a21f1a0212145b61334b' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,11 +152,14 @@
   box-shadow: none;
 }
 
-/* ── Fixed positions ────────────────────────────────────────── */
-.co-fab--bottom-right { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
-.co-fab--bottom-left  { position: fixed; bottom: 24px; left: 24px; z-index: 1000; }
-.co-fab--top-right    { position: fixed; top: 24px; right: 24px; z-index: 1000; }
-.co-fab--top-left     { position: fixed; top: 24px; left: 24px; z-index: 1000; }
+/* ── Fixed positions ──────────────────────────────────────────
+   Los offsets son overridables por CSS var (default 24px) para que el
+   consumidor pueda separar el FAB de barras inferiores (ej. la paginación del
+   datatable): setear --co-fab-offset-bottom en el host levanta el FAB. */
+.co-fab--bottom-right { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--bottom-left  { position: fixed; bottom: var(--co-fab-offset-bottom, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
+.co-fab--top-right    { position: fixed; top: var(--co-fab-offset-top, 24px); right: var(--co-fab-offset-right, 24px); z-index: 1000; }
+.co-fab--top-left     { position: fixed; top: var(--co-fab-offset-top, 24px); left: var(--co-fab-offset-left, 24px); z-index: 1000; }
 
 /* ── Label ──────────────────────────────────────────────────── */
 .co-fab__label {

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

@@ -28,7 +28,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: '67d54b40024fa3851d0ea79960949861ecaeaf4c', class: {
+        return (h("button", { key: 'f0d1612601922430df403628c5349b322ee8e88d', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +36,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'e5e75805115a8b31530a56d8210dcdae66e28ab5', name: this.icon, size: iconSize }), this.label && (h("span", { key: '2e659c02f0056f848f5c0566069dd39f4cd48d2c', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'fc53d94af9263b20cfce36656608962158d480ab', name: this.icon, size: iconSize }), this.label && (h("span", { key: '5a16cdace79b8fb7b6ead260d14ee4ae018ed02b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.js

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '11e79bc9c1b3b56c10c0558b0d504821db7e8cd6', class: {
+        return (h("div", { key: 'f0f1cf1e1f8e7b3551a7f2cf9cda0c780e89a5cd', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '9e3f1d834e5a1b70411747568d7a1055b3e0d8f1', class: "co-file-field__labels" }, h("label", { key: '1c138fbe71432df15c970b00f910e0ddcc69a333', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '34b7d0fe683a911fc10352f0d7c79cb01c559999', required: this.required })))), showDropzone && (h("div", { key: '9d046b734982edfd7d9743e9dab5b95593e15383', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '1f2f390d2d83efa97c1aaa8721caed6a6c14347b', class: "co-file-field__labels" }, h("label", { key: 'd60c45bc97aed3e3a5a01078e9f0985378fc6d55', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '99a129fd1477928257771d97dd3800a0ed0bc7b3', required: this.required })))), showDropzone && (h("div", { key: '404e7314e1fc2cb92751fae3e01685517649e2a5', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -354,7 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '9af47292af70f8da16062a0bbac21ea520a52a39', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '68f3467892671d62648ccf2d1302cd579cd6601c', name: "file-arrow-up", size: 18 }), h("span", { key: 'a167aa0aef4f1e209660f251dd945ac41576b39f' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'b1bcfb1eabab417cd46920ccc43f624e52d1470c', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '44a29cb6fcd9ea9a65de12794d1313c0ef9da7b9', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '4d4f68f6684b976ec1610ebd45bc59ece67a13a9', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '000fe510d61916cb016a9a2d9968426c0edabe62', name: "actions" })), h("input", { key: '16169cf42cc8072d63c36bb3a25f9c5d540e48c3', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: '23dae3bd944ad6cbd7e0d10898832aa1367956a5', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'ca0c17ecc64a68594758c626d41bd14ad6a19633', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '343ca190a8ebb4a2589b90d6b9718e91f7d23bf1', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '9b911d176a0ac02b6f76c084c8b7f33c2c8637aa', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '323e98d5e7e25fcfc7c6b616f375f10bfc072c1f', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'b9862962a720cfd1f2c9774499be80f25070ce58', name: "file-arrow-up", size: 18 }), h("span", { key: '9e2aead4e161f89a85480200f77b58f3893ce9d9' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '85eb14b7a6e7e7bfdca34b65a9e2bc76a98d8a85', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '2c18fd7507c4cf1ff9a62290378ff17a695123a2', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '6d2fe109efb9d611ae0e9d0750264c07082d2293', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'c4004efe0aaee962fcb21ec9de3672ec747d9c5a', name: "actions" })), h("input", { key: 'd2e7504aec97b8cd210b938ed546662b321a0c67', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'be86d4a85621ebb3ac99a54381ea31f147f7d91e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '09a9769ee8a72011600b2516fbea7e2fdb6a8e78', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'f1e9d57bfaf98939d1371262cc469c770dda1cbb', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '05308858680195f999764585cb6de75629a88db7', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'c2edda6419a9f6e75f7c16fac61ce3271159d816', class: {
+        })))), helper && (h("div", { key: 'ebbbb0cffa70dbf5125ffafd5ebdafd6cc03c1d9', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0772a3d9fdf8fc818b0738ce4c7f0297c6eb4984', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6153f585fdd804fb49b09e1d106c6625e473b917', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'bb81007afb2e2cb36d63045d09b784c6ce0aa7f1', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '28618bdc3f08a5e226751e8ac5388e7aea02567f', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -54,7 +54,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: '174e628c4a7fdd118cd5573c0054677c7c006989', class: {
+        return (h("span", { key: '1df6dee1c0f729279f36463be6df9137bcbf4af0', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -64,7 +64,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: '815957f4dd756fec566b4bbc996083e80aed0ab5', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '566163b957b853911e3eef15cd38c7573cf749b4', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: 'c09b28c4e20a80ce87275beb8c8f38c4ec9a6ac3', class: {
+        return (h("div", { key: '2c4ae2b671b16dfda50eea3dd33b92c5661812fb', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '48bee19674872e9ed7b06a9f0706063111abc3ae', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9b1e0cd4c00ad73c915f826df299cbb05156ca02', class: "co-helper-text__message" }, h("slot", { key: '41c95d86b31bb19be88b619057aba484748f1dfc' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '18a15852e651204d06279be5a685c79ed927c6d0', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '62c3d084abd1b62f90b2631953f51306293b23b7', class: "co-helper-text__message" }, h("slot", { key: '06604123763ac0f84fe1bc2ec1dd840d6ee2756d' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '81319f5bcb43f9f095f7ae6328002bcffe22bc42', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'a1f3cfef2067bd672a17c19666821b6fac0b3027', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '4875243b3b1c0d40d82abc65307e398e83363b61', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'cc92c6ea6d2ab5f59a7e793f166f2ae685f7928c', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '430b2aa64f664a6bd7cb40da53f592606c4b5308', class: {
+        return (h("button", { key: 'a49770e4411aed2b27e25e42903ccc9b29de5603', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

package/dist/collection/components/co-json-field/co-json-field.js

@@ -97,17 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '37c5b552e44d19e321bfd64a35da61e54418013c', class: {
+        return (h("div", { key: '6e303939542b1c400432876149a7f7cf94dbfad4', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '5ab03329fc4828abf624e473aef67bfa6878a4b1', class: "co-json-field__labels" }, h("label", { key: '14babf193d87564b813174f34df4ae4fc299155b', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: '635dd453ef2ed9ee720cc1c3f1c07a7b744d61ec', required: this.required })))), h("div", { key: '83763a2b5438b74da65e51bcbbdd6e6776eda45a', class: "co-json-field__field", part: "field" }, h("textarea", { key: '1f3929e95d98aca26d8f47b3fbce6c2c37aea3fa', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '1dd77538a40085b72ba6b407e88d31faa73cd8dc', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '6fb332624ab9dfa6b21af159ad3153eea4066c9a', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '77c4793e6755c159d70943be68d94dc9a8f6f82c', class: "co-json-field__labels" }, h("label", { key: 'fa060ddb64fea5a78f339cf10ff46b8bbc3f6c9c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'fd130517bb57f0b5c012f39e61cd4ef905c34b42', required: this.required })))), h("div", { key: '752bccc5c2193a81ef174415b0e22936d1729914', class: "co-json-field__field", part: "field" }, h("textarea", { key: '397b3e80d4d252c55f55d9e6c444083f8ee2a28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '8d658f97252824dce51a262c19e251b664de9c4e', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '857a97a47b5a88b0a778680329670b474ff1eac1', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'f4da415f949ee8d127eece321f4d8feecdd3a1ff', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '7e3b458f7173be6ac4fdcf7df42d3a132ab5082b', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'df90fefaedba9e8340b1fbfd19dd8350ab8e26af', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '3ba614c007e38009f7cda47be0d705d63397359f', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -313,17 +313,17 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: 'c1743a4e71ebdb84af2271962ba1b76a434bbe24', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: 'f12555c4b7e8f4f061b7a449d3cb6665c4846cda', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '4bb66de1922f388886d000342f983ab852db0045', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '9fbdc078e7dbe0af9813a91a60155c1545e7309e', class: "co-lightbox__zoom" }, h("button", { key: 'b780571cec8da08b9ae069e1ffb6be1d933c4ea1', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '05ffc5137ff964d4159fed49191c2af17abec51f', name: "minus", size: 16 })), h("button", { key: 'b3d6751bb3b81233ccfb61b9692b9d14dda3307f', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '34ffc666558698b6e8dd3c0559ed1c5372c7947b', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'a0c066dfb0cf6026b08f85821e197e2340963979', name: "plus", size: 16 }))), h("button", { key: '12f8f66333d043214c57cebb81d1a153be72f9b3', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'c60b9a9856aa62728576c356af09880ca2d7710d', name: "arrow-square-out", size: 16 })), h("button", { key: '8a7caebb371e5f509051b92a730712f6e304eac2', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: 'efcd1f9672c2fa61b74f75b25771574ec6108004', name: "x", size: 16 })))), img && (h("div", { key: 'fc99ed851d5ffd99fb09b7c98fb4d317bcaa1f2a', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '7e43afbd4e170ab2b1a818501b7e34d4147c143e', class: {
+        return (h("div", { key: 'ee47c98cd468a05ffc7536756b72818bfa9391da', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '80859431215ee33bc0480f8788a32886486d4e7c', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '09ee3dc94fdb88f66516a1d5e5f44f1f2a90d850', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '86a02fb7b0c0e92eb633d5d61464c1a8e044564c', class: "co-lightbox__zoom" }, h("button", { key: '3e83390c0b22ef8986c39dc399f04e2cad48556e', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'e4241a61696d191b262270370924ee4700949e98', name: "minus", size: 16 })), h("button", { key: '92b11da3129dfdd181b9114c613fc3624c9df41a', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'e224e703bf5902f7b72acb6428ed5ec46ace49a1', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '4216032ce75fee7e05bdbc50095ddc7037910876', name: "plus", size: 16 }))), h("button", { key: '8ec864104b0127f0d6150d91179a46b35270fb4c', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '836480f7857396b613e99abf85fedabbf73fa43a', name: "arrow-square-out", size: 16 })), h("button", { key: '736dbb247d0af9e261fa5bf21ec6113f8d40f612', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '0c45bcfb64245b5388452216204effd74482a862', name: "x", size: 16 })))), img && (h("div", { key: 'af2d7a221312f18a62895579a067e740e878caf3', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'fac630a31bf240d6ef5ffe3c85136e5534722b26', class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '461444963dde42d1d72af6bd88fe2013ab3858ee', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '3cca38f856ec367dc40596acc988875d6b334f60', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: 'a69c348080ac70da9d5af641c502e6a1f206f7dd', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '56504889f11cb56cea40aef5676ea6916aade850', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: 'f5c296f6802355140cb64b690401f12faac29faa', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: 'a0104539bcc4a9ebc4090d28636c7fae7cfcf1ae', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: '44cb0a0c644aa75c581bdd863df98590dbd0ebc3', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6642109e875532fea123fc75fe0cf0ea6129be85', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '6adef24091aeaa4df0bf92cbade32bdf9273c015', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '6a31e663231a66339621c26aba74c28e3c9b152e', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-footer/co-list-footer.js

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
+        return (h("div", { key: '8dacde70abe5f58b86003a6bb82dad4bbc4b0394', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'd6049cfd2e018323dc9426da5cc267b8ddbd3479', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '04c33cf918267dc57d6955f53be90c1aa61065a1', name: this.secondaryIcon, size: 16 }), h("span", { key: '8062a62489076b81f6dd16dc95245bee1e57826e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '26c8305842045d4ebd1c37d6fc304efa67c8329b', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '62a0cab190325e97536f72393d4a5b8accb5e9c7', name: this.primaryIcon, size: 16 }), h("span", { key: '2a7eb0c0bda8112823090f5dfdb6aa8aa6329a09' }, this.primaryLabel))), h("slot", { key: '385b7fddd09c86e8d3e0c793cf205ba9358718ec' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-item/co-list-item.js

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
+        return (h("div", { key: '5b4255d0896c4b411e4b558623d23404f9a0a099', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '778b003dc31bc196a770a7dc6c4eebe649faf8c3', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '8f2d21c6e38644a825dc7d90d03c8bb1ecdb9dbc', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '42f7f82814dea4979aa42dfc199137cadca84d50', name: this.icon, size: 18 }), h("slot", { key: '2e8b8279c24afd6d6a3377a3e6407de3a946ce2d', name: "prefix" })), h("div", { key: '441c477e26e4188bf5fc57296e64ec7394244946', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '77c6f39d6f9758dd06f8d6b3684dea9d670dc591', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '6cb1798690cd602b5d3a41259420422ec5d9f147', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: 'd514a4554ec7160e192575c019c2036bafacad93', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'ff1a1fcf77f4fcb1c8da4aa686e325609652cbb0', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: 'd449919d91bab89c6152bb506e79a89670182951' })), h("span", { key: '88003131b37470c9b922c9511c38f6e95af8c55a', class: "co-list-item__suffix" }, h("slot", { key: '2e55673f5a17d14b5194490e87a332cbce70daf6', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }