@prolibu-suite/cobalt-core 0.1.2 → 0.2.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-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.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: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--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__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}.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)')}`;
 
 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: '321b5eaa234f7beff8a8ee692783b7b4b1836cf9', 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: '8249758858a3df01b75aba4e15dd330b6267954c', class: "co-combobox__labels" }, this.label && index.h("label", { key: '118174e83d0b93879efc0804197e1751556ea8c6', class: "co-combobox__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'bf5acbcacd3466f6c104671347af57949fc6dc0a', required: this.required })), this.secondaryLabel && (index.h("span", { key: 'dc0c26636209f9f092d773476a3edc9ea9e19414', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: 'e42a22d9ed6aeb0951221d38ba7a052073602063', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '34c4f4c3c573e6a4ff3310eac46c1878d9b6af71', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (index.h("co-icon", { key: '47940335029da3a40292d4de5f5582dbf7873238', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), index.h("div", { key: '47e87dcde91566a2f4ecb54ef1af70f8b60e3044', 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: 'fda02e6a0dbbd57fd40370b55172ab886ab4c758', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (index.h("button", { key: '5c62b271fd8b3bef832a568646b787c491acd356', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, index.h("co-icon", { key: '1ced712e669917dc2283bf2d1022c83e73179c65', name: "x-circle", size: 16, weight: "fill" }))), index.h("co-icon", { key: 'b6cac2f10d82878c5cb7f770f079bd6c1095dde2', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), index.h("div", { key: '5191223b7f9851ee2af96e6455b0b4d20f5425ad', class: "co-combobox__dropdown", part: "dropdown" }, this.searchable && (index.h("div", { key: 'a69808aee8fc79aca8c208e18a2aa52e14a324a8', class: "co-combobox__search", part: "search" }, index.h("co-icon", { key: '5325687113fee74658513b427d073e972029bf3e', name: "magnifying-glass", size: 16, class: "co-combobox__search-icon" }), index.h("input", { key: '5d6c81c825f1c4f3bb191d92ba77f7a0ac57dfcf', class: "co-combobox__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, part: "search-input" }))), index.h("div", { key: '9f2a901c16b799009072dc2f0bd0ca00bd37bd39', 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("div", { key: 'dcbdadcac614ad0353deabfa162caf2bb4d6a78b', class: "co-combobox__footer", part: "footer" }, index.h("button", { key: '58e612399b71a275a36de3bb4399fc7129055fd4', class: "co-combobox__footer-btn co-combobox__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, index.h("co-icon", { key: 'df2b0e268425e0c58caff3afa8fbe7a8432de254', name: "plus", size: 16 }), index.h("span", { key: '7693a04b6c169b8ff328ff13f6a08504c81ec5a3' }, this.footerSecondaryLabel)), index.h("button", { key: '76958fdbf1f1f612d99f039f269e41be229cbe51', class: "co-combobox__footer-btn co-combobox__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, index.h("co-icon", { key: '5ad00679c8390061140d85e852f31b59ea312b08', name: "plus", size: 16 }), index.h("span", { key: '42e02f75d57fbe5cf16936b330cf53991047256a' }, this.footerPrimaryLabel)))))), this.helperText && (index.h("div", { key: '0d1afe7bbb9bd678c7918bfb7e14c3b5df7afacb', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && index.h("co-icon", { key: 'f89aa1659f328d016ea2e787423db4de3bd158c9', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), index.h("span", { key: '33ce544bf337562ed4b5d94cdaa03346f2a9b405', 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,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.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)}`;
+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__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)}`;
 
 const CoCommandSearch = class {
     constructor(hostRef) {
@@ -70,8 +71,14 @@ const CoCommandSearch = class {
     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 normalizeText.rankByMatch(this.parsedItems, this.query, item => [item.label, item.value]);
+    }
+    /** 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];
     }
     onOpenChange(newVal) {
         if (newVal) {
@@ -91,12 +98,12 @@ 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
+            index.h("div", { key: 'a837e25103bc4d0b5f12510394e6faa7a10cfed0', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, index.h("slot", { key: '68ce8b285bb6d340514c3f94e893a660e82cfd11', name: "trigger" })),
+            index.h("co-overlay", { key: '6e1ab3f12cc2990925f3de792f8a9147e03a9344', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: 'addbcba32e1a93816430a469bb656d73e1d9c720', 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: '26d15f5ce055af014fc10bd653a0e60bd76b1b6a', class: "co-command-search__input-row", part: "input-row" }, index.h("co-icon", { key: '8a28ed2a0a5d006756666c21bc065fdee66bf075', name: "magnifying-glass", size: 20 }), index.h("input", { key: 'd29e28125dbb19d7f5e037f0f222bbd29e99b290', 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: '73472a3e802a00e7a9a93fd567501a7105c936c1', class: "co-command-search__shortcut" }, "ESC")), index.h("div", { key: '3f70472cb5821c8d5a16fc9d3887d6f2920f3d89', 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))))
+                    }, 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" }, this.renderLabel(item.label)))))
                 : index.h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage)))),
         ];
     }

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-DoFnrUVH.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: '4b7d41e571e1c8a6e353b413b5e790b48ea37995', class: "co-pagination", part: "pagination" }, index.h("div", { key: '8a0dedd2ea3b54dd19d2286c5e114fe61f732278', class: "co-pagination__section" }, index.h("span", { key: 'e4629e6610c5d4e9b1d1cfb24b5edf0e2703c80e', class: "co-pagination__label" }, this.jumpToPageLabel), index.h("input", { key: 'fd25c034fdd8c05bf665c6aeffa9686a32573bd9', 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: '4ddc38a6e5817cb1f516b35dd07e46d811a2006b', class: "co-pagination__section co-pagination__section--page-size" }, index.h("div", { key: 'b4aca717ecd742f1dcb60da8ec64bc194d7cd47b', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, index.h("span", { key: '53169bfff85ffe4a97fb8ce369f3be9ecc163725', class: "co-pagination__page-size-value" }, this.pageSize), index.h("span", { key: '01b9e912b864fd989548b03ae8119ada87e6de49', class: "co-pagination__label" }, this.perPageLabel), index.h("co-icon", { key: 'a56598b548e6635296886750354c315b12fbe2d8', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (index.h("div", { key: '093a6b2c02f2c7309a14b9b3c7d44e4801643d32', 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: 'b2c6703a5cb87eba43264acd998e837eebbff342', class: "co-pagination__spacer" }), index.h("div", { key: 'a48a4bdf1cc1ee9dc80901504c11741589a9ebc3', class: "co-pagination__section" }, index.h("span", { key: '1c7cb0c55a537530d4322a1e7b452c810f32ea94', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), index.h("div", { key: '60b13b593caf9b08396dd30ac1b9e513ec6a3197', class: "co-pagination__section co-pagination__nav" }, index.h("button", { key: '125da6a4b3e175fc7651d25ee020316f6d64e3d6', 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: '068e6184593877f651a41573d8aa456f9ef2ef49', 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": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
-const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;padding:var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background:var(--co-semantic-surface-hover)}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:var(--co-spacing-md);text-align:center}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{padding:var(--co-spacing-md);background:inherit;border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);vertical-align:middle;font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-sm)}.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-16);font-weight:600;color:var(--co-semantic-text-default);letter-spacing:-0.03em;margin:0}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:360px}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:var(--co-color-gray-100);animation:co-dt-shimmer 1.5s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%,100%{opacity:1}50%{opacity:0.4}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
+const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;padding:var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background:var(--co-semantic-surface-hover)}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:var(--co-spacing-md);text-align:center}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{padding:var(--co-spacing-xs);background:inherit;border-bottom:1px solid var(--co-color-opacity-negro-8);border-right:1px solid var(--co-color-opacity-negro-8);vertical-align:middle;font-size:var(--co-font-size-12);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-sm)}.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-16);font-weight:600;color:var(--co-semantic-text-default);letter-spacing:-0.03em;margin:0}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:360px}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:var(--co-color-gray-100);animation:co-dt-shimmer 1.5s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%,100%{opacity:1}50%{opacity:0.4}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
 
 const CoDataTable = class {
     constructor(hostRef) {
@@ -53,6 +53,10 @@ const CoDataTable = class {
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
+        // Swallows the click the browser synthesizes right after a resize drag ends.
+        // The resize handle lives inside the sortable <th>, so without this a resize
+        // would bubble to the header's onClick and trigger a sort (+ a full refetch).
+        this.suppressNextSort = false;
     }
     /* ─── WATCHERS ──────────────────────────────────────────── */
     parseColumns() {
@@ -94,6 +98,11 @@ const CoDataTable = class {
     }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
+        // Ignore the click synthesized by a resize drag that ended on this <th>.
+        if (this.suppressNextSort) {
+            this.suppressNextSort = false;
+            return;
+        }
         let order;
         if (this.sortField === field) {
             order = this.sortOrder === 'asc' ? 'desc' : 'asc';
@@ -148,6 +157,9 @@ const CoDataTable = class {
             if (this.resizingColumn) {
                 const width = this.columnWidths.get(this.resizingColumn) || 150;
                 this.coColumnResize.emit({ field: this.resizingColumn, width });
+                // The browser will synthesize a click on the <th> when the drag ends
+                // inside it — suppress the sort it would otherwise trigger.
+                this.suppressNextSort = true;
             }
             this.resizingColumn = null;
             document.removeEventListener('mousemove', onMouseMove);
@@ -255,7 +267,7 @@ const CoDataTable = class {
             } }, index.h("co-icon", { name: "caret-up-down", size: 16, weight: this.sortField === col.field ? 'fill' : 'regular' })))), this.resizable && i < this.parsedColumns.length - 1 && (index.h("span", { class: {
                 'co-data-table__resize-handle': true,
                 'co-data-table__resize-handle--active': this.resizingColumn === col.field,
-            }, onMouseDown: (e) => this.handleResizeStart(col.field, e) }))))))));
+            }, onMouseDown: (e) => this.handleResizeStart(col.field, e), onClick: (e) => e.stopPropagation() }))))))));
     }
     renderBody() {
         if (this.loading) {
@@ -275,12 +287,12 @@ const CoDataTable = class {
         return (index.h("div", { class: "co-data-table__empty", part: "empty" }, index.h("div", { class: "co-data-table__empty-icon" }, index.h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (index.h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (index.h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), index.h("div", { class: "co-data-table__empty-action" }, index.h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (index.h("div", { key: '98c9ac2234b00d8c69095f9d9bcd4633d79265a8', class: {
+        return (index.h("div", { key: 'a5c4cb6afafe73264b5b6643c762867a449bcf1f', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, index.h("div", { key: '0e40f9c3b536d58cabe9e61d2beb425337e3391a', class: "co-data-table__scroll" }, index.h("table", { key: '96ee1fce70ab168c2ba40b6e748c0c11cbcccd89', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
+            } }, index.h("div", { key: '22f664b7c45ab3882665c45bb398f7e41bad331d', class: "co-data-table__scroll" }, index.h("table", { key: '6cc6e81e405f4d560800aa983b193902eb8ecb5c', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-date-picker.cjs.entry.js

@@ -0,0 +1,177 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.js');
+var dateI18n = require('./dateI18n-BdiNAl0_.js');
+
+const coDatePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-date-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-picker__label{padding:0 var(--co-spacing-xs);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-date-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-picker co-popover{display:block;width:100%}.co-date-picker__trigger{display:block;width:100%;cursor:text}.co-date-picker__panel{padding:var(--co-spacing-md)}.co-date-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}:host([layout='horizontal']) .co-date-picker{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-date-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-picker>:not(.co-date-picker__label){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 CoDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coInput = index.createEvent(this, "coInput", 7);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coInvalid = index.createEvent(this, "coInvalid", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        this.coFocus = index.createEvent(this, "coFocus", 7);
+        this.coBlur = index.createEvent(this, "coBlur", 7);
+        this.coOpen = index.createEvent(this, "coOpen", 3);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        /** Committed value, "YYYY-MM-DD" or null. */
+        this.value = null;
+        this.locale = 'es-CO';
+        this.displayFormat = 'd MMM yyyy';
+        this.firstDayOfWeek = 1;
+        /** Field size, forwarded to the inner co-date-field. */
+        this.size = 'md';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Popover placement relative to the field. */
+        this.placement = 'bottom-start';
+        /** Close the popover when a day is selected. */
+        this.closeOnSelect = true;
+        /** Whether the calendar popover is open. */
+        this.open = false;
+        /** Max viewport width (px) that renders the calendar as a bottom sheet. */
+        this.mobileBreakpoint = 600;
+        /** True when the viewport is at/under `mobileBreakpoint`. */
+        this.isMobile = false;
+        this.internalInvalid = false;
+        this.pendingFocusGrid = false;
+        this.pendingFocusField = false;
+        this.mqlHandler = (e) => {
+            this.isMobile = e.matches;
+        };
+        // ── Field events ───────────────────────────────────────────
+        this.onFieldChange = (e) => {
+            this.value = e.detail;
+            this.internalInvalid = false;
+            this.coChange.emit(e.detail);
+        };
+        this.onFieldInput = (e) => {
+            this.coInput.emit(e.detail);
+        };
+        this.onFieldInvalid = (e) => {
+            this.internalInvalid = true;
+            this.coInvalid.emit(e.detail);
+        };
+        this.onFieldClear = () => {
+            this.value = null;
+            this.internalInvalid = false;
+            this.coClear.emit();
+        };
+        this.onFieldKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.open)
+                    this.setOpen(true);
+                this.pendingFocusGrid = true;
+                // If already open and rendered, focus immediately; otherwise after render.
+                if (this.calendarEl)
+                    this.focusGridSoon();
+            }
+        };
+        // ── Calendar events ────────────────────────────────────────
+        this.onCalendarSelect = (e) => {
+            this.value = e.detail;
+            this.internalInvalid = false;
+            this.coChange.emit(e.detail);
+            if (this.closeOnSelect) {
+                this.setOpen(false);
+                this.pendingFocusField = true;
+            }
+        };
+        // ── Popover lifecycle ──────────────────────────────────────
+        this.onPopoverOpen = () => {
+            // co-popover toggled open via the trigger click. Sync state + emit, but keep
+            // focus in the input so the user can type; ArrowDown enters the grid.
+            if (!this.open) {
+                this.open = true;
+                this.coOpen.emit();
+            }
+        };
+        this.onPopoverClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.coClose.emit();
+            }
+        };
+        // ── Escape (owned here for focus return) ───────────────────
+        this.onRootKeyDown = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.stopPropagation();
+                this.setOpen(false);
+                this.pendingFocusField = true;
+            }
+        };
+    }
+    connectedCallback() {
+        this.mql = window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`);
+        this.isMobile = this.mql.matches;
+        this.mql.addEventListener('change', this.mqlHandler);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mqlHandler);
+    }
+    get isInvalid() {
+        return this.invalid || this.internalInvalid;
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        if (next)
+            this.coOpen.emit();
+        else
+            this.coClose.emit();
+    }
+    focusGridSoon() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.calendarEl) === null || _a === void 0 ? void 0 : _a.focusGrid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (this.pendingFocusGrid && this.open && this.calendarEl) {
+            this.pendingFocusGrid = false;
+            this.focusGridSoon();
+        }
+        if (this.pendingFocusField) {
+            this.pendingFocusField = false;
+            (_b = (_a = this.fieldEl) === null || _a === void 0 ? void 0 : _a.focusInput) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    }
+    renderField() {
+        return (index.h("co-date-field", { ref: (el) => (this.fieldEl = el), value: this.value, min: this.min, max: this.max, disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, displayFormat: this.displayFormat, placeholder: this.placeholder, size: this.size, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, clearable: this.clearable, invalid: this.isInvalid, onCoChange: this.onFieldChange, onCoInput: this.onFieldInput, onCoInvalid: this.onFieldInvalid, onCoClear: this.onFieldClear, onCoFocus: () => this.coFocus.emit(), onCoBlur: () => this.coBlur.emit() }));
+    }
+    renderCalendar(touch) {
+        return (index.h("co-calendar", { ref: (el) => (this.calendarEl = el), "data-touch": touch ? '' : undefined, value: this.value, min: this.min, max: this.max, disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, onCoSelect: this.onCalendarSelect }));
+    }
+    renderHelper() {
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        if (!helper)
+            return null;
+        return (index.h("div", { class: {
+                'co-date-picker__helper': true,
+                'co-date-picker__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && index.h("co-icon", { name: "warning-circle", size: 14 }), index.h("span", null, helper)));
+    }
+    render() {
+        if (this.isMobile) {
+            const t = dateI18n.getDateStrings(this.locale);
+            return (index.h("div", { class: "co-date-picker co-date-picker--mobile", onKeyDown: this.onRootKeyDown }, this.label && index.h("label", { class: "co-date-picker__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), index.h("div", { class: "co-date-picker__trigger", onClick: () => !this.disabled && this.setOpen(true) }, this.renderField()), index.h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDate, onCoClose: () => this.setOpen(false) }, index.h("div", { class: "co-date-picker__sheet" }, this.renderCalendar(true))), this.renderHelper()));
+        }
+        return (index.h("div", { class: "co-date-picker", onKeyDown: this.onRootKeyDown }, this.label && index.h("label", { class: "co-date-picker__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), index.h("co-popover", { open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, index.h("div", { slot: "trigger", class: "co-date-picker__trigger", onKeyDown: this.onFieldKeyDown }, this.renderField()), this.open && index.h("div", { class: "co-date-picker__panel" }, this.renderCalendar(false))), this.renderHelper()));
+    }
+    get el() { return index.getElement(this); }
+};
+CoDatePicker.style = coDatePickerCss();
+
+exports.co_date_picker = CoDatePicker;