@sky.ui/core 0.0.33 → 0.0.36

package/dist/sky-combobox/sky-combobox.d.ts

@@ -206,8 +206,11 @@ export declare class SkyCombobox extends FormControlBase {
     private iconLeftEls;
     private iconRightEls;
     private _searchDebounceId;
+    private _closeResetId;
     private static readonly _SEARCH_DEBOUNCE_MS;
     private static readonly _SEARCH_DEBOUNCE_OPTIONS_THRESHOLD;
+    /** Matches PopoverController exit animation so list stays visible while closing. */
+    private static readonly _CLOSE_RESET_MS;
     private dropdownPopover;
     private hiddenPopover;
     static styles: import("lit").CSSResult;

package/dist/sky-combobox/sky-combobox.js

@@ -1,4 +1,4 @@
-import{css as t,LitElement as e,html as i}from"lit";import{property as s,state as o,query as r,queryAll as a,queryAssignedElements as n,customElement as l}from"lit/decorators.js";import{unsafeHTML as h}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as d}from"lit/directives/repeat.js";import{classMap as p}from"lit/directives/class-map.js";import{resolveColor as y}from"../helper/utils/color-resolver.js";import{PopoverController as u}from"../helper/controllers/popover-controller.js";import{FormControlBase as v}from"../helper/internals/form-control-base.js";import{SkyIcon as m}from"../sky-icon/sky-icon.js";import{SkyCheckbox as g}from"../sky-checkbox/sky-checkbox.js";var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,k=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?b(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&f(e,i,r),r};let x=class extends v{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._searchDebounceId=null,this.dropdownPopover=new u(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(t,e)=>{this.open=t,t?(this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new u(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:t=>{this.hiddenChipsOpen=t,t&&this.open&&this.dropdownPopover.closePopover("api")}}),this.refreshOptionSlots=()=>{const t=new Set;this.querySelectorAll('[slot^="option-"]').forEach(e=>{const i=e.slot;i&&t.add(i)}),this.optionSlotSet=t},this.onSearchKeydown=t=>{const{key:e,shiftKey:i}=t;if("Enter"===e)return t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===e||"ArrowUp"===e||"Tab"===e){t.preventDefault(),t.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===e||"Tab"===e&&t.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===e?(t.preventDefault(),t.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const e=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:e},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(t){const e=this._options;this._options=Array.isArray(t)?t:[],this.requestUpdate("options",e)}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const t=new FormData;return this.selectedItems.forEach(e=>{const i=this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e));t.append(this.name,i)}),0===this.selectedItems.length&&this.required&&t.append(this.name,""),t}{if(0===this.selectedItems.length)return"";const t=this.selectedItems[0];return this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t))}}setValueFromFormState(t){if(null===t||""===t)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let e=[];if(t instanceof FormData)e=t.getAll(this.name);else if(Array.isArray(t))e=t;else if("string"==typeof t)try{const i=JSON.parse(t);e=Array.isArray(i)?i:[t]}catch{e=[t]}this.setValueFromArray(e)}else{let e="";"string"==typeof t?e=t:t instanceof FormData?e=t.get(this.name)?.toString()||"":Array.isArray(t)&&t.length>0&&(e=t[0].toString()),this.value=e,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const t=this.getFormValue();if(null!==t)if(this.multiSelect&&Array.isArray(t)){const e=new FormData;t.forEach(t=>{null!=t&&""!==t&&e.append(this.name,String(t))}),this.internals.setFormValue(e)}else this.internals.setFormValue(t);else this.internals.setFormValue(null)}setValueFromArray(t){const e=Array.isArray(this.options)?this.options:[];this.selectedItems=e.filter(e=>{const i=this.getOptionValue(e),s=this.emitFullObject?JSON.stringify(e):String(i);return t.some(t=>{const e=String(t);if(!this.emitFullObject)return e===s;try{const t=JSON.parse(e);return JSON.stringify(t)===s}catch{return e===s}})}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(t){this.disabled=t}onFormStateRestore(t){this.setValueFromFormState(t)}toggleSelectAll(){if(this.disabled||this.readonly)return;const t=t=>String(this.getOptionValue(t));if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(t=>String(this.getOptionValue(t.original)))),i=this.selectedItems.filter(i=>!e.has(t(i)));if(this.enforceMinOneSelection&&0===i.length)return;this.selectedItems=i}else{const e=new Set(this.selectedItems.map(e=>t(e))),i=this.filteredOptions.map(t=>t.original).filter(i=>!e.has(t(i)));this.selectedItems=[...this.selectedItems,...i]}const e=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;return this.filteredOptions.map(t=>this.getOptionValue(t.original)).every(t=>this.selectedItems.some(e=>this.getOptionValue(e)===t))}truncateText(t,e){return t.length>e?t.slice(0,e)+"...":t}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const t=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const t=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(t){super.focus(t),this.searchInputEl?this.searchInputEl.focus(t):this.inputWrapperEl&&this.inputWrapperEl.focus(t)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.focused=!1,this.validationActive&&this.validateInput()}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",y(this.color)),t.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(t){t.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),t.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),t.has("searchable")&&this.filterOptions(),t.has("searchQuery")&&this.filterOptions(),t.has("validationErrors")&&this.requestUpdate()}syncSelectedItemsWithValue(){const t=Array.isArray(this.options)?this.options:[],e=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||e)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const t=JSON.parse(this.value);Array.isArray(t)&&(this.value=t)}catch(t){}const i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)};if(this.multiSelect){const e=Array.isArray(this.value)?this.value:[this.value],s=new Set(e.map(t=>this.emitFullObject&&"object"==typeof t?JSON.stringify(t):String(t)));this.selectedItems=t.filter(t=>{const e=this.emitFullObject?JSON.stringify(t):i(t);return s.has(e)}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}else{const e=this.emitFullObject&&"object"==typeof this.value?JSON.stringify(this.value):String(this.value),s=t.find(t=>(this.emitFullObject?JSON.stringify(t):i(t))===e);this.selectedItems=s?[s]:[],this.value=s?this.emitFullObject?s:this.getOptionValue(s):""}}filterOptions(){const t=Array.isArray(this.options)?this.options:[],e=(t,e)=>{const i=this.getOptionLabel(t);return{original:t,_idx:e,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=t.map(e));const i=this.searchQuery.toLowerCase();this.filteredOptions=t.map(e).filter(t=>String(t.label).toLowerCase().includes(i)).map(t=>{const e=new RegExp(`(${i})`,"gi");return{...t,highlighted:String(t.label).replace(e,t=>`<span class="highlight">${t}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleInput(t){if(this.disabled||this.readonly)return;this.searchQuery=t.target.value;const e=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&e>x._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},x._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null)}handleClear(){if(this.disabled||this.readonly)return;const t=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&t||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(t){if(this.disabled||this.readonly)return;const e=t=>this.emitFullObject?t:this.getOptionValue(t),i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)},s=""!==this.searchQuery.trim();if(!this.multiSelect){const o=this.selectedItems.length&&i(this.selectedItems[0])===i(t);return o&&this.enforceMinOneSelection?void(this.open=!1):(o?(this.selectedItems=[],this.value=""):(this.selectedItems=[t],this.value=e(t)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(e),isFilteredSelection:s},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const o=this.selectedItems.findIndex(e=>i(e)===i(t));let r;r=o>-1?[...this.selectedItems.slice(0,o),...this.selectedItems.slice(o+1)]:[...this.selectedItems,t],this.enforceMinOneSelection&&0===r.length||(this.selectedItems=r,this.value=r.map(e),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:s},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(t){t.stopPropagation(),t.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return i`
+import{css as t,LitElement as e,html as i}from"lit";import{property as s,state as o,query as r,queryAll as a,queryAssignedElements as n,customElement as l}from"lit/decorators.js";import{unsafeHTML as h}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as d}from"lit/directives/repeat.js";import{classMap as p}from"lit/directives/class-map.js";import{resolveColor as y}from"../helper/utils/color-resolver.js";import{PopoverController as u}from"../helper/controllers/popover-controller.js";import{FormControlBase as v}from"../helper/internals/form-control-base.js";import{SkyIcon as m}from"../sky-icon/sky-icon.js";import{SkyCheckbox as g}from"../sky-checkbox/sky-checkbox.js";var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,k=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?b(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&f(e,i,r),r};let x=class extends v{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._searchDebounceId=null,this._closeResetId=null,this.dropdownPopover=new u(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(t,e)=>{this.open=t,t?(null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null),this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,null!=this._closeResetId&&clearTimeout(this._closeResetId),this._closeResetId=setTimeout(()=>{this._closeResetId=null,this.open||(this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions())},x._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new u(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:t=>{this.hiddenChipsOpen=t,t&&this.open&&this.dropdownPopover.closePopover("api")}}),this.refreshOptionSlots=()=>{const t=new Set;this.querySelectorAll('[slot^="option-"]').forEach(e=>{const i=e.slot;i&&t.add(i)}),this.optionSlotSet=t},this.onSearchKeydown=t=>{const{key:e,shiftKey:i}=t;if("Enter"===e)return t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===e||"ArrowUp"===e||"Tab"===e){t.preventDefault(),t.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===e||"Tab"===e&&t.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===e?(t.preventDefault(),t.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const e=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:e},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(t){const e=this._options;this._options=Array.isArray(t)?t:[],this.requestUpdate("options",e)}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const t=new FormData;return this.selectedItems.forEach(e=>{const i=this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e));t.append(this.name,i)}),0===this.selectedItems.length&&this.required&&t.append(this.name,""),t}{if(0===this.selectedItems.length)return"";const t=this.selectedItems[0];return this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t))}}setValueFromFormState(t){if(null===t||""===t)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let e=[];if(t instanceof FormData)e=t.getAll(this.name);else if(Array.isArray(t))e=t;else if("string"==typeof t)try{const i=JSON.parse(t);e=Array.isArray(i)?i:[t]}catch{e=[t]}this.setValueFromArray(e)}else{let e="";"string"==typeof t?e=t:t instanceof FormData?e=t.get(this.name)?.toString()||"":Array.isArray(t)&&t.length>0&&(e=t[0].toString()),this.value=e,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const t=this.getFormValue();if(null!==t)if(this.multiSelect&&Array.isArray(t)){const e=new FormData;t.forEach(t=>{null!=t&&""!==t&&e.append(this.name,String(t))}),this.internals.setFormValue(e)}else this.internals.setFormValue(t);else this.internals.setFormValue(null)}setValueFromArray(t){const e=Array.isArray(this.options)?this.options:[];this.selectedItems=e.filter(e=>{const i=this.getOptionValue(e),s=this.emitFullObject?JSON.stringify(e):String(i);return t.some(t=>{const e=String(t);if(!this.emitFullObject)return e===s;try{const t=JSON.parse(e);return JSON.stringify(t)===s}catch{return e===s}})}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(t){this.disabled=t}onFormStateRestore(t){this.setValueFromFormState(t)}toggleSelectAll(){if(this.disabled||this.readonly)return;const t=t=>String(this.getOptionValue(t));if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(t=>String(this.getOptionValue(t.original)))),i=this.selectedItems.filter(i=>!e.has(t(i)));if(this.enforceMinOneSelection&&0===i.length)return;this.selectedItems=i}else{const e=new Set(this.selectedItems.map(e=>t(e))),i=this.filteredOptions.map(t=>t.original).filter(i=>!e.has(t(i)));this.selectedItems=[...this.selectedItems,...i]}const e=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;return this.filteredOptions.map(t=>this.getOptionValue(t.original)).every(t=>this.selectedItems.some(e=>this.getOptionValue(e)===t))}truncateText(t,e){return t.length>e?t.slice(0,e)+"...":t}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const t=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const t=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(t){super.focus(t),this.searchInputEl?this.searchInputEl.focus(t):this.inputWrapperEl&&this.inputWrapperEl.focus(t)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.focused=!1,this.validationActive&&this.validateInput()}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",y(this.color)),t.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(t){t.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),t.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),t.has("searchable")&&this.filterOptions(),t.has("searchQuery")&&this.filterOptions(),t.has("validationErrors")&&this.requestUpdate()}syncSelectedItemsWithValue(){const t=Array.isArray(this.options)?this.options:[],e=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||e)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const t=JSON.parse(this.value);Array.isArray(t)&&(this.value=t)}catch(t){}const i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)};if(this.multiSelect){const e=Array.isArray(this.value)?this.value:[this.value],s=new Set(e.map(t=>this.emitFullObject&&"object"==typeof t?JSON.stringify(t):String(t)));this.selectedItems=t.filter(t=>{const e=this.emitFullObject?JSON.stringify(t):i(t);return s.has(e)}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}else{const e=this.emitFullObject&&"object"==typeof this.value?JSON.stringify(this.value):String(this.value),s=t.find(t=>(this.emitFullObject?JSON.stringify(t):i(t))===e);this.selectedItems=s?[s]:[],this.value=s?this.emitFullObject?s:this.getOptionValue(s):""}}filterOptions(){const t=Array.isArray(this.options)?this.options:[],e=(t,e)=>{const i=this.getOptionLabel(t);return{original:t,_idx:e,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=t.map(e));const i=this.searchQuery.toLowerCase();this.filteredOptions=t.map(e).filter(t=>String(t.label).toLowerCase().includes(i)).map(t=>{const e=new RegExp(`(${i})`,"gi");return{...t,highlighted:String(t.label).replace(e,t=>`<span class="highlight">${t}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleInput(t){if(this.disabled||this.readonly)return;this.searchQuery=t.target.value;const e=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&e>x._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},x._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null),null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null)}handleClear(){if(this.disabled||this.readonly)return;const t=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&t||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(t){if(this.disabled||this.readonly)return;const e=t=>this.emitFullObject?t:this.getOptionValue(t),i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)},s=""!==this.searchQuery.trim();if(!this.multiSelect){const o=this.selectedItems.length&&i(this.selectedItems[0])===i(t);return o&&this.enforceMinOneSelection?void(this.open=!1):(o?(this.selectedItems=[],this.value=""):(this.selectedItems=[t],this.value=e(t)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(e),isFilteredSelection:s},bubbles:!0,composed:!0})),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const o=this.selectedItems.findIndex(e=>i(e)===i(t));let r;r=o>-1?[...this.selectedItems.slice(0,o),...this.selectedItems.slice(o+1)]:[...this.selectedItems,t],this.enforceMinOneSelection&&0===r.length||(this.selectedItems=r,this.value=r.map(e),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:s},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(t){t.stopPropagation(),t.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return i`
     <div
       class="hidden-chips-dropdown"
       part="hidden-chips-dropdown"
