@aurodesignsystem/auro-formkit 5.1.3 → 5.1.4

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

@@ -6532,7 +6532,7 @@ let AuroElement$3 = 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() {
@@ -7317,8 +7317,13 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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) {
@@ -9525,7 +9530,7 @@ 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() {

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

@@ -6532,7 +6532,7 @@ let AuroElement$3 = 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() {
@@ -7317,8 +7317,13 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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) {
@@ -9525,7 +9530,7 @@ 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() {

package/components/counter/dist/index.js

@@ -6485,7 +6485,7 @@ let AuroElement$3 = 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() {
@@ -7270,8 +7270,13 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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) {
@@ -9478,7 +9483,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() {

package/components/counter/dist/registered.js

@@ -6485,7 +6485,7 @@ let AuroElement$3 = 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() {
@@ -7270,8 +7270,13 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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) {
@@ -9478,7 +9483,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() {

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

@@ -17953,7 +17953,7 @@ let AuroElement$4 = 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() {
@@ -18738,8 +18738,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) {
@@ -23813,7 +23818,7 @@ let AuroElement$2 = 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() {
@@ -23887,7 +23892,7 @@ let AuroElement$2 = class AuroElement extends i {
  * @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.
@@ -23915,6 +23920,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;
@@ -24008,6 +24014,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.
        */
@@ -26773,7 +26787,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 === '')
+      );
   }
 
   /**
@@ -26793,7 +26813,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -26802,18 +26822,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';
   }
 
   /**
@@ -26823,7 +26851,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') {
@@ -26866,6 +26904,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -26938,7 +26983,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();
     }
 
@@ -27029,7 +27074,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${e$2(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${e$2(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>
@@ -27550,7 +27595,7 @@ let AuroElement$1 = 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() {

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

@@ -17694,7 +17694,7 @@ let AuroElement$4 = 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() {
@@ -18479,8 +18479,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) {
@@ -23554,7 +23559,7 @@ let AuroElement$2 = 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() {
@@ -23628,7 +23633,7 @@ let AuroElement$2 = class AuroElement extends i {
  * @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.
@@ -23656,6 +23661,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;
@@ -23749,6 +23755,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.
        */
@@ -26514,7 +26528,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 === '')
+      );
   }
 
   /**
@@ -26534,7 +26554,7 @@ class AuroInput extends BaseInput {
    * @private
    */
   get labelHidden() {
-    return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
+    return this.hasDisplayValueContent && !this.dvInputOnly && !this.hasFocus && this.hasValue;
   }
 
   /**
@@ -26543,18 +26563,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';
   }
 
   /**
@@ -26564,7 +26592,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') {
@@ -26607,6 +26645,13 @@ class AuroInput extends BaseInput {
     };
   }
 
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      [this.inputFontClass]: true,
+    };
+  }
+
   /**
    * Returns classmap configuration for html5 inputs in each layout.
    * @private
@@ -26679,7 +26724,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();
     }
 
@@ -26770,7 +26815,7 @@ class AuroInput extends BaseInput {
         type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
       />
       <div class="${e$2(displayValueClasses)}" aria-hidden="true" part="displayValue">
-        <div class="displayValueWrapper">
+        <div class="${e$2(this.commonDisplayValueWrapperClasses)}">
           <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
         </div>
       </div>
@@ -27291,7 +27336,7 @@ let AuroElement$1 = 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() {

package/components/datepicker/dist/index.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() {