@sky.ui/core 0.0.38 → 0.0.40

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

@@ -1,79 +1,96 @@
-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`
-    <div
-      class="hidden-chips-dropdown"
-      part="hidden-chips-dropdown"
-      popover="manual"
- @toggle=${this.hiddenPopover.onToggle}
-      @click=${t=>t.stopPropagation()}
-      style="
+import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";import{property as r,state as n,query as a,queryAll as l,queryAssignedElements as h,customElement as d}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as u}from"lit/directives/repeat.js";import{classMap as y}from"lit/directives/class-map.js";import{resolveColor as v}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as m}from"../helper/utils/contrast-color.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{FormControlBase as f}from"../helper/internals/form-control-base.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{SkyCheckbox as k}from"../sky-checkbox/sky-checkbox.js";var w=Object.defineProperty,x=Object.getOwnPropertyDescriptor,I=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?x(e,i):e,n=t.length-1;n>=0;n--)(o=t[n])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&w(e,i,r),r};let S=class extends f{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.multiDisplay="chips",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 g(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.focused=!0,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())},S._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new g(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.open||(this.focused=!1,this.validationActive&&this.validateInput())}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",v(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>S._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},S._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 s`
+      <div
+        class="hidden-chips-dropdown"
+        part="hidden-chips-dropdown"
+        popover="manual"
+        @toggle=${this.hiddenPopover.onToggle}
+        @click=${t=>t.stopPropagation()}
+        style="
         left: var(--sky-hc-left, 0px);
         top: var(--sky-hc-top, 0px);
         width: var(--sky-hc-width, max-content);
         z-index: ${this.zIndex};
       "
-    >
-      ${d(this.selectedItems.slice(this.visibleChips),t=>String(this.getOptionValue(t)),t=>i`
-          <div class="hidden-chip-inner" part="hidden-chip-inner">
-            <span part="hidden-chip-label">
-              ${this.truncateText(String(this.getOptionLabel(t)),this.chipSize)}
-            </span>
-            <sky-icon
-              part="remove-chip-icon"
-              class="remove-chip-inner"
-              icon="ion:close"
-              @click=${e=>{e.stopPropagation(),this.removeChip(t)}}
-            ></sky-icon>
-          </div>
-        `)}
-    </div>
-  `}removeChip(t){if(this.disabled||this.readonly)return;const e=t=>String(this.getOptionValue(t)),i=this.selectedItems.filter(i=>e(i)!==e(t));if(!this.enforceMinOneSelection||0!==i.length){if(this.selectedItems=i,this.selectedItems.length<=this.visibleChips&&this.hiddenPopover.closePopover("api"),this.multiSelect){const t=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=t,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t,selectedItems:[...this.selectedItems],emittedValues:t,isFilteredSelection:!1},bubbles:!0,composed:!0}))}else this.value="",this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0}));this.syncFormValue(),this.syncValidity(),this.validateInput(),this.requestUpdate()}}renderChips(){if(!this.multiSelect&&this.selectedItems.length)return i`
-        <span class="chip" single-select part="single-select-chip">
-          <span class="chip-label" part="chip-label"
-            >${this.getOptionLabel(this.selectedItems[0])}</span
-          >
-        </span>
-      `;const t=Array.isArray(this.selectedItems)?this.selectedItems.slice(0,this.visibleChips):[],e=this.selectedItems.length-this.visibleChips;return i`
-      ${d(t,t=>String(this.getOptionValue(t)),t=>i`
+      >
+        ${u(this.selectedItems.slice(this.visibleChips),t=>String(this.getOptionValue(t)),t=>s`
+            <div class="hidden-chip-inner" part="hidden-chip-inner">
+              <span part="hidden-chip-label">
+                ${this.truncateText(String(this.getOptionLabel(t)),this.chipSize)}
+              </span>
+              <sky-icon
+                part="remove-chip-icon"
+                class="remove-chip-inner"
+                icon="ion:close"
+                @click=${e=>{e.stopPropagation(),this.removeChip(t)}}
+              ></sky-icon>
+            </div>
+          `)}
+      </div>
+    `}removeChip(t){if(this.disabled||this.readonly)return;const e=t=>String(this.getOptionValue(t)),i=this.selectedItems.filter(i=>e(i)!==e(t));if(!this.enforceMinOneSelection||0!==i.length){if(this.selectedItems=i,this.selectedItems.length<=this.visibleChips&&this.hiddenPopover.closePopover("api"),this.multiSelect){const t=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=t,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t,selectedItems:[...this.selectedItems],emittedValues:t,isFilteredSelection:!1},bubbles:!0,composed:!0}))}else this.value="",this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0}));this.syncFormValue(),this.syncValidity(),this.validateInput(),this.requestUpdate()}}renderChips(){const t=Array.isArray(this.selectedItems)?this.selectedItems.slice(0,this.visibleChips):[],e=this.selectedItems.length-this.visibleChips;return s`
+      ${u(t,t=>String(this.getOptionValue(t)),t=>s`
           <span class="chip" ?compact=${this.compact} part="chip">
             <span class="chip-label" part="chip-label"
               >${this.truncateText(String(this.getOptionLabel(t)),this.chipSize)}</span
             >
-            ${c(this.multiSelect,()=>i`
-                  <sky-icon
-                    class="remove-chip"
-                    part="remove-chip-icon"
-                    ?compact=${this.compact}
-                    @click=${e=>{e.stopPropagation(),this.removeChip(t)}}
-                    icon="ion:close"
-                  ></sky-icon>
-                `)}
+            ${c(this.multiSelect,()=>s`
+                <sky-icon
+                  class="remove-chip"
+                  part="remove-chip-icon"
+                  ?compact=${this.compact}
+                  @click=${e=>{e.stopPropagation(),this.removeChip(t)}}
+                  icon="ion:close"
+                ></sky-icon>
+              `)}
           </span>
         `)}
-      ${c(e>0,()=>i`
-            <span
-              class="chip overflow-chip"
-              part="overflow-chip"
-              style="cursor:pointer"
-              ?compact=${this.compact}
-              @click=${this.toggleHiddenChips}
-            >
-              + ${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`
-    <div
-      class="dropdown"
-      part="dropdown"
-      popover="manual"
-       @toggle=${this.dropdownPopover.onToggle}
-      @click=${t=>t.stopPropagation()}
-      style="
+      ${c(e>0,()=>s`
+          <span
+            class="chip overflow-chip"
+            part="overflow-chip"
+            style="cursor:pointer"
+            ?compact=${this.compact}
+            @click=${this.toggleHiddenChips}
+          >
+            + ${e}
+          </span>
+        `)}
+    `}resolveMultiDisplay(){const t=this.multiDisplay;return"text"===t||"count"===t||"chips"===t?t:"chips"}renderSelectedValue(){if(!this.selectedItems.length)return null;if(!this.multiSelect){const t=String(this.getOptionLabel(this.selectedItems[0]));return s`
+        <span
+          class="value-summary"
+          part="value-summary single-select-chip"
+          title=${t}
+          >${t}</span
+        >
+      `}const t=this.resolveMultiDisplay();if("text"===t){const t=this.selectedItems.map(t=>String(this.getOptionLabel(t))).join(", ");return s`
+        <span class="value-summary" part="value-summary" title=${t}
+          >${t}</span
+        >
+      `}if("count"===t){const t=this.selectedItems.length,e=String(this.getOptionLabel(this.selectedItems[0])),i=1===t?e:`${e} +${t-1}`,o=this.selectedItems.map(t=>String(this.getOptionLabel(t))).join(", ");return s`
+        <span class="value-summary" part="value-summary" title=${o}
+          >${i}</span
+        >
+      `}return s`
+      <div
+        class="chip-container"
+        part="chip-container"
+        ?compact=${this.compact}
+      >
+        ${this.renderChips()}
+      </div>
+    `}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&&document.activeElement!==t&&requestAnimationFrame(()=>t.focus()),this.filteredOptions.length>0){let t=0;if(this.selectedItems.length>0){const e=this.getOptionValue(this.selectedItems[0]),i=this.filteredOptions.findIndex(t=>this.getOptionValue(t.original)===e);i>=0&&(t=i)}return this.activeIndex=this.headerRows+t,void this.scrollActiveItemIntoView()}this.activeIndex=this.searchable||this.addOption?0:-1}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 s`
+      <div
+        class="dropdown"
+        part="dropdown"
+        popover="manual"
+        @toggle=${this.dropdownPopover.onToggle}
+        @click=${t=>t.stopPropagation()}
+        style="
         left: var(--sky-dd-left, 0px);
         top: var(--sky-dd-top, 0px);
         min-width: var(--sky-dd-width, 100%);
       "
-    >
-      ${c(this.searchable||this.addOption,()=>i`
+      >
+        ${c(this.searchable||this.addOption,()=>s`
             <div
               class="search-container"
               data-row-index="0"
@@ -96,22 +113,21 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
                 class="input"
               />
 
-              ${c(this.addOption,()=>i`
-                    <sky-icon
-                      class="new-option-btn"
-                      icon="ion:add"
-                      part="add-option-icon"
-                      title="Add as new option"
-                      aria-label="Add as new option"
-                      @click=${this.handleAddaddOption}
-                    ></sky-icon>
-                  `)}
+              ${c(this.addOption,()=>s`
+                  <sky-icon
+                    class="new-option-btn"
+                    icon="ion:add"
+                    part="add-option-icon"
+                    title="Add as new option"
+                    aria-label="Add as new option"
+                    @click=${this.handleAddaddOption}
+                  ></sky-icon>
+                `)}
             </div>
           `)}
 