@@ -60,7 +60,7 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
               + ${e}
             </span>
           `)}
-    `}handleKeydown(t){if(t.target?.closest(".search-container"))return;const{key:e,shiftKey:i}=t;if(!this.open&&("ArrowDown"===e||"ArrowUp"===e||"Enter"===e))return this.dropdownPopover.openPopover(),void t.preventDefault();if(!this.open)return;const s=this.searchable||this.addOption,o=this.multiSelect&&this.selectAll?s?1:0:this.headerRows,r=this.headerRows+Math.max(0,this.filteredOptions.length)-1;if(this.activeIndex<o&&(this.activeIndex=o),"ArrowDown"===e){const e=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=e>=r?o:e+1,this.scrollActiveItemIntoView(),void t.preventDefault()}if("ArrowUp"===e){const e=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=e<=o?r:e-1,this.scrollActiveItemIntoView(),void t.preventDefault()}if("Tab"===e){if(i){const t=this.activeIndex<o?o:this.activeIndex;this.activeIndex=t<=o?r:t-1}else{const t=this.activeIndex<o?o:this.activeIndex;this.activeIndex=t>=r?o:t+1}return this.scrollActiveItemIntoView(),void t.preventDefault()}return"Enter"===e?(t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter()):this.readonly?void("Escape"===e&&(this.open=!1,t.preventDefault())):"Home"===e?(this.activeIndex=o,this.scrollActiveItemIntoView(),void t.preventDefault()):"End"===e?(this.activeIndex=Math.max(o,r),this.scrollActiveItemIntoView(),void t.preventDefault()):void 0}get headerRows(){let t=0;return(this.searchable||this.addOption)&&(t+=1),this.multiSelect&&this.selectAll&&(t+=1),t}getOptionByActiveIndex(){if(!this.open)return null;const t=this.activeIndex;if(t<0)return null;if((this.searchable||this.addOption)&&0===t)return{kind:"search"};const e=this.searchable||this.addOption?1:0;if(this.multiSelect&&this.selectAll&&t===e)return{kind:"select-all"};const i=t-this.headerRows;return i>=0&&i<this.filteredOptions.length?{kind:"option",optionIndex:i}:null}commitDropdownEnter(){const t=this.getOptionByActiveIndex();if(t)if("search"!==t.kind)if("select-all"!==t.kind){if("option"===t.kind&&"number"==typeof t.optionIndex){const e=this.filteredOptions[t.optionIndex].original;this.selectOption(e),this.searchQuery="",this.emitSearchQueryChanged()}}else this.toggleSelectAll();else this.addOption&&this.canAddaddOption()?(this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:this.searchQuery.trim()},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()):this.filteredOptions.length>0&&(this.selectOption(this.filteredOptions[0].original),this.searchQuery="",this.emitSearchQueryChanged())}focusOnOpen(){const t=this.searchInputEl;if(t)return document.activeElement!==t&&requestAnimationFrame(()=>t.focus()),this.activeIndex=0,void this.scrollActiveItemIntoView();let e=0;if(this.selectedItems.length>0){const t=this.getOptionValue(this.selectedItems[0]),i=this.filteredOptions.findIndex(e=>this.getOptionValue(e.original)===t);i>=0&&(e=i)}this.activeIndex=this.headerRows+e,this.scrollActiveItemIntoView()}canAddaddOption(){if(!this.addOption)return!1;const t=this.searchQuery.trim();if(!t)return!1;return!(Array.isArray(this.options)?this.options:[]).some(e=>{const i=String(this.getOptionLabel(e)||"").toLowerCase(),s=(this.getOptionValue(e)??"").toString().toLowerCase();return i===t.toLowerCase()||s===t.toLowerCase()})}scrollActiveItemIntoView(){const t=Array.from(this.rowEls).find(t=>Number(t.dataset.rowIndex)===this.activeIndex);t?.scrollIntoView({block:"nearest",behavior:"smooth"})}toggleDropdown(t){t.stopPropagation(),this.disabled||this.readonly||(this.hiddenChipsOpen&&this.hiddenPopover.closePopover("api"),this.validationActive=!0,this.dropdownPopover.toggle())}renderDropdown(){return i`
+    `}handleKeydown(t){if(t.target?.closest(".search-container"))return;const{key:e,shiftKey:i}=t;if(!this.open&&("ArrowDown"===e||"ArrowUp"===e||"Enter"===e))return this.dropdownPopover.openPopover(),void t.preventDefault();if(!this.open)return;const s=this.searchable||this.addOption,o=this.multiSelect&&this.selectAll?s?1:0:this.headerRows,r=this.headerRows+Math.max(0,this.filteredOptions.length)-1;if(this.activeIndex<o&&(this.activeIndex=o),"ArrowDown"===e){const e=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=e>=r?o:e+1,this.scrollActiveItemIntoView(),void t.preventDefault()}if("ArrowUp"===e){const e=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=e<=o?r:e-1,this.scrollActiveItemIntoView(),void t.preventDefault()}if("Tab"===e){if(i){const t=this.activeIndex<o?o:this.activeIndex;this.activeIndex=t<=o?r:t-1}else{const t=this.activeIndex<o?o:this.activeIndex;this.activeIndex=t>=r?o:t+1}return this.scrollActiveItemIntoView(),void t.preventDefault()}return"Enter"===e?(t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter()):this.readonly?void("Escape"===e&&(this.open=!1,t.preventDefault())):"Home"===e?(this.activeIndex=o,this.scrollActiveItemIntoView(),void t.preventDefault()):"End"===e?(this.activeIndex=Math.max(o,r),this.scrollActiveItemIntoView(),void t.preventDefault()):void 0}get headerRows(){let t=0;return(this.searchable||this.addOption)&&(t+=1),this.multiSelect&&this.selectAll&&(t+=1),t}getOptionByActiveIndex(){if(!this.open)return null;const t=this.activeIndex;if(t<0)return null;if((this.searchable||this.addOption)&&0===t)return{kind:"search"};const e=this.searchable||this.addOption?1:0;if(this.multiSelect&&this.selectAll&&t===e)return{kind:"select-all"};const i=t-this.headerRows;return i>=0&&i<this.filteredOptions.length?{kind:"option",optionIndex:i}:null}commitDropdownEnter(){const t=this.getOptionByActiveIndex();if(t)if("search"!==t.kind)if("select-all"!==t.kind){if("option"===t.kind&&"number"==typeof t.optionIndex){const e=this.filteredOptions[t.optionIndex].original;this.selectOption(e)}}else this.toggleSelectAll();else this.addOption&&this.canAddaddOption()?(this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:this.searchQuery.trim()},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()):this.filteredOptions.length>0&&this.selectOption(this.filteredOptions[0].original)}focusOnOpen(){const t=this.searchInputEl;if(t)return document.activeElement!==t&&requestAnimationFrame(()=>t.focus()),this.activeIndex=0,void this.scrollActiveItemIntoView();let e=0;if(this.selectedItems.length>0){const t=this.getOptionValue(this.selectedItems[0]),i=this.filteredOptions.findIndex(e=>this.getOptionValue(e.original)===t);i>=0&&(e=i)}this.activeIndex=this.headerRows+e,this.scrollActiveItemIntoView()}canAddaddOption(){if(!this.addOption)return!1;const t=this.searchQuery.trim();if(!t)return!1;return!(Array.isArray(this.options)?this.options:[]).some(e=>{const i=String(this.getOptionLabel(e)||"").toLowerCase(),s=(this.getOptionValue(e)??"").toString().toLowerCase();return i===t.toLowerCase()||s===t.toLowerCase()})}scrollActiveItemIntoView(){const t=Array.from(this.rowEls).find(t=>Number(t.dataset.rowIndex)===this.activeIndex);t?.scrollIntoView({block:"nearest",behavior:"smooth"})}toggleDropdown(t){t.stopPropagation(),this.disabled||this.readonly||(this.hiddenChipsOpen&&this.hiddenPopover.closePopover("api"),this.validationActive=!0,this.dropdownPopover.toggle())}renderDropdown(){return i`
     <div
       class="dropdown"
       part="dropdown"
@@ -110,7 +110,6 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
           `)}
 
 <div class="dropdown-scroller">
