@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -90,6 +90,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 +247,23 @@ button.co-chip--disabled {
    ICON SLOTS & REMOVE BUTTON
    ═══════════════════════════════════════════════════════════════ */
 .co-chip__icon-left,
-.co-chip__icon-right {
+.co-chip__icon-right,
+.co-chip__dot {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
 }
 
 .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 +274,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 +283,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 {

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

@@ -23,8 +23,11 @@ export class CoChip {
         this.color = 'default';
         /** Icon weight applied to prop-based iconLeft / iconRight. */
         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,9 +51,9 @@ 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 removeIconSize = this.size === 'large' ? 16 : 10;
+        // 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;
         let effectiveIconMode;
         if (hasAnyLeft && hasAnyRight)
@@ -62,7 +65,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '8e94cb3fc83ce53f93f565028849c28a3a479dbd', class: {
+        return (h(Tag, { key: 'd99b4031df6b255c1ada8fd6a4743fe1b1119d3b', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -72,7 +75,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: '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" })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -172,8 +175,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,
@@ -277,14 +280,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); }
+}

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

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

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

@@ -165,13 +165,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: '49be1e863b1bf55a1c80cdb840a2df1abe863bf1', class: {
+        return (h("div", { key: '0097275adfbd4a8f61ecba251568914d02b18e24', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ebd5ecc3f9b3445c78406dc9d6c8713b1286e03f', class: "co-column-picker__labels" }, this.label && h("label", { key: 'e397c8718a158311bc710d792007f2babe5a5195', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '242cd81ea707193f59f016da58739fee1bfd61c8', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '7a8cdc490af2be181d235a0a42a44386e5ce3a51', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '957e1979f0a940ee12e21c5ca6ad5c2605057778', class: "co-column-picker__search" }, h("co-icon", { key: 'c828aa61afdb223205a4006ef7f7518be8f851da', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'de96b64126a49ed365c6edda08503caabcd5f992', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: 'a14e1afe2498edc0e3701a6f547ca99cc25f930a', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'da5ce1f1fe1660b6e9bc6cbfa1ebb6362a756e84', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'a64cd6debf2a138e7262e0c94aafb4449d33df81', class: "co-column-picker__toolbar" }, h("button", { key: 'e5a337595da0f08efe81b89f41cd40dfee38568a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '13c2914c19c8e61ffb9573f8483bd1b11d7e399c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '1af20f2508a9f028d27b5736eaa89af8876153f6', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'ae1736fca857c7a778a687f4e14e736c4560dc3f', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '13e0cd91b2611b436b44d851b57312bb4e517e3b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'fc6cc54ef7737a02922b0a0c12db64a52580b51a', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '63aeaef90a9b72c51c3bbd07da721d7c5391ddcb', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '9cd4f45dd0c182e50b219f5b6ff240a2e752ba94', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '09a43ae8972be6b03d1117a2116175ca59a95a68', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f0fc5ff8125baf3412a90045b2c9bb7238a6c951', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '72de44605e22d553bd484b9dbd0c91f17e817f52', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '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)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -241,16 +241,16 @@ export class CoCombobox {
     render() {
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: '321b5eaa234f7beff8a8ee692783b7b4b1836cf9', class: {
+        return (h("div", { key: '335a823bd69e0d57af567bd92befdc31b2449612', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 'co-combobox--filled': this.hasValue,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '8249758858a3df01b75aba4e15dd330b6267954c', class: "co-combobox__labels" }, this.label && h("label", { key: '118174e83d0b93879efc0804197e1751556ea8c6', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: 'bf5acbcacd3466f6c104671347af57949fc6dc0a', required: this.required })), this.secondaryLabel && (h("span", { key: 'dc0c26636209f9f092d773476a3edc9ea9e19414', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'e42a22d9ed6aeb0951221d38ba7a052073602063', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '34c4f4c3c573e6a4ff3310eac46c1878d9b6af71', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '47940335029da3a40292d4de5f5582dbf7873238', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '47e87dcde91566a2f4ecb54ef1af70f8b60e3044', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => this.handleRemoveOption(e, opt.value) }))))) : (h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '690ffddf411810f8fd5828914a157b2e888d2034', class: "co-combobox__labels" }, this.label && h("label", { key: '6a7b3f9cc3761e43b702d4086553bb0e3039360d', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: 'acc1ca3c620d928bdadb17b42906f46fa9e09581', required: this.required })), this.secondaryLabel && (h("span", { key: 'b5d6b6d6acbd12e866a836a5545dbc69c8f885f0', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'e7d3d4fcbc8e5cb70da61c046ffbb7b3611e0c6a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'cc07aefc63d82777d8caf01929a8d7c356bf5007', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '06690ca640c14bfbbb5e34ea8a1e85efc7fa5640', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '8c93b09f144f23fabaead4286b4910ad2da676cc', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => this.handleRemoveOption(e, opt.value) }))))) : (h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'fda02e6a0dbbd57fd40370b55172ab886ab4c758', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '5c62b271fd8b3bef832a568646b787c491acd356', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: '1ced712e669917dc2283bf2d1022c83e73179c65', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'b6cac2f10d82878c5cb7f770f079bd6c1095dde2', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '5191223b7f9851ee2af96e6455b0b4d20f5425ad', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (h("div", { key: 'a69808aee8fc79aca8c208e18a2aa52e14a324a8', class: "co-combobox__search", part: "search" }, h("co-icon", { key: '5325687113fee74658513b427d073e972029bf3e', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), h("input", { key: '5d6c81c825f1c4f3bb191d92ba77f7a0ac57dfcf', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), h("div", { key: '9f2a901c16b799009072dc2f0bd0ca00bd37bd39', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'a01c9e41462e5d449b1dccfcd9e174dabc88f296', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'f832fdba50c709bf7b53f2d3271b68f8ad51f7fc', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'fc4f790ad7842769d5a0e0a7655da17ef57fdd72', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '9280e1d22d8bfa69c1cc40abdd926ae91751db67', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '3724c9e0424fc971a2bd4f509e66a658d678d3ce', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (h("div", { key: 'dc05b68524224a2132f328537e653bf1923e1974', class: "co-combobox__search", part: "search" }, h("co-icon", { key: '550f7cd1af9076fd7ed6fea1621b0b698d7be40b', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), h("input", { key: '5a7c2544d673ccb3c82b8b4ba02351664fb017f6', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), h("div", { key: '621fd43f35764335737d9d572fa6f5f5e6673959', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-combobox__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(option => {
                 const isSelected = selected.includes(option.value);
@@ -259,7 +259,7 @@ export class CoCombobox {
                         'co-combobox__option--selected': isSelected,
                     }, onClick: () => this.handleOptionClick(option.value), part: "option" }, h("div", { class: "co-combobox__option-content" }, option.icon && (h("div", { class: "co-combobox__option-icon-wrapper" }, h("co-icon", { name: option.icon, size: 20, class: "co-combobox__option-icon" }))), h("span", { class: "co-combobox__option-label" }, this.renderLabel(option.label))), isSelected && this.multiple && (h("button", { class: "co-combobox__option-remove", type: "button", tabIndex: -1, onClick: (e) => this.handleRemoveOption(e, option.value), "aria-label": `Remove ${option.label}` }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.multiple && (h("co-icon", { name: "check", size: 16, class: "co-combobox__option-check" }))));
             }))));
-        })()), this.showFooter && (h("div", { key: 'dcbdadcac614ad0353deabfa162caf2bb4d6a78b', class: "co-combobox__footer", part: "footer" }, h("button", { key: '58e612399b71a275a36de3bb4399fc7129055fd4', class: "co-combobox__footer-btn co-combobox__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { key: 'df2b0e268425e0c58caff3afa8fbe7a8432de254', name: "plus", size: 16 }), h("span", { key: '7693a04b6c169b8ff328ff13f6a08504c81ec5a3' }, this.footerSecondaryLabel)), h("button", { key: '76958fdbf1f1f612d99f039f269e41be229cbe51', class: "co-combobox__footer-btn co-combobox__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { key: '5ad00679c8390061140d85e852f31b59ea312b08', name: "plus", size: 16 }), h("span", { key: '42e02f75d57fbe5cf16936b330cf53991047256a' }, this.footerPrimaryLabel)))))), this.helperText && (h("div", { key: '0d1afe7bbb9bd678c7918bfb7e14c3b5df7afacb', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'f89aa1659f328d016ea2e787423db4de3bd158c9', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: '33ce544bf337562ed4b5d94cdaa03346f2a9b405', class: "co-combobox__helper-text" }, this.helperText)))));
+        })()), this.showFooter && (h("co-list-footer", { key: '6ae233e2944648a21c09c3ef252cb89b05be86e3', secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '6896e1e0ae6f7a29f9b3916759f57adc65c4ba4b', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: 'a4e65d03cf076985fd72c835143718fb5e3b39ba', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: '83ed79b8f7cd06824619e5a337d3dd373c098f37', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }