@prolibu-suite/cobalt-core 0.1.2 → 0.2.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: '321b5eaa234f7beff8a8ee692783b7b4b1836cf9', 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: '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: {
                 '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: '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 }, (() => {
             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("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)))));
     }
     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

@@ -95,6 +95,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);

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
 /**
  * A command palette / search component (⌘K style).
  * Opens as an overlay with a search input and filterable list of items.
@@ -68,8 +69,14 @@ export class CoCommandSearch {
     get filteredItems() {
         if (!this.query)
             return this.parsedItems;
-        const q = this.query.toLowerCase();
-        return this.parsedItems.filter(item => item.label.toLowerCase().includes(q) || item.value.toLowerCase().includes(q));
+        return rankByMatch(this.parsedItems, this.query, item => [item.label, item.value]);
+    }
+    /** 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];
     }
     onOpenChange(newVal) {
         if (newVal) {
@@ -89,12 +96,12 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '549e381da5563fabb3e6c178a626f594e5222cba', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '868215f146f78217eada61b578dfd15d436c95db', name: "trigger" })),
-            h("co-overlay", { key: '1be4cfcf2847a71d7cd0c604f1cae069aa60f1a4', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '9f4de81a78ff1fbc947c375d36bd94d4ca22a75b', 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: 'b395211a8b62c4a902ff645b82676537ce0046ed', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '642b29afe6f08e60ae33828db63ccf23b70f9fc5', name: "magnifying-glass", size: 20 }), h("input", { key: '6d4b6b07b0d44d4cfedfad5cd3bc1d638b9fe601', 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: '048f07c5cf78eee445e2e8f49271a5024ffe83f6', class: "co-command-search__shortcut" }, "ESC")), h("div", { key: 'f0f7b6dccd1168ef8ce858f35d91089b51c65512', class: "co-command-search__results", part: "results" }, items.length > 0
+            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" }, item.label))))
+                    }, 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)))),
         ];
     }

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

@@ -212,7 +212,7 @@ co-data-table {
 }
 
 .co-data-table__td {
-  padding: var(--co-spacing-md);
+  padding: var(--co-spacing-xs);
   background: inherit;
   border-bottom: 1px solid var(--co-color-opacity-negro-8);
   border-right: 1px solid var(--co-color-opacity-negro-8);

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

@@ -43,6 +43,10 @@ export class CoDataTable {
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
+        // Swallows the click the browser synthesizes right after a resize drag ends.
+        // The resize handle lives inside the sortable <th>, so without this a resize
+        // would bubble to the header's onClick and trigger a sort (+ a full refetch).
+        this.suppressNextSort = false;
     }
     /* ─── WATCHERS ──────────────────────────────────────────── */
     parseColumns() {
@@ -84,6 +88,11 @@ export class CoDataTable {
     }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
+        // Ignore the click synthesized by a resize drag that ended on this <th>.
+        if (this.suppressNextSort) {
+            this.suppressNextSort = false;
+            return;
+        }
         let order;
         if (this.sortField === field) {
             order = this.sortOrder === 'asc' ? 'desc' : 'asc';
@@ -138,6 +147,9 @@ export class CoDataTable {
             if (this.resizingColumn) {
                 const width = this.columnWidths.get(this.resizingColumn) || 150;
                 this.coColumnResize.emit({ field: this.resizingColumn, width });
+                // The browser will synthesize a click on the <th> when the drag ends
+                // inside it — suppress the sort it would otherwise trigger.
+                this.suppressNextSort = true;
             }
             this.resizingColumn = null;
             document.removeEventListener('mousemove', onMouseMove);
@@ -245,7 +257,7 @@ export class CoDataTable {
             } }, h("co-icon", { name: "caret-up-down", size: 16, weight: this.sortField === col.field ? 'fill' : 'regular' })))), this.resizable && i < this.parsedColumns.length - 1 && (h("span", { class: {
                 'co-data-table__resize-handle': true,
                 'co-data-table__resize-handle--active': this.resizingColumn === col.field,
-            }, onMouseDown: (e) => this.handleResizeStart(col.field, e) }))))))));
+            }, onMouseDown: (e) => this.handleResizeStart(col.field, e), onClick: (e) => e.stopPropagation() }))))))));
     }
     renderBody() {
         if (this.loading) {
@@ -265,12 +277,12 @@ export class CoDataTable {
         return (h("div", { class: "co-data-table__empty", part: "empty" }, h("div", { class: "co-data-table__empty-icon" }, h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), h("div", { class: "co-data-table__empty-action" }, h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '98c9ac2234b00d8c69095f9d9bcd4633d79265a8', class: {
+        return (h("div", { key: 'a5c4cb6afafe73264b5b6643c762867a449bcf1f', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, h("div", { key: '0e40f9c3b536d58cabe9e61d2beb425337e3391a', class: "co-data-table__scroll" }, h("table", { key: '96ee1fce70ab168c2ba40b6e748c0c11cbcccd89', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
+            } }, h("div", { key: '22f664b7c45ab3882665c45bb398f7e41bad331d', class: "co-data-table__scroll" }, h("table", { key: '6cc6e81e405f4d560800aa983b193902eb8ecb5c', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: '2de92b803c40dcb254fbcdd56406319af502cfa8', class: "co-pagination", part: "pagination" }, h("div", { key: 'db02175a70f85fbf79689fca100b3c261e9c37a3', class: "co-pagination__section" }, h("span", { key: '83ccd386d1d1385bd2106b4443fd572b1eda021c', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'b2f723e6fc0eeeaeb4f6db431cf68bb941eb7538', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '4b7d41e571e1c8a6e353b413b5e790b48ea37995', class: "co-pagination", part: "pagination" }, h("div", { key: '8a0dedd2ea3b54dd19d2286c5e114fe61f732278', class: "co-pagination__section" }, h("span", { key: 'e4629e6610c5d4e9b1d1cfb24b5edf0e2703c80e', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'fd25c034fdd8c05bf665c6aeffa9686a32573bd9', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '977949923862d497b8de2d46dfda536d67b6f981', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'c5f0467475206e731c6d429fb6cd80245b37ad74', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '08c37fe8cd7f9e9b13b3cfc4200096f51f19c916', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '117deb7ddce63482ff930341834ecbda51870c91', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '2a9c4d04d50a60fa496429120d80e7f95c393164', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '548972a8057b098129693caac38d964221662b64', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '4ddc38a6e5817cb1f516b35dd07e46d811a2006b', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'b4aca717ecd742f1dcb60da8ec64bc194d7cd47b', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '53169bfff85ffe4a97fb8ce369f3be9ecc163725', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '01b9e912b864fd989548b03ae8119ada87e6de49', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: 'a56598b548e6635296886750354c315b12fbe2d8', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '093a6b2c02f2c7309a14b9b3c7d44e4801643d32', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '595f8ef3df42c7a38bd2f59c3402bc99a9b23727', class: "co-pagination__spacer" }), h("div", { key: 'b2ffe70a449adf2ce1c5376447dddbdb8ef0f5b3', class: "co-pagination__section" }, h("span", { key: 'd6c3808153534e9bd58e51492ea03c55b7315a05', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'ee2814865e862e9f99d829dcd7ec212774c8b5df', class: "co-pagination__section co-pagination__nav" }, h("button", { key: 'e991cf8e2a4907181e30dd7ce9f27bcc97325424', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: 'b2c6703a5cb87eba43264acd998e837eebbff342', class: "co-pagination__spacer" }), h("div", { key: 'a48a4bdf1cc1ee9dc80901504c11741589a9ebc3', class: "co-pagination__section" }, h("span", { key: '1c7cb0c55a537530d4322a1e7b452c810f32ea94', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '60b13b593caf9b08396dd30ac1b9e513ec6a3197', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '125da6a4b3e175fc7651d25ee020316f6d64e3d6', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '8fe3515dccf9375904a5875f571948e1aacd86f7', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '068e6184593877f651a41573d8aa456f9ef2ef49', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }