@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

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

@@ -2,6 +2,10 @@
   display: block;
 }
 
+:host([stretch]) {
+  height: 100%;
+}
+
 .co-card {
   display: flex;
   flex-direction: column;
@@ -12,6 +16,10 @@
   box-sizing: border-box;
 }
 
+.co-card--stretch {
+  height: 100%;
+}
+
 /* ─── VARIANTS ──────────────────────────────────────────────── */
 .co-card--elevated {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
@@ -30,9 +38,12 @@
 .co-card--pad-none .co-card__body,
 .co-card--pad-none .co-card__footer { padding: 0; }
 
+.co-card--pad-none .co-card__header { border-bottom: none; }
+.co-card--pad-none .co-card__footer { border-top: none; }
+
 .co-card--pad-sm .co-card__header,
 .co-card--pad-sm .co-card__body,
-.co-card--pad-sm .co-card__footer { padding: var(--co-spacing-sm2) var(--co-spacing-md); }
+.co-card--pad-sm .co-card__footer { padding: var(--co-spacing-sm) var(--co-spacing-md); }
 
 .co-card--pad-md .co-card__header,
 .co-card--pad-md .co-card__body,
@@ -43,25 +54,37 @@
 .co-card--pad-lg .co-card__footer { padding: var(--co-spacing-lg) var(--co-spacing-xl); }
 
 /* ─── SECTIONS ──────────────────────────────────────────────── */
-.co-card__header:empty,
-.co-card__footer:empty { display: none; }
+.co-card__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 .co-card__header {
   border-bottom: 1px solid var(--co-semantic-border-subtle);
 }
 
+.co-card__header--empty { display: none; }
+
 .co-card__footer {
   border-top: 1px solid var(--co-semantic-border-subtle);
 }
 
+.co-card__footer--empty { display: none; }
+
 /* ─── CLICKABLE ─────────────────────────────────────────────── */
 .co-card--clickable {
   cursor: pointer;
-  transition: box-shadow 0.15s ease;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .co-card--clickable:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
+  transform: translateY(-2px);
+}
+
+.co-card--clickable:active {
+  transform: translateY(0);
 }
 
 .co-card--clickable:focus-visible {

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 /**
- * @slot header  - Card header area (title, actions)
+ * @slot header  - Card header area (image, title, actions)
  * @slot         - Default slot for card body/content
- * @slot footer  - Card footer area
+ * @slot footer  - Card footer area (meta, actions)
  */
 export class CoCard {
     constructor() {
@@ -12,14 +12,30 @@ export class CoCard {
         this.padding = 'md';
         /** Make the card fully clickable */
         this.clickable = false;
+        /** Stretch the card to fill parent height */
+        this.stretch = false;
+        this.hasHeader = false;
+        this.hasFooter = false;
+        this.handleHeaderSlotChange = () => {
+            this.hasHeader = this.checkSlot('header');
+        };
+        this.handleFooterSlotChange = () => {
+            this.hasFooter = this.checkSlot('footer');
+        };
+    }
+    checkSlot(slotName) {
+        var _a, _b, _c;
+        const nodes = (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`)) === null || _b === void 0 ? void 0 : _b.assignedElements()) !== null && _c !== void 0 ? _c : [];
+        return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '6b4f52af5fc9be705779b0965917552961dd1e3c', class: {
+        return (h("div", { key: '367df4153fcf63fd11373169e970f3282a938337', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'fc8e0f408e41e7ae7266b1e2e6be5b2568a1eda5', class: "co-card__header", part: "header" }, h("slot", { key: 'd287de7e1ecdcbf015a0d5001646ae540947e8f2', name: "header" })), h("div", { key: '163e2aa54cb8b3c371af7ce98543e9fd3133e997', class: "co-card__body", part: "body" }, h("slot", { key: 'c78f6a0141d654c2ed86ac524decc2cdbc547fb4' })), h("div", { key: '75c86965c7b22aaa80b81684c3130935791c88c4', class: "co-card__footer", part: "footer" }, h("slot", { key: '0bd63594d516c0cd32c88be4f46414eb6aed5bb1', name: "footer" }))));
+                'co-card--stretch': this.stretch,
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'b4982545b85e282689a225cb80449af5892501ca', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'd0c52d3723f589791da10d7703682badb0f177af', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '93cff67dd2bf85783cbed1ae771ee3e785a055ae', class: "co-card__body", part: "body" }, h("slot", { key: 'faab1fb05116ffd7930c18f8e6d63ec0451a9148' })), h("div", { key: '82266309c58c84c4f893504183d1f73476421100', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '424742e9313399395d85cc46bf5b08561e836908', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }
@@ -94,7 +110,34 @@ export class CoCard {
                 "reflect": false,
                 "attribute": "clickable",
                 "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the card to fill parent height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stretch",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasHeader": {},
+            "hasFooter": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }

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

@@ -26,16 +26,16 @@ export class CoCheckbox {
         };
     }
     render() {
-        return (h("div", { key: 'b625a299b62bc2f37a15ca5fcaa1f36546d4058c', class: {
+        return (h("div", { key: 'f10bb5afb8820e35d6ba5ecdaccaf101e0b4b2ed', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: 'bc4c0309684cdedb4a053d33f326eaee3b9294c7', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '191a4c3ce30ca393fe229626d0cb1166d18ba4ae', 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--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, part: "box" }), this.label && (h("span", { key: '22f24e0990f3f34458fb9163ac7e0dac55fd860e', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, part: "box" }), this.label && (h("span", { key: 'e4d3641d5f6d2b6ea78f801d50cc62a21d566478', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -196,3 +196,29 @@
 .co-checkbox-group__helper--info .co-checkbox-group__helper-text {
   color: var(--co-semantic-status-info);
 }
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-checkbox-group {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-checkbox-group__labels {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: 0;
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-checkbox-group__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-checkbox-group > :not(.co-checkbox-group__labels) {
+  grid-column: 2;
+  min-width: 0;
+}

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

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class CoCheckboxGroup {
     constructor() {
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         /** Validation status */
         this.status = 'default';
         /** Currently selected values (JSON string or string array) */
@@ -68,11 +70,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: '8ee32aa13b2400827128fb157162319864a84d1b', class: {
+        return (h("div", { key: '31a21f7d7b30ad1e0f55089aca62fd2aa0248a21', 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: '65c1798c7a07466e12b588df18478e765bd7ac02', class: "co-checkbox-group__labels" }, this.label && h("span", { key: '14efc3cd4587e7d5ea2c690ab0b1f61dfb72563c', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '6916d63a80dec81cb458da66bb0c9ef8fe002136', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '67bfd91b5341f6fa46ed7421a6372f2d99bbad16', class: {
+            }, 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: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -87,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: '88849855d7a87e47e85a13d7c1087407122965c5', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '49dcb6fef25409270d39a3488eb4b9a2997df96a', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '20154bc1731f79df63c0c119fd1150ccb626fc0c', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), 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)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +162,26 @@ export class CoCheckboxGroup {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,

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

@@ -62,7 +62,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '3e7de666616d51e9d47b1487d50d0422064ec19a', class: {
+        return (h(Tag, { key: '8e94cb3fc83ce53f93f565028849c28a3a479dbd', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -72,7 +72,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: '05b2c0b0b1fe7e0990280cc6d23a2f42dc0a9967', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '419cc3a0ea59fd2665c04b2f038dfd8de5a36e1f', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '89d503ba64e57cc23cc93afbcf940ec0f2565c43', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '39859921763324755975405e4651faca5a6613cb', name: "icon-left" }))), h("span", { key: '8100ebb0c093432ac4e73f0de37de5073c12e3d6', class: "co-chip__label" }, h("slot", { key: 'dc9b8afe1c8c5f16c9b9f9aac7fdd3c488e2c677' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '02fc908ad6a03e61b55cc991a066a553b8980fdc', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '030e2339b9a6fd4e87105dbad3b0d2ce1b799c41', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '004133074573b2988e24328e534b39822df82112', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'f9336a3adff891707e139977e88e697286570894', name: "icon-right" }))), this.removable && (h("span", { key: '17c0dfcd42cbebee9ce30adb30a677e3d215c0b5', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '76adc4bebfe935b7a7852eb4c4c6cc1375f2aa53', name: "x-circle", size: removeIconSize, weight: "fill" })))));
+            }, 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" })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,224 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+.co-color-picker--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Label ───────────────────────────────────────────────── */
+.co-color-picker__label {
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  color: var(--co-semantic-text-secondary);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}
+
+/* ── Trigger ─────────────────────────────────────────────── */
+.co-color-picker co-popover {
+  display: block;
+  width: 100%;
+}
+
+.co-color-picker__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  background: var(--co-semantic-surface-secondary);
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-xs);
+  min-height: 40px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.co-color-picker__trigger:hover {
+  border-color: var(--co-semantic-border-default);
+}
+
+.co-color-picker--open .co-color-picker__trigger {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
+}
+
+.co-color-picker--error .co-color-picker__trigger {
+  border-color: var(--co-color-status-error);
+}
+
+.co-color-picker__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--co-border-radius-full);
+  border: 1px solid var(--co-semantic-border-subtle);
+  flex-shrink: 0;
+}
+
+.co-color-picker__value {
+  flex: 1;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--co-semantic-text-default);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.co-color-picker__value--empty {
+  color: var(--co-semantic-text-muted);
+  font-weight: 400;
+}
+
+/* ── Panel ───────────────────────────────────────────────── */
+.co-color-picker__panel {
+  padding: var(--co-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+}
+
+.co-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: var(--co-spacing-sm2);
+}
+
+.co-color-picker__grid-item {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--co-border-radius-xxs);
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.1s ease, border-color 0.1s ease;
+  box-sizing: border-box;
+}
+
+.co-color-picker__grid-item:hover {
+  transform: scale(1.1);
+}
+
+.co-color-picker__grid-item--selected {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent);
+}
+
+/* ── Hex row ─────────────────────────────────────────────── */
+.co-color-picker__hex-row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  background: var(--co-semantic-surface-secondary);
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-color-picker__hex-prefix {
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  font-weight: 500;
+}
+
+.co-color-picker__hex-value {
+  flex: 1;
+  font-size: var(--co-font-size-14);
+  font-family: var(--co-font-family-mono, monospace);
+  color: var(--co-semantic-text-default);
+  text-transform: uppercase;
+  user-select: all;
+}
+
+.co-color-picker__copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--co-spacing-xs);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  border-radius: var(--co-border-radius-xxs);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.co-color-picker__copy-btn:hover {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-color-picker__copy-btn--copied {
+  color: var(--co-color-status-success);
+}
+
+/* ── Helper ──────────────────────────────────────────────── */
+.co-color-picker__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-muted);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-color-picker__helper-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.co-color-picker--error .co-color-picker__helper {
+  color: var(--co-semantic-status-error);
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-color-picker {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-color-picker__label {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-color-picker__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-color-picker > :not(.co-color-picker__label) {
+  grid-column: 2;
+  min-width: 0;
+}