@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -59,6 +59,66 @@
   margin: var(--co-spacing-sm) 0;
 }
 
+/* ---- Responsive image layout (mirrors the editor; keyed on data-image-layout) ---- */
+.co-rich-text-viewer img[data-image-layout="wrap-left"] {
+  float: left;
+  max-width: 50%;
+  margin: 4px 16px 8px 0;
+}
+.co-rich-text-viewer img[data-image-layout="wrap-right"] {
+  float: right;
+  max-width: 50%;
+  margin: 4px 0 8px 16px;
+}
+.co-rich-text-viewer img[data-image-layout="center"] {
+  display: block;
+  margin: 12px auto;
+}
+.co-rich-text-viewer img[data-image-layout="full-width"] {
+  display: block;
+  width: 100%;
+  margin: 12px 0;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer img[data-image-layout="wrap-left"],
+  .co-rich-text-viewer img[data-image-layout="wrap-right"] {
+    float: none;
+    max-width: 100%;
+    display: block;
+    margin: 12px 0;
+  }
+}
+
+/* Defensive: neutralise absolute positioning baked by the old fixed-page model
+   so legacy content reflows in-flow instead of overlapping the text. */
+.co-rich-text-viewer img[style*="position:absolute"],
+.co-rich-text-viewer img[style*="position: absolute"] {
+  position: static !important;
+  left: auto !important;
+  top: auto !important;
+  z-index: auto !important;
+}
+
+/* Embeds (YouTube + generic iframe) — the iframe fills its wrapper; the wrapper
+   ([data-iframe] / [data-youtube-video]) carries an optional inline px width
+   (set when the author resized it). No width = full width (responsive 16:9). */
+.co-rich-text-viewer iframe {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  display: block;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  margin: 0;
+}
+.co-rich-text-viewer .co-rte-iframe,
+.co-rich-text-viewer [data-youtube-video] {
+  display: block;
+  max-width: 100%;
+  margin: var(--co-spacing-sm) 0;
+}
+
 .co-rich-text-viewer code {
   font-family: var(--co-font-family-mono);
   font-size: 0.9em;
@@ -76,3 +136,21 @@
   color: var(--co-color-base-blanco, #fff);
   font-size: 0.9em;
 }
+
+/* ============================================================
+   Fluid content width (document / "site" preset)
+
+   Mirrors the editor: the content fills ~80% of its container on desktop and the
+   full width on mobile, so it reflows to fit any device. Host apps can tune the
+   desktop measure via --co-rte-content-width.
+   ============================================================ */
+.co-rich-text-viewer--site {
+  width: var(--co-rte-content-width, 80%);
+  max-width: 100%;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .co-rich-text-viewer--site {
+    width: 100%;
+  }
+}

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

@@ -1,17 +1,24 @@
 import { h } from "@stencil/core";
-// The `/sanitizer` subpath has no Tiptap import → tiny bundle. Stencil's
-// classic TS moduleResolution can't read package.json `exports`, so the
-// subpath is mapped in tsconfig `paths` (rollup resolves it via `exports`).
-import { sanitize } from "../../../../../rich-text/dist/sanitizer";
+import DOMPurify from "dompurify";
 /**
  * Read-only renderer for rich-text content. For `format="html"` it only runs
- * the package's canonical sanitizer (the `/sanitizer` subpath has no Tiptap
- * import → tiny). `format="json"` lazily pulls the serializer to turn a
- * ProseMirror document into sanitized HTML.
+ * DOMPurify (no Tiptap import → tiny). `format="json"` lazily pulls the
+ * serializer to turn a ProseMirror document into sanitized HTML.
+ *
+ * The HTML path sanitizes inline (mirrors the rich-text package's whitelist)
+ * so the viewer never pulls the editor engine into its bundle.
  *
  * @part content - The rendered content container
  * @part empty - The empty-state element
  */
+const ALLOWED_TAGS = {
+    comment: ['p', 'br', 'strong', 'em', 'a', 'span'],
+    task: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote'],
+    email: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
+    document: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'hr', 'div', 'mark', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'iframe'],
+};
+/** iframes are permitted only with an https: source (blocks javascript:/data:/http:). */
+const SAFE_IFRAME_SRC_RE = /^https:\/\/[^\s"'<>]+$/i;
 export class CoRichTextViewer {
     constructor() {
         /** HTML string (default) or ProseMirror JSON string. */
@@ -30,18 +37,34 @@ export class CoRichTextViewer {
     watchInputs() {
         return this.compute();
     }
-    get parsedFeatures() {
-        if (!this.features)
-            return undefined;
-        if (typeof this.features === 'string') {
-            try {
-                return JSON.parse(this.features);
+    sanitizeHtml(html) {
+        var _a;
+        DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+            var _a, _b;
+            // Only allow <input type="checkbox"> (task list checkboxes); strip others.
+            if (data.tagName === 'input' && node.type !== 'checkbox') {
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
             }
-            catch (_a) {
-                return undefined;
+            // Allow only https iframes (YouTube, Vimeo, …); strip anything else.
+            if (data.tagName === 'iframe') {
+                const src = node.getAttribute('src') || '';
+                if (!SAFE_IFRAME_SRC_RE.test(src))
+                    (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(node);
             }
+        });
+        try {
+            const clean = DOMPurify.sanitize(html, {
+                ALLOWED_TAGS: (_a = ALLOWED_TAGS[this.preset]) !== null && _a !== void 0 ? _a : ALLOWED_TAGS.document,
+                ALLOWED_ATTR: ['href', 'target', 'rel', 'data-variable', 'data-mention-id', 'data-mention-label', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'allowfullscreen', 'frameborder', 'allow', 'loading', 'data-youtube-video', 'data-iframe', 'data-image-layout', 'data-file-id', 'type', 'checked', 'disabled'],
+                ALLOW_DATA_ATTR: false,
+                FORBID_TAGS: ['script', 'object', 'embed', 'form', 'textarea', 'style'],
+                ADD_ATTR: ['allowfullscreen', 'frameborder', 'allow', 'loading'],
+            });
+            return clean;
+        }
+        finally {
+            DOMPurify.removeHook('uponSanitizeElement');
         }
-        return this.features;
     }
     async compute() {
         if (!this.value) {
@@ -49,14 +72,14 @@ export class CoRichTextViewer {
             return;
         }
         if (this.format === 'html') {
-            this.html = sanitize(this.value, this.preset, this.parsedFeatures);
+            this.html = this.sanitizeHtml(this.value);
             return;
         }
         // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
         try {
             const doc = JSON.parse(this.value);
             const rt = await import('@prolibu-suite/cobalt-rich-text');
-            this.html = rt.jsonToHtml(doc, this.preset, this.parsedFeatures);
+            this.html = rt.jsonToHtml(doc, this.preset);
         }
         catch (_a) {
             this.html = '';
@@ -66,7 +89,11 @@ export class CoRichTextViewer {
         if (!this.html) {
             return (h("div", { class: "co-rich-text-viewer co-rich-text-viewer--empty", part: "empty" }, this.emptyText || ''));
         }
-        return (h("div", { class: { 'co-rich-text-viewer': true, 'co-rich-text-viewer--compact': this.compact }, part: "content", innerHTML: this.html }));
+        return (h("div", { class: {
+                'co-rich-text-viewer': true,
+                'co-rich-text-viewer--compact': this.compact,
+                'co-rich-text-viewer--site': this.preset === 'document',
+            }, part: "content", innerHTML: this.html }));
     }
     static get is() { return "co-rich-text-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -149,25 +176,6 @@ export class CoRichTextViewer {
                 "attribute": "preset",
                 "defaultValue": "'document'"
             },
-            "features": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | object",
-                    "resolved": "object | string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Feature overrides used when the content was authored with them (JSON\nstring for HTML attr, or object via JS property) \u2014 keeps the whitelist\nin lock-step with the editor that produced the content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "features"
-            },
             "emptyText": {
                 "type": "string",
                 "mutable": false,
@@ -224,9 +232,6 @@ export class CoRichTextViewer {
             }, {
                 "propName": "preset",
                 "methodName": "watchInputs"
-            }, {
-                "propName": "features",
-                "methodName": "watchInputs"
             }];
     }
 }

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '23841a9145b930d4c9ccf77038132b6d62077395', class: {
+        return (h("div", { key: '75c5a2693135e21a3a4379d8bbb6d9be5bdf6bf5', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '2b3672bf156732fa74ae2cf88751678cd1acc6b3', class: "co-row__prefix" }, h("slot", { key: '663ad19611357ec125d8634fddbf3f3b897ae39b', name: "prefix" })), h("div", { key: '58deed652fad6d3f5b49b2b31855aa7f1b5e7784', class: "co-row__content" }, h("slot", { key: 'c5e73b4048c5aa2ba0f6ffc7e7d8c23d7f5d6e37' })), h("div", { key: 'd9cce5c7877f51ec5e79b493401e42b26fa426c1', class: "co-row__suffix" }, h("slot", { key: '741c8cf347a4046122eb01ae3001263d6c9d09d6', name: "suffix" }))));
+            }, 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" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -727,7 +727,9 @@ 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: var(--co-semantic-surface-secondary);
+  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);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
@@ -1063,3 +1065,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-field-required__caption::before {
   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: '279b14eda557b860b4151685bf7d7d0c97ab861d', class: {
+        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: '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) => {
+            } }, (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: '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) }, (() => {
+        }))) : (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);
@@ -229,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.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" })));
+                    }, 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: '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)))));
+        })()))), 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"; }

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: '7024b84bf2a0cf7b0f5d95b1ded130295f3956f2', 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: '06e023317ddd0ba958aed6fae1260d99cf98787b', class: {
+        return (h("nav", { key: '065575ef697d72d6fde1fb35bbf0a2511d95876b', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, 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" }))));
+            }, 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;

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { normalizeText } from "../../utils/normalizeText";
 /** Default icon mapping for common Prolibu model keys → Phosphor icon names */
 const DEFAULT_ICON_MAP = {
@@ -129,10 +129,16 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
-    // Achievements
+    // Human Resources
+    Recruitment: 'user-plus',
+    Candidates: 'user-list',
+    // Achievements / Recognition
+    Recognition: 'hands-clapping',
     Achievements: 'trophy',
     Rewards: 'gift',
     Badges: 'medal',
+    BadgeNominations: 'star',
+    Prizes: 'trophy',
     RewardsBudgets: 'wallet',
     RedeemedPrizes: 'crown',
     // Sales / Billing extras
@@ -389,10 +395,18 @@ export class CoSidebarNav {
     }
     renderLeafItem(item, forceLabel = false) {
         const isActive = item.key === this.activeKey;
-        return (h("button", { class: {
+        const label = this.getLabel(item.key);
+        const showLabel = this.mode === 'full' || forceLabel;
+        const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), title: this.getLabel(item.key) }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), (this.mode === 'full' || forceLabel) && (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 && (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) {
+            return (h("co-tooltip", { content: label, placement: "right", offset: 12 }, button));
+        }
+        return button;
     }
     openFlyout(key, anchorEl, childCount = 0) {
         clearTimeout(this.flyoutTimeout);
@@ -446,8 +460,10 @@ export class CoSidebarNav {
     }
     renderCategory(item) {
         if (this.mode === 'min') {
-            // In mini mode, render children directly (skip category headers)
-            return item.children.map(child => this.renderItem(child));
+            // In mini mode, drop the category label but keep a group wrapper so the
+            // sections stay visually separated by vertical spacing (mirrors the
+            // section gaps of full mode — the structure is still legible collapsed).
+            return (h("div", { class: "co-sidebar-nav__category--min" }, item.children.map(child => this.renderItem(child))));
         }
         return (h("div", { class: "co-sidebar-nav__category" }, h("span", { class: "co-sidebar-nav__category-label" }, this.renderHighlightedLabel(item.key)), h("div", { class: "co-sidebar-nav__category-items" }, item.children.map(child => this.renderItem(child)))));
     }
@@ -464,10 +480,14 @@ export class CoSidebarNav {
     }
     render() {
         const items = this.filteredItems;
-        return (h("nav", { key: 'b3e49df434a663c564959f6b332ed121607af5bb', class: {
+        return (
+        // `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: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '26ef8af4e3152e7c094f966d881ad436ee52a805', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item)))));
+            } }, this.renderSearch(), h("div", { key: 'ccf9c947e0fa3f4494ebd9fa55e2c726836e8c59', 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.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+}
+
+.co-skeleton {
+  height: 1em;
+  border-radius: var(--co-border-radius-xs);
+  background: linear-gradient(
+    90deg,
+    var(--co-semantic-surface-secondary) 0%,
+    var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,
+    var(--co-semantic-surface-secondary) 100%
+  );
+  background-size: 200% 100%;
+  animation: co-skeleton-sweep 1.2s ease-in-out infinite;
+}
+
+.co-skeleton--text { border-radius: var(--co-border-radius-xxs); }
+.co-skeleton--circle { border-radius: var(--co-border-radius-full); }
+
+@keyframes co-skeleton-sweep {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-skeleton { animation: none; }
+}