@vonage/vivid 5.23.1 → 5.25.0

package/combobox/index.cjs

@@ -1,6 +1,6 @@
-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/listbox.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/numbers.cjs`),c=require(`../bundled/aria-binding-directive.cjs`),l=require(`../bundled/definition3.cjs`),u=require(`../bundled/affix.cjs`),d=require(`../bundled/form-associated.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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 _.t(h.t(v.t(y.t(g.t(u.t(d.n(a.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=c.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();return;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;return}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();return;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;return;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;return}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();return;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=s.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);function T(){return e.p` <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/listbox.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/numbers.cjs`),c=require(`../bundled/aria-binding-directive.cjs`),l=require(`../bundled/definition3.cjs`),u=require(`../bundled/affix.cjs`),d=require(`../bundled/form-associated.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.cjs`),b=require(`../bundled/text-field.cjs`),x=require(`../bundled/option.cjs`),S=require(`../bundled/definition17.cjs`),C=require(`../bundled/optgroup.cjs`),w=require(`../bundled/definition18.cjs`);var T=`.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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}`,E={inline:`inline`,list:`list`,both:`both`,none:`none`},D=class extends _.t(h.t(v.t(y.t(g.t(u.t(d.n(a.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=c.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===E.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===E.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===E.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(){if((!this.autocomplete||this.autocomplete===E.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)});for(let e of Array.from(this.children))if(C.n(e)){let t=Array.from(e.children).some(e=>x.n(e)&&!e.hidden);e.style.display=t?``:`none`}}}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();return;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;return}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();return;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;return;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;return}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();return;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=s.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`})],D.prototype,`autocomplete`,void 0),i.t([e.m],D.prototype,`appearance`,void 0),i.t([e.m],D.prototype,`shape`,void 0),i.t([e.m()],D.prototype,`scale`,void 0),i.t([e.m],D.prototype,`placement`,void 0),i.t([e.m({mode:`boolean`,attribute:`fixed-dropdown`})],D.prototype,`fixedDropdown`,void 0),i.t([e.A],D.prototype,`metaSlottedContent`,void 0),i.t([e.A],D.prototype,`maxHeight`,void 0),i.t([e.m({attribute:`open`,mode:`boolean`})],D.prototype,`open`,void 0),i.t([e.m],D.prototype,`placeholder`,void 0);function O(){return e.p` <label for="control" class="label">
 		${e=>e.label}
-	</label>`}function E(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function D(i){let a=u.a(i),s=f.r(i);return e.p` <div
+	</label>`}function k(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function A(i){let a=u.a(i),s=f.r(i);return e.p` <div
 		class="${e=>o.t(`base`,[`disabled`,e.disabled],[`shape-${e.shape}`,!!e.shape],[`size-${e.scale}`,!!e.scale],[`placeholder`,!!e.placeholder],[`appearance-${e.appearance}`,!!e.appearance],[`no-label`,!e.label],[`has-icon`,!!e.icon||!!e.iconSlottedContent?.length],[`has-meta`,!!e.metaSlottedContent?.length],[`has-activedescendant`,!!e._activeDescendant&&e.open],[`error`,!!e.errorValidationMessage],[`success`,!!e.successText])}"
 		${n.t(`_anchor`)}
 	>
@@ -8,7 +8,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 			class="label-wrapper"
 			?hidden=${e=>!e.label&&!e._hasContextualHelp}
 		>
-			${r.t(e=>e.label,T())}
+			${r.t(e=>e.label,O())}
 			<slot
 				name="contextual-help"
 				${t.t(`_contextualHelpSlottedContent`)}
@@ -45,7 +45,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 				</div>
 			</div>
 		</div>
-	</div>`}var O=e.u(`combobox`,w,r=>{let i=r.tagFor(p.i);return e.p`
+	</div>`}var j=e.u(`combobox`,D,r=>{let i=r.tagFor(p.i);return e.p`
 		<template
 			tabindex="${e=>e.disabled?null:`0`}"
 			class="${e=>o.t([`has-activedescendant`,!!e._activeDescendant&&e.open])}"
@@ -54,9 +54,9 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 			@keydown="${(e,{event:t})=>(e.open&&m.t(t),e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${()=>D(r)}
+				${()=>A(r)}
 				<${i} class="popup"
-					style="${E}"
+					style="${k}"
 					?open="${e=>e.open}"
 					placement="${e=>e.placement??`bottom-start`}"
 					strategy="${e=>e.fixedDropdown?`fixed`:`absolute`}"
@@ -75,4 +75,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 				${e=>e._getFeedbackTemplate(r)}
 			</div>
     </template>
-	`},[l.t,p.t,x.t,h.r],{styles:[b.t,S],shadowOptions:{delegatesFocus:!0}});e.d(O)();
+	`},[l.t,p.t,S.t,w.t,h.r],{styles:[b.t,T],shadowOptions:{delegatesFocus:!0}});e.d(j)();

package/combobox/index.js

@@ -19,14 +19,17 @@ import { t as E } from "../bundled/with-contextual-help.js";
 import { t as D } from "../bundled/with-error-text.js";
 import { t as O } from "../bundled/with-success-text.js";
 import { t as k } from "../bundled/text-field.js";
-import { t as A } from "../bundled/definition17.js";
+import { n as A } from "../bundled/option.js";
+import { t as j } from "../bundled/definition17.js";
+import { n as M } from "../bundled/optgroup.js";
+import { t as N } from "../bundled/definition18.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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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 = {
+var P = ".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;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}", F = {
 	inline: "inline",
 	list: "list",
 	both: "both",
 	none: "none"
-}, N = class extends E(w(D(O(T(_(v(u))))))) {
+}, I = class extends E(w(D(O(T(_(v(u))))))) {
 	constructor(...e) {
 		super(...e), this.filteredOptions = [], this.filter = "", this._isNavigatingWithKeyboard = !1, this.fixedDropdown = !1, this.listboxId = p("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
 	}
@@ -37,13 +40,13 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		super.validate(this.control);
 	}
 	get isAutocompleteInline() {
-		return this.autocomplete === M.inline || this.isAutocompleteBoth;
+		return this.autocomplete === F.inline || this.isAutocompleteBoth;
 	}
 	get isAutocompleteList() {
-		return this.autocomplete === M.list || this.isAutocompleteBoth;
+		return this.autocomplete === F.list || this.isAutocompleteBoth;
 	}
 	get isAutocompleteBoth() {
-		return this.autocomplete === M.both;
+		return this.autocomplete === F.both;
 	}
 	openChanged() {
 		this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
@@ -82,9 +85,15 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		super.connectedCallback(), this.value && (this.initialValue = this.value), this._popup.anchor = this._anchor;
 	}
 	filterOptions() {
-		(!this.autocomplete || this.autocomplete === M.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);
-		});
+		if ((!this.autocomplete || this.autocomplete === F.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);
+			});
+			for (let e of Array.from(this.children)) if (M(e)) {
+				let t = Array.from(e.children).some((e) => A(e) && !e.hidden);
+				e.style.display = t ? "" : "none";
+			}
+		}
 	}
 	focusAndScrollOptionIntoView() {
 		this.contains(document.activeElement) && (this.control.focus(), this.enqueueScrollSelectedOptionIntoViewIfNeeded());
@@ -190,24 +199,24 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 l([r({
 	attribute: "autocomplete",
 	mode: "fromView"
-})], 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({
+})], I.prototype, "autocomplete", void 0), l([r], I.prototype, "appearance", void 0), l([r], I.prototype, "shape", void 0), l([r()], I.prototype, "scale", void 0), l([r], I.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([r({
+})], I.prototype, "fixedDropdown", void 0), l([e], I.prototype, "metaSlottedContent", void 0), l([e], I.prototype, "maxHeight", void 0), l([r({
 	attribute: "open",
 	mode: "boolean"
-})], N.prototype, "open", void 0), l([r], N.prototype, "placeholder", void 0);
+})], I.prototype, "open", void 0), l([r], I.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
-function P() {
+function L() {
 	return i` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function F(e) {
+function R(e) {
 	return e.open && e.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function I(e) {
+function z(e) {
 	let t = h(e), n = y(e);
 	return i` <div
 		class="${(e) => d("base", ["disabled", e.disabled], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["placeholder", !!e.placeholder], [`appearance-${e.appearance}`, !!e.appearance], ["no-label", !e.label], ["has-icon", !!e.icon || !!e.iconSlottedContent?.length], ["has-meta", !!e.metaSlottedContent?.length], ["has-activedescendant", !!e._activeDescendant && e.open], ["error", !!e.errorValidationMessage], ["success", !!e.successText])}"
@@ -217,7 +226,7 @@ function I(e) {
 			class="label-wrapper"
 			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${c((e) => e.label, P())}
+			${c((e) => e.label, L())}
 			<slot
 				name="contextual-help"
 				${o("_contextualHelpSlottedContent")}
@@ -258,7 +267,7 @@ function I(e) {
 }
 //#endregion
 //#region src/lib/combobox/index.ts
-t(a("combobox", N, (e) => {
+t(a("combobox", I, (e) => {
 	let t = e.tagFor(b);
 	return i`
 		<template
@@ -269,9 +278,9 @@ t(a("combobox", N, (e) => {
 			@keydown="${(e, { event: t }) => (e.open && S(t), e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${() => I(e)}
+				${() => z(e)}
 				<${t} class="popup"
-					style="${F}"
+					style="${R}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -298,10 +307,11 @@ t(a("combobox", N, (e) => {
 }, [
 	m,
 	x,
-	A,
+	j,
+	N,
 	C
 ], {
-	styles: [k, j],
+	styles: [k, P],
 	shadowOptions: { delegatesFocus: !0 }
 }))();
 //#endregion

package/country/definition.cjs

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

package/country/definition.js

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

package/country/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition23.cjs`).n();
+require(`../bundled/definition24.cjs`).n();

package/country/index.js

@@ -1,4 +1,4 @@
-import { n as e } from "../bundled/definition23.js";
+import { n as e } from "../bundled/definition24.js";
 //#region src/lib/country/index.ts
 e();
 //#endregion

package/country-group/definition.cjs

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

package/country-group/definition.js

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

package/country-group/index.cjs

@@ -1,4 +1,4 @@
-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`
+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/definition23.cjs`),l=require(`../bundled/definition24.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})}

package/country-group/index.js

@@ -6,8 +6,8 @@ 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";
 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";
+import { r as m, t as h } from "../bundled/definition23.js";
+import { r as g, t as _ } from "../bundled/definition24.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(i)) {
 	constructor(...e) {