@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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

@@ -55,6 +55,12 @@
   border-radius: var(--co-border-radius-xxs); /* 4px */
 }
 
+.co-checkbox--medium {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--co-spacing-sm); /* 6px */
+}
+
 .co-checkbox--large {
   width: 24px;
   height: 24px;
@@ -91,6 +97,11 @@
   height: 4px;
 }
 
+.co-checkbox--medium.co-checkbox--checked::after {
+  width: 8px;
+  height: 5px;
+}
+
 .co-checkbox--large.co-checkbox--checked::after {
   width: 10px;
   height: 6px;
@@ -115,6 +126,11 @@
   height: 1.5px;
 }
 
+.co-checkbox--medium.co-checkbox--indeterminate::after {
+  width: 10px;
+  height: 1.75px;
+}
+
 .co-checkbox--large.co-checkbox--indeterminate::after {
   width: 12px;
   height: 2px;
@@ -127,6 +143,53 @@
   pointer-events: none;
 }
 
+/* ─── OVERLAY appearance (Drive selection chip) ─────────────── */
+/* Standalone frosted rounded square, no label, bespoke inline SVG glyphs. */
+.co-checkbox--overlay {
+  border-radius: 6px;
+}
+
+.co-checkbox--overlay.co-checkbox--small {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+}
+
+.co-checkbox--overlay.co-checkbox--medium,
+.co-checkbox--overlay.co-checkbox--large {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+}
+
+/* Unchecked → frosted white chip with a hairline inset border */
+.co-checkbox--overlay:not(.co-checkbox--checked):not(.co-checkbox--indeterminate) {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
+  border: none;
+}
+
+/* Checked / indeterminate → solid accent fill (overridable via the on-color prop) */
+.co-checkbox--overlay.co-checkbox--checked,
+.co-checkbox--overlay.co-checkbox--indeterminate {
+  background: var(--co-color-primary-azul, #2563eb);
+  border: none;
+  box-shadow: none;
+}
+
+/* Overlay uses inline SVG glyphs, so suppress the default ::after check/dash */
+.co-checkbox--overlay.co-checkbox--checked::after,
+.co-checkbox--overlay.co-checkbox--indeterminate::after {
+  content: none;
+}
+
+.co-checkbox__glyph {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-checkbox:not(.co-checkbox--checked) { background: transparent; }
 }

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

@@ -5,12 +5,18 @@ export class CoCheckbox {
         this.checked = false;
         /** Indeterminate state (partial selection) — visual only, overrides checked appearance */
         this.indeterminate = false;
-        /** Size: small=16px, large=24px */
+        /** Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px) */
         this.size = 'small';
         /** Disabled state */
         this.disabled = false;
         /** Value for checkbox group usage */
         this.value = '';
+        /**
+         * Visual appearance:
+         * - 'default' — the standard labeled form checkbox (unchanged).
+         * - 'overlay' — a standalone frosted rounded selection chip (Drive), no label, bespoke SVG glyphs.
+         */
+        this.appearance = 'default';
         this.handleClick = () => {
             if (!this.disabled) {
                 if (this.indeterminate) {
@@ -26,16 +32,22 @@ export class CoCheckbox {
         };
     }
     render() {
-        return (h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
+        const isOverlay = this.appearance === 'overlay';
+        const isOn = this.checked || this.indeterminate;
+        // Only override the fill when a custom color is provided AND the box is "on".
+        // Leaving this undefined keeps the default appearance byte-identical to before.
+        const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
+        return (h("div", { key: '08c291f6fbc3d37788a26d8d4dc747eba32bdca8', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '24839a60401f929b87be87aea57c0b130a007f3a', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
+                'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: '1af8a42128f227fc5849f87de4005525e6450d96', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '6fcd92e86641b5b1338370d7fe4cf75eaa860268', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: 'f3442c680dc9d30a7d69954137300d76242999d4', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '4bd18d9e214646ff2e5cd0cb5e697525e7e605e1', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: '6a25deb4ea5b703c3732c9c97d6a5e822451ec70', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -95,15 +107,15 @@ export class CoCheckbox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'large'",
-                    "resolved": "\"large\" | \"small\"",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size: small=16px, large=24px"
+                    "text": "Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,6 +181,45 @@ export class CoCheckbox {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
+            },
+            "onColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent fill color used when checked/indeterminate. Defaults to the current design token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "on-color"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'overlay'",
+                    "resolved": "\"default\" | \"overlay\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual appearance:\n- 'default' \u2014 the standard labeled form checkbox (unchanged).\n- 'overlay' \u2014 a standalone frosted rounded selection chip (Drive), no label, bespoke SVG glyphs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
             }
         };
     }

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: '2a0ec169b9c4ec0516d275d3787f7f02bcc4815f', 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: '43dac38d1aba1dead22ac164926167c38e66a9fe', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '3797d8f1081f82ed4f44bb99ffe26087b45c3d3a', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '742a11aaefce99a0bbf1c1bd6c2c3ca8b31d63cd', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'a9f2c057d7df6e51f5be5c757e26280780fe1ae9', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'c8f56d8525efb0a095f0c21d9cf0626964484510', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '01fb166b21b09cdb5b8b86dca1ec2a9fc57f6848', name: "icon-left" }))), h("span", { key: 'd6201c5dded49a5bdc32110d8e11165aeac99eac', class: "co-chip__label" }, h("slot", { key: 'd947e19d407485bcfcedd6eacc4af81c3059166b' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '53108c759b51c53fa649776166396a9f609d20d0', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '493961698dc761c41cf6a6e24d20e61701f594fa', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: 'c9f198139af0e17dedd3464d9ccdd7b6c6163aff', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'ab0224fdb675c1706cda2395f57ddf6f17160185', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '3e1a2cc6cde7a2834f9c872925aa4a2ee2136a9f', name: "icon-right" }))), this.removable && (h("span", { key: '4eb54aae2e81bf76bd99cf1ba808403de8f98d10', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'e9736b8d92d01df66a670a67e7ef05920c6a527b', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd56053da1f81ebfbd276f314c08f0ca9d8b722c8', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'f6cf7398888677b48622415b0d1e65f2117a841a', 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: '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: '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: '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"; }

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: '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: '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: '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-command-search/co-command-search.js

@@ -175,14 +175,14 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '7489dba63daa21b04e7fd12ba0923d3f5452a651', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '86bacbf98e5c7b2079d0db46862c60ee4273756d', name: "trigger" })),
-            h("co-overlay", { key: 'e6406e9eb24dfff1f1a8b78267b84fb2e305b9bd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '9cf1f70ac226d3802f3f1ffaf77d1633d7c24f2a', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: 'a2508671dc39fb5e90455f9ee4391e52e7739a29', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '37051efc28fc3412eb24b53cd4891b98a3b8c2cc', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+            h("div", { key: '8997e31184c5531e5b329432f6ff29496d1070f5', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '63bf6dbcb3aaf35a0fdacd70b96b8f5701cd27cf', name: "trigger" })),
+            h("co-overlay", { key: '7f96e661c6cab4f6440beab808993665efb86cab', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '20b27b7609cd00cb52d903babbb7565885ce1188', 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: 'c9bb1834d60ea728cb70e4ebb9ce08c76abafec1', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '971da90765cf33c7d427c173e974fb7f68e96ed5', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
                     e.stopPropagation();
                     this.coChipRemove.emit(idx);
-                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '33f8024e71b902b954349b539dc8a6b1ea4e8a64', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (h("co-loader", { key: '46eae7fb379621808f0e7a78e3e15f2cf0742fa6', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '1505eaa1ccde46d28475b7ded587732a302dfef6', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: '4557dc1c0f0f543238deeaf37731594064b7a946', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '81921bb9085d6bfb3ed4a274ef195e299dd01023', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (h("co-loader", { key: 'd5ab9e9a98b7a94c3c6f8d16682994666f1c5b18', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: 'eb62a8d79faff742108246565ede12ff7ee145f1', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: '4533b27e38469ab4ab6ddc9e918b408e136e097b', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
                 const active = tab.value === this.activeTab;
                 return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
-            }), this.hasMore && (h("co-chip", { key: '9253d7fc43c7f320af6af274dce8eca6d8543186', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: '5ae57716cf3337623c111d8b5f9fb941536324a6', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '7e11f7b777c590b0f728240e0fbea1808d0c07a5', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '67e2ba4b3a500522c7d89429359d5bd947096d8d', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
+            }), this.hasMore && (h("co-chip", { key: '4efe5ab79e9e5b3b5c973ff4bbc80caf2f49bb9c', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: 'd2e6d24d6d7aba13111d3f148bed12157e80ea6d', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '17abc91e955610afec6ef6c68aae5bac25bd6820', class: "co-command-search__fav", part: "favorites" }, h("div", { key: 'dc5dee8ec8f9d1a5c1dc9b4119e04ca4459750bf', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
                 ? groupItems(items).map(row => row.kind === 'header'
                     ? h("div", { class: "co-command-search__section", part: "section", role: "presentation" }, row.label)
                     : (h("div", { class: {

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

@@ -83,7 +83,11 @@ co-data-table {
 }
 
 .co-data-table__th--sortable:hover {
-  background: var(--co-semantic-surface-hover);
+  /* Layer the hover tint OVER the cell's opaque base (--co-color-base-blanco,
+     from .co-data-table__th) via background-image instead of REPLACING it with
+     the translucent tint. The header is sticky-top, so a see-through background
+     would let rows scrolled under it bleed through on hover. */
+  background-image: linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover));
 }
 
 /* ─── HEADER CONTENT ────────────────────────────────────────── */