@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.11

package/components/datepicker/demo/api.md

@@ -7,25 +7,26 @@
 
 | 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 `setCustomValidity` = 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"] |                                                  |
-| [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. |
-| [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`  |                                                  | 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 date picker.              |
-| [valueEnd](#valueEnd)                        | `valueEnd`                        | `String`  | "undefined"                                      | Value selected for the second date picker when using date range. |
+| [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. |
 
 ## Methods
 
@@ -95,24 +96,45 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Property Examples
-
-#### calendarStartDate & calendarEndDate
-
-The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.
+#### Basic Range
 
-In <strong>desktop</strong>, the calendar month navigation will be restricted by these dates. In <strong>mobile</strong>, the following logic is used:
+When used, the datepicker will display two inputs and the component will support selection of dates for a start and end date.
 
-- if both `calendarStartDate` and `calendarEndDate` are defined: all months between, including these dates, will be rendered.
-- If only `calendarStartDate` is defined: 12 months will be rendered starting with this value.
-- if only `calendarEndDate` is defined: The current date month through the value of this property will be rendered.
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
+  <auro-datepicker range>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="mobileDateLabel">Roundtrip</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+
+```html
+<auro-datepicker range>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Roundtrip</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Property Examples
+
+#### disabled
 
-Note: This does not restrict setting a value outside of those date constraints. These properties _only_ define which months can be rendered in the calendar. A user may still type any date into the input field. If actual value selection restrictions are needed, see the `minDate` and `maxDate` properties which may be used standalone, or in conjunction with `calendarStartDate` and `calendarEndDate`.
+If set, disables the datepicker.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarStartAndEndDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-datepicker disabled>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -120,11 +142,11 @@ Note: This does not restrict setting a value outside of those date constraints.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarStartAndEndDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 
 ```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+<auro-datepicker disabled>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -132,89 +154,118 @@ Note: This does not restrict setting a value outside of those date constraints.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### calendarFocusDate
+#### error
 
-The `calendarFocusDate` controls which calendar month is first presented to the user when they open the dropdown bib.
+Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
 
-In <strong>desktop</strong> layout, the first month actually rendered will be the `calendarFocusDate` if defined. Once the user manually navigates the calendar to a different month, the calendar view will remain where the user left off when they close and reopen the bib. If the `calendarFocusDate` property is changed, this will re-render the calendar starting at the new date. If `calendarFocusDate` is undefined, the first rendered month will be the current date or the first renderable date defined by `calendarStartDate`.
-
-In <strong>mobile</strong> layout, upon first opening the bib, the vertical list of months will scroll (with no animation) to the month defined by the `calendarFocusDate`. If the user scrolls the list to a different position, the scroll position will remain where the user left off when they close and reopen the bib. If the `calendarFocusDate` is changed, the list will scroll to the new dates month. If `calendarFocusDate` is undefined, the list will start at the top most scroll position.
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarFocusDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendarFocusDate.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/error.html -->
+  <auro-datepicker error="Custom error message" id="errorExample">
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
-  </auro-datepicker>
+  </auro-datepicker>
+  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarFocusDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/calendarFocusDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+<auro-datepicker error="Custom error message" id="errorExample">
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
+<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.js -->
+
+```js
+export function errorExample() {
+  const errorExample = document.querySelector('#errorExample');
+
+  document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () => {
+    errorExample.error = 'Custom New Error';
+  })
+
+  document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () => {
+    errorExample.removeAttribute('error');
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### disabled
+#### calendarStartDate & calendarEndDate
 
-If set, disables the datepicker.
+The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.
+
+In <strong>desktop</strong>, the calendar month navigation will be restricted by these dates. In <strong>mobile</strong>, the following logic is used:
+
+- if both `calendarStartDate` and `calendarEndDate` are defined: all months between, including these dates, will be rendered.
+- If only `calendarStartDate` is defined: 12 months will be rendered starting with this value.
+- if only `calendarEndDate` is defined: The current date month through the value of this property will be rendered.
+
+Note: This does not restrict setting a value outside of those date constraints. These properties _only_ define which months can be rendered in the calendar. A user may still type any date into the input field. If actual value selection restrictions are needed, see the `minDate` and `maxDate` properties which may be used standalone, or in conjunction with `calendarStartDate` and `calendarEndDate`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-datepicker disabled>
-    <span slot="label">Choose a date</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarStartAndEndDate.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
+  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarStartAndEndDate.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
 
 ```html
-<auro-datepicker disabled>
-  <span slot="label">Choose a date</span>
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### error
+#### calendarFocusDate
+
+The `calendarFocusDate` controls which calendar month is first presented to the user when they open the dropdown bib.
+
+In <strong>desktop</strong> layout, the first month actually rendered will be the `calendarFocusDate` if defined. Once the user manually navigates the calendar to a different month, the calendar view will remain where the user left off when they close and reopen the bib. If the `calendarFocusDate` property is changed, this will re-render the calendar starting at the new date. If `calendarFocusDate` is undefined, the first rendered month will be the current date or the first renderable date defined by `calendarStartDate`.
 
-Sets a persistent error state (e.g. an error state returned from the server). This error state will override all default validation until the error attribute is removed from the datepicker.
+In <strong>mobile</strong> layout, upon first opening the bib, the vertical list of months will scroll (with no animation) to the month defined by the `calendarFocusDate`. If the user scrolls the list to a different position, the scroll position will remain where the user left off when they close and reopen the bib. If the `calendarFocusDate` is changed, the list will scroll to the new dates month. If `calendarFocusDate` is undefined, the list will start at the top most scroll position.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-datepicker error="Custom error message" id="errorExample">
-    <span slot="label">Choose a date</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarFocusDate.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/calendarFocusDate.html -->
+  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
-  <br/><br/>
-  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarFocusDate.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/calendarFocusDate.html -->
 
 ```html
-<auro-datepicker error="Custom error message" id="errorExample">
-  <span slot="label">Choose a date</span>
-</auro-datepicker>
-<br/><br/>
-<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -256,7 +307,8 @@ This example demonstrates that behavior.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMaxDate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/updateMaxDate.html -->
   <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-    <span slot="label">Choose a date</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
   <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
@@ -269,7 +321,8 @@ This example demonstrates that behavior.
 
 ```html
 <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
 <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
@@ -355,7 +408,8 @@ This example demonstrates that behavior.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMinDate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/updateMinDate.html -->
   <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-    <span slot="label">Choose a date</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
   <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
@@ -368,7 +422,8 @@ This example demonstrates that behavior.
 
 ```html
 <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
 <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
@@ -466,9 +521,10 @@ When set, the datepicker will not validate when navigating away from the compone
   <!-- The below content is automatically added from ./../apiExamples/noValidate.html -->
   <auro-datepicker required noValidate>
     <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noValidate.html) -->
@@ -477,35 +533,7 @@ When set, the datepicker will not validate when navigating away from the compone
 ```html
 <auro-datepicker required noValidate>
   <span slot="fromLabel">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### range
-
-When used, the datepicker will display two inputs and the component will support selection of dates for a start and end date.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="mobileDateLabel">Roundtrip</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
-
-```html
-<auro-datepicker range>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="mobileDateLabel">Roundtrip</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -515,6 +543,8 @@ When used, the datepicker will display two inputs and the component will support
 
 Populates the `required` attribute on the input. Used for client-side validation.
 
+When the validity check fails the validityState, equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
@@ -557,6 +587,7 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
   <!-- The below content is automatically added from ./../apiExamples/validity.html -->
   <auro-datepicker required id="validityExample">
     <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <auro-button id="validityExampleBtn">Get validity</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -569,6 +600,7 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
 ```html
 <auro-datepicker required id="validityExample">
   <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 <auro-button id="validityExampleBtn">Get validity</auro-button>
 ```
@@ -598,7 +630,8 @@ Value selected for the datepicker. Can be used to pre-set the value of the datep
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
   <!-- The below content is automatically added from ./../apiExamples/value.html -->
   <auro-datepicker id="valueExample" value="02/02/2022">
-    <span slot="label">Choose a date</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -609,7 +642,8 @@ Value selected for the datepicker. Can be used to pre-set the value of the datep
 
 ```html
 <auro-datepicker id="valueExample" value="02/02/2022">
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -623,7 +657,9 @@ Value of the second input (end date), selected for the datepicker. Can be used t
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueEnd.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueEnd.html -->
   <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
-    <span slot="label">Choose a date</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -634,7 +670,9 @@ Value of the second input (end date), selected for the datepicker. Can be used t
 
 ```html
 <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -649,12 +687,13 @@ The focus method will apply focus state to the datepicker's input field.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
   <!-- The below content is automatically added from ./../apiExamples/focus.html -->
+  <auro-datepicker id="focusExampleElem" range>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="mobileDateLabel">Choose a date</span>
+  </auro-datepicker>
   <auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
   <auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
-  <br /><br />
-  <auro-datepicker id="focusExampleElem" range>
-    <span slot="label">Choose a date</span>
-  </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -663,12 +702,13 @@ The focus method will apply focus state to the datepicker's input field.
 <!-- The below code snippet is automatically added from ./../apiExamples/focus.html -->
 
 ```html
-<auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
-<auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
-<br /><br />
 <auro-datepicker id="focusExampleElem" range>
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
+<auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
+<auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.js) -->
@@ -729,7 +769,8 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
   <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
   <auro-datepicker>
-    <span slot="label">Choose a date</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
     <span slot="helpText">Choose a date must be today or earlier.</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -741,7 +782,8 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 ```html
 <auro-datepicker>
-  <span slot="label">Choose a date</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
   <span slot="helpText">Choose a date must be today or earlier.</span>
 </auro-datepicker>
 ```
@@ -903,12 +945,12 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
-  <auro-button id="resetStateBtn">Reset</auro-button>
-  <br /><br />
   <auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
-    <span slot="fromLabel">Choose a date</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Choose a date</span>
-  </auro-datepicker>
+  </auro-datepicker>
+  <auro-button id="resetStateBtn">Reset</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -917,12 +959,12 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
 <!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
 
 ```html
-<auro-button id="resetStateBtn">Reset</auro-button>
-<br /><br />
 <auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
-  <span slot="fromLabel">Choose a date</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
+<auro-button id="resetStateBtn">Reset</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
@@ -948,7 +990,8 @@ This example demonstrates data driven slot content for days in the calendar. In
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamicSlot.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dynamicSlot.html -->
   <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
-    <span slot="fromLabel">Choose a date</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -960,7 +1003,8 @@ This example demonstrates data driven slot content for days in the calendar. In
 
 ```html
 <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
-  <span slot="fromLabel">Choose a date</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
@@ -1101,6 +1145,7 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
   <!-- The below content is automatically added from ./../apiExamples/alertValue.html -->
   <auro-datepicker id="datePickerValueAlert">
     <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1112,6 +1157,7 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
 ```html
 <auro-datepicker id="datePickerValueAlert">
   <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->