@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h, a as getElement } from './index-BKmfyPZK.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) {
@@ -11,15 +11,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 (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 }))));
     }
+    get el() { return getElement(this); }
 };
 CoCard.style = coCardCss();
 

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

@@ -1,11 +1,13 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.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: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)}: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}`;
 
 const CoCheckboxGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coChange = 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) */
@@ -73,11 +75,11 @@ const CoCheckboxGroup = class {
         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 => {
@@ -92,7 +94,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 }), 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 watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.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}`;
 
@@ -31,16 +31,16 @@ const CoCheckbox = class {
         };
     }
     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))));
     }
 };
 CoCheckbox.style = coCheckboxCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.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%}`;
 
@@ -63,7 +63,7 @@ const CoChip = class {
         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,
@@ -73,7 +73,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 && (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" })))));
     }
 };
 CoChip.style = coChipCss();

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

@@ -0,0 +1,107 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.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: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}.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}`;
+
+const CoColorPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coChange = 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';
+        /**
+         * 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 (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) => {
+            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)))));
+    }
+    get el() { return getElement(this); }
+};
+CoColorPicker.style = coColorPickerCss();
+
+export { CoColorPicker as co_color_picker };