-<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="dropdown-scroller">
+          ${c(this.multiSelect&&this.selectAll&&this.filteredOptions.length,()=>{const t=this.searchable||this.addOption?1:0,e=y({"dropdown-item":!0,active:this.activeIndex===t,selected:this.isAllFilteredSelected()});return s`
                 <div
                   class=${e}
                   data-row-index=${t}
@@ -126,125 +142,198 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
                   Select All
                 </div>
               `})}
-          ${c(this.filteredOptions.length>0,()=>d(this.filteredOptions,({original:t,_idx:e})=>`${e}-${String(this.getOptionValue(t))}`,({original:t,highlighted:e,_idx:s},o)=>{const r=`option-${s}`,a=this.optionSlotSet.has(r),n=t=>String(this.getOptionValue(t.original??t)),l=Array.isArray(this.selectedItems)&&this.selectedItems.some(e=>n(e)===n(t)),d=this.headerRows+o,y=d===this.activeIndex,u=p({"dropdown-item":!0,active:y,selected:l});return i`
-                  <div
-                    class=${u}
-                    data-row-index=${d}
-                    style="justify-content: ${this.justify};"
-                    part="option"
-                    @click=${()=>this.selectOption(t)}
-                    ?compact=${this.compact}
-                  >
-                    ${c(this.multiSelect,()=>i` <sky-checkbox
-                          .checked=${l}
-                          readonly
-                        ></sky-checkbox>`)}
-                    ${c(a,()=>i`
+          ${c(this.filteredOptions.length>0,()=>u(this.filteredOptions,({original:t,_idx:e})=>`${e}-${String(this.getOptionValue(t))}`,({original:t,highlighted:e,_idx:i},o)=>{const r=`option-${i}`,n=this.optionSlotSet.has(r),a=t=>String(this.getOptionValue(t.original??t)),l=Array.isArray(this.selectedItems)&&this.selectedItems.some(e=>a(e)===a(t)),h=this.headerRows+o,d=h===this.activeIndex,u=y({"dropdown-item":!0,active:d,selected:l});return s`
+                    <div
+                      class=${u}
+                      data-row-index=${h}
+                      style="justify-content: ${this.justify};"
+                      part="option"
+                      @click=${()=>this.selectOption(t)}
+                      @pointerenter=${()=>{this.activeIndex=h}}
+                      ?compact=${this.compact}
+                    >
+                      ${c(this.multiSelect,()=>s` <sky-checkbox
+                            .checked=${l}
+                            readonly
+                          ></sky-checkbox>`)}
+                      ${c(n,()=>s`
                           <div style="display: flex; gap: 8px;width:100%">
                             <slot name=${r}>
                               <span
                                 class="highlighted-text"
                                 part="highlighted-text"
-                                >${h(e)}</span
+                                >${p(e)}</span
                               >
                             </slot>
                           </div>
-                        `,()=>i`<span
-                                class="highlighted-text"
-                                part="highlighted-text"
-                                >${h(e)}</span
-                              >`)}
-                  </div>
-                `}),()=>i`<div
+                        `,()=>s`<span
+                            class="highlighted-text"
+                            part="highlighted-text"
+                            >${p(e)}</span
+                          >`)}
+                    </div>
+                  `}),()=>s`<div
                 class="dropdown-item"
                 part="no-options"
                 data-row-index=${this.headerRows}
               >
                 No options found
               </div>`)}
-          `)}
+        </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`
+    `}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 s`
       <div class="progress-message">
         <ul id=${e} class="error-list" part="error-list">
-          ${d(t,t=>t,t=>i`<li class="error" part="error-item">${t}</li>`)}
+          ${u(t,t=>t,t=>s`<li class="error" part="error-item">${t}</li>`)}
         </ul>
       </div>
-    `}getErrorMessages(){const t=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return t.slice(0,1);case"all":return t;default:return[]}}handleIconClick(t,e){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:t,event:e},bubbles:!0,composed:!0}))}render(){const t=p({"icon-slot":!0,left:!0,focused:this.focused}),e=p({"icon-slot":!0,right:!0,focused:this.focused}),s=p({"placeholder-label":!0,active:this.selectedItems.length>0});return i`
-      <div class="combo-box-container" part="combo-box-container">
-        ${c(this.label,()=>i`<div class="label" part="label">${this.label}</div>`)}
-        <div
-          class="input-wrapper"
-          tabindex="0"
-          part="input-wrapper"
-          ?disabled=${this.disabled}
+    `}getErrorMessages(){const t=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return t.slice(0,1);case"all":return t;default:return[]}}handleIconClick(t,e){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:t,event:e},bubbles:!0,composed:!0}))}render(){const t=y({"icon-slot":!0,left:!0,focused:this.focused}),e=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,n="inside"===this.variant,a=this.label?r?s`<legend class="label" part="label">${this.label}</legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
+      <div
+        class=${t}
+        part="icon-slot"
+        ?filled=${this.hasLeftIcon}
+        @click=${t=>this.handleIconClick("left",t)}
+      >
+        <slot name="icon-left" @slotchange=${this.onIconSlotChange}></slot>
+      </div>
+    `,h=c(this.selectedItems.length>0,()=>this.renderSelectedValue(),()=>s`<label
+          class=${i}
+          part="placeholder-label"
           ?compact=${this.compact}
-          ?loading=${this.loading}
-          ?open=${this.open}
-          ?invalid=${this.invalid}
-          @click=${t=>{this.disabled||this.readonly||this.toggleDropdown(t)}}
-          @keydown=${this.handleKeydown}
         >
-          <!-- Left Icon or Loading Indicator -->
-          <div
-            class=${t}
-            part="icon-slot"
-            ?filled=${this.hasLeftIcon}
-            @click=${t=>this.handleIconClick("left",t)}
+          <span style="color:${this.prefixColor}">${this.prefix}</span
+          >${this.placeholder}<span style="color:${this.suffixColor}"
+            >${this.suffix}</span
           >
-            <slot name="icon-left" @slotchange=${this.onIconSlotChange}></slot>
-          </div>
-          ${c(this.selectedItems.length>0,()=>i`
-                <div
-                  class="chip-container"
-                  part="chip-container"
-                  ?compact=${this.compact}
-                >
-                  ${this.renderChips()}
-                </div>
-              `,()=>i`<label
-                class=${s}
-                part="placeholder-label"
-                ?compact=${this.compact}
-              >
-                <span style="color:${this.prefixColor}">${this.prefix}</span
-                >${this.placeholder}<span style="color:${this.suffixColor}"
-                  >${this.suffix}</span
+        </label>`),d=s`
+      <div class="field-trailing" part="field-trailing">
+        ${c(this.clearable&&!this.enforceMinOneSelection&&(this.value||this.selectedItems.length),()=>s`<sky-icon
+              class="clear-button"
+              part="clear-button"
+              ?compact=${this.compact}
+              @click=${t=>{t.stopPropagation(),this.handleClear()}}
+              ?loading=${this.loading}
+              icon="ion:close"
+            ></sky-icon>`)}
+        ${c(this.loading,()=>s`<div class="loading-indicator right"></div>`,()=>this.hasRightIcon?s`<div
+                  part="icon-slot"
+                  class=${e}
+                  ?filled=${!0}
+                  @click=${t=>this.handleIconClick("right",t)}
                 >
-              </label>`)}
-          ${c(this.clearable&&!this.enforceMinOneSelection&&(this.value||this.selectedItems.length),()=>i`<sky-icon
-                class="clear-button"
-                part="clear-button"
-                @click=${this.handleClear}
-                ?loading=${this.loading}
-                icon="ion:close"
-              ></sky-icon>`)}
-          ${c(this.loading,()=>i`<div class="loading-indicator right"></div>`,()=>i`<div
-                part="icon-slot"
-                class=${e}
-                ?filled=${this.hasRightIcon}
-                @click=${t=>this.handleIconClick("right",t)}
-              >
-                <slot name="icon-right" @slotchange=${this.onIconSlotChange}></slot>
-              </div>`)}
-          <sky-icon
-            class="dropdown-button"
-            part="dropdown-button"
-            @click=${t=>{this.disabled||this.readonly||this.toggleDropdown(t)}}
-            icon=${this.open?"ion:ios-arrow-up":"ion:chevron-down"}
-          >
-          </sky-icon>
+                  <slot
+                    name="icon-right"
+                    @slotchange=${this.onIconSlotChange}
+                  ></slot>
+                </div>`:s`<slot
+                  name="icon-right"
+                  style="display:none"
+                  @slotchange=${this.onIconSlotChange}
+                ></slot>`)}
+        <sky-icon
+          class="dropdown-button"
+          part="dropdown-button"
+          ?compact=${this.compact}
+          @click=${t=>{t.stopPropagation(),this.disabled||this.readonly||this.toggleDropdown(t)}}
+          icon=${this.open?"ion:ios-arrow-up":"ion:chevron-down"}
+        >
+        </sky-icon>
+      </div>
+    `,p=s`
+      ${l}
+      <div class="field-main" part="field-main">${h}</div>
+      ${this.readonly?o:d}
+    `,u=s`
+      ${l}
+      <div class="input-inside-main">
+        ${a}
+        <div class="input-inside-row">
+          <div class="field-main" part="field-main">${h}</div>
         </div>
+      </div>
+      ${this.readonly?o:d}
+    `,v=n?u:p,m=t=>{this.disabled||this.readonly||this.toggleDropdown(t)},g=this.handleKeydown,f=r?s`
+          <fieldset
+            class="input-wrapper"
+            tabindex="0"
+            part="input-wrapper"
+            ?disabled=${this.disabled}
+            ?compact=${this.compact}
+            ?loading=${this.loading}
+            ?open=${this.open}
+            ?invalid=${this.invalid}
+            @click=${m}
+            @keydown=${g}
+          >
+            ${a}
+            <div class="input-fieldset-body">${v}</div>
+          </fieldset>
+        `:s`
+          <div
+            class="input-wrapper"
+            tabindex="0"
+            part="input-wrapper"
+            ?disabled=${this.disabled}
+            ?compact=${this.compact}
+            ?loading=${this.loading}
+            ?open=${this.open}
+            ?invalid=${this.invalid}
+            @click=${m}
+            @keydown=${g}
+          >
+            ${v}
+          </div>
+        `;return s`
+      <div class="combo-box-container" part="combo-box-container">
+        ${r||n?o:a} ${f}
         ${this.renderHiddenChipsDropdown()} ${this.renderDropdown()}
         ${this.renderValidationErrors()}
-        <slot style="display:none" @slotchange=${this.refreshOptionSlots}></slot>
+        <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`
+    `}};S.dependencies={"sky-icon":b,"sky-checkbox":k},S._SEARCH_DEBOUNCE_MS=150,S._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,S._CLOSE_RESET_MS=250,S.styles=e`
     :host {
       display: block;
       font-family: var(--sky-font);
       width: 100%;
+      --sky-input-height: 36px;
+      --sky-input-height-compact: 28px;
+      --sky-input-border-width: 1px;
+      --sky-input-pad-x: var(--sky-space-3, 12px);
+      --sky-input-pad-x-sm: var(--sky-space-1, 4px);
+      --sky-input-pad-x-xs: 0px;
+      --sky-input-pad-y: var(--sky-space-1, 4px);
+      --sky-input-pad-y-sm: 0px;
+      --sky-input-gap: var(--sky-space-1, 4px);
+      --sky-input-icon-width: 2rem;
+    }
+
+    :host([compact]) {
+      --sky-input-pad-x: var(--sky-space-2, 8px);
+      --sky-input-pad-x-sm: var(--sky-space-1, 4px);
+      --sky-input-icon-width: 1.75rem;
+    }
+
+    :host([compact]) .combo-box-container > .label {
+      font-size: var(--sky-font-size-xs);
+      margin-bottom: var(--sky-space-1, 4px);
+      line-height: 1.2;
+    }
+
+    :host([compact]) .placeholder-label,
+    :host([compact]) .chip[single-select] {
+      font-size: var(--sky-font-size-sm);
+    }
+
+    :host([compact]) .icon-slot {
+      font-size: var(--sky-font-size-lg);
+    }
+
+    :host([compact]) .clear-button,
+    :host([compact]) .dropdown-button {
+      font-size: var(--sky-font-size-md);
     }
 
     :host([disabled]) {
@@ -256,30 +345,289 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       cursor: default;
     }
 
-    :host([variant="highlight"])  {
-      .label{
-        color: var(--sky-dropdown-color);
-      }
+    :host([variant='highlight']) .label {
+      color: var(--sky-dropdown-color);
+    }
+
+    /* Fieldset / legend */
+    :host([variant='fieldset']) {
+      overflow: visible;
+      padding-block-start: 0;
+    }
+
+    :host([variant='fieldset']) .combo-box-container {
+      overflow: visible;
+    }
+
+    :host([variant='fieldset']) fieldset.input-wrapper {
+      display: block;
+      height: auto;
+      margin: 0;
+      min-inline-size: 0;
+      min-width: 0;
+      padding: 0;
+      overflow: visible;
+      background: var(--sky-glass-solid);
+      box-shadow: none;
+    }
+
+    :host([variant='fieldset']) fieldset.input-wrapper[compact] {
+      height: auto;
+    }
+
+    :host([variant='fieldset']) .input-fieldset-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      box-sizing: border-box;
+      height: calc(var(--sky-input-height) - 2 * var(--sky-input-border-width));
+      min-height: calc(
+        var(--sky-input-height) - 2 * var(--sky-input-border-width)
+      );
+      background: transparent;
+      border-radius: inherit;
+      flex-wrap: nowrap;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    :host([variant='fieldset'])
+      fieldset.input-wrapper[compact]
+      .input-fieldset-body {
+      height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+      min-height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+    }
+
+    /* Multi chips stay single-line; do not grow taller than sky-input */
+    :host([variant='fieldset'])
+      .input-fieldset-body:has(.chip:not([single-select])) {
+      height: calc(var(--sky-input-height) - 2 * var(--sky-input-border-width));
+      min-height: calc(
+        var(--sky-input-height) - 2 * var(--sky-input-border-width)
+      );
+      padding-block: 0;
+    }
+
+    :host([variant='fieldset'][compact])
+      .input-fieldset-body:has(.chip:not([single-select])) {
+      height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+      min-height: calc(
+        var(--sky-input-height-compact) - 2 * var(--sky-input-border-width)
+      );
+      padding-block: 0;
+    }
+
+    :host([variant='fieldset']) legend.label {
+      float: unset;
+      width: auto;
+      max-width: calc(100% - 2 * var(--sky-input-pad-x));
+      margin-inline-start: var(--sky-input-pad-x);
+      margin-bottom: 0;
+      padding-inline: var(--sky-input-pad-x-sm);
+      padding-block: 2px;
+      border: none;
+      background: transparent;
+      background-color: transparent;
+      color: var(--sky-text-secondary);
+      font-size: var(--sky-font-size-xs);
+      line-height: 1.4;
+      overflow: visible;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
     }
 
-    .combo-box-container:focus-within .label {
+    :host([variant='fieldset']) .combo-box-container:focus-within legend.label,
+    :host([variant='fieldset']) .input-wrapper[open] legend.label {
       color: var(--sky-dropdown-color);
-      font-size: var(--sky-font-size-sm);
-      transition: all 0.3s ease;
+      font-size: var(--sky-font-size-xs);
+    }
+
+    :host([variant='fieldset']) .input-wrapper::after {
+      content: none;
+      display: none;
+    }
+
+    :host([variant='fieldset']) .input-wrapper[open],
+    :host([variant='fieldset']) .input-wrapper:focus-visible {
+      border-color: var(--sky-dropdown-color);
+    }
+
+    :host([variant='fieldset'][validationActive]:invalid) .input-wrapper {
+      border-color: var(--sky-danger-primary);
+    }
+
+    :host([variant='fieldset'][validationActive]:invalid) legend.label {
+      color: var(--sky-danger-primary);
+    }
+
+    :host([variant='fieldset'][compact]) legend.label,
+    :host([variant='fieldset'][compact])
+      .combo-box-container:focus-within
+      legend.label,
+    :host([variant='fieldset'][compact]) .input-wrapper[open] legend.label {
+      font-size: var(--sky-font-size-xs);
+      line-height: 1.4;
+    }
+
+    /* Inside: label in the wrapper above value row — keep tokens in sync with sky-input */
+    :host([variant='inside']) {
+      --sky-input-height-inside: 44px;
+      --sky-input-height-inside-compact: 40px;
+      --sky-input-inside-label-block: 0.15rem;
+      --sky-input-inside-value-min: 1.375rem;
+    }
+
+    :host([variant='inside']) .input-wrapper {
+      height: auto;
+      min-height: var(--sky-input-height-inside);
+      align-items: center;
+      padding-block: var(--sky-input-pad-y-sm, 0px);
+      overflow: hidden;
+    }
+
+    :host([variant='inside']) .input-wrapper[compact] {
+      height: auto;
+      min-height: var(--sky-input-height-inside-compact);
+      padding-block: var(--sky-input-pad-y-sm, 0px);
+    }
+
+    :host([variant='inside']) .input-inside-main {
+      flex: 1 1 0%;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0.15rem;
+      padding-block: var(--sky-input-inside-label-block);
+      padding-inline: 0;
+      overflow: hidden;
     }
+
+    :host([variant='inside']) .input-inside-main > .label {
+      margin: 0;
+      padding-inline: var(--sky-input-pad-x);
+      font-size: var(--sky-font-size-xs);
+      line-height: 1.3;
+      min-height: calc(var(--sky-font-size-xs) * 1.3);
+      color: var(--sky-text-secondary);
+      pointer-events: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 0 0 auto;
+    }
+
+    :host([variant='inside'][compact]) .input-inside-main > .label {
+      font-size: 0.6875rem;
+      line-height: 1.3;
+      min-height: calc(0.6875rem * 1.3);
+    }
+
+    :host([variant='inside'])
+      .combo-box-container:focus-within
+      .input-inside-main
+      > .label,
+    :host([variant='inside']) .input-wrapper[open] .input-inside-main > .label {
+      color: var(--sky-dropdown-color);
+      font-size: var(--sky-font-size-xs);
+    }
+
+    :host([variant='inside'][compact])
+      .combo-box-container:focus-within
+      .input-inside-main
+      > .label,
+    :host([variant='inside'][compact])
+      .input-wrapper[open]
+      .input-inside-main
+      > .label {
+      font-size: 0.6875rem;
+    }
+
+    :host([variant='inside'][validationActive]:invalid)
+      .input-inside-main
+      > .label {
+      color: var(--sky-danger-primary);
+    }
+
+    :host([variant='inside']) .input-inside-row {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      width: 100%;
+      min-height: var(--sky-input-inside-value-min);
+      gap: 0;
+      overflow: hidden;
+      flex: 0 0 auto;
+    }
+
+    /* Match sky-input: label + value share pad-x; zero start when left icon present */
+    :host([variant='inside']) .input-inside-main > .label,
+    :host([variant='inside']) .chip-container,
+    :host([variant='inside']) .value-summary,
+    :host([variant='inside']) .placeholder-label {
+      padding-inline-start: var(--sky-input-pad-x);
+      padding-inline-end: var(--sky-input-pad-x);
+    }
+
+    :host([variant='inside'])
+      .input-wrapper:has(.icon-slot[filled].left)
+      .input-inside-main
+      > .label,
+    :host([variant='inside'])
+      .input-wrapper:has(.icon-slot[filled].left)
+      .chip-container,
+    :host([variant='inside'])
+      .input-wrapper:has(.icon-slot[filled].left)
+      .value-summary,
+    :host([variant='inside'])
+      .input-wrapper:has(.icon-slot[filled].left)
+      .placeholder-label {
+      padding-inline-start: 0;
+    }
+
+    /* Left icon / trailing chrome centered to label+value column (like sky-input) */
+    :host([variant='inside']) .icon-slot,
+    :host([variant='inside']) .icon-slot[filled] {
+      align-self: center;
+      height: auto;
+      max-height: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([variant='inside']) .field-trailing {
+      align-self: center;
+      padding-inline-start: 0;
+    }
+
+    /* Outside labels — keep accent while dropdown is open (focus may leave into popover) */
+    .combo-box-container:focus-within > .label,
+    .combo-box-container:has(.input-wrapper[open]) > .label {
+      color: var(--sky-dropdown-color);
+      transition: color 0.3s ease;
+    }
+
+    :host([compact]) .combo-box-container:focus-within > .label,
+    :host([compact]) .combo-box-container:has(.input-wrapper[open]) > .label {
+      font-size: var(--sky-font-size-xs);
+    }
+
     .label {
       font-size: var(--sky-font-size-sm);
-      margin-bottom: 5px;
+      margin-bottom: var(--sky-space-1, 4px);
       text-align: start;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       font-family: var(--sky-font);
-    }
-
-    .combo-box-container:focus-within[compact] .label {
-      font-size: var(--sky-font-size-xs);
-      color: var(--sky-dropdown-color);
+      line-height: 1.35;
     }
 
     .combo-box-container {
@@ -366,16 +714,19 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       -webkit-backdrop-filter: none;
       box-sizing: border-box;
       border-radius: var(--sky-radius-secondary);
-      height: 38px;
+      height: var(--sky-input-height);
+      min-height: var(--sky-input-height);
       width: 100%;
       flex-wrap: nowrap;
       position: relative;
+      overflow: hidden;
       border: var(--sky-border-primary);
       box-shadow: var(--sky-box-shadow-primary);
-      transition: border-color 0.3s ease, box-shadow 0.3s ease;
+      transition:
+        border-color var(--sky-transition-normal, 200ms ease),
+        box-shadow var(--sky-transition-normal, 200ms ease);
       flex: 1 1 auto;
       min-width: 0;
-     
     }
 
     .input-wrapper:focus-visible {
@@ -384,7 +735,7 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     }
 
     .input-wrapper::after {
-      content: "";
+      content: '';
       position: absolute;
       top: -1px;
       left: -1px;
@@ -409,7 +760,8 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       opacity: 1;
       border-bottom-color: var(--sky-danger-primary);
     }
-        :host([validationActive]:invalid) .label {
+
+    :host([validationActive]:invalid) .label {
       color: var(--sky-danger-primary);
     }
 
@@ -420,14 +772,43 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     .placeholder-label.active[compact] {
       top: 10px;
       background-color: var(--sky-dropdown-color);
-      color: white;
+      color: var(--sky-on-color-fallback-light, var(--sky-text-white));
       font-size: var(--sky-font-size-xs);
       padding: 0 5px;
       border-radius: 4px;
     }
 
     .input-wrapper[compact] {
-      height: 30px;
+      height: var(--sky-input-height-compact);
+      min-height: var(--sky-input-height-compact);
+      border-radius: var(--sky-radius-primary);
+    }
+
+    /* Multi chips stay single-line; do not grow taller than sky-input.
+       Exempt inside variant — it needs two rows (label + value). */
+    .input-wrapper:has(.chip:not([single-select])) {
+      height: var(--sky-input-height);
+      min-height: var(--sky-input-height);
+      padding-block: 0;
+    }
+
+    .input-wrapper[compact]:has(.chip:not([single-select])) {
+      height: var(--sky-input-height-compact);
+      min-height: var(--sky-input-height-compact);
+      padding-block: 0;
+    }
+
+    :host([variant='inside']) .input-wrapper,
+    :host([variant='inside']) .input-wrapper:has(.chip),
+    :host([variant='inside']) .input-wrapper[compact]:has(.chip) {
+      height: auto;
+      min-height: var(--sky-input-height-inside);
+      padding-block: var(--sky-input-pad-y-sm, 0px);
+    }
+
+    :host([variant='inside'][compact]) .input-wrapper,
+    :host([variant='inside'][compact]) .input-wrapper:has(.chip) {
+      min-height: var(--sky-input-height-inside-compact);
     }
 
     :host([compact]) .placeholder-label {
@@ -435,23 +816,71 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     }
 
     sky-icon {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       width: 1em;
       height: 1em;
+      flex-shrink: 0;
+    }
+
+    /* Value column: takes remaining width; never paints under trailing actions */
+    .field-main {
+      flex: 1 1 0%;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      position: relative;
+      z-index: 0;
     }
 
     .chip-container {
-      margin-left: 5px;
       display: flex;
-      gap: 8px;
-      flex: 1 1 auto;
+      gap: var(--sky-input-gap);
+      flex: 1 1 0%;
+      width: 100%;
       min-width: 0;
+      max-width: 100%;
       flex-wrap: nowrap;
+      align-items: center;
+      overflow: hidden;
+      box-sizing: border-box;
+      margin: 0;
+      padding-inline: var(--sky-input-pad-x) var(--sky-input-pad-x-sm);
     }
 
-    :dir(rtl).chip-container {
-      margin-right: 5px;
-      margin-left: 0px;
+    .input-wrapper:has(.icon-slot[filled].left) .chip-container {
+      padding-inline-start: var(--sky-input-pad-x-sm);
+    }
+
+    .value-summary {
+      display: block;
+      flex: 1 1 0%;
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding-inline: var(--sky-input-pad-x) var(--sky-input-pad-x-sm);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--sky-font-size-md);
+      color: var(--sky-text-primary);
+      font-family: var(--sky-font);
+      line-height: 1.25;
+      text-align: start;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].left) .value-summary {
+      padding-inline-start: var(--sky-input-pad-x-sm);
+    }
+
+    :host([compact]) .value-summary {
+      font-size: var(--sky-font-size-sm);
     }
 
     .chip-container::-webkit-scrollbar {
@@ -465,15 +894,22 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     .chip {
       background-color: var(--sky-glass-primary);
       border-radius: var(--sky-radius-primary);
-      padding: 4px 8px;
+      padding: 0 6px;
+      height: 1.25rem;
+      max-height: calc(var(--sky-input-height) - 10px);
       font-size: var(--sky-font-size-sm);
-      display: flex;
+      line-height: 1;
+      display: inline-flex;
       align-items: center;
-      gap: 6px;
-      flex-shrink: 0;
+      gap: 4px;
+      flex: 0 1 auto;
+      max-width: 100%;
       min-width: 0;
       border: var(--sky-border-primary);
       font-family: var(--sky-font);
+      text-align: start;
+      box-sizing: border-box;
+      white-space: nowrap;
     }
 
     .chip .chip-label {
@@ -482,33 +918,20 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      line-height: 1;
     }
 
-    .chip[single-select] {
-      background-color: transparent;
-      box-shadow: none;
-      border: none;
-      font-size: var(--sky-font-size-md);
-      padding: 4px;
-      gap: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .chip.overflow-chip {
+      flex: 0 0 auto;
       white-space: nowrap;
-      min-width: 0;
-      width:100%;
-    }
-
-    .chip[single-select] .chip-label {
-      flex: 1 1 auto;
-      min-width: 0;
+      max-width: none;
     }
 
-    :host([icon-left]) .chip[single-select] {
-      padding:4px 0;
-    }
-
-    .chip[single-select] .remove-chip {
-      display: none;
+    :host([compact]) .chip {
+      height: 1.125rem;
+      max-height: calc(var(--sky-input-height-compact) - 8px);
+      padding: 0 4px;
+      font-size: var(--sky-font-size-xs);
     }
 
     .chip .remove-chip[compact] {
@@ -521,7 +944,9 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       border-radius: var(--sky-radius-full);
       border: none;
       cursor: pointer;
-      transition: color 0.2s ease, background-color 0.2s ease;
+      transition:
+        color 0.2s ease,
+        background-color 0.2s ease;
     }
     .remove-chip-inner:hover {
       color: var(--sky-danger-primary);
@@ -540,7 +965,9 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       border-radius: var(--sky-radius-full);
       cursor: pointer;
       border: none;
-      transition: color 0.2s ease, background-color 0.2s ease;
+      transition:
+        color 0.2s ease,
+        background-color 0.2s ease;
     }
 
     .input {
@@ -585,15 +1012,11 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       -webkit-backdrop-filter: var(--sky-blur-tertiary)
         var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);
       border-radius: var(--sky-radius-secondary);
-      box-shadow:
-        var(--sky-box-shadow-inset),
-        var(--sky-box-shadow-tertiary);
+      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);
       box-sizing: border-box;
-  pointer-events: auto;
-  margin: 0;
-  
+      pointer-events: auto;
+      margin: 0;
       border: var(--sky-border-tertiary);
-     
     }
 
     .dropdown-scroller {
@@ -628,17 +1051,6 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       background-color: transparent;
     }
 
-    .dropdown-item.active {
-      background-color: var(--sky-hover-primary);
-    }
-    .dropdown-item.selected {
-      color: var(--sky-dropdown-color, var(--sky-active-primary));
-    }
-
-    .dropdown-item.active.selected {
-      background-color: var(--sky-active-g0);
-    }
-
     .dropdown-item {
       display: flex;
       align-items: center;
@@ -649,12 +1061,34 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       text-align: left;
       font-size: var(--sky-font-size-sm);
       color: var(--sky-text-primary);
-      transition: all 0.2s ease-in-out;
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
       box-sizing: border-box;
       margin: 2px 0;
       font-family: var(--sky-font);
     }
 
+    .dropdown-item:hover {
+      background-color: var(--sky-hover-primary);
+    }
+
+    .dropdown-item.active {
+      background-color: var(--sky-hover-primary);
+    }
+
+    .dropdown-item.selected {
+      color: var(--sky-dropdown-color, var(--sky-active-primary));
+      background-color: var(--sky-active-g0, var(--sky-hover-primary));
+      font-weight: var(--sky-font-weight-medium, 500);
+    }
+
+    .dropdown-item.active.selected,
+    .dropdown-item.selected:hover {
+      background-color: var(--sky-active-g0, var(--sky-hover-primary));
+      color: var(--sky-dropdown-color, var(--sky-active-primary));
+    }
+
     :host([compact]) .dropdown-item {
       font-size: var(--sky-font-size-sm);
       padding: 5px 8px;
@@ -666,47 +1100,44 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       justify-content: center;
       font-size: var(--sky-font-size-xl);
       align-items: center;
-      border-radius: var(--sky-radius-secondary);
-      height: inherit;
+      align-self: center;
+      color: var(--sky-text-primary);
+      height: 100%;
       max-height: 100%;
       box-sizing: border-box;
-      min-width: 36px;
-      background: var(--sky-glass-solid);
-      color: var(--sky-text-primary);
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-     
+      flex: 0 0 var(--sky-input-icon-width);
+      width: var(--sky-input-icon-width);
+      min-width: var(--sky-input-icon-width);
+      padding: 0;
+      background: none;
+      border: none;
+      transition: color var(--sky-transition-normal, 200ms ease);
+    }
+
+    .hidden-chips-dropdown {
+      position: fixed; /* important: popover top layer */
+      background: var(--sky-glass-tertiary);
+      background-image: var(--sky-glass-surface);
+      backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)
+        var(--sky-saturation-tertiary);
+      -webkit-backdrop-filter: var(--sky-blur-tertiary)
+        var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);
+      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);
+      border-radius: var(--sky-radius-secondary);
+      border: var(--sky-border-tertiary);
+      width: max-content;
+      opacity: 0;
+      transform: scale(0.98);
       transition:
-        transform 0.3s ease,
-        color 0.3s ease;
-    }
-
-.hidden-chips-dropdown {
-  position: fixed; /* important: popover top layer */
-  background: var(--sky-glass-tertiary);
-  background-image: var(--sky-glass-surface);
-  backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)
-    var(--sky-saturation-tertiary);
-  -webkit-backdrop-filter: var(--sky-blur-tertiary)
-    var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);
-  box-shadow:
-    var(--sky-box-shadow-inset),
-    var(--sky-box-shadow-tertiary);
-  border-radius: var(--sky-radius-secondary);
-  border: var(--sky-border-tertiary);
-  width: max-content;
- 
-  opacity: 0;
-  transform: scale(0.98);
-  transition: opacity 0.15s ease, transform 0.15s ease;
-  margin: 0;
-}
-
-.hidden-chips-dropdown:popover-open {
-  opacity: 1;
-  transform: scale(1);
-}
+        opacity 0.15s ease,
+        transform 0.15s ease;
+      margin: 0;
+    }
 
