@aurodesignsystem/auro-formkit 2.1.0-beta.2 → 2.1.0-beta.4

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

@@ -725,7 +725,7 @@ class AuroDatepickerUtilities {
   validDateStr(date, format) {
     const dateStrLength = 10;
 
-    if (date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
+    if (format !== undefined && date !== undefined && date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
       return true;
     }
 
@@ -866,12 +866,21 @@ class AuroDatepickerUtilities {
    */
   getDateAsString(date) {
     const year = new Date(date).getFullYear();
-    const month = new Date(date).getMonth() + 1;
-    const day = new Date(date).getDate();
+    const month = this.formatTwoDigits(new Date(date).getMonth() + 1);
+    const day = this.formatTwoDigits(new Date(date).getDate());
 
-    const dateStr = `${month}/${day}/${year}`;
+    return `${month}/${day}/${year}`;
+  }
 
-    return dateStr;
+  /**
+   * Function to format a number to two digits.
+   * @private
+   * @param {Number} num - Number to format.
+   * @returns {String} Returns the number as a string.
+   */
+  formatTwoDigits(num) {
+    const singleDigitThreshold = 10;
+    return num < singleDigitThreshold ? `0${num}` : num;
   }
 
   /**
@@ -10571,10 +10580,23 @@ class CalendarUtilities {
       increment = -1; // eslint-disable-line no-magic-numbers
     }
 
-    // calculate the new central date
-    const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment);
-    // set the new central date to the first day of the month
-    elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    // Get new central date for calendar view
+    const {firstRenderedMonth, centralDate, datepicker} = elem;
+    const formattedDateStr = this.util.getDateAsString(centralDate, datepicker.format);
+    let newCentralDate = null;
+
+    if (this.util.validDateStr(formattedDateStr, datepicker.format)) {
+      // Use current date as base and adjust month by increment
+      newCentralDate = new Date(formattedDateStr).setMonth(new Date(formattedDateStr).getMonth() + increment);
+    } else {
+      // Fallback to first rendered month if central date invalid
+      newCentralDate = new Date(firstRenderedMonth).setMonth(new Date(firstRenderedMonth).getMonth() + increment);
+    }
+
+    // Update calendar central date
+    if (newCentralDate) {
+      elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    }
   }
 }
 
@@ -12303,9 +12325,12 @@ class AuroCalendar extends RangeDatepicker {
       // Determine which month to render first
       let dateMatches = undefined;
 
-      if (!this.isFullscreen && this.centralDate) {
+      if (!this.isFullscreen) {
+
+        const formattedDateStr = this.util.getDateAsString(new Date(this.centralDate), this.datepicker.format);
+
         // On Desktop start the calendar at the central date if it exists, then minDate and finally the current date.
-        if (this.centralDate) {
+        if (this.util.validDateStr(formattedDateStr, this.datepicker.format)) {
           dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.centralDate));
 
           if (!dateMatches) {
@@ -15126,7 +15151,7 @@ class AuroDropdownBib extends r$3 {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$1 = i$6`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$6`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$6`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -15390,6 +15415,7 @@ class AuroDropdown extends r$3 {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -15542,7 +15568,7 @@ class AuroDropdown extends r$3 {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -15572,6 +15598,15 @@ class AuroDropdown extends r$3 {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -15651,6 +15686,7 @@ class AuroDropdown extends r$3 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -15780,13 +15816,21 @@ class AuroDropdown extends r$3 {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
+
+    if (triggerSlot) {
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -15840,6 +15884,29 @@ class AuroDropdown extends r$3 {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u$2`
@@ -15854,7 +15921,7 @@ class AuroDropdown extends r$3 {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot

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

@@ -466,7 +466,7 @@ class AuroDatepickerUtilities {
   validDateStr(date, format) {
     const dateStrLength = 10;
 
-    if (date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
+    if (format !== undefined && date !== undefined && date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
       return true;
     }
 
@@ -607,12 +607,21 @@ class AuroDatepickerUtilities {
    */
   getDateAsString(date) {
     const year = new Date(date).getFullYear();
-    const month = new Date(date).getMonth() + 1;
-    const day = new Date(date).getDate();
+    const month = this.formatTwoDigits(new Date(date).getMonth() + 1);
+    const day = this.formatTwoDigits(new Date(date).getDate());
 
-    const dateStr = `${month}/${day}/${year}`;
+    return `${month}/${day}/${year}`;
+  }
 
-    return dateStr;
+  /**
+   * Function to format a number to two digits.
+   * @private
+   * @param {Number} num - Number to format.
+   * @returns {String} Returns the number as a string.
+   */
+  formatTwoDigits(num) {
+    const singleDigitThreshold = 10;
+    return num < singleDigitThreshold ? `0${num}` : num;
   }
 
   /**
@@ -10312,10 +10321,23 @@ class CalendarUtilities {
       increment = -1; // eslint-disable-line no-magic-numbers
     }
 
-    // calculate the new central date
-    const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment);
-    // set the new central date to the first day of the month
-    elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    // Get new central date for calendar view
+    const {firstRenderedMonth, centralDate, datepicker} = elem;
+    const formattedDateStr = this.util.getDateAsString(centralDate, datepicker.format);
+    let newCentralDate = null;
+
+    if (this.util.validDateStr(formattedDateStr, datepicker.format)) {
+      // Use current date as base and adjust month by increment
+      newCentralDate = new Date(formattedDateStr).setMonth(new Date(formattedDateStr).getMonth() + increment);
+    } else {
+      // Fallback to first rendered month if central date invalid
+      newCentralDate = new Date(firstRenderedMonth).setMonth(new Date(firstRenderedMonth).getMonth() + increment);
+    }
+
+    // Update calendar central date
+    if (newCentralDate) {
+      elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    }
   }
 }
 
@@ -12044,9 +12066,12 @@ class AuroCalendar extends RangeDatepicker {
       // Determine which month to render first
       let dateMatches = undefined;
 
-      if (!this.isFullscreen && this.centralDate) {
+      if (!this.isFullscreen) {
+
+        const formattedDateStr = this.util.getDateAsString(new Date(this.centralDate), this.datepicker.format);
+
         // On Desktop start the calendar at the central date if it exists, then minDate and finally the current date.
-        if (this.centralDate) {
+        if (this.util.validDateStr(formattedDateStr, this.datepicker.format)) {
           dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.centralDate));
 
           if (!dateMatches) {
@@ -14867,7 +14892,7 @@ class AuroDropdownBib extends r$3 {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$1 = i$6`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$6`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$6`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -15131,6 +15156,7 @@ class AuroDropdown extends r$3 {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -15283,7 +15309,7 @@ class AuroDropdown extends r$3 {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -15313,6 +15339,15 @@ class AuroDropdown extends r$3 {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -15392,6 +15427,7 @@ class AuroDropdown extends r$3 {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -15521,13 +15557,21 @@ class AuroDropdown extends r$3 {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
+
+    if (triggerSlot) {
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -15581,6 +15625,29 @@ class AuroDropdown extends r$3 {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u$2`
@@ -15595,7 +15662,7 @@ class AuroDropdown extends r$3 {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot

package/components/datepicker/demo/readme.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.1/auro-datepicker/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.3/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/dist/index.js

@@ -440,7 +440,7 @@ class AuroDatepickerUtilities {
   validDateStr(date, format) {
     const dateStrLength = 10;
 
-    if (date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
+    if (format !== undefined && date !== undefined && date.length === dateStrLength && Date.parse(this.toNorthAmericanFormat(date, format))) {
       return true;
     }
 
@@ -581,12 +581,21 @@ class AuroDatepickerUtilities {
    */
   getDateAsString(date) {
     const year = new Date(date).getFullYear();
-    const month = new Date(date).getMonth() + 1;
-    const day = new Date(date).getDate();
+    const month = this.formatTwoDigits(new Date(date).getMonth() + 1);
+    const day = this.formatTwoDigits(new Date(date).getDate());
 
-    const dateStr = `${month}/${day}/${year}`;
+    return `${month}/${day}/${year}`;
+  }
 
-    return dateStr;
+  /**
+   * Function to format a number to two digits.
+   * @private
+   * @param {Number} num - Number to format.
+   * @returns {String} Returns the number as a string.
+   */
+  formatTwoDigits(num) {
+    const singleDigitThreshold = 10;
+    return num < singleDigitThreshold ? `0${num}` : num;
   }
 
   /**
@@ -10261,10 +10270,23 @@ class CalendarUtilities {
       increment = -1; // eslint-disable-line no-magic-numbers
     }
 
-    // calculate the new central date
-    const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment);
-    // set the new central date to the first day of the month
-    elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    // Get new central date for calendar view
+    const {firstRenderedMonth, centralDate, datepicker} = elem;
+    const formattedDateStr = this.util.getDateAsString(centralDate, datepicker.format);
+    let newCentralDate = null;
+
+    if (this.util.validDateStr(formattedDateStr, datepicker.format)) {
+      // Use current date as base and adjust month by increment
+      newCentralDate = new Date(formattedDateStr).setMonth(new Date(formattedDateStr).getMonth() + increment);
+    } else {
+      // Fallback to first rendered month if central date invalid
+      newCentralDate = new Date(firstRenderedMonth).setMonth(new Date(firstRenderedMonth).getMonth() + increment);
+    }
+
+    // Update calendar central date
+    if (newCentralDate) {
+      elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+    }
   }
 }
 
@@ -11987,9 +12009,12 @@ class AuroCalendar extends RangeDatepicker {
       // Determine which month to render first
       let dateMatches = undefined;
 
-      if (!this.isFullscreen && this.centralDate) {
+      if (!this.isFullscreen) {
+
+        const formattedDateStr = this.util.getDateAsString(new Date(this.centralDate), this.datepicker.format);
+
         // On Desktop start the calendar at the central date if it exists, then minDate and finally the current date.
-        if (this.centralDate) {
+        if (this.util.validDateStr(formattedDateStr, this.datepicker.format)) {
           dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.centralDate));
 
           if (!dateMatches) {
@@ -14810,7 +14835,7 @@ class AuroDropdownBib extends LitElement {
 
 var dropdownVersion$1 = '3.0.0';
 
-var styleCss$1$1 = css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -15074,6 +15099,7 @@ class AuroDropdown extends LitElement {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.labeled = true;
 
     /**
      * @private
@@ -15226,7 +15252,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * If true, the dropdown bib is taking the fullscreen when it's open
+       * If true, the dropdown bib is taking the fullscreen when it's open.
        */
       isBibFullscreen: {
         type: Boolean,
@@ -15256,6 +15282,15 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
 
+      /**
+       * Defines if there is a label preset.
+       * @private
+       */
+      labeled: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -15335,6 +15370,7 @@ class AuroDropdown extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.floater.disconnect();
   }
 
   updated(changedProperties) {
@@ -15464,13 +15500,21 @@ class AuroDropdown extends LitElement {
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
-    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
+
+    if (triggerSlot) {
 
-    triggerContentNodes.forEach((node) => {
-      if (!this.triggerContentFocusable) {
-        this.triggerContentFocusable = this.containsFocusableElement(node);
+      const triggerContentNodes = triggerSlot.assignedNodes();
+
+      if (triggerContentNodes) {
+
+        triggerContentNodes.forEach((node) => {
+          if (!this.triggerContentFocusable) {
+            this.triggerContentFocusable = this.containsFocusableElement(node);
+          }
+        });
       }
-    });
+    }
 
     const trigger = this.shadowRoot.querySelector('#trigger');
 
@@ -15524,6 +15568,29 @@ class AuroDropdown extends LitElement {
     }
   }
 
+  /**
+   * @private
+   * @method handleLabelSlotChange
+   * @param {event} event - The event object representing the slot change.
+   * @description Handles the slot change event for the label slot.
+   */
+  handleLabelSlotChange (event) {
+
+    // Get the nodes from the event
+    const nodes = event.target.assignedNodes();
+
+    // Guard clause for no nodes
+    if (!nodes) {
+      return;
+    }
+
+    // Convert the nodes to a measurable array so we can get the length
+    const nodesArr = Array.from(nodes);
+
+    // If the nodes array has a length, the dropdown is labeled
+    this.labeled = nodesArr.length > 0;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`
@@ -15538,7 +15605,7 @@ class AuroDropdown extends LitElement {
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
+              <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
             </label>
             <div class="triggerContent">
               <slot