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

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

@@ -1134,8 +1134,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -1126,8 +1126,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/checkbox/dist/index.js

@@ -1079,8 +1079,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/checkbox/dist/registered.js

@@ -1079,8 +1079,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/combobox/demo/api.md

@@ -162,12 +162,12 @@
 
 ### Behavior
 
-There are two behaviors available for the combo box: suggestion and filter.
+There are two behaviors available for the combobox: suggestion and filter.
 The default behavior is "suggestion".
 
 #### Suggestion
 
-With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input
+With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->
@@ -509,7 +509,7 @@ export async function dynamicMenuExample() {
 
 ### Persistent Input
 
-The `persistInput` attribute allows you to set the combo box to persist the value of the input regardless of the current value set for the combo box.
+The `persistInput` attribute allows you to set the combobox to persist the value of the input regardless of the current value set for the combobox.
 
 A persistent input is typically used in conjunction with display values to show the actual value of the selected option to the user when the input is not focused.
 
@@ -525,8 +525,8 @@ _*Note:*_ When using `persistInput` with the `required` attribute, you must also
     persistInput
     setCustomValidityValueMissing="Please select an option from the list."
     >
-    <span slot="bib.fullscreen.headline">Persistant Input</span>
-    <span slot="label">Persistant Input</span>
+    <span slot="bib.fullscreen.headline">Persistent Input</span>
+    <span slot="label">Persistent Input</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">
         Apples
@@ -563,8 +563,8 @@ _*Note:*_ When using `persistInput` with the `required` attribute, you must also
   persistInput
   setCustomValidityValueMissing="Please select an option from the list."
   >
-  <span slot="bib.fullscreen.headline">Persistant Input</span>
-  <span slot="label">Persistant Input</span>
+  <span slot="bib.fullscreen.headline">Persistent Input</span>
+  <span slot="label">Persistent Input</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">
       Apples

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

@@ -1000,8 +1000,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -10441,8 +10440,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -17295,7 +17293,7 @@ class AuroCombobox extends AuroElement$1 {
   configureInput() {
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the combobox.
      */
     this.addEventListener('focusout', () => {
       if (!this.componentHasFocus) {

package/components/combobox/demo/index.md

@@ -206,12 +206,12 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ### Behavior
 
-There are two behaviors available for the combo box: suggestion and filter.
+There are two behaviors available for the combobox: suggestion and filter.
 The default behavior is "suggestion".
 
 #### Suggestion
 
-With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input
+With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->

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

@@ -872,8 +872,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -10313,8 +10312,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -17167,7 +17165,7 @@ class AuroCombobox extends AuroElement$1 {
   configureInput() {
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the combobox.
      */
     this.addEventListener('focusout', () => {
       if (!this.componentHasFocus) {

package/components/combobox/dist/index.js

@@ -810,8 +810,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -10220,8 +10219,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -17074,7 +17072,7 @@ class AuroCombobox extends AuroElement {
   configureInput() {
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the combobox.
      */
     this.addEventListener('focusout', () => {
       if (!this.componentHasFocus) {

package/components/combobox/dist/registered.js

@@ -810,8 +810,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -10220,8 +10219,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -17074,7 +17072,7 @@ class AuroCombobox extends AuroElement {
   configureInput() {
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the combobox.
      */
     this.addEventListener('focusout', () => {
       if (!this.componentHasFocus) {

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

@@ -2364,8 +2364,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -2364,8 +2364,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/counter/dist/index.js

@@ -2318,8 +2318,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/counter/dist/registered.js

@@ -2318,8 +2318,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -1049,8 +1049,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -14348,15 +14347,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -23840,8 +23830,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -29194,21 +29183,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -29367,13 +29346,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29560,9 +29536,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -30185,7 +30158,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

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

@@ -790,8 +790,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -14089,15 +14088,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -23581,8 +23571,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -28935,21 +28924,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -29108,13 +29087,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29301,9 +29277,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29926,7 +29899,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/dist/auro-calendar.d.ts

@@ -62,14 +62,6 @@ export class AuroCalendar extends RangeDatepicker {
         dropdown: {
             type: ObjectConstructor;
         };
-        /**
-         * Mobile breakpoint for responsive design.
-         * @private
-         */
-        mobileBreakpoint: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
         /**
          * @private
          */

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

@@ -541,7 +541,6 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private handleReadOnly;
-    mobileBreakpoint: number;
     /**
      * Keep the datepicker in sync with the calendar's central date.
      * @private

package/components/datepicker/dist/index.js

@@ -771,8 +771,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -14039,15 +14038,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -23506,8 +23496,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -28860,21 +28849,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -29033,13 +29012,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29226,9 +29202,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29851,7 +29824,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/dist/registered.js

@@ -771,8 +771,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -14039,15 +14038,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -23506,8 +23496,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
@@ -28860,21 +28849,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -29033,13 +29012,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29226,9 +29202,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29851,7 +29824,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

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

@@ -4907,8 +4907,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -4832,8 +4832,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/input/dist/index.js

@@ -4756,8 +4756,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/input/dist/registered.js

@@ -4756,8 +4756,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -1140,8 +1140,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -1115,8 +1115,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/radio/dist/index.js

@@ -1068,8 +1068,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/radio/dist/registered.js

@@ -1068,8 +1068,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -1009,8 +1009,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

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

@@ -917,8 +917,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/select/dist/index.js

@@ -878,8 +878,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/components/select/dist/registered.js

@@ -878,8 +878,7 @@ class AuroFormValidation {
       // State-based checks
       (
         // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+        !elem.componentHasFocus &&
 
         // And element has been touched or is untouched but has a value
         ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )

package/package.json

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