+    .hidden-chips-dropdown:popover-open {
+      opacity: 1;
+      transform: scale(1);
+    }
 
     .hidden-chip-inner {
       padding: 4px 8px;
@@ -726,112 +1157,131 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
 
     .icon-slot[filled] {
       display: flex;
+      flex-shrink: 0;
       cursor: pointer;
     }
-    .icon-slot.left {
-      border-right: var(--sky-border-primary);
-    }
-
-    :dir(rtl) .icon-slot.left {
-      border-left: var(--sky-border-primary);
-      border-right: unset;
-    }
-
-    .icon-slot.right {
-      border-left: var(--sky-border-primary);
-    }
-
-    :dir(rtl) .icon-slot.right {
-      border-right: var(--sky-border-primary);
-      border-left: unset;
-    }
 
-    .input-wrapper[open] .icon-slot {
-      transform: translate(-5px, -5px);
-      border: var(--sky-border-primary) !important;
+    .icon-slot[filled]:hover,
+    .icon-slot[filled]:active,
+    .icon-slot.focused,
+    .input-wrapper[open] .icon-slot[filled] {
       color: var(--sky-dropdown-color);
-      background-color: var(--sky-glass-solid);
-    }
-
-    :dir(rtl) .input-wrapper[open] .icon-slot {
-      transform: translate(5px, -5px);
-    }
-
-    .input-wrapper[open] .icon-slot.right {
-      transform: translate(5px, -5px);
-    }
-
-    :dir(rtl) .input-wrapper[open] .icon-slot.right {
-      transform: translate(-5px, -5px);
     }
 
     .placeholder-label {
       white-space: nowrap;
-      padding: 0 8px;
+      box-sizing: border-box;
+      padding-inline: var(--sky-input-pad-x);
       flex: 1 1 0%;
+      width: 100%;
+      min-width: 0;
       text-align: start;
       font-size: var(--sky-font-size-md);
+      line-height: 1.25;
       color: var(--sky-text-tertiary);
-      transition: all 0.3s ease;
+      transition: color var(--sky-transition-normal, 200ms ease);
       pointer-events: none;
       overflow: hidden;
       text-overflow: ellipsis;
       font-family: var(--sky-font);
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].left) .placeholder-label {
+      padding-inline-start: var(--sky-input-pad-x-sm);
     }
 
     .placeholder-label.active {
       display: none;
     }
 
-    .dropdown-item:hover {
-      background-color: var(--sky-hover-primary);
+    .field-trailing {
+      display: flex;
+      flex: 0 0 auto;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: flex-end;
+      align-self: stretch;
+      gap: var(--sky-input-pad-x-sm);
+      padding-inline-end: var(--sky-input-pad-x-sm);
+      padding-inline-start: var(--sky-input-pad-x-sm);
+      box-sizing: border-box;
+      position: relative;
+      z-index: 1;
+      /* Opaque rail so value text never shows through behind clear */
+      background: var(--sky-glass-solid);
+      isolation: isolate;
     }
 
-    .clear-button {
-      flex-shrink: 0;
-      margin-inline-end: var(--sky-space-1, 4px);
+    sky-icon.clear-button {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      width: 1.125rem;
+      height: 1.125rem;
+      min-width: 1.125rem;
+      min-height: 1.125rem;
+      margin: 0;
+      padding: 0;
       border: none;
-      font-size: var(--sky-font-size-xl);
+      font-size: 0.75rem;
+      line-height: 1;
       color: var(--sky-dropdown-color);
       background-color: var(--sky-hover-primary);
       border-radius: var(--sky-radius-full);
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       cursor: pointer;
-      transition: color 0.3s ease;
+      transition: color var(--sky-transition-normal, 200ms ease);
     }
 
-    .clear-button[compact] {
-      font-size: var(--sky-font-size-md);
+    sky-icon.clear-button[compact] {
+      width: 1rem;
+      height: 1rem;
+      min-width: 1rem;
+      min-height: 1rem;
+      font-size: 0.6875rem;
     }
 
-    .clear-button:hover {
+    sky-icon.clear-button:hover {
       color: var(--sky-danger-primary);
     }
 
-    .dropdown-button {
-      flex-shrink: 0;
-      color: var(--sky-text-primary);
-      height: 100%;
-      width: auto;
-      aspect-ratio: 1;
-      display: flex;
+    sky-icon.dropdown-button {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      width: var(--sky-input-icon-width);
+      height: auto;
+      min-width: calc(var(--sky-input-icon-width) - 0.25rem);
+      margin: 0;
+      padding: 0;
       border: none;
       font-size: var(--sky-font-size-sm);
+      color: var(--sky-text-primary);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      transition: color 0.3s ease;
+      transition: color var(--sky-transition-normal, 200ms ease);
+      background: none;
     }
 
-    .dropdown-button[compact] {
+    sky-icon.dropdown-button:hover,
+    .input-wrapper[open] sky-icon.dropdown-button {
+      color: var(--sky-dropdown-color);
+    }
+
+    sky-icon.dropdown-button[compact] {
       font-size: var(--sky-font-size-md);
     }
 
     .loading-indicator {
       flex-shrink: 0;
-      margin-inline-end: var(--sky-space-1, 4px);
+      margin-inline-end: var(--sky-input-pad-x-sm);
       width: 16px;
       height: 16px;
-      border: 2px solid var(--sky-text-white);
+      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));
       border-top: 2px solid var(--sky-dropdown-color, var(--sky-active-primary));
       border-radius: var(--sky-radius-full);
       animation: spin 1s linear infinite;
@@ -872,13 +1322,13 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       white-space: nowrap;
       text-overflow: ellipsis;
       font-size: var(--sky-font-size-sm);
-      margin-left: 5px;
+      margin-inline-start: var(--sky-input-pad-x-sm);
       font-family: var(--sky-font);
     }
 
     :dir(rtl) .progress-message {
-      margin-left: unset;
-      margin-right: 5px;
+      margin-inline-start: unset;
+      margin-inline-end: var(--sky-input-pad-x-sm);
     }
 
     .error-list {
@@ -931,10 +1381,11 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     }
 
     .sky-checkbox::after {
-      content: "";
+      content: '';
       width: 8px;
       height: 4px;
-      border: 2px solid var(--sky-text-white);
+      border: 2px solid
+        var(--sky-on-color-fallback-light, var(--sky-text-white));
       border-top: none;
       border-right: none;
       position: absolute;
@@ -955,7 +1406,10 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
     .sky-checkbox.indeterminate::after {
       width: 8px;
       height: 2px;
-      background-color: var(--sky-text-white);
+      background-color: var(
+        --sky-on-color-fallback-light,
+        var(--sky-text-white)
+      );
       border: none;
       top: 50%;
       left: 50%;
@@ -972,5 +1426,7 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       opacity: 0.6;
       cursor: not-allowed;
     }
-  `,x.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},k([s()],x.prototype,"value",2),k([s({type:String})],x.prototype,"placeholder",2),k([s({type:String})],x.prototype,"searchPlaceholder",2),k([s({type:String})],x.prototype,"label",2),k([s({type:Array})],x.prototype,"options",1),k([s({type:Number})],x.prototype,"chipSize",2),k([s({type:String})],x.prototype,"color",2),k([s({type:Boolean,reflect:!0})],x.prototype,"clearable",2),k([s({type:Boolean,reflect:!0})],x.prototype,"loading",2),k([s({type:Boolean,reflect:!0})],x.prototype,"compact",2),k([s({type:Boolean,reflect:!0})],x.prototype,"disabled",2),k([s({type:Boolean,reflect:!0})],x.prototype,"searchable",2),k([s({type:Boolean,reflect:!0})],x.prototype,"multiSelect",2),k([s({type:Number,reflect:!0})],x.prototype,"visibleChips",2),k([s({type:Boolean,reflect:!0})],x.prototype,"selectAll",2),k([s({type:Array})],x.prototype,"validations",1),k([s({type:Boolean})],x.prototype,"showErrors",2),k([s({type:String})],x.prototype,"errorDisplayMode",2),k([s({type:Boolean,reflect:!0})],x.prototype,"required",2),k([s({type:Boolean,reflect:!0})],x.prototype,"emitFullObject",2),k([s({type:String})],x.prototype,"emittedKey",2),k([s({type:String})],x.prototype,"displayKey",2),k([s({type:Boolean})],x.prototype,"addOption",2),k([s({type:Boolean})],x.prototype,"validationArrayFormat",2),k([s({type:String})],x.prototype,"prefix",2),k([s({type:String})],x.prototype,"suffix",2),k([s({type:String})],x.prototype,"prefixColor",2),k([s({type:String})],x.prototype,"suffixColor",2),k([s({type:String})],x.prototype,"justify",2),k([s({type:Number})],x.prototype,"zIndex",2),k([s({type:String})],x.prototype,"height",2),k([s({type:String})],x.prototype,"requiredMessage",2),k([s({type:Boolean,reflect:!0})],x.prototype,"readonly",2),k([s({type:Boolean})],x.prototype,"enforceMinOneSelection",2),k([s({type:Boolean})],x.prototype,"openAbove",2),k([s({type:Boolean,reflect:!0})],x.prototype,"validationActive",2),k([s({type:Boolean,reflect:!0})],x.prototype,"invalid",2),k([s({type:String,reflect:!0})],x.prototype,"variant",2),k([s({type:String,attribute:!1})],x.prototype,"searchQuery",2),k([o()],x.prototype,"filteredOptions",2),k([o()],x.prototype,"focused",2),k([o()],x.prototype,"open",2),k([o()],x.prototype,"selectedItems",2),k([o()],x.prototype,"hiddenChipsOpen",2),k([o()],x.prototype,"activeIndex",2),k([o()],x.prototype,"validationErrors",2),k([o()],x.prototype,"validationStatus",2),k([o()],x.prototype,"hasLeftIcon",2),k([o()],x.prototype,"hasRightIcon",2),k([o()],x.prototype,"optionSlotSet",2),k([r(".input-wrapper")],x.prototype,"inputWrapperEl",2),k([r(".dropdown")],x.prototype,"dropdownEl",2),k([r(".hidden-chips-dropdown")],x.prototype,"hiddenDropdownEl",2),k([r(".search-container .input")],x.prototype,"searchInputEl",2),k([r(".overflow-chip")],x.prototype,"overflowChipEl",2),k([r(".combo-box-container")],x.prototype,"comboContainerEl",2),k([a("[data-row-index]")],x.prototype,"rowEls",2),k([n({slot:"icon-left"})],x.prototype,"iconLeftEls",2),k([n({slot:"icon-right"})],x.prototype,"iconRightEls",2),x=k([l("sky-combobox")],x);export{x as SkyCombobox};
+
+    ${t(m([{selector:".placeholder-label.active[compact]",fillVar:"--sky-dropdown-color"},{selector:".sky-checkbox:checked::after",fillVar:"--sky-active-primary",property:"border-color"},{selector:".sky-checkbox.indeterminate::after",fillVar:"--sky-active-primary",property:"background-color"}]))}
+  `,S.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},I([r()],S.prototype,"value",2),I([r({type:String})],S.prototype,"placeholder",2),I([r({type:String})],S.prototype,"searchPlaceholder",2),I([r({type:String})],S.prototype,"label",2),I([r({type:Array})],S.prototype,"options",1),I([r({type:Number})],S.prototype,"chipSize",2),I([r({type:String})],S.prototype,"color",2),I([r({type:Boolean,reflect:!0})],S.prototype,"clearable",2),I([r({type:Boolean,reflect:!0})],S.prototype,"loading",2),I([r({type:Boolean,reflect:!0})],S.prototype,"compact",2),I([r({type:Boolean,reflect:!0})],S.prototype,"disabled",2),I([r({type:Boolean,reflect:!0})],S.prototype,"searchable",2),I([r({type:Boolean,reflect:!0})],S.prototype,"multiSelect",2),I([r({type:Number,reflect:!0})],S.prototype,"visibleChips",2),I([r({type:Boolean,reflect:!0})],S.prototype,"selectAll",2),I([r({type:Array})],S.prototype,"validations",1),I([r({type:Boolean})],S.prototype,"showErrors",2),I([r({type:String})],S.prototype,"errorDisplayMode",2),I([r({type:Boolean,reflect:!0})],S.prototype,"required",2),I([r({type:Boolean,reflect:!0})],S.prototype,"emitFullObject",2),I([r({type:String})],S.prototype,"emittedKey",2),I([r({type:String})],S.prototype,"displayKey",2),I([r({type:Boolean})],S.prototype,"addOption",2),I([r({type:Boolean})],S.prototype,"validationArrayFormat",2),I([r({type:String})],S.prototype,"prefix",2),I([r({type:String})],S.prototype,"suffix",2),I([r({type:String})],S.prototype,"prefixColor",2),I([r({type:String})],S.prototype,"suffixColor",2),I([r({type:String})],S.prototype,"justify",2),I([r({type:Number})],S.prototype,"zIndex",2),I([r({type:String})],S.prototype,"height",2),I([r({type:String})],S.prototype,"requiredMessage",2),I([r({type:Boolean,reflect:!0})],S.prototype,"readonly",2),I([r({type:Boolean})],S.prototype,"enforceMinOneSelection",2),I([r({type:Boolean})],S.prototype,"openAbove",2),I([r({type:Boolean,reflect:!0})],S.prototype,"validationActive",2),I([r({type:Boolean,reflect:!0})],S.prototype,"invalid",2),I([r({type:String,reflect:!0})],S.prototype,"variant",2),I([r({type:String,reflect:!0,attribute:"multi-display"})],S.prototype,"multiDisplay",2),I([r({type:String,attribute:!1})],S.prototype,"searchQuery",2),I([n()],S.prototype,"filteredOptions",2),I([n()],S.prototype,"focused",2),I([n()],S.prototype,"open",2),I([n()],S.prototype,"selectedItems",2),I([n()],S.prototype,"hiddenChipsOpen",2),I([n()],S.prototype,"activeIndex",2),I([n()],S.prototype,"validationErrors",2),I([n()],S.prototype,"validationStatus",2),I([n()],S.prototype,"hasLeftIcon",2),I([n()],S.prototype,"hasRightIcon",2),I([n()],S.prototype,"optionSlotSet",2),I([a(".input-wrapper")],S.prototype,"inputWrapperEl",2),I([a(".dropdown")],S.prototype,"dropdownEl",2),I([a(".hidden-chips-dropdown")],S.prototype,"hiddenDropdownEl",2),I([a(".search-container .input")],S.prototype,"searchInputEl",2),I([a(".overflow-chip")],S.prototype,"overflowChipEl",2),I([a(".combo-box-container")],S.prototype,"comboContainerEl",2),I([l("[data-row-index]")],S.prototype,"rowEls",2),I([h({slot:"icon-left"})],S.prototype,"iconLeftEls",2),I([h({slot:"icon-right"})],S.prototype,"iconRightEls",2),S=I([d("sky-combobox")],S);export{S as SkyCombobox};
 //# sourceMappingURL=sky-combobox.js.map