@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
-import { initOverlayScroll } from "../../utils/overlayScroll";
-import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
+import { rankByMatch } from "../../utils/normalizeText";
 export class CoCombobox {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -25,6 +24,8 @@ export class CoCombobox {
         this.footerSecondaryLabel = 'New Tags';
         /** Options to display in the dropdown (array of objects or strings) */
         this.options = '[]';
+        /** Message shown when the filtered list is empty. */
+        this.emptyMessage = 'No results found';
         /** Currently selected values (multi-select) */
         this.value = '[]';
         /** Whether multiple values can be selected */
@@ -38,7 +39,9 @@ export class CoCombobox {
         this.isOpen = false;
         this.searchQuery = '';
         this.overflowCount = 0;
-        this.scrollTop = 0;
+        /** Foco diferido del search: @Watch corre antes del commit del render que
+         *  monta la lista (patrón co-ref-field). */
+        this.pendingFocus = false;
         this.handleTriggerClick = (e) => {
             if (this.disabled)
                 e.stopPropagation();
@@ -55,38 +58,35 @@ export class CoCombobox {
             e.stopPropagation();
             this.value = '[]';
             this.coClear.emit();
-            this.coChange.emit([]);
+            this.coChange.emit({ value: this.multiple ? [] : '', item: null });
         };
-        this.handleOptionClick = (optionValue) => {
-            const selected = [...this.selectedValues];
-            const idx = selected.indexOf(optionValue);
-            if (idx >= 0) {
-                selected.splice(idx, 1);
+        /**
+         * Handler de coChange de <co-option-list>. Misma semántica que el click
+         * de opción anterior (single: set + cierra; multiple: la primitiva ya
+         * hace el toggle y entrega el array completo) pero almacenando `value`
+         * en el MISMO formato que antes (JSON-array-string siempre — lo que
+         * espera `selectedValues`, sin tocar ese getter) y emitiendo el detail
+         * normalizado `{ value, item }`.
+         */
+        this.handleListChange = (detail) => {
+            if (this.multiple) {
+                const next = detail.value;
+                this.value = JSON.stringify(next);
+                this.coChange.emit({ value: next, item: detail.item });
             }
             else {
-                if (this.multiple) {
-                    selected.push(optionValue);
-                }
-                else {
-                    selected.length = 0;
-                    selected.push(optionValue);
-                    this.isOpen = false;
-                }
+                const next = detail.value;
+                this.value = JSON.stringify([next]);
+                this.isOpen = false;
+                this.coChange.emit({ value: next, item: detail.item });
             }
-            this.value = JSON.stringify(selected);
-            this.coChange.emit(selected);
-        };
-        this.handleRemoveOption = (e, optionValue) => {
-            e.stopPropagation();
-            const selected = this.selectedValues.filter(v => v !== optionValue);
-            this.value = JSON.stringify(selected);
-            this.coChange.emit(selected);
         };
-        this.handleSearchInput = (e) => {
-            this.searchQuery = e.target.value;
-            this.scrollTop = 0;
-            if (this.optionsContainerEl)
-                this.optionsContainerEl.scrollTop = 0;
+        /** Handler de coRemoveItem de <co-option-list> — también reusado por el
+         *  botón "x" de los chips del trigger (mismo efecto: quitar un valor). */
+        this.handleListRemove = (id) => {
+            const next = this.selectedValues.filter((v) => v !== id);
+            this.value = JSON.stringify(next);
+            this.coChange.emit({ value: next, item: { _id: id, label: id } });
         };
         this.handleFooterPrimary = () => {
             this.coFooterPrimary.emit();
@@ -95,9 +95,6 @@ export class CoCombobox {
         this.handleFooterSecondary = () => {
             this.coFooterSecondary.emit();
         };
-        this.handleOptionsScroll = (e) => {
-            this.scrollTop = e.target.scrollTop;
-        };
     }
     normalizeOptions(raw) {
         return raw.map(item => {
@@ -133,12 +130,9 @@ export class CoCombobox {
             return this.parsedOptions;
         return rankByMatch(this.parsedOptions, this.searchQuery, o => o.label);
     }
-    /** Option label with the matched substring wrapped for highlighting. */
-    renderLabel(label) {
-        const seg = this.searchQuery ? highlightMatch(label, this.searchQuery) : null;
-        if (!seg)
-            return label;
-        return [seg.pre, h("span", { class: "co-combobox__match" }, seg.match), seg.post];
+    /** Opciones filtradas client-side, mapeadas al item de co-option-list. */
+    get listItemsJson() {
+        return JSON.stringify(this.filteredOptions.map((o) => ({ _id: o.value, label: o.label, icon: o.icon })));
     }
     get displayText() {
         const selected = this.selectedValues;
@@ -164,8 +158,11 @@ export class CoCombobox {
     }
     onOpenChange(open) {
         if (open) {
+            // La lista se monta on-demand ({this.isOpen && ...}), así que la
+            // primitiva arranca fresca en cada apertura (term/scroll en cero);
+            // aquí solo se resetea el filtro client-side del host.
             this.searchQuery = '';
-            this.scrollTop = 0;
+            this.pendingFocus = true;
             this.coOpen.emit();
         }
         else {
@@ -181,26 +178,23 @@ export class CoCombobox {
         });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.osInstance) === null || _b === void 0 ? void 0 : _b.destroy();
-        this.osInstance = undefined;
     }
     componentDidRender() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.chipContainerEl) {
             (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.chipContainerEl);
         }
         this.calcOverflow();
-        // OverlayScrollbars: init when the dropdown opens, tear down when it closes.
-        // Virtual scroll keeps working — scrollTop is read from the OS viewport.
-        if (this.isOpen && this.optionsContainerEl && !this.osInstance) {
-            this.osInstance = initOverlayScroll(this.optionsContainerEl, (vp) => { this.scrollTop = vp.scrollTop; });
-        }
-        else if (!this.isOpen && this.osInstance) {
-            this.osInstance.destroy();
-            this.osInstance = undefined;
+        // Corre después del commit: optionListEl ya apunta a la lista recién
+        // montada; isConnected descarta refs stale de aperturas anteriores.
+        // focusSearch() reintenta hasta que el popover sea visible (no-op si
+        // la lista no es searchable).
+        if (this.pendingFocus && ((_c = this.optionListEl) === null || _c === void 0 ? void 0 : _c.isConnected)) {
+            this.pendingFocus = false;
+            this.optionListEl.focusSearch();
         }
     }
     calcOverflow() {
@@ -229,37 +223,16 @@ export class CoCombobox {
             this.overflowCount = hiddenCount;
         }
     }
-    getVirtualSlice(items) {
-        const { ITEM_HEIGHT, VIEWPORT_ITEMS, OVERSCAN } = CoCombobox;
-        const total = items.length;
-        const totalHeight = total * ITEM_HEIGHT;
-        const startIdx = Math.max(0, Math.floor(this.scrollTop / ITEM_HEIGHT) - OVERSCAN);
-        const endIdx = Math.min(total, startIdx + VIEWPORT_ITEMS + OVERSCAN * 2);
-        const offsetY = startIdx * ITEM_HEIGHT;
-        return { totalHeight, startIdx, endIdx, offsetY };
-    }
     render() {
-        const selected = this.selectedValues;
-        const options = this.filteredOptions;
-        return (h("div", { key: '335a823bd69e0d57af567bd92befdc31b2449612', class: {
+        return (h("div", { key: '49723329c7a66fc87bac2280c36993aa7488e723', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
-                'co-combobox--filled': this.hasValue,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '690ffddf411810f8fd5828914a157b2e888d2034', class: "co-combobox__labels" }, this.label && h("label", { key: '6a7b3f9cc3761e43b702d4086553bb0e3039360d', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: 'acc1ca3c620d928bdadb17b42906f46fa9e09581', required: this.required })), this.secondaryLabel && (h("span", { key: 'b5d6b6d6acbd12e866a836a5545dbc69c8f885f0', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'e7d3d4fcbc8e5cb70da61c046ffbb7b3611e0c6a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'cc07aefc63d82777d8caf01929a8d7c356bf5007', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '06690ca640c14bfbbb5e34ea8a1e85efc7fa5640', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '8c93b09f144f23fabaead4286b4910ad2da676cc', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => this.handleRemoveOption(e, opt.value) }))))) : (h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a32ea355689787cf5e4175964284512bd10041f7', class: "co-combobox__labels" }, this.label && h("label", { key: '2ec23463de4b263fbbf3669fe7c6930719b97572', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '0fab4c10366d9f773eeef6912904a43e376685b5', required: this.required })), this.secondaryLabel && (h("span", { key: '3117d08e3d61799b840b6e12fd9bce7ed0eb74e8', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '28d93c37ef62f757ae27f25621036aac8bb3e752', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6e390e5d89d6e26abf75d3d8619bacb3e479388f', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: 'f0df056dcd2a6b6990e920efb88daadde3e1fee1', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: 'b25c9da054983f6d572f7d63ac063a9735871753', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'a01c9e41462e5d449b1dccfcd9e174dabc88f296', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'f832fdba50c709bf7b53f2d3271b68f8ad51f7fc', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'fc4f790ad7842769d5a0e0a7655da17ef57fdd72', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '9280e1d22d8bfa69c1cc40abdd926ae91751db67', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '3724c9e0424fc971a2bd4f509e66a658d678d3ce', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (h("div", { key: 'dc05b68524224a2132f328537e653bf1923e1974', class: "co-combobox__search", part: "search" }, h("co-icon", { key: '550f7cd1af9076fd7ed6fea1621b0b698d7be40b', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), h("input", { key: '5a7c2544d673ccb3c82b8b4ba02351664fb017f6', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), h("div", { key: '621fd43f35764335737d9d572fa6f5f5e6673959', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
-            const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
-            return (h("div", { class: "co-combobox__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(option => {
-                const isSelected = selected.includes(option.value);
-                return (h("div", { class: {
-                        'co-combobox__option': true,
-                        'co-combobox__option--selected': isSelected,
-                    }, onClick: () => this.handleOptionClick(option.value), part: "option" }, h("div", { class: "co-combobox__option-content" }, option.icon && (h("div", { class: "co-combobox__option-icon-wrapper" }, h("co-icon", { name: option.icon, size: 20, class: "co-combobox__option-icon" }))), h("span", { class: "co-combobox__option-label" }, this.renderLabel(option.label))), isSelected && this.multiple && (h("button", { class: "co-combobox__option-remove", type: "button", tabIndex: -1, onClick: (e) => this.handleRemoveOption(e, option.value), "aria-label": `Remove ${option.label}` }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.multiple && (h("co-icon", { name: "check", size: 16, class: "co-combobox__option-check" }))));
-            }))));
-        })()), this.showFooter && (h("co-list-footer", { key: '6ae233e2944648a21c09c3ef252cb89b05be86e3', secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '6896e1e0ae6f7a29f9b3916759f57adc65c4ba4b', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'a4e65d03cf076985fd72c835143718fb5e3b39ba', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: '83ed79b8f7cd06824619e5a337d3dd373c098f37', class: "co-combobox__helper-text" }, this.helperText)))));
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'ac7ff27f3d4149260f441b3b81fba8b92d49bedf', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'ad11ddb7806a2b1cfe044f6d1773ac9e19c5afb9', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: '634a149b26996d648cb88095e80531314d0c13dd', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '8ac8d146143869b39c6f3908a3580220dab41642', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '82f61579e15806878fa2b0e3797e20b77a8d5465', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: 'b697324b29132b95d7c9d593f36452052933f22e', ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '151517f62b1188dd7ea3a3c53f69be9260e2cbd8', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'd6b65a3aa77340142038818d43cce73c39914897', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'e77f399023eab01cb6de4dd356a9dc897da58755', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'cad08054732494180772c881622362e9d592df26', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -538,6 +511,26 @@ export class CoCombobox {
                 "attribute": "options",
                 "defaultValue": "'[]'"
             },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when the filtered list is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No results found'"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -663,8 +656,7 @@ export class CoCombobox {
         return {
             "isOpen": {},
             "searchQuery": {},
-            "overflowCount": {},
-            "scrollTop": {}
+            "overflowCount": {}
         };
     }
     static get events() {
@@ -676,11 +668,11 @@ export class CoCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the selection changes"
+                    "text": "Emitted when the selection changes. `item` is the picked option (the\noption-list's native `{ _id, label }` shape); `null` on clear."
                 },
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "{ value: string[] | string; item: { _id: string; label: string } | null }",
+                    "resolved": "{ value: string | string[]; item: { _id: string; label: string; } | null; }",
                     "references": {}
                 }
             }, {
@@ -771,6 +763,3 @@ export class CoCombobox {
             }];
     }
 }
-CoCombobox.ITEM_HEIGHT = 34; // 32px height + 2px gap
-CoCombobox.VIEWPORT_ITEMS = 8; // visible items
-CoCombobox.OVERSCAN = 3; // extra items above/below

package/dist/collection/components/co-command-search/co-command-search.css

@@ -74,66 +74,8 @@ co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
   padding: var(--co-spacing-xs) 0;
 }
 
-.co-command-search__item {
-  display: flex;
-  align-items: center;
-  gap: var(--co-spacing-sm);
-  padding: var(--co-spacing-sm) var(--co-spacing-lg);
-  cursor: pointer;
-  font-size: var(--co-font-size-14);
-  color: var(--co-semantic-text-default);
-  transition: background 0.08s ease;
-}
-
-.co-command-search__item:hover,
-.co-command-search__item--active {
-  background: var(--co-semantic-surface-hover);
-}
-
-.co-command-search__item-label {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.co-command-search__match {
-  font-weight: 700;
-}
-
-/* Empty */
-.co-command-search__empty {
-  padding: var(--co-spacing-2xl) var(--co-spacing-lg);
-  text-align: center;
-  font-size: var(--co-font-size-14);
-  color: var(--co-semantic-text-muted);
-}
-
-/* Section header */
-.co-command-search__section {
-  padding: var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-xs);
-  font-size: var(--co-font-size-12);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--co-semantic-text-muted);
-}
-
-/* Item text column (label + subtitle stacked) */
-.co-command-search__item-text {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.co-command-search__item-subtitle {
-  font-size: var(--co-font-size-12);
-  color: var(--co-semantic-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+/* The results list itself (grouping, rows, highlight, empty/loading) is
+   co-option-list's own look & feel now — see co-option-list.css. */
 
 /* Loading */
 /* Inline loader next to the ESC chip (Cobalt co-loader, replaces the old "…"

package/dist/collection/components/co-command-search/co-command-search.js

@@ -1,6 +1,4 @@
 import { h } from "@stencil/core";
-import { highlightMatch } from "../../utils/normalizeText";
-import { groupItems } from "./commandSearchGroup";
 import { shouldKeepOpen, isEmptyBackspace, applyClientFilter } from "./commandSearchLogic";
 /**
  * A command palette / search component (⌘K style).
@@ -37,34 +35,24 @@ export class CoCommandSearch {
          *  Shown as a grid at the top of the results, only while the query is empty. */
         this.favorites = '[]';
         this.query = '';
-        this.activeIndex = 0;
         this.handleInput = (e) => {
             this.query = e.target.value;
-            this.activeIndex = 0;
-            this.coQueryChange.emit(this.query);
+            this.coSearch.emit(this.query);
         };
         this.handleKeyDown = (e) => {
+            var _a, _b;
             // Backspace with empty query → notify host to pop scope or last facet-chip
             if (isEmptyBackspace(e.key, this.query)) {
                 e.preventDefault();
                 this.coBackspaceEmpty.emit(this.query);
                 return;
             }
-            const items = this.filteredItems;
             switch (e.key) {
                 case 'ArrowDown':
-                    e.preventDefault();
-                    this.activeIndex = (this.activeIndex + 1) % items.length;
-                    break;
                 case 'ArrowUp':
-                    e.preventDefault();
-                    this.activeIndex = (this.activeIndex - 1 + items.length) % items.length;
-                    break;
                 case 'Enter':
                     e.preventDefault();
-                    if (items[this.activeIndex]) {
-                        this.selectItem(items[this.activeIndex]);
-                    }
+                    (_a = this.optionListEl) === null || _a === void 0 ? void 0 : _a.handleKey(e);
                     break;
                 case 'Escape':
                     e.preventDefault();
@@ -72,14 +60,16 @@ export class CoCommandSearch {
                     break;
                 case 'Tab':
                     e.preventDefault();
-                    if (items.length > 0) {
-                        this.activeIndex = e.shiftKey
-                            ? (this.activeIndex - 1 + items.length) % items.length
-                            : (this.activeIndex + 1) % items.length;
-                    }
+                    (_b = this.optionListEl) === null || _b === void 0 ? void 0 : _b.handleKey(new KeyboardEvent('keydown', { key: e.shiftKey ? 'ArrowUp' : 'ArrowDown' }));
                     break;
             }
         };
+        /** Two-stage commit intacto: keepOpen → coScopeChange; resto → coSelect + close. */
+        this.handleListPick = (id) => {
+            const item = this.filteredItems.find((it) => it.value === id);
+            if (item)
+                this.selectItem(item);
+        };
         this.handleOverlayClick = () => {
             this.close();
         };
@@ -131,17 +121,9 @@ export class CoCommandSearch {
             return [];
         }
     }
-    /** Item label with the matched substring wrapped for highlighting. */
-    renderLabel(label) {
-        const seg = this.query ? highlightMatch(label, this.query) : null;
-        if (!seg)
-            return label;
-        return [seg.pre, h("span", { class: "co-command-search__match" }, seg.match), seg.post];
-    }
     onActiveTabChange(newVal) {
         if (newVal) {
             this.query = '';
-            this.activeIndex = 0;
         }
         // The active tab may be appended past the visible width (e.g. a model picked
         // from "Más"). Scroll it into view; scroll-padding-right keeps it clear of the
@@ -155,7 +137,6 @@ export class CoCommandSearch {
     onOpenChange(newVal) {
         if (newVal) {
             this.query = '';
-            this.activeIndex = 0;
             requestAnimationFrame(() => { var _a; return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
     }
@@ -175,21 +156,17 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '7489dba63daa21b04e7fd12ba0923d3f5452a651', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '86bacbf98e5c7b2079d0db46862c60ee4273756d', name: "trigger" })),
-            h("co-overlay", { key: 'e6406e9eb24dfff1f1a8b78267b84fb2e305b9bd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '9cf1f70ac226d3802f3f1ffaf77d1633d7c24f2a', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: 'a2508671dc39fb5e90455f9ee4391e52e7739a29', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '37051efc28fc3412eb24b53cd4891b98a3b8c2cc', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            h("div", { key: '6e45f5a53f39f516cc8a3eb43180b4c6f6c413fd', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '0dbbb33bf84b9a0fcf94d71802b87a2d0d240522', name: "trigger" })),
+            h("co-overlay", { key: 'b7f46dde81f6f3462b550c3ccde29388604f9404', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '745f5b7e2a31897b88303deb6b49ba3787b7c7b8', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: '90f367e679c3e971cbe7823e766152cb02b2a018', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: 'f084dde02745550de0ebe92840f4a3f62e7eb543', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '33f8024e71b902b954349b539dc8a6b1ea4e8a64', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (h("co-loader", { key: '46eae7fb379621808f0e7a78e3e15f2cf0742fa6', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '1505eaa1ccde46d28475b7ded587732a302dfef6', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: '4557dc1c0f0f543238deeaf37731594064b7a946', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: 'd00091dd6ba08d3924a00965b769eec12bade9da', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list" }), this.loading && (h("co-loader", { key: 'b7c60019d203f7575535a0d12525c55441ba9f69', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '6bb4a4c2745b060f5fc118ce42eeb233709e6cde', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: 'bc77af8a7d44a3156af87c1e0fb16392acca7aa8', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (h("co-chip", { key: '9253d7fc43c7f320af6af274dce8eca6d8543186', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: '5ae57716cf3337623c111d8b5f9fb941536324a6', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '7e11f7b777c590b0f728240e0fbea1808d0c07a5', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '67e2ba4b3a500522c7d89429359d5bd947096d8d', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
-                ? groupItems(items).map(row => row.kind === 'header'
-                    ? h("div", { class: "co-command-search__section", part: "section", role: "presentation" }, row.label)
-                    : (h("div", { class: {
-                            'co-command-search__item': true,
-                            'co-command-search__item--active': row.index === this.activeIndex,
-                        }, part: "item", role: "option", id: 'co-cmd-opt-' + row.index, "aria-selected": row.index === this.activeIndex ? 'true' : 'false', onClick: () => this.selectItem(row.item), onMouseEnter: () => { this.activeIndex = row.index; } }, row.item.icon && h("co-icon", { name: row.item.icon, size: 18 }), h("span", { class: "co-command-search__item-text" }, h("span", { class: "co-command-search__item-label" }, this.renderLabel(row.item.label)), row.item.subtitle && (h("span", { class: "co-command-search__item-subtitle" }, row.item.subtitle))))))
-                : !this.loading && (h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage))))),
+            }), this.hasMore && (h("co-chip", { key: 'ac6931618eacc84c32006f53c8e0c5bbfec3d929', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'cd70456639c4e41268ddfff11f921c7a1dbede7e', class: "co-command-search__results", part: "results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '024125d66406fb564e972f207f10972e7bbd944f', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '9b165c53215a7818efe9ca3ee7d601df25f03e7e', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), h("co-option-list", { key: 'f1f97b1606aaafab94cc8f9d2ab66ce4948cae0b', ref: (el) => (this.optionListEl = el), items: JSON.stringify(items.map((it) => ({
+                    _id: it.value, label: it.label, icon: it.icon, description: it.subtitle, group: it.section,
+                    disabled: it.disabled,
+                }))), autoHighlight: true, highlightMatches: true, highlightTerm: this.query, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListPick(e.detail.item._id) })))),
         ];
     }
     static get is() { return "co-command-search"; }
@@ -254,10 +231,9 @@ export class CoCommandSearch {
                     "resolved": "CommandItem[] | string",
                     "references": {
                         "CommandItem": {
-                            "location": "import",
-                            "path": "./commandSearchGroup",
-                            "id": "src/components/co-command-search/commandSearchGroup.ts::CommandItem",
-                            "referenceLocation": "CommandItem"
+                            "location": "local",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
                         }
                     }
                 },
@@ -457,8 +433,7 @@ export class CoCommandSearch {
     }
     static get states() {
         return {
-            "query": {},
-            "activeIndex": {}
+            "query": {}
         };
     }
     static get events() {
@@ -493,8 +468,8 @@ export class CoCommandSearch {
                     "references": {}
                 }
             }, {
-                "method": "coQueryChange",
-                "name": "coQueryChange",
+                "method": "coSearch",
+                "name": "coSearch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -59,7 +59,8 @@ co-data-table {
 
 .co-data-table__th {
   position: relative;
-  padding: var(--co-spacing-md);
+  height: 40px; /* Figma header 40 — altura dura, centrado por flex/vertical-align */
+  padding: 0 var(--co-spacing-md);
   background: var(--co-color-base-blanco);
   border-bottom: 1px solid var(--co-color-opacity-negro-8);
   border-right: 1px solid var(--co-color-opacity-negro-8);
@@ -69,6 +70,7 @@ co-data-table {
   font-weight: 500;
   color: var(--co-semantic-text-default);
   letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1; /* Figma Btn3/Medium lh 1 — cierra el header en 40px */
   white-space: nowrap;
   overflow: hidden;
   box-sizing: border-box;
@@ -83,7 +85,11 @@ co-data-table {
 }
 
 .co-data-table__th--sortable:hover {
-  background: var(--co-semantic-surface-hover);
+  /* Layer the hover tint OVER the cell's opaque base (--co-color-base-blanco,
+     from .co-data-table__th) via background-image instead of REPLACING it with
+     the translucent tint. The header is sticky-top, so a see-through background
+     would let rows scrolled under it bleed through on hover. */
+  background-image: linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover));
 }
 
 /* ─── HEADER CONTENT ────────────────────────────────────────── */
@@ -118,6 +124,35 @@ co-data-table {
   color: var(--co-semantic-text-default);
 }
 
+/* ─── COLUMN FILTER ICON (hover-reveal como el pin; --active/--indirect persistentes) ── */
+.co-data-table__filter-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--co-color-gray-300);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.co-data-table__th:hover .co-data-table__filter-icon {
+  opacity: 1;
+}
+
+.co-data-table__filter-icon:hover {
+  color: var(--co-semantic-text-default);
+}
+
+.co-data-table__filter-icon--active {
+  opacity: 1;
+  color: var(--co-color-primary-azul);
+}
+
+.co-data-table__filter-icon--indirect {
+  opacity: 0.45;
+  color: var(--co-semantic-text-muted);
+}
+
 .co-data-table__th-label {
   flex: 1;
   overflow: hidden;
@@ -167,8 +202,10 @@ co-data-table {
   width: 48px;
   min-width: 48px;
   max-width: 48px;
-  padding: var(--co-spacing-md);
+  /* Solo padding horizontal: el alto lo fijan header (40) y fila (48). */
+  padding: 0 var(--co-spacing-md);
   text-align: center;
+  line-height: 0; /* el co-checkbox inline mete baseline-gap y estira el header a 43 */
 }
 
 /* ─── STICKY COLUMNS ───────────────────────────────────────── */
@@ -254,6 +291,7 @@ co-data-table {
   border-right: 1px solid var(--co-color-opacity-negro-8);
   vertical-align: middle;
   font-size: var(--co-font-size-12);
+  font-weight: var(--co-font-weight-medium); /* Figma Btn4/Medium para contenido de celda */
   color: var(--co-semantic-text-default);
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
@@ -304,7 +342,7 @@ co-data-table {
   flex: 1;
   min-height: 280px;
   padding: var(--co-spacing-3xl) var(--co-spacing-lg);
-  gap: var(--co-spacing-sm);
+  gap: var(--co-spacing-lg) /* Figma: 16 entre título y subtítulo */;
 }
 
 .co-data-table__empty-icon {
@@ -320,11 +358,11 @@ co-data-table {
 }
 
 .co-data-table__empty-title {
-  font-size: var(--co-font-size-16);
-  font-weight: 600;
+  font-size: var(--co-font-size-24); /* Figma H5/Medium */
+  font-weight: var(--co-font-weight-medium, 500);
+  line-height: 1.25;
   color: var(--co-semantic-text-default);
   letter-spacing: -0.03em;
-  margin: 0;
 }
 
 .co-data-table__empty-message {
@@ -332,7 +370,8 @@ co-data-table {
   font-weight: 400;
   color: var(--co-semantic-text-secondary);
   margin: 0;
-  max-width: 360px;
+  max-width: 538px /* Figma */;
+  line-height: 1.25;
 }
 
 .co-data-table__empty-action {