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

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

@@ -1 +1 @@
-{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AAGH;IAoCE;QAII;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;;QAOH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;MAMN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAzKC,kBAAqB;IACrB,cAAyB;IACzB,aAAsB;IACtB,sBAA+B;IAKjC;;;OAGG;IACH,wBAeC;IAdC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAErD,+BAA0C;IAE1C,kBAAiD;IAEjD,8BAAiC;IAIjC,iBAAyF;IACzF,cAA6E;IAiJ/E;;;;OAIG;IACH,0BA4EC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAcC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBA0EC;IAzEC,cAAwD;IA2E1D;;;;OAIG;IACH,uBAwBC;IAFG,kBAAsC;IAI1C;;;;;;;;;;;;;OAaG;IACH,gCAOC;IAED;;;;OAIG;IACH,+BA2DC;IAED;;;;OAIG;IACH,0BAyCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAMhB;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCA6BC;IAED;;;;;OAKG;IACH,yBAcC;IAGD,4CAoDC;CACF;2BAtwB0B,KAAK;+BAKD,+BAA+B;+BAWvD,6BAA6B;2CAA7B,6BAA6B"}
+{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AAGH;IAoCE;QAII;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;;QAOH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;MAMN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAzKC,kBAAqB;IACrB,cAAyB;IACzB,WAAsB;IACtB,sBAA+B;IAKjC;;;OAGG;IACH,wBAeC;IAdC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAErD,+BAA0C;IAE1C,kBAAiD;IAEjD,8BAAiC;IAIjC,iBAAyF;IACzF,cAA6E;IAiJ/E;;;;OAIG;IACH,0BA4EC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAcC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBA0EC;IAzEC,cAAwD;IA2E1D;;;;OAIG;IACH,uBAwBC;IAFG,kBAAsC;IAI1C;;;;;;;;;;;;;OAaG;IACH,gCAOC;IAED;;;;OAIG;IACH,+BAwDC;IAED;;;;OAIG;IACH,0BAyCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAMhB;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED,sCA6BC;IAED;;;;;OAKG;IACH,yBAcC;IAGD,4CAoDC;CACF;2BAnwB0B,KAAK;+BAKD,+BAA+B;+BAWvD,6BAA6B;2CAA7B,6BAA6B"}

package/components/combobox/dist/index.js

@@ -9639,7 +9639,9 @@ class AuroCombobox extends r$7 {
 
     // Store value as array or undefined
     if (!this.value || this.value[0] !== this.input.value) {
-      this.value = this.input.value ? [this.input.value] : undefined;
+      // Menu expects an array
+      this.menu.value = this.input.value ? [this.input.value] : undefined;
+      this.value = this.menu.value;
       hasChange = true;
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
         bubbles: true,
@@ -9648,11 +9650,6 @@ class AuroCombobox extends r$7 {
       }));
     }
 
-    if (this.value !== this.menu.value) {
-      this.menu.value = this.value;
-      hasChange = true;
-    }
-
     if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
       this.optionSelected = undefined;
       hasChange = true;

package/components/combobox/package.json

@@ -20,8 +20,8 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+    "@aurodesignsystem/design-tokens": "^4.13",
+    "@aurodesignsystem/webcorestylesheets": "^6.0.0"
   },
   "devDependencies": {
     "@auro-formkit/build-tools": "*",
@@ -29,7 +29,6 @@
     "@auro-formkit/form-validation": "*",
     "@auro-formkit/typescript": "*",
     "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^6.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "rollup": "^4.30.1",
     "rollup-plugin-serve": "^2.0.3",
@@ -58,7 +57,7 @@
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",
     "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --watch",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

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

@@ -508,7 +508,9 @@ export class AuroCombobox extends LitElement {
 
     // Store value as array or undefined
     if (!this.value || this.value[0] !== this.input.value) {
-      this.value = this.input.value ? [this.input.value] : undefined;
+      // Menu expects an array
+      this.menu.value = this.input.value ? [this.input.value] : undefined;
+      this.value = this.menu.value;
       hasChange = true;
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
         bubbles: true,
@@ -517,11 +519,6 @@ export class AuroCombobox extends LitElement {
       }));
     }
 
