@vonage/vivid 5.20.1 → 5.22.0

package/combobox/index.cjs

@@ -1,4 +1,4 @@
-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">
+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;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 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();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=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.p` <div class="${T}" ${n.t(`_anchor`)}>
 		<div

package/combobox/index.js

@@ -21,7 +21,7 @@ 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-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 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 = {
 	inline: "inline",
 	list: "list",
 	both: "both",
@@ -115,26 +115,26 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		switch (t) {
 			case "Enter":
 				this.syncValue(), this.isAutocompleteInline && (this.filter = this.value), this.open = !1, this.clearSelectionRange();
-				break;
+				return;
 			case "Escape":
 				if (this.isAutocompleteInline || (this.selectedIndex = -1), this.open) {
 					this.open = !1;
-					break;
+					return;
 				}
 				this.value = "", this.control.value = "", this.filter = "", this.filterOptions();
-				break;
+				return;
 			case "Tab":
 				if (this.setInputToSelection(), !this.open) return !0;
 				e.preventDefault(), this.open = !1;
-				break;
+				return;
 			case "ArrowUp":
 			case "ArrowDown":
 				if (this.filterOptions(), !this.open) {
 					this.open = !0;
-					break;
+					return;
 				}
 				this.filteredOptions.length > 0 && (this._isNavigatingWithKeyboard = !0, super.keydownHandler(e), this._isNavigatingWithKeyboard = !1), this.isAutocompleteInline && this.setInlineSelection();
-				break;
+				return;
 			default: return !0;
 		}
 	}

package/country-group/index.cjs

@@ -17,7 +17,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 							connotation="cta"
 							appearance="duotone"
 							shape="pill"
-							text="${e=>`+`+e.overflowCount}"
+							text="${e=>`+${e.overflowCount}`}"
 						></${i}>
 					</div>
 				`)}

package/country-group/index.js

@@ -134,7 +134,7 @@ c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", vo
 							connotation="cta"
 							appearance="duotone"
 							shape="pill"
-							text="${(e) => "+" + e.overflowCount}"
+							text="${(e) => `+${e.overflowCount}`}"
 						></${t}>
 					</div>
 				`)}