@prolibu-suite/cobalt-core 0.4.0 → 0.5.0

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
-import { initOverlayScroll } from "../../utils/overlayScroll";
 export class CoAutocomplete {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -21,12 +20,11 @@ export class CoAutocomplete {
         /** Minimum characters before emitting coSearch */
         this.minChars = 1;
         /** Debounce time in ms for coSearch */
-        this.debounce = 300;
+        this.searchDebounce = 300;
         /** Message when options are empty after search */
-        this.emptyText = 'No results';
+        this.emptyMessage = 'No results';
         this.isOpen = false;
         this.query = '';
-        this.scrollTop = 0;
         this.focused = false;
         this.handleInput = (e) => {
             const q = e.target.value;
@@ -34,7 +32,7 @@ export class CoAutocomplete {
             if (this.debounceTimer)
                 clearTimeout(this.debounceTimer);
             if (q.length >= this.minChars) {
-                this.debounceTimer = setTimeout(() => this.coSearch.emit(q), this.debounce);
+                this.debounceTimer = setTimeout(() => this.coSearch.emit(q), this.searchDebounce);
                 this.isOpen = true;
             }
             else {
@@ -54,35 +52,43 @@ export class CoAutocomplete {
             this.value = this.multiple ? '[]' : '';
             this.isOpen = false;
             this.coClear.emit();
-            this.coChange.emit(this.multiple ? [] : '');
+            this.coChange.emit({ value: this.multiple ? [] : '', item: null });
             (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        this.handleOptionClick = (optValue) => {
+        this.handleChipRemove = (val) => {
+            const sel = this.selectedValues.filter(v => v !== val);
+            this.value = JSON.stringify(sel);
+            this.coChange.emit({ value: sel, item: { _id: val, label: val } });
+        };
+        this.handleListChange = (detail) => {
             if (this.multiple) {
-                const sel = [...this.selectedValues];
-                const idx = sel.indexOf(optValue);
-                if (idx >= 0)
-                    sel.splice(idx, 1);
-                else
-                    sel.push(optValue);
-                this.value = JSON.stringify(sel);
-                this.coChange.emit(sel);
+                this.value = JSON.stringify(detail.value);
+                this.coChange.emit({ value: detail.value, item: detail.item });
             }
             else {
-                this.value = optValue;
-                const opt = this.parsedOptions.find(o => o.value === optValue);
-                this.query = opt ? opt.label : optValue;
+                this.value = detail.value;
+                this.query = detail.item.label;
                 this.isOpen = false;
-                this.coChange.emit(optValue);
+                this.coChange.emit({ value: detail.value, item: detail.item });
             }
         };
-        this.handleChipRemove = (val) => {
-            const sel = this.selectedValues.filter(v => v !== val);
-            this.value = JSON.stringify(sel);
-            this.coChange.emit(sel);
-        };
-        this.handleOptionsScroll = (e) => {
-            this.scrollTop = e.target.scrollTop;
+        this.handleInputKeyDown = async (e) => {
+            if (e.key === 'Escape') {
+                this.isOpen = false;
+                return;
+            }
+            if (!this.isOpen || !this.optionListEl)
+                return;
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+                // preventDefault BEFORE the await: handleKey() is async (it may run
+                // across a render tick), so a post-await preventDefault would land too
+                // late for the browser to honor it deterministically. The default
+                // behavior for these 3 keys on a single-line input is harmless either
+                // way (caret move / no-op submit), but calling it upfront removes any
+                // timing ambiguity instead of relying on that harmlessness.
+                e.preventDefault();
+                await this.optionListEl.handleKey(e);
+            }
         };
     }
     get parsedOptions() {
@@ -150,56 +156,19 @@ export class CoAutocomplete {
             this.focused = false;
         }
     }
-    getVirtualSlice(items) {
-        const { ITEM_HEIGHT, VIEWPORT_ITEMS, OVERSCAN } = CoAutocomplete;
-        const total = items.length;
-        const totalHeight = total * ITEM_HEIGHT;
-        const startIdx = Math.max(0, Math.floor(this.scrollTop / ITEM_HEIGHT) - OVERSCAN);
-        const endIdx = Math.min(total, startIdx + VIEWPORT_ITEMS + OVERSCAN * 2);
-        const offsetY = startIdx * ITEM_HEIGHT;
-        return { totalHeight, startIdx, endIdx, offsetY };
-    }
-    // OverlayScrollbars: init when the dropdown is open, tear down when it closes.
-    // Virtual scroll keeps working — scrollTop is read from the OS viewport.
-    componentDidRender() {
-        if (this.isOpen && this.optionsEl && !this.osInstance) {
-            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => { this.scrollTop = vp.scrollTop; });
-        }
-        else if (!this.isOpen && this.osInstance) {
-            this.osInstance.destroy();
-            this.osInstance = undefined;
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.osInstance = undefined;
-    }
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'dfab9ff6344118bbaa21bc911671f701ca321d14', class: {
+        return (h("div", { key: 'a152ee025b4c76813f8783ba1cd0e6791a7372ee', class: {
                 'co-autocomplete': true,
-                'co-autocomplete--open': this.isOpen,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
                 [`co-autocomplete--${this.size}`]: true,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '2870599c3af0b8a7ee0ced25f54f3dff7118506e', class: "co-autocomplete__labels" }, this.label && h("label", { key: '2bd76cb15d591d71430ff0ac592b8c2910fdb4ce', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '766aac3940792e1b04b48e44c76d02f754ded4c3', required: this.required })), this.secondaryLabel && h("span", { key: '7f0baeed0eaf6b877e4ee7177e27d8553b6ed82a', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: 'faff4ef114f15478992548784a11127f2d14ba27', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '8638177d1a8a17e68849c2ffffc386ad76b6365d', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '59ba38d7a3b44d1502e6668920850098b140e2a3', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '484443890da0c01c028716095ef2215f56b64e93', class: "co-autocomplete__labels" }, this.label && h("label", { key: '24fc760c0fa0322e1952d948e8daf463a4999226', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '250f449b8d860d5476652dd906b5405e76cba1d1', required: this.required })), this.secondaryLabel && h("span", { key: '5f7b6c3b0308cc031336d945ce629aa06495404d', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '632abdc8eb131cf8f5c482487d377d9297c11ad6', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '7c1f1af01c2a9b9686de933a38d4da0302f40cbc', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: 'bfe9c9fbce1c7050f928128fb77f8bf5018903d1', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: '0196cedcbccae1f159b3b3cf4575964a37398d6a', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'b9ab823198d9268c6fb97f60ddb91f508006d27c', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e13078152b14056cd0640f90c26e68e1b2faa65a', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8db7105cb2865347cb0340b5c1f2a5b5f9da13d3', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '101741284b39462d6f080c35dbec305e911674a9', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", ref: el => (this.optionsEl = el), onScroll: this.handleOptionsScroll }, (() => {
-            const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
-            return (h("div", { class: "co-autocomplete__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
-                const isSelected = selected.includes(opt.value);
-                const isDisabled = !!opt.disabled;
-                return (h("div", { class: {
-                        'co-autocomplete__option': true,
-                        'co-autocomplete__option--selected': isSelected,
-                        'co-autocomplete__option--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.icon && h("co-icon", { name: opt.icon, size: 20, class: "co-autocomplete__option-icon" }), h("span", { class: "co-autocomplete__option-label" }, opt.label), isSelected && h("co-icon", { name: "check", size: 16, class: "co-autocomplete__option-check" })));
-            }))));
-        })())))), this.helperText && (h("div", { key: '10718ee7ba24570057e2f130ef950b304c510c02', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e8d88e8278f9ea3b28f6b5767991e484d6fc7eb6', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '0a9a6ef20def10b8efe92c55d3e66f1acd34525f', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        }))), h("input", { key: 'fc621839dde68853a1b28231551e6cb0a6f415e7', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'fbe41e89ca6202a4de04a09437f1f11f756f25eb', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e3096cd897d7a98fa7cd203d21eb57dc6ce961a5', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '3211cf54fcdae0a73afb62e2b6cb25081486f3a7', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '9c5e500a17c9486b6834c46be9e95c0e0fea6beb', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: 'b44c39253a07c470dc5e059223fce58548e8d02d', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '30ac040bfef45e66d1b18bfdda9b5b07b8f2c3d5', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a4fc8c4c9695c13cd515d9b7562986a62bf07110', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '4a7f3031b62c451e0561024d232331b1c7679a07', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -537,7 +506,7 @@ export class CoAutocomplete {
                 "attribute": "min-chars",
                 "defaultValue": "1"
             },
-            "debounce": {
+            "searchDebounce": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -554,10 +523,10 @@ export class CoAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "debounce",
+                "attribute": "search-debounce",
                 "defaultValue": "300"
             },
-            "emptyText": {
+            "emptyMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -574,7 +543,7 @@ export class CoAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "empty-text",
+                "attribute": "empty-message",
                 "defaultValue": "'No results'"
             }
         };
@@ -583,7 +552,6 @@ export class CoAutocomplete {
         return {
             "isOpen": {},
             "query": {},
-            "scrollTop": {},
             "focused": {}
         };
     }
@@ -614,8 +582,8 @@ export class CoAutocomplete {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
+                    "original": "{ value: string | string[]; item: { _id: string; label: string } | null }",
+                    "resolved": "{ value: string | string[]; item: { _id: string; label: string; } | null; }",
                     "references": {}
                 }
             }, {
@@ -655,6 +623,3 @@ export class CoAutocomplete {
             }];
     }
 }
-CoAutocomplete.ITEM_HEIGHT = 34;
-CoAutocomplete.VIEWPORT_ITEMS = 8;
-CoAutocomplete.OVERSCAN = 3;

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

@@ -42,7 +42,7 @@ export class CoAvatar {
             : this.type === 'image'
                 ? (_e = (_d = this.alt) !== null && _d !== void 0 ? _d : this.text) !== null && _e !== void 0 ? _e : this.icon
                 : this.icon;
-        return (h("div", { key: '279ce6f51cbc3b2c11c0660f5a0f98e03a2db4fb', class: {
+        return (h("div", { key: '41da32ebacadf5fd33c9f6a10ac0069ddaa81ce6', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,

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

@@ -56,13 +56,13 @@ export class CoAvatarGroup {
                 onClick: this.activate,
             }
             : { role: 'group' };
-        return (h(Tag, Object.assign({ key: 'a85fa472bfcf9e7a22ab68c14dff8c79cce33526', class: {
+        return (h(Tag, Object.assign({ key: 'efe3aa5c3a13c33d220caf93f8ce7dfc929f9833', class: {
                 'co-avatar-group': true,
                 'co-avatar-group--interactive': this.interactive,
             } }, interactiveAttrs), visible.map((it, i) => {
             var _a, _b, _c;
             return (h("co-tooltip", { key: i, class: "co-avatar-group__slot", content: it.name || it.text || '', placement: "bottom" }, h("co-avatar", { class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor })));
-        }), extra > 0 && (h("co-tooltip", { key: 'd6f5867903da085b23395cbad94381241297f539', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: 'a362b8e4262735c4adb7b917d501ccc3d760bdae', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
+        }), extra > 0 && (h("co-tooltip", { key: 'c2888162dd23d0b1a2c853e6adbe7a8f5f61efe5', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: '5f0d9a321b52db23356b107564605b18b8c75692', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
     }
     static get is() { return "co-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class CoBadge {
         this.color = 'default';
     }
     render() {
-        return (h("span", { key: '17fe27e556bbcf5773feb6faf07533c01cc6f62e', class: {
+        return (h("span", { key: 'f805a0acdea25b90802785fa7cf5e7115d60e3c3', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.js

@@ -255,13 +255,13 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: 'e97aa389e60d44d412094c26854b788576426be1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '03f77f9cd1f73a30264b98f42ad14aff228f58e9', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '794c4506fb1cdb0d8229c6ec28171843ab009f22', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a594d01c6c42a2829d81d8b4953bdb016b342cae', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'e7f768591e1a80b483b5312ea322184aacccbabf', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '8bc0a823bef53438baabfa96465c762533d3c865', class: {
+        return (h("div", { key: '6655150e6dfb829ae937433983d93e0a16b4f544', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '3657a637ec0ac2705375805381be639bc3da4b82', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'f3cac714dbc2703506a51fd960c34b64b33731b1', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: '063d6b43784022a2646614b0462c8c8dccce1320', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '8e9611f02a9d59e9af91d77b476b7e8f93724aa4', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f58de5177d9620ea61cffba530ef190936537194', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: 'fff2367303fee3c26d3a73e48ca3b6655ce44414', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '6d3947f80b56a798f2aaf454333c333a0d3b4106', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'c121e082e757c7ede9e79fabc704f7077652fbe2', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '895b3cda6d949853eff766133404c24039b4cb40' })), h("footer", { key: '24f5fa83ddada45deef4f49e55e3f330928b02f1', class: {
+            }, part: "header" }, h("slot", { key: '76fda370a9276e99d41782f08312e6e887dafd21', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: 'dcc7ba68ba7b306805ca49881a4808947217392a', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '55fd08122d422bbfe0cef9d7a64297e481349172', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '3c86d67c93d8c64458e431ab959704f4e43b382b' })), h("footer", { key: '14a97f22eee74e514111d87414e23cf1580e1456', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: 'e4a74380717a71b454af249e9ed732d8bbc8eabb', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: 'd2b6fbeca8233f3d6e33d6be7b05bd4a2fe5d59f', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "co-bottom-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class CoBreadcrumb {
     }
     render() {
         const data = this.parseItems();
-        return (h(Host, { key: '904d5f190213ccaeff86950071a170b52c548ceb', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: '3306e9e038677813f1c16183e4fb3a146d723643', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
             ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
             : h("slot", { onSlotchange: this.handleSlotChange })));
     }

package/dist/collection/components/co-breadcrumb-item/co-breadcrumb-item.js

@@ -29,10 +29,10 @@ export class CoBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: 'd788ec16332a691710015ad2be2577388fe2f556', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '984f754b9123ff35cf5f0239ad4fc103498e47b4', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '8ce859164b523684d7480a3defc645a5153a2915', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '5cce7777df74e3e7a8e2f3dc7ac585eef7ffce58', name: this.separator, size: 13 })), h("span", { key: '3d707d53b84100b66eaf31bef278865d9bb36fd5', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'd5f033e2036771dd35ce14c2c30533e9ad27111b', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'dce9a4c62fa71a6cb00eb5110c8145ca8d940398', name: this.icon, size: 16 }))), h("span", { key: '1d0d750e03729165dddd5fbbb624e3ccdbf4f446', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '50fdfd367f71edfdcd3e3943e14fb35dbecb170f' })))));
+            } }, h("span", { key: '4eb611d93cd5bd980eec023e0295f5c6b8fd7901', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '858d8393d7025b0f2c128c9fa21420f37f2e5fca', name: this.separator, size: 13 })), h("span", { key: '8ca11884ee1fa419593925bc704e16026f376bfc', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '6fbbaaa99958fd14f67f0ca8441333e5410f546d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'a8b5c0170d2016e9a90a823341955a93d5ce8686', name: this.icon, size: 16 }))), h("span", { key: '77e9c2f8da437bc35bfb07e7d6caf3a959c96036', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '10cb84e411006ff74528ae4ee9610e560929535f' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '4a821dbbf2e1bc8e56343c64d8c4a4b46831c691', class: {
+        return (h("button", { key: '7ecb9c79b6d2f333ad50f71847953ef676692a81', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -56,7 +56,7 @@ export class CoButton {
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '386309fa7ba9624ac2fbeed888ca84db0a74f57a' }, this.label), this.iconRight
+            : null, h("slot", { key: 'b7a325f24ec63c71121dfb74e82467e4b36fdd06' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }

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

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'aaf009acd7eff27fb1b50ac4356c1686b1fc3a3d', class: {
+        return (h("div", { key: '4a058e55c2e0ede15115f25ff2bb91ea5b7f88ca', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'fd7468a9a12794ca8f88a4a9eba2eedb2cee1583' })));
+            }, role: "group" }, h("slot", { key: '3d51651d39929c6989129c5dc9e8f5536598f1ac' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,13 +93,13 @@
   color: var(--co-semantic-text-muted);
 }
 .co-calendar__cell--today {
-  border-color: var(--co-color-primary-azul);
+  border-color: var(--co-semantic-surface-primary);
   font-weight: 600;
 }
 .co-calendar__cell--selected {
-  background: var(--co-color-primary-azul);
-  border-color: var(--co-color-primary-azul);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 .co-calendar__cell--disabled {
@@ -190,15 +190,15 @@
  * never read the same (hard requirement).
  */
 .co-calendar__day--today {
-  border-color: var(--co-color-primary-azul);
+  border-color: var(--co-semantic-surface-primary);
   font-weight: 600;
 }
 
 /* SELECTED — solid fill + inverse text. */
 .co-calendar__day--selected {
-  background: var(--co-color-primary-azul);
-  border-color: var(--co-color-primary-azul);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 
@@ -211,7 +211,7 @@
 /* ── Range states ────────────────────────────────────────── */
 /* Middle of the range (incl. hover preview): soft tinted band. */
 .co-calendar__day--in-range {
-  background: var(--co-semantic-surface-hover);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 8%, transparent);
   border-radius: 0;
   color: var(--co-semantic-text-default);
 }
@@ -219,9 +219,9 @@
 /* Endpoints: solid fill + inverse text (same language as `selected`). */
 .co-calendar__day--range-start,
 .co-calendar__day--range-end {
-  background: var(--co-color-primary-azul);
-  border-color: var(--co-color-primary-azul);
-  color: var(--co-color-base-blanco, #fff);
+  background: var(--co-semantic-surface-primary);
+  border-color: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 600;
 }
 

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '7530e8888dab664df8e06d32941e274d843ce55d', class: "co-calendar", part: "root" }, h("div", { key: '6cac1b515387a43bd0cacbd825d30880c0966571', class: "co-calendar__header", part: "header" }, h("button", { key: '2f379184aa0b5fafa87f1cf93bea26d4e3bc8506', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '912670c171922fcd7b7c421f92f097192b397dd0', name: "caret-left", size: 16 })), h("button", { key: '2cda2492da31d641cabe5239f8433aaa6eb1b62b', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '7375f4f9a2a76ed885e70f47bd0b99375b62cd61', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '927c0cfef9cd230eb2b2fb308cb1c9b3485232eb', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'c291b50461545f7e06e7eda52bcc1890b48ec2cd', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '0ac8e641a51319d8c46c2c22dfa5d059d208060f', class: "co-calendar", part: "root" }, h("div", { key: 'b97ce34ea675a7936d80b47daafa1c2ee3db4325', class: "co-calendar__header", part: "header" }, h("button", { key: 'c02f19300f44dcc31fa233290449af38146fdc05', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '73bbc58da5b724b48aba584233e591eb196b1cba', name: "caret-left", size: 16 })), h("button", { key: '19f1a44b9f74c529c81c76f677c9ec08143c1b2a', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'f78863f1ac71fb17b49c3a8bd19d709c4f9326e4', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '13ab9824881a7346422fe178ccdb02ea279e6070', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '66611f127b366f9f8132bfb3354badfd9e562b99', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-calendar-month/co-calendar-month.js

@@ -200,7 +200,7 @@ export class CoCalendarMonth {
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: '5e1309a20594ee3ceb749d95a5e4d56340f01b49', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '9d53a3162e162f1dcd47e9631d2d9220bd99b98d', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: '94afb2cd963e8292d09dda372b7f115e235c8cd3', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '381021f254ac5f36d3d59e108cbe64f7f4fb1b91', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);

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

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '72fa397d05359dbe75a84117cd328518e4c885b5', class: {
+        return (h("div", { key: 'accbb972f6881a7e13b37a5523d10a3614730603', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'efb224124fed52da7033a9475d54a34413be7859', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '01a8316c7907504bb993e1b390296df915c23061', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'cc897cc225043eeabe37446b58ede6dc457dd110', class: "co-card__body", part: "body" }, h("slot", { key: '5ccece1199f62bec0eeb1d5facc585ea0e4a5a24' })), h("div", { key: '235025fb89b8b62e740c11b9decf47db36289636', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '4546f4d4e9947abfd3b10164ea86da7b96490130', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '282946088ac5d725587fbc21678e09b430ac2492', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '7a23d56c1c2024fe163f6d4dc8d484cf8b718901', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'dcec3cc0ab89d8e9b5abbc4bded028a18f5108a9', class: "co-card__body", part: "body" }, h("slot", { key: '94b9b7db62590372a19b87372c2c288658848896' })), h("div", { key: '8aa4852f91fdaa4ad785b7d6f90f6c9d1dffef99', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '3417ff7a18b113f42b172593e86fafc8268c613a', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,17 +37,17 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
-        return (h("div", { key: '08c291f6fbc3d37788a26d8d4dc747eba32bdca8', class: {
+        return (h("div", { key: 'b52aa4d0412e9ab8b170f11d7a323bbbc80057e5', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '24839a60401f929b87be87aea57c0b130a007f3a', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: 'd3a1caff03ad0358ea005bcb88a8ad607e9d3d24', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: '1af8a42128f227fc5849f87de4005525e6450d96', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '6fcd92e86641b5b1338370d7fe4cf75eaa860268', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: 'f3442c680dc9d30a7d69954137300d76242999d4', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '4bd18d9e214646ff2e5cd0cb5e697525e7e605e1', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: '6a25deb4ea5b703c3732c9c97d6a5e822451ec70', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: 'e6783c1035b4c9f8bb529b4a8f7efc75d9bb093a', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '19c92d5cd4cbda22338c1a675cabf444e5f58bfc', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: 'b84d28ddb24652658b0afc88bafce1a3ae7a83c6', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b5e21ca2634667abca82f16d30a6952ab8ccbc88', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: 'f311bec251f6fd375d81dcd06cafdb380d6206f0', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,11 +70,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'cb538aaa167b240cafcbd7421e11aa588a7c7b12', class: {
+        return (h("div", { key: 'd3f34e7ee59ebcc1494ee6aabef1e4c476044dbd', 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: '9e8e43ef8ec56df7cb7386af62ac27633cde08e9', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'f1c4af391f16486910353cfa271a99c0800efaf7', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'bb91d781eb3c76b3cf346d7c09b6aa67074cb7c6', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ea0258b1106e9a13ad869823606fa86ed3044431', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a47de05988ae37497154fc80e8cbf5f6f62bb1d4', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'fc39ff62eeea3136584a0667e71d816958a1ed57', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '205c1cbdbfcba6d882c7f4c27bfd633e55acea0f', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '33d6b03de2f2ba30afe1d1865a43ade7b8344f96', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -89,7 +89,7 @@ export class CoCheckboxGroup {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (h("div", { key: 'c0f01f638a2380f8f124350f4feebe768359e16d', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '81d770840578006abea0a2e36f5e7162c1773765', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: 'ae77c9a6f140d4fb59bfd0d2e4a61b9063d4cdab', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (h("div", { key: '7ac076bf100f66eb851d7e76e0b052d42fef69f8', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '7a13362e9a77a13ebb1e127ee57c10e7f64110fb', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '44e9f68fd19c5a50affde1eb743c3fc8e5eef8e4', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '2a0ec169b9c4ec0516d275d3787f7f02bcc4815f', class: {
+        return (h(Tag, { key: '3210b69426aa37cc7e1f9cc7d7a9add9fd0dd93b', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -80,7 +80,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '43dac38d1aba1dead22ac164926167c38e66a9fe', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '3797d8f1081f82ed4f44bb99ffe26087b45c3d3a', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '742a11aaefce99a0bbf1c1bd6c2c3ca8b31d63cd', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'a9f2c057d7df6e51f5be5c757e26280780fe1ae9', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'c8f56d8525efb0a095f0c21d9cf0626964484510', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '01fb166b21b09cdb5b8b86dca1ec2a9fc57f6848', name: "icon-left" }))), h("span", { key: 'd6201c5dded49a5bdc32110d8e11165aeac99eac', class: "co-chip__label" }, h("slot", { key: 'd947e19d407485bcfcedd6eacc4af81c3059166b' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '53108c759b51c53fa649776166396a9f609d20d0', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '493961698dc761c41cf6a6e24d20e61701f594fa', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: 'c9f198139af0e17dedd3464d9ccdd7b6c6163aff', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'ab0224fdb675c1706cda2395f57ddf6f17160185', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '3e1a2cc6cde7a2834f9c872925aa4a2ee2136a9f', name: "icon-right" }))), this.removable && (h("span", { key: '4eb54aae2e81bf76bd99cf1ba808403de8f98d10', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'e9736b8d92d01df66a670a67e7ef05920c6a527b', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd56053da1f81ebfbd276f314c08f0ca9d8b722c8', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'f6cf7398888677b48622415b0d1e65f2117a841a', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '105306abb8267ebec6a4241b85be844ce9e0fe9e', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'a6e6bbf79ec321916bae16fea448b63f22109bd0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '6ddd3f25eca0380831c10fce157aa042d5195da5', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'd331947abb472bede535a794dfae052a021d06b1', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'ddf803655d633a17901ecab726739ad69ae03d5c', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '4602a3f28aa74f31bd7a5124b9ef1a1337f4d960', name: "icon-left" }))), h("span", { key: 'aebc08bb058e32d13ef3c962e1cf23cfdbc3baf5', class: "co-chip__label" }, h("slot", { key: 'be0e8625634f0b4a9da70944e32bb7d2c80c3a00' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '11634b783e3a482fe161781658fd22d0ec015265', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '49837e189f540874558c337bce19a983a5bd77f2', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '6510c33b909da03ef0e6ee59fb52b5c12a5faa86', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '9c6e6ccea304803daaecf447a5651d5e8a67cc07', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '3bdd7c888bba838894b88a41039df45af8f7547c', name: "icon-right" }))), this.removable && (h("span", { key: 'a4d45167d0c3fc237692371a131af5a76840a89a', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'ce146e623ce90a936c54a8bfad349b7ea04691fa', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'fe01795e08be25909f530d6da4f57cb38b6f8a8e', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '2d8c0bba14a8fa9128c9f9673d9d295f191f1e5c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,10 +82,10 @@ export class CoColorPicker {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: 'ebbdbeba0134c87da27ae4f6e375041eee78892b', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '6b3a330cf0384860a796ba513af37f8e78e12093', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '5643e85578787a4f37f6325cb352f3a304557acd', required: this.required }))), h("co-popover", { key: 'ae7d44830dfde43e0a5c5047e6c7fb821d1243c7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ba3bfbb61193dd643ec906c83cde0856ff71858f', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '9de65c4a8b4ca9778547bbb3fe84a3672420dfc9', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '36e94cac1eb3855ae7425ffc37273be18ee6e351', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '2df3f1fa6a56038fd37f065df00a63f48ea4aacc', class: "co-color-picker__panel" }, h("div", { key: 'ab3f73100473640dd86ade5b28d6356b78cc87fd', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: 'cf82d2fe5d1ca59a0be4edbd98f2f127cbb0666c', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'ad0e372b32b0e7d5294609b7a952e8d4fb633447', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '9976b6350be9c69a5db48079cdcc32b597b99e4f', required: this.required }))), h("co-popover", { key: 'e50a584f035be8e4cb7d18968c16e6dfe5b8fad2', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '79bfb8856c30be5bbedf2471651eafabf4c2faa5', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '468b9f7f6a63297086f48938155bea1a5a82ec04', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '727966662cfa0c6647d66f0268eca9f77452c46d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '25df03b58bf3a690e524f53d53a16fe299f019ed', class: "co-color-picker__panel" }, h("div", { key: 'd102f3c6b266046dc2b8d6d7536d25aa2dffb79c', 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: '962004b803249536b0d30da30f697c1908779ff5', class: "co-color-picker__hex-row" }, h("span", { key: '127afe4fbc44043d6417d3f335703b72c8657e59', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '6ed71ff0812ab2597eea32f5c1c8a64af02d9c7c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: '32038edf8d6fd3ab7746997b6ba1383ee6210b63', 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: '1cee861c8db908d6d900a0454029136a2bc37383', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'da2a382c68d0ad972007a9589176480996fa4a52', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'cf7218f5309d7ec91f03df33199cf1ce3a49ba4d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '2a469362e5001e9c65074ed6280e275e471b0334', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: '4897fc8e3c3d371b23b7ae6c9e5c04c92dfe27df', class: "co-color-picker__hex-row" }, h("span", { key: '625828e841d8f8b545ee6119d74e839eca80841e', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '00f73948a453f2db74103ab1d49013e999d13b1f', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'c87e69f32065bf05dcad1eaa73cf21d028abf93c', 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: 'bf8e7abbb52e543bb4335acc577b268cce40c2be', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '368cf0c7f3877c1a6fd35c992b6543862b1cebc8', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '5b9f3568320860fde1d701ef6e5d9b3475903d8c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '5a480e0edaf010df948e8f73e9befa70f88b0865', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }