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

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

@@ -5485,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.
@@ -5580,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
@@ -5597,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.
        */
@@ -6140,6 +6156,7 @@ class AuroSelect extends i$2 {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6191,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)}"
 
@@ -6257,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>
     `;
@@ -6409,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/demo/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/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 {
 
@@ -5438,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.
@@ -5533,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
@@ -5550,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.
        */
@@ -6093,6 +6110,7 @@ class AuroSelect extends LitElement {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6144,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)}"
 
@@ -6210,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>
     `;

package/components/select/dist/registered.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 {
 
@@ -5438,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.
@@ -5533,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
@@ -5550,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.
        */
@@ -6093,6 +6110,7 @@ class AuroSelect extends LitElement {
         this.menu.value = undefined;
       }
 
+      this._updateNativeSelect();
       this.validation.validate(this);
 
       // LEGACY EVENT
@@ -6144,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)}"
 
@@ -6210,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>
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "3.4.1",
+  "version": "3.5.0-rc-627.1.1",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {