@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/cjs/co-combobox.cjs.entry.js

@@ -1,20 +1,27 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.js');
+var overlayScroll = require('./overlayScroll-ifzDNeyb.js');
+var normalizeText = require('./normalizeText-B-v-XPKf.js');
+require('./overlayscrollbars-BlBHo2Xx.js');
 
-const coComboboxCss = () => `: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__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;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__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-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__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-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__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-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
+const coComboboxCss = () => `.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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--s .co-combobox__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-combobox--sm .co-combobox__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-combobox--lg .co-combobox__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-combobox--s .co-combobox__input-wrapper,.co-combobox--sm .co-combobox__input-wrapper{min-height:0;padding:0}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__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-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden}.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-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__match{font-weight:700;color:var(--co-semantic-text-default)}.co-combobox__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-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-combobox__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-combobox__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-combobox__helper--error .co-combobox__helper-icon,.co-combobox__helper--error .co-combobox__helper-text{color:var(--co-semantic-status-error)}.co-combobox__helper--success .co-combobox__helper-icon,.co-combobox__helper--success .co-combobox__helper-text{color:var(--co-semantic-status-success)}.co-combobox__helper--warning .co-combobox__helper-icon,.co-combobox__helper--warning .co-combobox__helper-text{color:var(--co-color-status-review)}.co-combobox__helper--info .co-combobox__helper-icon,.co-combobox__helper--info .co-combobox__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-combobox{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-combobox__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-combobox__label{white-space:normal}:host([layout='horizontal']) .co-combobox>:not(.co-combobox__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-combobox__trigger{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoCombobox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coChange = index.createEvent(this, "coChange", 7);
-        this.coOpen = index.createEvent(this, "coOpen", 7);
-        this.coClose = index.createEvent(this, "coClose", 7);
+        this.coOpen = index.createEvent(this, "coOpen", 3);
+        this.coClose = index.createEvent(this, "coClose", 3);
         this.coClear = index.createEvent(this, "coClear", 7);
         this.coFooterPrimary = index.createEvent(this, "coFooterPrimary", 7);
         this.coFooterSecondary = index.createEvent(this, "coFooterSecondary", 7);
-        /** Placeholder text */
-        this.placeholder = 'Placeholder';
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
+        /** Placeholder text. Empty by default — a literal "Placeholder" leaking into
+         *  product UIs when the consumer forgets the prop is worse than no hint. */
+        this.placeholder = '';
         /** Disabled state */
         this.disabled = false;
         /** Show clear button when value is selected */
@@ -35,12 +42,17 @@ const CoCombobox = class {
         this.value = '[]';
         /** Whether multiple values can be selected */
         this.multiple = true;
+        /** Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48 */
+        this.size = 'md';
+        /** Validation status */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.isOpen = false;
         this.searchQuery = '';
         this.overflowCount = 0;
         this.scrollTop = 0;
         this.handleTriggerClick = (e) => {
-            console.log('[co-combobox] handleTriggerClick, disabled:', this.disabled);
             if (this.disabled)
                 e.stopPropagation();
         };
@@ -132,8 +144,14 @@ const CoCombobox = class {
     get filteredOptions() {
         if (!this.searchQuery)
             return this.parsedOptions;
-        const q = this.searchQuery.toLowerCase();
-        return this.parsedOptions.filter(o => o.label.toLowerCase().includes(q));
+        return normalizeText.rankByMatch(this.parsedOptions, this.searchQuery, o => o.label);
+    }
+    /** Option label with the matched substring wrapped for highlighting. */
+    renderLabel(label) {
+        const seg = this.searchQuery ? normalizeText.highlightMatch(label, this.searchQuery) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, index.h("span", { class: "co-combobox__match" }, seg.match), seg.post];
     }
     get displayText() {
         const selected = this.selectedValues;
@@ -151,6 +169,12 @@ const CoCombobox = class {
     get hasValue() {
         return this.selectedValues.length > 0;
     }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle', success: 'check-circle', warning: 'warning', info: 'info',
+        };
+        return map[this.status] || null;
+    }
     onOpenChange(open) {
         if (open) {
             this.searchQuery = '';
@@ -170,8 +194,10 @@ const CoCombobox = class {
         });
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_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;
     }
     componentDidRender() {
         var _a, _b;
@@ -180,6 +206,15 @@ const CoCombobox = class {
             (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.chipContainerEl);
         }
         this.calcOverflow();
+        // OverlayScrollbars: init when the dropdown opens, tear down when it closes.
+        // Virtual scroll keeps working — scrollTop is read from the OS viewport.
+        if (this.isOpen && this.optionsContainerEl && !this.osInstance) {
+            this.osInstance = overlayScroll.initOverlayScroll(this.optionsContainerEl, (vp) => { this.scrollTop = vp.scrollTop; });
+        }
+        else if (!this.isOpen && this.osInstance) {
+            this.osInstance.destroy();
+            this.osInstance = undefined;
+        }
     }
     calcOverflow() {
         if (!this.multiple || !this.chipContainerEl)
@@ -219,24 +254,25 @@ const CoCombobox = class {
     render() {
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (index.h("div", { key: 'e77d4338436c01bf4aeac90a08ec31c60c320e56', class: {
+        return (index.h("div", { key: '335a823bd69e0d57af567bd92befdc31b2449612', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 'co-combobox--filled': this.hasValue,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '60f9e0522a8dee4833bbfa564fb55e2bd4b924eb', class: "co-combobox__labels" }, this.label && index.h("label", { key: '070a1111f508e299313d90364920aca7c2c00062', class: "co-combobox__label", part: "label" }, this.label), this.secondaryLabel && (index.h("span", { key: '77544e3e6783ae2b7e4c51fdf2c614b43db3df18', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: '69b76f964e92406025c94c44aa639c7d128643ee', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '4ea12edc1d79d609379fe293f7807af3c4a31c20', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (index.h("co-icon", { key: '7c9053e320c472bd67a621487de2b456714de2b7', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), index.h("div", { key: '1c9e01f82203801fd4e11c3d01448f0caa3d9cd5', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (index.h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, index.h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), index.h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => this.handleRemoveOption(e, opt.value) }))))) : (index.h("span", { class: {
+                [`co-combobox--${this.size}`]: true,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '690ffddf411810f8fd5828914a157b2e888d2034', class: "co-combobox__labels" }, this.label && index.h("label", { key: '6a7b3f9cc3761e43b702d4086553bb0e3039360d', class: "co-combobox__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'acc1ca3c620d928bdadb17b42906f46fa9e09581', required: this.required })), this.secondaryLabel && (index.h("span", { key: 'b5d6b6d6acbd12e866a836a5545dbc69c8f885f0', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: 'e7d3d4fcbc8e5cb70da61c046ffbb7b3611e0c6a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: 'cc07aefc63d82777d8caf01929a8d7c356bf5007', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (index.h("co-icon", { key: '06690ca640c14bfbbb5e34ea8a1e85efc7fa5640', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), index.h("div", { key: '8c93b09f144f23fabaead4286b4910ad2da676cc', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (index.h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, index.h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), index.h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => this.handleRemoveOption(e, opt.value) }))))) : (index.h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (index.h("span", { key: 'dba6a9ca703aa80b0b47b3ca132a3ad4364a5968', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (index.h("button", { key: '2b1f12c41ee1eb95a59dc763b6d1c23f191543aa', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, index.h("co-icon", { key: 'd34a19853a49618668609c963bbf1d6c79170859', name: "x-circle", size: 16, weight: "fill" }))), index.h("co-icon", { key: 'bc0be278e45f1a4be653f294f4fcea5253491653', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), index.h("div", { key: '0a346246fb89f71f1b55e68b102c6d670d2d5e17', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (index.h("div", { key: '5c7134c5a68402e62b050d6a1ac43bfa110232b4', class: "co-combobox__search", part: "search" }, index.h("co-icon", { key: '4533ade5d31966b24d6f3f57d32fefe711f2ee5f', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), index.h("input", { key: 'edbfb2c18dbba3416410a4bbb67dfffa962eeb57', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), index.h("div", { key: '6734495aca88397e2874e5dda5252bda2a96a5ca', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (index.h("span", { key: 'a01c9e41462e5d449b1dccfcd9e174dabc88f296', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (index.h("button", { key: 'f832fdba50c709bf7b53f2d3271b68f8ad51f7fc', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, index.h("co-icon", { key: 'fc4f790ad7842769d5a0e0a7655da17ef57fdd72', name: "x-circle", size: 16, weight: "fill" }))), index.h("co-icon", { key: '9280e1d22d8bfa69c1cc40abdd926ae91751db67', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), index.h("div", { key: '3724c9e0424fc971a2bd4f509e66a658d678d3ce', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (index.h("div", { key: 'dc05b68524224a2132f328537e653bf1923e1974', class: "co-combobox__search", part: "search" }, index.h("co-icon", { key: '550f7cd1af9076fd7ed6fea1621b0b698d7be40b', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), index.h("input", { key: '5a7c2544d673ccb3c82b8b4ba02351664fb017f6', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), index.h("div", { key: '621fd43f35764335737d9d572fa6f5f5e6673959', class: "co-combobox__options", part: "options", ref: (el) => (this.optionsContainerEl = el), onScroll: this.handleOptionsScroll }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (index.h("div", { class: "co-combobox__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, index.h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(option => {
                 const isSelected = selected.includes(option.value);
                 return (index.h("div", { class: {
                         'co-combobox__option': true,
                         'co-combobox__option--selected': isSelected,
-                    }, onClick: () => this.handleOptionClick(option.value), part: "option" }, index.h("div", { class: "co-combobox__option-content" }, index.h("div", { class: "co-combobox__option-icon-wrapper" }, index.h("co-icon", { name: option.icon || 'circle', size: 20, class: "co-combobox__option-icon" })), index.h("span", { class: "co-combobox__option-label" }, option.label)), isSelected && this.multiple && (index.h("button", { class: "co-combobox__option-remove", type: "button", tabIndex: -1, onClick: (e) => this.handleRemoveOption(e, option.value), "aria-label": `Remove ${option.label}` }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.multiple && (index.h("co-icon", { name: "check", size: 16, class: "co-combobox__option-check" }))));
+                    }, onClick: () => this.handleOptionClick(option.value), part: "option" }, index.h("div", { class: "co-combobox__option-content" }, option.icon && (index.h("div", { class: "co-combobox__option-icon-wrapper" }, index.h("co-icon", { name: option.icon, size: 20, class: "co-combobox__option-icon" }))), index.h("span", { class: "co-combobox__option-label" }, this.renderLabel(option.label))), isSelected && this.multiple && (index.h("button", { class: "co-combobox__option-remove", type: "button", tabIndex: -1, onClick: (e) => this.handleRemoveOption(e, option.value), "aria-label": `Remove ${option.label}` }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.multiple && (index.h("co-icon", { name: "check", size: 16, class: "co-combobox__option-check" }))));
             }))));
-        })()), this.showFooter && (index.h("div", { key: 'd618d08c25c1f2d1d04b9e7b19df9b01d79f7002', class: "co-combobox__footer", part: "footer" }, index.h("button", { key: '950ab40c71a96de34f339859b9f69397ad69b1c3', class: "co-combobox__footer-btn co-combobox__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, index.h("co-icon", { key: '89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d', name: "plus", size: 16 }), index.h("span", { key: '167aadfbcae4abccf7e35f2b32e0893f75a495f6' }, this.footerSecondaryLabel)), index.h("button", { key: '92778f91ff795978396c3b99b7f1900645a51cf7', class: "co-combobox__footer-btn co-combobox__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, index.h("co-icon", { key: '31c26c2ee563b10948313d750cfce00e5cf47a9f', name: "plus", size: 16 }), index.h("span", { key: '4860a6e7399596dd28ad3e0e9c577a1e93ece861' }, this.footerPrimaryLabel))))))));
+        })()), this.showFooter && (index.h("co-list-footer", { key: '6ae233e2944648a21c09c3ef252cb89b05be86e3', secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))), this.helperText && (index.h("div", { key: '6896e1e0ae6f7a29f9b3916759f57adc65c4ba4b', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && index.h("co-icon", { key: 'a4e65d03cf076985fd72c835143718fb5e3b39ba', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), index.h("span", { key: '83ed79b8f7cd06824619e5a337d3dd373c098f37', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-command-search.cjs.entry.js

@@ -1,14 +1,66 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
+var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
-const coCommandSearchCss = () => `:host{display:contents}.co-command-search__trigger{display:contents}.co-command-search{display:flex;flex-direction:column;width:90vw;max-width:560px;max-height:420px;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);box-shadow:0 16px 48px rgba(0, 0, 0, 0.16);overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px) scale(0.98);opacity:0;transition:transform 0.15s ease, opacity 0.15s ease;margin-top:-15vh}.co-command-search--open{transform:translateY(0) scale(1);opacity:1}.co-command-search__input-row{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md) var(--co-spacing-lg);border-bottom:1px solid var(--co-semantic-border-default);color:var(--co-semantic-text-muted)}.co-command-search__input{flex:1;border:none;outline:none;background:transparent;font-size:var(--co-font-size-16);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);min-width:0}.co-command-search__input::placeholder{color:var(--co-semantic-text-muted)}.co-command-search__shortcut{font-size:var(--co-font-size-10);color:var(--co-semantic-text-muted);background:var(--co-semantic-surface-muted);padding:2px var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);font-weight:500;line-height:1.4;flex-shrink:0}.co-command-search__results{flex:1;overflow-y:auto;padding:var(--co-spacing-xs) 0}.co-command-search__item{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-lg);cursor:pointer;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);transition:background 0.08s ease}.co-command-search__item:hover,.co-command-search__item--active{background:var(--co-semantic-surface-hover)}.co-command-search__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-command-search__empty{padding:var(--co-spacing-2xl) var(--co-spacing-lg);text-align:center;font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted)}`;
+/** Flatten an ordered CommandItem[] into render rows, inserting a header
+ *  whenever the section changes. `index` counts items only (drives activeIndex). */
+function groupItems(items) {
+    const rows = [];
+    let lastSection;
+    let i = 0;
+    for (const item of items) {
+        const section = item.section;
+        if (section && section !== lastSection) {
+            rows.push({ kind: 'header', label: section });
+        }
+        lastSection = section;
+        rows.push({ kind: 'item', item, index: i });
+        i++;
+    }
+    return rows;
+}
+
+/**
+ * Pure: should the component keep open and emit coScopeChange
+ * instead of the default coSelect+close?
+ */
+function shouldKeepOpen(item) {
+    return item.keepOpen === true;
+}
+/**
+ * Pure: should coBackspaceEmpty fire?
+ * True when the user presses Backspace with an empty query.
+ */
+function isEmptyBackspace(key, query) {
+    return key === 'Backspace' && query === '';
+}
+/**
+ * Pure: client-side item filtering.
+ * Mirrors the filteredItems getter logic from co-command-search.tsx.
+ * When async=true all items pass through (host already filtered them).
+ */
+function applyClientFilter(items, query, async) {
+    if (async)
+        return items;
+    if (!query)
+        return items;
+    return normalizeText.rankByMatch(items, query, item => [item.label, item.value]);
+}
+
+const coCommandSearchCss = () => `:host{display:contents}co-overlay{--co-overlay-bg:rgba(0, 0, 0, 0.16)}.co-command-search__trigger{display:contents}.co-command-search{display:flex;flex-direction:column;width:90vw;max-width:560px;max-height:420px;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12);overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px) scale(0.98);opacity:0;transition:transform 0.15s ease, opacity 0.15s ease;margin-top:-15vh}.co-command-search--open{transform:translateY(0) scale(1);opacity:1}.co-command-search__input-row{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md) var(--co-spacing-lg);border-bottom:1px solid var(--co-semantic-border-default);color:var(--co-semantic-text-muted)}.co-command-search__input{flex:1;border:none;outline:none;background:transparent;font-size:var(--co-font-size-16);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);min-width:0}.co-command-search__input::placeholder{color:var(--co-semantic-text-muted)}.co-command-search__shortcut{font-size:var(--co-font-size-10);color:var(--co-semantic-text-muted);background:var(--co-semantic-surface-muted);padding:2px var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);font-weight:500;line-height:1.4;flex-shrink:0}.co-command-search__results{flex:1;overflow-y:auto;padding:var(--co-spacing-xs) 0}.co-command-search__item{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-lg);cursor:pointer;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);transition:background 0.08s ease}.co-command-search__item:hover,.co-command-search__item--active{background:var(--co-semantic-surface-hover)}.co-command-search__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-command-search__match{font-weight:700}.co-command-search__empty{padding:var(--co-spacing-2xl) var(--co-spacing-lg);text-align:center;font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted)}.co-command-search__section{padding:var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-xs);font-size:var(--co-font-size-12);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--co-semantic-text-muted)}.co-command-search__item-text{flex:1;min-width:0;display:flex;flex-direction:column}.co-command-search__item-subtitle{font-size:var(--co-font-size-12);color:var(--co-semantic-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-command-search__loading{flex-shrink:0;display:flex;align-items:center}.co-command-search__facet-chip{display:inline-flex;align-items:center;gap:2px;padding:2px var(--co-spacing-xs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:500;white-space:nowrap;flex-shrink:0}.co-command-search__facet-chip-label{max-width:110px;overflow:hidden;text-overflow:ellipsis}.co-command-search__facet-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;border-radius:var(--co-border-radius-full);background:rgba(255, 255, 255, 0.25);color:inherit;cursor:pointer;padding:0;line-height:1;transition:background 0.1s ease}.co-command-search__facet-chip-remove:hover{background:rgba(255, 255, 255, 0.4)}.co-command-search__tabs{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md);overflow-x:auto;border-bottom:1px solid var(--co-semantic-border-default);scroll-padding-right:104px}.co-command-search__tab{flex:0 0 auto}.co-command-search__tab--more{position:sticky;right:0;padding-left:var(--co-spacing-sm);background:var(--co-semantic-surface-page);box-shadow:-12px 0 10px -4px var(--co-semantic-surface-page)}.co-command-search__fav{padding:var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-default)}.co-command-search__fav-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));gap:var(--co-spacing-xs)}.co-command-search__fav-card{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-xs);background:transparent;border:none;border-radius:var(--co-border-radius-sm);cursor:pointer;font-family:inherit;text-align:center;min-width:0;transition:background 0.12s ease}.co-command-search__fav-card:hover{background:var(--co-semantic-surface-hover)}.co-command-search__fav-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-command-search__fav-icon{flex:none;width:50px;height:50px;border-radius:var(--co-border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--co-color-base-blanco, #fff);box-shadow:0 2px 6px rgba(0, 0, 0, 0.14)}.co-command-search__fav-label{font-size:var(--co-font-size-12);font-weight:500;line-height:1.2;color:var(--co-semantic-text-default);max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}`;
 
 const CoCommandSearch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.coSelect = index.createEvent(this, "coSelect", 7);
         this.coClose = index.createEvent(this, "coClose", 7);
+        this.coQueryChange = index.createEvent(this, "coQueryChange", 7);
+        this.coScopeChange = index.createEvent(this, "coScopeChange", 1);
+        this.coBackspaceEmpty = index.createEvent(this, "coBackspaceEmpty", 1);
+        this.coChipRemove = index.createEvent(this, "coChipRemove", 1);
+        this.coTabSelect = index.createEvent(this, "coTabSelect", 1);
+        this.coMoreTabs = index.createEvent(this, "coMoreTabs", 1);
         /** Whether the command palette is open */
         this.open = false;
         /** Placeholder text for the search input */
@@ -17,13 +69,38 @@ const CoCommandSearch = class {
         this.items = [];
         /** Empty state message when no results match */
         this.emptyMessage = 'No results found';
+        /** When true, the host supplies already-filtered, ordered items: disable
+         *  internal client filtering so fetch-as-you-type results pass through. */
+        this.async = false;
+        /** Show a loading indicator in the results area (async fetch in flight). */
+        this.loading = false;
+        /** Facet chips as JSON string: [{label:string, icon?:string}[]] */
+        this.chips = '[]';
+        /** Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row. */
+        this.tabs = '[]';
+        /** The active tab's value (the scope model key), or '' = no active tab. */
+        this.activeTab = '';
+        /** Show the "Más ▾" overflow tab. */
+        this.hasMore = false;
+        /** Label for the overflow tab. */
+        this.moreLabel = 'More';
+        /** Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].
+         *  Shown as a grid at the top of the results, only while the query is empty. */
+        this.favorites = '[]';
         this.query = '';
         this.activeIndex = 0;
         this.handleInput = (e) => {
             this.query = e.target.value;
             this.activeIndex = 0;
+            this.coQueryChange.emit(this.query);
         };
         this.handleKeyDown = (e) => {
+            // Backspace with empty query → notify host to pop scope or last facet-chip
+            if (isEmptyBackspace(e.key, this.query)) {
+                e.preventDefault();
+                this.coBackspaceEmpty.emit(this.query);
+                return;
+            }
             const items = this.filteredItems;
             switch (e.key) {
                 case 'ArrowDown':
@@ -44,6 +121,14 @@ const CoCommandSearch = class {
                     e.preventDefault();
                     this.close();
                     break;
+                case 'Tab':
+                    e.preventDefault();
+                    if (items.length > 0) {
+                        this.activeIndex = e.shiftKey
+                            ? (this.activeIndex - 1 + items.length) % items.length
+                            : (this.activeIndex + 1) % items.length;
+                    }
+                    break;
             }
         };
         this.handleOverlayClick = () => {
@@ -68,10 +153,55 @@ const CoCommandSearch = class {
         return this.items;
     }
     get filteredItems() {
-        if (!this.query)
-            return this.parsedItems;
-        const q = this.query.toLowerCase();
-        return this.parsedItems.filter(item => item.label.toLowerCase().includes(q) || item.value.toLowerCase().includes(q));
+        return applyClientFilter(this.parsedItems, this.query, this.async);
+    }
+    get parsedChips() {
+        try {
+            const arr = typeof this.chips === 'string' ? JSON.parse(this.chips) : this.chips;
+            return Array.isArray(arr) ? arr : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedTabs() {
+        try {
+            const a = typeof this.tabs === 'string' ? JSON.parse(this.tabs) : this.tabs;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedFavorites() {
+        try {
+            const a = typeof this.favorites === 'string' ? JSON.parse(this.favorites) : this.favorites;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    /** Item label with the matched substring wrapped for highlighting. */
+    renderLabel(label) {
+        const seg = this.query ? normalizeText.highlightMatch(label, this.query) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, index.h("span", { class: "co-command-search__match" }, seg.match), seg.post];
+    }
+    onActiveTabChange(newVal) {
+        if (newVal) {
+            this.query = '';
+            this.activeIndex = 0;
+        }
+        // The active tab may be appended past the visible width (e.g. a model picked
+        // from "Más"). Scroll it into view; scroll-padding-right keeps it clear of the
+        // sticky "Más" chip.
+        requestAnimationFrame(() => {
+            var _a;
+            const active = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.co-command-search__tab[aria-selected="true"]');
+            active === null || active === void 0 ? void 0 : active.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+        });
     }
     onOpenChange(newVal) {
         if (newVal) {
@@ -80,7 +210,12 @@ const CoCommandSearch = class {
             requestAnimationFrame(() => { var _a; return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
     }
+    /** Two-stage commit: keepOpen items emit coScopeChange only; all others emit coSelect + close. */
     selectItem(item) {
+        if (shouldKeepOpen(item)) {
+            this.coScopeChange.emit(item.value);
+            return;
+        }
         this.coSelect.emit(item.value);
         this.close();
     }
@@ -91,17 +226,28 @@ const CoCommandSearch = class {
     render() {
         const items = this.filteredItems;
         return [
-            index.h("div", { key: '549e381da5563fabb3e6c178a626f594e5222cba', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, index.h("slot", { key: '868215f146f78217eada61b578dfd15d436c95db', name: "trigger" })),
-            index.h("co-overlay", { key: '1be4cfcf2847a71d7cd0c604f1cae069aa60f1a4', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '9f4de81a78ff1fbc947c375d36bd94d4ca22a75b', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, index.h("div", { key: 'b395211a8b62c4a902ff645b82676537ce0046ed', class: "co-command-search__input-row", part: "input-row" }, index.h("co-icon", { key: '642b29afe6f08e60ae33828db63ccf23b70f9fc5', name: "magnifying-glass", size: 20 }), index.h("input", { key: '6d4b6b07b0d44d4cfedfad5cd3bc1d638b9fe601', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input" }), index.h("span", { key: '048f07c5cf78eee445e2e8f49271a5024ffe83f6', class: "co-command-search__shortcut" }, "ESC")), index.h("div", { key: 'f0f7b6dccd1168ef8ce858f35d91089b51c65512', class: "co-command-search__results", part: "results" }, items.length > 0
-                ? items.map((item, index$1) => (index.h("div", { class: {
-                        'co-command-search__item': true,
-                        'co-command-search__item--active': index$1 === this.activeIndex,
-                    }, part: "item", onClick: () => this.selectItem(item), onMouseEnter: () => { this.activeIndex = index$1; } }, item.icon && index.h("co-icon", { name: item.icon, size: 18 }), index.h("span", { class: "co-command-search__item-label" }, item.label))))
-                : index.h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage)))),
+            index.h("div", { key: '7489dba63daa21b04e7fd12ba0923d3f5452a651', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, index.h("slot", { key: '86bacbf98e5c7b2079d0db46862c60ee4273756d', name: "trigger" })),
+            index.h("co-overlay", { key: 'e6406e9eb24dfff1f1a8b78267b84fb2e305b9bd', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '9cf1f70ac226d3802f3f1ffaf77d1633d7c24f2a', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, index.h("div", { key: 'a2508671dc39fb5e90455f9ee4391e52e7739a29', class: "co-command-search__input-row", part: "input-row" }, index.h("co-icon", { key: '37051efc28fc3412eb24b53cd4891b98a3b8c2cc', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (index.h("span", { class: "co-command-search__facet-chip" }, chip.icon && index.h("co-icon", { name: chip.icon, size: 12 }), index.h("span", { class: "co-command-search__facet-chip-label" }, chip.label), index.h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+                    e.stopPropagation();
+                    this.coChipRemove.emit(idx);
+                } }, index.h("co-icon", { name: "x", size: 10, weight: "bold" }))))), index.h("input", { key: '33f8024e71b902b954349b539dc8a6b1ea4e8a64', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (index.h("co-loader", { key: '46eae7fb379621808f0e7a78e3e15f2cf0742fa6', class: "co-command-search__loading", part: "loading", size: "sm" })), index.h("span", { key: '1505eaa1ccde46d28475b7ded587732a302dfef6', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (index.h("div", { key: '4557dc1c0f0f543238deeaf37731594064b7a946', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                const active = tab.value === this.activeTab;
+                return (index.h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
+            }), this.hasMore && (index.h("co-chip", { key: '9253d7fc43c7f320af6af274dce8eca6d8543186', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), index.h("div", { key: '5ae57716cf3337623c111d8b5f9fb941536324a6', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (index.h("div", { key: '7e11f7b777c590b0f728240e0fbea1808d0c07a5', class: "co-command-search__fav", part: "favorites" }, index.h("div", { key: '67e2ba4b3a500522c7d89429359d5bd947096d8d', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (index.h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, index.h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, index.h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), index.h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
+                ? groupItems(items).map(row => row.kind === 'header'
+                    ? index.h("div", { class: "co-command-search__section", part: "section", role: "presentation" }, row.label)
+                    : (index.h("div", { class: {
+                            'co-command-search__item': true,
+                            'co-command-search__item--active': row.index === this.activeIndex,
+                        }, part: "item", role: "option", id: 'co-cmd-opt-' + row.index, "aria-selected": row.index === this.activeIndex ? 'true' : 'false', onClick: () => this.selectItem(row.item), onMouseEnter: () => { this.activeIndex = row.index; } }, row.item.icon && index.h("co-icon", { name: row.item.icon, size: 18 }), index.h("span", { class: "co-command-search__item-text" }, index.h("span", { class: "co-command-search__item-label" }, this.renderLabel(row.item.label)), row.item.subtitle && (index.h("span", { class: "co-command-search__item-subtitle" }, row.item.subtitle))))))
+                : !this.loading && (index.h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage))))),
         ];
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "activeTab": [{
+                "onActiveTabChange": 0
+            }],
         "open": [{
                 "onOpenChange": 0
             }]

package/dist/cjs/co-data-table-pagination.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.js');
 
 const coDataTablePaginationCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-pagination{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-md) var(--co-spacing-lg);border-top:1px solid var(--co-color-opacity-negro-8);background:var(--co-color-base-blanco);font-size:var(--co-font-size-12);color:var(--co-semantic-text-secondary);letter-spacing:var(--co-font-letter-spacing-body);user-select:none}.co-pagination__section{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0}.co-pagination__spacer{flex:1}.co-pagination__label{color:var(--co-semantic-text-secondary);white-space:nowrap}.co-pagination__count{color:var(--co-semantic-text-secondary);white-space:nowrap}.co-pagination__jump-input{width:32px;height:28px;border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xxs);background:var(--co-color-base-blanco);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);text-align:center;padding:0 var(--co-spacing-xs);outline:none;transition:border-color 0.15s ease}.co-pagination__jump-input:focus{border-color:var(--co-color-primary-azul)}.co-pagination__section--page-size{position:relative}.co-pagination__page-size-trigger{display:flex;align-items:center;gap:var(--co-spacing-xs);cursor:pointer;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);transition:background-color 0.15s ease}.co-pagination__page-size-trigger:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-size-value{font-weight:500;color:var(--co-semantic-text-default)}.co-pagination__page-size-dropdown{position:absolute;bottom:calc(100% + 4px);left:0;min-width:72px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xs);box-shadow:0 4px 12px var(--co-color-opacity-negro-8);padding:var(--co-spacing-xs) 0;z-index:10}.co-pagination__page-size-option{display:block;width:100%;padding:var(--co-spacing-sm) var(--co-spacing-md);border:none;background:none;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background-color 0.1s ease}.co-pagination__page-size-option:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-size-option--active{font-weight:500;color:var(--co-color-primary-azul)}.co-pagination__nav{display:flex;align-items:center;gap:var(--co-spacing-xxs)}.co-pagination__nav-btn{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-xxs);background:var(--co-color-base-blanco);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);cursor:pointer;transition:background-color 0.15s ease;white-space:nowrap}.co-pagination__nav-btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-pagination__nav-btn:disabled{opacity:0.4;cursor:not-allowed}.co-pagination__page-btn{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--co-border-radius-xxs);background:none;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);color:var(--co-semantic-text-secondary);cursor:pointer;transition:background-color 0.1s ease}.co-pagination__page-btn:hover{background:var(--co-semantic-surface-hover)}.co-pagination__page-btn--active{background:var(--co-color-base-negro);color:var(--co-color-base-blanco);font-weight:500}.co-pagination__page-btn--active:hover{background:var(--co-color-base-negro)}.co-pagination__ellipsis{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;color:var(--co-color-gray-400)}`;
 
@@ -91,17 +91,17 @@ const CoDataTablePagination = class {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (index.h("div", { key: '2de92b803c40dcb254fbcdd56406319af502cfa8', class: "co-pagination", part: "pagination" }, index.h("div", { key: 'db02175a70f85fbf79689fca100b3c261e9c37a3', class: "co-pagination__section" }, index.h("span", { key: '83ccd386d1d1385bd2106b4443fd572b1eda021c', class: "co-pagination__label" }, this.jumpToPageLabel), index.h("input", { key: 'b2f723e6fc0eeeaeb4f6db431cf68bb941eb7538', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (index.h("div", { key: 'ae314d39c78125c7a0b237d30b6d298c5c699a75', class: "co-pagination", part: "pagination" }, index.h("div", { key: 'eff8732e235bfcbb6578a144377736f6a5c05d91', class: "co-pagination__section" }, index.h("span", { key: 'e4a5b980aaae92eec46b5e090e7b87745938fe81', class: "co-pagination__label" }, this.jumpToPageLabel), index.h("input", { key: '012b0613c8cfce667687ca27ad434b6271845900', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), index.h("div", { key: '977949923862d497b8de2d46dfda536d67b6f981', class: "co-pagination__section co-pagination__section--page-size" }, index.h("div", { key: 'c5f0467475206e731c6d429fb6cd80245b37ad74', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, index.h("span", { key: '08c37fe8cd7f9e9b13b3cfc4200096f51f19c916', class: "co-pagination__page-size-value" }, this.pageSize), index.h("span", { key: '117deb7ddce63482ff930341834ecbda51870c91', class: "co-pagination__label" }, this.perPageLabel), index.h("co-icon", { key: '2a9c4d04d50a60fa496429120d80e7f95c393164', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (index.h("div", { key: '548972a8057b098129693caac38d964221662b64', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (index.h("button", { class: {
+            }, part: "jump-input" })), index.h("div", { key: '76016cea5933b9b057256e4c54717925b95396e4', class: "co-pagination__section co-pagination__section--page-size" }, index.h("div", { key: 'ec1ac8b20b71a01483ef6f33170ccea9dc60baf2', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, index.h("span", { key: '3db2891ead65d088b2a9a19868c00576fc3d212b', class: "co-pagination__page-size-value" }, this.pageSize), index.h("span", { key: '2be8c9861d4509df5b695b5c07e25cc346b77628', class: "co-pagination__label" }, this.perPageLabel), index.h("co-icon", { key: '91ba0332b4eb496b3de3fe271d78686aad429d71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (index.h("div", { key: '4a7f2a17c52d71762c3a9b15e8ed55aa78b894a8', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (index.h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), index.h("div", { key: '595f8ef3df42c7a38bd2f59c3402bc99a9b23727', class: "co-pagination__spacer" }), index.h("div", { key: 'b2ffe70a449adf2ce1c5376447dddbdb8ef0f5b3', class: "co-pagination__section" }, index.h("span", { key: 'd6c3808153534e9bd58e51492ea03c55b7315a05', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), index.h("div", { key: 'ee2814865e862e9f99d829dcd7ec212774c8b5df', class: "co-pagination__section co-pagination__nav" }, index.h("button", { key: 'e991cf8e2a4907181e30dd7ce9f27bcc97325424', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (index.h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (index.h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), index.h("div", { key: 'e8e81ef1186485963908cd923fab0f5974e4cbf3', class: "co-pagination__spacer" }), index.h("div", { key: '04fd583b0fff46d13d8abe384cb7896d2c4b8799', class: "co-pagination__section" }, index.h("span", { key: '69bf9e0a8fd0e9f3b5fe06c9951300323fce42bf', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), index.h("div", { key: 'a90b8a8b5cdd5cfc945fb0fa00d50b44b4ab88b7', class: "co-pagination__section co-pagination__nav" }, index.h("button", { key: '6b14f2a16c691a202bf81cc1fff8f505f5ce0f29', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (index.h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (index.h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), index.h("button", { key: '8fe3515dccf9375904a5875f571948e1aacd86f7', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), index.h("button", { key: '9b3cdab026b566275248734a8db218d70a81b082', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get watchers() { return {
         "pageSizes": [{