@vonage/vivid 5.25.0 → 5.27.0

package/combobox/index.cjs

@@ -1,14 +1,14 @@
-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">
+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/definition2.cjs"),u=require("../bundled/affix.cjs"),d=require("../bundled/component-enum.cjs"),f=require("../bundled/form-associated.cjs"),p=require("../bundled/definition5.cjs"),m=require("../bundled/definition7.cjs"),h=require("../bundled/dialog.cjs"),g=require("../bundled/feedback-message.cjs"),_=require("../bundled/form-element.cjs"),v=require("../bundled/with-contextual-help.cjs"),y=require("../bundled/with-error-text.cjs"),b=require("../bundled/with-success-text.cjs"),x=require("../bundled/mixins.cjs"),S=require("../bundled/text-field.cjs"),C=require("../bundled/option.cjs"),w=require("../bundled/definition17.cjs"),T=require("../bundled/optgroup.cjs"),E=require("../bundled/definition18.cjs");var D=`.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}.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}.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}`,O={inline:`inline`,list:`list`,both:`both`,none:`none`},k=d.t([`fieldset`,`ghost`],`fieldset`),A=class extends v.t(x.t(y.t(b.t(_.t(u.t(f.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===O.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===O.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===O.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===O.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(T.n(e)){let t=Array.from(e.children).some(e=>C.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`:return this.setInputToSelection(),this.open=!1,!0;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`})],A.prototype,`autocomplete`,void 0),i.t([e.m],A.prototype,`appearance`,void 0),i.t([e.m],A.prototype,`shape`,void 0),i.t([e.m()],A.prototype,`scale`,void 0),i.t([e.m],A.prototype,`placement`,void 0),i.t([e.m({mode:`boolean`,attribute:`fixed-dropdown`})],A.prototype,`fixedDropdown`,void 0),i.t([e.A],A.prototype,`metaSlottedContent`,void 0),i.t([e.A],A.prototype,`maxHeight`,void 0),i.t([e.m({attribute:`open`,mode:`boolean`})],A.prototype,`open`,void 0),i.t([e.m],A.prototype,`placeholder`,void 0);function j(){return e.p` <label for="control" class="label">
 		${e=>e.label}
-	</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])}"
+	</label>`}function M(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function N(i){let a=u.a(i),s=p.r(i);return e.p` <div
+		class="${e=>o.t(`base`,`appearance-${k.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-disabled`,`with-readonly`,`with-error`,`with-success`,[`disabled`,e.disabled],[`shape-${e.shape}`,!!e.shape],[`size-${e.scale}`,!!e.scale],[`placeholder`,!!e.placeholder],[`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`)}
 	>
 		<div
 			class="label-wrapper"
 			?hidden=${e=>!e.label&&!e._hasContextualHelp}
 		>
-			${r.t(e=>e.label,O())}
+			${r.t(e=>e.label,j())}
 			<slot
 				name="contextual-help"
 				${t.t(`_contextualHelpSlottedContent`)}
@@ -45,18 +45,18 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 				</div>
 			</div>
 		</div>
-	</div>`}var j=e.u(`combobox`,D,r=>{let i=r.tagFor(p.i);return e.p`
+	</div>`}var P=e.u(`combobox`,A,r=>{let i=r.tagFor(m.i);return e.p`
 		<template
 			tabindex="${e=>e.disabled?null:`0`}"
 			class="${e=>o.t([`has-activedescendant`,!!e._activeDescendant&&e.open])}"
 			@click="${(e,t)=>e.clickHandler(t.event)}"
 			@focusout="${(e,t)=>e.focusoutHandler(t.event)}"
-			@keydown="${(e,{event:t})=>(e.open&&m.t(t),e.keydownHandler(t))}"
+			@keydown="${(e,{event:t})=>(e.open&&h.t(t),e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${()=>A(r)}
+				${()=>N(r)}
 				<${i} class="popup"
-					style="${k}"
+					style="${M}"
 					?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,S.t,w.t,h.r],{styles:[b.t,T],shadowOptions:{delegatesFocus:!0}});e.d(j)();
