@vonage/vivid 5.7.0 → 5.9.0

package/combobox/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const k=require("../bundled/definition2.cjs"),f=require("../bundled/definition9.cjs"),$=require("../bundled/definition12.cjs"),C=require("../bundled/text-field.cjs"),n=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),I=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),O=require("../bundled/with-error-text.cjs"),q=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),H=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),V=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/when.cjs"),F=require("../bundled/class-names.cjs"),B='.label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var r=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(r=c(t,e,r)||r);return r&&L(t,e,r),r};class i extends S.WithContextualHelp(b.WithFeedback(O.WithErrorText(q.WithSuccessText(A.FormElement(u.AffixIcon(I.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=H.uniqueId("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===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),n.Updates.enqueue(()=>this.control.focus());return}}get options(){return n.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){super.options=t}placeholderChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),r=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=r!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;/* v8 ignore else -- @preserve */t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.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(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue();/* v8 ignore else -- @preserve */this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{/* v8 ignore else -- @preserve */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;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}/* v8 ignore else -- @preserve */this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=T.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}_isDefaultSelected(t){return super._isDefaultSelected(t)||t.text!==""&&t.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){/* v8 ignore else -- @preserve */this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(r=>{o&&(r.setAttribute("scale",o),r.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([n.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([n.attr],i.prototype,"appearance");s([n.attr],i.prototype,"shape");s([n.attr()],i.prototype,"scale");s([n.attr],i.prototype,"placement");s([n.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([n.observable],i.prototype,"metaSlottedContent");s([n.observable],i.prototype,"maxHeight");s([n.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([n.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:r,shape:l,scale:c,disabled:m,placeholder:_,label:g,appearance:v,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!_],[`appearance-${v}`,!!v],["no-label",!g],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!r]);function z(){return n.html` <label for="control" class="label">
+"use strict";const k=require("../bundled/definition2.cjs"),f=require("../bundled/definition9.cjs"),I=require("../bundled/definition12.cjs"),$=require("../bundled/text-field.cjs"),n=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),C=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),O=require("../bundled/with-error-text.cjs"),q=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),V=require("../bundled/strings.cjs"),H=require("../bundled/numbers.cjs"),T=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/when.cjs"),F=require("../bundled/class-names.cjs"),B='.label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,l=(a,t,e,o)=>{for(var r=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(r=c(t,e,r)||r);return r&&L(t,e,r),r};class i extends S.WithContextualHelp(b.WithFeedback(O.WithErrorText(q.WithSuccessText(A.FormElement(u.AffixIcon(C.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=V.uniqueId("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===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){this.open&&this.enqueueScrollSelectedOptionIntoViewIfNeeded()}get options(){return n.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){super.options=t}placeholderChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),r=this.options[this.selectedIndex]?.text,s=this.options[o]?.text;this.selectedIndex=r!==s?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){this.contains(document.activeElement)&&(this.control.focus(),this.enqueueScrollSelectedOptionIntoViewIfNeeded())}enqueueScrollSelectedOptionIntoViewIfNeeded(){const t=this.firstSelectedOption;/* v8 ignore else -- @preserve */t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.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(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue();/* v8 ignore else -- @preserve */this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{/* v8 ignore else -- @preserve */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;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}/* v8 ignore else -- @preserve */this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=H.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}_isDefaultSelected(t){return super._isDefaultSelected(t)||t.text!==""&&t.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){/* v8 ignore else -- @preserve */this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(r=>{o&&(r.setAttribute("scale",o),r.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}l([n.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");l([n.attr],i.prototype,"appearance");l([n.attr],i.prototype,"shape");l([n.attr()],i.prototype,"scale");l([n.attr],i.prototype,"placement");l([n.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");l([n.observable],i.prototype,"metaSlottedContent");l([n.observable],i.prototype,"maxHeight");l([n.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");l([n.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:r,shape:s,scale:c,disabled:m,placeholder:_,label:g,appearance:v,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${s}`,!!s],[`size-${c}`,!!c],["placeholder",!!_],[`appearance-${v}`,!!v],["no-label",!g],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!r]);function z(){return n.html` <label for="control" class="label">
 		${a=>a.label}
 	</label>`}function P(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function W(a){const t=u.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return n.html` <div class="${R}" ${d.ref("_anchor")}>
 		<div
@@ -42,12 +42,12 @@
 				</div>
 			</div>
 		</div>
-	</div>`}const K=a=>{const t=a.tagFor(f.Popup);return n.html`
+	</div>`}const N=a=>{const t=a.tagFor(f.Popup);return n.html`
 		<template
 			tabindex="${e=>e.disabled?null:"0"}"
 			@click="${(e,o)=>e.clickHandler(o.event)}"
 			@focusout="${(e,o)=>e.focusoutHandler(o.event)}"
-			@keydown="${(e,{event:o})=>(e.open&&V.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
+			@keydown="${(e,{event:o})=>(e.open&&T.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
 				${()=>W(a)}
@@ -71,4 +71,4 @@
 				${e=>e._getFeedbackTemplate(a)}
 			</div>
     </template>
-	`},M=n.defineVividComponent("combobox",i,K,[k.iconDefinition,f.popupDefinition,$.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[C.styles,B],shadowOptions:{delegatesFocus:!0}}),N=n.createRegisterFunction(M);N();
+	`},K=n.defineVividComponent("combobox",i,N,[k.iconDefinition,f.popupDefinition,I.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[$.styles,B],shadowOptions:{delegatesFocus:!0}}),M=n.createRegisterFunction(K);M();

package/combobox/index.js

@@ -1,44 +1,44 @@
 import { i as y } from "../bundled/definition2.js";
-import { P as k, p as $ } from "../bundled/definition9.js";
-import { l as I } from "../bundled/definition12.js";
+import { P as k, p as I } from "../bundled/definition9.js";
+import { l as $ } from "../bundled/definition12.js";
 import { s as C } from "../bundled/text-field.js";
-import { U as O, O as S, a as l, o as v, h as u, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as H, f as D } from "../bundled/mixins.js";
+import { O as S, a as l, o as v, h as u, c as O, d as A } from "../bundled/vivid-element.js";
+import { W as V, f as H } from "../bundled/mixins.js";
 import { L as b } from "../bundled/listbox.js";
-import { F as T } from "../bundled/form-associated.js";
-import { W as F } from "../bundled/with-contextual-help.js";
-import { W as B } from "../bundled/with-error-text.js";
-import { W as L } from "../bundled/with-success-text.js";
-import { F as E } from "../bundled/form-element.js";
-import { b as W, a as R, I as P } from "../bundled/affix.js";
-import { u as z } from "../bundled/strings.js";
-import { l as q } from "../bundled/numbers.js";
-import { h as K } from "../bundled/index.js";
-import { c as M } from "../bundled/definition3.js";
+import { F as D } from "../bundled/form-associated.js";
+import { W as T } from "../bundled/with-contextual-help.js";
+import { W as F } from "../bundled/with-error-text.js";
+import { W as B } from "../bundled/with-success-text.js";
+import { F as L } from "../bundled/form-element.js";
+import { b as E, a as W, I as R } from "../bundled/affix.js";
+import { u as P } from "../bundled/strings.js";
+import { l as z } from "../bundled/numbers.js";
+import { h as q } from "../bundled/index.js";
+import { c as N } from "../bundled/definition3.js";
 import { r as d } from "../bundled/ref.js";
 import { s as h } from "../bundled/slotted.js";
-import { w as U } from "../bundled/when.js";
-import { c as N } from "../bundled/class-names.js";
+import { w as K } from "../bundled/when.js";
+import { c as M } from "../bundled/class-names.js";
 const j = '.label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}', p = {
   inline: "inline",
   list: "list",
   both: "both",
   none: "none"
 };
-var Y = Object.defineProperty, i = (a, t, e, o) => {
-  for (var r = void 0, n = a.length - 1, c; n >= 0; n--)
-    (c = a[n]) && (r = c(t, e, r) || r);
-  return r && Y(t, e, r), r;
+var U = Object.defineProperty, n = (a, t, e, o) => {
+  for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
+    (c = a[s]) && (r = c(t, e, r) || r);
+  return r && U(t, e, r), r;
 };
-class s extends F(
-  H(
-    B(
-      L(E(W(T(b))))
+class i extends T(
+  V(
+    F(
+      B(L(E(D(b))))
     )
   )
 ) {
   constructor() {
-    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
    * @internal
@@ -60,18 +60,10 @@ class s extends F(
     return this.autocomplete === p.both;
   }
   /**
-   * Sets focus when the open property changes.
-   *
-   * @param prev - the previous open value
-   * @param next - the current open value
-   *
    * @internal
    */
   openChanged() {
-    if (this.open) {
-      this.focusAndScrollOptionIntoView(), O.enqueue(() => this.control.focus());
-      return;
-    }
+    this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
   }
   /**
    * The list of options.
@@ -101,8 +93,8 @@ class s extends F(
     if (this.$fastController.isConnected && this.options) {
       const o = this.options.findIndex(
         (c) => c.text.toLowerCase() === e.toLowerCase()
-      ), r = this.options[this.selectedIndex]?.text, n = this.options[o]?.text;
-      this.selectedIndex = r !== n ? o : this.selectedIndex;
+      ), r = this.options[this.selectedIndex]?.text, s = this.options[o]?.text;
+      this.selectedIndex = r !== s ? o : this.selectedIndex;
     }
     super.valueChanged(t, e);
   }
@@ -157,14 +149,17 @@ class s extends F(
    * Overrides: `Listbox.focusAndScrollOptionIntoView`
    */
   focusAndScrollOptionIntoView() {
-    if (this.contains(document.activeElement)) {
-      this.control.focus();
-      const t = this.firstSelectedOption;
-      /* v8 ignore else -- @preserve */
-      t && requestAnimationFrame(() => {
-        t.scrollIntoView({ block: "nearest" });
-      });
-    }
+    this.contains(document.activeElement) && (this.control.focus(), this.enqueueScrollSelectedOptionIntoViewIfNeeded());
+  }
+  /**
+   * @internal
+   */
+  enqueueScrollSelectedOptionIntoViewIfNeeded() {
+    const t = this.firstSelectedOption;
+    /* v8 ignore else -- @preserve */
+    t && requestAnimationFrame(() => {
+      t.scrollIntoView({ block: "nearest" });
+    });
   }
   /**
    * Handle focus state when the element or its children lose focus.
@@ -249,7 +244,7 @@ class s extends F(
    */
   selectedIndexChanged(t, e) {
     if (this.$fastController.isConnected) {
-      if (e = q(-1, this.options.length - 1, e), e !== this.selectedIndex) {
+      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
         this.selectedIndex = e;
         return;
       }
@@ -347,43 +342,43 @@ class s extends F(
     this.control.setSelectionRange(t, t);
   }
 }
-i([
+n([
   l({ attribute: "autocomplete", mode: "fromView" })
-], s.prototype, "autocomplete");
-i([
+], i.prototype, "autocomplete");
+n([
   l
-], s.prototype, "appearance");
-i([
+], i.prototype, "appearance");
+n([
   l
-], s.prototype, "shape");
-i([
+], i.prototype, "shape");
+n([
   l()
-], s.prototype, "scale");
-i([
+], i.prototype, "scale");
+n([
   l
-], s.prototype, "placement");
-i([
+], i.prototype, "placement");
+n([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
-], s.prototype, "fixedDropdown");
-i([
+], i.prototype, "fixedDropdown");
+n([
   v
-], s.prototype, "metaSlottedContent");
-i([
+], i.prototype, "metaSlottedContent");
+n([
   v
-], s.prototype, "maxHeight");
-i([
+], i.prototype, "maxHeight");
+n([
   l({ attribute: "open", mode: "boolean" })
-], s.prototype, "open");
-i([
+], i.prototype, "open");
+n([
   l
-], s.prototype, "placeholder");
-const G = ({
+], i.prototype, "placeholder");
+const Y = ({
   icon: a,
   iconSlottedContent: t,
   metaSlottedContent: e,
   errorValidationMessage: o,
   successText: r,
-  shape: n,
+  shape: s,
   scale: c,
   disabled: x,
   placeholder: m,
@@ -391,10 +386,10 @@ const G = ({
   appearance: f,
   open: g,
   _activeDescendant: w
-}) => N(
+}) => M(
   "base",
   ["disabled", x],
-  [`shape-${n}`, !!n],
+  [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
   ["placeholder", !!m],
   [`appearance-${f}`, !!f],
@@ -405,31 +400,31 @@ const G = ({
   ["error", !!o],
   ["success", !!r]
 );
-function J() {
+function G() {
   return u` <label for="control" class="label">
 		${(a) => a.label}
 	</label>`;
 }
-function Q(a) {
+function J(a) {
   return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     a.getBoundingClientRect().width
   )}px` : null;
 }
-function X(a) {
-  const t = R(a), e = M(a);
-  return u` <div class="${G}" ${d("_anchor")}>
+function Q(a) {
+  const t = W(a), e = N(a);
+  return u` <div class="${Y}" ${d("_anchor")}>
 		<div
 			class="label-wrapper"
 			?hidden=${(o) => !o.label && !o._hasContextualHelp}
 		>
-			${U((o) => o.label, J())}
+			${K((o) => o.label, G())}
 			<slot
 				name="contextual-help"
 				${h("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
-			${(o) => t(o.icon, P.Slot)}
+			${(o) => t(o.icon, R.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -461,19 +456,19 @@ function X(a) {
 		</div>
 	</div>`;
 }
-const Z = (a) => {
+const X = (a) => {
   const t = a.tagFor(k);
   return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			@click="${(e, o) => e.clickHandler(o.event)}"
 			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
-			@keydown="${(e, { event: o }) => (e.open && K(o), e.keydownHandler(o))}"
+			@keydown="${(e, { event: o }) => (e.open && q(o), e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${() => X(a)}
+				${() => Q(a)}
 				<${t} class="popup"
-					style="${Q}"
+					style="${J}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -497,15 +492,15 @@ const Z = (a) => {
 			</div>
     </template>
 	`;
-}, ee = V(
+}, Z = A(
   "combobox",
-  s,
-  Z,
+  i,
+  X,
   [
     y,
-    $,
     I,
-    D
+    $,
+    H
   ],
   {
     styles: [C, j],
@@ -513,5 +508,5 @@ const Z = (a) => {
       delegatesFocus: !0
     }
   }
-), te = A(ee);
-te();
+), ee = O(Z);
+ee();

package/contextual-help/definition.cjs

@@ -58,5 +58,6 @@ const registerContextualHelp = vividElement.createRegisterFunction(
   contextualHelpDefinition
 );
 
+exports.VwcContextualHelpElement = ContextualHelp;
 exports.contextualHelpDefinition = contextualHelpDefinition;
 exports.registerContextualHelp = registerContextualHelp;

package/contextual-help/definition.js

@@ -54,4 +54,4 @@ const registerContextualHelp = createRegisterFunction(
   contextualHelpDefinition
 );
 
-export { contextualHelpDefinition, registerContextualHelp };
+export { ContextualHelp as VwcContextualHelpElement, contextualHelpDefinition, registerContextualHelp };