@aurodesignsystem/auro-formkit 3.4.1 → 3.5.0-rc-627.1

package/components/radio/dist/registered.js

@@ -92,6 +92,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
  * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -147,7 +151,6 @@ class AuroRadio extends LitElement {
         type: Boolean,
         reflect: true
       },
-      id:       { type: String },
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
@@ -164,6 +167,16 @@ class AuroRadio extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -299,6 +312,8 @@ class AuroRadio extends LitElement {
 
     this.input = this.shadowRoot.querySelector('input');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.input.click();
     });
@@ -325,14 +340,14 @@ class AuroRadio extends LitElement {
           aria-invalid="${this.invalid(this.error)}"
           aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
+          id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="radio"
           .value="${this.value}"
           tabIndex="-1"
         />
 
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}">
+        <label for="${this.inputId}" class="${classMap(labelClasses)}">
           <slot>${this.label}</slot>
         </label>
 

package/components/select/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/demo/api.html

@@ -52,5 +52,20 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
+
+    <style>
+      .autofill-example-form .input-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        gap: 15px;
+      }
+      .autofill-example-form .input-row auro-input,
+      .autofill-example-form .input-row auro-select {
+        flex: 1 0 auto;
+      }
+    </style>
   </body>
 </html>

package/components/select/demo/api.md

