@prolibu-suite/cobalt-core 0.9.0 → 0.9.2

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-range-picker/co-date-range-picker.js

@@ -1039,7 +1039,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }
@@ -1060,7 +1060,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }

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-drawer/co-drawer.css

@@ -180,7 +180,9 @@
   flex-shrink: 0;
   border-bottom: 1px solid var(--co-semantic-border-default);
 }
-.co-drawer__tabs:empty { display: none; }
+/* `:empty` can't detect slotted content (the <slot> is itself a child, so the
+   wrapper is never empty) — JS slotchange drives this class. */
+.co-drawer__tabs--empty { display: none; }
 
 /* ─── Body ────────────────────────────────────────────────── */
 .co-drawer__body {
@@ -247,7 +249,8 @@
   border-top: 1px solid var(--co-semantic-border-default);
   flex-shrink: 0;
 }
-.co-drawer__footer:empty { display: none; }
+/* Same as tabs: `:empty` never matches a wrapper that holds a <slot>. */
+.co-drawer__footer--empty { display: none; }
 
 /* Loading overlay is rendered by <co-loader overlay> in the drawer body. */
 

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { slotHasContent } from "../../utils/slotContent";
 /**
  * @slot header  - Custom header content (overrides `heading` prop). Receives close button next to it.
  * @slot tabs    - Optional row under the header (e.g. <co-tab-group>).
@@ -33,6 +34,19 @@ export class CoDrawer {
         this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
+        /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
+        this.hasFooter = false;
+        this.hasTabs = false;
+        this.hasHeaderSlot = false;
+        this.handleFooterSlotChange = (e) => {
+            this.hasFooter = slotHasContent(e);
+        };
+        this.handleTabsSlotChange = (e) => {
+            this.hasTabs = slotHasContent(e);
+        };
+        this.handleHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = slotHasContent(e);
+        };
         this.handleOverlayClose = () => {
             if (this.closeOnOverlay)
                 this.coClose.emit();
@@ -69,6 +83,27 @@ export class CoDrawer {
             }
         };
     }
+    /**
+     * The internal `<h2 id="co-drawer-heading">` is the FALLBACK content of the
+     * header slot. When a consumer fills that slot the h2 stops being RENDERED,
+     * but it stays in the shadow tree still carrying the `heading` prop's text —
+     * so the old hardcoded `aria-labelledby="co-drawer-heading"` named the dialog
+     * from content nobody can see, and named it with the EMPTY string in the
+     * common case where a consumer slots a header and sets no `heading` at all.
+     * Either way the visible header never became the accessible name.
+     *
+     * - Slotted header → label from the wrapper that CONTAINS the slot. Accessible
+     *   name computation walks the flattened tree, so the consumer's own header
+     *   text becomes the name (same shape Shoelace uses for its dialog label).
+     * - No slot, `heading` set → the internal h2, which is the tightest label.
+     * - Neither → omit, so the dialog degrades to a plain "dialog" instead of
+     *   advertising a label that resolves to empty text.
+     */
+    get labelledBy() {
+        if (this.hasHeaderSlot)
+            return 'co-drawer-header-content';
+        return this.heading ? 'co-drawer-heading' : undefined;
+    }
     onOpenChange(next, prev) {
         if (next && !prev)
             this.coOpen.emit();
@@ -93,7 +128,7 @@ export class CoDrawer {
                 'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": this.labelledBy, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content", id: "co-drawer-header-content" }, h("slot", { name: "header", onSlotchange: this.handleHeaderSlotChange }, 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': true, 'co-drawer__tabs--empty': !this.hasTabs }, part: "tabs" }, h("slot", { name: "tabs", onSlotchange: this.handleTabsSlotChange })), 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': true, 'co-drawer__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
         if (this.modeless)
             return aside;
         return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));
@@ -334,6 +369,13 @@ export class CoDrawer {
             }
         };
     }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "hasTabs": {},
+            "hasHeaderSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coClose",

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-emoji-picker/co-emoji-picker.css

