@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -0,0 +1,182 @@
+import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+
+const coRichTextToolbarCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-rich-text-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-secondary)}.co-rich-text-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-secondary);cursor:pointer;transition:background 0.12s ease, color 0.12s ease}.co-rich-text-toolbar__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));color:var(--co-semantic-text-default)}.co-rich-text-toolbar__btn--active{background:var(--co-semantic-surface-hover, rgba(37, 99, 235, 0.12));color:var(--co-color-primary-azul)}.co-rich-text-toolbar__btn:disabled{opacity:0.4;cursor:not-allowed}.co-rich-text-toolbar__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:1px}`;
+
+const CoRichTextToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coAction = createEvent(this, "coAction", 7);
+        /** Toolbar layout variant. */
+        this.variant = 'basic';
+        this.disabled = false;
+        this.items = [];
+        /** Bumped on every editor transaction to refresh active state. */
+        this.tick = 0;
+        this.onTransaction = () => { this.tick++; };
+        this.run = (item) => {
+            const editor = this.editor;
+            if (!editor || this.disabled)
+                return;
+            // Cast: link/undo/redo command types are registered by their extensions,
+            // which are bundled via StarterKit and not visible to core's TS view.
+            const chain = editor.chain().focus();
+            switch (item.action) {
+                case 'bold':
+                    chain.toggleBold().run();
+                    break;
+                case 'italic':
+                    chain.toggleItalic().run();
+                    break;
+                case 'underline':
+                    chain.toggleUnderline().run();
+                    break;
+                case 'strike':
+                    chain.toggleStrike().run();
+                    break;
+                case 'code':
+                    chain.toggleCode().run();
+                    break;
+                case 'bulletList':
+                    chain.toggleBulletList().run();
+                    break;
+                case 'orderedList':
+                    chain.toggleOrderedList().run();
+                    break;
+                case 'blockquote':
+                    chain.toggleBlockquote().run();
+                    break;
+                case 'heading':
+                    chain.toggleHeading(item.payload).run();
+                    break;
+                case 'undo':
+                    chain.undo().run();
+                    break;
+                case 'redo':
+                    chain.redo().run();
+                    break;
+                case 'link':
+                    this.toggleLink();
+                    break;
+                case 'image':
+                    this.insertImage();
+                    break;
+                default: chain.run();
+            }
+            this.coAction.emit({ action: item.action, payload: item.payload });
+        };
+    }
+    async componentWillLoad() {
+        const rt = await import('./index-BjAqSidM.js');
+        this.items = rt.toolbarItems(this.variant === 'none' ? 'compact' : this.variant);
+    }
+    async onVariantChange(v) {
+        const rt = await import('./index-BjAqSidM.js');
+        this.items = rt.toolbarItems((v === 'none' ? 'compact' : v));
+    }
+    onEditorChange(next, prev) {
+        prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
+        next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
+        this.tick++;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);
+    }
+    isActive(item) {
+        if (!this.editor)
+            return false;
+        if (item.type !== 'toggle')
+            return false;
+        try {
+            return this.editor.isActive(item.action, item.payload);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /** Accept only fetchable URL schemes from the prompt (no javascript: etc.). */
+    static safeUrl(raw, schemes) {
+        var _a, _b;
+        const url = raw === null || raw === void 0 ? void 0 : raw.trim();
+        if (!url)
+            return null;
+        const scheme = (_b = (_a = /^([a-z][a-z0-9+.-]*):/i.exec(url)) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        if (!scheme)
+            return url; // relative URL
+        return schemes.includes(scheme) ? url : null;
+    }
+    toggleLink() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (editor.isActive('link')) {
+            chain.unsetLink().run();
+            return;
+        }
+        const raw = typeof window !== 'undefined' ? window.prompt('Enter URL') : null;
+        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https', 'mailto', 'tel']);
+        if (url)
+            chain.setLink({ href: url }).run();
+    }
+    insertImage() {
+        const editor = this.editor;
+        if (!(editor === null || editor === void 0 ? void 0 : editor.schema.nodes.image))
+            return;
+        const raw = typeof window !== 'undefined' ? window.prompt('Image URL') : null;
+        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https']);
+        if (url)
+            editor.chain().focus().setImage({ src: url }).run();
+    }
+    /** Hide buttons whose node/mark isn't in the editor's schema — e.g. the
+     *  image button on the `full` toolbar with a preset that has no image node
+     *  (clicking it would call an unregistered command and throw). */
+    supportedBySchema(item) {
+        const editor = this.editor;
+        if (!editor)
+            return true; // optimistic until the editor is wired
+        const { nodes, marks } = editor.schema;
+        switch (item.action) {
+            case 'image': return !!nodes.image;
+            case 'bulletList': return !!nodes.bulletList;
+            case 'orderedList': return !!nodes.orderedList;
+            case 'blockquote': return !!nodes.blockquote;
+            case 'heading': return !!nodes.heading;
+            case 'code': return !!marks.code;
+            case 'underline': return !!marks.underline;
+            case 'strike': return !!marks.strike;
+            case 'link': return !!marks.link;
+            default: return true;
+        }
+    }
+    canRun(item) {
+        var _a, _b, _c, _d;
+        if (!this.editor || this.disabled)
+            return false;
+        const can = this.editor.can();
+        if (item.action === 'undo')
+            return (_b = (_a = can.undo) === null || _a === void 0 ? void 0 : _a.call(can)) !== null && _b !== void 0 ? _b : true;
+        if (item.action === 'redo')
+            return (_d = (_c = can.redo) === null || _c === void 0 ? void 0 : _c.call(can)) !== null && _d !== void 0 ? _d : true;
+        return true;
+    }
+    render() {
+        if (this.variant === 'none' || this.items.length === 0)
+            return null;
+        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.filter((item) => this.supportedBySchema(item)).map((item) => {
+            var _a;
+            return (h("button", { key: `${item.action}-${JSON.stringify((_a = item.payload) !== null && _a !== void 0 ? _a : '')}`, type: "button", class: { 'co-rich-text-toolbar__btn': true, 'co-rich-text-toolbar__btn--active': this.isActive(item) }, title: item.label, "aria-label": item.label, "aria-pressed": item.type === 'toggle' ? String(this.isActive(item)) : undefined, disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: item.icon, size: 18 })));
+        })));
+    }
+    static get watchers() { return {
+        "variant": [{
+                "onVariantChange": 0
+            }],
+        "editor": [{
+                "onEditorChange": 0
+            }]
+    }; }
+};
+CoRichTextToolbar.style = coRichTextToolbarCss();
+
+export { CoRichTextToolbar as co_rich_text_toolbar };

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

@@ -0,0 +1,80 @@
+import { r as registerInstance, h } from './index-BKmfyPZK.js';
+import { s as sanitize } from './sanitizer-DcK0GGZC.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 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}`;
+
+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();
+    }
+    get parsedFeatures() {
+        if (!this.features)
+            return undefined;
+        if (typeof this.features === 'string') {
+            try {
+                return JSON.parse(this.features);
+            }
+            catch (_a) {
+                return undefined;
+            }
+        }
+        return this.features;
+    }
+    async compute() {
+        if (!this.value) {
+            this.html = '';
+            return;
+        }
+        if (this.format === 'html') {
+            this.html = sanitize(this.value, this.preset, this.parsedFeatures);
+            return;
+        }
+        // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
+        try {
+            const doc = JSON.parse(this.value);
+            const rt = await import('./index-BjAqSidM.js');
+            this.html = rt.jsonToHtml(doc, this.preset, this.parsedFeatures);
+        }
+        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 }, part: "content", innerHTML: this.html }));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchInputs": 0
+            }],
+        "format": [{
+                "watchInputs": 0
+            }],
+        "preset": [{
+                "watchInputs": 0
+            }],
+        "features": [{
+                "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-BKmfyPZK.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: '23841a9145b930d4c9ccf77038132b6d62077395', 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: '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" }))));
     }
 };
 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-BKmfyPZK.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.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: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__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)')}`;
 
 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: '279b14eda557b860b4151685bf7d7d0c97ab861d', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