@@ -17,12 +17,14 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | Property                        | Attribute                       | Type      | Default        | Description                                      |
 |---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
 | [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [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. |
 | [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 |
 | [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. |
 | [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.        |
@@ -215,6 +217,182 @@ export function valueExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Autocomplete <a name="autocomplete"></a>
+Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
+  <div class="autofill-example-form">
+    <div class="input-row">
+      <auro-input autocomplete="given-name">
+        <span slot="label">First Name</span>
+        <span slot="bib.fullscreen.headline">First Name</span>
+      </auro-input>
+      <auro-input autocomplete="family-name">
+        <span slot="label">Last Name</span>
+        <span slot="bib.fullscreen.headline">Last Name</span>
+      </auro-input>
+    </div>
+    <div class="input-row">
+      <auro-input autocomplete="address-line1">
+        <span slot="label">Street Address</span>
+        <span slot="bib.fullscreen.headline">Street Address</span>
+      </auro-input>
+      <auro-input autocomplete="address-level2">
+        <span slot="label">City</span>
+        <span slot="bib.fullscreen.headline">City</span>
+      </auro-input>
+      <auro-select autocomplete="address-level1">
+        <span slot="bib.fullscreen.headline">Select Your State</span>
+        <span slot="label">Select Your State</span>
+        <auro-menu>
+          <auro-menuoption value="AL">Alabama</auro-menuoption>
+          <auro-menuoption value="AK">Alaska</auro-menuoption>
+          <auro-menuoption value="AZ">Arizona</auro-menuoption>
+          <auro-menuoption value="AR">Arkansas</auro-menuoption>
+          <auro-menuoption value="CA">California</auro-menuoption>
+          <auro-menuoption value="CO">Colorado</auro-menuoption>
+          <auro-menuoption value="CT">Connecticut</auro-menuoption>
+          <auro-menuoption value="DE">Delaware</auro-menuoption>
+          <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+          <auro-menuoption value="FL">Florida</auro-menuoption>
+          <auro-menuoption value="GA">Georgia</auro-menuoption>
+          <auro-menuoption value="HI">Hawaii</auro-menuoption>
+          <auro-menuoption value="ID">Idaho</auro-menuoption>
+          <auro-menuoption value="IL">Illinois</auro-menuoption>
+          <auro-menuoption value="IN">Indiana</auro-menuoption>
+          <auro-menuoption value="IA">Iowa</auro-menuoption>
+          <auro-menuoption value="KS">Kansas</auro-menuoption>
+          <auro-menuoption value="KY">Kentucky</auro-menuoption>
+          <auro-menuoption value="LA">Louisiana</auro-menuoption>
+          <auro-menuoption value="ME">Maine</auro-menuoption>
+          <auro-menuoption value="MD">Maryland</auro-menuoption>
+          <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+          <auro-menuoption value="MI">Michigan</auro-menuoption>
+          <auro-menuoption value="MN">Minnesota</auro-menuoption>
+          <auro-menuoption value="MS">Mississippi</auro-menuoption>
+          <auro-menuoption value="MO">Missouri</auro-menuoption>
+          <auro-menuoption value="MT">Montana</auro-menuoption>
+          <auro-menuoption value="NE">Nebraska</auro-menuoption>
+          <auro-menuoption value="NV">Nevada</auro-menuoption>
+          <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+          <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+          <auro-menuoption value="NM">New Mexico</auro-menuoption>
+          <auro-menuoption value="NY">New York</auro-menuoption>
+          <auro-menuoption value="NC">North Carolina</auro-menuoption>
+          <auro-menuoption value="ND">North Dakota</auro-menuoption>
+          <auro-menuoption value="OH">Ohio</auro-menuoption>
+          <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+          <auro-menuoption value="OR">Oregon</auro-menuoption>
+          <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+          <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+          <auro-menuoption value="SC">South Carolina</auro-menuoption>
+          <auro-menuoption value="SD">South Dakota</auro-menuoption>
+          <auro-menuoption value="TN">Tennessee</auro-menuoption>
+          <auro-menuoption value="TX">Texas</auro-menuoption>
+          <auro-menuoption value="UT">Utah</auro-menuoption>
+          <auro-menuoption value="VT">Vermont</auro-menuoption>
+          <auro-menuoption value="VA">Virginia</auro-menuoption>
+          <auro-menuoption value="WA">Washington</auro-menuoption>
+          <auro-menuoption value="WV">West Virginia</auro-menuoption>
+          <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+          <auro-menuoption value="WY">Wyoming</auro-menuoption>
+        </auro-menu>
+      </auro-select>
+    </div>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
+
+```html
+<div class="autofill-example-form">
+  <div class="input-row">
+    <auro-input autocomplete="given-name">
+      <span slot="label">First Name</span>
+      <span slot="bib.fullscreen.headline">First Name</span>
+    </auro-input>
+    <auro-input autocomplete="family-name">
+      <span slot="label">Last Name</span>
+      <span slot="bib.fullscreen.headline">Last Name</span>
+    </auro-input>
+  </div>
+  <div class="input-row">
+    <auro-input autocomplete="address-line1">
+      <span slot="label">Street Address</span>
+      <span slot="bib.fullscreen.headline">Street Address</span>
+    </auro-input>
+    <auro-input autocomplete="address-level2">
+      <span slot="label">City</span>
+      <span slot="bib.fullscreen.headline">City</span>
+    </auro-input>
+    <auro-select autocomplete="address-level1">
+      <span slot="bib.fullscreen.headline">Select Your State</span>
+      <span slot="label">Select Your State</span>
+      <auro-menu>
+        <auro-menuoption value="AL">Alabama</auro-menuoption>
+        <auro-menuoption value="AK">Alaska</auro-menuoption>
+        <auro-menuoption value="AZ">Arizona</auro-menuoption>
+        <auro-menuoption value="AR">Arkansas</auro-menuoption>
+        <auro-menuoption value="CA">California</auro-menuoption>
+        <auro-menuoption value="CO">Colorado</auro-menuoption>
+        <auro-menuoption value="CT">Connecticut</auro-menuoption>
+        <auro-menuoption value="DE">Delaware</auro-menuoption>
+        <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+        <auro-menuoption value="FL">Florida</auro-menuoption>
+        <auro-menuoption value="GA">Georgia</auro-menuoption>
+        <auro-menuoption value="HI">Hawaii</auro-menuoption>
+        <auro-menuoption value="ID">Idaho</auro-menuoption>
+        <auro-menuoption value="IL">Illinois</auro-menuoption>
+        <auro-menuoption value="IN">Indiana</auro-menuoption>
+        <auro-menuoption value="IA">Iowa</auro-menuoption>
+        <auro-menuoption value="KS">Kansas</auro-menuoption>
+        <auro-menuoption value="KY">Kentucky</auro-menuoption>
+        <auro-menuoption value="LA">Louisiana</auro-menuoption>
+        <auro-menuoption value="ME">Maine</auro-menuoption>
+        <auro-menuoption value="MD">Maryland</auro-menuoption>
+        <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+        <auro-menuoption value="MI">Michigan</auro-menuoption>
+        <auro-menuoption value="MN">Minnesota</auro-menuoption>
+        <auro-menuoption value="MS">Mississippi</auro-menuoption>
+        <auro-menuoption value="MO">Missouri</auro-menuoption>
+        <auro-menuoption value="MT">Montana</auro-menuoption>
+        <auro-menuoption value="NE">Nebraska</auro-menuoption>
+        <auro-menuoption value="NV">Nevada</auro-menuoption>
+        <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+        <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+        <auro-menuoption value="NM">New Mexico</auro-menuoption>
+        <auro-menuoption value="NY">New York</auro-menuoption>
+        <auro-menuoption value="NC">North Carolina</auro-menuoption>
+        <auro-menuoption value="ND">North Dakota</auro-menuoption>
+        <auro-menuoption value="OH">Ohio</auro-menuoption>
+        <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+        <auro-menuoption value="OR">Oregon</auro-menuoption>
+        <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+        <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+        <auro-menuoption value="SC">South Carolina</auro-menuoption>
+        <auro-menuoption value="SD">South Dakota</auro-menuoption>
+        <auro-menuoption value="TN">Tennessee</auro-menuoption>
+        <auro-menuoption value="TX">Texas</auro-menuoption>
+        <auro-menuoption value="UT">Utah</auro-menuoption>
+        <auro-menuoption value="VT">Vermont</auro-menuoption>
+        <auro-menuoption value="VA">Virginia</auro-menuoption>
+        <auro-menuoption value="WA">Washington</auro-menuoption>
+        <auro-menuoption value="WV">West Virginia</auro-menuoption>
+        <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+        <auro-menuoption value="WY">Wyoming</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### required <a name="required"></a>
 When present, the `required` attribute specifies that a select field must be filled out before submitting the form.
 

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

@@ -5577,7 +5577,7 @@ i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
 
-var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
+var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host .nativeSelectWrapper{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0, 0, 0, 0);opacity:.01}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5672,6 +5672,14 @@ class AuroSelect extends i$2 {
   static get properties() {
     return {
 
+      /**
+       * If declared, sets the autocomplete attribute for the select element.
+       */
+      autocomplete: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false
@@ -5689,6 +5697,14 @@ class AuroSelect extends i$2 {
         reflect: true
       },
 
+      /**
+       * The name for the select element.
+       */
+      name: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
        */
@@ -6232,6 +6248,7 @@ class AuroSelect extends i$2 {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6283,6 +6300,34 @@ class AuroSelect extends i$2 {
     this.validation.validate(this, force);
   }
 
+  /**
+   * Syncs the value from the native select element to the component's value.
+   * @param {Event} event // The change event from the native select element.
+   * @returns {void}
+   * @private
+   */
+  _handleNativeSelectChange(event) {
+    const selectedOption = event.target.options[event.target.selectedIndex];
+    const selectedValue = selectedOption.value;
+    const [currentValue] = this.value || [];
+    this.value = !currentValue || currentValue !== selectedValue ? [selectedValue] : this.value;
+  }
+
+  /**
+   * Updates the native select element's value based on the component's value.
+   * @returns {void}
+   * @private
+   */
+  _updateNativeSelect() {
+    const nativeSelect = this.shadowRoot.querySelector('select');
+    if (!nativeSelect) {
+      return;
+    }
+    const [value] = this.value || [];
+    nativeSelect.value = value || '';
+  }
+
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
@@ -6349,6 +6394,29 @@ class AuroSelect extends i$2 {
             }
           </p>
         </${this.dropdownTag}>
+        <div class="nativeSelectWrapper">
+          <select 
+            tabindex="-1"
+            id="${`native-select-${this.id || this.uniqueId}`}"
+            name="${this.name || ''}"
+            ?disabled="${this.disabled}"
+            ?required="${this.required}"
+            aria-hidden="true"
+            autocomplete="${o(this.autocomplete)}"
+            @change="${this._handleNativeSelectChange}">
+            <option value="" ?selected="${!this.value}"></option>
+            ${this.options.map((option) => {
+              const optionValue = option.value || option.textContent;
+              return u`
+                <option 
+                  value="${optionValue}" 
+                  ?selected="${this.value === optionValue}">
+                  ${option.textContent}
+                </option>
+              `;
+            })}
+          </select>
+        </div>
         <!-- Help text and error message template -->
       </div>
     `;
@@ -6501,7 +6569,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;

package/components/select/demo/index.html

@@ -47,5 +47,20 @@
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
+
+    <style>
+      .autofill-example-form .input-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        gap: 15px;
+      }
+      .autofill-example-form .input-row auro-input,
+      .autofill-example-form .input-row auro-select {
+        flex: 1 0 auto;
+      }
+    </style>
   </body>
 </html>

package/components/select/demo/index.md

@@ -178,6 +178,183 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Autofill/Autocomplete Support
+
+Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
+  <div class="autofill-example-form">
+    <div class="input-row">
+      <auro-input autocomplete="given-name">
+        <span slot="label">First Name</span>
+        <span slot="bib.fullscreen.headline">First Name</span>
+      </auro-input>
+      <auro-input autocomplete="family-name">
+        <span slot="label">Last Name</span>
+        <span slot="bib.fullscreen.headline">Last Name</span>
+      </auro-input>
+    </div>
+    <div class="input-row">
+      <auro-input autocomplete="address-line1">
+        <span slot="label">Street Address</span>
+        <span slot="bib.fullscreen.headline">Street Address</span>
+      </auro-input>
+      <auro-input autocomplete="address-level2">
+        <span slot="label">City</span>
+        <span slot="bib.fullscreen.headline">City</span>
+      </auro-input>
+      <auro-select autocomplete="address-level1">
+        <span slot="bib.fullscreen.headline">Select Your State</span>
+        <span slot="label">Select Your State</span>
+        <auro-menu>
+          <auro-menuoption value="AL">Alabama</auro-menuoption>
+          <auro-menuoption value="AK">Alaska</auro-menuoption>
+          <auro-menuoption value="AZ">Arizona</auro-menuoption>
+          <auro-menuoption value="AR">Arkansas</auro-menuoption>
+          <auro-menuoption value="CA">California</auro-menuoption>
+          <auro-menuoption value="CO">Colorado</auro-menuoption>
+          <auro-menuoption value="CT">Connecticut</auro-menuoption>
+          <auro-menuoption value="DE">Delaware</auro-menuoption>
+          <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+          <auro-menuoption value="FL">Florida</auro-menuoption>
+          <auro-menuoption value="GA">Georgia</auro-menuoption>
+          <auro-menuoption value="HI">Hawaii</auro-menuoption>
+          <auro-menuoption value="ID">Idaho</auro-menuoption>
+          <auro-menuoption value="IL">Illinois</auro-menuoption>
+          <auro-menuoption value="IN">Indiana</auro-menuoption>
+          <auro-menuoption value="IA">Iowa</auro-menuoption>
+          <auro-menuoption value="KS">Kansas</auro-menuoption>
+          <auro-menuoption value="KY">Kentucky</auro-menuoption>
+          <auro-menuoption value="LA">Louisiana</auro-menuoption>
+          <auro-menuoption value="ME">Maine</auro-menuoption>
+          <auro-menuoption value="MD">Maryland</auro-menuoption>
+          <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+          <auro-menuoption value="MI">Michigan</auro-menuoption>
+          <auro-menuoption value="MN">Minnesota</auro-menuoption>
+          <auro-menuoption value="MS">Mississippi</auro-menuoption>
+          <auro-menuoption value="MO">Missouri</auro-menuoption>
+          <auro-menuoption value="MT">Montana</auro-menuoption>
+          <auro-menuoption value="NE">Nebraska</auro-menuoption>
+          <auro-menuoption value="NV">Nevada</auro-menuoption>
+          <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+          <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+          <auro-menuoption value="NM">New Mexico</auro-menuoption>
+          <auro-menuoption value="NY">New York</auro-menuoption>
+          <auro-menuoption value="NC">North Carolina</auro-menuoption>
+          <auro-menuoption value="ND">North Dakota</auro-menuoption>
+          <auro-menuoption value="OH">Ohio</auro-menuoption>
+          <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+          <auro-menuoption value="OR">Oregon</auro-menuoption>
+          <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+          <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+          <auro-menuoption value="SC">South Carolina</auro-menuoption>
+          <auro-menuoption value="SD">South Dakota</auro-menuoption>
+          <auro-menuoption value="TN">Tennessee</auro-menuoption>
+          <auro-menuoption value="TX">Texas</auro-menuoption>
+          <auro-menuoption value="UT">Utah</auro-menuoption>
+          <auro-menuoption value="VT">Vermont</auro-menuoption>
+          <auro-menuoption value="VA">Virginia</auro-menuoption>
+          <auro-menuoption value="WA">Washington</auro-menuoption>
+          <auro-menuoption value="WV">West Virginia</auro-menuoption>
+          <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+          <auro-menuoption value="WY">Wyoming</auro-menuoption>
+        </auro-menu>
+      </auro-select>
+    </div>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
+
+```html
+<div class="autofill-example-form">
+  <div class="input-row">
+    <auro-input autocomplete="given-name">
+      <span slot="label">First Name</span>
+      <span slot="bib.fullscreen.headline">First Name</span>
+    </auro-input>
+    <auro-input autocomplete="family-name">
+      <span slot="label">Last Name</span>
+      <span slot="bib.fullscreen.headline">Last Name</span>
+    </auro-input>
+  </div>
+  <div class="input-row">
+    <auro-input autocomplete="address-line1">
+      <span slot="label">Street Address</span>
+      <span slot="bib.fullscreen.headline">Street Address</span>
+    </auro-input>
+    <auro-input autocomplete="address-level2">
+      <span slot="label">City</span>
+      <span slot="bib.fullscreen.headline">City</span>
+    </auro-input>
+    <auro-select autocomplete="address-level1">
+      <span slot="bib.fullscreen.headline">Select Your State</span>
+      <span slot="label">Select Your State</span>
+      <auro-menu>
+        <auro-menuoption value="AL">Alabama</auro-menuoption>
+        <auro-menuoption value="AK">Alaska</auro-menuoption>
+        <auro-menuoption value="AZ">Arizona</auro-menuoption>
+        <auro-menuoption value="AR">Arkansas</auro-menuoption>
+        <auro-menuoption value="CA">California</auro-menuoption>
+        <auro-menuoption value="CO">Colorado</auro-menuoption>
+        <auro-menuoption value="CT">Connecticut</auro-menuoption>
+        <auro-menuoption value="DE">Delaware</auro-menuoption>
+        <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+        <auro-menuoption value="FL">Florida</auro-menuoption>
+        <auro-menuoption value="GA">Georgia</auro-menuoption>
+        <auro-menuoption value="HI">Hawaii</auro-menuoption>
+        <auro-menuoption value="ID">Idaho</auro-menuoption>
+        <auro-menuoption value="IL">Illinois</auro-menuoption>
+        <auro-menuoption value="IN">Indiana</auro-menuoption>
+        <auro-menuoption value="IA">Iowa</auro-menuoption>
+        <auro-menuoption value="KS">Kansas</auro-menuoption>
+        <auro-menuoption value="KY">Kentucky</auro-menuoption>
+        <auro-menuoption value="LA">Louisiana</auro-menuoption>
+        <auro-menuoption value="ME">Maine</auro-menuoption>
+        <auro-menuoption value="MD">Maryland</auro-menuoption>
+        <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+        <auro-menuoption value="MI">Michigan</auro-menuoption>
+        <auro-menuoption value="MN">Minnesota</auro-menuoption>
+        <auro-menuoption value="MS">Mississippi</auro-menuoption>
+        <auro-menuoption value="MO">Missouri</auro-menuoption>
+        <auro-menuoption value="MT">Montana</auro-menuoption>
+        <auro-menuoption value="NE">Nebraska</auro-menuoption>
+        <auro-menuoption value="NV">Nevada</auro-menuoption>
+        <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+        <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+        <auro-menuoption value="NM">New Mexico</auro-menuoption>
+        <auro-menuoption value="NY">New York</auro-menuoption>
+        <auro-menuoption value="NC">North Carolina</auro-menuoption>
+        <auro-menuoption value="ND">North Dakota</auro-menuoption>
+        <auro-menuoption value="OH">Ohio</auro-menuoption>
+        <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+        <auro-menuoption value="OR">Oregon</auro-menuoption>
+        <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+        <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+        <auro-menuoption value="SC">South Carolina</auro-menuoption>
+        <auro-menuoption value="SD">South Dakota</auro-menuoption>
+        <auro-menuoption value="TN">Tennessee</auro-menuoption>
+        <auro-menuoption value="TX">Texas</auro-menuoption>
+        <auro-menuoption value="UT">Utah</auro-menuoption>
+        <auro-menuoption value="VT">Vermont</auro-menuoption>
+        <auro-menuoption value="VA">Virginia</auro-menuoption>
+        <auro-menuoption value="WA">Washington</auro-menuoption>
+        <auro-menuoption value="WV">West Virginia</auro-menuoption>
+        <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+        <auro-menuoption value="WY">Wyoming</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Example with auro-icons in options
 
 Displays an `<auro-select>` element with `<auro-icon>` elements in each option.