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

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 {
 
@@ -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>
     `;

package/package.json

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