-    if (this.value !== this.menu.value) {
-      this.menu.value = this.value;
-      hasChange = true;
-    }
-
     if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
       this.optionSelected = undefined;
       hasChange = true;

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

@@ -339,13 +339,13 @@ Complete!
 
 
 ./src/index.js → dist...
-created dist in 2s
+created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.2s
+created ./demo/ in 1.1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1.2s
+created ./demo/ in 1.4s
 
 > @aurodesignsystem/auro-counter@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component counter

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

@@ -4,13 +4,10 @@
 
 
 ./src/index.js → dist...
-(!) Unresolved dependencies
-https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
-@aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created dist in 996ms
+created dist in 1.9s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 939ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 931ms
+created ./demo/ in 827ms

package/components/counter/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-counter@2.0.0-beta.19/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.21/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

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

@@ -373,10 +373,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.2s
+created dist in 7.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.6s
+created ./demo/ in 3.5s
 
 ./demo/api.js → ./demo/...
 created ./demo/ in 3.3s

package/components/datepicker/README.md

@@ -93,10 +93,10 @@ 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.19/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.19/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.19/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.19/dist/auro-datepicker__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-input@2.0.0-beta.21/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.21/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.21/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

package/components/datepicker/demo/api.md

@@ -5,28 +5,29 @@
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default                                          | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
-| [calendarEndDate](#calendarEndDate)                 | `calendarEndDate`                 | `string`  | "undefined"                                      | The last date that may be displayed in the calendar. |
-| [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               | `string`  | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
-| [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               | `string`  | "undefined"                                      | The first date that may be displayed in the calendar. |
-| [centralDate](#centralDate)                     | `centralDate`                     | `string`  |                                                  | The date that determines the currently visible month. |
-| [disabled](#disabled)                        | `disabled`                        | `boolean` | false                                            | If set, disables the datepicker.                 |
-| [error](#error)                           | `error`                           | `string`  |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [maxDate](#maxDate)                         | `maxDate`                         | `string`  |                                                  | Maximum date. All dates after will be disabled.  |
-| [minDate](#minDate)                         | `minDate`                         | `string`  |                                                  | Minimum date. All dates before will be disabled. |
-| [monthNames](#monthNames)                      | `monthNames`                      | `array`   | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
-| [noValidate](#noValidate)                      | `noValidate`                      | `boolean` | false                                            | If set, disables auto-validation on blur.        |
-| [range](#range)                           | `range`                           | `boolean` | false                                            | If set, turns on date range functionality in auro-calendar. |
-| [required](#required)                        | `required`                        | `boolean` | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `string`  |                                                  | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `string`  |                                                  | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `string`  |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `string`  |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `string`  |                                                  | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                        | `validity`                        | `string`  | "undefined"                                      | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `string`  | "undefined"                                      | Value selected for the datepicker.               |
-| [valueEnd](#valueEnd)                        | `valueEnd`                        | `string`  | "undefined"                                      | Value selected for the second datepicker when using date range. |
+| Property                          | Attribute                         | Modifiers | Type       | Default                                          | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|------------|--------------------------------------------------|--------------------------------------------------|
+| [calendarEndDate](#calendarEndDate)                 | `calendarEndDate`                 |           | `string`   | "undefined"                                      | The last date that may be displayed in the calendar. |
+| [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
+| [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
+| [centralDate](#centralDate)                     | `centralDate`                     |           | `string`   |                                                  | The date that determines the currently visible month. |
+| [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
+| [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [maxDate](#maxDate)                         | `maxDate`                         |           | `string`   |                                                  | Maximum date. All dates after will be disabled.  |
+| [minDate](#minDate)                         | `minDate`                         |           | `string`   |                                                  | Minimum date. All dates before will be disabled. |
+| [monthNames](#monthNames)                      | `monthNames`                      |           | `array`    | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
+| [noValidate](#noValidate)                      | `noValidate`                      |           | `boolean`  | false                                            | If set, disables auto-validation on blur.        |
+| [range](#range)                           | `range`                           |           | `boolean`  | false                                            | If set, turns on date range functionality in auro-calendar. |
+| [required](#required)                        | `required`                        |           | `boolean`  | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               |           | `string`   |                                                  | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    |           | `string`   |                                                  | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  |           | `string`   |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
+| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` |           | `string`   |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   |           | `string`   |                                                  | Custom help text message to display when validity = `valueMissing`. |
+| [validity](#validity)                        | `validity`                        |           | `string`   | "undefined"                                      | Specifies the `validityState` this element is in. |
+| [value](#value)                           | `value`                           |           | `string`   | "undefined"                                      | Value selected for the datepicker.               |
+| [valueEnd](#valueEnd)                        | `valueEnd`                        |           | `string`   | "undefined"                                      | Value selected for the second datepicker when using date range. |
+| [values](#values)                          |                                   | readonly  | `string[]` |                                                  | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
 
 ## Methods
 

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

@@ -843,7 +843,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines how many calendar months can be rendered based on the screen size and defined range.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {Number} Returns the maximum number of months that can be rendered.
    */
@@ -877,7 +877,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines the number of months rendered inside the calendar.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {void}
    */
@@ -10458,7 +10458,7 @@ class CalendarUtilities {
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
@@ -18239,6 +18239,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/demo/index.min.js

@@ -583,7 +583,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines how many calendar months can be rendered based on the screen size and defined range.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {Number} Returns the maximum number of months that can be rendered.
    */
@@ -617,7 +617,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines the number of months rendered inside the calendar.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {void}
    */
@@ -10198,7 +10198,7 @@ class CalendarUtilities {
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
@@ -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-calendar.d.ts

@@ -7,7 +7,7 @@
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).

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

@@ -583,7 +583,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines how many calendar months can be rendered based on the screen size and defined range.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {Number} Returns the maximum number of months that can be rendered.
    */
@@ -617,7 +617,7 @@ class UtilitiesCalendarRender {
   /**
    * Determines the number of months rendered inside the calendar.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {void}
    */
@@ -10198,7 +10198,7 @@ class CalendarUtilities {
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
@@ -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/utilitiesCalendarRender.d.ts

@@ -17,7 +17,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines how many calendar months can be rendered based on the screen size and defined range.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {Number} Returns the maximum number of months that can be rendered.
      */
@@ -25,7 +25,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines the number of months rendered inside the calendar.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {void}
      */

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

@@ -25,7 +25,7 @@ import { UtilitiesCalendarRender } from './utilitiesCalendarRender.js';
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).

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

@@ -3,7 +3,7 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable max-lines, max-depth, no-magic-numbers, complexity, newline-per-chained-call, no-underscore-dangle, lit/binding-positions,
+/* eslint-disable max-lines, no-magic-numbers, complexity, newline-per-chained-call, no-underscore-dangle, lit/binding-positions,
    lit/no-invalid-html, no-unused-expressions */
 
 // If using litElement base class
@@ -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/datepicker/src/utilitiesCalendarRender.js

@@ -41,7 +41,7 @@ export class UtilitiesCalendarRender {
   /**
    * Determines how many calendar months can be rendered based on the screen size and defined range.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {Number} Returns the maximum number of months that can be rendered.
    */
@@ -75,7 +75,7 @@ export class UtilitiesCalendarRender {
   /**
    * Determines the number of months rendered inside the calendar.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {void}
    */

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

@@ -93,10 +93,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 688ms
+created ./demo/ in 857ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 569ms
+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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 836ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 835ms
+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.19/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

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 146ms
+created dist in 145ms
 
 ./demo/index.js → ./demo/...
 created ./demo/ in 75ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 65ms
+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 611ms
+created dist in 797ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 296ms
+created ./demo/ in 351ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 290ms
+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.19/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