@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.css

@@ -770,7 +770,7 @@ co-rich-text-editor {
 }
 
 .co-rte-bubble__link-unlink {
-  background: var(--co-semantic-surface-error, #ef4444);
+  background: var(--co-semantic-status-error, #aa2e1b);
 }
 
 /* ── Draggable panels (font size, weight, line height, letter spacing, bg color) ── */

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js

@@ -2021,14 +2021,14 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: 'd24b8e5db1151bcd983790ea15f68aaf4838ff43', class: {
+        return (h("div", { key: 'a863f70f90bd46ee2306d175d55a519e7e659693', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
                 'co-rich-text-editor--readonly': this.readonly,
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '1622079a94d8ebb190642f91463b715f3456fcf4', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'bb5c0754a63d46d45ce8f211ae0f0e8c4ddbc478', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '1af0a217a38746c3a78693c552be44df6d03b276', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e5ad90dd90061be3e40136eece0f485e5cfb89a1', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '56f3da29e9259cd37fdf6e7511dc54efb30085ca', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'bb0dc27e8625171284cae02b5cae28dcbe638991', class: "co-rich-text-editor__box" }, h("div", { key: '647563e73112023ec546418787dbf61acb58853d', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: '460dad69fd1781f11d751565d0ca09015013e8ce', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '69d8fb55797eb8f35885fa10e86cf08e4d0e45ec', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'd1c3cc4f06284b865c889dac7492305a4b7d8dfd', name: this.helperIcon, size: 14 }), h("span", { key: '361940f354fcee5a309cd2ef5cff84b73689650e' }, this.helperText))), showCount && (h("span", { key: '2b5a1b6e04ba3d428346034d092bf83978de0124', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '7e17033f81cbb694f2010d709f82b5e9889a3c01', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '9e2950cee1b79964f8628a6731bf5b779aaab325', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'e9fbd5143e20e61509691f86c53aabff6c3bc7a4', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'd8909018c066c1572c2fd28a8c1d5a658f342c02', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '06907acfc9c6187864f79bed5364aae5cb0fb5d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'c173744e164a4c2591baf2a13076c253aeadab64', class: "co-rich-text-editor__box" }, h("div", { key: '62d96e73d679a9dda50dfba670ae42bf4a2cde96', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: 'c0175bc7b0259c5d583d64394bb217f7cdc9b412', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '909b30e6b36cfda26573d5b3c653158904d3c0c2', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'e6c5c07ca23c2aee967bad06ce91c442cdee4d9b', name: this.helperIcon, size: 14 }), h("span", { key: 'e4e74012dea722d0aa31d79e4a444d8c5b004c7c' }, this.helperText))), showCount && (h("span", { key: 'ce85002412ace110ea9cf0191d4e5e072a21af72', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '75c5a2693135e21a3a4379d8bbb6d9be5bdf6bf5', class: {
+        return (h("div", { key: '3b77dcfd8a0d6fccdb5932e2dd316ab1166e13e9', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: 'beb274682f02b428b93315b057fbfe11bf2be037', class: "co-row__prefix" }, h("slot", { key: '0c9381d277795df7230da6eb05b9a5fa46726cf2', name: "prefix" })), h("div", { key: '2753f7c221e17d9eb91a685567a16470210652de', class: "co-row__content" }, h("slot", { key: '257befca88d731c4b6c3b8545fa3f2db6c56482c' })), h("div", { key: '934ecc29de8822bf084a4d49e828aa64481dbbe3', class: "co-row__suffix" }, h("slot", { key: 'baa9de54437b45d4fe54f3e2faaf28d9b8cc8ed0', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '0f0112ad8cf977587af1cc756ec822ca5d8c81fc', class: "co-row__prefix" }, h("slot", { key: 'd6ac18b41dca0597dba80f5d49554471832b6c4f', name: "prefix" })), h("div", { key: '8c1de305f4268cc8d10f6ba1203750bd96061dc3', class: "co-row__content" }, h("slot", { key: 'fe882bbb96faae81377c4613024a74762f84c113' })), h("div", { key: '0bb2646c6f0d4f52573021b76e3a950ddca11056', class: "co-row__suffix" }, h("slot", { key: '3518a826a39d3491a24067a9be3a5284e6a184d4', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-segmented-bar/co-segmented-bar.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.co-segmented-bar {
+  width: 100%;
+}
+
+.co-segmented-bar__track {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  /* height + background are set inline from `thickness` / `trackColor`. */
+}
+
+/* ─── Radius ─────────────────────────────────────────────── */
+.co-segmented-bar__track--radius-full {
+  border-radius: var(--co-border-radius-full, 9999px);
+}
+
+.co-segmented-bar__track--radius-sm {
+  border-radius: var(--co-border-radius-sm, 12px);
+}
+
+.co-segmented-bar__track--radius-lg {
+  border-radius: var(--co-border-radius-lg, 16px);
+}
+
+/* ─── Segments ───────────────────────────────────────────── */
+.co-segmented-bar__segment {
+  display: block;
+  height: 100%;
+  /* width + background are set inline per segment. */
+}

package/dist/collection/components/co-segmented-bar/co-segmented-bar.js

@@ -0,0 +1,176 @@
+import { h } from "@stencil/core";
+/**
+ * A stacked, multi-segment meter — a pill track split into N contiguous
+ * colored segments (e.g. a storage breakdown). Display-only; colors are
+ * supplied by the consumer. Provide an external legend via `slot="legend"`.
+ */
+export class CoSegmentedBar {
+    constructor() {
+        /** Track height in px. */
+        this.thickness = 10;
+        /** Corner rounding of the track. `full` = pill. */
+        this.radius = 'full';
+        /** Background color of the empty track. */
+        this.trackColor = 'var(--co-color-gray-100)';
+        /** The value the segments are measured against (100% = full track). */
+        this.total = 100;
+        /**
+         * Segments to render — a JSON string OR an array of
+         * `{ value: number; color: string; label?: string }`.
+         */
+        this.segments = '[]';
+    }
+    /** Normalize the `segments` prop (JSON string or array) to a clean array. */
+    get parsedSegments() {
+        const raw = this.segments;
+        let arr = raw;
+        if (typeof raw === 'string') {
+            if (!raw.trim())
+                return [];
+            try {
+                arr = JSON.parse(raw);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        if (!Array.isArray(arr))
+            return [];
+        return arr
+            .filter((s) => !!s && typeof s.value === 'number' && typeof s.color === 'string')
+            .map((s) => ({ value: s.value, color: s.color, label: s.label }));
+    }
+    render() {
+        const segments = this.parsedSegments;
+        const total = this.total > 0 ? this.total : 100;
+        return (h("div", { key: '3f4538a2c701799531b586e0b039fb952e5d11ba', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '45c3baf87d073835bc9954ba5ab9c847e5da7fa8', class: {
+                'co-segmented-bar__track': true,
+                [`co-segmented-bar__track--radius-${this.radius}`]: true,
+            }, part: "track", style: { height: `${this.thickness}px`, background: this.trackColor } }, segments.map((seg, i) => (h("span", { key: i, class: "co-segmented-bar__segment", part: "segment", title: seg.label, style: {
+                width: `${(seg.value / total) * 100}%`,
+                background: seg.color,
+            } })))), h("slot", { key: 'a6e865f76ff83ff47eb459721c1958f0b431f02d', name: "legend" })));
+    }
+    static get is() { return "co-segmented-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-segmented-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-segmented-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Track height in px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thickness",
+                "defaultValue": "10"
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full' | 'sm' | 'lg'",
+                    "resolved": "\"full\" | \"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner rounding of the track. `full` = pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "'full'"
+            },
+            "trackColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the empty track."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-color",
+                "defaultValue": "'var(--co-color-gray-100)'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value the segments are measured against (100% = full track)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "100"
+            },
+            "segments": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CoSegment[]",
+                    "resolved": "CoSegment[] | string",
+                    "references": {
+                        "CoSegment": {
+                            "location": "local",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segments to render \u2014 a JSON string OR an array of\n`{ value: number; color: string; label?: string }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "segments",
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+}

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

@@ -727,10 +727,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
-  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  border: 1px solid var(--co-semantic-border-subtle);
+  /* Figma Text Field parity (same box as co-input): solid page surface +
+     Negro 25% border — tinted glass didn't read as editable on white. */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -1066,6 +1066,3 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   content: var(--co-field-required-text, ' (required)');
 }
 
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-select__trigger { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -208,19 +208,19 @@ export class CoSelect {
         var _a;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: '80117c114baa7d2e41d18501f1ac6bd5bdfa20c1', class: {
+        return (h("div", { key: 'e52ada6dab00c28435576237271547db70c66b7a', 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: '298b864956542f86934ebf2a932bd8e10df10b0c', class: "co-select__labels" }, this.label && h("label", { key: 'a0b1b123203f418d8f9c9db22bad068a17d01511', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'e170c7fbde96ab31c7220d461042118664d68c3b', required: this.required })), this.secondaryLabel && h("span", { key: 'd40ed570060b416adf461284b1836520326e77e7', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'fd7d4799fecbd5170b7e88132ca3a892200190a0', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '3179abebe2e93432544a53e31cdcd17389d87be0', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'f205a1a07564690d25988faa1f1eb943a42177d6', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '8f15efb686581727391617fd57a55c5636134cf0', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '45c9c037da6523f7ffaea58f22363f239e1537d3', class: "co-select__labels" }, this.label && h("label", { key: '611dec09fd4637c09ca45e8fbb9a930bafaf8e15', class: "co-select__label" }, this.label, h(RequiredMark, { key: '75f302013790f9cf73da4db38a1c8635d8132a2e', required: this.required })), this.secondaryLabel && h("span", { key: '49404c2801028303e2bb825f1eb5e0d1854cf72a', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2169518b1ed1944b4b483e19a72507865762764a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6d4984781b7b59ba09c77b24677e4911a3f0827b', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '8aa3d88126db4f7840b8080c46fe00a1e498dc7f', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '6cf713b9dbbd2923d6543a9903e998ee83185010', 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: '54f73eb25ee75cbf5bb042967c7886ef301bf9ed', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'db324b13e30a71dbc7d0792a6a3374350bc29216', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '4332870af3b3d5fc3dd157b7aa51d75141379423', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '4e9c33d19eb0694dee2625a87737584082a05ef9', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: 'ba3d77e39c223193884d13ece1406c57348d9fbe', class: "co-select__search" }, h("co-icon", { key: '7b9917353b668d67e26a7f0734e3b094bcfbfba8', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '4be851a3ac33d169352b8bb8db3401e8c2fd07da', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '2f37b7de7a52009814189b522ed89970b88fbcd6', class: "co-select__empty" }, this.emptyText)), h("div", { key: '2de0fd19d84a409b4a196dcbe3f93ad4c4a17dac', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+        }))) : (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: 'b2e65bbec3c9f4eade2f250b8f446fc7719ac87f', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ec6bef7248b519d032c831208a89d8fdabdd5e85', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '9e43c223117d1a30b3b24f1e64a4bf1ca2e003db', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'c622ad50ad8667ffa1094d9f53a467588963a720', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: 'a20bb6f186b6c740da4f7f22392dd5369dd1cd15', class: "co-select__search" }, h("co-icon", { key: '02a8fbbcdc31b6924bc69255c692cb9c89210321', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '5323a3037c9deb9855d65ec1d3246ba80b0811e2', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b9d8a5f12e278bf5b8ff813b22e43f7e8ffee0fb', class: "co-select__empty" }, this.emptyText)), h("div", { key: '7f84a589795e9333e18926854ead79dc0fa3c6e1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             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);
@@ -231,7 +231,7 @@ export class CoSelect {
                         'co-select__option--disabled': isDisabled,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : 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: '09eb41ec92953a06ee80cfefe120c23ad37a9d76', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '15a47bd796ab0af375c85054cc61e7fa4fa88d03', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'e71c40ee14bbf4ac5bedad608177d5a0a61fff84', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: '2d65962fc0025c8bf2b3950328e0187a15c92cf8', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c64d2b35fb10dbe5e25a9db78c7155f9cfdde33c', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'e49697063342fd79a85e101a821f944e781c9ef5', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }

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: 'c139d79684e0f34cc732ecd8485c8fd76d85f7b6', class: {
+        return (h("hr", { key: '79a2dd5c7bc7d37d1b9d77b03e72b6014228532b', 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: '065575ef697d72d6fde1fb35bbf0a2511d95876b', class: {
+        return (h("nav", { key: 'ea33fc3e60a0b3e7f5d5ad37569524aa46b1cb76', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '8580c3561f196699e4c7d42bfbf55f2f60a26f10', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'addef13305295557bbc5998999e489a395f1e8a5', name: "header" })), h("div", { key: '8ebd04b00553a6dd7870a4c66a5344d4ec784e80', class: "co-sidebar__body", part: "body" }, h("slot", { key: '75f73e00722e2c864c965f16d179a0a40e1907f7' })), h("div", { key: '7165390d8c38b1a77e89ca38d3998031adfbd346', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '746a7319de0db254b95537e9cc88e0d2f1eff820', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '7feaf48ba91059cf5b046579b68adfbfb896850d', class: "co-sidebar__header", part: "header" }, h("slot", { key: '869fd6af70b09829ef05f15b2fdab554a978f1f8', name: "header" })), h("div", { key: '1bc044d4c70854b748e473041fea378ca1e3bd4f', class: "co-sidebar__body", part: "body" }, h("slot", { key: '0c0033d1af7a9dd902a61da6e97811e75214e9c5' })), h("div", { key: 'ef37cc7709b4d6afc420f1e3aaba13b6db2997e6', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'df1b6a08c313ed1818fcfd93a89f9c1cd709bccd', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -229,7 +229,9 @@
 .co-sidebar-nav__item {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm);
+  /* Figma Home Link: gap 8 (space-sm de Figma = spacing-sm2), Geist Medium 14,
+     line-height 1, Gris-700 — paridad exacta con el spec del sidebar. */
+  gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xs);
   border: none;
@@ -240,10 +242,10 @@
   color: var(--co-semantic-text-default);
   transition: background 0.15s ease, color 0.15s ease;
   font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-12);
+  font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
   letter-spacing: var(--co-font-letter-spacing-body);
-  line-height: var(--co-font-line-height-normal);
+  line-height: 1;
 }
 
 .co-sidebar-nav__item:hover {
@@ -395,7 +397,7 @@
 .co-sidebar-nav__expansion-header {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm);
+  gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xs);
   border: none;
@@ -406,10 +408,10 @@
   color: var(--co-semantic-text-secondary);
   transition: background 0.15s ease, color 0.15s ease;
   font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-12);
+  font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
   letter-spacing: var(--co-font-letter-spacing-body);
-  line-height: var(--co-font-line-height-normal);
+  line-height: 1;
 }
 
 .co-sidebar-nav__expansion-header:hover {

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

@@ -365,12 +365,14 @@ export class CoSidebarNav {
             return null;
         return (h("div", { class: "co-sidebar-nav__search" }, h("co-icon", { name: "magnifying-glass", size: 16 }), h("input", { type: "text", class: "co-sidebar-nav__search-input", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput }), this.searchText && (h("button", { class: "co-sidebar-nav__search-clear", onClick: () => { this.searchText = ''; this.coSearch.emit(''); } }, h("co-icon", { name: "x", size: 14 })))));
     }
-    renderIcon(item) {
+    /** Icon size follows the surface: 16 next to a label (Figma Home Link spec),
+        18 for the icon-only rail chips (min mode) where the glyph stands alone. */
+    renderIcon(item, size = 16) {
         if (item.customIcon) {
             return h("img", { class: "co-sidebar-nav__custom-icon", src: item.customIcon, alt: "" });
         }
         const iconName = item.icon || this.getIcon(item.key);
-        return h("co-icon", { name: iconName, size: 18 });
+        return h("co-icon", { name: iconName, size: size });
     }
     /**
      * Renders a label with the search-matching substring highlighted.
@@ -400,7 +402,7 @@ export class CoSidebarNav {
         const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, showLabel ? 16 : 18)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
         // Collapsed (icon-only) items get a Cobalt tooltip with the label instead of
         // the native `title`. Flyout items (forceLabel) already show their label.
         if (this.mode === 'min' && !forceLabel) {
@@ -450,7 +452,7 @@ export class CoSidebarNav {
                     else {
                         this.openFlyout(item.key, anchor || undefined, ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0);
                     }
-                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
+                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, 18))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
         }
         return (h("div", { class: {
                 'co-sidebar-nav__expansion': true,
@@ -484,10 +486,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: 'b24ca79d961f65bbe629e0289185de1751ab1fd1', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'e37ad68826bf9236c9a009a8b4355dfaca2d3a3d', class: {
+        h(Host, { key: '6bf3b6d16c6baef9af2b41ee38c0823961595132', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '0264a43d3b83859b114001917c45e312fb702afe', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'ccf9c947e0fa3f4494ebd9fa55e2c726836e8c59', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: '92437d9f022ec1a25adc04ea52b512dbb046bfc0', 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-skeleton/co-skeleton.js

@@ -16,7 +16,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '073c65d588917203f4f6a253a97535dc8a1a38f7', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: 'e62aec4781b1ef8b7b4fa2ba423cf9e94184646a', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
     }
     static get is() { return "co-skeleton"; }
     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: '719f3ecd1e92b234f2938b570747c4d1f174903b', class: {
+        return (h("div", { key: 'a445c6c490d0a86aabdd1863ffca7fb5b6a83dcb', 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: 'fb46d7ebad65bf172b4c816b733e08ca991e5cb8', class: "co-slider__labels" }, h("div", { key: '21718e63d1d63f802f939c10f962f0e9ec5b56e6', class: "co-slider__labels-left" }, this.label && h("label", { key: 'd408bc63492d3b778f7314d1e66864eb1ad6edce', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '3e439468743dfcc0ff315bf388a074cdc4627f2d', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'a4e1faacfc462132454f6c5e3763d4fb19f68c64', class: "co-slider__value" }, this.value))), h("div", { key: 'eb56a12853ed3646a410a5514758d4fd518a8122', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a1b207d80af7febbc40cd99bc9dac1dd67704b50', class: "co-slider__track" }, h("div", { key: '77df50269d88735f61d8f18e05261fa74f89095f', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c162883c5bd5c162b42a4ab2d8ef305bec6e122f', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'c54273d0f17b2417603969d96c15218f450034b1', class: "co-slider__marks" }, h("span", { key: '8c79656db7ef7c5da77bfb4195e94f2b75cb17e6', class: "co-slider__mark" }, this.min), h("span", { key: 'f5b3a63ebd5ca13b4a5f3275f2084addb73a7f4e', class: "co-slider__mark" }, this.max))), h("input", { key: '415197b6ae17a3ca980171019d419939a5b3ae6c', 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: '935c2f02e24345bade1563782c3a252157eecd00', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '76f5ccf6375c362841726f24c4be222293bd14b3', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '909c3b06b4eecd507b595d31b78220c7c29fbf22', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '604b51df33236b1401660a8b914035adbd339665', class: "co-slider__labels" }, h("div", { key: '3000bbc413d021ecdfbbb7efef5d8ec6d5924e6e', class: "co-slider__labels-left" }, this.label && h("label", { key: 'b9b02590dc634466834ac6229934cf3b78281fb6', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'c6acee956d73ae313b26196b87ee7ea1b8a2b134', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'aba76d883e5cf2631104cbaebb302002e1fe496a', class: "co-slider__value" }, this.value))), h("div", { key: '6535ee992fccc80988c77a33032846e8b5fe605f', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'c017699fc2fea78cb55cac01b4dce6c8c660d27a', class: "co-slider__track" }, h("div", { key: '7831a55b6e34544915e27fb2ed5dd84f92acb60e', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e03368137b3e548e9a082f1f7f57b6e7a9b0df37', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8f8be1af979de772be4f7ebc69e9d3b6a7c2f58d', class: "co-slider__marks" }, h("span", { key: '2037b37b88f6a5734bf8845e5a562ca17d823ef0', class: "co-slider__mark" }, this.min), h("span", { key: 'db35ba88af0d4b13b4f47370360d0f041fbeb4b7', class: "co-slider__mark" }, this.max))), h("input", { key: '6a98de808328d9a72f4b95f9a64ad01e4003082e', 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: '2d5f0d9ccf9d4e052ddbedb5080718f9e71f0605', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'afa9618ff8a3dfab3a55163e1fe500c58f0a4406', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '6e0c46b8561beca6a3dadf03d117a8526d31a860', 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

@@ -18,7 +18,9 @@
 .co-switch-wrapper__row {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm2);
+  /* Overridable per surface (crosses the shadow boundary): e.g. toolbar quick
+     toggles use spacing-md per the Figma navbar spec. */
+  gap: var(--co-switch-label-gap, var(--co-spacing-sm2));
   cursor: pointer;
 }
 

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '2a60b60256d74e480b243ddb3901e5e8e86c90dd', class: {
+        return (h("div", { key: 'aa2690f72e8a64fcf835a58ed7b5a578e93dd6fa', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '57826bc0de97ccb8358f544f11a25c2b7000bbb8', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '5ccd4d33fde509bd9139a5e453c93991dda1f558', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'fda38eadee3187b559ab343acd80de17d6f88da1', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '11c63216f459295d2858530f9d879913d205417d', 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: 'f530dcbf59372906efe0b45048cd5d60b139e9bc', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '24693a23c390a4a5e892f61998fc60a29ce9367f', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'e1c8fc8d176e8f7af8e8cdab90671061e0e66ab7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'bfc33a5e95f7e9fd0f9ca55ccd6c990515623e0e', required: this.required })), this.secondaryLabel && (h("span", { key: 'd4fe51103f9c13dee75e96b8ec8faa254fbedde3', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '1b2d6c1124e2d0f448b9aa0ed019e75b75426949', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'ae56e1f679f393f77bb3836dfd61dee093a8a461', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'd99621887a268b3b9b19361890c8582adbaa4482', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '6e6060ee3128697653bb11335e7ebd82a37d2960', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '10084cce0ded48f6188fe5bbba1e2058f2d6962c', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '87665730e8cf05f481f4835594fd912f4499b9c7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '0d121097ee0c5ca14f150a93a9f021ddf883667c', required: this.required })), this.secondaryLabel && (h("span", { key: '0bc01f629b4b62ba7c86e2ff229b127a3ac45537', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '7447890f8f651445917e1b59166e827e1a0a52ca', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '5759ca2e6b013743ce263a4b002214c03d8a202c', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '359a87a5865fde6d9db953e6e4554a7b5ae5cb5e', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }