@aurodesignsystem/auro-formkit 5.1.3 → 5.1.4

package/components/datepicker/dist/registered.js

@@ -17643,7 +17643,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -18428,8 +18428,13 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {
@@ -23490,7 +23495,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -23564,7 +23569,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read
  * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
@@ -23592,6 +23597,7 @@ class BaseInput extends AuroElement$2 {
     this.activeLabel = false;
     this.icon = false;
     this.disabled = false;
+    this.dvInputOnly = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -23685,6 +23691,14 @@ class BaseInput extends AuroElement$2 {
     return {
       ...super.properties,
 
+      /**
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
+       */
+      dvInputOnly: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * The value for the role attribute.
        */
@@ -26450,7 +26464,13 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
+    return (
+      this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
+      (
+        (!this.value || this.value.length === 0) &&
+        !this.hasFocus &&
+        (!this.placeholder || this.placeholder === '')
+      );
   }
 
   /**
@@ -26470,7 +26490,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -26479,18 +26499,26 @@ class AuroInput extends BaseInput {
    * @returns {string} - The font class for the label.
    */
   get labelFontClass() {
-    const isHidden = this.inputHidden;
-
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
+      let typeSize = 'body-sm';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'accent-xl';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'accent-xl';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
-      return isHidden ? 'body-lg' : 'body-xs';
+      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return isHidden ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**
@@ -26500,7 +26528,17 @@ class AuroInput extends BaseInput {
    */
   get inputFontClass() {
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
+      let typeSize = 'accent-xl';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'body-sm';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'body-sm';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
@@ -26543,6 +26581,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -26615,7 +26660,7 @@ class AuroInput extends BaseInput {
     let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
 
     // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
-    if (nodes[0].tagName === 'SLOT') {
+    if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
       nodes = nodes[0].assignedNodes();
     }
 
@@ -26706,7 +26751,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${classMap(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>
@@ -27227,7 +27272,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {

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

@@ -3473,7 +3473,7 @@ class AuroElement extends i {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -4258,8 +4258,13 @@ class AuroDropdown extends AuroElement {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {

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

@@ -3448,7 +3448,7 @@ class AuroElement extends i {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -4233,8 +4233,13 @@ class AuroDropdown extends AuroElement {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {

package/components/dropdown/dist/index.js

@@ -3401,7 +3401,7 @@ class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -4186,8 +4186,13 @@ class AuroDropdown extends AuroElement {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {

package/components/dropdown/dist/registered.js

@@ -3401,7 +3401,7 @@ class AuroElement extends LitElement {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -4186,8 +4186,13 @@ class AuroDropdown extends AuroElement {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {

package/components/input/demo/api.md

@@ -7,51 +7,53 @@ Generate unique names for dependency components.
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default     | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
-| `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)                     | `activeLabel`                     | `boolean` | false       | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#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)                    | `autocomplete`                    | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [autocorrect](#autocorrect)                     | `autocorrect`                     | `string`  |             | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
-| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             | Custom help text message for email type validity. |
-| [disabled](#disabled)                        | `disabled`                        | `boolean` | false       | If set, disables the input.                      |
-| [error](#error)                           | `error`                           | `string`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [errorMessage](#errorMessage)                    | `errorMessage`                    | `string`  |             | Contains the help text message for the current validity error. |
-| [format](#format)                          | `format`                          | `string`  |             | Specifies the input mask format.                 |
-| [icon](#icon)                            | `icon`                            | `boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
-| [id](#id)                              | `id`                              | `string`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [inputmode](#inputmode)                       | `inputmode`                       | `string`  |             | Exposes inputmode attribute for input.           |
-| [lang](#lang)                            | `lang`                            | `string`  |             | Defines the language of an element.              |
-| [max](#max)                             | `max`                             | `string`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       | `number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| [min](#min)                             | `min`                             | `string`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [minLength](#minLength)                       | `minLength`                       | `number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
-| [name](#name)                            | `name`                            | `string`  |             | Populates the `name` attribute on the input.     |
-| [nested](#nested)                          | `nested`                          | `boolean` |             | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
-| [noValidate](#noValidate)                      | `noValidate`                      | `boolean` | false       | If set, disables auto-validation on blur.        |
-| [onDark](#onDark)                          | `onDark`                          | `boolean` | false       | Sets onDark styles on input.                     |
-| [pattern](#pattern)                         | `pattern`                         | `string`  |             | Specifies a regular expression the form control's value should match. |
-| [placeholder](#placeholder)                     | `placeholder`                     | `string`  |             | Define custom placeholder text.                  |
-| [readonly](#readonly)                        | `readonly`                        | `boolean` |             | Makes the input read-only, but can be set programmatically. |
-| [required](#required)                        | `required`                        | `boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `string`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `string`  |             | Custom help text message to display when validity = `badInput`. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `string`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `string`  | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `string`  |             | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `string`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `string`  |             | Custom help text message to display when validity = `tooLong`. |
-| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `string`  |             | Custom help text message to display when validity = `tooShort`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `string`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [simple](#simple)                          | `simple`                          | `boolean` |             | Simple makes the input render without a border.  |
-| [spellcheck](#spellcheck)                      | `spellcheck`                      | `string`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
-| [type](#type)                            | `type`                            | `string`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`. |
-| [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `boolean` |             | Sets validation mode to re-eval with each input. |
-| [validity](#validity)                        | `validity`                        | `string`  |             | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `string`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
+| Property                           | Attribute                         | Modifiers | Type                                             | Default     | Description                                      |
+|------------------------------------|-----------------------------------|-----------|--------------------------------------------------|-------------|--------------------------------------------------|
+| `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)                      | `activeLabel`                     |           | `boolean`                                        | false       | If set, the label will remain fixed in the active position. |
+| [autocapitalize](#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)                     | `autocomplete`                    |           | `string`                                         |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [autocorrect](#autocorrect)                      | `autocorrect`                     |           | `string`                                         |             | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
+| [commonDisplayValueWrapperClasses](#commonDisplayValueWrapperClasses) |                                   | readonly  | `{ [x: string]: boolean; displayValueWrapper: boolean; }` |             |                                                  |
+| [customValidityTypeEmail](#customValidityTypeEmail)          | `customValidityTypeEmail`         |           | `string`                                         |             | Custom help text message for email type validity. |
+| [disabled](#disabled)                         | `disabled`                        |           | `boolean`                                        | false       | If set, disables the input.                      |
+| [dvInputOnly](#dvInputOnly)                      | `dvInputOnly`                     |           | `boolean`                                        | false       | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
+| [error](#error)                            | `error`                           |           | `string`                                         |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [errorMessage](#errorMessage)                     | `errorMessage`                    |           | `string`                                         |             | Contains the help text message for the current validity error. |
+| [format](#format)                           | `format`                          |           | `string`                                         |             | Specifies the input mask format.                 |
+| [icon](#icon)                             | `icon`                            |           | `boolean`                                        | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
+| [id](#id)                               | `id`                              |           | `string`                                         |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [inputmode](#inputmode)                        | `inputmode`                       |           | `string`                                         |             | Exposes inputmode attribute for input.           |
+| [lang](#lang)                             | `lang`                            |           | `string`                                         |             | Defines the language of an element.              |
+| [max](#max)                              | `max`                             |           | `string`                                         | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [maxLength](#maxLength)                        | `maxLength`                       |           | `number`                                         | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
+| [min](#min)                              | `min`                             |           | `string`                                         | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [minLength](#minLength)                        | `minLength`                       |           | `number`                                         | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
+| [name](#name)                             | `name`                            |           | `string`                                         |             | Populates the `name` attribute on the input.     |
+| [nested](#nested)                           | `nested`                          |           | `boolean`                                        |             | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
+| [noValidate](#noValidate)                       | `noValidate`                      |           | `boolean`                                        | false       | If set, disables auto-validation on blur.        |
+| [onDark](#onDark)                           | `onDark`                          |           | `boolean`                                        | false       | Sets onDark styles on input.                     |
+| [pattern](#pattern)                          | `pattern`                         |           | `string`                                         |             | Specifies a regular expression the form control's value should match. |
+| [placeholder](#placeholder)                      | `placeholder`                     |           | `string`                                         |             | Define custom placeholder text.                  |
+| [readonly](#readonly)                         | `readonly`                        |           | `boolean`                                        |             | Makes the input read-only, but can be set programmatically. |
+| [required](#required)                         | `required`                        |           | `boolean`                                        | false       | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)                | `setCustomValidity`               |           | `string`                                         |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityBadInput](#setCustomValidityBadInput)        | `setCustomValidityBadInput`       |           | `string`                                         |             | Custom help text message to display when validity = `badInput`. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)     | `setCustomValidityCustomError`    |           | `string`                                         |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityForType](#setCustomValidityForType)         | `setCustomValidityForType`        |           | `string`                                         | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
+| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)   | `setCustomValidityRangeOverflow`  |           | `string`                                         |             | Custom help text message to display when validity = `rangeOverflow`. |
+| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow)  | `setCustomValidityRangeUnderflow` |           | `string`                                         |             | Custom help text message to display when validity = `rangeUnderflow`. |
+| [setCustomValidityTooLong](#setCustomValidityTooLong)         | `setCustomValidityTooLong`        |           | `string`                                         |             | Custom help text message to display when validity = `tooLong`. |
+| [setCustomValidityTooShort](#setCustomValidityTooShort)        | `setCustomValidityTooShort`       |           | `string`                                         |             | Custom help text message to display when validity = `tooShort`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing)    | `setCustomValidityValueMissing`   |           | `string`                                         |             | Custom help text message to display when validity = `valueMissing`. |
+| [simple](#simple)                           | `simple`                          |           | `boolean`                                        |             | Simple makes the input render without a border.  |
+| [spellcheck](#spellcheck)                       | `spellcheck`                      |           | `string`                                         |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
+| [type](#type)                             | `type`                            |           | `string`                                         |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`. |
+| [validateOnInput](#validateOnInput)                  | `validateOnInput`                 |           | `boolean`                                        |             | Sets validation mode to re-eval with each input. |
+| [validity](#validity)                         | `validity`                        |           | `string`                                         |             | Specifies the `validityState` this element is in. |
+| [value](#value)                            | `value`                           |           | `string`                                         |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
 
 ## Methods
 
@@ -74,7 +76,7 @@ Generate unique names for dependency components.
 
 | Name                      | Description                                      |
 |---------------------------|--------------------------------------------------|
-| `ariaLabel.clear`         | Sets aria-label on clear button for screenreader to read |
+| `ariaLabel.clear`         | Sets aria-label on clear button for screen reader to read |
 | `ariaLabel.password.hide` | Sets aria-label on password button to toggle off showing password |
 | `ariaLabel.password.show` | Sets aria-label on password button to toggle on showing password |
 | [displayValue](#displayValue)            | Allows custom HTML content to display in place of the value when the input is not focused. |

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

@@ -5040,7 +5040,7 @@ let AuroElement$2 = class AuroElement extends i$2 {
    * @returns {boolean} - Returns true if the element has focus.
    */
   get componentHasFocus() {
-    return this.matches(':focus');
+    return this.matches(':focus') || this.matches(':focus-within');
   }
 
   resetShapeClasses() {
@@ -5114,7 +5114,7 @@ let AuroElement$2 = class AuroElement extends i$2 {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read
  * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
  * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
@@ -5142,6 +5142,7 @@ class BaseInput extends AuroElement$2 {
     this.activeLabel = false;
     this.icon = false;
     this.disabled = false;
+    this.dvInputOnly = false;
     this.max = undefined;
     this.maxLength = undefined;
     this.min = undefined;
@@ -5235,6 +5236,14 @@ class BaseInput extends AuroElement$2 {
     return {
       ...super.properties,
 
+      /**
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
+       */
+      dvInputOnly: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * The value for the role attribute.
        */
@@ -8000,7 +8009,13 @@ class AuroInput extends BaseInput {
    * @private
    */
   get inputHidden() {
-    return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
+    return (
+      this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
+      (
+        (!this.value || this.value.length === 0) &&
+        !this.hasFocus &&
+        (!this.placeholder || this.placeholder === '')
+      );
   }
 
   /**
@@ -8020,7 +8035,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -8029,18 +8044,26 @@ class AuroInput extends BaseInput {
    * @returns {string} - The font class for the label.
    */
   get labelFontClass() {
-    const isHidden = this.inputHidden;
-
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
+      let typeSize = 'body-sm';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'accent-xl';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'accent-xl';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
-      return isHidden ? 'body-lg' : 'body-xs';
+      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return isHidden ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**
@@ -8050,7 +8073,17 @@ class AuroInput extends BaseInput {
    */
   get inputFontClass() {
     if (this.layout.startsWith('emphasized')) {
-      return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
+      let typeSize = 'accent-xl';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'body-sm';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'body-sm';
+      }
+
+      return typeSize;
     }
 
     if (this.layout === 'snowflake') {
@@ -8093,6 +8126,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -8165,7 +8205,7 @@ class AuroInput extends BaseInput {
     let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
 
     // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
-    if (nodes[0].tagName === 'SLOT') {
+    if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
       nodes = nodes[0].assignedNodes();
     }
 
@@ -8256,7 +8296,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${e(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>

package/components/input/demo/index.md

@@ -23,13 +23,12 @@ The `<auro-input>` element should be used in situations where users may:
   <!-- <auro-input layout="default" shape="rounded" size="xl" placeholder="Departure">
     <label slot="label">From</label>
   </auro-input> -->
-  <auro-input id="alpha" value="lax" layout="emphasized" shape="box" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
+  <auro-input dvInputOnly id="alpha" value="lax" layout="emphasized" shape="pill" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
     <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
     <span slot="displayValue">
       <div>
-        <div class="mainText">LAX</div>
         <div class="subText">Los Angeles</div>
       </div>
     </span>
@@ -57,10 +56,15 @@ The `<auro-input>` element should be used in situations where users may:
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
-  <auro-input id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
+  <auro-input dvInputOnly value="lax" id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
     <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
+    <span slot="displayValue">
+      <div>
+        <div class="subText">Los Angeles</div>
+      </div>
+    </span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>