@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -24,6 +24,8 @@ export class CoColorPicker {
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
         /**
          * Preset colors as a JSON stringified array of `{ name, value }` objects
          * or plain hex strings. When set programmatically, accepts an actual array.
@@ -80,10 +82,10 @@ export class CoColorPicker {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: 'e3c7fbb9337289e5cece7837c07e517f2ab09075', class: `co-color-picker ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'e7bf0c2043f7e6cad9b48712b28ca15b7a87cb0a', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'e71de1705a30b8ad9b93d7412527a5b6430118bc', required: this.required }))), h("co-popover", { key: '66494d41499b979b35eaaaab04f05ff7b7bc80d0', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f7997ccff490d2dac5fa106f088e073b93e95a52', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '5e58789e513c913207d39574c47e044177701e49', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'e7cab4ba473d947c379f09f6657df1d3aeb37c26', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '6ac90802649cfc39a12b88e5abb82fb29261d49a', class: "co-color-picker__panel" }, h("div", { key: '6b985e293c37fb4b84a3c2593f6c3ee3b79f91da', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: 'ebbdbeba0134c87da27ae4f6e375041eee78892b', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '6b3a330cf0384860a796ba513af37f8e78e12093', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '5643e85578787a4f37f6325cb352f3a304557acd', required: this.required }))), h("co-popover", { key: 'ae7d44830dfde43e0a5c5047e6c7fb821d1243c7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ba3bfbb61193dd643ec906c83cde0856ff71858f', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '9de65c4a8b4ca9778547bbb3fe84a3672420dfc9', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '36e94cac1eb3855ae7425ffc37273be18ee6e351', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '2df3f1fa6a56038fd37f065df00a63f48ea4aacc', class: "co-color-picker__panel" }, h("div", { key: 'ab3f73100473640dd86ade5b28d6356b78cc87fd', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (h("div", { key: '28ab2e8f9a21cc11f5c8569a9fb3d560b26ff822', class: "co-color-picker__hex-row" }, h("span", { key: 'e0f84972b167e6374de8b1445047de810971d538', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: 'ff313153df1ae22cf0e32b111c7a639b062aefd5', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'daf97e5d636397ec9c5f5e34ed7c007e11cb3788', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '41a3c2fd4ffdecc696272ad1e24ef66de9df5b00', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'e21db961ebe2493cafa3c0b7399fee541902a13a', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'bc0e6a11f2575313fbe5bdf65aa65b10117d2dfa', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '35133f960eec263ad5a70839e026f20f81a11002', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: '962004b803249536b0d30da30f697c1908779ff5', class: "co-color-picker__hex-row" }, h("span", { key: '127afe4fbc44043d6417d3f335703b72c8657e59', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '6ed71ff0812ab2597eea32f5c1c8a64af02d9c7c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: '32038edf8d6fd3ab7746997b6ba1383ee6210b63', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '1cee861c8db908d6d900a0454029136a2bc37383', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'da2a382c68d0ad972007a9589176480996fa4a52', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'cf7218f5309d7ec91f03df33199cf1ce3a49ba4d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '2a469362e5001e9c65074ed6280e275e471b0334', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -257,6 +259,26 @@ export class CoColorPicker {
                 "attribute": "layout",
                 "defaultValue": "'vertical'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/co-column-picker/co-column-picker.js

@@ -165,13 +165,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: '49be1e863b1bf55a1c80cdb840a2df1abe863bf1', class: {
+        return (h("div", { key: '7c9f0c6d1d8a297be3b31219ccab24c7be7e2664', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ebd5ecc3f9b3445c78406dc9d6c8713b1286e03f', class: "co-column-picker__labels" }, this.label && h("label", { key: 'e397c8718a158311bc710d792007f2babe5a5195', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '242cd81ea707193f59f016da58739fee1bfd61c8', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '7a8cdc490af2be181d235a0a42a44386e5ce3a51', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '957e1979f0a940ee12e21c5ca6ad5c2605057778', class: "co-column-picker__search" }, h("co-icon", { key: 'c828aa61afdb223205a4006ef7f7518be8f851da', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'de96b64126a49ed365c6edda08503caabcd5f992', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: 'a14e1afe2498edc0e3701a6f547ca99cc25f930a', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'da5ce1f1fe1660b6e9bc6cbfa1ebb6362a756e84', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'a64cd6debf2a138e7262e0c94aafb4449d33df81', class: "co-column-picker__toolbar" }, h("button", { key: 'e5a337595da0f08efe81b89f41cd40dfee38568a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '13c2914c19c8e61ffb9573f8483bd1b11d7e399c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '1af20f2508a9f028d27b5736eaa89af8876153f6', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'ae1736fca857c7a778a687f4e14e736c4560dc3f', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '13e0cd91b2611b436b44d851b57312bb4e517e3b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'fc6cc54ef7737a02922b0a0c12db64a52580b51a', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '63aeaef90a9b72c51c3bbd07da721d7c5391ddcb', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '9cd4f45dd0c182e50b219f5b6ff240a2e752ba94', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '09a43ae8972be6b03d1117a2116175ca59a95a68', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f0fc5ff8125baf3412a90045b2c9bb7238a6c951', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '72de44605e22d553bd484b9dbd0c91f17e817f52', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '7721083bb4f68dabc7d1a6e35f097e98b6416f55', class: "co-column-picker__labels" }, this.label && h("label", { key: '4cd1198cc290b7fc3e6959e04fba230d5de9f488', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'b4f56c7947100ca9be3eb8c4d3540ab5cb34c1ef', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '4138e1b3549460b5f819a1d9065d05c4fc07c72f', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '22cc772780508c2efdd2e429dcecbe616261d8f1', class: "co-column-picker__search" }, h("co-icon", { key: '62ab36ee523d75866c2844aa0d8f1b9b5a7f1ced', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'ace44104a9babc7fb8a5cc3f5af6affd525db28a', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '93c0047a52e8700cf78906ecc723152d845b8d4d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'e789f4a19e49cf1f8549f756398cb13f00839f3d', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '2b1bd3f29832f37e8e9047d0dd2189cb00ce9058', class: "co-column-picker__toolbar" }, h("button", { key: 'fe1d23d1a58cdebb3f01687579206133cf58b46c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: 'f768bbcd4c33d125aba7140484a8c7bd0797ac8c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: 'f0aa650e5d8caf03d05284776c81a2525c7dd527', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'beea0db7feaee1e4940a0c8f320196573311307b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '97c5971a6583b2ee67bda1ad1c2081900b3e36c3', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '91e6e4c2c69bc7baf9a0057994885aa32c570cad', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: 'b4eac29c58acf345217cc201fe3cb54f788915c0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '920616150803f151c44a9796b6bd7edbdf572d8a', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '292137377ece5e75c45965a147fa4e162476e7b5', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '127c1f85c85da87f5bdbed1c7631b7e6679cfe86', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'df3432d43a0bccdbaf20a02427479cf9b97fd79d', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -726,7 +726,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
@@ -1032,52 +1034,6 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   color: var(--co-semantic-text-default);
 }
 
-/* ============================================================
-   Footer buttons
-   ============================================================ */
-
-.co-combobox__footer {
-  display: flex;
-  gap: var(--co-spacing-sm2);
-  padding-top: var(--co-spacing-sm2);
-}
-
-.co-combobox__footer-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--co-spacing-sm);
-  padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  border-radius: var(--co-border-radius-xs);
-  font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-12, 12px);
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: var(--co-font-letter-spacing-body);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-  box-sizing: border-box;
-  min-height: 32px;
-}
-
-.co-combobox__footer-btn:hover {
-  opacity: 0.85;
-}
-
-.co-combobox__footer-btn--secondary {
-  background: transparent;
-  color: var(--co-semantic-text-default);
-  border: 1px solid var(--co-semantic-border-default);
-}
-
-.co-combobox__footer-btn--primary {
-  background: var(--co-semantic-surface-primary);
-  color: var(--co-semantic-on-primary);
-  border: none;
-}
-
 /* ============================================================
    Helper
    ============================================================ */
@@ -1155,3 +1111,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-combobox__trigger { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -241,16 +241,16 @@ export class CoCombobox {
     render() {
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: '321b5eaa234f7beff8a8ee692783b7b4b1836cf9', 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,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '8249758858a3df01b75aba4e15dd330b6267954c', class: "co-combobox__labels" }, this.label && h("label", { key: '118174e83d0b93879efc0804197e1751556ea8c6', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: 'bf5acbcacd3466f6c104671347af57949fc6dc0a', required: this.required })), this.secondaryLabel && (h("span", { key: 'dc0c26636209f9f092d773476a3edc9ea9e19414', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'e42a22d9ed6aeb0951221d38ba7a052073602063', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '34c4f4c3c573e6a4ff3310eac46c1878d9b6af71', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '47940335029da3a40292d4de5f5582dbf7873238', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '47e87dcde91566a2f4ecb54ef1af70f8b60e3044', 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: '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: 'fda02e6a0dbbd57fd40370b55172ab886ab4c758', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '5c62b271fd8b3bef832a568646b787c491acd356', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: '1ced712e669917dc2283bf2d1022c83e73179c65', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'b6cac2f10d82878c5cb7f770f079bd6c1095dde2', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '5191223b7f9851ee2af96e6455b0b4d20f5425ad', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (h("div", { key: 'a69808aee8fc79aca8c208e18a2aa52e14a324a8', class: "co-combobox__search", part: "search" }, h("co-icon", { key: '5325687113fee74658513b427d073e972029bf3e', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), h("input", { key: '5d6c81c825f1c4f3bb191d92ba77f7a0ac57dfcf', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), h("div", { key: '9f2a901c16b799009072dc2f0bd0ca00bd37bd39', 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);
@@ -259,7 +259,7 @@ export class CoCombobox {
                         '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("div", { key: 'dcbdadcac614ad0353deabfa162caf2bb4d6a78b', class: "co-combobox__footer", part: "footer" }, h("button", { key: '58e612399b71a275a36de3bb4399fc7129055fd4', class: "co-combobox__footer-btn co-combobox__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { key: 'df2b0e268425e0c58caff3afa8fbe7a8432de254', name: "plus", size: 16 }), h("span", { key: '7693a04b6c169b8ff328ff13f6a08504c81ec5a3' }, this.footerSecondaryLabel)), h("button", { key: '76958fdbf1f1f612d99f039f269e41be229cbe51', class: "co-combobox__footer-btn co-combobox__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { key: '5ad00679c8390061140d85e852f31b59ea312b08', name: "plus", size: 16 }), h("span", { key: '42e02f75d57fbe5cf16936b330cf53991047256a' }, this.footerPrimaryLabel)))))), this.helperText && (h("div", { key: '0d1afe7bbb9bd678c7918bfb7e14c3b5df7afacb', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'f89aa1659f328d016ea2e787423db4de3bd158c9', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: '33ce544bf337562ed4b5d94cdaa03346f2a9b405', class: "co-combobox__helper-text" }, this.helperText)))));
+        })()), 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"; }

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;
+}