@prolibu-suite/cobalt-core 0.4.0 → 0.6.0

package/dist/esm/co-progress-circle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Es9IUmmt.js';
+import { r as registerInstance, h } from './index-tT-aZV0-.js';
 
 const coProgressCircleCss = () => `:host{display:inline-flex}.co-progress-circle{--_color:var(--co-semantic-status-info, #2563eb);--_track:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(     var(--_color) var(--co-pc-angle, 0deg),     var(--_track) var(--co-pc-angle, 0deg)   );transition:background 0.3s ease}.co-progress-circle__track{position:absolute;inset:var(--co-pc-stroke, 4px);border-radius:50%;background:var(--co-semantic-surface-page, #fff)}.co-progress-circle__label{position:relative;z-index:1;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-11, 11px);font-weight:600;color:var(--_color);line-height:1;pointer-events:none}.co-progress-circle--success{--_color:var(--co-semantic-status-success, #0a7724)}.co-progress-circle--warning{--_color:var(--co-semantic-status-warning, #f59e0b)}.co-progress-circle--error{--_color:var(--co-semantic-status-error, #aa2e1b)}`;
 
@@ -20,7 +20,7 @@ const CoProgressCircle = class {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: '68787ff3019b10ef8fbdadedf955421b775e8f99', class: {
+        return (h("div", { key: 'c97a2f586f1e4518d2a35be1d43f13ede60a25bc', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -28,7 +28,7 @@ const CoProgressCircle = class {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '3d3af85f0b7ae4b4e59952989310269bd0b3fb36', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '00d943f501f90a4d03d0346f324e5c8f458fd22c', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '7418e16887ea4705d8e7d7228bc8c172058d5f5f', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0af289d28bbf4f7e6c9be76c3c7e686960cd1ff0', class: "co-progress-circle__label" }, clamped, "%"))));
     }
 };
 CoProgressCircle.style = coProgressCircleCss();

package/dist/esm/co-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+import { r as registerInstance, c as createEvent, h } from './index-tT-aZV0-.js';
 
 const coRadioGroupCss = () => `: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}.co-radio-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-radio-group__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-radio-group__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-radio-group--disabled .co-radio-group__label,.co-radio-group--disabled .co-radio-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-radio-group__options{display:flex;gap:var(--co-spacing-md)}.co-radio-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-radio-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-radio-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-radio-group__item--disabled{cursor:not-allowed}.co-radio-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-radio-group__item--disabled .co-radio-group__option-label{color:var(--co-semantic-text-disabled)}.co-radio-group__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio-group__circle--small{width:16px;height:16px}.co-radio-group__circle--large{width:24px;height:24px}.co-radio-group__circle:not(.co-radio-group__circle--checked){border-color:var(--co-semantic-border-default)}.co-radio-group__circle--checked{border-color:var(--co-semantic-border-strong)}.co-radio-group__circle--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio-group__circle--small.co-radio-group__circle--checked::after{width:8px;height:8px}.co-radio-group__circle--large.co-radio-group__circle--checked::after{width:14px;height:14px}.co-radio-group__circle--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-radio-group--error .co-radio-group__circle{border-color:var(--co-semantic-status-error)}.co-radio-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-radio-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-radio-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-radio-group__helper--error .co-radio-group__helper-icon,.co-radio-group__helper--error .co-radio-group__helper-text{color:var(--co-semantic-status-error)}.co-radio-group__helper--success .co-radio-group__helper-icon,.co-radio-group__helper--success .co-radio-group__helper-text{color:var(--co-semantic-status-success)}.co-radio-group__helper--warning .co-radio-group__helper-icon,.co-radio-group__helper--warning .co-radio-group__helper-text{color:var(--co-color-status-review)}.co-radio-group__helper--info .co-radio-group__helper-icon,.co-radio-group__helper--info .co-radio-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-radio-group{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-radio-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-radio-group__label{white-space:normal}:host([layout='horizontal']) .co-radio-group>:not(.co-radio-group__labels){grid-column:2;min-width:0}`;
 
@@ -64,11 +64,11 @@ const CoRadioGroup = class {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: '94c29c15e32e8ad2e1640641102d141882fed7e2', class: {
+        return (h("div", { key: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '219064f62b47c4f6945c694215ed239543ae7a20', class: "co-radio-group__labels" }, this.label && h("span", { key: '73ad6a795fb79c6a61adbd7caf99d66a2097f2a4', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '0a7300369de028245ef04ef7f758ee6b98605b60', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '89eea55b445a648926923b019abd793f7c622f94', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -83,7 +83,7 @@ const CoRadioGroup = class {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: 'f30ed296f217352dbb4402b5679d791d0adf0b07', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '831a33a28dbfff0306c3da3b7d89fb688522f2af', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: '96412549d5a05ab07c40e5a24bfd954403856c6d', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+import { r as registerInstance, c as createEvent, h } from './index-tT-aZV0-.js';
 
 const coRadioCss = () => `:host{display:inline-flex;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}.co-radio-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-radio-row--disabled{cursor:not-allowed}.co-radio__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-radio-row--disabled .co-radio__label{color:var(--co-semantic-text-disabled)}.co-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-style:solid;border-width:1.5px;border-radius:var(--co-border-radius-full);outline:none;padding:0;background:transparent;flex-shrink:0;box-sizing:border-box;transition:border-color 0.15s ease;overflow:hidden}.co-radio--small{width:16px;height:16px}.co-radio--large{width:24px;height:24px}.co-radio:not(.co-radio--checked){border-color:var(--co-semantic-border-default)}.co-radio--checked{border-color:var(--co-semantic-border-strong)}.co-radio--checked::after{content:'';display:block;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-primary)}.co-radio--small.co-radio--checked::after{width:8px;height:8px}.co-radio--large.co-radio--checked::after{width:14px;height:14px}.co-radio--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
 
@@ -22,15 +22,15 @@ const CoRadio = class {
         };
     }
     render() {
-        return (h("div", { key: 'bc7cde81e68321604f58bb3ff2aa66707897c132', class: {
+        return (h("div", { key: '81fa047c34b13cdd776886449a3f5c26cdcc4797', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '628cd1366ffaf1d3a53c571bd1678994ac82f188', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '1a666d5890bef0df1257780b70890fb161758ae9', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'a9615f8b274081add31e83d8fc46cef5bfc2d803', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '29a4f347d9af77512725da44b8fb3f884fd72910', class: "co-radio__label", part: "label" }, this.label))));
     }
 };
 CoRadio.style = coRadioCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Es9IUmmt.js';
+import { r as registerInstance, c as createEvent, h } from './index-tT-aZV0-.js';
 
 const coRatingCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);line-height:1}.co-rating{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-rating__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;cursor:default;padding:0 var(--co-spacing-xs)}.co-rating--disabled .co-rating__label{color:var(--co-semantic-text-disabled)}.co-rating__stars{display:inline-flex;gap:var(--co-spacing-xs)}.co-rating__star{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-border-subtle);transition:color 0.1s ease, transform 0.1s ease}.co-rating__star:hover:not(:disabled){transform:scale(1.15)}.co-rating__star--active{color:#F5A623;}.co-rating__star--hover{color:#F5A623}.co-rating--disabled .co-rating__star{cursor:not-allowed;opacity:0.5}.co-rating--readonly .co-rating__star{cursor:default}.co-rating__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-rating__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-rating__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rating__helper--error .co-rating__helper-icon,.co-rating__helper--error .co-rating__helper-text{color:var(--co-semantic-status-error)}.co-rating__helper--success .co-rating__helper-icon,.co-rating__helper--success .co-rating__helper-text{color:var(--co-semantic-status-success)}.co-rating__helper--warning .co-rating__helper-icon,.co-rating__helper--warning .co-rating__helper-text{color:var(--co-color-status-review)}.co-rating__helper--info .co-rating__helper-icon,.co-rating__helper--info .co-rating__helper-text{color:var(--co-semantic-status-info)}`;
 
@@ -41,16 +41,16 @@ const CoRating = class {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: 'c065e6d1dfc6a9e1919e13692ef04ed1e6a547e9', class: {
+        return (h("div", { key: '79a5d0a2893814ec7bd1a43178d6ae68e51921ef', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: 'a18472ea4337aca205a5f558c2fe2de71502205b', class: "co-rating__label" }, this.label), h("div", { key: '0a30106a0e8e7001d24793c22e1c93e82d572325', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '50606dcbbf3783df6d55e78ad03c7d7b85cd9611', class: "co-rating__label" }, this.label), h("div", { key: '489d544d4857ba770719086d341b41162af557de', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '6c204320177cbc147263668e0ae2f1ed607b2b58', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f7dfea814dbe33f4e976807bc7f2be630b60b57d', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'd282f7826e0ff68099995cbbbd835c18cc89e9d7', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'af6db3a4a405300904ef3bac7634145614813bd4', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'af9a32a796abceb861bd0e838c058b8414fc1e9b', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '77d7357560bd293f4adb5e9d85a82d6e9e8da056', class: "co-rating__helper-text" }, this.helperText)))));
     }
 };
 CoRating.style = coRatingCss();

package/dist/esm/co-ref-field.entry.js

@@ -1,10 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
-import { R as RequiredMark } from './requiredMark-Bg25QWFn.js';
-import { F as FieldChip } from './fieldChip-BBu4ukje.js';
-import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
-import './overlayscrollbars-ox7HzCZn.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-tT-aZV0-.js';
+import { R as RequiredMark } from './requiredMark-C7-_2UhB.js';
+import { F as FieldChip } from './fieldChip-ChXW__C5.js';
 
-const coRefFieldCss = () => `.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-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__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-ref-field-trigger-border-color, 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-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__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-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__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-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin:var(--co-spacing-sm2) var(--co-spacing-sm2) 0;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-ref-field__search co-icon{flex-shrink:0;opacity:0.7;display:flex;align-items:center}.co-ref-field__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-ref-field__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-ref-field__options{max-height:280px;overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-sm2)}.co-ref-field__options-inner{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.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-ref-field__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:40px;box-sizing:border-box}.co-ref-field__option:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__option--selected{background:var(--co-semantic-surface-muted)}.co-ref-field__option-color{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-ref-field__option-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.co-ref-field__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-desc{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-ref-field__option-deselect{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-ref-field__option-deselect:hover{color:var(--co-semantic-text-default)}.co-ref-field__loading,.co-ref-field__loading-more{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-md)}.co-ref-field__spinner-sm{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-color-primary-azul);border-radius:50%;animation:co-ref-spin 0.6s linear infinite}@keyframes co-ref-spin{to{transform:rotate(360deg)}}.co-ref-field__empty{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-lg) var(--co-spacing-md);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12)}.co-ref-field__more{text-align:center;padding:var(--co-spacing-sm);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__create-btn{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;padding:var(--co-spacing-sm2) var(--co-spacing-md);border:none;border-radius:var(--co-border-radius-xs);background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-color-primary-azul);font-weight:500;transition:background 0.1s ease}.co-ref-field__create-btn:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__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-ref-field__trigger{background:var(--co-semantic-surface-secondary)}}`;
+const coRefFieldCss = () => `: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-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25)));border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__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-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__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-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__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 CoRefField = class {
     constructor(hostRef) {
@@ -15,7 +13,6 @@ const CoRefField = class {
         this.coLoadMore = createEvent(this, "coLoadMore", 7);
         this.coOpen = createEvent(this, "coOpen", 3);
         this.coClose = createEvent(this, "coClose", 3);
-        this.coCreate = createEvent(this, "coCreate", 7);
         this.coRemove = createEvent(this, "coRemove", 7);
         this.coFooterPrimary = createEvent(this, "coFooterPrimary", 7);
         this.coFooterSecondary = createEvent(this, "coFooterSecondary", 7);
@@ -51,6 +48,7 @@ const CoRefField = class {
         this.searchPlaceholder = 'Search…';
         this.searchDebounce = 350;
         this.emptyMessage = 'No results found';
+        // ── Action props ───────────────────────────────────────────
         /** Show footer buttons (same pattern as co-combobox). */
         this.showFooter = false;
         /** Label for the primary footer button. */
@@ -73,16 +71,10 @@ const CoRefField = class {
          */
         this.avatarShape = 'circle';
         this.isOpen = false;
-        this.searchText = '';
         /** How many trailing chips don't fit the trigger width (responsive mode). */
         this.overflowCount = 0;
-        this.lastChipsKey = '';
-        /** Selection captured when the panel opens — the dropdown partitions
-         *  selected-first against THIS set so options don't jump while toggling. */
-        this.sortSnapshot = new Set();
-        /** Display items for the selection captured at open (value order), used to
-         *  prepend selected items the current options page doesn't contain. */
-        this.openDisplaySnapshot = [];
+        this.lastChipsKey = '\x00';
+        this.pendingFocus = false;
         // ── Popover event handlers ─────────────────────────────────
         this.handlePopoverOpen = () => {
             this.isOpen = true;
@@ -94,15 +86,6 @@ const CoRefField = class {
             if (this.disabled)
                 e.stopPropagation();
         };
-        this.handleSearchInput = (e) => {
-            const value = e.target.value;
-            this.searchText = value;
-            if (this.debounceTimer)
-                clearTimeout(this.debounceTimer);
-            this.debounceTimer = setTimeout(() => {
-                this.coSearch.emit(value);
-            }, this.searchDebounce);
-        };
         this.handleOptionClick = (option) => {
             if (this.multiple) {
                 const current = this.parsedValue;
@@ -135,17 +118,6 @@ const CoRefField = class {
             this.value = JSON.stringify(newValue);
             this.coRemove.emit(id);
         };
-        this.handleScroll = () => {
-            if (!this.optionsEl || this.loading || !this.hasMore)
-                return;
-            const { scrollTop, scrollHeight, clientHeight } = this.optionsEl;
-            if (scrollTop + clientHeight >= scrollHeight - 40) {
-                this.coLoadMore.emit();
-            }
-        };
-        this.handleCreateClick = () => {
-            this.coCreate.emit(this.searchText);
-        };
         this.handleFooterPrimary = () => {
             this.coFooterPrimary.emit();
             this.isOpen = false;
@@ -211,27 +183,14 @@ const CoRefField = class {
             return this.value ? [this.value] : [];
         }
     }
-    get hasMore() {
-        return this.parsedOptions.length < this.total;
-    }
-    get remainingCount() {
-        return Math.max(0, this.total - this.parsedOptions.length);
-    }
     // ── Lifecycle ──────────────────────────────────────────────
-    componentWillLoad() {
-        this.sortSnapshot = new Set(this.parsedValue);
-        this.openDisplaySnapshot = this.effectiveDisplayItems;
-    }
     connectedCallback() {
         // Responsive chips: refit on any trigger width change (same pattern as
         // co-combobox).
         this.resizeObserver = new ResizeObserver(() => this.calcOverflow());
     }
-    // OverlayScrollbars: init when the dropdown opens, tear down on close. The
-    // infinite-scroll "load more" check reads from the OS viewport (the native
-    // onScroll no longer fires once OS takes over the host).
     componentDidRender() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         // Re-observe only when the chips container element actually changed —
         // disconnect+observe per render fires an extra observer callback, and
         // calcOverflow does a reflow-inducing rect read per chip.
@@ -246,31 +205,19 @@ const CoRefField = class {
         // text is a cheap identity — async label resolution changes widths without
         // changing the count).
         const chips = (_c = this.chipsEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.co-ref-field__chip');
-        const chipsKey = chips ? Array.from(chips, (c) => c.textContent).join('
') : '';
+        const chipsKey = chips ? Array.from(chips, (c) => c.textContent).join('\x01') : '';
         if (chipsKey !== this.lastChipsKey) {
             this.lastChipsKey = chipsKey;
             this.calcOverflow();
         }
-        if (this.isOpen && this.optionsEl && !this.osInstance) {
-            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => {
-                if (this.loading || !this.hasMore)
-                    return;
-                if (vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 40)
-                    this.coLoadMore.emit();
-            });
-        }
-        else if (!this.isOpen && this.osInstance) {
-            this.osInstance.destroy();
-            this.osInstance = undefined;
+        if (this.pendingFocus && ((_d = this.optionListEl) === null || _d === void 0 ? void 0 : _d.isConnected)) {
+            this.pendingFocus = false;
+            this.optionListEl.focusSearch();
         }
     }
     disconnectedCallback() {
-        var _a, _b;
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
+        var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.osInstance) === null || _b === void 0 ? void 0 : _b.destroy();
-        this.osInstance = undefined;
     }
     /**
      * Counts how many trailing chips overflow the single-line chips wrapper
@@ -306,19 +253,16 @@ const CoRefField = class {
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
         if (isOpen) {
-            // Freeze the selected-first ordering for this opening: options won't
-            // jump around while the user toggles; reopening re-partitions.
-            this.sortSnapshot = new Set(this.parsedValue);
-            this.openDisplaySnapshot = this.effectiveDisplayItems;
             this.coOpen.emit();
-            // Focus search input after render
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
-            });
+            // The panel is mounted on-demand: co-option-list takes its selected-first
+            // snapshot in componentWillLoad on every open; we only need to focus the
+            // search input (it retries until the popover panel is actually visible).
+            // @Watch runs synchronously BEFORE the render commit, so optionListEl is
+            // still undefined/stale here — defer to componentDidRender, which runs
+            // after the panel is actually mounted.
+            this.pendingFocus = true;
         }
         else {
-            this.searchText = '';
             this.coClose.emit();
         }
     }
@@ -332,16 +276,17 @@ const CoRefField = class {
                 'co-ref-field--disabled': this.disabled,
                 [`co-ref-field--${this.normalizedSize}`]: true,
                 [`co-ref-field--${this.status}`]: this.status !== 'default',
-            }, onClick: this.handleTriggerClick }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
+            }, onClick: this.handleTriggerClick }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
     }
     /**
-     * Leading visual for a selected value / option. Prefers a real avatar
-     * (image with initials+color fallback, via <co-avatar>), then a color dot.
-     * `size`: 'xxs' (24px) for the selected value, 'xs' (32px) for option rows.
+     * Leading visual for a selected value / chip. Prefers a real avatar (image
+     * with initials+color fallback, via <co-avatar>), then a color dot. Fixed
+     * 'xxs' (24px) size — only the trigger and chips use it now; option rows moved
+     * to <co-option-list>.
      */
-    renderItemAvatar(item, size) {
+    renderItemAvatar(item) {
         if (item.image || item.avatar) {
-            return (h("co-avatar", { class: "co-ref-field__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: size, shape: this.avatarShape }));
+            return (h("co-avatar", { class: "co-ref-field__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: "xxs", shape: this.avatarShape }));
         }
         if (item.color) {
             return h("span", { class: "co-ref-field__color-dot", style: { backgroundColor: item.color } });
@@ -349,7 +294,7 @@ const CoRefField = class {
         return null;
     }
     renderSingleValue(item) {
-        return (h("div", { class: "co-ref-field__selected" }, this.renderItemAvatar(item, 'xxs'), h("span", { class: "co-ref-field__selected-label" }, item.label)));
+        return (h("div", { class: "co-ref-field__selected" }, this.renderItemAvatar(item), h("span", { class: "co-ref-field__selected-label", part: "trigger-text" }, item.label)));
     }
     renderMultipleValue(items) {
         // Fixed cap (maxChips > 0) keeps the legacy slice; responsive mode (0)
@@ -371,67 +316,18 @@ const CoRefField = class {
                 'co-ref-field__chip--avatar': !!(item.image || item.avatar),
                 'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
                 [`co-ref-field__chip--${this.normalizedSize}`]: true,
-            }, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item, 'xxs')) : item.color ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null)))), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
-    }
-    /**
-     * Options in display order: the selection captured at open comes FIRST
-     * (in chip/value order, including selected items the current page doesn't
-     * contain — synthesized from their display item), then the rest in server
-     * order. While searching, only real results render (still selected-first).
-     */
-    get orderedOptions() {
-        var _a;
-        const options = this.parsedOptions;
-        if (!this.multiple || this.sortSnapshot.size === 0)
-            return options;
-        const optById = new Map(options.map((o) => [o._id, o]));
-        const selectedBlock = [];
-        if (!this.searchText) {
-            for (const d of this.openDisplaySnapshot) {
-                selectedBlock.push((_a = optById.get(d._id)) !== null && _a !== void 0 ? _a : {
-                    _id: d._id,
-                    label: d.label,
-                    description: d.description,
-                    color: d.color,
-                    avatar: d.avatar,
-                    image: d.image,
-                });
-            }
-        }
-        else {
-            for (const o of options) {
-                if (this.sortSnapshot.has(o._id))
-                    selectedBlock.push(o);
-            }
-        }
-        const rest = options.filter((o) => !this.sortSnapshot.has(o._id));
-        return [...selectedBlock, ...rest];
+            }, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null)))), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
     }
     renderPanel() {
-        const options = this.orderedOptions;
-        const selectedIds = this.parsedValue;
         return (h("div", { class: {
                 'co-ref-field__panel': true,
                 'co-ref-field__panel--dark': this.panelTheme === 'dark',
                 'co-ref-field__panel--light': this.panelTheme === 'light',
-            } }, this.searchable && (h("div", { class: "co-ref-field__search" }, h("co-icon", { name: "magnifying-glass", size: 16 }), h("input", { class: "co-ref-field__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), h("div", { class: "co-ref-field__options", ref: (el) => (this.optionsEl = el), onScroll: this.handleScroll }, h("div", { class: "co-ref-field__options-inner" }, this.loading && options.length === 0 && (h("div", { class: "co-ref-field__loading" }, h("co-loader", { size: "sm" }))), !this.loading && options.length === 0 && (h("div", { class: "co-ref-field__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage))), options.map((opt) => {
-            const isSelected = selectedIds.includes(opt._id);
-            return (h("div", { class: {
-                    'co-ref-field__option': true,
-                    'co-ref-field__option--selected': isSelected,
-                }, key: opt._id, onClick: () => this.handleOptionClick(opt) }, (opt.image || opt.avatar || opt.color)
-                ? this.renderItemAvatar(opt, 'xs')
-                : opt.icon
-                    ? h("co-icon", { name: opt.icon, size: 16, class: "co-ref-field__option-icon" })
-                    : null, h("div", { class: "co-ref-field__option-text" }, h("span", { class: "co-ref-field__option-label" }, opt.label), opt.description && (h("span", { class: "co-ref-field__option-desc" }, opt.description))), isSelected && (h("button", { class: "co-ref-field__option-deselect", onClick: (e) => {
-                    e.stopPropagation();
-                    this.handleOptionClick(opt);
-                }, type: "button" }, h("co-icon", { name: "x-circle", weight: "fill", size: 18 })))));
-        }), this.loading && options.length > 0 && (h("div", { class: "co-ref-field__loading-more" }, h("div", { class: "co-ref-field__spinner-sm" }))), !this.loading && this.hasMore && this.remainingCount > 0 && (h("div", { class: "co-ref-field__more" }, this.remainingCount, " more results")))), this.showFooter && (h("div", { class: "co-ref-field__footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))), !this.showFooter && this.createLabel && (h("div", { class: "co-ref-field__footer" }, h("button", { class: "co-ref-field__create-btn", onClick: this.handleCreateClick, type: "button" }, h("co-icon", { name: "plus", size: 14 }), h("span", null, this.createLabel))))));
+            } }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleOptionClick(e.detail.item), onCoLoadMore: () => this.coLoadMore.emit() }, this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'f02f5669b1253c8318c79beafc7000c70979857f', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '34b6a41683a1c8f892590b54911bdf45a1483db8', class: "co-ref-field__labels" }, this.label && (h("label", { key: '7f6cb8caa5041a29eec33e60909e6ec4d2aae8bd', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '026dadcb9dadb32d99bbd90502fb9dc8e3129fa6', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'b3a344de56b27862a2ecdf0e04b169d8df30ebfb', required: this.required }))), this.secondaryLabel && (h("span", { key: 'e0f1df37659b3ff4c7c940a0ba3ea2788d415c22', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'c628deaf4a792ca5dd070c8ebe79a0533f71a8d4', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f79a186dc13bf7372d42ead6875d88d0ad88703f', slot: "trigger" }, this.renderTrigger()), this.renderPanel()), this.helperText && (h("div", { key: '9e005932bf0e2915411214908c70c370f2b52047', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '8e89827c78bc49bdf2319547865bcbf1c86a7721', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '17059c989faecda313e795db76d81b81072ce611' }, this.helperText)))));
+        return (h("div", { key: '0a0d45f7d4bd24ab9f0d7f5beeb5d444fae8d5af', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'da3a3f9d1a5d3abfede2d561793cb905b9764910', class: "co-ref-field__labels" }, this.label && (h("label", { key: '89add7a385fcb6ace824e1f5d3a83db86be49b61', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '224b3ad35fb667b6ba6b7f29a6977f8c982dac54', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '43dbec013e8110b6a80f6b79f92b93e9bfa5c475', required: this.required }))), this.secondaryLabel && (h("span", { key: '8c12c993b8743b4083e9eba68bd5cae1be6141fe', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '6dc3087da1ac993100c24232e753b9648e1a3503', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'bf97e3528bafe25727a352d9a59c7a2116824336', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: 'e43a260c5acfe19f18956a029ad9dceecb05adf2', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '7965e269ee23603880e1b215f12688071d26f138', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '9f36e0298724cc9c5296528be84b08d2c17bb6fa' }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {