@prolibu-suite/cobalt-core 0.2.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;
@@ -63,7 +69,9 @@
 
 /* ─── UNCHECKED ─────────────────────────────────────────────── */
 .co-checkbox:not(.co-checkbox--checked) {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
 }
 
@@ -89,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;
@@ -113,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;
@@ -124,3 +142,54 @@
   cursor: not-allowed;
   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: 'f10bb5afb8820e35d6ba5ecdaccaf101e0b4b2ed', 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: '191a4c3ce30ca393fe229626d0cb1166d18ba4ae', 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: 'e4d3641d5f6d2b6ea78f801d50cc62a21d566478', 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-checkbox-group/co-checkbox-group.css

@@ -114,7 +114,9 @@
 
 /* unchecked */
 .co-checkbox-group__box:not(.co-checkbox-group__box--checked) {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
 }
 
@@ -222,3 +224,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-checkbox-group__box:not(.co-checkbox-group__box--checked) { background: transparent; }
+}

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

@@ -70,11 +70,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: '31a21f7d7b30ad1e0f55089aca62fd2aa0248a21', class: {
+        return (h("div", { key: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
                 'co-checkbox-group': true,
                 'co-checkbox-group--disabled': this.disabled,
                 [`co-checkbox-group--${this.status}`]: this.status !== 'default',
-            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '5475404c44f73b09f3948afa37d5ab2320e14036', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'ddd9771fce971ecbe05d038ef856db5efaa0e386', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '31c3600460a9158f99ce938d6fb0d152cef24943', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e8d24c155e3329d14669f7bd093334014ffdef14', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -89,7 +89,7 @@ export class CoCheckboxGroup {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (h("div", { key: '26b079c180ca89b06b2bda56f7908655ffc4449d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'bac2a02e17019b394bacdc0a2da34487693f67c1', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: 'b382acd3031974618a24a75e616faf637f84b75f', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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.
@@ -90,6 +96,23 @@ button.co-chip:focus-visible {
   color: #fff;
 }
 
+.co-chip--filled.co-chip--pending {
+  background: var(--co-color-status-pending);
+  color: #fff;
+}
+.co-chip--filled.co-chip--progress {
+  background: var(--co-color-status-progress);
+  color: #fff;
+}
+.co-chip--filled.co-chip--review {
+  background: var(--co-color-status-review);
+  color: #fff;
+}
+.co-chip--filled.co-chip--submitted {
+  background: var(--co-color-status-submitted);
+  color: #fff;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    VARIANT: OUTLINED (transparent bg, border, dark text)
    ═══════════════════════════════════════════════════════════════ */
@@ -230,20 +253,29 @@ button.co-chip--disabled {
    ICON SLOTS & REMOVE BUTTON
    ═══════════════════════════════════════════════════════════════ */
 .co-chip__icon-left,
-.co-chip__icon-right {
+.co-chip__icon-right,
+.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__icon-right,
+.co-chip--large .co-chip__dot {
   width: 16px;
   height: 16px;
 }
 
 .co-chip--small .co-chip__icon-left,
-.co-chip--small .co-chip__icon-right {
+.co-chip--small .co-chip__icon-right,
+.co-chip--small .co-chip__dot {
   width: 10px;
   height: 10px;
 }
@@ -254,7 +286,7 @@ button.co-chip--disabled {
   flex-shrink: 0;
   align-items: center;
   cursor: pointer;
-  opacity: 0.7;
+  opacity: 1;
   transition: opacity 0.1s ease;
   border: none;
   background: transparent;
@@ -263,12 +295,12 @@ button.co-chip--disabled {
 }
 
 .co-chip__remove:hover {
-  opacity: 1;
+  opacity: 0.7;
 }
 
 .co-chip--large .co-chip__remove {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .co-chip--small .co-chip__remove {
@@ -281,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,14 +17,20 @@ 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 */
+        /** Show dismiss/remove button and emit coRemove on click. Reflected so it
+         *  survives lazy hydration when set via a framework wrapper. */
         this.removable = false;
+        /** Show a leading colour dot (status/value colour). Reflected for hydration. */
+        this.dot = false;
         /** Make the chip clickable (emits coClick) */
         this.clickable = false;
         /** Disabled state */
@@ -48,10 +54,12 @@ export class CoChip {
         const hasLeftSlot = this.iconMode === 'left' || this.iconMode === 'both';
         const hasRightSlot = this.iconMode === 'both' && !this.removable;
         const iconSize = this.size === 'large' ? 16 : 10;
-        const removeIconSize = this.size === 'large' ? 14 : 10;
-        // Determine effective icon mode for CSS padding
-        const hasAnyLeft = hasLeftSlot || !!this.iconLeft;
-        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable;
+        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 || !!this.trailingIcon;
         let effectiveIconMode;
         if (hasAnyLeft && hasAnyRight)
             effectiveIconMode = 'both';
@@ -62,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '8e94cb3fc83ce53f93f565028849c28a3a479dbd', class: {
+        return (h(Tag, { key: '2a0ec169b9c4ec0516d275d3787f7f02bcc4815f', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -72,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.iconLeft && !hasLeftSlot && (h("span", { key: '80e0a7ff126606a7aba11d38d76d7edd9363d611', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'd7118005c74ee93e5d0aecae0eaafd9be97193a9', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'd5984fa72cb57b7c7b362766e67a68f436bff041', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '11fc498b242ac3092048d6b818ed86812e7350e8', name: "icon-left" }))), h("span", { key: 'cd50714d03e4d87dbbad6c0e9f1ed08158991014', class: "co-chip__label" }, h("slot", { key: 'd39ab68830d70c7c5bd26772426108e1a092cc24' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'd04f8b0b2220af25e5660c8fedb8479c85f925a0', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '86588187fd73c183399fdb5297fe708970b60086', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'd729d2e1828f2377462c31ca4497db4a720cb8dc', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'b5ec5e777bf02e80fca2ec7d66c7e177b412cbc0', name: "icon-right" }))), this.removable && (h("span", { key: 'db8a8b04c0e76ccb3f61dcf099b91a86ee249af8', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '0b112fe84652534b42758283a70fa50c2c191cff', 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"; }
@@ -152,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,
@@ -172,8 +180,8 @@ export class CoChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "original": "| 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'\n    | 'pending' | 'progress' | 'review' | 'submitted'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"pending\" | \"primary\" | \"progress\" | \"review\" | \"submitted\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -257,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,
@@ -265,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,
@@ -277,14 +323,53 @@ export class CoChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show dismiss/remove button and emit coRemove on click"
+                    "text": "Show dismiss/remove button and emit coRemove on click. Reflected so it\nsurvives lazy hydration when set via a framework wrapper."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "removable",
                 "defaultValue": "false"
             },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a leading colour dot (status/value colour). Reflected for hydration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "dotColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the leading dot (hex or any CSS colour). Reflected for hydration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dot-color"
+            },
             "clickable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -52,7 +52,9 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
@@ -61,6 +63,34 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48).
+   The 24px swatch shrinks on the compact sizes so it fits the height. ── */
+.co-color-picker--s .co-color-picker__trigger {
+  min-height: 28px;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+}
+
+.co-color-picker--sm .co-color-picker__trigger {
+  min-height: 32px;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-14);
+}
+
+/* md is the default (40px) — no override needed */
+
+.co-color-picker--lg .co-color-picker__trigger {
+  min-height: 48px;
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-16);
+}
+
+.co-color-picker--s .co-color-picker__swatch,
+.co-color-picker--sm .co-color-picker__swatch {
+  width: 18px;
+  height: 18px;
+}
+
 .co-color-picker__trigger:hover {
   border-color: var(--co-semantic-border-default);
 }
@@ -222,3 +252,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-color-picker__trigger { background: var(--co-semantic-surface-secondary); }
+}