@aurodesignsystem/auro-formkit 2.0.0-beta.10 → 2.0.0-beta.11

package/components/combobox/src/auro-combobox.js

@@ -19,6 +19,11 @@ import dropdownVersion from './formkit/auro-dropdownVersion.js';
 import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
+import {
+  arrayConverter,
+  arrayOrUndefinedHasChanged
+} from '@aurodesignsystem/auro-menu';
+
 // Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
@@ -52,8 +57,8 @@ export class AuroCombobox extends LitElement {
 
     this.noFilter = false;
     this.validity = undefined;
-    this.value = null;
-    this.optionSelected = null;
+    this.value = undefined;
+    this.optionSelected = undefined;
 
     this.privateDefaults();
 
@@ -121,7 +126,11 @@ export class AuroCombobox extends LitElement {
         type: Boolean,
         reflect: true
       },
-      optionSelected: { type: Object },
+      optionSelected: {
+        type: Object,
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
       noValidate: { type: Boolean },
       required: {
         type: Boolean,
@@ -136,7 +145,8 @@ export class AuroCombobox extends LitElement {
         reflect: true
       },
       value: {
-        type: String
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
       },
       checkmark: {
         type: Boolean,
@@ -205,6 +215,33 @@ export class AuroCombobox extends LitElement {
     this.generateOptionsArray();
     this.availableOptions = [];
 
+    if (this.menu.optionSelected) {
+      // Get first option since combobox is single-select
+      const [selected] = this.menu.optionSelected;
+
+      if (!this.optionSelected || this.optionSelected[0] !== selected) {
+        // Store as array
+        this.optionSelected = [selected];
+      }
+
+      if (!this.value || this.value[0] !== selected.value) {
+        // Store as array
+        this.value = [selected.value];
+        // Menu already expects array
+        this.menu.value = this.value;
+      }
+
+      if (this.input.value !== selected.textContent) {
+        this.input.value = selected.textContent;
+      }
+
+      if (this.menu.matchWord !== this.input.value) {
+        this.menu.matchWord = this.input.value;
+      }
+
+      this.classList.add('combobox-filled');
+    }
+
     if (this.noFilter) {
       this.availableOptions = [...this.options];
     } else {
@@ -346,12 +383,15 @@ export class AuroCombobox extends LitElement {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', () => {
       if (this.menu.optionSelected) {
-        if (this.optionSelected !== this.menu.optionSelected) {
-          this.optionSelected = this.menu.optionSelected;
+        const [selected] = this.menu.optionSelected;
+
+        if (!this.optionSelected || this.optionSelected[0] !== selected) {
+          this.optionSelected = [selected];
         }
 
-        if (this.value !== this.optionSelected.value) {
-          this.value = this.optionSelected.value;
+        if (!this.value || this.value[0] !== this.optionSelected[0].value) {
+          this.value = [this.optionSelected[0].value];
+          this.menu.value = this.value;
         }
 
         if (this.input.value !== this.optionSelected.textContent) {
@@ -387,7 +427,7 @@ export class AuroCombobox extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.optionSelected = undefined;
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
@@ -415,8 +455,9 @@ export class AuroCombobox extends LitElement {
         this.validation.validate(this);
       }
 
-      if (typeof this.value === 'object') {
-        this.value = '';
+      // Set to undefined if empty
+      if (this.value && this.value.length === 0) {
+        this.value = undefined;
       }
     });
 
@@ -459,10 +500,10 @@ export class AuroCombobox extends LitElement {
 
     let hasChange = false;
 
-    if (this.value !== this.input.value) {
-      this.value = this.input.value;
+    // Store value as array or undefined
+    if (!this.value || this.value[0] !== this.input.value) {
+      this.value = this.input.value ? [this.input.value] : undefined;
       hasChange = true;
-
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
         bubbles: true,
         cancelable: false,
@@ -484,23 +525,23 @@ export class AuroCombobox extends LitElement {
       return;
     }
 
-    this.menu.resetOptionsStates();
+    this.menu.clearSelection();
     this.handleMenuOptions();
 
-    // validate if the value was set programmatically
+    // Validate only if the value was set programmatically
     if (document.activeElement !== this) {
       this.validation.validate(this);
     }
 
-    // hide the menu if the value is empty otherwise show if there are available suggestions
+    // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
       this.hideBib();
       this.classList.remove('combobox-filled');
     } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
       const hasFocus = this.contains(document.activeElement);
 
-      // if the focus is within the combobox, then show the bib
-      // this will prevent the bib from being shown while loading & presetting the value
+      // If focus is within the combobox, show bib
+      // Prevent bib from being shown while loading & presetting the value
       if (hasFocus) {
         this.showBib();
       }
@@ -508,7 +549,7 @@ export class AuroCombobox extends LitElement {
       this.classList.add('combobox-filled');
     }
 
-    // force the dropdown bib to hide if the input value has no matching suggestions
+    // Force dropdown bib to hide if input value has no matching suggestions
     if (!this.availableOptions || this.availableOptions.length === 0) {
       this.hideBib();
     }
@@ -548,11 +589,11 @@ export class AuroCombobox extends LitElement {
 
       if (this.dropdown.isPopoverVisible) {
         if (evt.key === 'ArrowUp') {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
 
         if (evt.key === 'ArrowDown') {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
     });
@@ -611,20 +652,23 @@ export class AuroCombobox extends LitElement {
   reset() {
     this.input.reset();
     this.validation.reset(this);
+    this.menu.value = undefined;
   }
 
   updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
       if (this.value) {
-        if (this.optionSelected && this.optionSelected.value === this.value) {
+        if (this.optionSelected && this.optionSelected[0] && this.optionSelected[0].value === this.value[0]) {
           // If value updates and the previously selected option already matches the new value
           // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected.textContent;
+          this.input.value = this.optionSelected[0].textContent;
         } else {
           // Otherwise just enter the value into the input
           this.optionSelected = undefined;
-          this.input.value = this.value;
+          // Use first value since combobox is single-select
+          const [inputValue] = this.value;
+          this.input.value = inputValue;
 
           // If the value got set programmatically make sure we hide the bib
           if (!this.contains(document.activeElement)) {
@@ -646,7 +690,7 @@ export class AuroCombobox extends LitElement {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
-   * @param {Event} event - slotchange event
+   * @param {Event} event - `slotchange` event.
    * @returns {void}
    */
   handleSlotChange(event) {

package/components/counter/.turbo/turbo-build.log

@@ -302,13 +302,13 @@ Complete!
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 826ms
+created ./demo/ in 1.3s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 466ms
+created ./demo/ in 712ms
 
 > @aurodesignsystem/auro-counter@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component counter

package/components/counter/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 927ms
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 541ms
+created ./demo/ in 882ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 604ms
+created ./demo/ in 651ms

package/components/counter/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.9/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.10/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

package/components/datepicker/.turbo/turbo-build.log

@@ -373,13 +373,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.4s
+created dist in 7.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.7s
+created ./demo/ in 3.6s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.4s
+created ./demo/ in 3.3s
 
 > @aurodesignsystem/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker

package/components/datepicker/README.md

@@ -93,10 +93,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.9/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.9/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.9/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.9/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.10/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.10/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.10/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.10/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.6s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.2s
+created ./demo/ in 937ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 947ms
+created ./demo/ in 741ms
 
 > @aurodesignsystem/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

package/components/dropdown/.turbo/turbo-bundler.log

@@ -7,7 +7,7 @@
 created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 848ms
+created ./demo/ in 843ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 808ms
+created ./demo/ in 821ms

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.9/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.10/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/.turbo/turbo-build.log

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 369ms
+created dist in 592ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 279ms
+created ./demo/ in 282ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 225ms
+created ./demo/ in 218ms
 
 > @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 440ms
+created dist in 435ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 258ms
+created ./demo/ in 400ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 250ms
+created ./demo/ in 377ms

package/components/form/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.9/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.10/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

package/components/input/.turbo/turbo-build.log

@@ -216,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 966ms
+created ./demo/ in 1.2s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 1.5s
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 952ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 773ms

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.9/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.10/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/.turbo/turbo-build.log

@@ -104,10 +104,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 654ms
+created ./demo/ in 565ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 627ms
+created ./demo/ in 657ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu
@@ -149,6 +149,7 @@ Web Component Analyzer analyzing 2 files...
   ⁕ FILE:src=./../apiExamples/nocheckmark.html 
   ⁕ FILE:src=./../apiExamples/disabledMenu.html 
   ⁕ FILE:src=./../apiExamples/matchWord.html 
+  ⁕ FILE:src=./../apiExamples/multiSelect.html 
   ⁕ FILE:src=./../apiExamples/loading.html 
   ⁕ FILE:src=./../apiExamples/scroll.html 
   ⁕ FILE:src=./../apiExamples/hr.html 
@@ -163,6 +164,7 @@ Web Component Analyzer analyzing 2 files...
   ⁕ CODE:src=./../apiExamples/disabledMenu.html 
   ⁕ CODE:src=./../apiExamples/matchWord.js 
   ⁕ CODE:src=./../apiExamples/matchWord.html 
+  ⁕ CODE:src=./../apiExamples/multiSelect.html 
   ⁕ CODE:src=./../apiExamples/loading.js 
   ⁕ CODE:src=./../apiExamples/loading.html 
   ⁕ CODE:src=./../apiExamples/scroll.html 

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 954ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 791ms
+created ./demo/ in 742ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 648ms
+created ./demo/ in 761ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.9/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.10/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

package/components/menu/demo/api.md

@@ -5,26 +5,31 @@
 
 The auro-menu element provides users a way to select from a list of options.
 
+## Attributes
+
+| Attribute        | Type                            | Description                                      |
+|------------------|---------------------------------|--------------------------------------------------|
+| [optionselected](#optionselected) | `Array<HTMLElement>\|undefined` | An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected. |
+
 ## Properties
 
-| Property                | Attribute        | Type      | Default     | Description                                      |
-|-------------------------|------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)              | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
-| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `Boolean` |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| [loading](#loading)               | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| [matchWord](#matchWord)             | `matchWord`      | `String`  | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| [noCheckmark](#noCheckmark)           | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)          | `optionActive`   | `object`  | "undefined" |                                                  |
-| [optionSelected](#optionSelected)        | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
-| [value](#value)                 | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
+| Property                | Attribute        | Type                       | Default     | Description                                      |
+|-------------------------|------------------|----------------------------|-------------|--------------------------------------------------|
+| [disabled](#disabled)              | `disabled`       | `boolean`                  |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                  |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [loading](#loading)               | `loading`        | `boolean`                  | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)             | `matchword`      | `string`                   | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                  | false       | When true, the selected option can be multiple options. |
+| [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                  | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)          | `optionactive`   | `object`                   | "undefined" | Specifies the current active menuOption.         |
+| [optionSelected](#optionSelected)        | `optionSelected` |                            | "undefined" |                                                  |
+| [value](#value)                 | `value`          | `Array<string>\|undefined` | "undefined" | Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value. |
 
 ## Methods
 
-| Method               | Type                            | Description                                      |
-|----------------------|---------------------------------|--------------------------------------------------|
-| [makeSelection](#makeSelection)      | `(): void`                      | Process actions for making making a menuoption selection. |
-| [resetOptionsStates](#resetOptionsStates) | `(): void`                      | Reset the menu and all options.                  |
-| [selectNextItem](#selectNextItem)     | `(moveDirection: string): void` | Using value of current this.index evaluates index<br />of next :focus to set based on array of this.items ignoring items<br />with disabled attr.<br /><br />The event.target is not used as the function needs to know where to go,<br />versus knowing where it is.<br /><br />**moveDirection**: Up or Down based on keyboard event. |
+| Method  | Type       | Description                                      |
+|---------|------------|--------------------------------------------------|
+| [reset](#reset) | `(): void` | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
 
 ## Events
 
@@ -33,7 +38,7 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
-| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
 
@@ -308,6 +313,38 @@ export function auroMenuMatchWordExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Multi Select<a name="multiSelect"></a>
+The `auro-menu` supports a multi-select option. To use, place the `multiselect` attribute on the `<auro-menu>` element tag. When applied, the `value` attribute will become an Array versus String value.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiSelect.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/multiSelect.html -->
+  <auro-menu multiselect>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiSelect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/multiSelect.html -->
+
+```html
+<auro-menu multiselect>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### Loading<a name="loading"></a>
 While content is loading, the menu can either remain empty or display a loading placeholder
 
@@ -874,12 +911,12 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t
 ```js
 export function auroMenuResetExample() {
   const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
-  const resetExampleElem = document.querySelector('#resetExample');
-
+  const resetExampleElem = document.querySelector('#resetExample');
+
   if (resetExampleElem && resetExampleBtnElem) {
     resetExampleBtnElem.addEventListener('click', () => {
-      resetExampleElem.value = undefined;
-    })
+      resetExampleElem.reset();
+    });
   }
 }
 ```