-          ${c(this.open,()=>i`
           ${c(this.multiSelect&&this.selectAll&&this.filteredOptions.length,()=>{const t=this.searchable||this.addOption?1:0,e=p({"dropdown-item":!0,active:this.activeIndex===t,selected:this.isAllFilteredSelected()});return i`
                 <div
                   class=${e}
@@ -162,7 +161,6 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
               >
                 No options found
               </div>`)}
-          `)}
       </div>
     </div>
   `}getOptionValue(t){return this.emitFullObject?t:"object"==typeof t&&null!==t?this.emittedKey in t?t[this.emittedKey]:"value"in t?t.value:t:t}getOptionLabel(t){if(!t)return"";if(!Array.isArray(this.options)||this.options,this.displayKey&&"object"==typeof t&&t[this.displayKey])return String(t[this.displayKey]);if("object"==typeof t){const e=Object.values(t).filter(t=>"string"==typeof t);return e.length>0?e[0]:JSON.stringify(t)}return String(t)}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const t=this.getErrorMessages();if(!t.length)return null;const e=`${this.id||"sky-combobox"}-errors`;return i`
@@ -240,7 +238,7 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
         ${this.renderValidationErrors()}
         <slot style="display:none" @slotchange=${this.refreshOptionSlots}></slot>
       </div>
-    `}};x.dependencies={"sky-icon":m,"sky-checkbox":g},x._SEARCH_DEBOUNCE_MS=150,x._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,x.styles=t`
+    `}};x.dependencies={"sky-icon":m,"sky-checkbox":g},x._SEARCH_DEBOUNCE_MS=150,x._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,x._CLOSE_RESET_MS=250,x.styles=t`
     :host {
       display: block;
       font-family: var(--sky-font);