@aurodesignsystem/auro-formkit 2.0.0-beta.21 → 2.0.0-beta.22

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

@@ -17979,6 +17979,28 @@ class AuroDatePicker extends r$7 {
     AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDatePicker);
   }
 
+  /**
+   * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+   * @returns {string[]}
+   */
+  get values() {
+    // If range, and both populated, return both values in an array
+    // - NOTE: both are required here, so we don't have something like `['10/22/25', undefined]`
+    if (this.range && this.value && this.valueEnd) {
+      return [
+        this.value,
+        this.valueEnd
+      ];
+    }
+
+    // This if block catches instances where `value` is present, no matter if valueEnd is selected yet
+    if (this.value) {
+      return [this.value];
+    }
+
+    return [];
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private

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

@@ -208,6 +208,11 @@ export class AuroDatePicker extends LitElement {
      * @private
      */
     private inputTag;
+    /**
+     * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+     * @returns {string[]}
+     */
+    get values(): string[];
     /**
      * Force the calendar view to the focus date when it changes.
      * @private

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

@@ -1 +1 @@
-{"version":3,"file":"auro-datepicker.d.ts","sourceRoot":"","sources":["../src/auro-datepicker.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH;IA0FE;QAGI;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;MAKN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnQC;;OAEG;IACH,aAAyC;IAEzC;;OAEG;IACH,2BAAuD;IASvD,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAClB,oBAAuB;IACvB,cAAyB;IACzB,WAAsB;IACtB,cAAyB;IACzB,uBAAkC;IAClC,qBAAgC;IAChC,uBAAmC;IACnC,qBAaC;IAED;;OAEG;IACH,aAA4B;IAE5B;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,8CAAkD;IAOlD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,iBAA6E;IAqL/E;;;;OAIG;IACH,8BAMC;IAED;;;;OAIG;IACH,6BAEC;IAED;;;;OAIG;IACH,2BAFa,IAAI,CAIhB;IAGD;;;;;OAKG;IACH,6BAEC;IAED;;;;;OAKG;IACH,4BAMC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;;OAKG;IACH,yBAiBC;IAED;;;;OAIG;IACH,gCAEC;IAED;;;;OAIG;IACH,gCAQC;IAED;;;;;OAKG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BA0BC;IAzBC,cAA4E;IA2B9E;;;;OAIG;IACH,uBAsCC;IArCC,kBAAkE;IAElE,iBAAgF;IAyB1E,kBAAsC;IAY9C;;;;OAIG;IACH,0BA2BC;IA1BC,kBAA8D;IA4BhE;;;;OAIG;IACH,4BAwDC;IAED;;;;OAIG;IACH,uBAWC;IAED;;;;;OAKG;IACH,wCAMC;IAED;;;;;OAKG;IACH,wBAwBC;IAvBC,yBAA2B;IAyB7B;;;;OAIG;IACH,wBAEC;IAED;;;OAGG;IACH,SAFa,IAAI,CAQhB;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCAsLC;IAED;;;;;;;OAOG;IACH,yBAGC;IAED,qBAYC;IAGD,4CAkFC;CACF;2BAv/B0B,KAAK"}
+{"version":3,"file":"auro-datepicker.d.ts","sourceRoot":"","sources":["../src/auro-datepicker.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH;IA0FE;QAGI;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;MAKN;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnQC;;OAEG;IACH,aAAyC;IAEzC;;OAEG;IACH,2BAAuD;IASvD,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAClB,oBAAuB;IACvB,cAAyB;IACzB,WAAsB;IACtB,cAAyB;IACzB,uBAAkC;IAClC,qBAAgC;IAChC,uBAAmC;IACnC,qBAaC;IAED;;OAEG;IACH,aAA4B;IAE5B;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,8CAAkD;IAOlD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,iBAA6E;IAqL/E;;;OAGG;IACH,cAFa,MAAM,EAAE,CAkBpB;IAED;;;;OAIG;IACH,8BAMC;IAED;;;;OAIG;IACH,6BAEC;IAED;;;;OAIG;IACH,2BAFa,IAAI,CAIhB;IAGD;;;;;OAKG;IACH,6BAEC;IAED;;;;;OAKG;IACH,4BAMC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;;OAKG;IACH,yBAiBC;IAED;;;;OAIG;IACH,gCAEC;IAED;;;;OAIG;IACH,gCAQC;IAED;;;;;OAKG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BA0BC;IAzBC,cAA4E;IA2B9E;;;;OAIG;IACH,uBAsCC;IArCC,kBAAkE;IAElE,iBAAgF;IAyB1E,kBAAsC;IAY9C;;;;OAIG;IACH,0BA2BC;IA1BC,kBAA8D;IA4BhE;;;;OAIG;IACH,4BAwDC;IAED;;;;OAIG;IACH,uBAWC;IAED;;;;;OAKG;IACH,wCAMC;IAED;;;;;OAKG;IACH,wBAwBC;IAvBC,yBAA2B;IAyB7B;;;;OAIG;IACH,wBAEC;IAED;;;OAGG;IACH,SAFa,IAAI,CAQhB;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCAsLC;IAED;;;;;;;OAOG;IACH,yBAGC;IAED,qBAYC;IAGD,4CAkFC;CACF;2BA7gC0B,KAAK"}

package/components/datepicker/dist/index.js

@@ -17979,6 +17979,28 @@ class AuroDatePicker extends r$7 {
     AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDatePicker);
   }
 
+  /**
+   * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+   * @returns {string[]}
+   */
+  get values() {
+    // If range, and both populated, return both values in an array
+    // - NOTE: both are required here, so we don't have something like `['10/22/25', undefined]`
+    if (this.range && this.value && this.valueEnd) {
+      return [
+        this.value,
+        this.valueEnd
+      ];
+    }
+
+    // This if block catches instances where `value` is present, no matter if valueEnd is selected yet
+    if (this.value) {
+      return [this.value];
+    }
+
+    return [];
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private

package/components/datepicker/src/auro-datepicker.js

@@ -319,6 +319,28 @@ export class AuroDatePicker extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatePicker);
   }
 
+  /**
+   * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+   * @returns {string[]}
+   */
+  get values() {
+    // If range, and both populated, return both values in an array
+    // - NOTE: both are required here, so we don't have something like `['10/22/25', undefined]`
+    if (this.range && this.value && this.valueEnd) {
+      return [
+        this.value,
+        this.valueEnd
+      ];
+    }
+
+    // This if block catches instances where `value` is present, no matter if valueEnd is selected yet
+    if (this.value) {
+      return [this.value];
+    }
+
+    return [];
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 849ms
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 869ms
+created ./demo/ in 857ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 890ms
+created ./demo/ in 946ms
 
 > @aurodesignsystem/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

package/components/dropdown/.turbo/turbo-bundler.log

@@ -7,7 +7,7 @@
 created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 989ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 755ms
+created ./demo/ in 830ms

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.20/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.21/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/.turbo/turbo-build.log

@@ -75,7 +75,7 @@ Run in verbose mode to see all warnings.
 created ./demo/ in 75ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 63ms
+created ./demo/ in 67ms
 
 > @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 524ms
+created dist in 797ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 262ms
+created ./demo/ in 351ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 262ms
+created ./demo/ in 360ms

package/components/form/README.md

@@ -98,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.20/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.21/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

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

@@ -168,15 +168,26 @@ class AuroForm extends r {
     ];
   }
 
+  /**
+   * Compare tag name with element to identify it (for API purposes).
+   * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+   * @param {HTMLElement} element - The actual HTML element to compare.
+   * @returns {boolean}
+   * @private
+   */
+  _isElementTag(elementTag, element) {
+    return element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase());
+  }
+
   /**
    * Shared code for determining if an element is something we care about (submit, form element, etc.).
    * @param {string[]} collection - The array to use for tag name search.
    * @param {HTMLElement} element - The element to compare against the master list.
-   * @returns boolean
+   * @returns {boolean}
    * @private
    */
   _isInElementCollection(collection, element) {
-    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+    return collection.some((elementTag) => this._isElementTag(elementTag, element));
   }
 
   /**
@@ -426,8 +437,16 @@ class AuroForm extends r {
         return;
       }
 
-      this.formState[targetName].value = event.target.value;
-      this.requestUpdate('formState');
+      // Check special input types and handle their edge cases
+      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+        this.formState[targetName].value = event.target.values;
+
+        this.requestUpdate('formState');
+      } else {
+        // "Normal" input value handling, just assign the value
+        this.formState[targetName].value = event.target.value;
+        this.requestUpdate('formState');
+      }
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {

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

@@ -168,15 +168,26 @@ class AuroForm extends r {
     ];
   }
 
+  /**
+   * Compare tag name with element to identify it (for API purposes).
+   * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+   * @param {HTMLElement} element - The actual HTML element to compare.
+   * @returns {boolean}
+   * @private
+   */
+  _isElementTag(elementTag, element) {
+    return element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase());
+  }
+
   /**
    * Shared code for determining if an element is something we care about (submit, form element, etc.).
    * @param {string[]} collection - The array to use for tag name search.
    * @param {HTMLElement} element - The element to compare against the master list.
-   * @returns boolean
+   * @returns {boolean}
    * @private
    */
   _isInElementCollection(collection, element) {
-    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+    return collection.some((elementTag) => this._isElementTag(elementTag, element));
   }
 
   /**
@@ -426,8 +437,16 @@ class AuroForm extends r {
         return;
       }
 
-      this.formState[targetName].value = event.target.value;
-      this.requestUpdate('formState');
+      // Check special input types and handle their edge cases
+      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+        this.formState[targetName].value = event.target.values;
+
+        this.requestUpdate('formState');
+      } else {
+        // "Normal" input value handling, just assign the value
+        this.formState[targetName].value = event.target.value;
+        this.requestUpdate('formState');
+      }
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {

package/components/form/demo/working.html

@@ -80,6 +80,15 @@
       </auro-datepicker>
     </div>
 
+    <div class="datepickerBlock">
+      <h4>Pick a date range</h4>
+      <auro-datepicker id="date-range" name="dateRange" required range>
+        <span slot="fromLabel">Start</span>
+        <span slot="toLabel">End</span>
+        <span slot="mobileDateLabel">Choose a range</span>
+      </auro-datepicker>
+    </div>
+
     <div class="submitBlock">
       <auro-button type="reset">Reset</auro-button>
       <auro-button type="submit">Submit</auro-button>

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

@@ -69,11 +69,19 @@ export class AuroForm extends LitElement {
      * ```
      */
     submit(): void;
+    /**
+     * Compare tag name with element to identify it (for API purposes).
+     * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+     * @param {HTMLElement} element - The actual HTML element to compare.
+     * @returns {boolean}
+     * @private
+     */
+    private _isElementTag;
     /**
      * Shared code for determining if an element is something we care about (submit, form element, etc.).
      * @param {string[]} collection - The array to use for tag name search.
      * @param {HTMLElement} element - The element to compare against the master list.
-     * @returns boolean
+     * @returns {boolean}
      * @private
      */
     private _isInElementCollection;

package/components/form/dist/auro-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAsBD,yCAKC;IAWD,+CAEC;IAoMD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApRC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IAgN1B,cAcC;IAED;;;;;;OAMG;IACH,eAmBC;IAxOD;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAI/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;OAEG;IACH,wBAqCC;IA0DD,4CAyBC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WA/Wa,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}
+{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IAoMD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA/RC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA2N1B,cAcC;IAED;;;;;;OAMG;IACH,eAmBC;IAnPD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAI/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;OAEG;IACH,wBAqCC;IA0DD,4CAiCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlYa,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}

package/components/form/dist/index.js

@@ -168,15 +168,26 @@ class AuroForm extends r {
     ];
   }
 
+  /**
+   * Compare tag name with element to identify it (for API purposes).
+   * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+   * @param {HTMLElement} element - The actual HTML element to compare.
+   * @returns {boolean}
+   * @private
+   */
+  _isElementTag(elementTag, element) {
+    return element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase());
+  }
+
   /**
    * Shared code for determining if an element is something we care about (submit, form element, etc.).
    * @param {string[]} collection - The array to use for tag name search.
    * @param {HTMLElement} element - The element to compare against the master list.
-   * @returns boolean
+   * @returns {boolean}
    * @private
    */
   _isInElementCollection(collection, element) {
-    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+    return collection.some((elementTag) => this._isElementTag(elementTag, element));
   }
 
   /**
@@ -426,8 +437,16 @@ class AuroForm extends r {
         return;
       }
 
-      this.formState[targetName].value = event.target.value;
-      this.requestUpdate('formState');
+      // Check special input types and handle their edge cases
+      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+        this.formState[targetName].value = event.target.values;
+
+        this.requestUpdate('formState');
+      } else {
+        // "Normal" input value handling, just assign the value
+        this.formState[targetName].value = event.target.value;
+        this.requestUpdate('formState');
+      }
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {

package/components/form/src/auro-form.js

@@ -81,15 +81,26 @@ export class AuroForm extends LitElement {
     ];
   }
 
+  /**
+   * Compare tag name with element to identify it (for API purposes).
+   * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+   * @param {HTMLElement} element - The actual HTML element to compare.
+   * @returns {boolean}
+   * @private
+   */
+  _isElementTag(elementTag, element) {
+    return element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase());
+  }
+
   /**
    * Shared code for determining if an element is something we care about (submit, form element, etc.).
    * @param {string[]} collection - The array to use for tag name search.
    * @param {HTMLElement} element - The element to compare against the master list.
-   * @returns boolean
+   * @returns {boolean}
    * @private
    */
   _isInElementCollection(collection, element) {
-    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+    return collection.some((elementTag) => this._isElementTag(elementTag, element));
   }
 
   /**
@@ -339,8 +350,16 @@ export class AuroForm extends LitElement {
         return;
       }
 
-      this.formState[targetName].value = event.target.value;
-      this.requestUpdate('formState');
+      // Check special input types and handle their edge cases
+      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+        this.formState[targetName].value = event.target.values;
+
+        this.requestUpdate('formState');
+      } else {
+        // "Normal" input value handling, just assign the value
+        this.formState[targetName].value = event.target.value;
+        this.requestUpdate('formState');
+      }
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {

package/components/input/.turbo/turbo-build.log

@@ -216,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 788ms
+created ./demo/ in 1.1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 1s
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 761ms
+created ./demo/ in 828ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 674ms
+created ./demo/ in 878ms

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.20/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.21/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 760ms
+created dist in 781ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 461ms
+created ./demo/ in 538ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 343ms
+created ./demo/ in 692ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 898ms
+created dist in 857ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 713ms
+created ./demo/ in 666ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 613ms
+created ./demo/ in 433ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.20/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.21/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

package/components/radio/.turbo/turbo-build.log

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 440ms
+created dist in 445ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 400ms
+created ./demo/ in 411ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 376ms
+created ./demo/ in 530ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 742ms
+created dist in 698ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 483ms
+created ./demo/ in 655ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 430ms
+created ./demo/ in 551ms

package/components/radio/README.md

@@ -90,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.20/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.21/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 651ms
+created dist in 905ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 679ms
+created ./demo/ in 624ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 621ms
+created ./demo/ in 654ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.20/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.20/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.20/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.21/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.21/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.21/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/048c5061758f42d5-meta.json

@@ -1 +0,0 @@
-{"hash":"048c5061758f42d5","duration":4738}

package/.turbo/cache/46147a707109af3e-meta.json

@@ -1 +0,0 @@
-{"hash":"46147a707109af3e","duration":2026}

package/.turbo/cache/b2fd4dae3a507bc0-meta.json

@@ -1 +0,0 @@
-{"hash":"b2fd4dae3a507bc0","duration":714}

package/.turbo/cache/c5b9fac10bc33f4b-meta.json

@@ -1 +0,0 @@
-{"hash":"c5b9fac10bc33f4b","duration":20586}

package/.turbo/cache/f45bc65c58664d47-meta.json

@@ -1 +0,0 @@
-{"hash":"f45bc65c58664d47","duration":5364}