@@ -0,0 +1,290 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+/* Alto de celda/fila. DEBE coincidir con ROW_HEIGHT de emojiPickerLogic.ts:
+   la virtualización posiciona las filas con `row * ROW_HEIGHT`, así que si esto
+   se desincroniza la grilla se desalinea del scroll. */
+.co-emoji-picker {
+  --co-emoji-picker-cell: 36px;
+  /* Sobrescrito inline por la prop `columns`. */
+  --co-emoji-picker-columns: 8;
+
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--co-emoji-picker-columns) * var(--co-emoji-picker-cell) + 2 * var(--co-spacing-sm2));
+  box-sizing: border-box;
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+}
+
+/* ── Buscador ────────────────────────────────────────────── */
+.co-emoji-picker__search {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  margin: var(--co-spacing-sm2) var(--co-spacing-sm2) 0;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
+  border-radius: var(--co-border-radius-xs);
+  box-sizing: border-box;
+  color: var(--co-semantic-text-muted);
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__search:focus-within {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  padding: var(--co-spacing-xxs) 0;
+}
+
+.co-emoji-picker__input::placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ── Selector de tono de piel ────────────────────────────── */
+.co-emoji-picker__tones {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.co-emoji-picker__tone-toggle,
+.co-emoji-picker__tone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__tone-toggle:hover,
+.co-emoji-picker__tone:hover {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__tone-toggle:focus-visible,
+.co-emoji-picker__tone:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__tone--selected {
+  background: var(--co-semantic-surface-secondary);
+}
+
+/* Fila desplegable. Va absoluta para no re-maquetar la barra del buscador al
+   abrirse (el input no cambia de ancho). */
+.co-emoji-picker__tone-row {
+  position: absolute;
+  top: calc(100% + var(--co-spacing-xs));
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-xxs);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  box-shadow: var(--co-shadow-lg);
+}
+
+/* ── Strip de categorías ─────────────────────────────────── */
+.co-emoji-picker__categories {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-sm2) var(--co-spacing-sm2) var(--co-spacing-xs);
+}
+
+.co-emoji-picker__category {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  color: var(--co-semantic-text-muted);
+  cursor: pointer;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__category:hover {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__category--active {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-secondary);
+}
+
+.co-emoji-picker__category:focus-visible {
+  outline: none;
+  color: var(--co-semantic-text-default);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+/* ── Scrollport de la grilla ─────────────────────────────── */
+.co-emoji-picker__scroll {
+  position: relative;
+  /* 8 filas visibles. El host lo puede ajustar con --co-emoji-picker-height. */
+  height: var(--co-emoji-picker-height, calc(8 * var(--co-emoji-picker-cell)));
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 var(--co-spacing-sm2);
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--co-semantic-border-default) transparent;
+  outline: none;
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar-thumb {
+  background: var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-full);
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Sizer: reserva el alto TOTAL del dataset para que la barra de scroll sea
+   real; la ventana renderizada se desplaza por transform. */
+.co-emoji-picker__sizer {
+  position: relative;
+  width: 100%;
+}
+
+.co-emoji-picker__window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  will-change: transform;
+}
+
+/* ── Filas y celdas ──────────────────────────────────────── */
+.co-emoji-picker__section {
+  display: flex;
+  align-items: flex-end;
+  height: var(--co-emoji-picker-cell);
+  padding-bottom: var(--co-spacing-xs);
+  box-sizing: border-box;
+  font-size: var(--co-font-size-11);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--co-font-letter-spacing-caption, normal);
+  color: var(--co-semantic-text-muted);
+  /* Una sola línea: el nombre de categoría largo se recorta, nunca hace
+     scroll horizontal ni empuja la grilla. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-emoji-picker__row {
+  display: flex;
+  height: var(--co-emoji-picker-cell);
+}
+
+.co-emoji-picker__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--co-emoji-picker-cell);
+  height: var(--co-emoji-picker-cell);
+  flex: 0 0 var(--co-emoji-picker-cell);
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  cursor: pointer;
+  transition: background var(--co-motion-duration-instant) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+/* El hover es puramente CSS (no toca estado): el resaltado por teclado
+   (--active) y el del mouse son señales distintas y pueden coexistir. */
+.co-emoji-picker__cell:hover,
+.co-emoji-picker__cell--active {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__cell:focus-visible {
+  outline: none;
+  background: var(--co-semantic-surface-hover);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__cell:active {
+  transform: scale(0.92);
+}
+
+.co-emoji-picker__glyph {
+  /* Fuentes de emoji del SO. La primaria (Geist) no trae glifos de emoji y
+     dejaría cuadros vacíos en Windows/Linux, y el sistema de tokens todavía no
+     define una familia de emoji: se expone como var themeable con el stack del
+     SO de fallback, así que el día que exista --co-font-family-emoji este CSS
+     la toma sin tocar nada. */
+  font-family: var(
+    --co-font-family-emoji,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Noto Color Emoji',
+    'Segoe UI Symbol',
+    sans-serif
+  );
+  font-size: var(--co-font-size-22);
+  line-height: 1;
+  /* El glifo puede pasarse del alto de línea nominal y desalinear la fila. */
+  display: block;
+}
+
+/* ── Vacío ───────────────────────────────────────────────── */
+.co-emoji-picker__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  height: 100%;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-13);
+  text-align: center;
+}