+                [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b686a479a92fa78105a2d8b70544dafee562d04e', class: "co-select__labels" }, this.label && h("label", { key: '605ec7cdd6614397b18010b3c5aa7c563c5f2b5e', class: "co-select__label" }, this.label), this.secondaryLabel && h("span", { key: '808c1038a7beb82a0d8279b45161f0f2058a3f6d', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'e3c4dfb846300956a721e6d39c0bf01226945b1f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '9b6a5847d6223317d8df65e7964e4574da426482', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'd0f62a9e449acf5234d9f876d6e7c97fa181a42b', name: this.iconLeft, size: 16, class: "co-select__icon" }), h("span", { key: 'ec49195d6e7e15e1400e436ba39bc5dfa119ff66', class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '14637ea81b731edf44e8d03c9dc316c9e6a5db2c', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '965c17bae724c916fdb4ce5438625801446d341e', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '706be511d092a16835d0fc7907b41ea550ba3100', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '33e5a0c3075357ca4080a4be72c579f34e3a1e94', class: "co-select__dropdown" }, h("div", { key: 'a6f857d29a52fe2969da4d8536f9d0a0bf9c06dc', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'e98425c922453ca3acae8274c707366ac28ceb0e', class: "co-select__labels" }, this.label && h("label", { key: 'de40605cb2d729bccc445b1e37a28e9ae5d95c05', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'bc0a351d141017cdfeb9b761081144df09bffbf6', required: this.required })), this.secondaryLabel && h("span", { key: 'cbbd3955441d029c40a32dc363d1fc133ace393d', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'de6985c4703ecec83a1d3011fd9c275d989a1132', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '545e952818ab75b26de295d56c6875237f970ed5', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '1f202f6dfdb6bae10c20594878ba5f780ab8ad07', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '68e80d4d79d68b6d982aa72f8b697c8654d043c3', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            const opt = this.parsedOptions.find((o) => o.value === v);
+            return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleOptionClick(v);
+                } }, h("co-icon", { name: "x", size: 12 }))));
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '347235a67a41c6f4ed3e9b8035c18750dbba609e', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '400d900137c4dfbdf362d8ad923678e062143707', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '1e9a4c6a69606790836fedcea70192c77b42383f', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '1a00449ed011a384124992427511a14017203308', class: "co-select__dropdown" }, this.searchable && (h("div", { key: '6275c6091e714147325f5a8a40cc33e8ddfc9fcb', class: "co-select__search" }, h("co-icon", { key: '18047b5338b433adcca171783ea896978d0f8657', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '1de64d0740ff617a5cf75fdaf3bcddb197f826be', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.searchable && options.length === 0 && (h("div", { key: '07cf9897681af9a636dfa0e0de3dda5785e49d03', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'f9c5ad0c2ece40dad256a81eca686769498983d1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -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: "" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()))), this.helperText && (h("div", { key: 'abd1a1647c257674ad54a7d8623f75c211d1ac84', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1db3bfcc66e832bd5c41d2ddf6ae202a1cafa31d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'b5b66e6ec7c098e8b98bd6f59ef8234630f8ee39', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: '2d51d82b91682fc7f4e2e9eff099b9292099ce7a', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a055b3dee238c230aec60264377ccf9b1fe3137d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '2d170fecfbe1b889fe819d63b19863bdac92eee8', class: "co-select__helper-text" }, this.helperText)))));
     }
     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-BKmfyPZK.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: '7024b84bf2a0cf7b0f5d95b1ded130295f3956f2', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,