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

package/components/combobox/demo/api.md

@@ -16,6 +16,7 @@
 | [inputmode](#inputmode)                     | `inputmode`                     | `string`      |                | Exposes inputmode attribute for input.           |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`     |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | [layout](#layout)                        |                                 | `string`      |                |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`     | true           | If declared, the popover and trigger will be set to the same width. |
 | [noFilter](#noFilter)                      | `noFilter`                      | `boolean`     |                | If set, combobox will not filter menuoptions based in input. |
 | [noFlip](#noFlip)                        | `noFlip`                        | `boolean`     | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean`     |                | If set, disables auto-validation on blur.        |

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

@@ -12246,7 +12246,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -12254,6 +12254,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -12335,10 +12347,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -12346,9 +12358,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -12370,7 +12383,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"
@@ -13672,6 +13685,8 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
 
+    this.matchWidth = true;
+
     this.privateDefaults();
   }
 
@@ -13805,6 +13820,14 @@ class AuroCombobox extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -14692,7 +14715,7 @@ class AuroCombobox extends AuroElement$1 {
           fluid
           for="dropdownMenu"
           layout="${this.layout}"
-          matchWidth
+          matchWidth="${o(this.matchWidth)}"
           nocheckmark
           rounded
           shape="${this.shape}"

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

@@ -12104,7 +12104,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -12112,6 +12112,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -12193,10 +12205,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -12204,9 +12216,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -12228,7 +12241,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"
@@ -13530,6 +13543,8 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
 
+    this.matchWidth = true;
+
     this.privateDefaults();
   }
 
@@ -13663,6 +13678,14 @@ class AuroCombobox extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -14550,7 +14573,7 @@ class AuroCombobox extends AuroElement$1 {
           fluid
           for="dropdownMenu"
           layout="${this.layout}"
-          matchWidth
+          matchWidth="${o(this.matchWidth)}"
           nocheckmark
           rounded
           shape="${this.shape}"

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

@@ -68,6 +68,13 @@ export class AuroCombobox extends AuroElement {
             attribute: boolean;
             reflect: boolean;
         };
+        /**
+         * If declared, the popover and trigger will be set to the same width.
+         */
+        matchWidth: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, combobox will not filter menuoptions based in input.
          */
@@ -222,6 +229,7 @@ export class AuroCombobox extends AuroElement {
      *
      */
     static register(name?: string): void;
+    matchWidth: boolean;
     /**
      * @private
      * @returns {void} Internal defaults.

package/components/combobox/dist/index.js

@@ -12022,7 +12022,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -12030,6 +12030,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -12111,10 +12123,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -12122,9 +12134,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -12146,7 +12159,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"
@@ -13448,6 +13461,8 @@ class AuroCombobox extends AuroElement {
   constructor() {
     super();
 
+    this.matchWidth = true;
+
     this.privateDefaults();
   }
 
@@ -13581,6 +13596,14 @@ class AuroCombobox extends AuroElement {
         reflect: true
       },
 
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -14468,7 +14491,7 @@ class AuroCombobox extends AuroElement {
           fluid
           for="dropdownMenu"
           layout="${this.layout}"
-          matchWidth
+          matchWidth="${ifDefined(this.matchWidth)}"
           nocheckmark
           rounded
           shape="${this.shape}"

package/components/combobox/dist/registered.js

@@ -12022,7 +12022,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -12030,6 +12030,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -12111,10 +12123,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -12122,9 +12134,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -12146,7 +12159,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"
@@ -13448,6 +13461,8 @@ class AuroCombobox extends AuroElement {
   constructor() {
     super();
 
+    this.matchWidth = true;
+
     this.privateDefaults();
   }
 
@@ -13581,6 +13596,14 @@ class AuroCombobox extends AuroElement {
         reflect: true
       },
 
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -14468,7 +14491,7 @@ class AuroCombobox extends AuroElement {
           fluid
           for="dropdownMenu"
           layout="${this.layout}"
-          matchWidth
+          matchWidth="${ifDefined(this.matchWidth)}"
           nocheckmark
           rounded
           shape="${this.shape}"

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

@@ -23772,7 +23772,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -23780,6 +23780,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -23861,10 +23873,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -23872,9 +23884,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -23896,7 +23909,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"

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

@@ -23513,7 +23513,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -23521,6 +23521,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -23602,10 +23614,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -23613,9 +23625,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -23637,7 +23650,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"

package/components/datepicker/dist/index.js

@@ -23449,7 +23449,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -23457,6 +23457,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -23538,10 +23550,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -23549,9 +23561,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html$1`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -23573,7 +23586,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"

package/components/datepicker/dist/registered.js

@@ -23449,7 +23449,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -23457,6 +23457,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -23538,10 +23550,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -23549,9 +23561,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html$1`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -23573,7 +23586,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"

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

@@ -7268,7 +7268,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -7276,6 +7276,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -7357,10 +7369,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -7368,9 +7380,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -7392,7 +7405,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"

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

@@ -7193,7 +7193,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -7201,6 +7201,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -7282,10 +7294,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -7293,9 +7305,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return u$2`
       <label for=${this.id} class="${e(this.commonLabelClasses)}" part="label">
@@ -7317,7 +7330,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${e(inputClasses)}"
+        class="${e(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
         lang="${o(this.lang)}"

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

@@ -34,9 +34,15 @@ export class AuroInput extends BaseInput {
     /**
      * Returns classmap configuration for html5 inputs in all layouts.
      * @private
-     * @returns {void}
+     * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
      */
     private get commonInputClasses();
+    /**
+     * Returns classmap configuration for html5 inputs in all layouts.
+     * @private
+     * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+     */
+    private get legacyInputClasses();
     get commonWrapperClasses(): {
         wrapper: boolean;
         withValue: boolean;
@@ -68,7 +74,7 @@ export class AuroInput extends BaseInput {
     /**
      * Returns HTML for the HTML5 input element.
      * @private
-     * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+     * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
      * @returns {html} - Returns HTML for the HTML5 input element.
      */
     private renderHtmlInput;

package/components/input/dist/index.js

@@ -7117,7 +7117,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -7125,6 +7125,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -7206,10 +7218,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -7217,9 +7229,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html$1`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -7241,7 +7254,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"

package/components/input/dist/registered.js

@@ -7117,7 +7117,7 @@ class AuroInput extends BaseInput {
   /**
    * Returns classmap configuration for html5 inputs in all layouts.
    * @private
-   * @returns {void}
+   * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
    */
   get commonInputClasses() {
     return {
@@ -7125,6 +7125,18 @@ class AuroInput extends BaseInput {
     };
   }
 
+  /**
+   * Returns classmap configuration for html5 inputs in all layouts.
+   * @private
+   * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+   */
+  get legacyInputClasses() {
+    return {
+      ...this.commonInputClasses,
+      'util_displayHiddenVisually': !this.hasFocus && !this.value
+    };
+  }
+
   get commonWrapperClasses() {
     return {
       'wrapper': true,
@@ -7206,10 +7218,10 @@ class AuroInput extends BaseInput {
   /**
    * Returns HTML for the HTML5 input element.
    * @private
-   * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+   * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
    * @returns {html} - Returns HTML for the HTML5 input element.
    */
-  renderHtmlInput(hideInputWhenBlurred = false) {
+  renderHtmlInput(useLegacyHiddenState = false) {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
@@ -7217,9 +7229,10 @@ class AuroInput extends BaseInput {
       'withValue': this.value && this.value.length > 0,
     };
 
-    const inputClasses = {
-      'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
-    };
+    // Remove this when the classic layout is sunset.
+    const inputOverrideClasses = useLegacyHiddenState
+      ? this.legacyInputClasses
+      : this.commonInputClasses;
 
     return html$1`
       <label for=${this.id} class="${classMap(this.commonLabelClasses)}" part="label">
@@ -7241,7 +7254,7 @@ class AuroInput extends BaseInput {
         autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
         autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
         autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
-        class="${classMap(inputClasses)}"
+        class="${classMap(inputOverrideClasses)}"
         id="${this.inputId}"
         inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
         lang="${ifDefined(this.lang)}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr624.2",
+  "version": "0.0.0-pr624.4",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {