@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.5 → 0.0.0-pr624.50

package/components/radio/dist/registered.js

@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
+/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -115,8 +116,8 @@ class AuroRadio extends LitElement {
     this.required = false;
     this.error = false;
     this.onDark = false;
-    this.tabIndex = -1;
     this.touched = false;
+    this.role = 'radio';
 
     /**
      * @private
@@ -158,10 +159,6 @@ class AuroRadio extends LitElement {
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
-      tabIndex: {
-        type: Number,
-        reflect: true
-      },
 
       /**
        * Whether or not the radio button has been touched by the user.
@@ -174,13 +171,22 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * ID for input node.
        * @private
-       * id for input node
        */
       inputId: {
         type: String,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * @private
+       * not to add to api.md since changing of this can easily break a11y.
+       */
+      role: {
+        type: String,
+        reflect: true
       }
     };
   }
@@ -206,7 +212,6 @@ class AuroRadio extends LitElement {
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
-
     this.dispatchEvent(customEvent);
   }
 
@@ -265,7 +270,27 @@ class AuroRadio extends LitElement {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('error') || changedProperties.has('validity')) {
+      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('required')) {
+      this.setAttribute('aria-required', this.isRequired(this.required));
+    }
+
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', '');
+      } else {
+        this.removeAttribute('aria-disabled');
+      }
+    }
+
     if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+      // eslint-disable-next-line no-magic-numbers
