@aurodesignsystem/auro-formkit 6.0.3 → 6.1.0

package/CHANGELOG.md

@@ -1,15 +1,27 @@
-## [6.0.3](https://github.com/AlaskaAirlines/auro-formkit/compare/v6.0.2...v6.0.3) (2026-08-11)
+# [6.1.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v6.0.3...v6.1.0) (2026-08-26)
 
 
 ### Bug Fixes
 
-* **dropdown:** align js example system AB[#1611713](https://github.com/AlaskaAirlines/auro-formkit/issues/1611713) ([2e06af7](https://github.com/AlaskaAirlines/auro-formkit/commit/2e06af7babdf13323fd71d67380916dca0172af2))
-* **dropdown:** re-configure floater on reconnect to restore trigger event listeners AB[#1611656](https://github.com/AlaskaAirlines/auro-formkit/issues/1611656) ([e782512](https://github.com/AlaskaAirlines/auro-formkit/commit/e78251238cf4d751c19585acf94b71d84c590d6a))
-* ellipses dp value at small widths AB[#1602084](https://github.com/AlaskaAirlines/auro-formkit/issues/1602084) ([2fe60e2](https://github.com/AlaskaAirlines/auro-formkit/commit/2fe60e25d415053805abae83e94c1002b77f30fc))
-* ensure range inputs maintain equal size with long labels AB[#1494482](https://github.com/AlaskaAirlines/auro-formkit/issues/1494482) ([146a039](https://github.com/AlaskaAirlines/auro-formkit/commit/146a0398fb491ecd857d496ff7ec89e5977fc012))
-* **menu:** distinguish menu options that share a value AB[#1602086](https://github.com/AlaskaAirlines/auro-formkit/issues/1602086) ([cc880c9](https://github.com/AlaskaAirlines/auro-formkit/commit/cc880c9c6254bcec133e54990c85839bf3428e68))
-* **menu:** re-select highlighted option via Enter after emptying selection AB[#1606433](https://github.com/AlaskaAirlines/auro-formkit/issues/1606433) ([50b3af2](https://github.com/AlaskaAirlines/auro-formkit/commit/50b3af20b08fe4a1cf46ed849ea14d7c7df1fac3))
-* stringfy counter's aria-valuetext AB[#1443553](https://github.com/AlaskaAirlines/auro-formkit/issues/1443553) ([f8d33f9](https://github.com/AlaskaAirlines/auro-formkit/commit/f8d33f9db67f55f1e45d4d45d442a21c94e6127b))
+* **dropdown:** align js example system AB[#1611713](https://github.com/AlaskaAirlines/auro-formkit/issues/1611713) ([50a787d](https://github.com/AlaskaAirlines/auro-formkit/commit/50a787d6f163b34f7eba68c0a0ba37a5357f10a7))
+* **dropdown:** re-configure floater on reconnect to restore trigger event listeners AB[#1611656](https://github.com/AlaskaAirlines/auro-formkit/issues/1611656) ([a769d8f](https://github.com/AlaskaAirlines/auro-formkit/commit/a769d8f5e2d78fe4b9ff31264fd571cb38d9d5b5))
+* ellipses dp value at small widths AB[#1602084](https://github.com/AlaskaAirlines/auro-formkit/issues/1602084) ([08dcaa4](https://github.com/AlaskaAirlines/auro-formkit/commit/08dcaa40dd6a45d3cfbf8996b47c728595cbe171))
+* ensure range inputs maintain equal size with long labels AB[#1494482](https://github.com/AlaskaAirlines/auro-formkit/issues/1494482) ([1d9e95d](https://github.com/AlaskaAirlines/auro-formkit/commit/1d9e95d2bcef01d66c80cef514c958e22746b85a))
+* honor noValidate on blur in select, combobox, radio-group, and checkbox-group AB[#1594311](https://github.com/AlaskaAirlines/auro-formkit/issues/1594311) ([f50b0c5](https://github.com/AlaskaAirlines/auro-formkit/commit/f50b0c53342904cdfb5f2b9db2f4dd3f8e90408c))
+* **input:** enable activeLabel functionality AB[#1494433](https://github.com/AlaskaAirlines/auro-formkit/issues/1494433) ([78a5cba](https://github.com/AlaskaAirlines/auro-formkit/commit/78a5cba84972cc05dc583e0b78709fe15789cdde))
+* **menu:** distinguish menu options that share a value AB[#1602086](https://github.com/AlaskaAirlines/auro-formkit/issues/1602086) ([d93d0cf](https://github.com/AlaskaAirlines/auro-formkit/commit/d93d0cf4ef494eccb653f0459986291e67379623))
+* **menu:** re-select highlighted option via Enter after emptying selection AB[#1606433](https://github.com/AlaskaAirlines/auro-formkit/issues/1606433) ([f0fe516](https://github.com/AlaskaAirlines/auro-formkit/commit/f0fe5168055d193fcafc323193eb8c440416f743))
+* preserve error attribute state on blur when noValidate is set AB[#1629494](https://github.com/AlaskaAirlines/auro-formkit/issues/1629494) ([6d16d46](https://github.com/AlaskaAirlines/auro-formkit/commit/6d16d46fd6f994b170b3e455f0c260a234c7d734))
+* stringfy counter's aria-valuetext AB[#1443553](https://github.com/AlaskaAirlines/auro-formkit/issues/1443553) ([1902b94](https://github.com/AlaskaAirlines/auro-formkit/commit/1902b94f0cbbaf55daff88ac234b6b807a24592a))
+* suppress selection-triggered validation when noValidate is set [#1588](https://github.com/AlaskaAirlines/auro-formkit/issues/1588) ([761110b](https://github.com/AlaskaAirlines/auro-formkit/commit/761110bfee5f902cfd9f725875989f92993d66f2))
+* suppress selection-triggered validation when noValidate is set [#1588](https://github.com/AlaskaAirlines/auro-formkit/issues/1588) ([20222bc](https://github.com/AlaskaAirlines/auro-formkit/commit/20222bc7035bdc509626bf04a253e94f2aaf8df0))
+* use hasAttribute('error') to guard stale-clear and cover empty error="" case [#1594](https://github.com/AlaskaAirlines/auro-formkit/issues/1594) ([1e0c1d7](https://github.com/AlaskaAirlines/auro-formkit/commit/1e0c1d75878e891cb4df0f9707ff88c8118cb04d))
+
+
+### Features
+
+* **cc:** support chinese union pay credit cards AB[#1551772](https://github.com/AlaskaAirlines/auro-formkit/issues/1551772) ([eb0a268](https://github.com/AlaskaAirlines/auro-formkit/commit/eb0a26862c929307eced6cb68dd4a95b74f5805c))
+* **cc:** support JCB credit cards AB[#1550294](https://github.com/AlaskaAirlines/auro-formkit/issues/1550294) ([574a68d](https://github.com/AlaskaAirlines/auro-formkit/commit/574a68df7847ff38590eb105829715028a3035d7))
 
 # Changelog
 

package/components/checkbox/demo/customize.min.js

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1495,7 +1495,9 @@ class AuroCheckboxGroup extends i$2 {
       composed: true,
     }));
 
-    this.validate(true);
+    if (!this.noValidate) {
+      this.validate(true);
+    }
   }
 
   firstUpdated() {
@@ -1506,11 +1508,19 @@ class AuroCheckboxGroup extends i$2 {
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
         // if focus has left the group, cleanup and validate
-        document.auroCheckboxGroupActive.focusWithin = false;
+        const group = document.auroCheckboxGroupActive;
+        group.focusWithin = false;
         window.removeEventListener('focusin', checkFocusWithin);
         document.removeEventListener('click', checkFocusWithin);
         // execute the validation
-        document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
+        if (!group.noValidate) {
+          group.validation.validate(group);
+        } else if (group.validity !== undefined && !group.hasAttribute('error')) {
+          // Clear stale error state left by a previous validate(true) call.
+          // Do not clear when the error attribute is set — that is an externally forced error.
+          group.validity = undefined;
+          group.errorMessage = '';
+        }
       }
     };
 

package/components/checkbox/demo/getting-started.min.js

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1495,7 +1495,9 @@ class AuroCheckboxGroup extends i$2 {
       composed: true,
     }));
 
-    this.validate(true);
+    if (!this.noValidate) {
+      this.validate(true);
+    }
   }
 
   firstUpdated() {
@@ -1506,11 +1508,19 @@ class AuroCheckboxGroup extends i$2 {
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
         // if focus has left the group, cleanup and validate
-        document.auroCheckboxGroupActive.focusWithin = false;
+        const group = document.auroCheckboxGroupActive;
+        group.focusWithin = false;
         window.removeEventListener('focusin', checkFocusWithin);
         document.removeEventListener('click', checkFocusWithin);
         // execute the validation
-        document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
+        if (!group.noValidate) {
+          group.validation.validate(group);
+        } else if (group.validity !== undefined && !group.hasAttribute('error')) {
+          // Clear stale error state left by a previous validate(true) call.
+          // Do not clear when the error attribute is set — that is an externally forced error.
+          group.validity = undefined;
+          group.errorMessage = '';
+        }
       }
     };
 

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

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1495,7 +1495,9 @@ class AuroCheckboxGroup extends i$2 {
       composed: true,
     }));
 
-    this.validate(true);
+    if (!this.noValidate) {
+      this.validate(true);
+    }
   }
 
   firstUpdated() {
@@ -1506,11 +1508,19 @@ class AuroCheckboxGroup extends i$2 {
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
         // if focus has left the group, cleanup and validate
-        document.auroCheckboxGroupActive.focusWithin = false;
+        const group = document.auroCheckboxGroupActive;
+        group.focusWithin = false;
         window.removeEventListener('focusin', checkFocusWithin);
         document.removeEventListener('click', checkFocusWithin);
         // execute the validation
-        document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
+        if (!group.noValidate) {
+          group.validation.validate(group);
+        } else if (group.validity !== undefined && !group.hasAttribute('error')) {
+          // Clear stale error state left by a previous validate(true) call.
+          // Do not clear when the error attribute is set — that is an externally forced error.
+          group.validity = undefined;
+          group.errorMessage = '';
+        }
       }
     };
 

package/components/checkbox/dist/index.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1448,7 +1448,9 @@ class AuroCheckboxGroup extends LitElement {
       composed: true,
     }));
 
-    this.validate(true);
+    if (!this.noValidate) {
+      this.validate(true);
+    }
   }
 
   firstUpdated() {
@@ -1459,11 +1461,19 @@ class AuroCheckboxGroup extends LitElement {
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
         // if focus has left the group, cleanup and validate
-        document.auroCheckboxGroupActive.focusWithin = false;
+        const group = document.auroCheckboxGroupActive;
+        group.focusWithin = false;
         window.removeEventListener('focusin', checkFocusWithin);
         document.removeEventListener('click', checkFocusWithin);
         // execute the validation
-        document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
+        if (!group.noValidate) {
+          group.validation.validate(group);
+        } else if (group.validity !== undefined && !group.hasAttribute('error')) {
+          // Clear stale error state left by a previous validate(true) call.
+          // Do not clear when the error attribute is set — that is an externally forced error.
+          group.validity = undefined;
+          group.errorMessage = '';
+        }
       }
     };
 

package/components/checkbox/dist/registered.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1448,7 +1448,9 @@ class AuroCheckboxGroup extends LitElement {
       composed: true,
     }));
 
-    this.validate(true);
+    if (!this.noValidate) {
+      this.validate(true);
+    }
   }
 
   firstUpdated() {
@@ -1459,11 +1461,19 @@ class AuroCheckboxGroup extends LitElement {
     const checkFocusWithin = function(evt) {
       if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
         // if focus has left the group, cleanup and validate
-        document.auroCheckboxGroupActive.focusWithin = false;
+        const group = document.auroCheckboxGroupActive;
+        group.focusWithin = false;
         window.removeEventListener('focusin', checkFocusWithin);
         document.removeEventListener('click', checkFocusWithin);
         // execute the validation
-        document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
+        if (!group.noValidate) {
+          group.validation.validate(group);
+        } else if (group.validity !== undefined && !group.hasAttribute('error')) {
+          // Clear stale error state left by a previous validate(true) call.
+          // Do not clear when the error attribute is set — that is an externally forced error.
+          group.validity = undefined;
+          group.errorMessage = '';
+        }
       }
     };
 

package/components/combobox/demo/customize.min.js

@@ -4977,7 +4977,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202608111803';
+var formkitVersion$2 = '202608262225';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -17149,6 +17149,8 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * If set, the label will remain fixed in the active position.
+       * Only applies to the classic/default layout; the emphasized and snowflake
+       * layouts always render the label inside the field, so this has no effect there.
        */
       activeLabel: {
         type: Boolean,
@@ -18268,6 +18270,18 @@ class BaseInput extends AuroElement$1 {
         cardIcon: 'cc-dinersclub',
         maskFormat: "0000 000000 0000"
       },
+      {
+        // JCB is variable length (16-19 digits), like UnionPay, so it reuses the
+        // formatMinLength/formatLength range machinery. The 35 prefix overlaps no
+        // other brand (Amex is 34|37, Diners is 30[0-5]|36|38).
+        name: 'JCB',
+        regex: /^(?<num>35)\d{0}/u,
+        formatMinLength: 19,
+        formatLength: 23,
+        errorMessage: CreditCardValidationMessage,
+        cardIcon: 'cc-jcb',
+        maskFormat: "0000 0000 0000 0000 000"
+      },
       {
         name: 'Visa',
         regex: /^(?<num>4)\d{0}/u,
@@ -18299,6 +18313,20 @@ class BaseInput extends AuroElement$1 {
         errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-discover',
         maskFormat: "0000 0000 0000 0000"
+      },
+      {
+        // China UnionPay is variable length (16-19 digits). It must come after
+        // Discover so the last-match-wins loop below gives its 62 prefix
+        // precedence over the generic `6` that resolves to Discover. 81 is used
+        // by UnionPay cards issued outside mainland China and overlaps no other
+        // brand. 60 is intentionally excluded (it overlaps real Discover 6011).
+        name: 'China UnionPay',
+        regex: /^(?<num>62|81)\d{0}/u,
+        formatMinLength: 19,
+        formatLength: 23,
+        errorMessage: CreditCardValidationMessage,
+        cardIcon: 'cc-unionpay',
+        maskFormat: "0000 0000 0000 0000 000"
       }
     ];
 
@@ -18316,7 +18344,12 @@ class BaseInput extends AuroElement$1 {
       }
     });
 
-    this.validationCCLength = type.formatLength;
+    // Variable-length brands (both min and max defined, e.g. UnionPay) validate
+    // against the minimum masked length so shorter-but-valid entries are not
+    // flagged tooShort. Fixed-length brands keep their single formatLength.
+    this.validationCCLength = type.formatMinLength && type.formatLength
+      ? type.formatMinLength
+      : type.formatLength;
 
     return type;
   }
@@ -18675,7 +18708,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202608111803';
+var formkitVersion$1 = '202608262225';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -18776,15 +18809,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
+
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,
@@ -18830,7 +18883,7 @@ class AuroInput extends BaseInput {
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus && !this.activeLabel) ? 'body-default' : 'body-xs';
   }
 
   /**
@@ -18926,7 +18979,8 @@ class AuroInput extends BaseInput {
       'wrapper': true,
       'simple': this.simple,
       'withValue': this.hasValue,
-      'hasFocus': this.hasFocus
+      'hasFocus': this.hasFocus,
+      'activeLabel': this.activeLabel
     };
   }
 
@@ -19076,7 +19130,10 @@ class AuroInput extends BaseInput {
    */
   definePattern() {
     if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
-      return `.{${this.maxLength},${this.maxLength}}`;
+      // Variable-length brands (e.g. UnionPay) set minLength, so accept a range;
+      // fixed-length brands leave minLength undefined and keep an exact length.
+      const minPatternLength = this.minLength || this.maxLength;
+      return `.{${minPatternLength},${this.maxLength}}`;
     }
 
     return this.pattern;
@@ -19137,7 +19194,6 @@ class AuroInput extends BaseInput {
         @input="${this.handleInput}"
         .placeholder=${this.placeholderStr}
         .role=${this.a11yRole}
-        ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
         aria-activedescendant=${o(this.a11yActivedescendant)}
@@ -19831,7 +19887,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 var styleCss$3 = i$6`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -21526,8 +21582,13 @@ class AuroCombobox extends AuroElement {
       // and validating against the pre-selection value flashes a stale error
       // between mousedown and mouseup. The next focusout fires after the
       // dropdown closes and validates against the post-selection value.
-      if (!this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
+      if (!this.noValidate && !this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
         this.validate();
+      } else if (this.noValidate && !this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen && this.validity !== undefined && !this.hasAttribute('error')) {
+        // Clear stale error state left by a previous validate(true) call.
+        // Do not clear when the error attribute is set — that is an externally forced error.
+        this.validity = undefined;
+        this.errorMessage = null;
       }
     });
 
@@ -21666,7 +21727,7 @@ class AuroCombobox extends AuroElement {
     // interaction). In fullscreen dialog mode, componentHasFocus returns false
     // because focus is inside the top-layer dialog, so also check
     // dropdownOpen and the fullscreen transition flag.
-    if (!this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
+    if (!this.noValidate && !this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
       this.validate();
     }
 

package/components/combobox/demo/getting-started.min.js

@@ -4977,7 +4977,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202608111803';
+var formkitVersion$2 = '202608262225';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -17149,6 +17149,8 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * If set, the label will remain fixed in the active position.
+       * Only applies to the classic/default layout; the emphasized and snowflake
+       * layouts always render the label inside the field, so this has no effect there.
        */
       activeLabel: {
         type: Boolean,
@@ -18268,6 +18270,18 @@ class BaseInput extends AuroElement$1 {
         cardIcon: 'cc-dinersclub',
         maskFormat: "0000 000000 0000"
       },
+      {
+        // JCB is variable length (16-19 digits), like UnionPay, so it reuses the
+        // formatMinLength/formatLength range machinery. The 35 prefix overlaps no
+        // other brand (Amex is 34|37, Diners is 30[0-5]|36|38).
+        name: 'JCB',
+        regex: /^(?<num>35)\d{0}/u,
+        formatMinLength: 19,
+        formatLength: 23,
+        errorMessage: CreditCardValidationMessage,
+        cardIcon: 'cc-jcb',
+        maskFormat: "0000 0000 0000 0000 000"
+      },
       {
         name: 'Visa',
         regex: /^(?<num>4)\d{0}/u,
@@ -18299,6 +18313,20 @@ class BaseInput extends AuroElement$1 {
         errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-discover',
         maskFormat: "0000 0000 0000 0000"
+      },
+      {
+        // China UnionPay is variable length (16-19 digits). It must come after
+        // Discover so the last-match-wins loop below gives its 62 prefix
+        // precedence over the generic `6` that resolves to Discover. 81 is used
+        // by UnionPay cards issued outside mainland China and overlaps no other
+        // brand. 60 is intentionally excluded (it overlaps real Discover 6011).
+        name: 'China UnionPay',
+        regex: /^(?<num>62|81)\d{0}/u,
+        formatMinLength: 19,
+        formatLength: 23,
+        errorMessage: CreditCardValidationMessage,
+        cardIcon: 'cc-unionpay',
+        maskFormat: "0000 0000 0000 0000 000"
       }
     ];
 
@@ -18316,7 +18344,12 @@ class BaseInput extends AuroElement$1 {
       }
     });
 
-    this.validationCCLength = type.formatLength;
+    // Variable-length brands (both min and max defined, e.g. UnionPay) validate
+    // against the minimum masked length so shorter-but-valid entries are not
+    // flagged tooShort. Fixed-length brands keep their single formatLength.
+    this.validationCCLength = type.formatMinLength && type.formatLength
+      ? type.formatMinLength
+      : type.formatLength;
 
     return type;
   }
@@ -18675,7 +18708,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202608111803';
+var formkitVersion$1 = '202608262225';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -18776,15 +18809,35 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
+    // In the classic/default layout, activeLabel keeps the input row visible so
+    // the label stays raised rather than collapsing to the centered placeholder
+    // position. Emphasized/snowflake always render the label inside the field,
+    // so activeLabel does not apply there. This only overrides the empty/
+    // unfocused clause — the display-value clause (combobox/datepicker) is
+    // preserved regardless.
+    const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
+
     return (
       this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
       (
+        !activeLabelRaisesInput &&
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
         (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
+  /**
+   * Whether the component is rendering the classic/default layout, meaning not
+   * emphasized and not snowflake. Kept as a single source of truth so
+   * layout-scoped behavior such as activeLabel stays consistent across getters.
+   * @returns {boolean} - True for the classic/default layout.
+   * @private
+   */
+  get isClassicLayout() {
+    return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
+  }
+
   /**
    * Determines if the input should display in a state with no focus or value indication.
    * Returns true when the input has display content without focus and has a value,
@@ -18830,7 +18883,7 @@ class AuroInput extends BaseInput {
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus && !this.activeLabel) ? 'body-default' : 'body-xs';
   }
 
   /**
@@ -18926,7 +18979,8 @@ class AuroInput extends BaseInput {
       'wrapper': true,
       'simple': this.simple,
       'withValue': this.hasValue,
-      'hasFocus': this.hasFocus
+      'hasFocus': this.hasFocus,
+      'activeLabel': this.activeLabel
     };
   }
 
@@ -19076,7 +19130,10 @@ class AuroInput extends BaseInput {
    */
   definePattern() {
     if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
-      return `.{${this.maxLength},${this.maxLength}}`;
+      // Variable-length brands (e.g. UnionPay) set minLength, so accept a range;
+      // fixed-length brands leave minLength undefined and keep an exact length.
+      const minPatternLength = this.minLength || this.maxLength;
+      return `.{${minPatternLength},${this.maxLength}}`;
     }
 
     return this.pattern;
@@ -19137,7 +19194,6 @@ class AuroInput extends BaseInput {
         @input="${this.handleInput}"
         .placeholder=${this.placeholderStr}
         .role=${this.a11yRole}
-        ?activeLabel="${this.activeLabel}"
         ?disabled="${this.disabled}"
         ?required="${this.required}"
         aria-activedescendant=${o(this.a11yActivedescendant)}
@@ -19831,7 +19887,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 var styleCss$3 = i$6`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -21526,8 +21582,13 @@ class AuroCombobox extends AuroElement {
       // and validating against the pre-selection value flashes a stale error
       // between mousedown and mouseup. The next focusout fires after the
       // dropdown closes and validates against the post-selection value.
-      if (!this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
+      if (!this.noValidate && !this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
         this.validate();
+      } else if (this.noValidate && !this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen && this.validity !== undefined && !this.hasAttribute('error')) {
+        // Clear stale error state left by a previous validate(true) call.
+        // Do not clear when the error attribute is set — that is an externally forced error.
+        this.validity = undefined;
+        this.errorMessage = null;
       }
     });
 
@@ -21666,7 +21727,7 @@ class AuroCombobox extends AuroElement {
     // interaction). In fullscreen dialog mode, componentHasFocus returns false
     // because focus is inside the top-layer dialog, so also check
     // dropdownOpen and the fullscreen transition flag.
-    if (!this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
+    if (!this.noValidate && !this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
       this.validate();
     }