@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/co-rich-text-viewer.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { p as purify } from './purify.es-B2QLgWrz.js';
+
+const coRichTextViewerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);line-height:1.5}.co-rich-text-viewer{padding:var(--co-spacing-md) 0}.co-rich-text-viewer--compact{padding:var(--co-spacing-sm) 0}.co-rich-text-viewer--empty{color:var(--co-semantic-text-muted);font-style:italic}.co-rich-text-viewer p{margin:0 0 var(--co-spacing-sm)}.co-rich-text-viewer p:last-child{margin-bottom:0}.co-rich-text-viewer h1,.co-rich-text-viewer h2,.co-rich-text-viewer h3,.co-rich-text-viewer h4{margin:var(--co-spacing-md) 0 var(--co-spacing-sm);font-weight:600;line-height:1.3}.co-rich-text-viewer ul,.co-rich-text-viewer ol{padding-left:var(--co-spacing-xl);margin:0 0 var(--co-spacing-sm)}.co-rich-text-viewer blockquote{border-left:3px solid var(--co-semantic-border-subtle);padding-left:var(--co-spacing-md);margin:0 0 var(--co-spacing-sm);color:var(--co-semantic-text-secondary)}.co-rich-text-viewer a{color:var(--co-color-primary-azul);text-decoration:underline}.co-rich-text-viewer img{max-width:100%;height:auto;border-radius:var(--co-border-radius-xs);margin:var(--co-spacing-sm) 0}.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}}.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}.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;background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));padding:0.1em 0.3em;border-radius:var(--co-border-radius-xxs)}.co-rich-text-viewer .co-rte-variable,.co-rich-text-viewer [data-variable]{display:inline-block;padding:0.05em 0.4em;border-radius:var(--co-border-radius-xxs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-size:0.9em}.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%}}`;
+
+/**
+ * Read-only renderer for rich-text content. For `format="html"` it only runs
+ * 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;
+const CoRichTextViewer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** HTML string (default) or ProseMirror JSON string. */
+        this.value = null;
+        /** Input format. `html` is the lightweight path. */
+        this.format = 'html';
+        /** Sanitization profile to apply. */
+        this.preset = 'document';
+        /** Reduced padding. */
+        this.compact = false;
+        this.html = '';
+    }
+    componentWillLoad() {
+        return this.compute();
+    }
+    watchInputs() {
+        return this.compute();
+    }
+    sanitizeHtml(html) {
+        var _a;
+        purify.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);
+            }
+            // 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 = purify.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 {
+            purify.removeHook('uponSanitizeElement');
+        }
+    }
+    async compute() {
+        if (!this.value) {
+            this.html = '';
+            return;
+        }
+        if (this.format === 'html') {
+            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('./index-w_Wxgclf.js').then(function (n) { return n.R; });
+            this.html = rt.jsonToHtml(doc, this.preset);
+        }
+        catch (_a) {
+            this.html = '';
+        }
+    }
+    render() {
+        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,
+                'co-rich-text-viewer--site': this.preset === 'document',
+            }, part: "content", innerHTML: this.html }));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchInputs": 0
+            }],
+        "format": [{
+                "watchInputs": 0
+            }],
+        "preset": [{
+                "watchInputs": 0
+            }]
+    }; }
+};
+CoRichTextViewer.style = coRichTextViewerCss();
+
+export { CoRichTextViewer as co_rich_text_viewer };

package/dist/esm/co-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.js';
 
 const coRowCss = () => `:host{display:block}.co-row{display:flex;align-items:center;gap:var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-subtle);font-family:var(--co-font-family-primary);box-sizing:border-box}.co-row--sm{padding:var(--co-spacing-sm2) var(--co-spacing-lg);min-height:40px;font-size:var(--co-font-size-14)}.co-row--lg{padding:var(--co-spacing-lg) var(--co-spacing-xl);min-height:76px;font-size:var(--co-font-size-16)}.co-row--single{border-radius:var(--co-border-radius-lg)}.co-row--top{border-radius:var(--co-border-radius-lg) var(--co-border-radius-lg) 0 0;border-bottom:none}.co-row--middle{border-radius:0;border-bottom:none}.co-row--bottom{border-radius:0 0 var(--co-border-radius-lg) var(--co-border-radius-lg)}.co-row__prefix,.co-row__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-row__prefix:empty,.co-row__suffix:empty{display:none}.co-row__content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--co-spacing-xs)}.co-row__suffix{margin-left:auto}`;
 
@@ -11,11 +11,11 @@ const CoRow = class {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '368c70a0173c99d0b7f2b6438008998271a9bf42', 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: '4766e3f0de343b06de936b61871e0c1e35703d52', class: "co-row__prefix" }, h("slot", { key: 'c705ca6d95787f4a5dd58fd82bf45eb81c1ab245', name: "prefix" })), h("div", { key: '73f07efd56ca95cf11196d87e292fb75b0f38fea', class: "co-row__content" }, h("slot", { key: '46c58feb7e058233707fc4f7aa3b8fcfe52f8e5e' })), h("div", { key: '58b87d77d70d0a0142963059cec5c36f947cb418', class: "co-row__suffix" }, h("slot", { key: '67562449f840f81bf30b611badd6e8d45858f449', 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" }))));
     }
 };
 CoRow.style = coRowCss();

package/dist/esm/co-select.entry.js

@@ -1,26 +1,51 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
+import { O as OverlayScrollbars } from './overlayscrollbars-ox7HzCZn.js';
+import { r as rankByMatch, h as highlightMatch } from './normalizeText-CQY6Ul7q.js';
 
-const coSelectCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-select__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-status-error)}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-spacing-sm2)}.co-select__options{max-height:calc(34px * 8);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-select__options::-webkit-scrollbar{width:6px}.co-select__options::-webkit-scrollbar-track{background:transparent}.co-select__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-select__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:32px;box-sizing:border-box}.co-select__option:hover{background:var(--co-semantic-surface-hover)}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-status-error)}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-status-success)}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-color-status-review)}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-status-info)}`;
+const coSelectCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-select__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;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);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) 0}.co-select__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:200px}.co-select__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color 0.1s ease;flex-shrink:0}.co-select__chip-remove:hover{color:var(--co-semantic-text-default)}.co-select--s .co-select__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-select--sm .co-select__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-select--lg .co-select__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-status-error)}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__flag,.co-select__option-flag{flex-shrink:0;width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--co-semantic-border-subtle)}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-spacing-sm2)}.co-select__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin-bottom:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-select__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-14, 14px);line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-select__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-select__match{font-weight:700;color:var(--co-semantic-text-default)}.co-select__empty{padding:var(--co-spacing-md);text-align:center;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14, 14px)}.co-select__options{max-height:calc(34px * 8);overflow-y:auto}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-color-opacity-negro-16);--os-handle-bg-hover:var(--co-color-opacity-negro-25);--os-handle-bg-active:var(--co-color-opacity-negro-50);--os-handle-min-size:24px}.co-select__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:32px;box-sizing:border-box}.co-select__option:hover{background:var(--co-semantic-surface-hover)}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-status-error)}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-status-success)}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-color-status-review)}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-select{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-select__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-select__label{white-space:normal}:host([layout='horizontal']) .co-select>:not(.co-select__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-select__trigger{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coChange = createEvent(this, "coChange", 7);
         this.coClear = createEvent(this, "coClear", 7);
+        /** 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 = () => {
@@ -49,23 +74,49 @@ const CoSelect = class {
                 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) {
@@ -84,6 +135,13 @@ const CoSelect = class {
     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)
@@ -105,8 +163,43 @@ const CoSelect = class {
         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;
@@ -118,14 +211,22 @@ const CoSelect = class {
         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);
@@ -134,9 +235,9 @@ const CoSelect = class {
                         '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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-separator.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.js';
 
 const coSeparatorCss = () => `:host{display:block;width:100%}:host([vertical]){display:inline-block;width:auto;height:auto;align-self:stretch}.co-separator{--co-separator-color:var(--co-semantic-border-default);--co-separator-size:1px;--co-separator-spacing:0px;--co-separator-inset-start:0px;--co-separator-inset-end:0px;border:none;margin:0;padding:0;background:var(--co-separator-color)}.co-separator:not(.co-separator--vertical){height:var(--co-separator-size);width:auto;margin-top:var(--co-separator-spacing);margin-bottom:var(--co-separator-spacing);margin-left:var(--co-separator-inset-start);margin-right:var(--co-separator-inset-end)}.co-separator--vertical{width:var(--co-separator-size);height:100%;min-height:1em;margin-left:var(--co-separator-spacing);margin-right:var(--co-separator-spacing);margin-top:var(--co-separator-inset-start);margin-bottom:var(--co-separator-inset-end)}.co-separator--dark{--co-separator-color:var(--co-color-opacity-blanco-25)}`;
 
@@ -61,7 +61,7 @@ const CoSeparator = class {
                 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/esm/co-sidebar-nav.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CYsftTKf.js';
+import { n as normalizeText } from './normalizeText-CQY6Ul7q.js';
 
-const coSidebarNavCss = () => `:host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;font-family:var(--co-font-family-primary);scrollbar-width:thin;scrollbar-color:transparent transparent}:host(:hover){scrollbar-color:var(--co-color-opacity-blanco-16) transparent}:host::-webkit-scrollbar{width:6px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}:host(:hover)::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}:host(:hover)::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}:host(:hover)::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}.co-sidebar-nav{display:flex;flex-direction:column;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs)}.co-sidebar-nav--min{align-items:center;padding:var(--co-spacing-xs) 0}.co-sidebar-nav__search{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-xs) var(--co-spacing-sm);margin:0 var(--co-spacing-xs) var(--co-spacing-xs);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);height:32px}.co-sidebar-nav__search co-icon{color:var(--co-semantic-text-muted);flex-shrink:0}.co-sidebar-nav__search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-semantic-text-default);min-width:0}.co-sidebar-nav__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-sidebar-nav__search-clear{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav__search-clear:hover{color:var(--co-semantic-text-default)}.co-sidebar-nav__items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav--min .co-sidebar-nav__items{align-items:center}.co-sidebar-nav__category{display:flex;flex-direction:column}.co-sidebar-nav__category+.co-sidebar-nav__category{margin-top:var(--co-spacing-sm)}.co-sidebar-nav__category-label{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-semantic-text-muted);line-height:110%;letter-spacing:0.08em;padding:var(--co-spacing-lg) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__category-items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.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:none;background:none;cursor:pointer;width:100%;text-align:left;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-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:var(--co-font-line-height-normal)}.co-sidebar-nav__item:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.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)}.co-sidebar-nav__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}.co-sidebar-nav__item-icon co-icon{color:inherit}.co-sidebar-nav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-sidebar-nav__custom-icon{width:18px;height:18px;object-fit:contain;border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav--min .co-sidebar-nav__item{width:36px;height:36px;padding:0;justify-content:center;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)}.co-sidebar-nav__flyout-anchor{position:relative}.co-sidebar-nav__flyout{position:fixed;min-width:180px;max-width:240px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-sm);box-shadow:var(--co-shadow-lg);padding:var(--co-spacing-md);display:flex;flex-direction:column;z-index:9999;animation:co-flyout-in 0.15s ease}.co-sidebar-nav__flyout-title{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-color-gray-500);line-height:110%;letter-spacing:var(--co-font-letter-spacing-overline);padding:var(--co-spacing-xxs) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__flyout .co-sidebar-nav__item{width:100%;height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);gap:var(--co-spacing-md);font-weight:var(--co-font-weight-regular);color:var(--co-color-base-negro);line-height:var(--co-font-line-height-none);justify-content:flex-start}.co-sidebar-nav__flyout .co-sidebar-nav__item:hover{background:var(--co-color-gray-100)}.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)}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon{display:flex;width:24px;height:24px}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon co-icon{color:var(--co-color-base-negro)}@keyframes co-flyout-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}.co-sidebar-nav__expansion{display:flex;flex-direction:column}.co-sidebar-nav__expansion-header{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:none;background:none;cursor:pointer;width:100%;text-align:left;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-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:var(--co-font-line-height-normal)}.co-sidebar-nav__expansion-header:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion--active>.co-sidebar-nav__expansion-header{color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion-caret{margin-left:auto;flex-shrink:0;transition:transform 0.2s ease;color:var(--co-semantic-text-muted)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-header .co-sidebar-nav__expansion-caret{transform:rotate(90deg)}.co-sidebar-nav__expansion-body{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);overflow:hidden;max-height:0;opacity:0;transition:max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;padding-left:var(--co-spacing-xl)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-body{max-height:1000px;opacity:1;padding-top:var(--co-spacing-xxs)}.co-sidebar-nav__highlight{all:unset;background-color:var(--co-color-primary-amarillo, #facc15);color:var(--co-color-base-negro, #000);border-radius:2px;padding:0 1px}`;
+const coSidebarNavCss = () => `@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%;overflow-y:auto;overflow-x:hidden;font-family:var(--co-font-family-primary);scrollbar-width:thin;scrollbar-color:transparent transparent;--co-sidebar-fade-size:28px}: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%)}@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){scrollbar-color:var(--co-color-opacity-blanco-16) transparent}:host::-webkit-scrollbar{width:6px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}:host(:hover)::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}:host(:hover)::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}:host(:hover)::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}:host([mode="min"]){scrollbar-width:none !important}:host([mode="min"])::-webkit-scrollbar{width:0 !important}.co-sidebar-nav{display:flex;flex-direction:column;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs)}.co-sidebar-nav--min{align-items:center;padding:var(--co-spacing-xs) 0}.co-sidebar-nav__search{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-xs) var(--co-spacing-sm);margin:0 var(--co-spacing-xs) var(--co-spacing-xs);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);height:32px}.co-sidebar-nav__search co-icon{color:var(--co-semantic-text-muted);flex-shrink:0}.co-sidebar-nav__search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-semantic-text-default);min-width:0}.co-sidebar-nav__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-sidebar-nav__search-clear{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav__search-clear:hover{color:var(--co-semantic-text-default)}.co-sidebar-nav__items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav--min .co-sidebar-nav__items{align-items:center}.co-sidebar-nav__category{display:flex;flex-direction:column}.co-sidebar-nav__category+.co-sidebar-nav__category{margin-top:var(--co-spacing-sm)}.co-sidebar-nav__category-label{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-semantic-text-muted);line-height:110%;letter-spacing:0.08em;padding:var(--co-spacing-lg) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__category-items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.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)}.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-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;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-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:var(--co-font-line-height-normal)}.co-sidebar-nav__item:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.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-medium);--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{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}.co-sidebar-nav__item-icon co-icon{color:inherit}.co-sidebar-nav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-sidebar-nav__custom-icon{width:18px;height:18px;object-fit:contain;border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav--min .co-sidebar-nav__item{width:36px;height:36px;padding:0;justify-content:center;border-radius:var(--co-border-radius-xs)}.co-sidebar-nav__flyout-anchor{position:relative}.co-sidebar-nav__flyout{position:fixed;min-width:180px;max-width:240px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-sm);box-shadow:var(--co-shadow-lg);padding:var(--co-spacing-md);display:flex;flex-direction:column;z-index:9999;animation:co-flyout-in 0.15s ease}.co-sidebar-nav__flyout-title{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-color-gray-500);line-height:110%;letter-spacing:var(--co-font-letter-spacing-overline);padding:var(--co-spacing-xxs) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__flyout .co-sidebar-nav__item{width:100%;height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);gap:var(--co-spacing-md);font-weight:var(--co-font-weight-regular);color:var(--co-color-base-negro);line-height:var(--co-font-line-height-none);justify-content:flex-start}.co-sidebar-nav__flyout .co-sidebar-nav__item:hover{background:var(--co-color-gray-100)}.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-medium)}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon{display:flex;width:24px;height:24px}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon co-icon{color:var(--co-color-base-negro)}@keyframes co-flyout-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}.co-sidebar-nav__expansion{display:flex;flex-direction:column}.co-sidebar-nav__expansion-header{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-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;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-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:var(--co-font-line-height-normal)}.co-sidebar-nav__expansion-header:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion--active>.co-sidebar-nav__expansion-header{color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion-caret{margin-left:auto;flex-shrink:0;transition:transform 0.2s ease;color:var(--co-semantic-text-muted)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-header .co-sidebar-nav__expansion-caret{transform:rotate(90deg)}.co-sidebar-nav__expansion-body{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);overflow:hidden;max-height:0;opacity:0;transition:max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;padding-left:var(--co-spacing-xl)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-body{max-height:1000px;opacity:1;padding-top:var(--co-spacing-xxs)}.co-sidebar-nav__highlight{all:unset;background-color:var(--co-color-primary-amarillo, #facc15);color:var(--co-color-base-negro, #000);border-radius:2px;padding:0 1px}`;
 
 /** Default icon mapping for common Prolibu model keys → Phosphor icon names */
 const DEFAULT_ICON_MAP = {
@@ -131,6 +132,36 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
+    // 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
+    PaymentReceipts: 'hand-coins',
+    Coupons: 'seal-percent',
+    // Integrations
+    Integrations: 'plugs-connected',
+    Mcp: 'plug',
+    LifecycleHooks: 'arrows-clockwise',
+    PaymentProviders: 'credit-card',
+    Stripe: 'credit-card',
+    ThirdParty: 'plugs-connected',
+    Sendgrid: 'paper-plane-tilt',
+    Apollo: 'rocket-launch',
+    Kaspr: 'identification-card',
+    OpenAi: 'robot',
+    Ultramsg: 'whatsapp-logo',
+    Slack: 'slack-logo',
+    Telegram: 'telegram-logo',
+    Discord: 'discord-logo',
 };
 const CoSidebarNav = class {
     constructor(hostRef) {
@@ -238,12 +269,12 @@ const CoSidebarNav = class {
     get filteredItems() {
         if (!this.searchText)
             return this.parsedItems;
-        return this.filterRecursive(this.parsedItems, this.searchText.toLowerCase());
+        return this.filterRecursive(this.parsedItems, normalizeText(this.searchText));
     }
     filterRecursive(items, query) {
         const result = [];
         for (const item of items) {
-            const label = this.getLabel(item.key).toLowerCase();
+            const label = normalizeText(this.getLabel(item.key));
             if (label.includes(query)) {
                 result.push(item);
             }
@@ -356,10 +387,18 @@ const CoSidebarNav = class {
     }
     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);
@@ -413,8 +452,10 @@ const CoSidebarNav = class {
     }
     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)))));
     }
@@ -431,10 +472,14 @@ const CoSidebarNav = class {
     }
     render() {
         const items = this.filteredItems;
-        return (h("nav", { key: '8734e55fec1337ceb95e2958c1b7b4574b74e37e', 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: 'f7df980d36941cb411725d546df417be8172419d', 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))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-sidebar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
 
 const coSidebarCss = () => `:host{display:flex;height:100%}.co-sidebar{display:flex;flex-direction:column;background:var(--co-semantic-surface-page);border-right:1px solid var(--co-semantic-border-subtle);font-family:var(--co-font-family-primary);box-sizing:border-box;overflow:hidden;transition:width 0.2s ease}.co-sidebar--full{width:256px}.co-sidebar--min{width:58px;align-items:center}.co-sidebar__header{padding:var(--co-spacing-lg);flex-shrink:0}.co-sidebar--min .co-sidebar__header{padding:var(--co-spacing-md)}.co-sidebar__body{flex:1;overflow-y:auto;padding:var(--co-spacing-sm2) var(--co-spacing-md)}.co-sidebar--min .co-sidebar__body{padding:var(--co-spacing-sm2)}.co-sidebar__footer{padding:var(--co-spacing-md) var(--co-spacing-lg);flex-shrink:0}.co-sidebar--min .co-sidebar__footer{padding:var(--co-spacing-md)}.co-sidebar__header:empty,.co-sidebar__footer:empty{display:none}`;
 
@@ -10,10 +10,10 @@ const CoSidebar = class {
         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" }))));
     }
 };
 CoSidebar.style = coSidebarCss();