@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,7 +1,9 @@
-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-BKmfyPZK.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.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{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-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--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.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{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:var(--co-spacing-sm) var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:160px;flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.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}.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)')}`;
 
 const CoRefField = class {
     constructor(hostRef) {
@@ -16,11 +18,17 @@ 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. 'sm' reduces height to 32px. */
+        this.size = 'default';
         // ── Data props (controlled) ────────────────────────────────
         /** Selected value: single ID string or JSON array of IDs. */
         this.value = '';
@@ -43,10 +51,26 @@ 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';
         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;
@@ -154,7 +178,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 +202,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 +314,101 @@ const CoRefField = class {
                 'co-ref-field__trigger': true,
                 'co-ref-field--open': this.isOpen,
                 'co-ref-field--disabled': this.disabled,
+                'co-ref-field--sm': this.size === 'sm',
                 [`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: "circle" }));
+        }
+        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;
+        const visible = fixed ? items.slice(0, this.maxChips) : items;
+        const overflow = fixed ? items.length - this.maxChips : this.overflowCount;
+        const visibleCount = items.length - (fixed ? 0 : this.overflowCount);
+        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) => (h("span", { class: {
+                'co-ref-field__chip': true,
+                'co-ref-field__chip--avatar': !!(item.image || item.avatar),
+                'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
+            }, key: item._id }, item.image || item.avatar ? (this.renderItemAvatar(item, 'xxs')) : item.color ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null, 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-circle", weight: "fill", size: 16 })))))), 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: '42c5eb43b92c6fdf1374fba29d63e0f0010b4496', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '8ece0685605a1328a2857629bcab891a5dceac79', class: "co-ref-field__labels" }, this.label && h("label", { key: 'a7e219fa8e6d945ecef2c7763e41ae8e34e099d7', class: "co-ref-field__label" }, this.label, h(RequiredMark, { key: 'c9a12707677490f1329b8d506fd58d62643c2862', required: this.required })), this.secondaryLabel && (h("span", { key: '14f8df926446803d1da1297573cf2742ce444b7a', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '4d9e586ea1f9690c1528a6ce2232ef3ea798e8db', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '112d715f62f9f817781a28ec45dd3218c9af24f6', slot: "trigger" }, this.renderTrigger()), this.renderPanel()), this.helperText && (h("div", { key: '7863b5bb1b653abe589101abed9b7af09225b622', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '16f485809dd3d5c5948e7e6ed1c554a927f1ad8c', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '8e73c3e7164aaae377c971f1d2913998f8b8c416' }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -0,0 +1,233 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+
+const coRichTextEditorCss = () => `co-rich-text-editor{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body)}.co-rich-text-editor{display:flex;flex-direction:column;gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__label,.co-rich-text-editor__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rich-text-editor__box{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-rich-text-editor--focused .co-rich-text-editor__box{border-color:var(--co-semantic-border-focus, var(--co-color-primary-azul));box-shadow:0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15))}.co-rich-text-editor--error .co-rich-text-editor__box{border-color:var(--co-color-status-error)}.co-rich-text-editor--success .co-rich-text-editor__box{border-color:var(--co-color-status-success)}.co-rich-text-editor--disabled .co-rich-text-editor__box,.co-rich-text-editor--readonly .co-rich-text-editor__box{opacity:0.7;cursor:not-allowed}.co-rich-text-editor--loading .co-rte-content{min-height:96px;background:linear-gradient(90deg,     var(--co-semantic-surface-secondary) 0%,     var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,     var(--co-semantic-surface-secondary) 100%);background-size:200% 100%;animation:co-rte-skeleton 1.2s ease-in-out infinite}@keyframes co-rte-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.co-rte-content{padding:var(--co-spacing-md) var(--co-spacing-md);min-height:96px;color:var(--co-semantic-text-default)}.co-rte-content .ProseMirror{outline:none;min-height:72px;line-height:1.5}.co-rte-content .ProseMirror p{margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror p:last-child{margin-bottom:0}.co-rte-content .ProseMirror h2,.co-rte-content .ProseMirror h3,.co-rte-content .ProseMirror h4{margin:var(--co-spacing-md) 0 var(--co-spacing-sm);font-weight:600;line-height:1.3}.co-rte-content .ProseMirror h2{font-size:var(--co-font-size-20, 20px)}.co-rte-content .ProseMirror h3{font-size:var(--co-font-size-16, 16px)}.co-rte-content .ProseMirror ul,.co-rte-content .ProseMirror ol{padding-left:var(--co-spacing-xl);margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror blockquote{border-left:3px solid var(--co-semantic-border-default, var(--co-semantic-border-subtle));padding-left:var(--co-spacing-md);margin:0 0 var(--co-spacing-sm) 0;color:var(--co-semantic-text-secondary)}.co-rte-content .ProseMirror a{color:var(--co-color-primary-azul);text-decoration:underline}.co-rte-content .ProseMirror img{max-width:100%;height:auto;border-radius:var(--co-border-radius-xs);margin:var(--co-spacing-sm) 0}.co-rte-content .ProseMirror img.ProseMirror-selectednode{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul))}.co-rte-content .ProseMirror code{font-family:var(--co-font-family-mono);font-size:0.9em;background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));padding:0.1em 0.3em;border-radius:var(--co-border-radius-xxs)}.co-rte-content .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--co-semantic-text-muted);float:left;height:0;pointer-events:none}.co-rte-content .co-rte-variable,.co-rte-content .co-rte-mention{display:inline-block;padding:0.05em 0.4em;border-radius:var(--co-border-radius-xxs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-size:0.9em;white-space:nowrap}.co-rte-content .co-rte-mention{background:var(--co-color-primary-verde)}.co-rich-text-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-xs);min-height:0}.co-rich-text-editor__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12, 12px)}.co-rich-text-editor__helper--error{color:var(--co-color-status-error)}.co-rich-text-editor__helper--success{color:var(--co-color-status-success)}.co-rich-text-editor__count{margin-left:auto;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px)}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor{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)}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor__label{white-space:normal}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor>:not(.co-rich-text-editor__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 CoRichTextEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coInput = createEvent(this, "coInput", 7);
+        this.coChange = createEvent(this, "coChange", 7);
+        this.coFocus = createEvent(this, "coFocus", 7);
+        this.coBlur = createEvent(this, "coBlur", 7);
+        this.coClear = createEvent(this, "coClear", 7);
+        this.coReady = createEvent(this, "coReady", 7);
+        /** ProseMirror document as a JSON string. `null`/empty = empty editor. */
+        this.value = null;
+        /** Preset controlling allowed nodes/marks, toolbar and sanitization. */
+        this.preset = 'task';
+        this.placeholder = '';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        this.status = 'default';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.showCharacterCount = false;
+        this.autofocus = false;
+        /** Toolbar layout. `auto` uses the preset default. */
+        this.toolbar = 'auto';
+        this.ready = false;
+        this.hasFocus = false;
+        this.charCount = 0;
+        /** Last value we emitted — guards the value Watch against feedback loops. */
+        this.lastEmitted = null;
+        /** True while applying an external value (suppresses emit). */
+        this.applyingExternal = false;
+        /** Set by disconnectedCallback — aborts editor creation if the element was
+         *  removed while the lazy import was still in flight (ProseMirror leak). */
+        this.destroyed = false;
+        this.handleUpdate = (editor) => {
+            this.refreshCharCount();
+            if (this.applyingExternal)
+                return;
+            const out = this.buildOutput(editor);
+            const next = out.json ? JSON.stringify(out.json) : null;
+            this.lastEmitted = next;
+            this.value = next;
+            this.coInput.emit(out);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            if (this.editor)
+                this.coChange.emit(this.buildOutput(this.editor));
+            this.coBlur.emit();
+        };
+    }
+    async componentDidLoad() {
+        var _a, _b;
+        this.rt = await import('./index-BjAqSidM.js');
+        if (this.destroyed || !this.contentEl)
+            return;
+        this.editor = this.rt.createEditor({
+            preset: this.preset,
+            element: this.contentEl,
+            content: this.parseValue(this.value),
+            editable: !this.disabled && !this.readonly,
+            placeholder: this.placeholder,
+            maxLength: this.maxLength,
+            features: this.parsedFeatures,
+            customExtensions: (_a = this.customExtensions) !== null && _a !== void 0 ? _a : [],
+            imageUpload: this.imageUpload,
+            onUpdate: (editor) => this.handleUpdate(editor),
+            onFocus: () => this.handleFocus(),
+            onBlur: () => this.handleBlur(),
+        });
+        this.lastEmitted = (_b = this.value) !== null && _b !== void 0 ? _b : null;
+        this.ready = true;
+        this.refreshCharCount();
+        this.syncToolbar();
+        this.coReady.emit();
+        if (this.autofocus)
+            this.editor.commands.focus();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.destroyed = true;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.editor = undefined;
+    }
+    componentDidRender() {
+        this.syncToolbar();
+    }
+    onValueChange(next) {
+        if (!this.editor || this.applyingExternal)
+            return;
+        if ((next !== null && next !== void 0 ? next : null) === this.lastEmitted)
+            return;
+        this.applyingExternal = true;
+        try {
+            this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
+        }
+        finally {
+            this.applyingExternal = false;
+            this.lastEmitted = next !== null && next !== void 0 ? next : null;
+            this.refreshCharCount();
+        }
+    }
+    onEditableChange() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditable(!this.disabled && !this.readonly);
+    }
+    /* ── Public methods (escape hatches + imperative control) ── */
+    async getJSON() {
+        return this.editor && !this.editor.isEmpty ? this.editor.getJSON() : null;
+    }
+    async getHtml() {
+        return this.editor ? this.sanitizeHtml(this.editor.getHTML()) : '';
+    }
+    async getText() {
+        var _a, _b;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getText()) !== null && _b !== void 0 ? _b : '';
+    }
+    async clear() {
+        if (!this.editor)
+            return;
+        this.editor.commands.clearContent(true);
+        this.coClear.emit();
+    }
+    async focusEditor() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+    }
+    async setContent(content) {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setContent(content);
+    }
+    async getEditorInstance() {
+        var _a;
+        return (_a = this.editor) !== null && _a !== void 0 ? _a : null;
+    }
+    /* ── internals ── */
+    get parsedFeatures() {
+        if (!this.features)
+            return undefined;
+        if (typeof this.features === 'string') {
+            try {
+                return JSON.parse(this.features);
+            }
+            catch (_a) {
+                return undefined;
+            }
+        }
+        return this.features;
+    }
+    parseValue(v) {
+        if (!v)
+            return '';
+        try {
+            return JSON.parse(v);
+        }
+        catch (_a) {
+            return v; // tolerate an HTML string
+        }
+    }
+    sanitizeHtml(html) {
+        // Same features as the schema — otherwise feature-enabled nodes (images,
+        // variables) would survive in `json` but be stripped from `html`.
+        return this.rt ? this.rt.sanitize(html, this.preset, this.parsedFeatures) : html;
+    }
+    buildOutput(editor) {
+        const empty = editor.isEmpty;
+        return {
+            json: empty ? null : editor.getJSON(),
+            html: empty ? '' : this.sanitizeHtml(editor.getHTML()),
+            text: editor.getText(),
+        };
+    }
+    refreshCharCount() {
+        var _a;
+        const storage = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.storage;
+        if (storage === null || storage === void 0 ? void 0 : storage.characterCount)
+            this.charCount = storage.characterCount.characters();
+    }
+    syncToolbar() {
+        if (this.toolbarEl && this.editor && this.toolbarEl.editor !== this.editor) {
+            this.toolbarEl.editor = this.editor;
+        }
+    }
+    get resolvedToolbar() {
+        if (this.toolbar !== 'auto')
+            return this.toolbar;
+        return this.rt ? this.rt.defaultToolbarForPreset(this.preset) : 'basic';
+    }
+    get helperIcon() {
+        switch (this.status) {
+            case 'error': return 'warning-circle';
+            case 'success': return 'check-circle';
+            case 'warning': return 'warning-circle';
+            default: return 'info';
+        }
+    }
+    render() {
+        const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
+        const showCount = this.showCharacterCount || this.maxLength != null;
+        return (h("div", { key: 'c853d865716114025949e33e011394d824e4a961', class: {
+                'co-rich-text-editor': true,
+                'co-rich-text-editor--focused': this.hasFocus,
+                'co-rich-text-editor--disabled': this.disabled,
+                'co-rich-text-editor--readonly': this.readonly,
+                'co-rich-text-editor--loading': !this.ready,
+                [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '049a14875b801e745c91f28410474d8139a366e6', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '4221652dd84a86192d84ba8889eafbd311ac27dd', class: "co-rich-text-editor__label", part: "label" }, this.label, h(RequiredMark, { key: '6576f8bdd8c744f6f4fd2990e3c3b58806a03bd4', required: this.required })), this.secondaryLabel && (h("span", { key: '5c28820cf466f06900ae3981b780f6664a14ca08', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '94557b815f4dd9bfd33f2d4ae613554a54a391ad', class: "co-rich-text-editor__box" }, showToolbar && (h("co-rich-text-toolbar", { key: '7727dc54776263c3ef56f274e09d7d851df245d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'd81af8d3887e1f77062eb64efe02cda157f77216', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("div", { key: 'f747db5469b5a805e88101cb7670432dc114c30f', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '80c703179448310e86a16e908cc29edfc73260ba', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '7411c41c32e7c1845983df2608f604f764585230', name: this.helperIcon, size: 14 }), h("span", { key: 'be108ca9544684e2d6d0dbf68eca65d11f3c841b' }, this.helperText))), showCount && (h("span", { key: '5c88aeb55460778024664510a58ca9d331ef10c7', class: "co-rich-text-editor__count" }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "disabled": [{
+                "onEditableChange": 0
+            }],
+        "readonly": [{
+                "onEditableChange": 0
+            }]
+    }; }
+};
+CoRichTextEditor.style = coRichTextEditorCss();
+
+export { CoRichTextEditor as co_rich_text_editor };