+	`},[l.t,m.t,w.t,E.t,g.n],{styles:[S.t,D],shadowOptions:{delegatesFocus:!0}});e.d(P)();

package/combobox/index.js

@@ -7,29 +7,31 @@ import { t as u } from "../bundled/listbox.js";
 import { t as d } from "../bundled/class-names.js";
 import { n as f } from "../bundled/numbers.js";
 import { r as p } from "../bundled/aria-binding-directive.js";
-import { t as m } from "../bundled/definition3.js";
+import { t as m } from "../bundled/definition2.js";
 import { a as h, i as g, t as _ } from "../bundled/affix.js";
-import { n as v } from "../bundled/form-associated.js";
-import { r as y } from "../bundled/definition6.js";
-import { i as b, t as x } from "../bundled/definition8.js";
-import { t as S } from "../bundled/dialog.js";
-import { r as C, t as w } from "../bundled/mixins.js";
+import { t as v } from "../bundled/component-enum.js";
+import { n as y } from "../bundled/form-associated.js";
+import { r as b } from "../bundled/definition5.js";
+import { i as x, t as S } from "../bundled/definition7.js";
+import { t as C } from "../bundled/dialog.js";
+import { n as w } from "../bundled/feedback-message.js";
 import { t as T } from "../bundled/form-element.js";
 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 { 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";
+import { t as k } from "../bundled/mixins.js";
+import { t as A } from "../bundled/text-field.js";
+import { n as j } from "../bundled/option.js";
+import { t as M } from "../bundled/definition17.js";
+import { n as N } from "../bundled/optgroup.js";
+import { t as P } from "../bundled/definition18.js";
 //#region src/lib/combobox/combobox.scss?inline
-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 = {
+var F = ".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}.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}.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}", I = {
 	inline: "inline",
 	list: "list",
 	both: "both",
 	none: "none"
-}, I = class extends E(w(D(O(T(_(v(u))))))) {
+}, L = v(["fieldset", "ghost"], "fieldset"), R = class extends E(k(D(O(T(_(y(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");
 	}
@@ -40,13 +42,13 @@ var P = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		super.validate(this.control);
 	}
 	get isAutocompleteInline() {
-		return this.autocomplete === F.inline || this.isAutocompleteBoth;
+		return this.autocomplete === I.inline || this.isAutocompleteBoth;
 	}
 	get isAutocompleteList() {
-		return this.autocomplete === F.list || this.isAutocompleteBoth;
+		return this.autocomplete === I.list || this.isAutocompleteBoth;
 	}
 	get isAutocompleteBoth() {
-		return this.autocomplete === F.both;
+		return this.autocomplete === I.both;
 	}
 	openChanged() {
 		this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
@@ -85,12 +87,12 @@ var P = ".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() {
-		if ((!this.autocomplete || this.autocomplete === F.none) && (this.filter = ""), this.filteredOptions = this._options.filter((e) => e.text.toLowerCase().startsWith(this.filter.toLowerCase())), this.isAutocompleteList) {
+		if ((!this.autocomplete || this.autocomplete === I.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);
+			for (let e of Array.from(this.children)) if (N(e)) {
+				let t = Array.from(e.children).some((e) => j(e) && !e.hidden);
 				e.style.display = t ? "" : "none";
 			}
 		}
@@ -132,10 +134,7 @@ var P = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 				}
 				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 "Tab": return this.setInputToSelection(), this.open = !1, !0;
 			case "ArrowUp":
 			case "ArrowDown":
 				if (this.filterOptions(), !this.open) {
@@ -199,34 +198,34 @@ var P = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 l([r({
 	attribute: "autocomplete",
 	mode: "fromView"
-})], 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({
+})], R.prototype, "autocomplete", void 0), l([r], R.prototype, "appearance", void 0), l([r], R.prototype, "shape", void 0), l([r()], R.prototype, "scale", void 0), l([r], R.prototype, "placement", void 0), l([r({
 	mode: "boolean",
 	attribute: "fixed-dropdown"
-})], I.prototype, "fixedDropdown", void 0), l([e], I.prototype, "metaSlottedContent", void 0), l([e], I.prototype, "maxHeight", void 0), l([r({
+})], R.prototype, "fixedDropdown", void 0), l([e], R.prototype, "metaSlottedContent", void 0), l([e], R.prototype, "maxHeight", void 0), l([r({
 	attribute: "open",
 	mode: "boolean"
-})], I.prototype, "open", void 0), l([r], I.prototype, "placeholder", void 0);
+})], R.prototype, "open", void 0), l([r], R.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
-function L() {
+function z() {
 	return i` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function R(e) {
+function B(e) {
 	return e.open && e.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function z(e) {
-	let t = h(e), n = y(e);
+function V(e) {
+	let t = h(e), n = b(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])}"
+		class="${(e) => d("base", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["disabled", e.disabled], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["placeholder", !!e.placeholder], ["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])}"
 		${s("_anchor")}
 	>
 		<div
 			class="label-wrapper"
 			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${c((e) => e.label, L())}
