@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -2,6 +2,8 @@
   display: contents;
 }
 
+co-overlay { --co-overlay-bg: rgba(0, 0, 0, 0.16); }
+
 .co-command-search__trigger {
   display: contents;
 }
@@ -15,7 +17,7 @@
   max-height: 420px;
   background: var(--co-semantic-surface-page);
   border-radius: var(--co-border-radius-lg);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
   overflow: hidden;
   font-family: var(--co-font-family-primary);
   transform: translateY(8px) scale(0.98);
@@ -106,3 +108,163 @@
   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;
+}
+
+/* Loading */
+/* Inline loader next to the ESC chip (Cobalt co-loader, replaces the old "…"
+   that sat above the results). */
+.co-command-search__loading {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Facet chips (F3) ──────────────────────────────────────────────────── */
+.co-command-search__facet-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px var(--co-spacing-xs);
+  background: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  border-radius: var(--co-border-radius-full);
+  font-size: var(--co-font-size-12);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.co-command-search__facet-chip-label {
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-command-search__facet-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: rgba(255, 255, 255, 0.25);
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: background 0.1s ease;
+}
+
+.co-command-search__facet-chip-remove:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* ── Module tabs row (mac Spotlight style) ────────────────────────────── */
+.co-command-search__tabs {
+  display: flex;
+  align-items: center;            /* center chips so they don't stretch/clip vertically */
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-md);  /* even breathing room from the input divider + bottom border */
+  overflow-x: auto;
+  border-bottom: 1px solid var(--co-semantic-border-default);
+  /* Keep the active tab clear of the sticky "Más" chip when scrolled into view. */
+  scroll-padding-right: 104px;
+}
+/* Tabs are co-chip components. Keep them from shrinking in the scroll row. */
+.co-command-search__tab {
+  flex: 0 0 auto;
+}
+/* "Más" is pinned to the right so it is never scrolled out of reach; its opaque
+   backdrop + left fade mask the tabs scrolling underneath it. */
+.co-command-search__tab--more {
+  position: sticky;
+  right: 0;
+  padding-left: var(--co-spacing-sm);
+  background: var(--co-semantic-surface-page);
+  box-shadow: -12px 0 10px -4px var(--co-semantic-surface-page);
+}
+
+/* ── Favorites / shortcuts grid (mac Spotlight app grid) ───────────────── */
+.co-command-search__fav {
+  padding: var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-md);
+  border-bottom: 1px solid var(--co-semantic-border-default);
+}
+.co-command-search__fav-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: var(--co-spacing-xs);
+}
+/* App-style tile: transparent button (no card chrome). The colored squircle + its
+   shadow are the whole visual; only a subtle hover wash for feedback. */
+.co-command-search__fav-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-sm) var(--co-spacing-xs);
+  background: transparent;
+  border: none;
+  border-radius: var(--co-border-radius-sm);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: center;
+  min-width: 0;
+  transition: background 0.12s ease;
+}
+.co-command-search__fav-card:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.co-command-search__fav-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+/* App-icon squircle: per-tile brand color (inline style) with a white glyph and a
+   soft drop shadow for depth — the macOS dock look. */
+.co-command-search__fav-icon {
+  flex: none;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--co-border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--co-color-base-blanco, #fff);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
+}
+.co-command-search__fav-label {
+  font-size: var(--co-font-size-12);
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--co-semantic-text-default);
+  max-width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

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

@@ -1,5 +1,7 @@
 import { h } from "@stencil/core";
-import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
+import { highlightMatch } from "../../utils/normalizeText";
+import { groupItems } from "./commandSearchGroup";
+import { shouldKeepOpen, isEmptyBackspace, applyClientFilter } from "./commandSearchLogic";
 /**
  * A command palette / search component (⌘K style).
  * Opens as an overlay with a search input and filterable list of items.
@@ -16,13 +18,38 @@ export class CoCommandSearch {
         this.items = [];
         /** Empty state message when no results match */
         this.emptyMessage = 'No results found';
+        /** When true, the host supplies already-filtered, ordered items: disable
+         *  internal client filtering so fetch-as-you-type results pass through. */
+        this.async = false;
+        /** Show a loading indicator in the results area (async fetch in flight). */
+        this.loading = false;
+        /** Facet chips as JSON string: [{label:string, icon?:string}[]] */
+        this.chips = '[]';
+        /** Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row. */
+        this.tabs = '[]';
+        /** The active tab's value (the scope model key), or '' = no active tab. */
+        this.activeTab = '';
+        /** Show the "Más ▾" overflow tab. */
+        this.hasMore = false;
+        /** Label for the overflow tab. */
+        this.moreLabel = 'More';
+        /** Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].
+         *  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.handleKeyDown = (e) => {
+            // 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':
@@ -43,6 +70,14 @@ export class CoCommandSearch {
                     e.preventDefault();
                     this.close();
                     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;
+                    }
+                    break;
             }
         };
         this.handleOverlayClick = () => {
@@ -67,9 +102,34 @@ export class CoCommandSearch {
         return this.items;
     }
     get filteredItems() {
-        if (!this.query)
-            return this.parsedItems;
-        return rankByMatch(this.parsedItems, this.query, item => [item.label, item.value]);
+        return applyClientFilter(this.parsedItems, this.query, this.async);
+    }
+    get parsedChips() {
+        try {
+            const arr = typeof this.chips === 'string' ? JSON.parse(this.chips) : this.chips;
+            return Array.isArray(arr) ? arr : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedTabs() {
+        try {
+            const a = typeof this.tabs === 'string' ? JSON.parse(this.tabs) : this.tabs;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedFavorites() {
+        try {
+            const a = typeof this.favorites === 'string' ? JSON.parse(this.favorites) : this.favorites;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
     }
     /** Item label with the matched substring wrapped for highlighting. */
     renderLabel(label) {
@@ -78,6 +138,20 @@ export class CoCommandSearch {
             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
+        // sticky "Más" chip.
+        requestAnimationFrame(() => {
+            var _a;
+            const active = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.co-command-search__tab[aria-selected="true"]');
+            active === null || active === void 0 ? void 0 : active.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+        });
+    }
     onOpenChange(newVal) {
         if (newVal) {
             this.query = '';
@@ -85,7 +159,12 @@ export class CoCommandSearch {
             requestAnimationFrame(() => { var _a; return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
     }
+    /** Two-stage commit: keepOpen items emit coScopeChange only; all others emit coSelect + close. */
     selectItem(item) {
+        if (shouldKeepOpen(item)) {
+            this.coScopeChange.emit(item.value);
+            return;
+        }
         this.coSelect.emit(item.value);
         this.close();
     }
@@ -96,13 +175,21 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: 'a837e25103bc4d0b5f12510394e6faa7a10cfed0', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '68ce8b285bb6d340514c3f94e893a660e82cfd11', name: "trigger" })),
-            h("co-overlay", { key: '6e1ab3f12cc2990925f3de792f8a9147e03a9344', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'addbcba32e1a93816430a469bb656d73e1d9c720', 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: '26d15f5ce055af014fc10bd653a0e60bd76b1b6a', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '8a28ed2a0a5d006756666c21bc065fdee66bf075', name: "magnifying-glass", size: 20 }), h("input", { key: 'd29e28125dbb19d7f5e037f0f222bbd29e99b290', 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" }), h("span", { key: '73472a3e802a00e7a9a93fd567501a7105c936c1', class: "co-command-search__shortcut" }, "ESC")), h("div", { key: '3f70472cb5821c8d5a16fc9d3887d6f2920f3d89', class: "co-command-search__results", part: "results" }, items.length > 0
-                ? items.map((item, index) => (h("div", { class: {
-                        'co-command-search__item': true,
-                        'co-command-search__item--active': index === this.activeIndex,
-                    }, part: "item", onClick: () => this.selectItem(item), onMouseEnter: () => { this.activeIndex = index; } }, item.icon && h("co-icon", { name: item.icon, size: 18 }), h("span", { class: "co-command-search__item-label" }, this.renderLabel(item.label)))))
-                : h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage)))),
+            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) => {
+                    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 => {
+                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))))),
         ];
     }
     static get is() { return "co-command-search"; }
@@ -167,9 +254,10 @@ export class CoCommandSearch {
                     "resolved": "CommandItem[] | string",
                     "references": {
                         "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"
+                            "location": "import",
+                            "path": "./commandSearchGroup",
+                            "id": "src/components/co-command-search/commandSearchGroup.ts::CommandItem",
+                            "referenceLocation": "CommandItem"
                         }
                     }
                 },
@@ -204,6 +292,166 @@ export class CoCommandSearch {
                 "reflect": false,
                 "attribute": "empty-message",
                 "defaultValue": "'No results found'"
+            },
+            "async": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the host supplies already-filtered, ordered items: disable\ninternal client filtering so fetch-as-you-type results pass through."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "async",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a loading indicator in the results area (async fetch in flight)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "chips": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Facet chips as JSON string: [{label:string, icon?:string}[]]"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "chips",
+                "defaultValue": "'[]'"
+            },
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabs",
+                "defaultValue": "'[]'"
+            },
+            "activeTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active tab's value (the scope model key), or '' = no active tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab",
+                "defaultValue": "''"
+            },
+            "hasMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the \"M\u00E1s \u25BE\" overflow tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-more",
+                "defaultValue": "false"
+            },
+            "moreLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the overflow tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more-label",
+                "defaultValue": "'More'"
+            },
+            "favorites": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].\nShown as a grid at the top of the results, only while the query is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorites",
+                "defaultValue": "'[]'"
             }
         };
     }
@@ -244,11 +492,104 @@ export class CoCommandSearch {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coQueryChange",
+                "name": "coQueryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coScopeChange",
+                "name": "coScopeChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item with keepOpen=true is selected. Detail = item.value (scope model key)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coBackspaceEmpty",
+                "name": "coBackspaceEmpty",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when Backspace is pressed with an empty query, or when the scope chip \u2715 is clicked.\nDetail = current query string (always '' at emit time). Host decides: pop scope or remove last facet."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coChipRemove",
+                "name": "coChipRemove",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks \u2715 on a facet chip.\ndetail = chip index (number)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coTabSelect",
+                "name": "coTabSelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a module tab is clicked. detail = tab value; '' when the active tab is re-clicked (deselect)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coMoreTabs",
+                "name": "coMoreTabs",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the \"M\u00E1s \u25BE\" overflow tab is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "activeTab",
+                "methodName": "onActiveTabChange"
+            }, {
                 "propName": "open",
                 "methodName": "onOpenChange"
             }];

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

@@ -0,0 +1,17 @@
+/** Flatten an ordered CommandItem[] into render rows, inserting a header
+ *  whenever the section changes. `index` counts items only (drives activeIndex). */
+export function groupItems(items) {
+    const rows = [];
+    let lastSection;
+    let i = 0;
+    for (const item of items) {
+        const section = item.section;
+        if (section && section !== lastSection) {
+            rows.push({ kind: 'header', label: section });
+        }
+        lastSection = section;
+        rows.push({ kind: 'item', item, index: i });
+        i++;
+    }
+    return rows;
+}