@aurodesignsystem/auro-formkit 6.0.3 → 6.1.0

package/components/input/demo/api.md

@@ -13,7 +13,7 @@ The `auro-input` element provides users a way to enter data into a text field.
 | `a11yControls`                     | `a11yControls`                     |           | `string`                                         |             | The value for the aria-controls attribute.       |
 | `a11yExpanded`                     | `a11yExpanded`                     |           | `boolean`                                        |             | The value for the aria-expanded attribute.       |
 | `a11yRole`                         | `a11yRole`                         |           | `string`                                         |             | The value for the role attribute.                |
-| `activeLabel`                      | `activeLabel`                      |           | `boolean`                                        | false       | If set, the label will remain fixed in the active position. |
+| `activeLabel`                      | `activeLabel`                      |           | `boolean`                                        | false       | If set, the label will remain fixed in the active position.<br />Only applies to the classic/default layout; the emphasized and snowflake<br />layouts always render the label inside the field, so this has no effect there. |
 | `appearance`                       | `appearance`                       |           | `'default' \| 'inverse'`                         | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
 | `autocapitalize`                   | `autocapitalize`                   |           | `string`                                         |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
 | `autocomplete`                     | `autocomplete`                     |           | `string`                                         |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |

package/components/input/demo/css-only.md

@@ -83,7 +83,7 @@
 <auro-header level="3">Input masking</auro-header>
 <p><code>auro-input</code> integrates IMask to apply format patterns as the user types — for example <code>format="(###) ###-####"</code> for phone numbers or <code>format="mm/dd/yyyy"</code> for dates. Native inputs have no concept of input masks, so you must integrate a third-party masking library and manage cursor position, paste handling, and value reconciliation yourself.</p>
 <auro-header level="3">Credit-card formatting and detection</auro-header>
-<p><code>auro-input</code> with <code>type="credit-card"</code> auto-detects Visa, Mastercard, American Express, Discover, Diners Club, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), displays the matching card brand icon, and validates with the Luhn algorithm. None of this is available natively.</p>
+<p><code>auro-input</code> with <code>type="credit-card"</code> auto-detects Visa, Mastercard, American Express, Discover, Diners Club, JCB, China UnionPay, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), and displays the matching card brand icon. None of this is available natively.</p>
 <auro-header level="3">Password show/hide toggle</auro-header>
 <p><code>auro-input</code> with <code>type="password"</code> includes an accessible show/hide toggle with customizable ARIA labels via the <code>ariaLabel.password.show</code> and <code>ariaLabel.password.hide</code> slots. A native password input only masks the value — you must build the toggle button, swap the <code>type</code> attribute, and manage its accessible name yourself.</p>
 <auro-header level="3">Clear button</auro-header>
@@ -131,7 +131,7 @@
 <tr>
 <td>Credit-card detection and formatting</td>
 <td>Not supported</td>
-<td>Auto-detect with icon and Luhn check</td>
+<td>Auto-detect with icon</td>
 </tr>
 <tr>
 <td>Password show/hide toggle</td>

package/components/input/demo/customize.md

@@ -30,7 +30,7 @@
 <auro-anchorlink fluid href="#min" class="level2 body-xs">Min</auro-anchorlink>
 <auro-anchorlink fluid href="#minLength" class="level2 body-xs">Min Length</auro-anchorlink>
 <auro-anchorlink fluid href="#name" class="level2 body-xs">Name</auro-anchorlink>
-<auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validate</auro-anchorlink>
+<auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#pattern" class="level2 body-xs">Pattern</auro-anchorlink>
 <auro-anchorlink fluid href="#readonly" class="level2 body-xs">Readonly</auro-anchorlink>
 <auro-anchorlink fluid href="#required" class="level2 body-xs">Required</auro-anchorlink>
@@ -44,7 +44,7 @@
 <section>
 <auro-header level="2" id="appearance">Appearance</auro-header>
 <auro-header level="3" id="activeLabel">Active Label</auro-header>
-<p>Use the <code>activeLabel</code> attribute to make the label stay fixed in the active position.</p>
+<p>Use the <code>activeLabel</code> attribute to make the label stay fixed in the active position. This applies to the classic/default layout only; the emphasized and snowflake layouts always render the label inside the field and are unaffected.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/active-label.html) -->
 <!-- The below content is automatically added from ../apiExamples/active-label.html -->
@@ -1042,7 +1042,7 @@
 &lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<auro-header level="3" id="noValidate">No Validate</auro-header>
+<auro-header level="3" id="noValidate">noValidate</auro-header>
 <p>For use cases where the field is <code>required</code>, but live validation is not wanted, use the <code>noValidate</code> attribute.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/no-validate.html) -->

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

@@ -10742,6 +10742,8 @@ class BaseInput extends AuroElement {
 
       /**
        * 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,
@@ -11861,6 +11863,18 @@ class BaseInput extends AuroElement {
         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,
@@ -11892,6 +11906,20 @@ class BaseInput extends AuroElement {
         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"
       }
     ];
 
@@ -11909,7 +11937,12 @@ class BaseInput extends AuroElement {
       }
     });
 
-    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;
   }
@@ -12268,7 +12301,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 /**
  * @license
@@ -12381,15 +12414,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,
@@ -12435,7 +12488,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';
   }
 
   /**
@@ -12531,7 +12584,8 @@ class AuroInput extends BaseInput {
       'wrapper': true,
       'simple': this.simple,
       'withValue': this.hasValue,
-      'hasFocus': this.hasFocus
+      'hasFocus': this.hasFocus,
+      'activeLabel': this.activeLabel
     };
   }
 
@@ -12681,7 +12735,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;
@@ -12742,7 +12799,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$2(this.a11yActivedescendant)}

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

@@ -10742,6 +10742,8 @@ class BaseInput extends AuroElement {
 
       /**
        * 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,
@@ -11861,6 +11863,18 @@ class BaseInput extends AuroElement {
         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,
@@ -11892,6 +11906,20 @@ class BaseInput extends AuroElement {
         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"
       }
     ];
 
@@ -11909,7 +11937,12 @@ class BaseInput extends AuroElement {
       }
     });
 
-    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;
   }
@@ -12268,7 +12301,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 /**
  * @license
@@ -12381,15 +12414,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,
@@ -12435,7 +12488,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';
   }
 
   /**
@@ -12531,7 +12584,8 @@ class AuroInput extends BaseInput {
       'wrapper': true,
       'simple': this.simple,
       'withValue': this.hasValue,
-      'hasFocus': this.hasFocus
+      'hasFocus': this.hasFocus,
+      'activeLabel': this.activeLabel
     };
   }
 
@@ -12681,7 +12735,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;
@@ -12742,7 +12799,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$2(this.a11yActivedescendant)}

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

@@ -10742,6 +10742,8 @@ class BaseInput extends AuroElement {
 
       /**
        * 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,
@@ -11861,6 +11863,18 @@ class BaseInput extends AuroElement {
         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,
@@ -11892,6 +11906,20 @@ class BaseInput extends AuroElement {
         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"
       }
     ];
 
@@ -11909,7 +11937,12 @@ class BaseInput extends AuroElement {
       }
     });
 
-    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;
   }
@@ -12268,7 +12301,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608111803';
+var formkitVersion = '202608262225';
 
 /**
  * @license
@@ -12381,15 +12414,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,
@@ -12435,7 +12488,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';
   }
 
   /**
@@ -12531,7 +12584,8 @@ class AuroInput extends BaseInput {
       'wrapper': true,
       'simple': this.simple,
       'withValue': this.hasValue,
-      'hasFocus': this.hasFocus
+      'hasFocus': this.hasFocus,
+      'activeLabel': this.activeLabel
     };
   }
 
@@ -12681,7 +12735,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;
@@ -12742,7 +12799,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$2(this.a11yActivedescendant)}

package/components/input/demo/why-input.md

@@ -22,17 +22,16 @@
 <p>There is no native way to detect a credit card type from input, apply the correct formatting mask, or display the appropriate card icon.</p>
 <p><code>auro-input</code> with <code>type="credit-card"</code> provides:</p>
 <ul>
-<li><strong>Auto-detection</strong> — Identifies Visa, Mastercard, American Express, Discover, Diners Club, and Alaska Airlines cards from the first digits typed.</li>
+<li><strong>Auto-detection</strong> — Identifies Visa, Mastercard, American Express, Discover, Diners Club, JCB, China UnionPay, and Alaska Airlines cards from the first digits typed.</li>
 <li><strong>Dynamic formatting</strong> — Applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex).</li>
 <li><strong>Card icon</strong> — Displays the detected card brand icon automatically.</li>
-<li><strong>Luhn validation</strong> — Validates the card number using the Luhn algorithm.</li>
 </ul>
 <auro-header level="2" id="validation">Validation</auro-header>
 <p>Native input validation provides <code>required</code>, <code>min</code>, <code>max</code>, <code>minlength</code>, <code>maxlength</code>, and <code>pattern</code>, but error messages are browser-controlled and cannot be customized.</p>
 <p><code>auro-input</code> provides:</p>
 <ul>
 <li>Custom error messages for every validity state: <code>setCustomValidityValueMissing</code>, <code>setCustomValidityRangeOverflow</code>, <code>setCustomValidityRangeUnderflow</code>, <code>setCustomValidityTooLong</code>, <code>setCustomValidityTooShort</code>, <code>setCustomValidityBadInput</code>, <code>setCustomValidityCustomError</code>, <code>setCustomValidityForType</code></li>
-<li>Type-specific validation (email format, credit card Luhn, phone format, date format)</li>
+<li>Type-specific validation (email format, credit card format, phone format, date format)</li>
 <li>Validation timing control: on blur (default), on every input (<code>validateOnInput</code>), or disabled (<code>noValidate</code>)</li>
 <li>Programmatic vs. user input distinction — the component tracks whether a value change was user-initiated or programmatic</li>
 </ul>

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

@@ -66,6 +66,14 @@ export class AuroInput extends BaseInput {
      * @private
      */
     private get inputHidden();
+    /**
+     * 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
+     */
+    private get isClassicLayout();
     /**
      * 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,

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

@@ -44,6 +44,8 @@ export default class BaseInput extends AuroElement {
         };
         /**
          * 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: BooleanConstructor;