@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.77 → 0.0.0-pr624.79

package/components/datepicker/dist/index.js

@@ -1258,7 +1258,7 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.accents .notification:not(.util_displayHidden){display:flex;align-items:center;justify-content:center}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host label{color:var(--ds-auro-datepicker-label-text-color)}:host .inputDivider{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host .error{color:var(--ds-auro-datepicker-error-icon-color)}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host(:not([ondark])[disabled]){--ds-auro-datepicker-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-datepicker-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -16091,6 +16091,7 @@ class AuroFloatingUI {
       this.element.bib.style.left = "0px";
       this.element.bib.style.width = '';
       this.element.bib.style.height = '';
+      this.element.style.contain = '';
 
       // reset the size that was mirroring `size` css-part
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -16115,6 +16116,7 @@ class AuroFloatingUI {
       this.element.bib.style.position = '';
       this.element.bib.removeAttribute('isfullscreen');
       this.element.isBibFullscreen = false;
+      this.element.style.contain = 'layout';
     }
 
     const isChanged = this.strategy && this.strategy !== value;
@@ -17729,6 +17731,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -18311,64 +18314,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -18480,7 +18425,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -18552,7 +18497,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${classMap(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -27887,6 +27832,9 @@ class AuroDatePicker extends AuroElement$1 {
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
 
+    /** @private */
+    this.handleClick = this.handleClick.bind(this);
+
     // Layout Config
     this.layout = 'classic';
     this.shape = 'classic';
@@ -28286,10 +28234,10 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   focus(focusInput = '') {
+    this.hasFocus = true;
     this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
   }
 
-
   /**
    * Converts valid time number to format used by wc-date-range API.
    * @private
@@ -28491,15 +28439,18 @@ class AuroDatePicker extends AuroElement$1 {
       this.hasFocus = true;
     });
 
-    this.addEventListener('focusout', (evt) => {
+    this.addEventListener('focusout', () => {
       this.hasFocus = false;
-      if (!this.noValidate && !evt.detail.expanded && this.touched) {
-        if (!this.contains(document.activeElement)) {
-          this.validation.validate(this.inputList[0]);
 
-          if (this.inputList[1] && this.inputList[1].touched) {
-            this.validation.validate(this.inputList[1]);
-          }
+      if (this.noValidate) {
+        return;
+      }
+
+      if (!this.contains(document.activeElement)) {
+        this.validation.validate(this.inputList[0]);
+
+        if (this.inputList[1]) {
+          this.validation.validate(this.inputList[1]);
         }
       }
     });
@@ -28751,8 +28702,8 @@ class AuroDatePicker extends AuroElement$1 {
         this.calendarRenderUtil.updateCentralDate(this, this.formattedValue);
       }
 
-      this.validate();
       this.setHasValue();
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -28908,6 +28859,39 @@ class AuroDatePicker extends AuroElement$1 {
     this.calendar.injectSlot(event.target.name, slot.cloneNode(true));
   }
 
+  /**
+   * Handles click events on the datepicker.
+   * @param {PointerEvent} event - The pointer event object.
+   * @private
+   * @returns {void}
+   */
+  handleClick(event) {
+
+    // Get the initial target of the click event
+    const [initTarget] = event.composedPath();
+
+    // Determine if the current layout requires special handling
+    const layoutRequiresHandling = ['snowflake'].includes(this.layout);
+
+    // Determine if the target is an input element
+    const targetIsInput = initTarget.tagName === 'INPUT';
+
+    if (layoutRequiresHandling && !targetIsInput) {
+
+      // Focus the first input
+      this.inputList[0].focus();
+    }
+  }
+
+  /**
+   * Set up click handling for the datepicker.
+   * @private
+   * @returns {void}
+   */
+  configureClickHandler() {
+    this.addEventListener('click', this.handleClick);
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-datepicker');
@@ -28916,6 +28900,7 @@ class AuroDatePicker extends AuroElement$1 {
     this.configureInput();
     this.configureCalendar();
     this.configureDatepicker();
+    this.configureClickHandler();
 
     window.addEventListener('resize', () => {
       this.handleReadOnly();
@@ -28926,11 +28911,6 @@ class AuroDatePicker extends AuroElement$1 {
     super.connectedCallback();
 
     this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
-
-    // setup focus/blur event listeners
-    this.addEventListener('focus', () => {
-      this.focus();
-    }, true);
   }
 
   // layout render methods
@@ -28975,9 +28955,9 @@ class AuroDatePicker extends AuroElement$1 {
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError
-            ? this.renderHtmlIconError()
-            : this.renderHtmlActionClear()
-          }
+        ? this.renderHtmlIconError()
+        : this.renderHtmlActionClear()
+      }
         </div>
       </div>
     `;
@@ -29022,9 +29002,9 @@ class AuroDatePicker extends AuroElement$1 {
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError
-            ? this.renderHtmlIconError()
-            : this.renderHtmlActionClear()
-          }
+        ? this.renderHtmlIconError()
+        : this.renderHtmlActionClear()
+      }
         </div>
       </div>
     `;
@@ -29074,9 +29054,9 @@ class AuroDatePicker extends AuroElement$1 {
         <div>
           <div class="displayValueText">
             ${dateValue && this.util.validDateStr(dateValue, this.format)
-              ? this.formatShortDate(dateValue)
-              : undefined
-            }
+        ? this.formatShortDate(dateValue)
+        : undefined
+      }
           </div>
         </div>
     `;
@@ -29118,13 +29098,13 @@ class AuroDatePicker extends AuroElement$1 {
           inputmode="${ifDefined(this.inputmode)}"
         >
           ${this.layout !== "classic"
-            ? html$1`
+        ? html$1`
               <span slot="displayValue">
                 ${this.renderDisplayTextDate(this.value)}
               </span>
             `
-            : undefined
-          }
+        : undefined
+      }
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29155,13 +29135,13 @@ class AuroDatePicker extends AuroElement$1 {
             ?disabled="${this.disabled}"
             part="input">
             ${this.layout !== "classic"
-              ? html$1`
+          ? html$1`
               <span slot="displayValue">
                 ${this.renderDisplayTextDate(this.valueEnd)}
               </span>
             `
-              : undefined
-            }
+          : undefined
+        }
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29201,7 +29181,6 @@ class AuroDatePicker extends AuroElement$1 {
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
-            slot="icon"
             >
           </${this.iconTag}>
         </${this.buttonTag}>
@@ -29258,21 +29237,21 @@ class AuroDatePicker extends AuroElement$1 {
   renderHtmlHelpText() {
     return html$1`
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
-      ? html$1`
+        ? html$1`
           <${this.helpTextTag} ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" part="helpText">
               <slot name="helpText"></slot>
             </p>
           </${this.helpTextTag}>
         `
-      : html$1`
+        : html$1`
           <${this.helpTextTag} error ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
               ${this.errorMessage}
             </p>
           </${this.helpTextTag}>
         `
-    }
+      }
     `;
   }
 

package/components/datepicker/dist/registered.js

@@ -1258,7 +1258,7 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.accents .notification:not(.util_displayHidden){display:flex;align-items:center;justify-content:center}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
 var colorCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host label{color:var(--ds-auro-datepicker-label-text-color)}:host .inputDivider{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host .error{color:var(--ds-auro-datepicker-error-icon-color)}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host(:not([ondark])[disabled]){--ds-auro-datepicker-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-datepicker-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -16091,6 +16091,7 @@ class AuroFloatingUI {
       this.element.bib.style.left = "0px";
       this.element.bib.style.width = '';
       this.element.bib.style.height = '';
+      this.element.style.contain = '';
 
       // reset the size that was mirroring `size` css-part
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -16115,6 +16116,7 @@ class AuroFloatingUI {
       this.element.bib.style.position = '';
       this.element.bib.removeAttribute('isfullscreen');
       this.element.isBibFullscreen = false;
+      this.element.style.contain = 'layout';
     }
 
     const isChanged = this.strategy && this.strategy !== value;
@@ -17729,6 +17731,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -18311,64 +18314,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -18480,7 +18425,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -18552,7 +18497,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${classMap(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -27887,6 +27832,9 @@ class AuroDatePicker extends AuroElement$1 {
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
 
+    /** @private */
+    this.handleClick = this.handleClick.bind(this);
+
     // Layout Config
     this.layout = 'classic';
     this.shape = 'classic';
@@ -28286,10 +28234,10 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   focus(focusInput = '') {
+    this.hasFocus = true;
     this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
   }
 
-
   /**
    * Converts valid time number to format used by wc-date-range API.
    * @private
@@ -28491,15 +28439,18 @@ class AuroDatePicker extends AuroElement$1 {
       this.hasFocus = true;
     });
 
-    this.addEventListener('focusout', (evt) => {
+    this.addEventListener('focusout', () => {
       this.hasFocus = false;
-      if (!this.noValidate && !evt.detail.expanded && this.touched) {
-        if (!this.contains(document.activeElement)) {
-          this.validation.validate(this.inputList[0]);
 
-          if (this.inputList[1] && this.inputList[1].touched) {
-            this.validation.validate(this.inputList[1]);
-          }
+      if (this.noValidate) {
+        return;
+      }
+
+      if (!this.contains(document.activeElement)) {
+        this.validation.validate(this.inputList[0]);
+
+        if (this.inputList[1]) {
+          this.validation.validate(this.inputList[1]);
         }
       }
     });
@@ -28751,8 +28702,8 @@ class AuroDatePicker extends AuroElement$1 {
         this.calendarRenderUtil.updateCentralDate(this, this.formattedValue);
       }
 
-      this.validate();
       this.setHasValue();
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -28908,6 +28859,39 @@ class AuroDatePicker extends AuroElement$1 {
     this.calendar.injectSlot(event.target.name, slot.cloneNode(true));
   }
 
+  /**
+   * Handles click events on the datepicker.
+   * @param {PointerEvent} event - The pointer event object.
+   * @private
+   * @returns {void}
+   */
+  handleClick(event) {
+
+    // Get the initial target of the click event
+    const [initTarget] = event.composedPath();
+
+    // Determine if the current layout requires special handling
+    const layoutRequiresHandling = ['snowflake'].includes(this.layout);
+
+    // Determine if the target is an input element
+    const targetIsInput = initTarget.tagName === 'INPUT';
+
+    if (layoutRequiresHandling && !targetIsInput) {
+
+      // Focus the first input
+      this.inputList[0].focus();
+    }
+  }
+
+  /**
+   * Set up click handling for the datepicker.
+   * @private
+   * @returns {void}
+   */
+  configureClickHandler() {
+    this.addEventListener('click', this.handleClick);
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-datepicker');
@@ -28916,6 +28900,7 @@ class AuroDatePicker extends AuroElement$1 {
     this.configureInput();
     this.configureCalendar();
     this.configureDatepicker();
+    this.configureClickHandler();
 
     window.addEventListener('resize', () => {
       this.handleReadOnly();
@@ -28926,11 +28911,6 @@ class AuroDatePicker extends AuroElement$1 {
     super.connectedCallback();
 
     this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
-
-    // setup focus/blur event listeners
-    this.addEventListener('focus', () => {
-      this.focus();
-    }, true);
   }
 
   // layout render methods
@@ -28975,9 +28955,9 @@ class AuroDatePicker extends AuroElement$1 {
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError
-            ? this.renderHtmlIconError()
-            : this.renderHtmlActionClear()
-          }
+        ? this.renderHtmlIconError()
+        : this.renderHtmlActionClear()
+      }
         </div>
       </div>
     `;
@@ -29022,9 +29002,9 @@ class AuroDatePicker extends AuroElement$1 {
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError
-            ? this.renderHtmlIconError()
-            : this.renderHtmlActionClear()
-          }
+        ? this.renderHtmlIconError()
+        : this.renderHtmlActionClear()
+      }
         </div>
       </div>
     `;
@@ -29074,9 +29054,9 @@ class AuroDatePicker extends AuroElement$1 {
         <div>
           <div class="displayValueText">
             ${dateValue && this.util.validDateStr(dateValue, this.format)
-              ? this.formatShortDate(dateValue)
-              : undefined
-            }
+        ? this.formatShortDate(dateValue)
+        : undefined
+      }
           </div>
         </div>
     `;
@@ -29118,13 +29098,13 @@ class AuroDatePicker extends AuroElement$1 {
           inputmode="${ifDefined(this.inputmode)}"
         >
           ${this.layout !== "classic"
-            ? html$1`
+        ? html$1`
               <span slot="displayValue">
                 ${this.renderDisplayTextDate(this.value)}
               </span>
             `
-            : undefined
-          }
+        : undefined
+      }
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29155,13 +29135,13 @@ class AuroDatePicker extends AuroElement$1 {
             ?disabled="${this.disabled}"
             part="input">
             ${this.layout !== "classic"
-              ? html$1`
+          ? html$1`
               <span slot="displayValue">
                 ${this.renderDisplayTextDate(this.valueEnd)}
               </span>
             `
-              : undefined
-            }
+          : undefined
+        }
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29201,7 +29181,6 @@ class AuroDatePicker extends AuroElement$1 {
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
-            slot="icon"
             >
           </${this.iconTag}>
         </${this.buttonTag}>
@@ -29258,21 +29237,21 @@ class AuroDatePicker extends AuroElement$1 {
   renderHtmlHelpText() {
     return html$1`
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
-      ? html$1`
+        ? html$1`
           <${this.helpTextTag} ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" part="helpText">
               <slot name="helpText"></slot>
             </p>
           </${this.helpTextTag}>
         `
-      : html$1`
+        : html$1`
           <${this.helpTextTag} error ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
               ${this.errorMessage}
             </p>
           </${this.helpTextTag}>
         `
-    }
+      }
     `;
   }