@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,20 +1,45 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { OverlayScrollbars } from "overlayscrollbars";
+import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
 export class CoSelect {
     constructor() {
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         this.placeholder = 'Select…';
         this.disabled = false;
         this.clearable = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.status = 'default';
         this.options = '[]';
         this.value = '';
         this.multiple = false;
+        this.size = 'md';
+        /** Show a search box inside the dropdown to filter options client-side. */
+        this.searchable = false;
+        this.searchPlaceholder = 'Search…';
+        this.emptyText = 'No results';
         this.isOpen = false;
         this.scrollTop = 0;
+        this.searchText = '';
+        // Frozen at open time so selected options render first without jumping while
+        // the user toggles them during the session (mirrors co-ref-field).
+        this.sortSnapshot = new Set();
+        this.lastParsedOptions = [];
+        this.lastRankSearch = '';
+        this.lastRanked = [];
+        this.handleSearchInput = (e) => {
+            this.searchText = e.target.value;
+            this.scrollTop = 0;
+        };
         this.handleTriggerClick = (e) => {
             if (this.disabled)
                 e.stopPropagation();
         };
         this.handlePopoverOpen = () => {
+            // Freeze the selected-first ordering for this opening.
+            this.sortSnapshot = new Set(this.selectedValues);
             this.isOpen = true;
         };
         this.handlePopoverClose = () => {
@@ -43,23 +68,49 @@ export class CoSelect {
                 this.coChange.emit(optionValue);
             }
         };
-        this.handleOptionsScroll = (e) => {
-            this.scrollTop = e.target.scrollTop;
-        };
     }
     get parsedOptions() {
-        let raw = this.options;
-        if (typeof raw === 'string') {
+        const raw = this.options;
+        if (raw === this.lastOptionsRaw)
+            return this.lastParsedOptions;
+        let parsed = raw;
+        if (typeof parsed === 'string') {
             try {
-                raw = JSON.parse(raw);
+                parsed = JSON.parse(parsed);
             }
             catch (_a) {
-                return [];
+                parsed = [];
             }
         }
-        if (!Array.isArray(raw))
-            return [];
-        return raw.map(item => typeof item === 'string' ? { label: item, value: item } : item);
+        const list = Array.isArray(parsed)
+            ? parsed.map(item => typeof item === 'string' ? { label: item, value: item } : item)
+            : [];
+        this.lastOptionsRaw = raw;
+        this.lastParsedOptions = list;
+        return list;
+    }
+    /** Options after the in-dropdown search filter (client-side, by label), with
+     *  the selected ones pinned first in multiple mode (frozen at open time). */
+    get filteredOptions() {
+        const all = this.parsedOptions;
+        let filtered;
+        if (!this.searchable || !this.searchText.trim()) {
+            filtered = all;
+        }
+        else if (all === this.lastRankInput && this.searchText === this.lastRankSearch) {
+            filtered = this.lastRanked;
+        }
+        else {
+            filtered = rankByMatch(all, this.searchText, (o) => o.label);
+            this.lastRankInput = all;
+            this.lastRankSearch = this.searchText;
+            this.lastRanked = filtered;
+        }
+        if (!this.multiple || this.sortSnapshot.size === 0)
+            return filtered;
+        const selectedBlock = filtered.filter((o) => this.sortSnapshot.has(o.value));
+        const rest = filtered.filter((o) => !this.sortSnapshot.has(o.value));
+        return [...selectedBlock, ...rest];
     }
     get selectedValues() {
         if (this.multiple) {
@@ -78,6 +129,13 @@ export class CoSelect {
     get hasValue() {
         return this.selectedValues.length > 0;
     }
+    /** The selected option in single mode (used to show its flag/image in the trigger). */
+    get selectedOption() {
+        if (this.multiple)
+            return undefined;
+        const v = this.selectedValues[0];
+        return v ? this.parsedOptions.find((o) => o.value === v) : undefined;
+    }
     get displayText() {
         const sel = this.selectedValues;
         if (sel.length === 0)
@@ -99,8 +157,43 @@ export class CoSelect {
         return map[this.status] || null;
     }
     onOpenChange(open) {
-        if (open)
+        if (open) {
             this.scrollTop = 0;
+            if (this.searchable)
+                requestAnimationFrame(() => { var _a; return (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
+        }
+        else {
+            this.searchText = '';
+        }
+    }
+    // OverlayScrollbars: floating, auto-hide handle that overlays the content (no
+    // reserved gutter). It scrolls natively under the hood, so virtual scrolling
+    // keeps working — we just read scrollTop from its viewport instead of a native
+    // `scroll` event. Init when the dropdown is open, tear down when it closes.
+    syncOverlayScrollbars() {
+        const shouldInit = this.isOpen && !!this.optionsContainerEl;
+        if (shouldInit && !this.osInstance) {
+            this.osInstance = OverlayScrollbars(this.optionsContainerEl, { scrollbars: { theme: 'os-theme-co', autoHide: 'leave', autoHideDelay: 300 } }, { scroll: (instance) => { this.scrollTop = instance.elements().viewport.scrollTop; } });
+        }
+        else if (!shouldInit && this.osInstance) {
+            this.osInstance.destroy();
+            this.osInstance = undefined;
+        }
+    }
+    componentDidRender() {
+        this.syncOverlayScrollbars();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.osInstance = undefined;
+    }
+    /** Option label with the matched substring wrapped for highlighting. */
+    renderLabel(label) {
+        const seg = this.searchable && this.searchText ? highlightMatch(label, this.searchText) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, h("span", { class: "co-select__match" }, seg.match), seg.post];
     }
     getVirtualSlice(items) {
         const { ITEM_HEIGHT, VIEWPORT_ITEMS, OVERSCAN } = CoSelect;
@@ -112,14 +205,22 @@ export class CoSelect {
         return { totalHeight, startIdx, endIdx, offsetY };
     }
     render() {
+        var _a;
         const selected = this.selectedValues;
-        const options = this.parsedOptions;
-        return (h("div", { key: '62e8257cc3b4e5f21c411fae888c2fbfb5e0966f', class: {
+        const options = this.filteredOptions;
+        return (h("div", { key: '279b14eda557b860b4151685bf7d7d0c97ab861d', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
+                [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b686a479a92fa78105a2d8b70544dafee562d04e', class: "co-select__labels" }, this.label && h("label", { key: '605ec7cdd6614397b18010b3c5aa7c563c5f2b5e', class: "co-select__label" }, this.label), this.secondaryLabel && h("span", { key: '808c1038a7beb82a0d8279b45161f0f2058a3f6d', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'e3c4dfb846300956a721e6d39c0bf01226945b1f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '9b6a5847d6223317d8df65e7964e4574da426482', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'd0f62a9e449acf5234d9f876d6e7c97fa181a42b', name: this.iconLeft, size: 16, class: "co-select__icon" }), h("span", { key: 'ec49195d6e7e15e1400e436ba39bc5dfa119ff66', class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '14637ea81b731edf44e8d03c9dc316c9e6a5db2c', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '965c17bae724c916fdb4ce5438625801446d341e', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '706be511d092a16835d0fc7907b41ea550ba3100', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '33e5a0c3075357ca4080a4be72c579f34e3a1e94', class: "co-select__dropdown" }, h("div", { key: 'a6f857d29a52fe2969da4d8536f9d0a0bf9c06dc', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'e98425c922453ca3acae8274c707366ac28ceb0e', class: "co-select__labels" }, this.label && h("label", { key: 'de40605cb2d729bccc445b1e37a28e9ae5d95c05', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'bc0a351d141017cdfeb9b761081144df09bffbf6', required: this.required })), this.secondaryLabel && h("span", { key: 'cbbd3955441d029c40a32dc363d1fc133ace393d', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'de6985c4703ecec83a1d3011fd9c275d989a1132', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '545e952818ab75b26de295d56c6875237f970ed5', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '1f202f6dfdb6bae10c20594878ba5f780ab8ad07', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '68e80d4d79d68b6d982aa72f8b697c8654d043c3', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            const opt = this.parsedOptions.find((o) => o.value === v);
+            return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleOptionClick(v);
+                } }, h("co-icon", { name: "x", size: 12 }))));
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '347235a67a41c6f4ed3e9b8035c18750dbba609e', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '400d900137c4dfbdf362d8ad923678e062143707', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '1e9a4c6a69606790836fedcea70192c77b42383f', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '1a00449ed011a384124992427511a14017203308', class: "co-select__dropdown" }, this.searchable && (h("div", { key: '6275c6091e714147325f5a8a40cc33e8ddfc9fcb', class: "co-select__search" }, h("co-icon", { key: '18047b5338b433adcca171783ea896978d0f8657', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '1de64d0740ff617a5cf75fdaf3bcddb197f826be', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.searchable && options.length === 0 && (h("div", { key: '07cf9897681af9a636dfa0e0de3dda5785e49d03', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'f9c5ad0c2ece40dad256a81eca686769498983d1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-select__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);
@@ -128,9 +229,9 @@ export class CoSelect {
                         'co-select__option': true,
                         'co-select__option--selected': isSelected,
                         'co-select__option--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.icon && h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" }), h("span", { class: "co-select__option-label" }, opt.label), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
+                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()))), this.helperText && (h("div", { key: 'abd1a1647c257674ad54a7d8623f75c211d1ac84', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1db3bfcc66e832bd5c41d2ddf6ae202a1cafa31d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'b5b66e6ec7c098e8b98bd6f59ef8234630f8ee39', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: '2d51d82b91682fc7f4e2e9eff099b9292099ce7a', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a055b3dee238c230aec60264377ccf9b1fe3137d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '2d170fecfbe1b889fe819d63b19863bdac92eee8', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -165,6 +266,26 @@ export class CoSelect {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -282,6 +403,26 @@ export class CoSelect {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -367,13 +508,95 @@ export class CoSelect {
                 "reflect": false,
                 "attribute": "multiple",
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a search box inside the dropdown to filter options client-side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search\u2026'"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'No results'"
             }
         };
     }
     static get states() {
         return {
             "isOpen": {},
-            "scrollTop": {}
+            "scrollTop": {},
+            "searchText": {},
+            "sortSnapshot": {}
         };
     }
     static get events() {

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: 'fa8493a09b0cb7ab8bf3cfcf1074cbb0b6a0295f', class: {
+        return (h("hr", { key: '7024b84bf2a0cf7b0f5d95b1ded130295f3956f2', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '23fd2d57d1641b7dd5176c086379ec55f56b3302', class: {
+        return (h("nav", { key: '06e023317ddd0ba958aed6fae1260d99cf98787b', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: 'f138c6a9b1d766649c0470b529ce4b5d07a778e1', class: "co-sidebar__header", part: "header" }, h("slot", { key: '9530cd402dcbcbc439d5bf31619f40810fecd14c', name: "header" })), h("div", { key: '84cea4921fc6a7d24b9cb7d93525710b9258a1f3', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'c4f83fc313d2ce1819c90ca930d121ce36220ddc' })), h("div", { key: 'ff4160bf0eb0c628f1185673497dcd98333e2218', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '09d3e0e84cdfceb96b77a59eacc59b30aba02c0b', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '02599924b23b828c21442f777e4109cf612cafb0', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'dd28b07a1b4e4674de3348932ebed9b997fdad43', name: "header" })), h("div", { key: '3f0d7545ee5d5ea3e058e92f16f1f6903c301331', class: "co-sidebar__body", part: "body" }, h("slot", { key: '80a97f1c2724945950751908544198b0a5ab50f7' })), h("div", { key: '8bbf92eb02aada1337190f2dcad705fbb41f67ab', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '73501f3dda0d40e4d61cc8c47da2cd6dd7fd5e9a', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { normalizeText } from "../../utils/normalizeText";
 /** Default icon mapping for common Prolibu model keys → Phosphor icon names */
 const DEFAULT_ICON_MAP = {
     // Directory
@@ -128,6 +129,30 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
+    // Achievements
+    Achievements: 'trophy',
+    Rewards: 'gift',
+    Badges: 'medal',
+    RewardsBudgets: 'wallet',
+    RedeemedPrizes: 'crown',
+    // Sales / Billing extras
+    PaymentReceipts: 'hand-coins',
+    Coupons: 'seal-percent',
+    // Integrations
+    Integrations: 'plugs-connected',
+    Mcp: 'plug',
+    LifecycleHooks: 'arrows-clockwise',
+    PaymentProviders: 'credit-card',
+    Stripe: 'credit-card',
+    ThirdParty: 'plugs-connected',
+    Sendgrid: 'paper-plane-tilt',
+    Apollo: 'rocket-launch',
+    Kaspr: 'identification-card',
+    OpenAi: 'robot',
+    Ultramsg: 'whatsapp-logo',
+    Slack: 'slack-logo',
+    Telegram: 'telegram-logo',
+    Discord: 'discord-logo',
 };
 /**
  * A complete sidebar navigation component that renders a hierarchical menu.
@@ -246,12 +271,12 @@ export class CoSidebarNav {
     get filteredItems() {
         if (!this.searchText)
             return this.parsedItems;
-        return this.filterRecursive(this.parsedItems, this.searchText.toLowerCase());
+        return this.filterRecursive(this.parsedItems, normalizeText(this.searchText));
     }
     filterRecursive(items, query) {
         const result = [];
         for (const item of items) {
-            const label = this.getLabel(item.key).toLowerCase();
+            const label = normalizeText(this.getLabel(item.key));
             if (label.includes(query)) {
                 result.push(item);
             }
@@ -439,10 +464,10 @@ export class CoSidebarNav {
     }
     render() {
         const items = this.filteredItems;
-        return (h("nav", { key: '8734e55fec1337ceb95e2958c1b7b4574b74e37e', class: {
+        return (h("nav", { key: 'b3e49df434a663c564959f6b332ed121607af5bb', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'f7df980d36941cb411725d546df417be8172419d', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item)))));
+            } }, this.renderSearch(), h("div", { key: '26ef8af4e3152e7c094f966d881ad436ee52a805', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item)))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: '55b6b1234eb1262d34100dbeeea5b9cdd00cf9b0', class: {
+        return (h("div", { key: '9666bc3215652fef40b6750b1bcf653da999ce75', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '9b552dbf32b1a5d63b8c068bace8ed6f976cfc06', class: "co-slider__labels" }, h("div", { key: '84ef18f271167714c4fb0f0a493347aed826677f', class: "co-slider__labels-left" }, this.label && h("label", { key: '83f55dab8b5c9f6ffe645bf5a9a5f64d48091cdc', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'e87460cb0301217c620534169a81a4d1eb2ec8e8', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'fcceffe989b3a920bf0a036a84945ae09d12e332', class: "co-slider__value" }, this.value))), h("div", { key: '3bb4838439376d74c46a48ffd44924243f0c8d1f', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '452336835c5ec68ade4b5d62c7bf6f1228033dd3', class: "co-slider__track" }, h("div", { key: 'eace119e23a4ffa2e775af4b7df2fdae2a4c1a4d', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '2961e33a63c54bcd6642d3d9e49c7816bdcc0136', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '1d3796eecca1054817db1b2d4dbb4b79199b59f6', class: "co-slider__marks" }, h("span", { key: '37a8f0927a98dc4564d18bc3ac6069778d28db43', class: "co-slider__mark" }, this.min), h("span", { key: 'c250e0d1e046d854a142fd54145d6839d35455e4', class: "co-slider__mark" }, this.max))), h("input", { key: '56be78722e738311ddd15fe107231c93d63a961b', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '4d620cd43d5a58f188f3836362e9f258455ef277', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b3f449dd2e7d7df70f9164e547f2ee91a1ee7c87', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'b73792b9bf9e957ece4ad05a9e32b40ffa221867', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'a37b3269d2ef9b95225196a85b112750b4a3fcae', class: "co-slider__labels" }, h("div", { key: '18ca7e2f93ff343c278f0bede877078d90b24810', class: "co-slider__labels-left" }, this.label && h("label", { key: 'fe49fe8bac3897b39b4a887b9932f64711576621', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'aa0850998081f52521bacf8cdd478f0ea2eb7170', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '9de291e2bac119a3d52d2e502eb7fe604e1f0cc9', class: "co-slider__value" }, this.value))), h("div", { key: 'b962b60c11b9089338b00af3e907bad60a088392', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '0140d753b83767e2c2ca8b5d7113712aef268401', class: "co-slider__track" }, h("div", { key: '81f89f49edaf65b78a814c03e77273b86a0b88d0', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c163d0dd0655d6052158f64919f6bb3487cc2fef', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5398bacad904e3151be739ac96edea006e9ebc2b', class: "co-slider__marks" }, h("span", { key: '60940a59763a62b9138566f219447524f5b58f6d', class: "co-slider__mark" }, this.min), h("span", { key: 'eef1fbf170d58a7a0bc47da021e75483089ac873', class: "co-slider__mark" }, this.max))), h("input", { key: 'bba029e3b31ef5f7870152872298478cca82d377', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '21b325224fa58623e5a7b2148828dc125750c8d9', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '88e62cca21285bd21b4dd68c77e0c48bbdffecf8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '7f10644c1b17a09d947d79471a7d848455fd97f3', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,6 +72,7 @@
 }
 
 .co-switch-wrapper__helper-text {
+  color: var(--co-semantic-text-muted);
   font-size: var(--co-font-size-14);
   font-weight: 400;
   line-height: 1;
@@ -141,3 +142,19 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+.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)');
+}

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

@@ -1,10 +1,13 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
 export class CoSwitch {
     constructor() {
         /** Whether the switch is on */
         this.checked = false;
         /** Disabled state */
         this.disabled = false;
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         /** Validation status */
         this.status = 'default';
         this.handleClick = () => {
@@ -25,17 +28,17 @@ export class CoSwitch {
     }
     render() {
         const hasLabels = this.label || this.secondaryLabel;
-        const hasHelper = this.helperText && this.status !== 'default';
-        return (h("div", { key: 'dee7b24ea46fe9ea743b408b1c4b79247c98cb28', class: {
+        const hasHelper = !!this.helperText;
+        return (h("div", { key: '448bc546da840313740bc9c8d28bcbf50dd23842', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'fcc76c8c5ffca4f004cd1fae898219fe533e7da1', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '06dee0e71ec4bbcf5b9e7d9113e312b72d40059a', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '417c63e43360ffaa5e6fb3843a6516e6acc10712', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '19e326242f45489aa2545390643dd799658102f8', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '744f64362f83b748fb93563ae0fe3192af4b8d15', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '22600658649934117f8db48addf7f954e3e1c025', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '669eec2e75eccba646d084a0d824aee19ad6cb07', class: "co-switch-wrapper__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '9f4152a495493daf3718a923c87bab53be59821c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '2971255ce480786effc0330de7e3bd07f9b27c4f', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f10ba6fb3e34a893b18ccaf72097226d860a36e', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '4fdfe7567d891028154d3d9d421da8a1cbf9b397', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '17b3895afa9f12e5a6fd5d09936d8da2113e710f', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: 'd8c87eea56b43540a6ea6f033ac80f93cc151aa8', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '69f488c6a6ef62f1247f98b8c991b9cbea1bc06e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'a3f0303b970a1d42a75dbd18bfe39d2fb4908376', required: this.required })), this.secondaryLabel && (h("span", { key: 'aa515120e86788c4301fe761d90f40005f419a26', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '89206dd59da64095fb242fdd2e24661f0573287b', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'b5c19c1e22867499990a6ba2f76bbb80d6808329', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '9e920d930bbd9adb287a206944930b07aeb2e512', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -110,6 +113,26 @@ export class CoSwitch {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -19,12 +19,12 @@ export class CoTab {
     }
     render() {
         const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '863ea310122c3becbd20a895b7f831322d0b72fb', class: {
+        return (h("button", { key: 'f9b9a7793f77d4132002185b8af9e1629952cf1a', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '88c5335df71e746585ab770759d565b548b2a718', name: this.iconLeft, size: iconSize })), h("span", { key: '8b68515ebe754fae56d28af0d0261dd8ad1b3c73', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '8e57b2c39643f0dd29d461c8d83574b8002806ae', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'edd62b88e5ec18158e9e32fcba0397ef3f1ddb61', name: this.iconLeft, size: iconSize })), h("span", { key: '0ce6db369891e9df4137c4c9f4104392b015d661', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '0e60714ab903460d67ba384bd57f619f3047861c', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'fb43d323a8146aa707955f62cdb2fc4fedfea6a0', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: '96e31ba1a9cf0e21763dff25de4750dfe147b479' })));
+        return (h("div", { key: '92285c15311b1e2c6a4f9259354fff37f372c5b1', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f7100d6cb992deae37e832f2bde89046418fbbff' })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }