@vonage/vivid 5.18.0 → 5.20.0

package/combobox/index.cjs

@@ -1,14 +1,14 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`);require(`../bundled/numberConverter.cjs`);const i=require(`../bundled/decorate.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/form-element.cjs`),c=require(`../bundled/with-success-text.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/listbox.cjs`),f=require(`../bundled/class-names.cjs`),p=require(`../bundled/numbers.cjs`),m=require(`../bundled/strings.cjs`),h=require(`../bundled/form-associated.cjs`),g=require(`../bundled/definition6.cjs`),_=require(`../bundled/definition8.cjs`),v=require(`../bundled/dialog.cjs`),y=require(`../bundled/mixins.cjs`),b=require(`../bundled/text-field.cjs`),x=require(`../bundled/definition17.cjs`);var S=`.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{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}`,C={inline:`inline`,list:`list`,both:`both`,none:`none`},w=class extends u.t(y.t(l.t(c.t(s.t(o.t(h.n(d.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=m.t(`listbox-`),this.maxHeight=0,this.open=!1,this.proxy=document.createElement(`input`)}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||``}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===C.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===C.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===C.both}openChanged(){this.open&&this.enqueueScrollSelectedOptionIntoViewIfNeeded()}get options(){return e.w.track(this,`options`),this.filteredOptions.length?this.filteredOptions:this._options}set options(e){super.options=e}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(e,t){if(this.$fastController.isConnected&&this.options){let e=this.options.findIndex(e=>e.text.toLowerCase()===t.toLowerCase());this.selectedIndex=this.options[this.selectedIndex]?.text===this.options[e]?.text?this.selectedIndex:e}super.valueChanged(e,t)}clickHandler(e){if(!(this.disabled||this._isFromContextualHelp(e))){if(this.open){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(!t||t.disabled)return;this.selectedOptions=[t],this.control.value=t.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(e){this.open&&=(e.stopPropagation(),!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===C.none)&&(this.filter=``),this.filteredOptions=this._options.filter(e=>e.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(e=>{e.hidden=!this.filteredOptions.includes(e)})}focusAndScrollOptionIntoView(){this.contains(document.activeElement)&&(this.control.focus(),this.enqueueScrollSelectedOptionIntoViewIfNeeded())}enqueueScrollSelectedOptionIntoViewIfNeeded(){let e=this.firstSelectedOption;e&&requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})})}focusoutHandler(e){if(this.syncValue(),!this.open)return!0;let t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.open=!1}inputHandler(e){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),e.inputType.includes(`deleteContent`)||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(e){let t=e.key;if(e.ctrlKey||e.shiftKey)return!0;switch(t){case`Enter`:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();break;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;break;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();break;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=p.n(-1,this.options.length-1,t),t!==this.selectedIndex){this.selectedIndex=t;return}super.selectedIndexChanged(e,t)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&--this.selectedIndex}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.text!==``&&e.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,`backward`))}syncValue(){let e=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==e)}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach(e=>{e.selected=t.includes(e)})}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t),this.updateValue();let n=this.getAttribute(`scale`)||this.scale;t.forEach(e=>{n&&(e.setAttribute(`scale`,n),e.scale=n)})}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),e&&this.$emit(`change`)}clearSelectionRange(){let e=this.control.value.length;this.control.setSelectionRange(e,e)}};i.t([e.l({attribute:`autocomplete`,mode:`fromView`})],w.prototype,`autocomplete`,void 0),i.t([e.l],w.prototype,`appearance`,void 0),i.t([e.l],w.prototype,`shape`,void 0),i.t([e.l()],w.prototype,`scale`,void 0),i.t([e.l],w.prototype,`placement`,void 0),i.t([e.l({mode:`boolean`,attribute:`fixed-dropdown`})],w.prototype,`fixedDropdown`,void 0),i.t([e.T],w.prototype,`metaSlottedContent`,void 0),i.t([e.T],w.prototype,`maxHeight`,void 0),i.t([e.l({attribute:`open`,mode:`boolean`})],w.prototype,`open`,void 0),i.t([e.l],w.prototype,`placeholder`,void 0);var T=({icon:e,iconSlottedContent:t,metaSlottedContent:n,errorValidationMessage:r,successText:i,shape:a,scale:o,disabled:s,placeholder:c,label:l,appearance:u,open:d,_activeDescendant:p})=>f.t(`base`,[`disabled`,s],[`shape-${a}`,!!a],[`size-${o}`,!!o],[`placeholder`,!!c],[`appearance-${u}`,!!u],[`no-label`,!l],[`has-icon`,!!e||!!t?.length],[`has-meta`,!!n?.length],[`has-activedescendant`,!!p&&d],[`error`,!!r],[`success`,!!i]);function E(){return e.d` <label for="control" class="label">
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/form-element.cjs`),c=require(`../bundled/with-success-text.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/listbox.cjs`),f=require(`../bundled/class-names.cjs`),p=require(`../bundled/numbers.cjs`),m=require(`../bundled/aria-binding-directive.cjs`),h=require(`../bundled/form-associated.cjs`),g=require(`../bundled/definition6.cjs`),_=require(`../bundled/definition8.cjs`),v=require(`../bundled/dialog.cjs`),y=require(`../bundled/mixins.cjs`),b=require(`../bundled/text-field.cjs`),x=require(`../bundled/definition17.cjs`);var S=`.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{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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)}.base: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}}.base.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)}.base.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}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}`,C={inline:`inline`,list:`list`,both:`both`,none:`none`},w=class extends u.t(y.t(l.t(c.t(s.t(o.t(h.n(d.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=m.r(`listbox-`),this.maxHeight=0,this.open=!1,this.proxy=document.createElement(`input`)}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||``}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===C.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===C.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===C.both}openChanged(){this.open&&this.enqueueScrollSelectedOptionIntoViewIfNeeded()}get options(){return e.k.track(this,`options`),this.filteredOptions.length?this.filteredOptions:this._options}set options(e){super.options=e}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(e,t){if(this.$fastController.isConnected&&this.options){let e=this.options.findIndex(e=>e.text.toLowerCase()===t.toLowerCase()),n=this.options[this.selectedIndex]?.text,r=this.options[e]?.text;this.selectedIndex=n===r?this.selectedIndex:e}super.valueChanged(e,t)}clickHandler(e){if(!(this.disabled||this._isFromContextualHelp(e))){if(this.open){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(!t||t.disabled)return;this.selectedOptions=[t],this.control.value=t.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(e){this.open&&=(e.stopPropagation(),!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===C.none)&&(this.filter=``),this.filteredOptions=this._options.filter(e=>e.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(e=>{e.hidden=!this.filteredOptions.includes(e)})}focusAndScrollOptionIntoView(){this.contains(document.activeElement)&&(this.control.focus(),this.enqueueScrollSelectedOptionIntoViewIfNeeded())}enqueueScrollSelectedOptionIntoViewIfNeeded(){let e=this.firstSelectedOption;e&&requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})})}focusoutHandler(e){if(this.syncValue(),!this.open)return!0;let t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.open=!1}inputHandler(e){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),e.inputType.includes(`deleteContent`)||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(e){let t=e.key;if(e.ctrlKey||e.shiftKey)return!0;switch(t){case`Enter`:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();break;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;break;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();break;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=p.n(-1,this.options.length-1,t),t!==this.selectedIndex){this.selectedIndex=t;return}super.selectedIndexChanged(e,t)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&--this.selectedIndex}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.text!==``&&e.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,`backward`))}syncValue(){let e=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==e)}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach(e=>{e.selected=t.includes(e)})}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t),this.updateValue();let n=this.getAttribute(`scale`)||this.scale;t.forEach(e=>{n&&(e.setAttribute(`scale`,n),e.scale=n)})}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),e&&this.$emit(`change`)}clearSelectionRange(){let e=this.control.value.length;this.control.setSelectionRange(e,e)}};i.t([e.m({attribute:`autocomplete`,mode:`fromView`})],w.prototype,`autocomplete`,void 0),i.t([e.m],w.prototype,`appearance`,void 0),i.t([e.m],w.prototype,`shape`,void 0),i.t([e.m()],w.prototype,`scale`,void 0),i.t([e.m],w.prototype,`placement`,void 0),i.t([e.m({mode:`boolean`,attribute:`fixed-dropdown`})],w.prototype,`fixedDropdown`,void 0),i.t([e.A],w.prototype,`metaSlottedContent`,void 0),i.t([e.A],w.prototype,`maxHeight`,void 0),i.t([e.m({attribute:`open`,mode:`boolean`})],w.prototype,`open`,void 0),i.t([e.m],w.prototype,`placeholder`,void 0);var T=({icon:e,iconSlottedContent:t,metaSlottedContent:n,errorValidationMessage:r,successText:i,shape:a,scale:o,disabled:s,placeholder:c,label:l,appearance:u,open:d,_activeDescendant:p})=>f.t(`base`,[`disabled`,s],[`shape-${a}`,!!a],[`size-${o}`,!!o],[`placeholder`,!!c],[`appearance-${u}`,!!u],[`no-label`,!l],[`has-icon`,!!e||!!t?.length],[`has-meta`,!!n?.length],[`has-activedescendant`,!!p&&d],[`error`,!!r],[`success`,!!i]);function E(){return e.p` <label for="control" class="label">
 		${e=>e.label}
-	</label>`}function D(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function O(i){let a=o.a(i),s=g.r(i);return e.d` <div class="${T}" ${t.t(`_anchor`)}>
+	</label>`}function D(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function O(i){let a=o.a(i),s=g.r(i);return e.p` <div class="${T}" ${n.t(`_anchor`)}>
 		<div
 			class="label-wrapper"
 			?hidden=${e=>!e.label&&!e._hasContextualHelp}
 		>
-			${n.t(e=>e.label,E())}
+			${r.t(e=>e.label,E())}
 			<slot
 				name="contextual-help"
-				${r.t(`_contextualHelpSlottedContent`)}
+				${t.t(`_contextualHelpSlottedContent`)}
 			></slot>
 		</div>
 		<div class="fieldset">
@@ -30,11 +30,11 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 					?disabled="${e=>e.disabled}"
 					:value="${e=>e.value}"
 					@input="${(e,t)=>e.inputHandler(t.event)}"
-					${t.t(`control`)}
+					${n.t(`control`)}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${r.t(`metaSlottedContent`)}></slot>
+				<slot name="meta" ${t.t(`metaSlottedContent`)}></slot>
 				<div
 					@click="${(e,t)=>e._chevronIconClickHandler(t.event)}"
 				>
@@ -42,7 +42,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 				</div>
 			</div>
 		</div>
-	</div>`}var k=e.o(`combobox`,w,n=>{let i=n.tagFor(_.i);return e.d`
+	</div>`}var k=e.u(`combobox`,w,r=>{let i=r.tagFor(_.i);return e.p`
 		<template
 			tabindex="${e=>e.disabled?null:`0`}"
 			class="${e=>f.t([`has-activedescendant`,!!e._activeDescendant&&e.open])}"
@@ -51,25 +51,25 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 			@keydown="${(e,{event:t})=>(e.open&&v.t(t),e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${()=>O(n)}
+				${()=>O(r)}
 				<${i} class="popup"
 					style="${D}"
 					?open="${e=>e.open}"
 					placement="${e=>e.placement??`bottom-start`}"
 					strategy="${e=>e.fixedDropdown?`fixed`:`absolute`}"
-					${t.t(`_popup`)}>
+					${n.t(`_popup`)}>
 					<div id="${e=>e.listboxId}"
 						class="listbox"
 						role="listbox"
 						?disabled="${e=>e.disabled}"
-						${t.t(`listbox`)}>
-						<slot ${r.t({filter:d.t.slottedOptionFilter,flatten:!0,property:`slottedOptions`})}>
+						${n.t(`listbox`)}>
+						<slot ${t.t({filter:d.t.slottedOptionFilter,flatten:!0,property:`slottedOptions`})}>
 						</slot>
 					</div>
 				</${i}>
 			</div>
 			<div class="feedback-wrapper" @click="${(e,t)=>t.event.stopPropagation()}">
-				${e=>e._getFeedbackTemplate(n)}
+				${e=>e._getFeedbackTemplate(r)}
 			</div>
     </template>
-	`},[a.t,_.t,x.t,y.a],{styles:[b.t,S],shadowOptions:{delegatesFocus:!0}});e.s(k)();
+	`},[a.t,_.t,x.t,y.r],{styles:[b.t,S],shadowOptions:{delegatesFocus:!0}});e.d(k)();

package/combobox/index.js

@@ -1,8 +1,7 @@
-import { T as e, d as t, l as n, o as r, s as i, w as a } from "../bundled/vivid-element.js";
-import { t as o } from "../bundled/ref.js";
-import { t as s } from "../bundled/when.js";
-import { t as c } from "../bundled/slotted.js";
-import "../bundled/numberConverter.js";
+import { A as e, d as t, k as n, m as r, p as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/slotted.js";
+import { t as s } from "../bundled/ref.js";
+import { t as c } from "../bundled/when.js";
 import { t as l } from "../bundled/decorate.js";
 import { t as u } from "../bundled/definition2.js";
 import { a as d, i as f, t as p } from "../bundled/affix.js";
@@ -13,16 +12,16 @@ import { t as _ } from "../bundled/with-contextual-help.js";
 import { t as v } from "../bundled/listbox.js";
 import { t as y } from "../bundled/class-names.js";
 import { n as b } from "../bundled/numbers.js";
-import { t as x } from "../bundled/strings.js";
+import { r as x } from "../bundled/aria-binding-directive.js";
 import { n as S } from "../bundled/form-associated.js";
 import { r as C } from "../bundled/definition6.js";
 import { i as w, t as T } from "../bundled/definition8.js";
 import { t as E } from "../bundled/dialog.js";
-import { a as D, t as O } from "../bundled/mixins.js";
+import { r as D, t as O } from "../bundled/mixins.js";
 import { t as k } from "../bundled/text-field.js";
 import { t as A } from "../bundled/definition17.js";
 //#region src/lib/combobox/combobox.scss?inline
-var j = ".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{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}", M = {
+var j = ".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{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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)}.base: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}}.base.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)}.base.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}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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}", M = {
 	inline: "inline",
 	list: "list",
 	both: "both",
@@ -50,7 +49,7 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 	}
 	get options() {
-		return a.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+		return n.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
 	}
 	set options(e) {
 		super.options = e;
@@ -61,8 +60,8 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 	}
 	valueChanged(e, t) {
 		if (this.$fastController.isConnected && this.options) {
-			let e = this.options.findIndex((e) => e.text.toLowerCase() === t.toLowerCase());
-			this.selectedIndex = this.options[this.selectedIndex]?.text === this.options[e]?.text ? this.selectedIndex : e;
+			let e = this.options.findIndex((e) => e.text.toLowerCase() === t.toLowerCase()), n = this.options[this.selectedIndex]?.text, r = this.options[e]?.text;
+			this.selectedIndex = n === r ? this.selectedIndex : e;
 		}
 		super.valueChanged(e, t);
 	}
@@ -188,21 +187,21 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		this.control.setSelectionRange(e, e);
 	}
 };
