@prolibu-suite/cobalt-core 0.3.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

@@ -32,12 +32,17 @@ export class CoAvatar {
         };
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : 56;
         const iconSize = (_b = ICON_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : 24;
         const fontSize = (_c = FONT_SIZE_MAP[this.size]) !== null && _c !== void 0 ? _c : 'var(--co-font-size-18)';
         const showImage = this.type === 'image' && this.src && !this.imgFailed;
-        return (h("div", { key: '0cb2791e742ef38fdf9fe39037cb4024bf87df4f', class: {
+        const ariaLabel = this.type === 'text'
+            ? this.text
+            : 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: '41da32ebacadf5fd33c9f6a10ac0069ddaa81ce6', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
@@ -45,7 +50,7 @@ export class CoAvatar {
                 'co-avatar--light': !!this.color && isLightColor(this.color),
             }, style: Object.assign(Object.assign({ width: `var(--co-avatar-size, ${dim}px)`, height: `var(--co-avatar-size, ${dim}px)`, fontSize }, (this.color ? { background: this.color } : {})), (this.ringColor
                 ? { '--co-avatar-border-color': this.ringColor, '--co-avatar-border-width': '2px' }
-                : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: this.text || '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
+                : {})), part: "avatar", role: "img", "aria-label": ariaLabel }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: (_g = (_f = this.alt) !== null && _f !== void 0 ? _f : this.text) !== null && _g !== void 0 ? _g : '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
     }
     static get is() { return "co-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +144,25 @@ export class CoAvatar {
                 "reflect": false,
                 "attribute": "src"
             },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image (type=\"image\"); falls back to text when unset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

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: '89a5de192302652fe4b9c41175c9ed38de22549b', 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: '5a012ab0bd3939ed3266ba823d3d88949f6dbedc', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '4ce730ddf26b6d594b61d53553a3ebca14ed4c5e', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '75adb4689ffab355a074661adee3dfebfda4d9b5', 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: 'a654a44b53c0f9647324c2c587e1e47277a1cd3d', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '71918dcc9b8ca914fa020cf2428671a2e747103d', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '57040104cd32072ef0b81dbdb22e3475b94cf64d', 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: '1ebe3576caee4e503930b8f042ae4ef57063427c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '7b5a81b9a833d7a0d00a07b8de7830b7e263d688', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'a45ff0344563c24517cffed54bb4993bfa2a6f76', 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: 'b616b4a2fb6ea8634c4bb9889f9a3f1133bb863f' })), h("footer", { key: 'e4b192198526c78e2cd015bf116159c359a43292', 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: 'f461a3a9b895581d849f490f9769f280eeb2ce2b', 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.css

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  min-width: 0;
+}

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

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Horizontal breadcrumb trail. Accepts `co-breadcrumb-item` children via the
+ * default slot, or auto-renders them from the `items` JSON prop.
+ *
+ * The separator between crumbs is drawn by each `co-breadcrumb-item` as a
+ * leading icon (hidden on the first crumb via CSS), so no separator markup is
+ * interleaved here. This component propagates its `separator` prop down to the
+ * slotted items and layouts them in a `align-items:center; gap:4px` flex row.
+ */
+export class CoBreadcrumb {
+    constructor() {
+        /** Icon name (Phosphor) for the separator between crumbs. Propagated to
+         *  slotted `co-breadcrumb-item` children. */
+        this.separator = 'caret-right';
+        this.handleSlotChange = () => this.propagateSeparator();
+    }
+    watchSeparator() {
+        this.propagateSeparator();
+    }
+    componentDidLoad() {
+        this.propagateSeparator();
+    }
+    /** Push the current `separator` onto every slotted (light-DOM) crumb. Items
+     *  auto-rendered from `items` get it directly in render() instead. */
+    propagateSeparator() {
+        const nodes = this.el.querySelectorAll('co-breadcrumb-item');
+        nodes.forEach((n) => {
+            n.separator = this.separator;
+        });
+    }
+    parseItems() {
+        if (!this.items)
+            return null;
+        try {
+            const parsed = JSON.parse(this.items);
+            return Array.isArray(parsed) ? parsed : null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    render() {
+        const data = this.parseItems();
+        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 })));
+    }
+    static get is() { return "co-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name (Phosphor) for the separator between crumbs. Propagated to\nslotted `co-breadcrumb-item` children."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'caret-right'"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional JSON array to auto-render crumbs instead of using the slot, e.g.\n`[{ \"label\": \"Mi unidad\", \"icon\": \"cloud\", \"value\": \"root\" }]`. The last\nentry is marked `current`. When set, slotted children are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "separator",
+                "methodName": "watchSeparator"
+            }];
+    }
+}

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

@@ -0,0 +1,66 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Leading separator — caret-right size 13, gray-400 (NOT gray-500). The 4px on
+   its left comes from the parent co-breadcrumb's gap; margin-right adds the
+   matching 4px on its right so the separator sits symmetrically between crumbs. */
+.co-breadcrumb-item__sep {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: var(--co-spacing-xs, 4px);
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+/* The first crumb has no leading separator. `:first-child` matches the first
+   element child both when slotted (light DOM child of co-breadcrumb) and when
+   auto-rendered from the `items` prop (shadow child of co-breadcrumb). */
+:host(:first-child) .co-breadcrumb-item__sep {
+  display: none;
+}
+
+/* Clickable crumb. No padding, no radius, no hover background. */
+.co-breadcrumb-item__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  color: var(--co-color-gray-500, #888888);
+}
+
+.co-breadcrumb-item__content:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Current (last) crumb — medium weight + text-default ink. */
+.co-breadcrumb-item--current .co-breadcrumb-item__content {
+  font-weight: 500;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-breadcrumb-item__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* Inherits the crumb color (gray-500 / negro) via currentColor. */
+}
+
+.co-breadcrumb-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}