@aurodesignsystem-dev/auro-formkit 0.0.0-pr1346.2 → 0.0.0-pr1346.4

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

@@ -5197,6 +5197,15 @@ class BaseInput extends AuroElement {
   constructor() {
     super();
 
+    // 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.
+    this.constructor.shadowRootOptions = {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
     this._initializeDefaults();
   }
 
@@ -5318,14 +5327,6 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
-      /**
-       * The value for the aria-controls attribute.
-       */
-      a11yControls: {
-        type: String,
-        reflect: true
-      },
-
       /**
        * The value for the aria-activedescendant attribute.
        * Points to the ID of the currently active/highlighted option in a listbox.
@@ -6018,31 +6019,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
+          }
+        });
+      }
     }
   }
 
@@ -6075,6 +6079,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);
     }
   }
@@ -6737,7 +6746,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -5122,6 +5122,15 @@ class BaseInput extends AuroElement {
   constructor() {
     super();
 
+    // 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.
+    this.constructor.shadowRootOptions = {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
     this._initializeDefaults();
   }
 
@@ -5243,14 +5252,6 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
-      /**
-       * The value for the aria-controls attribute.
-       */
-      a11yControls: {
-        type: String,
-        reflect: true
-      },
-
       /**
        * The value for the aria-activedescendant attribute.
        * Points to the ID of the currently active/highlighted option in a listbox.
@@ -5943,31 +5944,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
+          }
+        });
+      }
     }
   }
 
@@ -6000,6 +6004,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);
     }
   }
@@ -6662,7 +6671,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/index.js

@@ -5063,6 +5063,15 @@ class BaseInput extends AuroElement {
   constructor() {
     super();
 
+    // 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.
+    this.constructor.shadowRootOptions = {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
     this._initializeDefaults();
   }
 
@@ -5184,14 +5193,6 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
-      /**
-       * The value for the aria-controls attribute.
-       */
-      a11yControls: {
-        type: String,
-        reflect: true
-      },
-
       /**
        * The value for the aria-activedescendant attribute.
        * Points to the ID of the currently active/highlighted option in a listbox.
@@ -5884,31 +5885,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
+          }
+        });
+      }
     }
   }
 
@@ -5941,6 +5945,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);
     }
   }
@@ -6603,7 +6612,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/registered.js

@@ -5063,6 +5063,15 @@ class BaseInput extends AuroElement {
   constructor() {
     super();
 
+    // 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.
+    this.constructor.shadowRootOptions = {
+      ...AuroElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
     this._initializeDefaults();
   }
 
@@ -5184,14 +5193,6 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
-      /**
-       * The value for the aria-controls attribute.
-       */
-      a11yControls: {
-        type: String,
-        reflect: true
-      },
-
       /**
        * The value for the aria-activedescendant attribute.
        * Points to the ID of the currently active/highlighted option in a listbox.
@@ -5884,31 +5885,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
+          }
+        });
+      }
     }
   }
 
@@ -5941,6 +5945,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);
     }
   }
@@ -6603,7 +6612,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -660,7 +660,11 @@ class AuroMenuOption extends AuroElement {
 
     // Generate unique ID if not already set (required for aria-activedescendant)
     if (!this.id) {
-      this.id = `menuoption-${Math.random().toString(36).slice(2, 8)}`;
+      const idBase = 36;
+      const sliceStart = 2;
+      const sliceEnd = 8;
+      this.id = `menuoption-${Math.random().toString(idBase).
+        slice(sliceStart, sliceEnd)}`;
     }
 
     this.setAttribute('role', 'option');
@@ -1567,7 +1571,7 @@ class MenuService {
 
 const MenuContext = n$1('menu-context');
 
-/* eslint-disable no-underscore-dangle, curly */
+/* eslint-disable no-underscore-dangle */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1588,7 +1592,7 @@ const MenuContext = n$1('menu-context');
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable max-lines */
 
 class AuroMenu extends AuroElement {
 

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

@@ -568,7 +568,11 @@ class AuroMenuOption extends AuroElement {
 
     // Generate unique ID if not already set (required for aria-activedescendant)
     if (!this.id) {
-      this.id = `menuoption-${Math.random().toString(36).slice(2, 8)}`;
+      const idBase = 36;
+      const sliceStart = 2;
+      const sliceEnd = 8;
+      this.id = `menuoption-${Math.random().toString(idBase).
+        slice(sliceStart, sliceEnd)}`;
     }
 
     this.setAttribute('role', 'option');
@@ -1475,7 +1479,7 @@ class MenuService {
 
 const MenuContext = n$1('menu-context');
 
-/* eslint-disable no-underscore-dangle, curly */
+/* eslint-disable no-underscore-dangle */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1496,7 +1500,7 @@ const MenuContext = n$1('menu-context');
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable max-lines */
 
 class AuroMenu extends AuroElement {
 

package/components/menu/dist/index.js

@@ -542,7 +542,11 @@ class AuroMenuOption extends AuroElement {
 
     // Generate unique ID if not already set (required for aria-activedescendant)
     if (!this.id) {
-      this.id = `menuoption-${Math.random().toString(36).slice(2, 8)}`;
+      const idBase = 36;
+      const sliceStart = 2;
+      const sliceEnd = 8;
+      this.id = `menuoption-${Math.random().toString(idBase).
+        slice(sliceStart, sliceEnd)}`;
     }
 
     this.setAttribute('role', 'option');
@@ -1449,7 +1453,7 @@ class MenuService {
 
 const MenuContext = createContext('menu-context');
 
-/* eslint-disable no-underscore-dangle, curly */
+/* eslint-disable no-underscore-dangle */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1470,7 +1474,7 @@ const MenuContext = createContext('menu-context');
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable max-lines */
 
 class AuroMenu extends AuroElement {
 

package/components/menu/dist/registered.js

@@ -489,7 +489,11 @@ class AuroMenuOption extends AuroElement {
 
     // Generate unique ID if not already set (required for aria-activedescendant)
     if (!this.id) {
-      this.id = `menuoption-${Math.random().toString(36).slice(2, 8)}`;
+      const idBase = 36;
+      const sliceStart = 2;
+      const sliceEnd = 8;
+      this.id = `menuoption-${Math.random().toString(idBase).
+        slice(sliceStart, sliceEnd)}`;
     }
 
     this.setAttribute('role', 'option');
@@ -1396,7 +1400,7 @@ class MenuService {
 
 const MenuContext = createContext('menu-context');
 
-/* eslint-disable no-underscore-dangle, curly */
+/* eslint-disable no-underscore-dangle */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -1417,7 +1421,7 @@ const MenuContext = createContext('menu-context');
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
+/* eslint-disable max-lines */
 
 class AuroMenu extends AuroElement {
 

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

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