@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.2 → 0.0.0-pr1052.20

package/components/combobox/README.md

@@ -22,7 +22,7 @@ The following sections are editable by making changes to the following files:
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
 
-Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->

package/components/combobox/demo/api.md

@@ -5,38 +5,42 @@
 
 ## Properties
 
-| Property                        | Attribute                       | Modifiers | Type                  | Default        | Description                                      |
-|---------------------------------|---------------------------------|-----------|-----------------------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 |           | `boolean`             |                | If declared, bib's position will be automatically calculated where to appear. |
-| [autocomplete](#autocomplete)                  | `autocomplete`                  |           | `string`              | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [checkmark](#checkmark)                     | `checkmark`                     |           | `boolean`             |                | When attribute is present auro-menu will apply check marks to selected options. |
-| [disabled](#disabled)                      | `disabled`                      |           | `boolean`             |                | If set, disables the combobox.                   |
-| [dvInputOnly](#dvInputOnly)                   | `dvInputOnly`                   |           | `boolean`             |                | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
-| [error](#error)                         | `error`                         |           | `string`              |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [format](#format)                        | `format`                        |           | `string`              |                | Specifies the input mask format.                 |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          |           | `string`              | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [inputValue](#inputValue)                    |                                 | readonly  | `string \| undefined` |                | Returns the current value of the input element within the combobox. |
-| [inputmode](#inputmode)                     | `inputmode`                     |           | `string`              |                | Exposes inputmode attribute for input.           |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       |           | `boolean`             |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [layout](#layout)                        |                                 |           | `string`              |                |                                                  |
-| [matchWidth](#matchWidth)                    | `matchWidth`                    |           | `boolean`             | true           | If declared, the popover and trigger will be set to the same width. |
-| [noFilter](#noFilter)                      | `noFilter`                      |           | `boolean`             |                | If set, combobox will not filter menuoptions based in input. |
-| [noFlip](#noFlip)                        | `noFlip`                        |           | `boolean`             | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    |           | `boolean`             |                | If set, disables auto-validation on blur.        |
-| [offset](#offset)                        | `offset`                        |           | `number`              | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                        | `onDark`                        |           | `boolean`             |                | If declared, onDark styles will be applied to the trigger. |
-| [optionSelected](#optionSelected)                | `optionSelected`                |           | `HTMLElement`         |                | Specifies the current selected option.           |
-| [persistInput](#persistInput)                  | `persistInput`                  |           | `Boolean`             |                | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
-| [placeholder](#placeholder)                   | `placeholder`                   |           | `string`              |                | Define custom placeholder text, only supported by date input formats. |
-| [placement](#placement)                     | `placement`                     |           | `string`              | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [required](#required)                      | `required`                      |           | `boolean`             |                | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             |           | `string`              |                | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  |           | `string`              |                | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` |           | `string`              |                | Custom help text message to display when validity = `valueMissing`. |
-| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   |           | `boolean`             |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)                          | `type`                          |           | `string`              |                | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)                      | `validity`                      |           | `string`              |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           | `string`              |                | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Modifiers | Type                  | Default                    | Description                                      |
+|---------------------------------|---------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 |           | `boolean`             | false                      | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  |           | `string`              | "false"                    | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [checkmark](#checkmark)                     | `checkmark`                     |           | `boolean`             | false                      | When attribute is present auro-menu will apply check marks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      |           | `boolean`             | false                      | If set, disables the combobox.                   |
+| [dvInputOnly](#dvInputOnly)                   | `dvInputOnly`                   |           | `boolean`             | false                      | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
+| [error](#error)                         | `error`                         |           | `string`              |                            | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [format](#format)                        | `format`                        |           | `string`              |                            | Specifies the input mask format.                 |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          |           | `string`              | "sm"                       | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputValue](#inputValue)                    |                                 | readonly  | `string \| undefined` |                            | Returns the current value of the input element within the combobox. |
+| [inputmode](#inputmode)                     | `inputmode`                     |           | `string`              |                            | Exposes inputmode attribute for input.           |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       |           | `boolean`             |                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [layout](#layout)                        |                                 |           | `string`              | "classic"                  |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    |           | `boolean`             | true                       | If declared, the popover and trigger will be set to the same width. |
+| [msgSelectionMissing](#msgSelectionMissing)           |                                 |           | `string`              | "Please select an option." |                                                  |
+| [noFilter](#noFilter)                      | `noFilter`                      |           | `boolean`             | false                      | If set, combobox will not filter menuoptions based in input. |
+| [noFlip](#noFlip)                        | `noFlip`                        |           | `boolean`             | "false"                    | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    |           | `boolean`             | false                      | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        |           | `number`              | "0"                        | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        |           | `boolean`             |                            | If declared, onDark styles will be applied to the trigger. |
+| [optionSelected](#optionSelected)                | `optionSelected`                |           | `HTMLElement`         |                            | Specifies the current selected option.           |
+| [persistInput](#persistInput)                  | `persistInput`                  |           | `Boolean`             | false                      | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
+| [placeholder](#placeholder)                   | `placeholder`                   |           | `string`              |                            | Define custom placeholder text, only supported by date input formats. |
+| [placement](#placement)                     | `placement`                     |           | `string`              | "bottom-start"             | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [required](#required)                      | `required`                      |           | `boolean`             | false                      | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             |           | `string`              |                            | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  |           | `string`              |                            | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` |           | `string`              |                            | Custom help text message to display when validity = `valueMissing`. |
+| [shape](#shape)                         |                                 |           | `string`              | "classic"                  |                                                  |
+| [size](#size)                          |                                 |           | `string`              | "xl"                       |                                                  |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   |           | `boolean`             | false                      | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          |           | `string`              |                            | Applies the defined value as the type attribute on auro-input. |
+| [typedValue](#typedValue)                    | `typedValue`                    |           | `string`              | "undefined"                | Specifies the value of the input element within the combobox. |
+| [validity](#validity)                      | `validity`                      |           | `string`              |                            | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         |           | `string`              | "undefined"                | Value selected for the dropdown menu.            |
 
 ## Methods
 
@@ -166,7 +170,7 @@ The menu in this example was populated from data from a country/city API. To kee
   <!-- ----------------- -->
   <auro-combobox
     id="dynamicMenuExample"
-    value="GER"
+    value="TAN"
     layout="snowflake"
     shape="snowflake"
     size="lg"
@@ -176,13 +180,35 @@ The menu in this example was populated from data from a country/city API. To kee
     dvInputOnly
     required>
     <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
-    <span slot="label">Name</span>
+    <span slot="label">First</span>
     <!--
       The auro-combobox element requires an empty auro-menu element
       due to the requirements of auro-dropdown and auro-input
     -->
     <auro-menu id="initMenu"></auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <auro-combobox
+    id="dynamicMenuExampleTwo"
+    value="GER"
+    layout="snowflake"
+    shape="snowflake"
+    size="lg"
+    ondark
+    noFilter
+    persistInput
+    dvInputOnly
+    required>
+    <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
+    <span slot="label">Second</span>
+    <!--
+      The auro-combobox element requires an empty auro-menu element
+      due to the requirements of auro-dropdown and auro-input
+    -->
+    <auro-menu id="initMenuTwo"></auro-menu>
+  </auro-combobox>
+  <auro-button id="dynamicMenuSwapButton">
+    Swap Values
+  </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -195,7 +221,7 @@ The menu in this example was populated from data from a country/city API. To kee
 <!-- ----------------- -->
 <auro-combobox
   id="dynamicMenuExample"
-  value="GER"
+  value="TAN"
   layout="snowflake"
   shape="snowflake"
   size="lg"
@@ -205,13 +231,35 @@ The menu in this example was populated from data from a country/city API. To kee
   dvInputOnly
   required>
   <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
-  <span slot="label">Name</span>
+  <span slot="label">First</span>
   <!--
     The auro-combobox element requires an empty auro-menu element
     due to the requirements of auro-dropdown and auro-input
   -->
   <auro-menu id="initMenu"></auro-menu>
 </auro-combobox>
+<auro-combobox
+  id="dynamicMenuExampleTwo"
+  value="GER"
+  layout="snowflake"
+  shape="snowflake"
+  size="lg"
+  ondark
+  noFilter
+  persistInput
+  dvInputOnly
+  required>
+  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
+  <span slot="label">Second</span>
+  <!--
+    The auro-combobox element requires an empty auro-menu element
+    due to the requirements of auro-dropdown and auro-input
+  -->
+  <auro-menu id="initMenuTwo"></auro-menu>
+</auro-combobox>
+<auro-button id="dynamicMenuSwapButton">
+  Swap Values
+</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamicMenu.js) -->
@@ -230,9 +278,36 @@ export async function dynamicMenuExample() {
     }
   }
 
+  function swapValues() {
+    const elOne = document.querySelector('#dynamicMenuExample');
+    const elTwo = document.querySelector('#dynamicMenuExampleTwo');
+
+    const elOneValue = elOne.value;
+    const elTwoValue = elTwo.value;
+
+    const elOneInputValue = elOne.input.value;
+    const elTwoInputValue = elTwo.input.value;
+
+    elOne.reset();
+    elTwo.reset();
+
+    elOne.value = elTwoValue;
+    elTwo.value = elOneValue;
+
+    setTimeout(() => {
+      console.warn('timeout executed ============================');
+      elOne.typedValue = elTwoInputValue;
+      elTwo.typedValue = elOneInputValue;
+    }, 0);
+  }
+
+  document.querySelector('#dynamicMenuSwapButton').addEventListener('click', () => {
+    swapValues();
+  });
+
   // Generates HTML for menu and submenus using country & city data from an external API
-  function generateHtml(data) {
-    const initialMenu = document.querySelector('#initMenu');
+  function generateHtml(data, selector) {
+    const initialMenu = document.querySelector(selector);
 
     resetMenu(initialMenu);
 
@@ -275,13 +350,31 @@ export async function dynamicMenuExample() {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
   });
 
   if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
+  }
+
+  const dynamicDataTwo = new DynamicData();
+  const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExample');
+  const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
+  const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
+
+  inputElTwo.addEventListener('input', () => {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputEl.value);
+
+    generateHtml(data, '#initMenuTwo');
+  });
+
+  if (dynamicMenuExampleElTwo.value && dynamicMenuExampleElTwo.value.length > 0 && dynamicMenuExampleElTwo.input.value && (!dynamicMenuExampleElTwo.menu.availableOptions || dynamicMenuExampleElTwo.menu.availableOptions.length === 0)) {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputElTwo.value);
+    generateHtml(data, '#initMenuTwo');
   }
 }
 ```

package/components/combobox/demo/api.min.js

@@ -40,9 +40,37 @@ async function dynamicMenuExample() {
     }
   }
 
+  function swapValues() {
+    const elOne = document.querySelector('#dynamicMenuExample');
+    const elTwo = document.querySelector('#dynamicMenuExampleTwo');
+
+    const elOneValue = elOne.value;
+    const elTwoValue = elTwo.value;
+
+    const elOneInputValue = elOne.input.value;
+    const elTwoInputValue = elTwo.input.value;
+
+    elOne.reset();
+    elTwo.reset();
+
+    elOne.value = elTwoValue;
+    elTwo.value = elOneValue;
+
+
+    setTimeout(() => {
+      console.warn('timeout executed ============================');
+      elOne.typedValue = elTwoInputValue;
+      elTwo.typedValue = elOneInputValue;
+    }, 0);
+  }
+
+  document.querySelector('#dynamicMenuSwapButton').addEventListener('click', () => {
+    swapValues();
+  });
+
   // Generates HTML for menu and submenus using country & city data from an external API
-  function generateHtml(data) {
-    const initialMenu = document.querySelector('#initMenu');
+  function generateHtml(data, selector) {
+    const initialMenu = document.querySelector(selector);
 
     resetMenu(initialMenu);
 
@@ -84,14 +112,32 @@ async function dynamicMenuExample() {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
   });
 
 
   if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
+  }
+
+  const dynamicDataTwo = new DynamicData();
+  const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExample');
+  const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
+  const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
+
+  inputElTwo.addEventListener('input', () => {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputEl.value);
+
+    generateHtml(data, '#initMenuTwo');
+  });
+
+  if (dynamicMenuExampleElTwo.value && dynamicMenuExampleElTwo.value.length > 0 && dynamicMenuExampleElTwo.input.value && (!dynamicMenuExampleElTwo.menu.availableOptions || dynamicMenuExampleElTwo.menu.availableOptions.length === 0)) {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputElTwo.value);
+    generateHtml(data, '#initMenuTwo');
   }
 }
 
@@ -10578,7 +10624,7 @@ class BaseInput extends AuroElement$2$1 {
       ...super.properties,
 
       /**
-       * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
        */
       dvInputOnly: {
         type: Boolean,
@@ -15855,7 +15901,7 @@ var bibTemplateVersion = '1.0.0';
 
 var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
-var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
+var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
 var styleSnowflakeCss = i$5`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -16193,80 +16239,60 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
 
-    this.matchWidth = true;
-
-    this.privateDefaults();
-  }
-
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.touched = false;
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
-
-    this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-
-    this.validation = new AuroFormValidation$1();
-
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-
-    this.isHiddenWhileLoading = false;
-
     this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    this.typedValue = undefined;
 
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
     this.dvInputOnly = false;
-
-    // Error message
-    this.errorMessage = null;
-
-    // Layout Config
-    /**
-     * @private
-     */
+    this.fullscreenBreakpoint = 'sm';
     this.layout = 'classic';
-
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
 
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
 
+    this.privateDefaults();
+  }
+
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
 
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
 
   // This function is to define props used within the scope of this component
@@ -16521,6 +16547,14 @@ class AuroCombobox extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * Specifies the value of the input element within the combobox.
+       */
+      typedValue: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Specifies the `validityState` this element is in.
        */
@@ -16591,6 +16625,13 @@ class AuroCombobox extends AuroElement$1 {
     return this.input.value;
   }
 
+  // /**
+  //  * Sets the value of the input element within the combobox.
+  //  */
+  // set inputValue(value) {
+  //   this.input.value = value;
+  // }
+
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16709,6 +16750,8 @@ class AuroCombobox extends AuroElement$1 {
         this.input.appendChild(displayValueEl.cloneNode(true));
       }
     }
+
+    this.requestUpdate();
   }
 
   /**
@@ -16735,6 +16778,10 @@ class AuroCombobox extends AuroElement$1 {
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.syncValuesAndStates();
+    }
   }
 
   /**
@@ -16922,7 +16969,7 @@ class AuroCombobox extends AuroElement$1 {
 
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
 
         this.updateTriggerTextDisplay();
@@ -17174,10 +17221,11 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.input.reset();
-    this.menu.reset();
     this.optionSelected = undefined;
     this.value = undefined;
+    this.typedValue = undefined;
+    this.input.value = undefined;
+    this.menu.value = undefined;
     this.validation.reset(this);
     this.touched = false;
   }
@@ -17382,6 +17430,7 @@ class AuroCombobox extends AuroElement$1 {
               .inputmode="${this.inputmode}"
               .placeholder="${this.placeholder}"
               .type="${this.type}"
+              .value="${this.typedValue}"
               ?disabled="${this.disabled}"
               ?icon="${this.triggerIcon}"
               ?dvInputOnly="${this.dvInputOnly}"
@@ -17416,6 +17465,7 @@ class AuroCombobox extends AuroElement$1 {
               .inputmode="${this.inputmode}"
               .placeholder="${this.placeholder}"
               .type="${this.type}"
+              .value="${this.typedValue}"
               ?disabled="${this.disabled}"
               ?icon="${this.triggerIcon}"
               ?required="${this.required}"
@@ -17733,6 +17783,10 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
+    if (changedProperties.has('optionSelected')) {
+      this.notifySelectionChange();
+    }
+
     if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();

package/components/combobox/demo/index.md

@@ -4,7 +4,7 @@
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
 
-Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases