@aurodesignsystem/auro-formkit 2.1.0-beta.1 → 2.1.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+# [2.1.0-beta.3](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.1.0-beta.2...v2.1.0-beta.3) (2025-03-21)
+
+
+### Bug Fixes
+
+* add centralDate is valid date checks ([1e24470](https://github.com/AlaskaAirlines/auro-formkit/commit/1e244700ffb693c1770779ffe2ba77ae84c89fd1))
+
+# [2.1.0-beta.2](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.1.0-beta.1...v2.1.0-beta.2) (2025-03-20)
+
+
+### Bug Fixes
+
+* correct variable for default date format [#441](https://github.com/AlaskaAirlines/auro-formkit/issues/441) ([70d895a](https://github.com/AlaskaAirlines/auro-formkit/commit/70d895abd16828db7dd1099320a13b695f263965))
+
 # [2.1.0-beta.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.3-beta.1...v2.1.0-beta.1) (2025-03-19)
 
 

package/components/checkbox/README.md

@@ -106,7 +106,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.0.3-beta.1/auro-checkbox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/readme.md

@@ -106,7 +106,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.0.3-beta.1/auro-checkbox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/README.md

@@ -111,7 +111,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.0.3-beta.1/auro-combobox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -7879,7 +7879,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

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

@@ -7737,7 +7737,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/combobox/demo/readme.md

@@ -111,7 +111,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.0.3-beta.1/auro-combobox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/dist/index.js

@@ -7655,7 +7655,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/combobox/dist/registered.js

@@ -7655,7 +7655,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/counter/README.md

@@ -110,7 +110,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.0.3-beta.1/auro-counter/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/counter/demo/readme.md

@@ -110,7 +110,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.0.3-beta.1/auro-counter/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/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.0.3-beta.1/auro-datepicker/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/demo/api.md

@@ -286,6 +286,10 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### centralDate
+
+The `centralDate` attribute can be used to force the calendar to navigate to a specific month. WARNING: Do not set the `centralDate` attribute on blur.
+
 #### maxDate
 
 To give a higher limit you can bind a date to the `maxDate` attribute. It is recommended to use the `setCustomValidityRangeOverflow` attribute to define an error message to display when validation fails the maximum date restriction.

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) {
@@ -19713,7 +19738,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

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) {
@@ -19454,7 +19479,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

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.0.3-beta.1/auro-datepicker/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/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) {
@@ -19384,7 +19409,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/datepicker/dist/registered.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) {
@@ -19384,7 +19409,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/datepicker/dist/utilities.d.ts

@@ -51,6 +51,13 @@ export class AuroDatepickerUtilities {
      * @returns {Object} Returns the date as a string.
      */
     private getDateAsString;
+    /**
+     * Function to format a number to two digits.
+     * @private
+     * @param {Number} num - Number to format.
+     * @returns {String} Returns the number as a string.
+     */
+    private formatTwoDigits;
     /**
      * Function to generate checkmark svg.
      * @private

package/components/dropdown/README.md

@@ -107,7 +107,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.0.3-beta.1/auro-dropdown/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/readme.md

@@ -107,7 +107,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.0.3-beta.1/auro-dropdown/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/README.md

@@ -109,7 +109,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.0.3-beta.1/auro-form/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/readme.md

@@ -109,7 +109,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.0.3-beta.1/auro-form/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/README.md

@@ -99,7 +99,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.0.3-beta.1/auro-input/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -3944,7 +3944,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

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

@@ -3882,7 +3882,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/input/demo/readme.md

@@ -99,7 +99,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.0.3-beta.1/auro-input/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/dist/index.js

@@ -3806,7 +3806,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/input/dist/registered.js

@@ -3806,7 +3806,7 @@ class AuroInputUtilities {
 
         return {
           mask: Date,
-          pattern: format,
+          pattern: dateFormat,
           blocks,
           format(date) {
             if (!date) {

package/components/menu/README.md

@@ -110,7 +110,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.0.3-beta.1/auro-menu/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/readme.md

@@ -110,7 +110,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.0.3-beta.1/auro-menu/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/README.md

@@ -100,7 +100,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.0.3-beta.1/auro-radio/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/readme.md

@@ -100,7 +100,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.0.3-beta.1/auro-radio/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/README.md

@@ -110,7 +110,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.0.3-beta.1/auro-select/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/demo/readme.md

@@ -110,7 +110,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.0.3-beta.1/auro-select/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.2/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.3",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "lit": "^3.2.1",
-    "@lit/reactive-element": "^2.0.4"
+    "@lit/reactive-element": "^2.0.4",
+    "@aurodesignsystem/auro-library": "^3.0.13"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "*"
   },
   "devDependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.13",
     "@aurodesignsystem/eslint-config": "^1.3.3",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",