-l([n({
+l([r({
 	attribute: "autocomplete",
 	mode: "fromView"
-})], N.prototype, "autocomplete", void 0), l([n], N.prototype, "appearance", void 0), l([n], N.prototype, "shape", void 0), l([n()], N.prototype, "scale", void 0), l([n], N.prototype, "placement", void 0), l([n({
+})], N.prototype, "autocomplete", void 0), l([r], N.prototype, "appearance", void 0), l([r], N.prototype, "shape", void 0), l([r()], N.prototype, "scale", void 0), l([r], N.prototype, "placement", void 0), l([r({
 	mode: "boolean",
 	attribute: "fixed-dropdown"
-})], N.prototype, "fixedDropdown", void 0), l([e], N.prototype, "metaSlottedContent", void 0), l([e], N.prototype, "maxHeight", void 0), l([n({
+})], N.prototype, "fixedDropdown", void 0), l([e], N.prototype, "metaSlottedContent", void 0), l([e], N.prototype, "maxHeight", void 0), l([r({
 	attribute: "open",
 	mode: "boolean"
-})], N.prototype, "open", void 0), l([n], N.prototype, "placeholder", void 0);
+})], N.prototype, "open", void 0), l([r], N.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
 var P = ({ icon: e, iconSlottedContent: t, metaSlottedContent: n, errorValidationMessage: r, successText: i, shape: a, scale: o, disabled: s, placeholder: c, label: l, appearance: u, open: d, _activeDescendant: f }) => y("base", ["disabled", s], [`shape-${a}`, !!a], [`size-${o}`, !!o], ["placeholder", !!c], [`appearance-${u}`, !!u], ["no-label", !l], ["has-icon", !!e || !!t?.length], ["has-meta", !!n?.length], ["has-activedescendant", !!f && d], ["error", !!r], ["success", !!i]);
 function F() {
-	return t` <label for="control" class="label">
+	return i` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
@@ -210,20 +209,20 @@ function I(e) {
 	return e.open && e.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
 function L(e) {
-	let n = d(e), r = C(e);
-	return t` <div class="${P}" ${o("_anchor")}>
+	let t = d(e), n = C(e);
+	return i` <div class="${P}" ${s("_anchor")}>
 		<div
 			class="label-wrapper"
 			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${s((e) => e.label, F())}
+			${c((e) => e.label, F())}
 			<slot
 				name="contextual-help"
-				${c("_contextualHelpSlottedContent")}
+				${o("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
-			${(e) => n(e.icon, f.Slot)}
+			${(e) => t(e.icon, f.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -241,15 +240,15 @@ function L(e) {
 					?disabled="${(e) => e.disabled}"
 					:value="${(e) => e.value}"
 					@input="${(e, t) => e.inputHandler(t.event)}"
-					${o("control")}
+					${s("control")}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${c("metaSlottedContent")}></slot>
+				<slot name="meta" ${o("metaSlottedContent")}></slot>
 				<div
 					@click="${(e, t) => e._chevronIconClickHandler(t.event)}"
 				>
-					${r}
+					${n}
 				</div>
 			</div>
 		</div>
@@ -257,9 +256,9 @@ function L(e) {
 }
 //#endregion
 //#region src/lib/combobox/index.ts
-i(r("combobox", N, (e) => {
-	let n = e.tagFor(w);
-	return t`
+t(a("combobox", N, (e) => {
+	let t = e.tagFor(w);
+	return i`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			class="${(e) => y(["has-activedescendant", !!e._activeDescendant && e.open])}"
@@ -269,25 +268,25 @@ i(r("combobox", N, (e) => {
 		>
 			<div class="control-wrapper">
 				${() => L(e)}
-				<${n} class="popup"
+				<${t} class="popup"
 					style="${I}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
-					${o("_popup")}>
+					${s("_popup")}>
 					<div id="${(e) => e.listboxId}"
 						class="listbox"
 						role="listbox"
 						?disabled="${(e) => e.disabled}"
-						${o("listbox")}>
-						<slot ${c({
+						${s("listbox")}>
+						<slot ${o({
 		filter: v.slottedOptionFilter,
 		flatten: !0,
 		property: "slottedOptions"
 	})}>
 						</slot>
 					</div>
-				</${n}>
+				</${t}>
 			</div>
 			<div class="feedback-wrapper" @click="${(e, t) => t.event.stopPropagation()}">
 				${(t) => t._getFeedbackTemplate(e)}

package/contextual-help/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition25.cjs");
 exports.VwcContextualHelpElement = require_definition.ContextualHelp;
 exports.contextualHelpDefinition = require_definition.contextualHelpDefinition;

package/contextual-help/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerContextualHelp, r as ContextualHelp, t as contextualHelpDefinition } from "../unbundled/definition25.js";
 export { ContextualHelp as VwcContextualHelpElement, contextualHelpDefinition, registerContextualHelp };

package/contextual-help/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/numberConverter.cjs`),require(`../bundled/definition11.cjs`).n();
+require(`../bundled/definition11.cjs`).n();

package/contextual-help/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/numberConverter.js";
 import { n as e } from "../bundled/definition11.js";
 //#region src/lib/contextual-help/index.ts
 e();

package/country/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition31.cjs");
 exports.VwcCountryElement = require_definition.Country;
 exports.countryDefinition = require_definition.countryDefinition;

package/country/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerCountry, r as Country, t as countryDefinition } from "../unbundled/definition31.js";
 export { Country as VwcCountryElement, countryDefinition, registerCountry };

package/country/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/numberConverter.cjs`),require(`../bundled/definition23.cjs`).n();
+require(`../bundled/definition23.cjs`).n();

package/country/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/numberConverter.js";
 import { n as e } from "../bundled/definition23.js";
 //#region src/lib/country/index.ts
 e();

package/country-group/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition32.cjs");
 exports.VwcCountryGroupElement = require_definition.CountryGroup;
 exports.countryGroupDefinition = require_definition.countryGroupDefinition;

package/country-group/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerCountryGroup, r as CountryGroup, t as countryGroupDefinition } from "../unbundled/definition32.js";
 export { CountryGroup as VwcCountryGroupElement, countryGroupDefinition, registerCountryGroup };

package/country-group/index.cjs

@@ -1,10 +1,10 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`);require(`../bundled/numberConverter.cjs`);const i=require(`../bundled/decorate.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition8.cjs`),s=require(`../bundled/utils.cjs`),c=require(`../bundled/definition22.cjs`),l=require(`../bundled/definition23.cjs`);var u=`:host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}`,d=.99,f=class extends e.t(a.t(t.t)){constructor(...e){super(...e),this.items=[],this.lastVisibleIndex=0,this.computedAriaLabel=null,this.popupOpen=!1}get overflowCount(){return Math.max(0,this.items.length-this.lastVisibleIndex)}#e=null;#t=new Map;#n=-1;#r=0;#i(e){return e?s.n.find(t=>t.code.toUpperCase()===e.toUpperCase())?.label??``:``}#a(e,t){for(let n=0;n<this.items.length;n++){let r=this.items[n];if(r.style.order=`${n<e?n:n+1}`,n<e){r.setAttribute(`data-visible`,`true`),r.style.display=``,r.style.position=``,r.style.inset=``,r.style.visibility=``,r.style.pointerEvents=``;continue}r.setAttribute(`data-visible`,`false`),r.style.display=``,r.style.pointerEvents=`none`,t===`final`?(r.style.position=`absolute`,r.style.inset=`0 auto auto 0`,r.style.visibility=`hidden`):(r.style.position=``,r.style.inset=``,r.style.visibility=`hidden`)}}connectedCallback(){super.connectedCallback(),this.#u(),this.#d(),this.slotEl?.addEventListener(`slotchange`,this.#o),this.#s(),this.#c()}disconnectedCallback(){this.slotEl?.removeEventListener(`slotchange`,this.#o),this.#e?.disconnect(),this.#e=null,this.#t.clear(),this.#n=-1,this.#r=0,super.disconnectedCallback()}#o=()=>{this.#u(),this.#d(),this.#c()};#s(){this.#e||=new IntersectionObserver(this.#f,{root:this,threshold:[d]})}#c(){this.#m(),this.#l()}#l(){let e=this.#e;e.disconnect();for(let t of this.items)e.observe(t);this.badgeEl&&this.overflowCount>0&&e.observe(this.badgeEl)}#u(){this.items=this.slotEl.assignedElements({flatten:!0}).filter(e=>e instanceof l.r),this.#t.clear();for(let e of this.items)this.#t.set(e,!0);this.lastVisibleIndex=this.items.length,this.#a(this.lastVisibleIndex,`final`)}#d(){let e=this.locale.countryGroup.ariaLabelPrefix,t=[];for(let e of this.items){let n=(e.getAttribute(`label`)??``).trim(),r=(e.getAttribute(`code`)??``).trim(),i=this.#i(r),a=n||i||r;a&&t.push(a)}let n=t.join(`, `);this.computedAriaLabel=n?`${e} ${n}`:e}#f=e=>{for(let t of e)this.#t.set(t.target,(t.intersectionRatio??0)>=d);this.#c();let t=-1;for(let e=0;e<this.items.length;e++)if(!(this.#t.get(this.items[e])??!0)){t=e;break}let n=t===-1?this.items.length:t;t===this.items.length-1&&this.badgeEl&&(this.#t.get(this.badgeEl)??!1)&&(n=this.items.length),n<this.items.length&&this.badgeEl&&this.#t.has(this.badgeEl)&&this.#t.get(this.badgeEl)===!1&&(n=Math.max(1,n-1)),this.#p(n)};#p(e){this.#n===e?this.#r++:(this.#n=e,this.#r=1),!(this.#r<2)&&this.lastVisibleIndex!==e&&(this.lastVisibleIndex=this.#n,this.#a(this.lastVisibleIndex,`final`),this.overflowCount===0&&(this.popupOpen=!1),this.fillOverflowGrid())}#m(){this.#a(this.lastVisibleIndex,`fit`)}handleMouseEnter(){this.popupOpen=!0}handleMouseLeave(){this.popupOpen=!1}popupOpenChanged(e){e!==void 0&&this.popupOpen&&this.fillOverflowGrid()}fillOverflowGrid(){if(!this.overflowGridEl||this.overflowCount===0)return;this.overflowGridEl.replaceChildren();let e=this.items.slice(this.lastVisibleIndex);for(let t of e){let e=t.cloneNode(!0);e.setAttribute(`aria-hidden`,`true`),e.removeAttribute(`style`),this.overflowGridEl.appendChild(e)}}};i.t([t.T],f.prototype,`items`,void 0),i.t([t.T],f.prototype,`lastVisibleIndex`,void 0),i.t([t.T],f.prototype,`computedAriaLabel`,void 0),i.t([t.T],f.prototype,`popupOpen`,void 0);var p=t.o(`country-group`,f,e=>{let i=e.tagFor(c.r),s=e.tagFor(o.i);return t.d`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition8.cjs`),s=require(`../bundled/utils.cjs`),c=require(`../bundled/definition22.cjs`),l=require(`../bundled/definition23.cjs`);var u=`:host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}`,d=.99,f=class extends e.t(a.t(t.t)){constructor(...e){super(...e),this.items=[],this.lastVisibleIndex=0,this.computedAriaLabel=null,this.popupOpen=!1,this.#e=null,this.#t=new Map,this.#n=-1,this.#r=0,this.#o=()=>{this.#u(),this.#d(),this.#c()},this.#f=e=>{for(let t of e)this.#t.set(t.target,(t.intersectionRatio??0)>=d);this.#c();let t=-1;for(let e=0;e<this.items.length;e++)if(!(this.#t.get(this.items[e])??!0)){t=e;break}let n=t===-1?this.items.length:t;t===this.items.length-1&&this.badgeEl&&(this.#t.get(this.badgeEl)??!1)&&(n=this.items.length),n<this.items.length&&this.badgeEl&&this.#t.has(this.badgeEl)&&this.#t.get(this.badgeEl)===!1&&(n=Math.max(1,n-1)),this.#p(n)}}get overflowCount(){return Math.max(0,this.items.length-this.lastVisibleIndex)}#e;#t;#n;#r;#i(e){return e?s.n.find(t=>t.code.toUpperCase()===e.toUpperCase())?.label??``:``}#a(e,t){for(let n=0;n<this.items.length;n++){let r=this.items[n];if(r.style.order=`${n<e?n:n+1}`,n<e){r.setAttribute(`data-visible`,`true`),r.style.display=``,r.style.position=``,r.style.inset=``,r.style.visibility=``,r.style.pointerEvents=``;continue}r.setAttribute(`data-visible`,`false`),r.style.display=``,r.style.pointerEvents=`none`,t===`final`?(r.style.position=`absolute`,r.style.inset=`0 auto auto 0`,r.style.visibility=`hidden`):(r.style.position=``,r.style.inset=``,r.style.visibility=`hidden`)}}connectedCallback(){super.connectedCallback(),this.#u(),this.#d(),this.slotEl?.addEventListener(`slotchange`,this.#o),this.#s(),this.#c()}disconnectedCallback(){this.slotEl?.removeEventListener(`slotchange`,this.#o),this.#e?.disconnect(),this.#e=null,this.#t.clear(),this.#n=-1,this.#r=0,super.disconnectedCallback()}#o;#s(){this.#e||=new IntersectionObserver(this.#f,{root:this,threshold:[d]})}#c(){this.#m(),this.#l()}#l(){let e=this.#e;e.disconnect();for(let t of this.items)e.observe(t);this.badgeEl&&this.overflowCount>0&&e.observe(this.badgeEl)}#u(){let e=this.slotEl.assignedElements({flatten:!0});this.items=e.filter(e=>e instanceof l.r),this.#t.clear();for(let e of this.items)this.#t.set(e,!0);this.lastVisibleIndex=this.items.length,this.#a(this.lastVisibleIndex,`final`)}#d(){let e=this.locale.countryGroup.ariaLabelPrefix,t=[];for(let e of this.items){let n=(e.getAttribute(`label`)??``).trim(),r=(e.getAttribute(`code`)??``).trim(),i=this.#i(r),a=n||i||r;a&&t.push(a)}let n=t.join(`, `);this.computedAriaLabel=n?`${e} ${n}`:e}#f;#p(e){this.#n===e?this.#r++:(this.#n=e,this.#r=1),!(this.#r<2)&&this.lastVisibleIndex!==e&&(this.lastVisibleIndex=this.#n,this.#a(this.lastVisibleIndex,`final`),this.overflowCount===0&&(this.popupOpen=!1),this.fillOverflowGrid())}#m(){this.#a(this.lastVisibleIndex,`fit`)}handleMouseEnter(){this.popupOpen=!0}handleMouseLeave(){this.popupOpen=!1}popupOpenChanged(e){e!==void 0&&this.popupOpen&&this.fillOverflowGrid()}fillOverflowGrid(){if(!this.overflowGridEl||this.overflowCount===0)return;this.overflowGridEl.replaceChildren();let e=this.items.slice(this.lastVisibleIndex);for(let t of e){let e=t.cloneNode(!0);e.setAttribute(`aria-hidden`,`true`),e.removeAttribute(`style`),this.overflowGridEl.appendChild(e)}}};i.t([t.A],f.prototype,`items`,void 0),i.t([t.A],f.prototype,`lastVisibleIndex`,void 0),i.t([t.A],f.prototype,`computedAriaLabel`,void 0),i.t([t.A],f.prototype,`popupOpen`,void 0);var p=t.u(`country-group`,f,e=>{let i=e.tagFor(c.r),s=e.tagFor(o.i);return t.p`
 		<div
 			class="container"
 			${a.n({role:`group`,ariaLabel:e=>e.ariaLabel||e.computedAriaLabel})}
 		>
 			<slot ${n.t(`slotEl`)}></slot>
-			${r.t(e=>e.overflowCount>0,t.d`
+			${r.t(e=>e.overflowCount>0,t.p`
 					<div
 						class="overflow-wrap"
 						${n.t(`overflowWrapEl`)}
@@ -23,7 +23,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				`)}
 		</div>
 
-		${r.t(e=>e.overflowCount>0,t.d`
+		${r.t(e=>e.overflowCount>0,t.p`
 				<${s}
 					strategy="fixed"
 					placement="top"
@@ -40,4 +40,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					></div>
 				</${s}>
 			`)}
-	`},[l.t,c.t,o.t],{styles:u});t.s(p)();
+	`},[l.t,c.t,o.t],{styles:u});t.d(p)();

package/country-group/index.js

@@ -1,8 +1,7 @@
 import { t as e } from "../bundled/localized.js";
-import { T as t, d as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { A as t, d as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
 import { t as o } from "../bundled/ref.js";
 import { t as s } from "../bundled/when.js";
-import "../bundled/numberConverter.js";
 import { t as c } from "../bundled/decorate.js";
 import { n as l, t as u } from "../bundled/delegates-aria.js";
 import { i as d, t as f } from "../bundled/definition8.js";
@@ -10,17 +9,29 @@ import { n as p } from "../bundled/utils.js";
 import { r as m, t as h } from "../bundled/definition22.js";
 import { r as g, t as _ } from "../bundled/definition23.js";
 //#region src/lib/country-group/country-group.scss?inline
-var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}", y = .99, b = class extends e(u(a)) {
+var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}", y = .99, b = class extends e(u(i)) {
 	constructor(...e) {
-		super(...e), this.items = [], this.lastVisibleIndex = 0, this.computedAriaLabel = null, this.popupOpen = !1;
+		super(...e), this.items = [], this.lastVisibleIndex = 0, this.computedAriaLabel = null, this.popupOpen = !1, this.#e = null, this.#t = /* @__PURE__ */ new Map(), this.#n = -1, this.#r = 0, this.#o = () => {
+			this.#u(), this.#d(), this.#c();
+		}, this.#f = (e) => {
+			for (let t of e) this.#t.set(t.target, (t.intersectionRatio ?? 0) >= y);
+			this.#c();
+			let t = -1;
+			for (let e = 0; e < this.items.length; e++) if (!(this.#t.get(this.items[e]) ?? !0)) {
+				t = e;
+				break;
+			}
+			let n = t === -1 ? this.items.length : t;
+			t === this.items.length - 1 && this.badgeEl && (this.#t.get(this.badgeEl) ?? !1) && (n = this.items.length), n < this.items.length && this.badgeEl && this.#t.has(this.badgeEl) && this.#t.get(this.badgeEl) === !1 && (n = Math.max(1, n - 1)), this.#p(n);
+		};
 	}
 	get overflowCount() {
 		return Math.max(0, this.items.length - this.lastVisibleIndex);
 	}
-	#e = null;
-	#t = /* @__PURE__ */ new Map();
-	#n = -1;
-	#r = 0;
+	#e;
+	#t;
+	#n;
+	#r;
 	#i(e) {
 		return e ? p.find((t) => t.code.toUpperCase() === e.toUpperCase())?.label ?? "" : "";
 	}
@@ -40,9 +51,7 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 	disconnectedCallback() {
 		this.slotEl?.removeEventListener("slotchange", this.#o), this.#e?.disconnect(), this.#e = null, this.#t.clear(), this.#n = -1, this.#r = 0, super.disconnectedCallback();
 	}
-	#o = () => {
-		this.#u(), this.#d(), this.#c();
-	};
+	#o;
 	#s() {
 		this.#e ||= new IntersectionObserver(this.#f, {
 			root: this,
@@ -59,7 +68,8 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 		this.badgeEl && this.overflowCount > 0 && e.observe(this.badgeEl);
 	}
 	#u() {
-		this.items = this.slotEl.assignedElements({ flatten: !0 }).filter((e) => e instanceof g), this.#t.clear();
+		let e = this.slotEl.assignedElements({ flatten: !0 });
+		this.items = e.filter((e) => e instanceof g), this.#t.clear();
 		for (let e of this.items) this.#t.set(e, !0);
 		this.lastVisibleIndex = this.items.length, this.#a(this.lastVisibleIndex, "final");
 	}
@@ -72,17 +82,7 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 		let n = t.join(", ");
 		this.computedAriaLabel = n ? `${e} ${n}` : e;
 	}
-	#f = (e) => {
-		for (let t of e) this.#t.set(t.target, (t.intersectionRatio ?? 0) >= y);
-		this.#c();
-		let t = -1;
-		for (let e = 0; e < this.items.length; e++) if (!(this.#t.get(this.items[e]) ?? !0)) {
-			t = e;
-			break;
-		}
-		let n = t === -1 ? this.items.length : t;
-		t === this.items.length - 1 && this.badgeEl && (this.#t.get(this.badgeEl) ?? !1) && (n = this.items.length), n < this.items.length && this.badgeEl && this.#t.has(this.badgeEl) && this.#t.get(this.badgeEl) === !1 && (n = Math.max(1, n - 1)), this.#p(n);
-	};
+	#f;
 	#p(e) {
 		this.#n === e ? this.#r++ : (this.#n = e, this.#r = 1), !(this.#r < 2) && this.lastVisibleIndex !== e && (this.lastVisibleIndex = this.#n, this.#a(this.lastVisibleIndex, "final"), this.overflowCount === 0 && (this.popupOpen = !1), this.fillOverflowGrid());
 	}
@@ -110,9 +110,9 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 };
 //#endregion
 //#region src/lib/country-group/index.ts
-c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", void 0), c([t], b.prototype, "computedAriaLabel", void 0), c([t], b.prototype, "popupOpen", void 0), i(r("country-group", b, (e) => {
-	let t = e.tagFor(m), r = e.tagFor(d);
-	return n`
+c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", void 0), c([t], b.prototype, "computedAriaLabel", void 0), c([t], b.prototype, "popupOpen", void 0), n(a("country-group", b, (e) => {
+	let t = e.tagFor(m), n = e.tagFor(d);
+	return r`
 		<div
 			class="container"
 			${l({
@@ -121,7 +121,7 @@ c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", vo
 	})}
 		>
 			<slot ${o("slotEl")}></slot>
-			${s((e) => e.overflowCount > 0, n`
+			${s((e) => e.overflowCount > 0, r`
 					<div
 						class="overflow-wrap"
 						${o("overflowWrapEl")}
@@ -140,8 +140,8 @@ c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", vo
 				`)}
 		</div>
 
-		${s((e) => e.overflowCount > 0, n`
-				<${r}
+		${s((e) => e.overflowCount > 0, r`
+				<${n}
 					strategy="fixed"
 					placement="top"
 					alternate
@@ -155,7 +155,7 @@ c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", vo
 						${o("overflowGridEl")}
 						aria-hidden="true"
 					></div>
-				</${r}>
+				</${n}>
 			`)}
 	`;
 }, [