+      this.setAttribute('tabindex', this.checked ? 0 : -1);
+
       this.dispatchEvent(new CustomEvent('resetRadio', {
         bubbles: true,
         composed: true
@@ -280,20 +305,6 @@ class AuroRadio extends LitElement {
     }
   }
 
-  /**
-   * Method for handling content when it is invalid accessibility wise.
-   * @private
-   * @param {Boolean} error - The element's error attribute.
-   * @returns {void}
-   */
-  invalid(error) {
-    if (error) {
-      return 'true';
-    }
-
-    return 'false';
-  }
-
   /**
    * Method for handling passing the required status to aria.
    * @private
@@ -312,6 +323,7 @@ class AuroRadio extends LitElement {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
 
+    this.addEventListener('focus', this.handleFocus);
     this.addEventListener('blur', this.handleBlur);
 
     this.input = this.shadowRoot.querySelector('input');
@@ -336,27 +348,21 @@ class AuroRadio extends LitElement {
     return html`
       <div class="ods-inputGroup rdoGroup" part="radio">
         <input
-          class="util_displayHiddenVisually ods-inputOption rdo--input"
+          class="util_displayHidden ods-inputOption rdo--input"
           part="radio-input"
-          @focus="${this.handleFocus}"
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          aria-invalid="${this.invalid(this.error)}"
-          aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
           id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="radio"
           .value="${this.value}"
+          aria-hidden="true"
           tabindex="-1"
         />
 
-        <label
-          for="${this.inputId}"
-          class="${classMap(labelClasses)}"
-          part="radio-label"
-        >
+        <label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
           <slot>${this.label}</slot>
         </label>
       </div>
@@ -365,7 +371,7 @@ class AuroRadio extends LitElement {
   }
 }
 
-var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
+var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -425,9 +431,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -619,7 +626,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {
@@ -1063,7 +1070,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+      // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
+      // combobox's 2nd input will have noValidate set true.
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -1183,9 +1192,9 @@ class AuroDependencyVersioning {
   }
 }
 
-var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
+var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -1411,7 +1420,7 @@ var helpTextVersion = '1.0.0';
  * @attr {Object} optionSelected - Specifies the current selected radio button.
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
- * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
  * @event auroFormElement-validated - Notifies that the element has been validated.
  * @event input - Notifies every time the value prop of the element is changed.
@@ -1567,7 +1576,7 @@ class AuroRadioGroup extends LitElement {
 
     this.optionSelected = event.target;
 
-    this.validation.validate(this);
+    this.validation.validate(this, this.optionSelected !== undefined);
   }
 
   /**
@@ -1666,15 +1675,6 @@ class AuroRadioGroup extends LitElement {
     if (this.items.length === 0) {
       this.handleItems();
     }
-
-    // handle tab index
-    this.items.forEach((item) => {
-      item.tabIndex = -1;
-    });
-
-    if (!this.disabled) {
-      this.items[this.index].tabIndex = 0;
-    }
   }
 
   /**
@@ -1718,10 +1718,7 @@ class AuroRadioGroup extends LitElement {
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-
-      if (this.index >= 0) {
-        this.items[this.index].tabIndex = 0;
-      }
+      this.items[this.index].setAttribute('tabindex', 0);
     }
   }
 
@@ -1735,20 +1732,10 @@ class AuroRadioGroup extends LitElement {
     this.index = this.items.indexOf(event.target);
 
     this.items.forEach((item) => {
-      if (item === event.target) {
-        item.tabIndex = 0;
-        if (event.target.value) {
-          this.value = event.target.value;
-        }
-      } else {
-        const sdInput = item.shadowRoot.querySelector('input');
-
-        sdInput.checked = false;
-        item.checked = false;
-        item.tabIndex = -1;
-      }
+      item.checked = item === event.target;
     });
 
+    this.value = event.target.value;
     this.optionSelected = event.target;
 
     this.validation.validate(this);
@@ -1761,7 +1748,7 @@ class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   selectItem(index) {
-    const sdItem = this.items[index].shadowRoot.querySelector('input');
+    const sdItem = this.items[index];
 
     sdItem.click();
     sdItem.focus();
@@ -1780,17 +1767,18 @@ class AuroRadioGroup extends LitElement {
 
     for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
       currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
-      const sdItem = this.items[currIndex].shadowRoot.querySelector('input');
-
-      if (this.disabled || this.items.every((item) => item.disabled === true)) {
-        sdItem.focus();
-        break;
-      }
-      if (!sdItem.disabled) {
-        sdItem.click();
-        sdItem.focus();
-        this.index = currIndex;
-        break;
+      const sdItem = this.items[currIndex];
+      if (sdItem) {
+        if (this.disabled || this.items.every((item) => item.disabled === true)) {
+          sdItem.focus();
+          break;
+        }
+        if (!sdItem.disabled) {
+          sdItem.click();
+          sdItem.focus();
+          this.index = currIndex;
+          break;
+        }
       }
     }
   }
@@ -1833,21 +1821,21 @@ class AuroRadioGroup extends LitElement {
     };
 
     return html$1`
-      <fieldset class="${classMap(groupClasses)}" part="radio-group">
-        ${this.required
-        ? html$1`<legend><slot name="legend"></slot></legend>`
-        : html$1`<legend><slot name="legend"></slot> <slot name="optionalLabel">(optional)</slot></legend>`
-      }
+      <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
+        <legend>
+          <slot name="legend"></slot>
+          ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
+        </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
+          <${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
+          <${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/select/demo/api.js

@@ -5,7 +5,6 @@ import { valueAlertExample } from "../apiExamples/valueAlert.js";
 import { inDialogExample } from '../apiExamples/inDialog';
 import { resetStateExample } from "../apiExamples/resetState";
 import { auroMenuLoadingExample } from "../apiExamples/loading";
-import { valueTextExample } from '../apiExamples/valueText.js';
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -25,7 +24,6 @@ export function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
-    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/select/demo/api.md

@@ -20,9 +20,11 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`                          |                | If declared, sets the autocomplete attribute for the select element. |
 | [disabled](#disabled)                      | `disabled`                      | `boolean`                         |                | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`                          |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean`                         |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [forceDisplayValue](#forceDisplayValue)             | `forceDisplayValue`             | `boolean`                         | false          | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
 | [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. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`                         |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [layout](#layout)                        |                                 | `string`                          | "snowflake"    |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`                         | false          | If declared, the popover and trigger will be set to the same width. |
 | [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean`                         |                | Sets multi-select mode, allowing multiple options to be selected at once. |
 | [name](#name)                          | `name`                          | `string`                          |                | The name for the select element.                 |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean`                         |                | When true, checkmark on selected option will no longer be present. |
@@ -31,11 +33,14 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [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\|Array<HTMLElement>` |                | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
-| [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" |
+| [placeholder](#placeholder)                   | `placeholder`                   | `string`                          |                | Define custom placeholder text.                  |
+| [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 element. 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`                          | "snowflake"    |                                                  |
+| [size](#size)                          |                                 | `string`                          | "xl"           |                                                  |
 | [validity](#validity)                      | `validity`                      | `string`                          |                | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `String\|Array<String>`           |                | Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true. |
 
@@ -60,9 +65,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 |---------------------------|--------------------------------------------------|
 |                           | Default slot for the menu content.               |
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
+| [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when select is not focused. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
 | [label](#label)                   | Defines the content of the label.                |
-| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 | [valueText](#valueText)               | Dropdown value text display.                     |
 
 ## CSS Shadow Parts
@@ -440,6 +446,50 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-select>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Please select a preference</span>
+    <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+    <auro-menu>
+      <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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Please select a preference</span>
+  <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+  <auro-menu>
+    <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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### error <a name="error"></a>
 Use the `error` boolean attribute to toggle the error UI.
 
@@ -731,7 +781,7 @@ Use the `label` slot to give your users contextual information about their selec
 </auro-accordion>
 
 #### helpText <a name="helpText"></a>
-Use the `helptext` slot to provide additional information back to your user about their selection option(s).
+Use the `helpText` slot to provide additional information back to your user about their selection option(s).
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
@@ -1034,57 +1084,56 @@ export function auroMenuLoadingExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### valueText <a name="valueText"></a>
-The label for selected option can be customized using `valueText` slot.
-This slot can be manipulated on the `input` event which delivers the new value and selected `auro-menuoption` element in the `detail` object.
+### displayValue <a name="displayValue"></a>
+The label for selected option can be customized using `displayValue` slot under `<menuoption>.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueText.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/valueText.html -->
-  <auro-select id="valueTextExample" autocomplete="address-level1">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayValue.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/displayValue.html -->
+  <auro-select id="displayValueExample" autocomplete="address-level1">
     <span slot="bib.fullscreen.headline">Select Your Gender</span>
     <span slot="label">Gender</span>
-    <span slot="valueText"></span>
+    <span slot="displayValue"></span>
       <auro-menu>
-        <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
-        <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
-        <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
-        <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+        <auro-menuoption value="m" data-display="Male">M - Male
+          <span slot="displayValue">Male</span>
+        </auro-menuoption>
+        <auro-menuoption value="f" data-display="Female">F - Female
+          <span slot="displayValue">Female</span>
+        </auro-menuoption>
+        <auro-menuoption value="x" data-display="Unspecified">X - Unspecified
+          <span slot="displayValue">Unspecified</span>
+        </auro-menuoption>
+        <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed
+          <span slot="displayValue">Undisclosed</span>
+        </auro-menuoption>
     </auro-menu>
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueText.js -->
-
-```js
-export function valueTextExample() {
-  const onValueTextSelectInput = (e) => {
-    const valueText = e.target.querySelector("[slot=valueText]");
-
-    valueText.textContent = e.detail.optionSelected.dataset.display;
-  };
-
-  const select = document.querySelector("#valueTextExample");
-  select.addEventListener('input', onValueTextSelectInput);
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueText.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayValue.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/displayValue.html -->
 
 ```html
-<auro-select id="valueTextExample" autocomplete="address-level1">
+<auro-select id="displayValueExample" autocomplete="address-level1">
   <span slot="bib.fullscreen.headline">Select Your Gender</span>
   <span slot="label">Gender</span>
-  <span slot="valueText"></span>
+  <span slot="displayValue"></span>
     <auro-menu>
-      <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
-      <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
-      <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
-      <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+      <auro-menuoption value="m" data-display="Male">M - Male
+        <span slot="displayValue">Male</span>
+      </auro-menuoption>
+      <auro-menuoption value="f" data-display="Female">F - Female
+        <span slot="displayValue">Female</span>
+      </auro-menuoption>
+      <auro-menuoption value="x" data-display="Unspecified">X - Unspecified
+        <span slot="displayValue">Unspecified</span>
+      </auro-menuoption>
+      <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed
+        <span slot="displayValue">Undisclosed</span>
+      </auro-menuoption>
   </auro-menu>
 </auro-select>
 ```
@@ -1105,7 +1154,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   <div style="width: 350px">
     <auro-select offset="20" noFlip placement="bottom-end">
       <span slot="bib.fullscreen.headline">Bib Headline</span>
-      <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
       <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
         <auro-menuoption value="price">Price</auro-menuoption>
@@ -1117,7 +1167,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     </auro-select>
     <auro-select offset="20" placement="bottom-end">
       <span slot="bib.fullscreen.headline">Bib Headline</span>
-      <span slot="label">bottom-end bib with 20px offset and flip</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-end bib with 20px offset and flip</span>
       <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
         <auro-menuoption value="price">Price</auro-menuoption>
@@ -1129,7 +1180,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     </auro-select>
     <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
       <span slot="bib.fullscreen.headline">Bib Headline</span>
-      <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
       <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
         <auro-menuoption value="price">Price</auro-menuoption>
@@ -1151,7 +1203,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 <div style="width: 350px">
   <auro-select offset="20" noFlip placement="bottom-end">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -1163,7 +1216,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   </auro-select>
   <auro-select offset="20" placement="bottom-end">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">bottom-end bib with 20px offset and flip</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-end bib with 20px offset and flip</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -1175,7 +1229,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   </auro-select>
   <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>