@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/cjs/co-card.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
-const coCardCss = () => `:host{display:block}.co-card{display:flex;flex-direction:column;font-family:var(--co-font-family-primary);background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);overflow:hidden;box-sizing:border-box}.co-card--elevated{box-shadow:0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06)}.co-card--outlined{border:1px solid var(--co-semantic-border-subtle)}.co-card--flat{background:var(--co-semantic-surface-muted)}.co-card--pad-none .co-card__header,.co-card--pad-none .co-card__body,.co-card--pad-none .co-card__footer{padding:0}.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-md .co-card__header,.co-card--pad-md .co-card__body,.co-card--pad-md .co-card__footer{padding:var(--co-spacing-md) var(--co-spacing-lg)}.co-card--pad-lg .co-card__header,.co-card--pad-lg .co-card__body,.co-card--pad-lg .co-card__footer{padding:var(--co-spacing-lg) var(--co-spacing-xl)}.co-card__header:empty,.co-card__footer:empty{display:none}.co-card__header{border-bottom:1px solid var(--co-semantic-border-subtle)}.co-card__footer{border-top:1px solid var(--co-semantic-border-subtle)}.co-card--clickable{cursor:pointer;transition:box-shadow 0.15s 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)}.co-card--clickable:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}`;
+const coCardCss = () => `:host{display:block}:host([stretch]){height:100%}.co-card{display:flex;flex-direction:column;font-family:var(--co-font-family-primary);background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);overflow:hidden;box-sizing:border-box}.co-card--stretch{height:100%}.co-card--elevated{box-shadow:0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06)}.co-card--outlined{border:1px solid var(--co-semantic-border-subtle)}.co-card--flat{background:var(--co-semantic-surface-muted)}.co-card--pad-none .co-card__header,.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-sm) var(--co-spacing-md)}.co-card--pad-md .co-card__header,.co-card--pad-md .co-card__body,.co-card--pad-md .co-card__footer{padding:var(--co-spacing-md) var(--co-spacing-lg)}.co-card--pad-lg .co-card__header,.co-card--pad-lg .co-card__body,.co-card--pad-lg .co-card__footer{padding:var(--co-spacing-lg) var(--co-spacing-xl)}.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}.co-card--clickable{cursor:pointer;transition:box-shadow 0.2s ease, transform 0.2s ease}.co-card--clickable:hover{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{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}`;
 
 const CoCard = class {
     constructor(hostRef) {
@@ -13,15 +13,32 @@ const CoCard = class {
         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 (index.h("div", { key: '6b4f52af5fc9be705779b0965917552961dd1e3c', class: {
+        return (index.h("div", { key: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', 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 }, index.h("div", { key: 'fc8e0f408e41e7ae7266b1e2e6be5b2568a1eda5', class: "co-card__header", part: "header" }, index.h("slot", { key: 'd287de7e1ecdcbf015a0d5001646ae540947e8f2', name: "header" })), index.h("div", { key: '163e2aa54cb8b3c371af7ce98543e9fd3133e997', class: "co-card__body", part: "body" }, index.h("slot", { key: 'c78f6a0141d654c2ed86ac524decc2cdbc547fb4' })), index.h("div", { key: '75c86965c7b22aaa80b81684c3130935791c88c4', class: "co-card__footer", part: "footer" }, index.h("slot", { key: '0bd63594d516c0cd32c88be4f46414eb6aed5bb1', name: "footer" }))));
+                'co-card--stretch': this.stretch,
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("div", { key: '5617eec250a9bf610ff946eea91a9ce3a9779407', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, index.h("slot", { key: '62cc9bec88df0e538667425958addb114631a3a0', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: '2f47b30bece89900cf402bf4bfa6e8bc81a6a331', class: "co-card__body", part: "body" }, index.h("slot", { key: '252cd909fb7f094b7b806716b8e009858a1dd2c8' })), index.h("div", { key: 'aa2839cdf55f763bae3bd7fd61854ea0d513e9fa', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '0426f1e66c67a7b33789889a1daaea13f85969cc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
+    get el() { return index.getElement(this); }
 };
 CoCard.style = coCardCss();
 

package/dist/cjs/co-checkbox-group.cjs.entry.js

@@ -1,13 +1,15 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
-const coCheckboxGroupCss = () => `: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-checkbox-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-checkbox-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-checkbox-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-checkbox-group--disabled .co-checkbox-group__label,.co-checkbox-group--disabled .co-checkbox-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__options{display:flex;gap:var(--co-spacing-md)}.co-checkbox-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-checkbox-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-checkbox-group__item--disabled{cursor:not-allowed}.co-checkbox-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-checkbox-group__item--disabled .co-checkbox-group__option-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease;overflow:hidden}.co-checkbox-group__box--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs)}.co-checkbox-group__box--large{width:24px;height:24px;border-radius:var(--co-spacing-sm)}.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:transparent;border:1px solid var(--co-semantic-border-subtle)}.co-checkbox-group__box--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox-group__box--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox-group__box--small.co-checkbox-group__box--checked::after{width:7px;height:4px}.co-checkbox-group__box--large.co-checkbox-group__box--checked::after{width:10px;height:6px}.co-checkbox-group__box--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox-group--error .co-checkbox-group__box:not(.co-checkbox-group__box--checked){border-color:var(--co-semantic-status-error)}.co-checkbox-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-checkbox-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-checkbox-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-checkbox-group__helper--error .co-checkbox-group__helper-icon,.co-checkbox-group__helper--error .co-checkbox-group__helper-text{color:var(--co-semantic-status-error)}.co-checkbox-group__helper--success .co-checkbox-group__helper-icon,.co-checkbox-group__helper--success .co-checkbox-group__helper-text{color:var(--co-semantic-status-success)}.co-checkbox-group__helper--warning .co-checkbox-group__helper-icon,.co-checkbox-group__helper--warning .co-checkbox-group__helper-text{color:var(--co-color-status-review)}.co-checkbox-group__helper--info .co-checkbox-group__helper-icon,.co-checkbox-group__helper--info .co-checkbox-group__helper-text{color:var(--co-semantic-status-info)}`;
+const coCheckboxGroupCss = () => `: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-checkbox-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-checkbox-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-checkbox-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-checkbox-group--disabled .co-checkbox-group__label,.co-checkbox-group--disabled .co-checkbox-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__options{display:flex;gap:var(--co-spacing-md)}.co-checkbox-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-checkbox-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-checkbox-group__item--disabled{cursor:not-allowed}.co-checkbox-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-checkbox-group__item--disabled .co-checkbox-group__option-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease;overflow:hidden}.co-checkbox-group__box--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs)}.co-checkbox-group__box--large{width:24px;height:24px;border-radius:var(--co-spacing-sm)}.co-checkbox-group__box:not(.co-checkbox-group__box--checked){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)}.co-checkbox-group__box--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox-group__box--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox-group__box--small.co-checkbox-group__box--checked::after{width:7px;height:4px}.co-checkbox-group__box--large.co-checkbox-group__box--checked::after{width:10px;height:6px}.co-checkbox-group__box--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox-group--error .co-checkbox-group__box:not(.co-checkbox-group__box--checked){border-color:var(--co-semantic-status-error)}.co-checkbox-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-checkbox-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-checkbox-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-checkbox-group__helper--error .co-checkbox-group__helper-icon,.co-checkbox-group__helper--error .co-checkbox-group__helper-text{color:var(--co-semantic-status-error)}.co-checkbox-group__helper--success .co-checkbox-group__helper-icon,.co-checkbox-group__helper--success .co-checkbox-group__helper-text{color:var(--co-semantic-status-success)}.co-checkbox-group__helper--warning .co-checkbox-group__helper-icon,.co-checkbox-group__helper--warning .co-checkbox-group__helper-text{color:var(--co-color-status-review)}.co-checkbox-group__helper--info .co-checkbox-group__helper-icon,.co-checkbox-group__helper--info .co-checkbox-group__helper-text{color:var(--co-semantic-status-info)}: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}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:transparent}}`;
 
 const CoCheckboxGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coChange = index.createEvent(this, "coChange", 7);
+        /** 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) */
@@ -75,11 +77,11 @@ const CoCheckboxGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (index.h("div", { key: '8ee32aa13b2400827128fb157162319864a84d1b', class: {
+        return (index.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 && (index.h("div", { key: '65c1798c7a07466e12b588df18478e765bd7ac02', class: "co-checkbox-group__labels" }, this.label && index.h("span", { key: '14efc3cd4587e7d5ea2c690ab0b1f61dfb72563c', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: '6916d63a80dec81cb458da66bb0c9ef8fe002136', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: '67bfd91b5341f6fa46ed7421a6372f2d99bbad16', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (index.h("div", { key: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && index.h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (index.h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), index.h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -94,7 +96,7 @@ const CoCheckboxGroup = class {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), index.h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (index.h("div", { key: '88849855d7a87e47e85a13d7c1087407122965c5', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '49dcb6fef25409270d39a3488eb4b9a2997df96a', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), index.h("span", { key: '20154bc1731f79df63c0c119fd1150ccb626fc0c', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (index.h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (index.h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), index.h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/co-checkbox.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
-const coCheckboxCss = () => `:host{display:inline-flex;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-checkbox-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--checked){background:transparent;border:1px solid var(--co-semantic-border-subtle)}.co-checkbox--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
+const coCheckboxCss = () => `:host{display:inline-flex;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-checkbox-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--checked){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)}.co-checkbox--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox:not(.co-checkbox--checked){background:transparent}}`;
 
 const CoCheckbox = class {
     constructor(hostRef) {
@@ -33,16 +33,16 @@ const CoCheckbox = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'b625a299b62bc2f37a15ca5fcaa1f36546d4058c', class: {
+        return (index.h("div", { key: '3774b6812ff26ccc36ca477f0a9ed523b84f053c', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("span", { key: 'bc4c0309684cdedb4a053d33f326eaee3b9294c7', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.h("span", { key: '8a73af7e6841f80857ab034fdbfc5f687ecd9801', 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 && (index.h("span", { key: '22f24e0990f3f34458fb9163ac7e0dac55fd860e', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, part: "box" }), this.label && (index.h("span", { key: '24dd11a23fdefe9e7ee694c2f5dea6810cb8d62c', class: "co-checkbox__label", part: "label" }, this.label))));
     }
 };
 CoCheckbox.style = coCheckboxCss();

package/dist/cjs/co-chip.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
-const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);color:#fff}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.co-chip__icon-right{display:inline-flex;flex-shrink:0;align-items:center}.co-chip--large .co-chip__icon-left,.co-chip--large .co-chip__icon-right{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:0.7;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:1}.co-chip--large .co-chip__remove{width:14px;height:14px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}`;
+const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);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}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.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__dot{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right,.co-chip--small .co-chip__dot{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:1;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:0.7}.co-chip--large .co-chip__remove{width:16px;height:16px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}`;
 
 const CoChip = class {
     constructor(hostRef) {
@@ -26,8 +26,11 @@ const CoChip = class {
         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 */
@@ -51,9 +54,9 @@ const CoChip = class {
         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)
@@ -65,7 +68,7 @@ const CoChip = class {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (index.h(Tag, { key: '3e7de666616d51e9d47b1487d50d0422064ec19a', class: {
+        return (index.h(Tag, { key: 'd99b4031df6b255c1ada8fd6a4743fe1b1119d3b', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -75,7 +78,7 @@ const CoChip = class {
                 '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 && (index.h("span", { key: '05b2c0b0b1fe7e0990280cc6d23a2f42dc0a9967', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: '419cc3a0ea59fd2665c04b2f038dfd8de5a36e1f', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: '89d503ba64e57cc23cc93afbcf940ec0f2565c43', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: '39859921763324755975405e4651faca5a6613cb', name: "icon-left" }))), index.h("span", { key: '8100ebb0c093432ac4e73f0de37de5073c12e3d6', class: "co-chip__label" }, index.h("slot", { key: 'dc9b8afe1c8c5f16c9b9f9aac7fdd3c488e2c677' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: '02fc908ad6a03e61b55cc991a066a553b8980fdc', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '030e2339b9a6fd4e87105dbad3b0d2ce1b799c41', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: '004133074573b2988e24328e534b39822df82112', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: 'f9336a3adff891707e139977e88e697286570894', name: "icon-right" }))), this.removable && (index.h("span", { key: '17c0dfcd42cbebee9ce30adb30a677e3d215c0b5', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.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.dot && (index.h("span", { key: '7d65ad877a914122911524600347a9f568082875', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: '25f2d43becce555ae671fcdfb0369a5c5dc783aa', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '77bac8466e6b47339c503213f6498bd3e1f5f430', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'e487eb428c8ea3f6e2caa75684ea89b8ae7bbafe', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: '209e199ea5ec9682507c33a218e0639273fc1ae2', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: 'e589f0ea28365043fd51d1f06157ea618291be16', name: "icon-left" }))), index.h("span", { key: '08a575e1cd0ea92b0193d10e988b1c300b33caa2', class: "co-chip__label" }, index.h("slot", { key: 'a296df6fb688b28670ae6224b4affb841e8659bc' }, this.label)), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: 'f014692392576afa93a4ea856a5c3842dd3ede8e', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '048d42664c073f234d4066b44946c1a5c0190dc1', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: 'd45c8b9801a370aa3d29bd24994bcafe42a14c59', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: 'cf26f624dc1442d97c588fb7adc80d0ab685cafd', name: "icon-right" }))), this.removable && (index.h("span", { key: '411bce99361ef1ec436572bf061077372f11b38b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'e5a0ac43fc8912e6e9f69aef0886a8bb96f80910', name: "x-circle", size: removeIconSize, weight: "fill" })))));
     }
 };
 CoChip.style = coChipCss();

package/dist/cjs/co-color-picker.cjs.entry.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var index = require('./index-BumlM92r.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.js');
+
+/**
+ * Default color presets derived from Cobalt design tokens (base.json).
+ * Uses primary colors + secondary-100 (full saturation, best contrast).
+ * Names are English by default — consumers can override with translated presets.
+ */
+const DEFAULT_PRESETS = [
+    { name: 'Green', value: '#02A270' },
+    { name: 'Yellow', value: '#FDBF00' },
+    { name: 'Blue', value: '#2563EB' },
+    { name: 'Pink', value: '#F32A73' },
+    { name: 'Red', value: '#EB1E1E' },
+    { name: 'Orange', value: '#F0821E' },
+    { name: 'Teal', value: '#00AFAF' },
+    { name: 'Light blue', value: '#00BEE6' },
+    { name: 'Electric blue', value: '#000AFF' },
+    { name: 'Violet', value: '#5F4BD7' },
+    { name: 'Burgundy', value: '#811137' },
+    { name: 'Olive', value: '#AAB43C' },
+];
+
+const coColorPickerCss = () => `: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}.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)')}.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: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;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.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)}.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)}.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}.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)}.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)}.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)}: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}@supports not (background: color-mix(in srgb, red, transparent)){.co-color-picker__trigger{background:var(--co-semantic-surface-secondary)}}`;
+
+const CoColorPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        /** Current color value as hex string (e.g. "#0066FF"). */
+        this.value = '';
+        /** Placeholder text when no color is selected. */
+        this.placeholder = 'Select color';
+        /** Disable the field. */
+        this.disabled = false;
+        /** Show required indicator. */
+        this.required = false;
+        /** Validation status. */
+        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.
+         */
+        this.presets = '';
+        this.isOpen = false;
+        this.copied = false;
+        this.handlePopoverOpen = () => {
+            this.isOpen = true;
+        };
+        this.handlePopoverClose = () => {
+            this.isOpen = false;
+        };
+    }
+    get parsedPresets() {
+        if (Array.isArray(this.presets)) {
+            return this.presets.map(p => typeof p === 'string' ? { name: p, value: p } : p);
+        }
+        if (typeof this.presets === 'string' && this.presets.trim()) {
+            try {
+                const parsed = JSON.parse(this.presets);
+                if (Array.isArray(parsed)) {
+                    return parsed.map((p) => typeof p === 'string' ? { name: p, value: p } : p);
+                }
+            }
+            catch ( /* ignore */_a) { /* ignore */ }
+        }
+        return DEFAULT_PRESETS;
+    }
+    handleSwatchClick(hex) {
+        this.value = hex;
+        this.coChange.emit(hex);
+        this.isOpen = false;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+        };
+        return map[this.status] || null;
+    }
+    async handleCopy() {
+        if (!this.value)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.copied = true;
+            setTimeout(() => { this.copied = false; }, 1500);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    render() {
+        const presets = this.parsedPresets;
+        const hasValue = !!this.value;
+        const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
+        return (index.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 && (index.h("label", { key: '22c1c3fae1990c3375772d520efb752b13b841c8', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'd91a7a773586595b9ca203ea904b2eb7699414bb', required: this.required }))), index.h("co-popover", { key: '2d245e3b5735ed5dfdc4dd43479930e9fdb6f76f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '1a75d6f5c28fe1d00b21584a31ec91915aebcbe7', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: 'f015db7975d7fcffdbbd20a7b88dba44f104eccb', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '4842f2556ad37910f414bc253fafc1f8f2c81361', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: 'c34ec92aaf66b01f3566f8f8106419dfc87aefa5', class: "co-color-picker__panel" }, index.h("div", { key: '3b904bca6d819e6f273ebf418f7f5495e36d31f8', class: "co-color-picker__grid" }, presets.map((preset) => {
+            var _a;
+            return (index.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 && (index.h("div", { key: '0aebb34354565e53e1364ef66bb7750decc2ae77', class: "co-color-picker__hex-row" }, index.h("span", { key: 'b959d588d52fe4546ebcb374a0d5129dfb37cd2f', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '11ef3b1879fefe31d64c18e26eaa349679135c0c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.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() }, index.h("co-icon", { key: 'a8b5e746c2ad6116e700ffbb8082c4d3f02b8ff8', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '584a9507206c54a75f266edf227a88543114a94c', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: '0b58cacf5ab2da011e3a6c98ffc1f8ac04dd9819', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '96f2fafb678ba77c8aabb8bd979b6676eb4ac634', class: "co-color-picker__helper-text" }, this.helperText)))));
+    }
+    get el() { return index.getElement(this); }
+};
+CoColorPicker.style = coColorPickerCss();
+
+exports.co_color_picker = CoColorPicker;