@aurodesignsystem/auro-formkit 5.10.0 → 5.11.0

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

@@ -4889,7 +4889,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4913,7 +4913,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -5119,6 +5119,17 @@ class AuroElement extends i$3 {
  */
 class BaseInput extends AuroElement {
 
+  // Delegate focus to the native <input> inside the shadow root so that
+  // showModal()'s dialog focusing steps reach the input element.
+  // This keeps the mobile virtual keyboard open when the fullscreen dialog
+  // opens, because the browser sees an input-to-input focus transfer.
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -5136,6 +5147,7 @@ class BaseInput extends AuroElement {
     this.icon = false;
     this.disabled = false;
     this.dvInputOnly = false;
+    this.hideLabelVisually = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -5243,6 +5255,15 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
+      /**
+       * The value for the aria-activedescendant attribute.
+       * Points to the ID of the currently active/highlighted option in a listbox.
+       */
+      a11yActivedescendant: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If set, the label will remain fixed in the active position.
        */
@@ -5349,6 +5370,16 @@ class BaseInput extends AuroElement {
         attribute: false
       },
 
+      /**
+       * If set, the label will be hidden visually but still accessible to assistive technologies.
+       * @private
+       */
+      hideLabelVisually: {
+        type: Boolean,
+        reflect: true
+      },
+
+
       /**
        * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
        */
@@ -5926,31 +5957,34 @@ class BaseInput extends AuroElement {
     // Process credit card type detection and formatting during input
     if (this.type === 'credit-card') {
       this.processCreditCard();
-    }
+      this.touched = true;
+      this.validation.validate(this);
+    } else {
 
-    // Sets value property to value of element value (el.value).
-    this.value = this.inputElement.value;
+      // Sets value property to value of element value (el.value).
+      this.value = this.inputElement.value;
 
-    // Determine if the value change was programmatic, including autofill.
-    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+      // Determine if the value change was programmatic, including autofill.
+      const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
 
-    // Validation on input or programmatic value change (including autofill).
-    if (this.validateOnInput || inputWasProgrammatic) {
-      this.touched = true;
-      this.validation.validate(this);
-    }
+      // Validation on input or programmatic value change (including autofill).
+      if (this.validateOnInput || inputWasProgrammatic) {
+        this.touched = true;
+        this.validation.validate(this);
+      }
 
-    // Prevents cursor jumping in Safari.
-    const { selectionStart } = this.inputElement;
+      // Prevents cursor jumping in Safari.
+      const { selectionStart } = this.inputElement;
 
-    if (this.setSelectionInputTypes.includes(this.type)) {
-      this.updateComplete.then(() => {
-        try {
-          this.inputElement.setSelectionRange(selectionStart, selectionStart);
-        } catch (error) { // eslint-disable-line
-          // do nothing
-        }
-      });
+      if (this.setSelectionInputTypes.includes(this.type)) {
+        this.updateComplete.then(() => {
+          try {
+            this.inputElement.setSelectionRange(selectionStart, selectionStart);
+          } catch (error) { // eslint-disable-line
+            // do nothing
+          }
+        });
+      }
     }
   }
 
@@ -5983,6 +6017,11 @@ class BaseInput extends AuroElement {
     this.inputElement.scrollLeft = 100;
 
     if (!this.noValidate) {
+      // For credit card inputs with mask, ensure value is synced from mask instance
+      if (this.type === 'credit-card' && this.maskInstance) {
+        this.value = this.maskInstance.value;
+      }
+
       this.validation.validate(this);
     }
   }
@@ -6007,6 +6046,20 @@ class BaseInput extends AuroElement {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -6631,7 +6684,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6813,7 +6866,7 @@ class AuroInput extends BaseInput {
     return {
       'is-disabled': this.disabled,
       'withValue': this.hasValue,
-      'util_displayHiddenVisually': this.labelHidden,
+      'util_displayHiddenVisually': this.labelHidden || this.hideLabelVisually,
       [this.labelFontClass]: true,
     };
   }
@@ -6985,6 +7038,7 @@ class AuroInput extends BaseInput {
         ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
+        aria-activedescendant=${o(this.a11yActivedescendant)}
         aria-controls=${o(this.a11yControls)}
         aria-describedby="${this.uniqueId}"
         aria-expanded=${o(this.a11yExpanded)}

package/components/input/dist/base-input.d.ts

@@ -4,6 +4,14 @@
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
  */
 export default class BaseInput extends AuroElement {
+    static get shadowRootOptions(): {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static get properties(): {
         /**
          * The value for the role attribute.
@@ -26,6 +34,14 @@ export default class BaseInput extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * The value for the aria-activedescendant attribute.
+         * Points to the ID of the currently active/highlighted option in a listbox.
+         */
+        a11yActivedescendant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, the label will remain fixed in the active position.
          */
@@ -116,6 +132,14 @@ export default class BaseInput extends AuroElement {
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * If set, the label will be hidden visually but still accessible to assistive technologies.
+         * @private
+         */
+        hideLabelVisually: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
          */
@@ -359,6 +383,7 @@ export default class BaseInput extends AuroElement {
     icon: boolean;
     disabled: boolean;
     dvInputOnly: boolean;
+    hideLabelVisually: boolean;
     max: any;
     maxLength: any;
     min: any;
@@ -516,6 +541,15 @@ export default class BaseInput extends AuroElement {
      * @returns {Object}
      */
     private getActiveElement;
+    /**
+     * Sets the active descendant element for accessibility.
+     * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+     * This function is used in components that contain `auro-input` to set the active descendant.
+     * @private
+     * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+     * @returns {void}
+     */
+    private setActiveDescendant;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.

package/components/input/dist/index.js

@@ -4830,7 +4830,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4854,7 +4854,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -5060,6 +5060,17 @@ class AuroElement extends LitElement {
  */
 class BaseInput extends AuroElement {
 
+  // Delegate focus to the native <input> inside the shadow root so that
+  // showModal()'s dialog focusing steps reach the input element.
+  // This keeps the mobile virtual keyboard open when the fullscreen dialog
+  // opens, because the browser sees an input-to-input focus transfer.
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -5077,6 +5088,7 @@ class BaseInput extends AuroElement {
     this.icon = false;
     this.disabled = false;
     this.dvInputOnly = false;
+    this.hideLabelVisually = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -5184,6 +5196,15 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
+      /**
+       * The value for the aria-activedescendant attribute.
+       * Points to the ID of the currently active/highlighted option in a listbox.
+       */
+      a11yActivedescendant: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If set, the label will remain fixed in the active position.
        */
@@ -5290,6 +5311,16 @@ class BaseInput extends AuroElement {
         attribute: false
       },
 
+      /**
+       * If set, the label will be hidden visually but still accessible to assistive technologies.
+       * @private
+       */
+      hideLabelVisually: {
+        type: Boolean,
+        reflect: true
+      },
+
+
       /**
        * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
        */
@@ -5867,31 +5898,34 @@ class BaseInput extends AuroElement {
     // Process credit card type detection and formatting during input
     if (this.type === 'credit-card') {
       this.processCreditCard();
-    }
+      this.touched = true;
+      this.validation.validate(this);
+    } else {
 
-    // Sets value property to value of element value (el.value).
-    this.value = this.inputElement.value;
+      // Sets value property to value of element value (el.value).
+      this.value = this.inputElement.value;
 
-    // Determine if the value change was programmatic, including autofill.
-    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+      // Determine if the value change was programmatic, including autofill.
+      const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
 
-    // Validation on input or programmatic value change (including autofill).
-    if (this.validateOnInput || inputWasProgrammatic) {
-      this.touched = true;
-      this.validation.validate(this);
-    }
+      // Validation on input or programmatic value change (including autofill).
+      if (this.validateOnInput || inputWasProgrammatic) {
+        this.touched = true;
+        this.validation.validate(this);
+      }
 
-    // Prevents cursor jumping in Safari.
-    const { selectionStart } = this.inputElement;
+      // Prevents cursor jumping in Safari.
+      const { selectionStart } = this.inputElement;
 
-    if (this.setSelectionInputTypes.includes(this.type)) {
-      this.updateComplete.then(() => {
-        try {
-          this.inputElement.setSelectionRange(selectionStart, selectionStart);
-        } catch (error) { // eslint-disable-line
-          // do nothing
-        }
-      });
+      if (this.setSelectionInputTypes.includes(this.type)) {
+        this.updateComplete.then(() => {
+          try {
+            this.inputElement.setSelectionRange(selectionStart, selectionStart);
+          } catch (error) { // eslint-disable-line
+            // do nothing
+          }
+        });
+      }
     }
   }
 
@@ -5924,6 +5958,11 @@ class BaseInput extends AuroElement {
     this.inputElement.scrollLeft = 100;
 
     if (!this.noValidate) {
+      // For credit card inputs with mask, ensure value is synced from mask instance
+      if (this.type === 'credit-card' && this.maskInstance) {
+        this.value = this.maskInstance.value;
+      }
+
       this.validation.validate(this);
     }
   }
@@ -5948,6 +5987,20 @@ class BaseInput extends AuroElement {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -6572,7 +6625,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6754,7 +6807,7 @@ class AuroInput extends BaseInput {
     return {
       'is-disabled': this.disabled,
       'withValue': this.hasValue,
-      'util_displayHiddenVisually': this.labelHidden,
+      'util_displayHiddenVisually': this.labelHidden || this.hideLabelVisually,
       [this.labelFontClass]: true,
     };
   }
@@ -6926,6 +6979,7 @@ class AuroInput extends BaseInput {
         ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
+        aria-activedescendant=${ifDefined(this.a11yActivedescendant)}
         aria-controls=${ifDefined(this.a11yControls)}
         aria-describedby="${this.uniqueId}"
         aria-expanded=${ifDefined(this.a11yExpanded)}

package/components/input/dist/registered.js

@@ -4830,7 +4830,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4854,7 +4854,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -5060,6 +5060,17 @@ class AuroElement extends LitElement {
  */
 class BaseInput extends AuroElement {
 
+  // Delegate focus to the native <input> inside the shadow root so that
+  // showModal()'s dialog focusing steps reach the input element.
+  // This keeps the mobile virtual keyboard open when the fullscreen dialog
+  // opens, because the browser sees an input-to-input focus transfer.
+  static get shadowRootOptions() {
+    return {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+  }
+
   constructor() {
     super();
 
@@ -5077,6 +5088,7 @@ class BaseInput extends AuroElement {
     this.icon = false;
     this.disabled = false;
     this.dvInputOnly = false;
+    this.hideLabelVisually = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -5184,6 +5196,15 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
+      /**
+       * The value for the aria-activedescendant attribute.
+       * Points to the ID of the currently active/highlighted option in a listbox.
+       */
+      a11yActivedescendant: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If set, the label will remain fixed in the active position.
        */
@@ -5290,6 +5311,16 @@ class BaseInput extends AuroElement {
         attribute: false
       },
 
+      /**
+       * If set, the label will be hidden visually but still accessible to assistive technologies.
+       * @private
+       */
+      hideLabelVisually: {
+        type: Boolean,
+        reflect: true
+      },
+
+
       /**
        * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
        */
@@ -5867,31 +5898,34 @@ class BaseInput extends AuroElement {
     // Process credit card type detection and formatting during input
     if (this.type === 'credit-card') {
       this.processCreditCard();
-    }
+      this.touched = true;
+      this.validation.validate(this);
+    } else {
 
-    // Sets value property to value of element value (el.value).
-    this.value = this.inputElement.value;
+      // Sets value property to value of element value (el.value).
+      this.value = this.inputElement.value;
 
-    // Determine if the value change was programmatic, including autofill.
-    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+      // Determine if the value change was programmatic, including autofill.
+      const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
 
-    // Validation on input or programmatic value change (including autofill).
-    if (this.validateOnInput || inputWasProgrammatic) {
-      this.touched = true;
-      this.validation.validate(this);
-    }
+      // Validation on input or programmatic value change (including autofill).
+      if (this.validateOnInput || inputWasProgrammatic) {
+        this.touched = true;
+        this.validation.validate(this);
+      }
 
-    // Prevents cursor jumping in Safari.
-    const { selectionStart } = this.inputElement;
+      // Prevents cursor jumping in Safari.
+      const { selectionStart } = this.inputElement;
 
-    if (this.setSelectionInputTypes.includes(this.type)) {
-      this.updateComplete.then(() => {
-        try {
-          this.inputElement.setSelectionRange(selectionStart, selectionStart);
-        } catch (error) { // eslint-disable-line
-          // do nothing
-        }
-      });
+      if (this.setSelectionInputTypes.includes(this.type)) {
+        this.updateComplete.then(() => {
+          try {
+            this.inputElement.setSelectionRange(selectionStart, selectionStart);
+          } catch (error) { // eslint-disable-line
+            // do nothing
+          }
+        });
+      }
     }
   }
 
@@ -5924,6 +5958,11 @@ class BaseInput extends AuroElement {
     this.inputElement.scrollLeft = 100;
 
     if (!this.noValidate) {
+      // For credit card inputs with mask, ensure value is synced from mask instance
+      if (this.type === 'credit-card' && this.maskInstance) {
+        this.value = this.maskInstance.value;
+      }
+
       this.validation.validate(this);
     }
   }
@@ -5948,6 +5987,20 @@ class BaseInput extends AuroElement {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -6572,7 +6625,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202603102257';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6754,7 +6807,7 @@ class AuroInput extends BaseInput {
     return {
       'is-disabled': this.disabled,
       'withValue': this.hasValue,
-      'util_displayHiddenVisually': this.labelHidden,
+      'util_displayHiddenVisually': this.labelHidden || this.hideLabelVisually,
       [this.labelFontClass]: true,
     };
   }
@@ -6926,6 +6979,7 @@ class AuroInput extends BaseInput {
         ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
+        aria-activedescendant=${ifDefined(this.a11yActivedescendant)}
         aria-controls=${ifDefined(this.a11yControls)}
         aria-describedby="${this.uniqueId}"
         aria-expanded=${ifDefined(this.a11yExpanded)}

package/components/menu/demo/api.md

@@ -84,16 +84,10 @@ The `auro-menuoption` element provides users a way to define a menu option.
 
 ## Events
 
-| Event                      | Type                | Description                                      |
-|----------------------------|---------------------|--------------------------------------------------|
-| `auroMenuOption-click`     | `CustomEvent<this>` |                                                  |
-| `auroMenuOption-mouseover` | `CustomEvent<this>` | Notifies that this option has been hovered over. |
-
-## Slots
-
-| Name      | Description                                |
-|-----------|--------------------------------------------|
-| [default](#default) | The default slot for the menu option text. |
+| Event                      | Type                |
+|----------------------------|---------------------|
+| `auroMenuOption-click`     | `CustomEvent<this>` |
+| `auroMenuOption-mouseover` | `CustomEvent<this>` |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Basic