@prolibu-suite/cobalt-core 0.1.2 → 0.3.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: '80117c114baa7d2e41d18501f1ac6bd5bdfa20c1', 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: '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) => {
+            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 && (() => {
             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: "", 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: '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: '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)))));
     }
     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: 'c139d79684e0f34cc732ecd8485c8fd76d85f7b6', 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: '065575ef697d72d6fde1fb35bbf0a2511d95876b', 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: '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" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,19 @@
    Renders categories, expansions, and leaf items from a JSON menu structure.
    ============================================================================= */
 
+/* Edge-fade: animatable lengths so the scroll-driven keyframes can interpolate
+   the mask smoothly. Registered globally (the host is the scroll container). */
+@property --co-sidebar-fade-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --co-sidebar-fade-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 :host {
   display: block;
   height: 100%;
@@ -13,6 +26,45 @@
   /* Scrollbar — auto-hide, subtle */
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
+
+  --co-sidebar-fade-size: 28px;
+}
+
+/* Edge-fade: the host IS the scroll container, so a mask fixed to its box
+   softens the top/bottom edges as content scrolls under it. Top fades only when
+   there's content above; bottom only when there's more below; at rest both are
+   0 → no fade. Applies in BOTH full and min (collapsed) modes — bg-agnostic, so
+   whatever the app paints behind the sidebar shows through the faded edge.
+   The lone exception is min mode WITH a flyout open: a host mask makes the host
+   a containing block for the position:fixed flyout, which would clip and
+   mis-position it — so the `flyout-open` host class drops the mask for that
+   moment (it's the only time a fixed descendant exists). */
+:host(:not([mode="min"])),
+:host([mode="min"]:not(.flyout-open)) {
+  -webkit-mask-image: linear-gradient(to bottom,
+    transparent 0, #000 var(--co-sidebar-fade-top),
+    #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);
+  mask-image: linear-gradient(to bottom,
+    transparent 0, #000 var(--co-sidebar-fade-top),
+    #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);
+}
+
+/* Scroll-driven: the host's own scroll progress animates the fade lengths.
+   When there's no overflow the timeline is inactive → no effect → edges stay
+   crisp. Guarded so engines without scroll-timeline simply show no fade. */
+@supports (animation-timeline: scroll()) {
+  :host(:not([mode="min"])),
+  :host([mode="min"]:not(.flyout-open)) {
+    animation: co-sidebar-edge-fade linear both;
+    animation-timeline: scroll(self block);
+  }
+}
+
+@keyframes co-sidebar-edge-fade {
+  0%   { --co-sidebar-fade-top: 0px;                        --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  8%   { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  92%  { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: var(--co-sidebar-fade-size); }
+  100% { --co-sidebar-fade-top: var(--co-sidebar-fade-size); --co-sidebar-fade-bottom: 0px; }
 }
 
 :host(:hover) {
@@ -44,6 +96,21 @@
   background: var(--co-color-opacity-blanco-50);
 }
 
+/* Min mode centers a fixed-width icon column; a reserved right-only scrollbar
+   gutter pulls that column left of the (non-scrolling) header above. Drop the
+   reserved gutter in collapsed mode so the icons stay centered — the rail still
+   scrolls via wheel/trackpad. (Full mode keeps its visible thin scrollbar.) */
+:host([mode="min"]) {
+  /* !important to beat the app's global `* { scrollbar-width: thin }`
+     (light-DOM) which otherwise reserves a right gutter and shifts the
+     centered icon column left. */
+  scrollbar-width: none !important;
+}
+
+:host([mode="min"])::-webkit-scrollbar {
+  width: 0 !important;
+}
+
 .co-sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -145,13 +212,26 @@
   gap: var(--co-spacing-xxs);
 }
 
+/* — Mini-mode category group — no label, but preserves the section spacing so the
+   collapsed sidebar still reads as grouped (an extra gap between groups vs. items). */
+.co-sidebar-nav__category--min {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+}
+
+.co-sidebar-nav__category--min + .co-sidebar-nav__category--min {
+  margin-top: var(--co-spacing-md);
+}
+
 /* — Leaf item — */
 .co-sidebar-nav__item {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-border-radius-xs);
   border: none;
   background: none;
   cursor: pointer;
@@ -174,7 +254,15 @@
 .co-sidebar-nav__item--active {
   background: var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover));
   color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
-  font-weight: var(--co-font-weight-semibold);
+  font-weight: var(--co-font-weight-medium);
+  /* Frosted glass (Cobalt glass system): translucent fill + backdrop blur. The
+     active bg is set translucent from the app (--co-sidebar-nav-active-bg); the
+     blur frosts the sidebar gradient behind the pill. Tokens are component-local
+     defaults (mismos valores que co-button/co-icon-button). */
+  --co-glass-blur: 12px;
+  --co-glass-saturate: 1.3;
+  -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));
 }
 
 .co-sidebar-nav__item-icon {
@@ -211,17 +299,16 @@
   height: 36px;
   padding: 0;
   justify-content: center;
+  /* Same corner radius as full-mode rows so the active/hover chip reads
+     consistently collapsed vs expanded. */
   border-radius: var(--co-border-radius-xs);
 }
 
-.co-sidebar-nav--min .co-sidebar-nav__item--active {
-  background: var(--co-sidebar-nav-active-bg-min, var(--co-color-primary-azul));
-  color: var(--co-color-base-blanco);
-}
-
-.co-sidebar-nav--min .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon {
-  color: var(--co-color-base-blanco);
-}
+/* Min-mode active intentionally has NO overrides: it inherits the base
+   .co-sidebar-nav__item--active treatment (frosted --co-sidebar-nav-active-bg +
+   backdrop blur + adaptive --co-sidebar-nav-active-color) so the collapsed
+   active chip matches the expanded one in color and treatment.
+   (--co-sidebar-nav-active-bg-min is no longer consumed.) */
 
 /* — Flyout (mini mode hover popover) — */
 .co-sidebar-nav__flyout-anchor {
@@ -275,7 +362,7 @@
 .co-sidebar-nav__flyout .co-sidebar-nav__item--active {
   background: var(--co-color-gray-100);
   color: var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));
-  font-weight: var(--co-font-weight-semibold);
+  font-weight: var(--co-font-weight-medium);
 }
 
 .co-sidebar-nav__flyout .co-sidebar-nav__item-icon {
@@ -310,7 +397,7 @@
   align-items: center;
   gap: var(--co-spacing-sm);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-border-radius-xs);
   border: none;
   background: none;
   cursor: pointer;