+			${c((e) => e.label, z())}
 			<slot
 				name="contextual-help"
 				${o("_contextualHelpSlottedContent")}
@@ -266,21 +265,21 @@ function z(e) {
 	</div>`;
 }
 //#endregion
-//#region src/lib/combobox/index.ts
-t(a("combobox", I, (e) => {
-	let t = e.tagFor(b);
+//#region src/lib/combobox/definition.ts
+var H = a("combobox", R, (e) => {
+	let t = e.tagFor(x);
 	return i`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			class="${(e) => d(["has-activedescendant", !!e._activeDescendant && e.open])}"
 			@click="${(e, t) => e.clickHandler(t.event)}"
 			@focusout="${(e, t) => e.focusoutHandler(t.event)}"
-			@keydown="${(e, { event: t }) => (e.open && S(t), e.keydownHandler(t))}"
+			@keydown="${(e, { event: t }) => (e.open && C(t), e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${() => z(e)}
+				${() => V(e)}
 				<${t} class="popup"
-					style="${R}"
+					style="${B}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -306,12 +305,15 @@ t(a("combobox", I, (e) => {
 	`;
 }, [
 	m,
-	x,
-	j,
-	N,
-	C
+	S,
+	M,
+	P,
+	w
 ], {
-	styles: [k, P],
+	styles: [A, F],
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/combobox/index.ts
+t(H)();
 //#endregion

package/contextual-help/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition11.cjs`).n();
+require("../bundled/definition10.cjs").n();

package/contextual-help/index.js

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

package/country/index.cjs

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

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/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`
+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/definition7.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

@@ -4,7 +4,7 @@ import { t as o } from "../bundled/ref.js";
 import { t as s } from "../bundled/when.js";
 import { t as c } from "../bundled/decorate.js";
 import { n as l, t as u } from "../bundled/delegates-aria.js";
-import { i as d, t as f } from "../bundled/definition8.js";
+import { i as d, t as f } from "../bundled/definition7.js";
 import { n as p } from "../bundled/utils.js";
 import { r as m, t as h } from "../bundled/definition23.js";
 import { r as g, t as _ } from "../bundled/definition24.js";
@@ -108,9 +108,10 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 		}
 	}
 };
+c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", void 0), c([t], b.prototype, "computedAriaLabel", void 0), c([t], b.prototype, "popupOpen", void 0);
 //#endregion
-//#region src/lib/country-group/index.ts
-c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", void 0), c([t], b.prototype, "computedAriaLabel", void 0), c([t], b.prototype, "popupOpen", void 0), n(a("country-group", b, (e) => {
+//#region src/lib/country-group/definition.ts
+var x = a("country-group", b, (e) => {
 	let t = e.tagFor(m), n = e.tagFor(d);
 	return r`
 		<div
@@ -162,5 +163,8 @@ c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", vo
 	_,
 	h,
 	f
-], { styles: v }))();
+], { styles: v });
+//#endregion
+//#region src/lib/country-group/index.ts
+n(x)();
 //#endregion