@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.31

package/components/datepicker/demo/api.md

@@ -5,35 +5,37 @@
 
 ## 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"] |                                                  |
-| [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`  |                                                  | 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. |
+| 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
 
-| Method  | Type                         | Description                                      |
-|---------|------------------------------|--------------------------------------------------|
-| [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
-| [reset](#reset) | `(): void`                   | Resets component to initial state.               |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [focus](#focus)    | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -135,7 +137,8 @@ If set, disables the datepicker.
   <!-- 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>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -146,7 +149,8 @@ If set, disables the datepicker.
 
 ```html
 <auro-datepicker disabled>
-  <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 -->
@@ -162,7 +166,8 @@ A custom error message can be set using the `error` attribute, or it can be used
   <!-- 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>
+    <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>
@@ -175,7 +180,8 @@ A custom error message can be set using the `error` attribute, or it can be used
 
 ```html
 <auro-datepicker error="Custom error message" id="errorExample">
-  <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="undefinedValueExampleBtnAddError">Set Error</auro-button>
 <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
@@ -303,7 +309,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>
@@ -316,7 +323,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>
@@ -402,7 +410,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>
@@ -415,7 +424,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>
@@ -513,6 +523,7 @@ 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>
@@ -524,6 +535,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>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -577,6 +589,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 -->
@@ -589,6 +602,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>
 ```
@@ -618,7 +632,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>
@@ -629,7 +644,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 -->
@@ -643,7 +659,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>
@@ -654,7 +672,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 -->
@@ -669,12 +689,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>
@@ -683,12 +704,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) -->
@@ -749,7 +771,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 -->
@@ -761,7 +784,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>
 ```
@@ -923,12 +947,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>
@@ -937,12 +961,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) -->
@@ -968,7 +992,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 -->
@@ -980,7 +1005,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>
 ```
@@ -1121,6 +1147,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>
@@ -1132,6 +1159,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 -->