@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -42,6 +42,12 @@ button.co-chip:focus-visible {
   min-width: 0;
 }
 
+/* Two-tone muted value suffix (": <value>"), sits inside the label so the
+   flex gap never separates it from the base word. */
+.co-chip__value {
+  color: var(--co-chip-value-color, var(--co-color-gray-500, #888888));
+}
+
 /* ═══════════════════════════════════════════════════════════════
    VARIANT: FILLED — default is a neutral gray pill (filter / tag look).
    Use color="primary" for the emphatic dark variant.
@@ -248,12 +254,18 @@ button.co-chip--disabled {
    ═══════════════════════════════════════════════════════════════ */
 .co-chip__icon-left,
 .co-chip__icon-right,
-.co-chip__dot {
+.co-chip__dot,
+.co-chip__trailing {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
 }
 
+/* Trailing prop-based icon inherits the chip colour by default. */
+.co-chip__trailing {
+  color: var(--co-chip-trailing-color, currentColor);
+}
+
 .co-chip--large .co-chip__icon-left,
 .co-chip--large .co-chip__icon-right,
 .co-chip--large .co-chip__dot {
@@ -301,3 +313,46 @@ button.co-chip--disabled {
   width: 100%;
   height: 100%;
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   VARIANT: FILTER — Cloud Drive filter-trigger pill.
+   White pill with an inset hairline ring, a tinted leading icon, a
+   two-tone muted value suffix and a trailing caret.
+   Fixed metrics: height 34, padding 0 12, gap 7, font-size 13.5.
+   Declared with .co-chip.co-chip--filter so these override the
+   size/icon-mode padding + gap rules (equal specificity, later in source).
+   ═══════════════════════════════════════════════════════════════ */
+.co-chip.co-chip--filter {
+  height: 34px;
+  padding: 0 12px;
+  gap: 7px;
+  font-size: 13.5px;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-base-blanco, #fff);
+  color: var(--co-color-base-negro, #1f1c1b);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(0, 0, 0, 0.16));
+}
+
+/* Leading icon (prop- or slot-based) tinted gray-500 in this mode. */
+.co-chip--filter .co-chip__icon-left {
+  color: var(--co-color-gray-500, #888888);
+}
+
+/* Trailing caret is a subtle gray-400. */
+.co-chip--filter .co-chip__trailing {
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+.co-chip--filter.co-chip--clickable:hover:not(.co-chip--disabled) {
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-25, rgba(0, 0, 0, 0.25));
+}
+
+.co-chip--filter.co-chip--clickable:active:not(.co-chip--disabled) {
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+/* Open/active trigger tint (consumer toggles `selected` while the menu is open). */
+.co-chip--filter.co-chip--selected {
+  background: var(--co-color-gray-100, #f6f6f6);
+}

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

@@ -17,11 +17,14 @@ export class CoChip {
          * - both    = icon before + icon after (Figma "2nd Icon")
          */
         this.iconMode = 'none';
-        /** Visual variant */
+        /** Visual variant.
+         *  - filled/outlined = existing tag/chip looks (unchanged defaults).
+         *  - filter = Cloud Drive filter-trigger pill (white pill, inset hairline
+         *    ring, tinted leading icon, two-tone value, trailing caret). */
         this.variant = 'filled';
         /** Semantic color */
         this.color = 'default';
-        /** Icon weight applied to prop-based iconLeft / iconRight. */
+        /** Icon weight applied to prop-based iconLeft / iconRight / trailingIcon. */
         this.iconWeight = 'regular';
         /** Show dismiss/remove button and emit coRemove on click. Reflected so it
          *  survives lazy hydration when set via a framework wrapper. */
@@ -52,9 +55,11 @@ export class CoChip {
         const hasRightSlot = this.iconMode === 'both' && !this.removable;
         const iconSize = this.size === 'large' ? 16 : 10;
         const removeIconSize = this.size === 'large' ? 16 : 10;
+        // Filter-variant trailing caret is a fixed 13px; otherwise match icon size.
+        const trailingIconSize = this.variant === 'filter' ? 13 : iconSize;
         // Determine effective icon mode for CSS padding (the dot counts as a left icon).
         const hasAnyLeft = hasLeftSlot || !!this.iconLeft || this.dot;
-        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable;
+        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable || !!this.trailingIcon;
         let effectiveIconMode;
         if (hasAnyLeft && hasAnyRight)
             effectiveIconMode = 'both';
@@ -65,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: 'd99b4031df6b255c1ada8fd6a4743fe1b1119d3b', class: {
+        return (h(Tag, { key: '3210b69426aa37cc7e1f9cc7d7a9add9fd0dd93b', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -75,7 +80,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '7d65ad877a914122911524600347a9f568082875', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '25f2d43becce555ae671fcdfb0369a5c5dc783aa', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '77bac8466e6b47339c503213f6498bd3e1f5f430', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'e487eb428c8ea3f6e2caa75684ea89b8ae7bbafe', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '209e199ea5ec9682507c33a218e0639273fc1ae2', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'e589f0ea28365043fd51d1f06157ea618291be16', name: "icon-left" }))), h("span", { key: '08a575e1cd0ea92b0193d10e988b1c300b33caa2', class: "co-chip__label" }, h("slot", { key: 'a296df6fb688b28670ae6224b4affb841e8659bc' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'f014692392576afa93a4ea856a5c3842dd3ede8e', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '048d42664c073f234d4066b44946c1a5c0190dc1', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'd45c8b9801a370aa3d29bd24994bcafe42a14c59', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'cf26f624dc1442d97c588fb7adc80d0ab685cafd', name: "icon-right" }))), this.removable && (h("span", { key: '411bce99361ef1ec436572bf061077372f11b38b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'e5a0ac43fc8912e6e9f69aef0886a8bb96f80910', name: "x-circle", size: removeIconSize, weight: "fill" })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '105306abb8267ebec6a4241b85be844ce9e0fe9e', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'a6e6bbf79ec321916bae16fea448b63f22109bd0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '6ddd3f25eca0380831c10fce157aa042d5195da5', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'd331947abb472bede535a794dfae052a021d06b1', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'ddf803655d633a17901ecab726739ad69ae03d5c', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '4602a3f28aa74f31bd7a5124b9ef1a1337f4d960', name: "icon-left" }))), h("span", { key: 'aebc08bb058e32d13ef3c962e1cf23cfdbc3baf5', class: "co-chip__label" }, h("slot", { key: 'be0e8625634f0b4a9da70944e32bb7d2c80c3a00' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '11634b783e3a482fe161781658fd22d0ec015265', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '49837e189f540874558c337bce19a983a5bd77f2', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '6510c33b909da03ef0e6ee59fb52b5c12a5faa86', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '9c6e6ccea304803daaecf447a5651d5e8a67cc07', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '3bdd7c888bba838894b88a41039df45af8f7547c', name: "icon-right" }))), this.removable && (h("span", { key: 'a4d45167d0c3fc237692371a131af5a76840a89a', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'ce146e623ce90a936c54a8bfad349b7ea04691fa', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'fe01795e08be25909f530d6da4f57cb38b6f8a8e', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '2d8c0bba14a8fa9128c9f9673d9d295f191f1e5c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -155,15 +160,15 @@ export class CoChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'filled' | 'outlined'",
-                    "resolved": "\"filled\" | \"outlined\"",
+                    "original": "'filled' | 'outlined' | 'filter'",
+                    "resolved": "\"filled\" | \"filter\" | \"outlined\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant"
+                    "text": "Visual variant.\n- filled/outlined = existing tag/chip looks (unchanged defaults).\n- filter = Cloud Drive filter-trigger pill (white pill, inset hairline\n  ring, tinted leading icon, two-tone value, trailing caret)."
                 },
                 "getter": false,
                 "setter": false,
@@ -260,7 +265,7 @@ export class CoChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon weight applied to prop-based iconLeft / iconRight."
+                    "text": "Icon weight applied to prop-based iconLeft / iconRight / trailingIcon."
                 },
                 "getter": false,
                 "setter": false,
@@ -268,6 +273,44 @@ export class CoChip {
                 "attribute": "icon-weight",
                 "defaultValue": "'regular'"
             },
+            "valueLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Muted two-tone value suffix rendered right after the label as\n\": <valueLabel>\" (e.g. label \"Ordenar\" + valueLabel \"Reciente\" \u2192\n\"Ordenar: Reciente\"). The suffix is coloured with --co-chip-value-color\n(default gray-500). Omit for a plain chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-label"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trailing icon name (prop-based, uses co-icon \u2014 any Phosphor icon name),\ne.g. 'caret-down'. In the `filter` variant it renders at 13px in gray-400;\nin other variants it inherits the chip text colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-icon"
+            },
             "removable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -82,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: '5685ea2ba18f9f2bf1529cfcad5aee9dce529a76', 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: '22c1c3fae1990c3375772d520efb752b13b841c8', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'd91a7a773586595b9ca203ea904b2eb7699414bb', required: this.required }))), h("co-popover", { key: '2d245e3b5735ed5dfdc4dd43479930e9fdb6f76f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '1a75d6f5c28fe1d00b21584a31ec91915aebcbe7', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: 'f015db7975d7fcffdbbd20a7b88dba44f104eccb', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '4842f2556ad37910f414bc253fafc1f8f2c81361', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'c34ec92aaf66b01f3566f8f8106419dfc87aefa5', class: "co-color-picker__panel" }, h("div", { key: '3b904bca6d819e6f273ebf418f7f5495e36d31f8', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: 'cf82d2fe5d1ca59a0be4edbd98f2f127cbb0666c', 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: 'ad0e372b32b0e7d5294609b7a952e8d4fb633447', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '9976b6350be9c69a5db48079cdcc32b597b99e4f', required: this.required }))), h("co-popover", { key: 'e50a584f035be8e4cb7d18968c16e6dfe5b8fad2', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '79bfb8856c30be5bbedf2471651eafabf4c2faa5', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '468b9f7f6a63297086f48938155bea1a5a82ec04', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '727966662cfa0c6647d66f0268eca9f77452c46d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '25df03b58bf3a690e524f53d53a16fe299f019ed', class: "co-color-picker__panel" }, h("div", { key: 'd102f3c6b266046dc2b8d6d7536d25aa2dffb79c', 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: '0aebb34354565e53e1364ef66bb7750decc2ae77', class: "co-color-picker__hex-row" }, h("span", { key: 'b959d588d52fe4546ebcb374a0d5129dfb37cd2f', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '11ef3b1879fefe31d64c18e26eaa349679135c0c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'be63f7214a57d370c62c2edf5f3072cdaf39da10', 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: 'a8b5e746c2ad6116e700ffbb8082c4d3f02b8ff8', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '584a9507206c54a75f266edf227a88543114a94c', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '0b58cacf5ab2da011e3a6c98ffc1f8ac04dd9819', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '96f2fafb678ba77c8aabb8bd979b6676eb4ac634', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: '4897fc8e3c3d371b23b7ae6c9e5c04c92dfe27df', class: "co-color-picker__hex-row" }, h("span", { key: '625828e841d8f8b545ee6119d74e839eca80841e', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '00f73948a453f2db74103ab1d49013e999d13b1f', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'c87e69f32065bf05dcad1eaa73cf21d028abf93c', 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: 'bf8e7abbb52e543bb4335acc577b268cce40c2be', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '368cf0c7f3877c1a6fd35c992b6543862b1cebc8', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '5b9f3568320860fde1d701ef6e5d9b3475903d8c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '5a480e0edaf010df948e8f73e9befa70f88b0865', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

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: '0097275adfbd4a8f61ecba251568914d02b18e24', class: {
+        return (h("div", { key: '2666e34dab21c03638a74bb5aa49ab0e886a0693', 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: 'ffdbae01974d6cfbce8c7aad7916f4fee5c1cca6', class: "co-column-picker__labels" }, this.label && h("label", { key: '91b946cf1eb15a492bcadd4f8d11eabc9a59e1bf', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'bef413d01940a40778eb35b629a189166f7fb93d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '8d9f43f64177b13732432ef198b5e6b13cebd36b', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '693aa4d44f2dbd543d5ad7c907518329c4e97025', class: "co-column-picker__search" }, h("co-icon", { key: '781810b8326fb46b99afa6bbacf2c3976647d98b', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'd76de6d826436e0dbe8c9f97edcd8e310b8dca54', 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: '482bb56991aa527744df0e0619753e2696f00372', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '68090fb612a2ba97836c1127368e60d671bbd489', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '9afe3b43c5d6bbf8625819487ebfa8559478a71c', class: "co-column-picker__toolbar" }, h("button", { key: '55407fa68c881f79c4ca43359241e9180d3bb94b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '55805e5ae2f629a5bb5ca7782de90558bae7f190', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '04913ef71413f1ed8a1c3941c6408d3e1c97cbe7', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0a5155f8930abf84d24d17b12a6b3861656d3d46', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '51f2b7a319030654ed4ca6991b796b3e7a49196a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '1da451722bb9481a6518338afd32f797985ebd4f', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '4ac4f4a852c2079ccbf6ff2f89eb32fc0a5979f4', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'dd4f250a9e91bdd35329970b2b5539ad8ce8b3cb', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'dd362cadf9e34d97bb2a8a157d35e9d1f3b1dfaf', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7f156358ccf841c21f710d8d31770f75ccb5a947', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'e1182644d6ad576951ca01dc57267529e0e6ea60', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '14278387662b21beb294db48c0758fc6ff265676', class: "co-column-picker__labels" }, this.label && h("label", { key: '3f96a7fc4f4c41a4dfd96461b68c3f5b58bb681c', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '96c8aee4265a6a1714d17ab91035bb635df4a925', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '71ec0116e86706c139eba9a2368c238e527c2251', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'b17441aa3d0d73dab3b16ae7d9f2d0796968c9da', class: "co-column-picker__search" }, h("co-icon", { key: '007c2975b633af4bfde6248372b24cf0a2f9b862', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'd6bbaf600cc3f2ed2e490d095045a744b46bed8d', 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: 'ba292c3f2ee4fcfb73d1360d681c5ed2ccdd0f41', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '1ec246b29fb288351153e896b2014b8f4fdec62c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '007a4067b4c369f076eef0e5068419ad1ad7717b', class: "co-column-picker__toolbar" }, h("button", { key: 'd4ad1c99e81cba77cce7d7f8a121b16398b4b462', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '2ac4546a1375c337363c905a1262082f4ec4ac25', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '053b07244ea82a1d83eadc0f3e0d7f3c79df3f1c', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0568ea5680716dc2560ca93e89dbb0649145f552', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '6538744f86c59489871040bed656a85220fbdb1c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'd0c4294e408378f9613655f9f1a8665fff4bc866', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '5dc6510896ca75e4d1d62608ca9fd0c46daa2158', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'bb7a021742ab70da4d1c8b29b58944a826d50399', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '8135e8db252ad8de777683d308e7440f7902d281', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'cd2416dde35f709547185a893cd61c981be0de3f', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'eb8b1353ec98c16360ad13484944879046235339', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }