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

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.

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

@@ -771,7 +771,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -5472,7 +5485,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.
@@ -5567,6 +5580,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
@@ -5584,6 +5605,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.
        */
@@ -6127,6 +6156,7 @@ class AuroSelect extends i$2 {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6178,6 +6208,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)}"
 
@@ -6244,6 +6302,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>
     `;
@@ -6396,7 +6477,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/dist/auro-select.d.ts

@@ -13,6 +13,13 @@
  */
 export class AuroSelect extends LitElement {
     static get properties(): {
+        /**
+         * If declared, sets the autocomplete attribute for the select element.
+         */
+        autocomplete: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, bib's position will be automatically calculated where to appear.
          * @default false
@@ -28,6 +35,13 @@ export class AuroSelect extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * The name for the select element.
+         */
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
          */
@@ -325,6 +339,19 @@ export class AuroSelect extends LitElement {
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
+    /**
+     * 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
+     */
+    private _handleNativeSelectChange;
+    /**
+     * Updates the native select element's value based on the component's value.
+     * @returns {void}
+     * @private
+     */
+    private _updateNativeSelect;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";

package/components/select/dist/index.js

@@ -2,6 +2,7 @@ import { css, LitElement, html as html$1 } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeStatic, literal, html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ifDefined as ifDefined$1 } from 'lit-html/directives/if-defined.js';
 
 class DateFormatter {
 
@@ -730,7 +731,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -5425,7 +5439,7 @@ css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);-
 
 css`: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 = css`: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 = css`: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.
@@ -5520,6 +5534,14 @@ class AuroSelect extends LitElement {
   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
@@ -5537,6 +5559,14 @@ class AuroSelect extends LitElement {
         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.
        */
@@ -6080,6 +6110,7 @@ class AuroSelect extends LitElement {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6131,6 +6162,34 @@ class AuroSelect extends LitElement {
     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)}"
 
@@ -6197,6 +6256,29 @@ class AuroSelect extends LitElement {
             }
           </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="${ifDefined$1(this.autocomplete)}"
+            @change="${this._handleNativeSelectChange}">
+            <option value="" ?selected="${!this.value}"></option>
+            ${this.options.map((option) => {
+              const optionValue = option.value || option.textContent;
+              return html`
+                <option 
+                  value="${optionValue}" 
+                  ?selected="${this.value === optionValue}">
+                  ${option.textContent}
+                </option>
+              `;
+            })}
+          </select>
+        </div>
         <!-- Help text and error message template -->
       </div>
     `;