@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -1,8 +1,14 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { initOverlayScroll } from "../../utils/overlayScroll";
+import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
 export class CoCombobox {
     constructor() {
-        /** Placeholder text */
-        this.placeholder = 'Placeholder';
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
+        /** Placeholder text. Empty by default — a literal "Placeholder" leaking into
+         *  product UIs when the consumer forgets the prop is worse than no hint. */
+        this.placeholder = '';
         /** Disabled state */
         this.disabled = false;
         /** Show clear button when value is selected */
@@ -23,12 +29,17 @@ export class CoCombobox {
         this.value = '[]';
         /** Whether multiple values can be selected */
         this.multiple = true;
+        /** Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48 */
+        this.size = 'md';
+        /** Validation status */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.isOpen = false;
         this.searchQuery = '';
         this.overflowCount = 0;
         this.scrollTop = 0;
         this.handleTriggerClick = (e) => {
-            console.log('[co-combobox] handleTriggerClick, disabled:', this.disabled);
             if (this.disabled)
                 e.stopPropagation();
         };
@@ -120,8 +131,14 @@ export class CoCombobox {
     get filteredOptions() {
         if (!this.searchQuery)
             return this.parsedOptions;
-        const q = this.searchQuery.toLowerCase();
-        return this.parsedOptions.filter(o => o.label.toLowerCase().includes(q));
+        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];
     }
     get displayText() {
         const selected = this.selectedValues;
@@ -139,6 +156,12 @@ export class CoCombobox {
     get hasValue() {
         return this.selectedValues.length > 0;
     }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle', success: 'check-circle', warning: 'warning', info: 'info',
+        };
+        return map[this.status] || null;
+    }
     onOpenChange(open) {
         if (open) {
             this.searchQuery = '';
@@ -158,8 +181,10 @@ export class CoCombobox {
         });
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_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;
@@ -168,6 +193,15 @@ export class CoCombobox {
             (_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;
+        }
     }
     calcOverflow() {
         if (!this.multiple || !this.chipContainerEl)
@@ -207,24 +241,25 @@ export class CoCombobox {
     render() {
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: 'e77d4338436c01bf4aeac90a08ec31c60c320e56', class: {
+        return (h("div", { key: '335a823bd69e0d57af567bd92befdc31b2449612', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 'co-combobox--filled': this.hasValue,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '60f9e0522a8dee4833bbfa564fb55e2bd4b924eb', class: "co-combobox__labels" }, this.label && h("label", { key: '070a1111f508e299313d90364920aca7c2c00062', class: "co-combobox__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '77544e3e6783ae2b7e4c51fdf2c614b43db3df18', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '69b76f964e92406025c94c44aa639c7d128643ee', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4ea12edc1d79d609379fe293f7807af3c4a31c20', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '7c9053e320c472bd67a621487de2b456714de2b7', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '1c9e01f82203801fd4e11c3d01448f0caa3d9cd5', 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: {
+                [`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: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'dba6a9ca703aa80b0b47b3ca132a3ad4364a5968', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '2b1f12c41ee1eb95a59dc763b6d1c23f191543aa', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'd34a19853a49618668609c963bbf1d6c79170859', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'bc0be278e45f1a4be653f294f4fcea5253491653', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '0a346246fb89f71f1b55e68b102c6d670d2d5e17', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (h("div", { key: '5c7134c5a68402e62b050d6a1ac43bfa110232b4', class: "co-combobox__search", part: "search" }, h("co-icon", { key: '4533ade5d31966b24d6f3f57d32fefe711f2ee5f', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), h("input", { key: 'edbfb2c18dbba3416410a4bbb67dfffa962eeb57', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), h("div", { key: '6734495aca88397e2874e5dda5252bda2a96a5ca', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
+            } }, 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" }, h("div", { class: "co-combobox__option-icon-wrapper" }, h("co-icon", { name: option.icon || 'circle', size: 20, class: "co-combobox__option-icon" })), h("span", { class: "co-combobox__option-label" }, 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" }))));
+                    }, 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("div", { key: 'd618d08c25c1f2d1d04b9e7b19df9b01d79f7002', class: "co-combobox__footer", part: "footer" }, h("button", { key: '950ab40c71a96de34f339859b9f69397ad69b1c3', class: "co-combobox__footer-btn co-combobox__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { key: '89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d', name: "plus", size: 16 }), h("span", { key: '167aadfbcae4abccf7e35f2b32e0893f75a495f6' }, this.footerSecondaryLabel)), h("button", { key: '92778f91ff795978396c3b99b7f1900645a51cf7', class: "co-combobox__footer-btn co-combobox__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { key: '31c26c2ee563b10948313d750cfce00e5cf47a9f', name: "plus", size: 16 }), h("span", { key: '4860a6e7399596dd28ad3e0e9c577a1e93ece861' }, this.footerPrimaryLabel))))))));
+        })()), 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)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -259,6 +294,26 @@ export class CoCombobox {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -290,13 +345,13 @@ export class CoCombobox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder text"
+                    "text": "Placeholder text. Empty by default \u2014 a literal \"Placeholder\" leaking into\nproduct UIs when the consumer forgets the prop is worse than no hint."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Placeholder'"
+                "defaultValue": "''"
             },
             "disabled": {
                 "type": "boolean",
@@ -523,6 +578,26 @@ export class CoCombobox {
                 "attribute": "multiple",
                 "defaultValue": "true"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "helperText": {
                 "type": "string",
                 "mutable": false,
@@ -541,6 +616,46 @@ export class CoCombobox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "helper-text"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
             }
         };
     }
@@ -571,7 +686,7 @@ export class CoCombobox {
             }, {
                 "method": "coOpen",
                 "name": "coOpen",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
@@ -586,7 +701,7 @@ export class CoCombobox {
             }, {
                 "method": "coClose",
                 "name": "coClose",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {

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);
@@ -95,6 +97,10 @@
   text-overflow: ellipsis;
 }
 
+.co-command-search__match {
+  font-weight: 700;
+}
+
 /* Empty */
 .co-command-search__empty {
   padding: var(--co-spacing-2xl) var(--co-spacing-lg);
@@ -102,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;
+}