@vonage/vivid 5.15.1 → 5.16.0

package/searchable-select/index.cjs

@@ -1,179 +1,179 @@
-"use strict";const x=require("../bundled/definition3.cjs"),F=require("../bundled/definition9.cjs"),y=require("../bundled/definition2.cjs"),$=require("../bundled/definition12.cjs"),A=require("../bundled/definition16.cjs"),i=require("../bundled/vivid-element.cjs"),D=require("../bundled/mixins.cjs"),E=require("../bundled/definition15.cjs"),z=require("../bundled/scrollIntoView.cjs"),V=require("../bundled/delegates-aria.cjs"),L=require("../bundled/form-associated.cjs"),q=require("../bundled/with-contextual-help.cjs"),M=require("../bundled/with-error-text.cjs"),P=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),w=require("../bundled/affix.cjs"),R=require("../bundled/localized.cjs"),B=require("../bundled/divider.cjs"),p=require("../bundled/when.cjs"),S=require("../bundled/slotted.cjs"),_=require("../bundled/ref.cjs"),m=require("../bundled/repeat.cjs"),O=require("../bundled/class-names.cjs"),W=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}",H='.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';var K=Object.defineProperty,c=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&K(t,e,a),a};const g=8,j=100,k=10,U=s=>typeof s=="string";class r extends q.WithContextualHelp(D.WithFeedback(M.WithErrorText(P.WithSuccessText(N.FormElement(V.DelegatesAria(w.AffixIconWithTrailing(R.Localized(L.FormAssociated(i.VividElement))))))))){constructor(){super(...arguments),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#i={handleChange:(t,e)=>{t.selected&&!this.values.includes(t.value)?this.values=[...this.values,t.value]:!t.selected&&this.values.includes(t.value)&&(this.values=this.values.filter(o=>o!==t.value))}},this.#a=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement("input"),this.setFormValue=(t,e)=>{U(t)||super.setFormValue(t,e)},this._changeDescription="",this.#d=new ResizeObserver(()=>{this.#u()})}openChanged(){this.open||this.#e(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(t=>!this.#h(t))){this.values=this.values.filter(t=>this.#h(t));return}this.value=this.values.length?this.values[0]:"",this.#c(),this.#_(),this.$fastController.isConnected&&this.#u(),this.#g()}}#t(t){this.values=t,this.$emit("change",void 0,{bubbles:!1}),this.$emit("input",void 0,{bubbles:!1})}#b(t){const e=new Set(this.values),o=new Set(t);this.values=[...this.values].filter(a=>o.has(a)).concat([...t].filter(a=>!e.has(a)))}initialValuesChanged(){this.dirtyValue||(this.values=this.initialValues,this.dirtyValue=!1)}#h(t){return this._slottedOptions.some(e=>e.value===t)}valueChanged(t,e){if(super.valueChanged(t,e),!this._areOptionsInitialized)return;const o=this._slottedOptions.some(a=>a.value===e);this.values[0]!==e&&(this.values=o?[e]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(t=>t.value===this.values[0]):-1}set selectedIndex(t){this.value=this._slottedOptions[t]?.value??""}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(t=>this.values.includes(t.value))}_currentSearchTextChanged(){this.#o(),this.$emit("search-text-change",void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??""}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==""?this.#k(this.value)??"":"")}_onInputInput(t){this._currentSearchText=t.target.value}_onInputFocus(t){this.#o()}_onInputBlur(t){this.open=!1,this._currentSearchText=null,this._changeDescription=""}_onInputKeydown(t){if(t.ctrlKey||t.shiftKey)return!0;switch(t.key){case"Enter":return this.#x(),this._inputValue===""&&(this.open=!this.open),!1;case"Escape":this.open=!1;break;case"Home":if(!this.open){this.open=!0;break}return this.#w(),!1;case"End":if(!this.open){this.open=!0;break}return this.#y(),!1;case"PageUp":if(!this.open){this.open=!0;break}return this.#$(),!1;case"PageDown":if(!this.open){this.open=!0;break}return this.#O(),!1;case"ArrowUp":if(!this.open){this.open=!0;break}return this.#T(),!1;case"ArrowDown":if(!this.open){this.open=!0;break}return this.#S(),!1;case"ArrowLeft":return this.multiple&&this._inputValue===""&&this.values.length&&!this.externalTags?(this.#l(this.#r(this.values.length)),!1):!0;case"Backspace":return this.multiple&&this._inputValue===""&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||(this.open=!0),!0}return!0}_slottedOptionsChanged(t,e){const o=!!this.querySelectorAll(":not([slot])").length;if(!e.length&&o)return;if(this._areOptionsInitialized=!0,t){this._slottedDisabledOptions=[];for(const n of t)i.Observable.getNotifier(n).unsubscribe(this.#i,"selected")}if(e)for(const n of e)n._displayCheckmark=!0,i.Observable.getNotifier(n).subscribe(this.#i,"selected");const a=[];for(const n of this._slottedOptions)(n.selected||n.value===this.value||this.values.includes(n.value))&&a.push(n.value),n.disabled&&this._slottedDisabledOptions.push(n);this.#b(a),this.#o(),this.#c()}#i;#_(){for(const t of this._slottedOptions)t.selected=this.values.includes(t.value),this.#m(t)}#p(t){const e=t.value;let o,a=!1;const n=!this.values.includes(e);this.multiple?(n?o=[...this.values,e]:o=this.values.filter(u=>u!==e),a=!0):(n?(o=[e],a=!0):o=[],this.open=!1),this.#t(o);const v=n?this.locale.searchableSelect.optionSelectedMessage(t._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(t._getAccessibleName()),h=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):"";this._changeDescription=`${v} ${h}`,a&&(this._currentSearchText=null)}#a;#s(t){return t.querySelector('[slot="tag-icon"]')}_tagIconSlotName(t){return`_tag-icon-${this.values.indexOf(t)}`}#m(t){if(t.selected&&this.#s(t)){let e=this.#a.get(t);e||(e=this.#s(t).cloneNode(!0),this.#a.set(t,e)),e.slot=this._tagIconSlotName(t.value),this.appendChild(e)}else{const e=this.#a.get(t);e&&(e.remove(),this.#a.delete(t))}}optionFilterChanged(){this.#o()}loadingChanged(t,e){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,t&&!e&&(this._changeDescription="")}#o(){const t=[],e=this.optionFilter??((a,n)=>a.text.toLowerCase().includes(n.toLowerCase()));for(const a of this._slottedOptions??[]){a._vvdSearchText=this.searchText;const n=!this.searchText||e(a,this.searchText);a._isNotMatching=!n,!a.hidden&&n&&t.push(a)}this.#e(null),this._filteredOptions=t;const o=t.filter(a=>!a.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...o]:this._filteredEnabledOptions=o}#e(t){if(typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute("data-highlighted")}if(typeof t=="number"&&(this._filteredEnabledOptions.length?t=Math.max(0,Math.min(this._filteredEnabledOptions.length-1,t)):t=null),this._highlightedOptionIndex=t,typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute("data-highlighted",""),z.scrollIntoView(e,this._listbox,"nearest"),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#x(){if(this._highlightedOptionIndex===null)return;const t=this._filteredEnabledOptions[this._highlightedOptionIndex];if(t.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}this.#p(t)}#w(){this.#e(0)}#y(){this.#e(this._filteredEnabledOptions.length-1)}#$(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-k)}#O(){this.#e((this._highlightedOptionIndex??-1)+k)}#T(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#S(){this.#e((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(t){return this._slottedOptions.find(o=>o.value===t).label}_tagConnotationForValue(t){return this._slottedOptions.find(o=>o.value===t).tagConnotation}_isTagDisabled(t){const e=this._slottedOptions.find(o=>o.value===t);return this.disabled||e.disabled}#k(t){return this._slottedOptions?.find(o=>o.value===t)?.label}#n(t,e,o){const a=document.createElement(this._optionTagTagName);a.label=t,a.removable=e,a.style.cssText="position: absolute; visibility: hidden;",a.hasIconPlaceholder=o,this.shadowRoot.appendChild(a);const n=a.getBoundingClientRect().width;return a.remove(),n}#u(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}const t=this._contentArea.getBoundingClientRect().width,e=[[]];let o=0,a=j,n;for(n=this.values.length-1;n>=0;n--){const h=this.maxLines&&o===this.maxLines-1,u=this.#n(this._tagLabelForValue(this.values[n]),!0,this.#s(this.selectedOptions[n])!==null),l={value:this.values[n],width:u};let d=0;if(h){const T=n;T&&(d=g+this.#n(T.toString(),!1,!1))}if(a+g+u+d>t){if(h)if(n===this.values.length-1)e[o].unshift(l),a+=g+u;else break;else e.push([]),o++,e[o].unshift(l),a=u;continue}e[o].unshift(l),a+=g+u}this._numElidedTags=n+1,e.reverse();for(let h=0;h<e.length-1;h++){let u=e[h].map(l=>l.width).reduce((l,d)=>l+d,0)+(e[h].length-1)*g;for(h===0&&this._numElidedTags&&(u+=g+this.#n(this._numElidedTags.toString(),!1,!1));e[h+1].length&&u+g+e[h+1][0].width<=t;){const l=e[h+1].shift();e[h].push(l),u+=g+l.width}}const v=e.map(h=>h.map(u=>u.value));this._tagRows=v.slice(0,-1),this._lastTagRow=v.slice(-1)[0]}_onTagRemoved(t){this.#t(this.values.filter(e=>e!==t)),this.#o()}_onTagKeydown(t){const e=parseInt(t.target.dataset.index);switch(t.key){case"Backspace":case"Delete":case"Enter":case" ":{this._onTagRemoved(this.values[e]),i.Updates.process(),this.#l(this.#C(e));break}case"ArrowLeft":this.#l(this.#r(e)??e);break;case"ArrowRight":this.#l(this.#v(e));break}return!0}#l(t){t===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus()}#r(t){if(!this.values.length)return null;for(let e=t-1;e>=0;e--)if(!this._isTagDisabled(this.values[e]))return e;return null}#v(t){if(!this.values.length)return null;for(let e=t+1;e<this.values.length;e++)if(!this._isTagDisabled(this.values[e]))return e;return null}#C(t){return this.#v(t-1)??this.#r(t)}_onListboxClick(t){if(this.disabled)return;const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(e?.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}e&&!e.disabled&&this.#p(e)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#t(this.selectedOptions.filter(t=>t.disabled).map(t=>t.value))}maxSelectedChanged(){this.#c()}#c(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!="number"||this.maxSelected<=0)return;const t=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){const e=t.filter(o=>!this.selectedOptions.includes(o));for(const o of e)o.disabled=!0}else for(const e of t)e.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(t=>!this._slottedDisabledOptions.includes(t)&&!t.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){const t=this.values;if(!this.multiple||!this._slottedOptions)return!1;const e=this._selectableOptions;if(e.length===0)return!1;const o=new Set(t);return e.every(a=>o.has(a.value))}_toggleSelectAll(){const t=this._selectableOptions.map(a=>a.value);if(this._isAllSelected){const a=this.values.filter(n=>!t.includes(n));this.#t(a),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}const e=t.filter(a=>!this.values.includes(a)),o=[...this.values,...e];this.#t(o),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#f(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(t,e){super.nameChanged(t,e),this.#g()}#g(){if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of this.values)t.append(this.name,e);this.setFormValue(t)}}formResetCallback(){super.formResetCallback(),this.#t(this.#f())}#d;_onFieldsetClick(t){this.disabled||t.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#f()),this.#d.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#d.disconnect()}validate(){super.validate(this._input??void 0)}focus(t){this._input?.focus(t)}_onMouseDown(t){const e=t.composedPath()[0];return!t.defaultPrevented&&e!==this._input&&!this._isFromContextualHelp(t)?(this._input.focus(),!1):!0}}c([i.attr],r.prototype,"appearance");c([i.attr],r.prototype,"shape");c([i.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown");c([i.attr],r.prototype,"placeholder");c([i.attr({mode:"boolean"})],r.prototype,"open");c([i.attr({mode:"boolean"})],r.prototype,"multiple");c([i.attr({attribute:"external-tags",mode:"boolean"})],r.prototype,"externalTags");c([i.attr({attribute:"max-lines",converter:i.nullableNumberConverter})],r.prototype,"maxLines");c([i.observable],r.prototype,"values");c([i.observable],r.prototype,"initialValues");c([i.observable],r.prototype,"_input");c([i.observable],r.prototype,"_currentSearchText");c([i.observable],r.prototype,"_slottedOptions");c([i.observable],r.prototype,"optionFilter");c([i.observable],r.prototype,"_filteredOptions");c([i.observable],r.prototype,"_filteredEnabledOptions");c([i.attr({mode:"boolean"})],r.prototype,"loading");c([i.observable],r.prototype,"_highlightedOptionIndex");c([i.observable],r.prototype,"_contentArea");c([i.observable],r.prototype,"_numElidedTags");c([i.observable],r.prototype,"_tagRows");c([i.observable],r.prototype,"_lastTagRow");c([i.observable],r.prototype,"_listbox");c([i.attr({mode:"boolean"})],r.prototype,"clearable");c([i.attr({attribute:"max-selected",converter:i.nullableNumberConverter})],r.prototype,"maxSelected");c([i.observable],r.prototype,"_slottedDisabledOptions");c([i.attr({attribute:"enable-select-all",mode:"boolean"})],r.prototype,"enableSelectAll");c([i.attr({attribute:"select-all-text"})],r.prototype,"selectAllText");c([i.attr({attribute:"deselect-all-text"})],r.prototype,"deselectAllText");c([i.observable],r.prototype,"_selectAllOption");c([i.observable],r.prototype,"_changeDescription");c([i.observable],r.prototype,"_anchor");var G=Object.defineProperty,b=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&G(t,e,a),a};class f extends R.Localized(i.VividElement){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit("remove",void 0,{bubbles:!1})}}b([i.attr],f.prototype,"shape");b([i.observable],f.prototype,"connotation");b([i.attr],f.prototype,"label");b([i.attr({mode:"boolean"})],f.prototype,"removable");b([i.attr({mode:"boolean"})],f.prototype,"disabled");b([i.observable],f.prototype,"hasIconPlaceholder");const J=s=>O.classNames(["disabled",s.disabled],[`appearance-${s.appearance}`,!!s.appearance],[`shape-${s.shape}`,!!s.shape],["error",!!s.errorValidationMessage],["success",!!s.successText],["has-highlighted-option",s._highlightedOptionIndex!==null]);function Q(){return i.html`
-		<label for="control" class="label" id="label"> ${s=>s.label} </label>
-	`}function X(){return i.html`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/slotted.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/affix.cjs`),u=require(`../bundled/delegates-aria.cjs`),d=require(`../bundled/definition5.cjs`),f=require(`../bundled/form-associated.cjs`),p=require(`../bundled/form-element.cjs`),m=require(`../bundled/with-success-text.cjs`),h=require(`../bundled/with-error-text.cjs`),g=require(`../bundled/with-contextual-help.cjs`),_=require(`../bundled/definition6.cjs`),v=require(`../bundled/definition8.cjs`),y=require(`../bundled/divider.cjs`),b=require(`../bundled/mixins.cjs`),x=require(`../bundled/definition12.cjs`),S=require(`../bundled/definition16.cjs`),C=require(`../bundled/scrollIntoView.cjs`);var w=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s;display:flex}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{flex-direction:column;flex:1;gap:8px;min-block-size:24px;display:flex;overflow:hidden}.tag-row{gap:8px;inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:24px;font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:20px}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}`,T=`.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{box-sizing:border-box;background-color:var(--fill-color);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;vertical-align:middle;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in srgb, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in srgb, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}`,E=8,D=100,O=10,k=e=>typeof e==`string`,A=class extends g.t(b.t(h.t(m.t(p.t(u.t(l.n(e.t(f.n(t.t))))))))){constructor(...e){super(...e),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{k(e)||super.setFormValue(e,t)},this._changeDescription=``}openChanged(){this.open||this.#u(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(e=>!this.#n(e))){this.values=this.values.filter(e=>this.#n(e));return}this.value=this.values.length?this.values[0]:``,this.#T(),this.#i(),this.$fastController.isConnected&&this.#b(),this.#D()}}#e(e){this.values=e,this.$emit(`change`,void 0,{bubbles:!1}),this.$emit(`input`,void 0,{bubbles:!1})}#t(e){let t=new Set(this.values),n=new Set(e);this.values=[...this.values].filter(e=>n.has(e)).concat([...e].filter(e=>!t.has(e)))}initialValuesChanged(){this.dirtyValue||=(this.values=this.initialValues,!1)}#n(e){return this._slottedOptions.some(t=>t.value===e)}valueChanged(e,t){if(super.valueChanged(e,t),!this._areOptionsInitialized)return;let n=this._slottedOptions.some(e=>e.value===t);this.values[0]!==t&&(this.values=n?[t]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(e=>e.value===this.values[0]):-1}set selectedIndex(e){this.value=this._slottedOptions[e]?.value??``}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(e=>this.values.includes(e.value))}_currentSearchTextChanged(){this.#l(),this.$emit(`search-text-change`,void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??``}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==``?this.#v(this.value)??``:``)}_onInputInput(e){this._currentSearchText=e.target.value}_onInputFocus(e){this.#l()}_onInputBlur(e){this.open=!1,this._currentSearchText=null,this._changeDescription=``}_onInputKeydown(e){if(e.ctrlKey||e.shiftKey)return!0;switch(e.key){case`Enter`:return this.#d(),this._inputValue===``&&(this.open=!this.open),!1;case`Escape`:this.open=!1;break;case`Home`:if(!this.open){this.open=!0;break}return this.#f(),!1;case`End`:if(!this.open){this.open=!0;break}return this.#p(),!1;case`PageUp`:if(!this.open){this.open=!0;break}return this.#m(),!1;case`PageDown`:if(!this.open){this.open=!0;break}return this.#h(),!1;case`ArrowUp`:if(!this.open){this.open=!0;break}return this.#g(),!1;case`ArrowDown`:if(!this.open){this.open=!0;break}return this.#_(),!1;case`ArrowLeft`:return this.multiple&&this._inputValue===``&&this.values.length&&!this.externalTags?(this.#x(this.#S(this.values.length)),!1):!0;case`Backspace`:return this.multiple&&this._inputValue===``&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||=!0,!0}return!0}_slottedOptionsChanged(e,n){let r=!!this.querySelectorAll(`:not([slot])`).length;if(!n.length&&r)return;if(this._areOptionsInitialized=!0,e){this._slottedDisabledOptions=[];for(let n of e)t.w.getNotifier(n).unsubscribe(this.#r,`selected`)}if(n)for(let e of n)e._displayCheckmark=!0,t.w.getNotifier(e).subscribe(this.#r,`selected`);let i=[];for(let e of this._slottedOptions)(e.selected||e.value===this.value||this.values.includes(e.value))&&i.push(e.value),e.disabled&&this._slottedDisabledOptions.push(e);this.#t(i),this.#l(),this.#T()}#r={handleChange:(e,t)=>{e.selected&&!this.values.includes(e.value)?this.values=[...this.values,e.value]:!e.selected&&this.values.includes(e.value)&&(this.values=this.values.filter(t=>t!==e.value))}};#i(){for(let e of this._slottedOptions)e.selected=this.values.includes(e.value),this.#c(e)}#a(e){let t=e.value,n,r=!1,i=!this.values.includes(t);this.multiple?(n=i?[...this.values,t]:this.values.filter(e=>e!==t),r=!0):(i?(n=[t],r=!0):n=[],this.open=!1),this.#e(n),this._changeDescription=`${i?this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName())} ${this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):``}`,r&&(this._currentSearchText=null)}#o=new Map;#s(e){return e.querySelector(`[slot="tag-icon"]`)}_tagIconSlotName(e){return`_tag-icon-${this.values.indexOf(e)}`}#c(e){if(e.selected&&this.#s(e)){let t=this.#o.get(e);t||(t=this.#s(e).cloneNode(!0),this.#o.set(e,t)),t.slot=this._tagIconSlotName(e.value),this.appendChild(t)}else{let t=this.#o.get(e);t&&(t.remove(),this.#o.delete(e))}}optionFilterChanged(){this.#l()}loadingChanged(e,t){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,e&&!t&&(this._changeDescription=``)}#l(){let e=[],t=this.optionFilter??((e,t)=>e.text.toLowerCase().includes(t.toLowerCase()));for(let n of this._slottedOptions??[]){n._vvdSearchText=this.searchText;let r=!this.searchText||t(n,this.searchText);n._isNotMatching=!r,!n.hidden&&r&&e.push(n)}this.#u(null),this._filteredOptions=e;let n=e.filter(e=>!e.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...n]:this._filteredEnabledOptions=n}#u(e){if(typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute(`data-highlighted`)}if(typeof e==`number`&&(e=this._filteredEnabledOptions.length?Math.max(0,Math.min(this._filteredEnabledOptions.length-1,e)):null),this._highlightedOptionIndex=e,typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute(`data-highlighted`,``),C.t(e,this._listbox,`nearest`),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#d(){if(this._highlightedOptionIndex===null)return;let e=this._filteredEnabledOptions[this._highlightedOptionIndex];if(e.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}this.#a(e)}#f(){this.#u(0)}#p(){this.#u(this._filteredEnabledOptions.length-1)}#m(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-O)}#h(){this.#u((this._highlightedOptionIndex??-1)+O)}#g(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#_(){this.#u((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(e){return this._slottedOptions.find(t=>t.value===e).label}_tagConnotationForValue(e){return this._slottedOptions.find(t=>t.value===e).tagConnotation}_isTagDisabled(e){let t=this._slottedOptions.find(t=>t.value===e);return this.disabled||t.disabled}#v(e){return this._slottedOptions?.find(t=>t.value===e)?.label}#y(e,t,n){let r=document.createElement(this._optionTagTagName);r.label=e,r.removable=t,r.style.cssText=`position: absolute; visibility: hidden;`,r.hasIconPlaceholder=n,this.shadowRoot.appendChild(r);let i=r.getBoundingClientRect().width;return r.remove(),i}#b(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}let e=this._contentArea.getBoundingClientRect().width,t=[[]],n=0,r=D,i;for(i=this.values.length-1;i>=0;i--){let a=this.maxLines&&n===this.maxLines-1,o=this.#y(this._tagLabelForValue(this.values[i]),!0,this.#s(this.selectedOptions[i])!==null),s={value:this.values[i],width:o},c=0;if(a){let e=i;e&&(c=E+this.#y(e.toString(),!1,!1))}if(r+E+o+c>e){if(a)if(i===this.values.length-1)t[n].unshift(s),r+=E+o;else break;else t.push([]),n++,t[n].unshift(s),r=o;continue}t[n].unshift(s),r+=E+o}this._numElidedTags=i+1,t.reverse();for(let n=0;n<t.length-1;n++){let r=t[n].map(e=>e.width).reduce((e,t)=>e+t,0)+(t[n].length-1)*E;for(n===0&&this._numElidedTags&&(r+=E+this.#y(this._numElidedTags.toString(),!1,!1));t[n+1].length&&r+E+t[n+1][0].width<=e;){let e=t[n+1].shift();t[n].push(e),r+=E+e.width}}let a=t.map(e=>e.map(e=>e.value));this._tagRows=a.slice(0,-1),this._lastTagRow=a.slice(-1)[0]}_onTagRemoved(e){this.#e(this.values.filter(t=>t!==e)),this.#l()}_onTagKeydown(e){let n=parseInt(e.target.dataset.index);switch(e.key){case`Backspace`:case`Delete`:case`Enter`:case` `:this._onTagRemoved(this.values[n]),t.O.process(),this.#x(this.#w(n));break;case`ArrowLeft`:this.#x(this.#S(n)??n);break;case`ArrowRight`:this.#x(this.#C(n));break}return!0}#x(e){e===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${e}"]`)?.focus()}#S(e){if(!this.values.length)return null;for(let t=e-1;t>=0;t--)if(!this._isTagDisabled(this.values[t]))return t;return null}#C(e){if(!this.values.length)return null;for(let t=e+1;t<this.values.length;t++)if(!this._isTagDisabled(this.values[t]))return t;return null}#w(e){return this.#C(e-1)??this.#S(e)}_onListboxClick(e){if(this.disabled)return;let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t?.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}t&&!t.disabled&&this.#a(t)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#e(this.selectedOptions.filter(e=>e.disabled).map(e=>e.value))}maxSelectedChanged(){this.#T()}#T(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!=`number`||this.maxSelected<=0)return;let e=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){let t=e.filter(e=>!this.selectedOptions.includes(e));for(let e of t)e.disabled=!0}else for(let t of e)t.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(e=>!this._slottedDisabledOptions.includes(e)&&!e.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){let e=this.values;if(!this.multiple||!this._slottedOptions)return!1;let t=this._selectableOptions;if(t.length===0)return!1;let n=new Set(e);return t.every(e=>n.has(e.value))}_toggleSelectAll(){let e=this._selectableOptions.map(e=>e.value);if(this._isAllSelected){let t=this.values.filter(t=>!e.includes(t));this.#e(t),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}let t=e.filter(e=>!this.values.includes(e)),n=[...this.values,...t];this.#e(n),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#E(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(e,t){super.nameChanged(e,t),this.#D()}#D(){if(!this.name)this.setFormValue(null);else{let e=new FormData;for(let t of this.values)e.append(this.name,t);this.setFormValue(e)}}formResetCallback(){super.formResetCallback(),this.#e(this.#E())}#O=new ResizeObserver(()=>{this.#b()});_onFieldsetClick(e){this.disabled||e.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#E()),this.#O.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#O.disconnect()}validate(){super.validate(this._input??void 0)}focus(e){this._input?.focus(e)}_onMouseDown(e){let t=e.composedPath()[0];return!e.defaultPrevented&&t!==this._input&&!this._isFromContextualHelp(e)?(this._input.focus(),!1):!0}};s.t([t.l],A.prototype,`appearance`,void 0),s.t([t.l],A.prototype,`shape`,void 0),s.t([t.l({mode:`boolean`,attribute:`fixed-dropdown`})],A.prototype,`fixedDropdown`,void 0),s.t([t.l],A.prototype,`placeholder`,void 0),s.t([t.l({mode:`boolean`})],A.prototype,`open`,void 0),s.t([t.l({mode:`boolean`})],A.prototype,`multiple`,void 0),s.t([t.l({attribute:`external-tags`,mode:`boolean`})],A.prototype,`externalTags`,void 0),s.t([t.l({attribute:`max-lines`,converter:t.u})],A.prototype,`maxLines`,void 0),s.t([t.T],A.prototype,`values`,void 0),s.t([t.T],A.prototype,`initialValues`,void 0),s.t([t.T],A.prototype,`_input`,void 0),s.t([t.T],A.prototype,`_currentSearchText`,void 0),s.t([t.T],A.prototype,`_slottedOptions`,void 0),s.t([t.T],A.prototype,`optionFilter`,void 0),s.t([t.T],A.prototype,`_filteredOptions`,void 0),s.t([t.T],A.prototype,`_filteredEnabledOptions`,void 0),s.t([t.l({mode:`boolean`})],A.prototype,`loading`,void 0),s.t([t.T],A.prototype,`_highlightedOptionIndex`,void 0),s.t([t.T],A.prototype,`_contentArea`,void 0),s.t([t.T],A.prototype,`_numElidedTags`,void 0),s.t([t.T],A.prototype,`_tagRows`,void 0),s.t([t.T],A.prototype,`_lastTagRow`,void 0),s.t([t.T],A.prototype,`_listbox`,void 0),s.t([t.l({mode:`boolean`})],A.prototype,`clearable`,void 0),s.t([t.l({attribute:`max-selected`,converter:t.u})],A.prototype,`maxSelected`,void 0),s.t([t.T],A.prototype,`_slottedDisabledOptions`,void 0),s.t([t.l({attribute:`enable-select-all`,mode:`boolean`})],A.prototype,`enableSelectAll`,void 0),s.t([t.l({attribute:`select-all-text`})],A.prototype,`selectAllText`,void 0),s.t([t.l({attribute:`deselect-all-text`})],A.prototype,`deselectAllText`,void 0),s.t([t.T],A.prototype,`_selectAllOption`,void 0),s.t([t.T],A.prototype,`_changeDescription`,void 0),s.t([t.T],A.prototype,`_anchor`,void 0);var j=class extends e.t(t.t){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit(`remove`,void 0,{bubbles:!1})}};s.t([t.l],j.prototype,`shape`,void 0),s.t([t.T],j.prototype,`connotation`,void 0),s.t([t.l],j.prototype,`label`,void 0),s.t([t.l({mode:`boolean`})],j.prototype,`removable`,void 0),s.t([t.l({mode:`boolean`})],j.prototype,`disabled`,void 0),s.t([t.T],j.prototype,`hasIconPlaceholder`,void 0);var M=e=>c.t([`disabled`,e.disabled],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`error`,!!e.errorValidationMessage],[`success`,!!e.successText],[`has-highlighted-option`,e._highlightedOptionIndex!==null]);function N(){return t.d`
+		<label for="control" class="label" id="label"> ${e=>e.label} </label>
+	`}function P(){return t.d`
 		<span
 			id="selection-count"
 			class="selection-count"
-			aria-label="${s=>s.locale.searchableSelect.maxSelectedMessage(s.values.length,s.maxSelected)}"
-			>(${s=>`${s.values.length}/${s.maxSelected}`})</span
+			aria-label="${e=>e.locale.searchableSelect.maxSelectedMessage(e.values.length,e.maxSelected)}"
+			>(${e=>`${e.values.length}/${e.maxSelected}`})</span
 		>
-	`}const C=(s,t)=>{const e=s.tagFor(f);return i.html`
+	`}var F=(e,n)=>{let r=e.tagFor(j);return t.d`
 		<div class="tag-wrapper">
-			<${e}
+			<${r}
 				class="tag"
 				tabindex="-1"
-				data-index="${(o,a)=>t(a).values.indexOf(o)}"
+				data-index="${(e,t)=>n(t).values.indexOf(e)}"
 				removable
-				:label="${(o,a)=>t(a)._tagLabelForValue(o)}"
-				:shape="${(o,a)=>t(a).shape}"
-				:connotation="${(o,a)=>t(a)._tagConnotationForValue(o)}"
-				?disabled="${(o,a)=>t(a)._isTagDisabled(o)}"
-				@remove="${(o,a)=>t(a)._onTagRemoved(o)}"
-				@keydown="${(o,a)=>t(a)._onTagKeydown(a.event)}"
+				:label="${(e,t)=>n(t)._tagLabelForValue(e)}"
+				:shape="${(e,t)=>n(t).shape}"
+				:connotation="${(e,t)=>n(t)._tagConnotationForValue(e)}"
+				?disabled="${(e,t)=>n(t)._isTagDisabled(e)}"
+				@remove="${(e,t)=>n(t)._onTagRemoved(e)}"
+				@keydown="${(e,t)=>n(t)._onTagKeydown(t.event)}"
 				@mousedown="${()=>!1}">
-				<slot slot="icon" name="${(o,a)=>t(a)._tagIconSlotName(o)}"></slot>
-			</${e}>
+				<slot slot="icon" name="${(e,t)=>n(t)._tagIconSlotName(e)}"></slot>
+			</${r}>
 		</div>
-	`},I=(s,t)=>{const e=s.tagFor(f);return i.html`
-		<${e}
+	`},I=(e,n)=>{let r=e.tagFor(j);return t.d`
+		<${r}
 			class="tag"
 			tabindex="-1"
-			:label="${(o,a)=>t(o,a)._numElidedTags.toString()}"
-			:shape="${(o,a)=>t(o,a).shape}"
-			?disabled="${(o,a)=>t(o,a).disabled}"
+			:label="${(e,t)=>n(e,t)._numElidedTags.toString()}"
+			:shape="${(e,t)=>n(e,t).shape}"
+			?disabled="${(e,t)=>n(e,t).disabled}"
 			@mousedown="${()=>!1}">
-		</${e}>
-	`};function Y(s){const t=s.tagFor(x.Button),e=s.tagFor(A.ProgressRing),o=w.affixIconTemplateFactory(s),a=x.chevronTemplateFactory(s),n=C(s,l=>l.parent),v=C(s,l=>l.parentContext.parent),h=I(s,(l,d)=>l),u=I(s,(l,d)=>d.parent);return i.html`
+		</${r}>
+	`};function L(e){let a=e.tagFor(_.i),o=e.tagFor(d.r),s=l.a(e),f=_.r(e),p=F(e,e=>e.parent),m=F(e,e=>e.parentContext.parent),h=I(e,(e,t)=>e),g=I(e,(e,t)=>t.parent);return t.d`
 		<div
-			class="fieldset ${J}"
-			@click="${(l,d)=>l._onFieldsetClick(d.event)}"
-			${_.ref("_anchor")}
+			class="fieldset ${M}"
+			@click="${(e,t)=>e._onFieldsetClick(t.event)}"
+			${r.t(`_anchor`)}
 		>
-			${l=>o(l.icon,w.IconWrapper.Slot)}
-			<div class="content-area" ${_.ref("_contentArea")}>
-				${m.repeat(l=>l._tagRows,i.html`
+			${e=>s(e.icon,l.i.Slot)}
+			<div class="content-area" ${r.t(`_contentArea`)}>
+				${n.n(e=>e._tagRows,t.d`
 						<div class="tag-row">
-							${p.when((l,d)=>d.isFirst&&d.parent._numElidedTags,u)}
-							${m.repeat(l=>l,v)}
+							${i.t((e,t)=>t.isFirst&&t.parent._numElidedTags,g)}
+							${n.n(e=>e,m)}
 						</div>
 					`,{positioning:!0})}
 				<div
-					class="tag-row ${l=>O.classNames(["contains-only-input",l._tagRows.length>0&&l._lastTagRow.length===0])}"
+					class="tag-row ${e=>c.t([`contains-only-input`,e._tagRows.length>0&&e._lastTagRow.length===0])}"
 				>
-					${p.when(l=>l._tagRows.length===0&&l._numElidedTags,h)}
-					${m.repeat(l=>l._lastTagRow,n)}
+					${i.t(e=>e._tagRows.length===0&&e._numElidedTags,h)}
+					${n.n(e=>e._lastTagRow,p)}
 					<input
 						id="control"
 						class="control"
 						autocomplete="off"
 						aria-controls="listbox"
-						aria-describedby="${l=>l._feedbackDescribedBy} ${l=>l.multiple&&l.maxSelected&&l.maxSelected>=1?"selection-count":null}"
-						${V.delegateAria({role:"combobox",ariaAutoComplete:"list",ariaHasPopup:"listbox",ariaExpanded:l=>l.open})}
-						placeholder="${l=>l.multiple&&l.values.length?"":l.placeholder}"
+						aria-describedby="${e=>e._feedbackDescribedBy} ${e=>e.multiple&&e.maxSelected&&e.maxSelected>=1?`selection-count`:null}"
+						${u.n({role:`combobox`,ariaAutoComplete:`list`,ariaHasPopup:`listbox`,ariaExpanded:e=>e.open})}
+						placeholder="${e=>e.multiple&&e.values.length?``:e.placeholder}"
 						type="text"
-						?disabled="${l=>l.disabled}"
-						:value="${l=>l._inputValue}"
-						@input="${(l,d)=>{l._onInputInput(d.event),d.event.stopPropagation()}}"
-						@change="${(l,d)=>{d.event.stopPropagation()}}"
-						@focus="${(l,d)=>l._onInputFocus(d.event)}"
-						@blur="${(l,d)=>l._onInputBlur(d.event)}"
-						@keydown="${(l,d)=>l._onInputKeydown(d.event)}"
-						${_.ref("_input")}
+						?disabled="${e=>e.disabled}"
+						:value="${e=>e._inputValue}"
+						@input="${(e,t)=>{e._onInputInput(t.event),t.event.stopPropagation()}}"
+						@change="${(e,t)=>{t.event.stopPropagation()}}"
+						@focus="${(e,t)=>e._onInputFocus(t.event)}"
+						@blur="${(e,t)=>e._onInputBlur(t.event)}"
+						@keydown="${(e,t)=>e._onInputKeydown(t.event)}"
+						${r.t(`_input`)}
 					/>
 				</div>
 			</div>
 			<slot name="meta"></slot>
-			${p.when(l=>l._shouldShowClearButton,i.html`<${t}
-					aria-label="${l=>l.locale.searchableSelect.clearButtonLabel}"
-					@click="${l=>l._onClearButtonClick()}"
+			${i.t(e=>e._shouldShowClearButton,t.d`<${a}
+					aria-label="${e=>e.locale.searchableSelect.clearButtonLabel}"
+					@click="${e=>e._onClearButtonClick()}"
 					@mousedown="${()=>!1}"
-					?disabled="${l=>l.disabled}"
-					:shape="${l=>l.shape}"
+					?disabled="${e=>e.disabled}"
+					:shape="${e=>e.shape}"
 					size="super-condensed"
 					icon="close-line"
 					appearance="ghost-light"
 					tabindex="0"
-				></${t}>`)}
-			<div @mousedown="${()=>!1}" @click="${l=>l._onChevronClick()}">
-				${p.when(l=>l.loading,i.html`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`)}
-				${p.when(l=>!l.loading,a)}
+				></${a}>`)}
+			<div @mousedown="${()=>!1}" @click="${e=>e._onChevronClick()}">
+				${i.t(e=>e.loading,t.d`<${o} indeterminate size="-6" aria-hidden="true"></${o}>`)}
+				${i.t(e=>!e.loading,f)}
 			</div>
 		</div>
-	`}function Z(s){return s.open&&s.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(s.getBoundingClientRect().width)}px`:null}function ee(s){const t=s.tagFor($.ListboxOption),e=s.tagFor(B.Divider);return i.html`
-    <${t}
+	`}function R(e){return e.open&&e.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function z(e){let n=e.tagFor(x.r),i=e.tagFor(y.t);return t.d`
+    <${n}
       data-select-all
       tabindex="-1"
-      :text="${o=>o._selectAllLabel}"
-      :selected="${o=>o._isAllSelected}"
+      :text="${e=>e._selectAllLabel}"
+      :selected="${e=>e._isAllSelected}"
       :_displayCheckmark="${()=>!0}"
-      ?disabled="${o=>o._selectableOptions.length===0}"
-      ${_.ref("_selectAllOption")}>
-    </${t}>
-		<${e} class="divider"></${e}>
-  `}function te(s){const t=s.tagFor(F.Popup);return i.html`
+      ?disabled="${e=>e._selectableOptions.length===0}"
+      ${r.t(`_selectAllOption`)}>
+    </${n}>
+		<${i} class="divider"></${i}>
+  `}function B(e){let n=e.tagFor(v.i);return t.d`
 		<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp&&!e._hasSelectionCount}>
-			${p.when(e=>e.label||e._hasSelectionCount,i.html`
+			${i.t(e=>e.label||e._hasSelectionCount,t.d`
 					<div>
-						${p.when(e=>e.label,Q())}
-						${p.when(e=>e._hasSelectionCount,X())}
+						${i.t(e=>e.label,N())}
+						${i.t(e=>e._hasSelectionCount,P())}
 					</div>
 				`)}
-			<slot name="contextual-help" ${S.slotted("_contextualHelpSlottedContent")}></slot>
+			<slot name="contextual-help" ${a.t(`_contextualHelpSlottedContent`)}></slot>
 		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${e=>e._changeDescription}
 		</span>
 		<div>
-			${Y(s)}
+			${L(e)}
 			<div class="popup-wrapper">
-				<${t}
+				<${n}
 					:anchor="${e=>e._anchor}"
 					:open="${e=>e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${Z}"
-					strategy="${e=>e.fixedDropdown?"fixed":"absolute"}">
+					style="${R}"
+					strategy="${e=>e.fixedDropdown?`fixed`:`absolute`}">
 					<div
 						class="listbox"
 						role="listbox"
 						aria-multiselectable="${e=>e.multiple}"
 						aria-required="${e=>e.required}"
-						${_.ref("_listbox")}
-						@click="${(e,o)=>e._onListboxClick(o.event)}"
+						${r.t(`_listbox`)}
+						@click="${(e,t)=>e._onListboxClick(t.event)}"
 						@mousedown="${()=>!1}"
 					>
-						${p.when(e=>e.enableSelectAll&&e.multiple&&!e.maxSelected,ee(s))}
+						${i.t(e=>e.enableSelectAll&&e.multiple&&!e.maxSelected,z(e))}
 						<slot
-							${S.slotted({filter:$.isListboxOption,flatten:!0,property:"_slottedOptions"})}>
+							${a.t({filter:x.i,flatten:!0,property:`_slottedOptions`})}>
 						</slot>
-						${p.when(e=>e._filteredOptions.length===0,i.html`<div class="empty-message">
-								${p.when(e=>e.loading,i.html`<slot name="loading-options">
+						${i.t(e=>e._filteredOptions.length===0,t.d`<div class="empty-message">
+								${i.t(e=>e.loading,t.d`<slot name="loading-options">
 										${e=>e.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`)}
-								${p.when(e=>!e.loading&&e.searchText==="",i.html`<slot name="no-options">
+								${i.t(e=>!e.loading&&e.searchText===``,t.d`<slot name="no-options">
 										${e=>e.locale.searchableSelect.noOptionsMessage}
 									</slot>`)}
-								${p.when(e=>!e.loading&&e.searchText!=="",i.html`<slot name="no-matches">
+								${i.t(e=>!e.loading&&e.searchText!==``,t.d`<slot name="no-matches">
 										${e=>e.locale.searchableSelect.noMatchesMessage}
 									</slot>`)}
 							</div>`)}
 					</div>
-				</${t}>
+				</${n}>
 			</div>
 		</div>
-	`}const ae=s=>{const t=s.tagFor(f,!0);return i.html`
+	`}var V=e=>{let n=e.tagFor(j,!0);return t.d`
 		<template
-			:_optionTagTagName="${()=>t}"
-			@mousedown="${(e,o)=>e._onMouseDown(o.event)}"
+			:_optionTagTagName="${()=>n}"
+			@mousedown="${(e,t)=>e._onMouseDown(t.event)}"
 		>
 			<div class="control-wrapper">
-				${te(s)} ${e=>e._getFeedbackTemplate(s)}
+				${B(e)} ${t=>t._getFeedbackTemplate(e)}
 			</div>
 		</template>
-	`},oe=({shape:s,connotation:t,disabled:e,removable:o})=>O.classNames("base",["disabled",e],["removable",o],[`shape-${s}`,!!s],[`connotation-${t}`,!!t]);function le(s){return i.html`
+	`},H=({shape:e,connotation:t,disabled:n,removable:r})=>c.t(`base`,[`disabled`,n],[`removable`,r],[`shape-${e}`,!!e],[`connotation-${t}`,!!t]);function U(e){return t.d`
 		<span
 			class="remove-button"
-			aria-label="${t=>t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
+			aria-label="${e=>e.locale.searchableSelect.removeTagButtonLabel(e.label)}"
 			role="button"
-			tabindex="${t=>t.disabled?null:0}"
-			@click="${t=>t._onClickRemove()}"
+			tabindex="${e=>e.disabled?null:0}"
+			@click="${e=>e._onClickRemove()}"
 		>
-			<${s} name="close-line"></${s}>
+			<${e} name="close-line"></${e}>
 		</span>
-	`}const ie=s=>{const t=s.tagFor(y.Icon);return i.html`<span class="${oe}" aria-disabled="${e=>e.disabled}">
+	`}var W=t.o(`searchable-select`,A,V,[_.t,v.t,o.t,t.o(`option-tag`,j,e=>{let n=e.tagFor(o.r);return t.d`<span class="${H}" aria-disabled="${e=>e.disabled}">
 		<slot name="icon" aria-hidden="true">
-			${p.when(e=>e.hasIconPlaceholder,i.html`<div class="icon-placeholder"></div>`)}
+			${i.t(e=>e.hasIconPlaceholder,t.d`<div class="icon-placeholder"></div>`)}
 		</slot>
-		${p.when(e=>e.label,e=>i.html`<span class="label">${e.label}</span>`)}
-		${p.when(e=>e.removable,le(t))}
-	</span>`},se=i.defineVividComponent("option-tag",f,ie,[y.iconDefinition],{styles:[H],shadowOptions:{delegatesFocus:!0}}),ne=i.defineVividComponent("searchable-select",r,ae,[x.buttonDefinition,F.popupDefinition,y.iconDefinition,se,A.progressRingDefinition,D.feedbackMessageDefinition,$.listboxOptionDefinition,E.dividerDefinition],{styles:W}),re=i.createRegisterFunction(ne);re();
+		${i.t(e=>e.label,e=>t.d`<span class="label">${e.label}</span>`)}
+		${i.t(e=>e.removable,U(n))}
+	</span>`},[o.t],{styles:[T],shadowOptions:{delegatesFocus:!0}}),d.t,b.a,x.t,S.t],{styles:w});t.s(W)();