@aurodesignsystem-dev/auro-formkit 0.0.0-pr1318.0 → 0.0.0-pr1318.10

package/components/dropdown/dist/registered.js

@@ -3254,7 +3254,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3541,6 +3541,20 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` 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.trigger) {
+      this.trigger.ariaActiveDescendantElement = element;
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -4184,7 +4198,7 @@ class AuroDropdown extends AuroElement {
           tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-          aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">

package/components/input/demo/api.md

@@ -31,7 +31,7 @@ The `auro-input` element provides users a way to enter data into a text field.
 | [lang](#lang)                            | `lang`                            | `string`                                         |             | Defines the language of an element.              |
 | [layout](#layout)                          |                                   | `string`                                         |             |                                                  |
 | [max](#max)                             | `max`                             | `string`                                         |             | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       | `number`                                         |             | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
+| [maxLength](#maxLength)                       | `maxLength`                       | `number`                                         |             | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.<br />**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. |
 | [min](#min)                             | `min`                             | `string`                                         |             | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
 | [minLength](#minLength)                       | `minLength`                       | `number`                                         |             | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
 | [name](#name)                            | `name`                            | `string`                                         |             | Populates the `name` attribute on the input.     |
@@ -456,6 +456,8 @@ Use the `maxlength` attribute to control the length of the input entered.
 
 The `setCustomValidityTooLong` attribute may optionally be used in combination with the `maxLength` attribute to define custom help text used when the length of the input is too long.
 
+**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/max-length.html) -->
   <!-- The below content is automatically added from ../apiExamples/max-length.html -->
@@ -963,7 +965,7 @@ Use the `format` attribute to set a custom phone number format.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel-format.html) -->
   <!-- The below content is automatically added from ../apiExamples/tel-format.html -->
-  <auro-input type="tel" format="+22 999 99 9999">
+  <auro-input type="tel" format="+00 000 00 0000">
     <span slot="label">Telephone</span>
     <span slot="helpText">Help Text</span>
   </auro-input>
@@ -975,7 +977,7 @@ Use the `format` attribute to set a custom phone number format.
 <!-- The below code snippet is automatically added from ../apiExamples/tel-format.html -->
 
 ```html
-<auro-input type="tel" format="+22 999 99 9999">
+<auro-input type="tel" format="+00 000 00 0000">
   <span slot="label">Telephone</span>
   <span slot="helpText">Help Text</span>
 </auro-input>

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

@@ -5472,6 +5472,7 @@ class BaseInput extends AuroElement {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -5997,6 +5998,11 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -6076,6 +6082,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.
@@ -6114,6 +6134,7 @@ class BaseInput extends AuroElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -6224,6 +6245,7 @@ class BaseInput extends AuroElement {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -6236,7 +6258,8 @@ class BaseInput extends AuroElement {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -6697,7 +6720,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6899,6 +6922,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {

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

@@ -5397,6 +5397,7 @@ class BaseInput extends AuroElement {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -5922,6 +5923,11 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -6001,6 +6007,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.
@@ -6039,6 +6059,7 @@ class BaseInput extends AuroElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -6149,6 +6170,7 @@ class BaseInput extends AuroElement {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -6161,7 +6183,8 @@ class BaseInput extends AuroElement {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -6622,7 +6645,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6824,6 +6847,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {

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

@@ -96,6 +96,7 @@ export class AuroInput extends BaseInput {
     /**
      * Common display value wrapper classes.
      * @private
+     * @returns {Record<string, boolean>}
      */
     private get commonDisplayValueWrapperClasses();
     /**

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

@@ -158,6 +158,7 @@ export default class BaseInput extends AuroElement {
         };
         /**
          * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+         * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
          */
         maxLength: {
             type: NumberConstructor;
@@ -515,6 +516,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

@@ -5338,6 +5338,7 @@ class BaseInput extends AuroElement {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -5863,6 +5864,11 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -5942,6 +5948,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.
@@ -5980,6 +6000,7 @@ class BaseInput extends AuroElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -6090,6 +6111,7 @@ class BaseInput extends AuroElement {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -6102,7 +6124,8 @@ class BaseInput extends AuroElement {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -6563,7 +6586,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6765,6 +6788,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {

package/components/input/dist/registered.js

@@ -5338,6 +5338,7 @@ class BaseInput extends AuroElement {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -5863,6 +5864,11 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -5942,6 +5948,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.
@@ -5980,6 +6000,7 @@ class BaseInput extends AuroElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -6090,6 +6111,7 @@ class BaseInput extends AuroElement {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -6102,7 +6124,8 @@ class BaseInput extends AuroElement {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -6563,7 +6586,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6765,6 +6788,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {

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

@@ -1645,7 +1645,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1620,7 +1620,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/index.js

@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/registered.js

@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.