@vonage/vivid 5.3.0 → 5.5.0

package/combobox/definition.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const icon_definition = require('../icon/definition.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
-const option_definition = require('../option/definition.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 const textField = require('../unbundled/text-field.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const mixins = require('../unbundled/mixins.cjs');
@@ -74,14 +74,12 @@ class Combobox extends withContextualHelp.WithContextualHelp(
     this.proxy = document.createElement("input");
   }
   /**
-   * Reset the element to its first selectable option when its parent form is reset.
-   *
    * @internal
    */
   formResetCallback() {
     super.formResetCallback();
-    this.setDefaultSelectedOption();
-    this.updateValue();
+    this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
+    this.value = this.firstSelectedOption?.text || "";
   }
   /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
@@ -123,8 +121,7 @@ class Combobox extends withContextualHelp.WithContextualHelp(
     return this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(value) {
-    this._options = value;
-    fastElement.Observable.notify(this, "options");
+    super.options = value;
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -372,24 +369,8 @@ class Combobox extends withContextualHelp.WithContextualHelp(
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Set the default selected options at initialization or reset.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.setDefaultSelectedOption`
-   */
-  setDefaultSelectedOption() {
-    if (this.$fastController.isConnected && this.options) {
-      const selectedIndex = this.options.findIndex(
-        (el) => el.getAttribute("selected") !== null || el.selected
-      );
-      this.selectedIndex = selectedIndex;
-      if (!this.dirtyValue && this.firstSelectedOption) {
-        this.value = this.firstSelectedOption.text;
-      }
-      this.setSelectedOptions();
-    }
+  _isDefaultSelected(option) {
+    return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
   }
   /**
    * Focus and set the content of the control based on the first selected option.
@@ -472,7 +453,6 @@ class Combobox extends withContextualHelp.WithContextualHelp(
   updateValue(shouldEmit) {
     if (this.$fastController.isConnected) {
       this.value = this.firstSelectedOption?.text || this.control.value;
-      this.control.value = this.value;
     }
     if (shouldEmit) {
       this.$emit("change");

package/combobox/definition.js

@@ -1,6 +1,6 @@
 import { iconDefinition } from '../icon/definition.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
-import { listboxOptionDefinition } from '../option/definition.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
+import { l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { s as styles$1 } from '../unbundled/text-field.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
@@ -12,7 +12,7 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 import { c as chevronTemplateFactory } from '../unbundled/definition.js';
 
@@ -70,14 +70,12 @@ class Combobox extends WithContextualHelp(
     this.proxy = document.createElement("input");
   }
   /**
-   * Reset the element to its first selectable option when its parent form is reset.
-   *
    * @internal
    */
   formResetCallback() {
     super.formResetCallback();
-    this.setDefaultSelectedOption();
-    this.updateValue();
+    this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
+    this.value = this.firstSelectedOption?.text || "";
   }
   /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
@@ -119,8 +117,7 @@ class Combobox extends WithContextualHelp(
     return this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(value) {
-    this._options = value;
-    Observable.notify(this, "options");
+    super.options = value;
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -368,24 +365,8 @@ class Combobox extends WithContextualHelp(
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Set the default selected options at initialization or reset.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.setDefaultSelectedOption`
-   */
-  setDefaultSelectedOption() {
-    if (this.$fastController.isConnected && this.options) {
-      const selectedIndex = this.options.findIndex(
-        (el) => el.getAttribute("selected") !== null || el.selected
-      );
-      this.selectedIndex = selectedIndex;
-      if (!this.dirtyValue && this.firstSelectedOption) {
-        this.value = this.firstSelectedOption.text;
-      }
-      this.setSelectedOptions();
-    }
+  _isDefaultSelected(option) {
+    return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
   }
   /**
    * Focus and set the content of the control based on the first selected option.
@@ -468,7 +449,6 @@ class Combobox extends WithContextualHelp(
   updateValue(shouldEmit) {
     if (this.$fastController.isConnected) {
       this.value = this.firstSelectedOption?.text || this.control.value;
-      this.control.value = this.value;
     }
     if (shouldEmit) {
       this.$emit("change");

package/combobox/index.cjs

@@ -1,6 +1,6 @@
-"use strict";const $=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),k=require("../bundled/definition11.cjs"),C=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),I=require("../bundled/form-associated.cjs"),O=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),A=require("../bundled/with-success-text.cjs"),q=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),V=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),H=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='.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(--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(--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(--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}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&L(t,e,n),n};class i extends O.WithContextualHelp(b.WithFeedback(S.WithErrorText(A.WithSuccessText(q.FormElement(u.AffixIcon(I.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.setDefaultSelectedOption(),this.updateValue()}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(),r.Updates.enqueue(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){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()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==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;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(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}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)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}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(){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(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function z(){return r.html` <label for="control" class="label">
+"use strict";const k=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),$=require("../bundled/definition12.cjs"),I=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"),T=require("../bundled/strings.cjs"),V=require("../bundled/numbers.cjs"),H=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='.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(--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(--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(--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}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',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(C.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=T.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(){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;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(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=V.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(){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:g,label:_,appearance:f,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["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 r.html` <div class="${R}" ${d.ref("_anchor")}>
+	</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")}>
 		${E.when(o=>o.label,z())}
 		<slot
 			name="contextual-help"
@@ -24,20 +24,20 @@
 					type="text"
 					?disabled="${o=>o.disabled}"
 					:value="${o=>o.value}"
-					@input="${(o,n)=>o.inputHandler(n.event)}"
+					@input="${(o,r)=>o.inputHandler(r.event)}"
 					${d.ref("control")}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
 				<slot name="meta" ${h.slotted("metaSlottedContent")}></slot>
 				<div
-					@click="${(o,n)=>o._chevronIconClickHandler(n.event)}"
+					@click="${(o,r)=>o._chevronIconClickHandler(r.event)}"
 				>
 					${e}
 				</div>
 			</div>
 		</div>
-	</div>`}const K=a=>{const t=a.tagFor(v.Popup);return r.html`
+	</div>`}const K=a=>{const t=a.tagFor(v.Popup);return n.html`
 		<template
 			tabindex="${e=>e.disabled?null:"0"}"
 			@click="${(e,o)=>e.clickHandler(o.event)}"
@@ -66,4 +66,4 @@
 				${e=>e._getFeedbackTemplate(a)}
 			</div>
     </template>
-	`},M=r.defineVividComponent("combobox",i,K,[$.iconDefinition,v.popupDefinition,k.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[C.styles,B],shadowOptions:{delegatesFocus:!0}}),N=r.createRegisterFunction(M);N();
+	`},M=n.defineVividComponent("combobox",i,K,[k.iconDefinition,v.popupDefinition,$.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[I.styles,B],shadowOptions:{delegatesFocus:!0}}),N=n.createRegisterFunction(M);N();

package/combobox/index.js

@@ -1,11 +1,11 @@
-import { i as k } from "../bundled/definition2.js";
-import { P as $, p as I } from "../bundled/definition9.js";
-import { l as C } from "../bundled/definition11.js";
-import { s as O } from "../bundled/text-field.js";
-import { U as S, O as v, a as l, o as b, h as u, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as H, f as T } from "../bundled/mixins.js";
-import { L as m } from "../bundled/listbox.js";
-import { F as D } from "../bundled/form-associated.js";
+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 { 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 D, 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";
@@ -25,15 +25,15 @@ const j = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-ex
   both: "both",
   none: "none"
 };
-var Y = Object.defineProperty, n = (a, t, e, o) => {
+var Y = Object.defineProperty, i = (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 && Y(t, e, r), r;
 };
-class i extends F(
-  H(
+class n extends F(
+  D(
     B(
-      L(E(W(D(m))))
+      L(E(W(T(b))))
     )
   )
 ) {
@@ -41,12 +41,10 @@ class i extends F(
     super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
-   * Reset the element to its first selectable option when its parent form is reset.
-   *
    * @internal
    */
   formResetCallback() {
-    super.formResetCallback(), this.setDefaultSelectedOption(), this.updateValue();
+    super.formResetCallback(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1, this.value = this.firstSelectedOption?.text || "";
   }
   /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
@@ -71,7 +69,7 @@ class i extends F(
    */
   openChanged() {
     if (this.open) {
-      this.focusAndScrollOptionIntoView(), S.enqueue(() => this.control.focus());
+      this.focusAndScrollOptionIntoView(), O.enqueue(() => this.control.focus());
       return;
     }
   }
@@ -83,10 +81,10 @@ class i extends F(
    * Overrides `Listbox.options`.
    */
   get options() {
-    return v.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+    return S.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(t) {
-    this._options = t, v.notify(this, "options");
+    super.options = t;
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -262,20 +260,8 @@ class i extends F(
   selectPreviousOption() {
     !this.disabled && this.selectedIndex >= 0 && (this.selectedIndex = this.selectedIndex - 1);
   }
-  /**
-   * Set the default selected options at initialization or reset.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.setDefaultSelectedOption`
-   */
-  setDefaultSelectedOption() {
-    if (this.$fastController.isConnected && this.options) {
-      const t = this.options.findIndex(
-        (e) => e.getAttribute("selected") !== null || e.selected
-      );
-      this.selectedIndex = t, !this.dirtyValue && this.firstSelectedOption && (this.value = this.firstSelectedOption.text), this.setSelectedOptions();
-    }
+  _isDefaultSelected(t) {
+    return super._isDefaultSelected(t) || t.text !== "" && t.text === this.initialValue;
   }
   /**
    * Focus and set the content of the control based on the first selected option.
@@ -344,7 +330,7 @@ class i extends F(
    * @internal
    */
   updateValue(t) {
-    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value, this.control.value = this.value), t && this.$emit("change");
+    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value), t && this.$emit("change");
   }
   /**
    * @internal
@@ -354,36 +340,36 @@ class i extends F(
     this.control.setSelectionRange(t, t);
   }
 }
-n([
+i([
   l({ attribute: "autocomplete", mode: "fromView" })
-], i.prototype, "autocomplete");
-n([
+], n.prototype, "autocomplete");
+i([
   l
-], i.prototype, "appearance");
-n([
+], n.prototype, "appearance");
+i([
   l
-], i.prototype, "shape");
-n([
+], n.prototype, "shape");
+i([
   l()
-], i.prototype, "scale");
-n([
+], n.prototype, "scale");
+i([
   l
-], i.prototype, "placement");
-n([
+], n.prototype, "placement");
+i([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
-], i.prototype, "fixedDropdown");
-n([
-  b
-], i.prototype, "metaSlottedContent");
-n([
-  b
-], i.prototype, "maxHeight");
-n([
+], n.prototype, "fixedDropdown");
+i([
+  v
+], n.prototype, "metaSlottedContent");
+i([
+  v
+], n.prototype, "maxHeight");
+i([
   l({ attribute: "open", mode: "boolean" })
-], i.prototype, "open");
-n([
+], n.prototype, "open");
+i([
   l
-], i.prototype, "placeholder");
+], n.prototype, "placeholder");
 const G = ({
   icon: a,
   iconSlottedContent: t,
@@ -392,23 +378,23 @@ const G = ({
   successText: r,
   shape: s,
   scale: c,
-  disabled: x,
-  placeholder: g,
-  label: _,
+  disabled: m,
+  placeholder: x,
+  label: g,
   appearance: f,
-  open: w,
-  _activeDescendant: y
+  open: _,
+  _activeDescendant: w
 }) => N(
   "base",
-  ["disabled", x],
+  ["disabled", m],
   [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
-  ["placeholder", !!g],
+  ["placeholder", !!x],
   [`appearance-${f}`, !!f],
-  ["no-label", !_],
+  ["no-label", !g],
   ["has-icon", !!a || !!t?.length],
   ["has-meta", !!e?.length],
-  ["has-activedescendant", !!y && w],
+  ["has-activedescendant", !!w && _],
   ["error", !!o],
   ["success", !!r]
 );
@@ -464,7 +450,7 @@ function X(a) {
 	</div>`;
 }
 const Z = (a) => {
-  const t = a.tagFor($);
+  const t = a.tagFor(k);
   return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
@@ -486,7 +472,7 @@ const Z = (a) => {
 						?disabled="${(e) => e.disabled}"
 						${d("listbox")}>
 						<slot ${h({
-    filter: m.slottedOptionFilter,
+    filter: b.slottedOptionFilter,
     flatten: !0,
     property: "slottedOptions"
   })}>
@@ -501,16 +487,16 @@ const Z = (a) => {
 	`;
 }, ee = V(
   "combobox",
-  i,
+  n,
   Z,
   [
-    k,
+    y,
+    $,
     I,
-    C,
-    T
+    H
   ],
   {
-    styles: [O, j],
+    styles: [C, j],
     shadowOptions: {
       delegatesFocus: !0
     }

package/contextual-help/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition12.cjs");e.registerContextualHelp();
+"use strict";const e=require("../bundled/definition13.cjs");e.registerContextualHelp();

package/contextual-help/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition12.js";
+import { r } from "../bundled/definition13.js";
 r();