@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -1,7 +1,10 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
-import { i as isLightColor } from './color-BG4WRR22.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
+import { F as FieldChip } from './fieldChip-GPikjpYw.js';
+import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
+import './overlayscrollbars-ox7HzCZn.js';
 
-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{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-12));font-weight:var(--co-ref-field-label-font-weight, 500);line-height:1;white-space:nowrap;cursor:default;text-transform:uppercase;letter-spacing:0.06em}.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-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-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__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.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-sm{width:24px;height:24px;min-width:24px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0}.co-ref-field__avatar-sm--light{color:rgba(0, 0, 0, 0.87)}.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{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:2px var(--co-spacing-sm) 2px var(--co-spacing-sm);background:var(--co-semantic-surface-muted);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);line-height:1;max-width:120px}.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}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);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{display:inline-flex;align-items:center;justify-content:center;padding:2px 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}.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);scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-ref-field__options::-webkit-scrollbar{width:6px}.co-ref-field__options::-webkit-scrollbar-track{background:transparent}.co-ref-field__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.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-avatar{width:32px;height:32px;min-width:32px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-12);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0;letter-spacing:0.02em}.co-ref-field__option-avatar--light{color:rgba(0, 0, 0, 0.87)}.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-12);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)}`;
+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 CoRefField = class {
     constructor(hostRef) {
@@ -16,11 +19,22 @@ const CoRefField = class {
         this.coRemove = createEvent(this, "coRemove", 7);
         this.coFooterPrimary = createEvent(this, "coFooterPrimary", 7);
         this.coFooterSecondary = createEvent(this, "coFooterSecondary", 7);
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         this.placeholder = 'Select…';
         this.disabled = false;
         this.clearable = true;
         this.multiple = false;
         this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /**
+         * Size of the trigger (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
+         *
+         * `'default'` is a deprecated alias of `'md'`, kept for backwards
+         * compatibility with the old `'default' | 'sm'` scale — use `'md'` instead.
+         */
+        this.size = 'md';
         // ── Data props (controlled) ────────────────────────────────
         /** Selected value: single ID string or JSON array of IDs. */
         this.value = '';
@@ -43,10 +57,32 @@ const CoRefField = class {
         this.footerPrimaryLabel = 'Ok';
         /** Label for the secondary footer button. */
         this.footerSecondaryLabel = 'New';
-        /** Max chips visible in multiple mode before "+N" badge. */
-        this.maxChips = 3;
+        /**
+         * Max chips visible in multiple mode before the "+N" badge.
+         * `0` (default) = responsive: the trigger stays single-line and shows as
+         * many chips as actually fit its current width (ResizeObserver-driven);
+         * the badge counts the rest. Set `> 0` to force a fixed cap instead.
+         */
+        this.maxChips = 0;
+        /** Panel color theme. 'auto' follows trigger, 'dark' forces dark panel, 'light' forces light. */
+        this.panelTheme = 'auto';
+        /**
+         * Shape of the leading avatar (selected value + option rows). Defaults to
+         * 'circle' (people refs); use 'square' for company/workspace refs — it renders
+         * a smooth squircle. The avatar border can be themed via --co-avatar-border-color.
+         */
+        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 = [];
         // ── Popover event handlers ─────────────────────────────────
         this.handlePopoverOpen = () => {
             this.isOpen = true;
@@ -118,6 +154,10 @@ const CoRefField = class {
             this.coFooterSecondary.emit();
         };
     }
+    /** Common-scale size with the legacy `'default'` alias normalized to `'md'`. */
+    get normalizedSize() {
+        return this.size === 'default' ? 'md' : this.size;
+    }
     // ── Parsed data ────────────────────────────────────────────
     get parsedOptions() {
         try {
@@ -154,7 +194,7 @@ const CoRefField = class {
         // Options override / fill gaps (contain the items currently visible in dropdown)
         for (const opt of this.parsedOptions) {
             if (!map.has(opt._id)) {
-                map.set(opt._id, { _id: opt._id, label: opt.label, description: opt.description, color: opt.color, avatar: opt.avatar });
+                map.set(opt._id, { _id: opt._id, label: opt.label, description: opt.description, color: opt.color, avatar: opt.avatar, image: opt.image });
             }
         }
         // Return in the order of selected IDs
@@ -178,13 +218,98 @@ const CoRefField = class {
         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;
+        // 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.
+        if (this.chipsEl !== this.observedChipsEl) {
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.chipsEl)
+                (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.chipsEl);
+            this.observedChipsEl = this.chipsEl;
+        }
+        // Selection/label changes alter the chips; container size changes are the
+        // observer's job. Only re-measure when the rendered chips changed (their
+        // 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('
') : '';
+        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;
+        }
+    }
     disconnectedCallback() {
+        var _a, _b;
         if (this.debounceTimer)
             clearTimeout(this.debounceTimer);
+        (_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
+     * (they're kept in the DOM, clipped + visibility:hidden) so the "+N" badge
+     * reflects the REAL available width. Skipped when `maxChips > 0` (fixed cap).
+     */
+    calcOverflow() {
+        if (!this.multiple || this.maxChips > 0 || !this.chipsEl) {
+            if (this.overflowCount !== 0)
+                this.overflowCount = 0;
+            return;
+        }
+        const chips = Array.from(this.chipsEl.querySelectorAll('.co-ref-field__chip'));
+        if (chips.length === 0) {
+            if (this.overflowCount !== 0)
+                this.overflowCount = 0;
+            return;
+        }
+        const containerRight = this.chipsEl.getBoundingClientRect().right;
+        let hiddenCount = 0;
+        for (let i = chips.length - 1; i >= 0; i--) {
+            if (chips[i].getBoundingClientRect().right > containerRight + 1) {
+                hiddenCount++;
+            }
+            else {
+                break;
+            }
+        }
+        if (hiddenCount !== this.overflowCount) {
+            this.overflowCount = hiddenCount;
+        }
     }
     // ── 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(() => {
@@ -205,40 +330,108 @@ const CoRefField = class {
                 'co-ref-field__trigger': true,
                 'co-ref-field--open': this.isOpen,
                 '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 }))));
     }
+    /**
+     * 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.
+     */
+    renderItemAvatar(item, size) {
+        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 }));
+        }
+        if (item.color) {
+            return h("span", { class: "co-ref-field__color-dot", style: { backgroundColor: item.color } });
+        }
+        return null;
+    }
     renderSingleValue(item) {
-        return (h("div", { class: "co-ref-field__selected" }, item.avatar ? (h("span", { class: {
-                'co-ref-field__avatar-sm': true,
-                'co-ref-field__avatar-sm--light': !!item.color && isLightColor(item.color),
-            }, style: { backgroundColor: item.color || 'var(--co-color-primary-azul)' } }, item.avatar)) : item.color ? (h("span", { class: "co-ref-field__color-dot", style: { backgroundColor: item.color } })) : null, h("span", { class: "co-ref-field__selected-label" }, item.label)));
+        return (h("div", { class: "co-ref-field__selected" }, this.renderItemAvatar(item, 'xxs'), h("span", { class: "co-ref-field__selected-label" }, item.label)));
     }
     renderMultipleValue(items) {
-        const visible = items.slice(0, this.maxChips);
-        const overflow = items.length - this.maxChips;
-        return (h("div", { class: "co-ref-field__chips" }, visible.map((item) => (h("span", { class: "co-ref-field__chip", key: item._id }, item.color && (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })), h("span", { class: "co-ref-field__chip-label" }, item.label), h("button", { class: "co-ref-field__chip-remove", onClick: (e) => this.handleRemoveChip(item._id, e), type: "button" }, h("co-icon", { name: "x", size: 10 }))))), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
+        // Fixed cap (maxChips > 0) keeps the legacy slice; responsive mode (0)
+        // renders ALL chips on one clipped line and counts the ones that don't
+        // fit via calcOverflow (the trailing clipped chips turn invisible so no
+        // half-cut chip shows at the edge).
+        const fixed = this.maxChips > 0;
+        // Responsive: never hide EVERY chip — always keep at least one visible
+        // (it ellipsis-truncates to the wrapper, see chip max-width in CSS), so a
+        // narrow field shows "<chip> +N" rather than a bare "+N".
+        const responsiveOverflow = Math.min(this.overflowCount, Math.max(0, items.length - 1));
+        const visible = fixed ? items.slice(0, this.maxChips) : items;
+        const overflow = fixed ? items.length - this.maxChips : responsiveOverflow;
+        const visibleCount = items.length - (fixed ? 0 : responsiveOverflow);
+        return (h("div", { class: "co-ref-field__chips-row" }, h("div", { class: "co-ref-field__chips", ref: (el) => (this.chipsEl = el) }, visible.map((item, i) => (
+        // Shared field-chip (utils/fieldChip.tsx); the leading avatar /
+        // color-dot goes in as children, the "+N" overflow stays here.
+        h(FieldChip, { key: item._id, baseClass: "co-ref-field__chip", label: item.label, modifiers: {
+                '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)));
     }
-    renderPanel() {
+    /**
+     * 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];
+    }
+    renderPanel() {
+        const options = this.orderedOptions;
         const selectedIds = this.parsedValue;
-        return (h("div", { class: "co-ref-field__panel" }, 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 }, 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) => {
+        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.avatar && (h("span", { class: {
-                    'co-ref-field__option-avatar': true,
-                    'co-ref-field__option-avatar--light': !!opt.color && isLightColor(opt.color),
-                }, style: { backgroundColor: opt.color || 'var(--co-color-primary-azul)' } }, opt.avatar)), !opt.avatar && opt.color && (h("span", { class: "co-ref-field__option-color", style: { backgroundColor: opt.color } })), opt.icon && !opt.color && !opt.avatar && (h("co-icon", { name: opt.icon, size: 16, class: "co-ref-field__option-icon" })), 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) => {
+                }, 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))))));
+        }), 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))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '6153fa8ba51c07acd9be897e118a7216caa98993', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '3030bf64028c44ab89e4c9666e38f3024b148e91', class: "co-ref-field__labels" }, this.label && h("label", { key: '23a6315ce9b480f2b5163da2e679b5bd67f62ba8', class: "co-ref-field__label" }, this.label), this.secondaryLabel && (h("span", { key: 'f3ad11000ff8446603ad9e3d4e2a10ddb16f678f', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '3fb1374f50cd82d8098b4888e3cdd4fcbc9cbb15', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ce8fd9568c6a8eb911ceee4dc79d6e1551f61d04', slot: "trigger" }, this.renderTrigger()), this.renderPanel()), this.helperText && (h("div", { key: '7f2127c6fd4050db16da696c6c3df250a65e853a', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '0e36272220332148acd867c322baf23b0a056bff', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '28a61124531c5a5a9ea87239133986ae7882744d' }, this.helperText)))));
+        return (h("div", { key: '2c5d7777e87a0e2e36d585e572247cf30c15daa6', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'd1f1b19bf47421f0cd63426048832178d4db3e42', class: "co-ref-field__labels" }, this.label && (h("label", { key: 'b0314d3110a1582753c7f96647c675b50e3c53a0', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '5e067575543caac8f232624f471e6907cc6190bc', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'c00e7e344ee5daf559543574cb93575f87382ce3', required: this.required }))), this.secondaryLabel && (h("span", { key: '6260be95e20d0b768e55492a33fce4a48455c78c', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'b7e4465b710cb334060c2688b52861ea9e7f22c6', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ebd03c99fbf802383ab1f60414f58a86d4e7bca6', slot: "trigger" }, this.renderTrigger()), this.renderPanel()), this.helperText && (h("div", { key: '0d7ff99b55e462758a3c24f77ef7236d09cc0ada', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '2635e7e05fbc44fad8e4bc6c9267cac8ff953cbc', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'fec022c3797bb73dc83efd5a816d21417423da08' }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {