@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.41

package/components/datepicker/.turbo/turbo-postCss$colon$component.log

@@ -1,5 +1,4 @@
 
-> @auro-formkit/auro-datepicker@3.2.0 postCss:component
+> @aurodesignsystem/auro-datepicker@3.2.0 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
 
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/datepicker/.turbo/turbo-sass$colon$render.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-datepicker@3.2.0 sass:render
+> @aurodesignsystem/auro-datepicker@3.2.0 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 
 Rendering src/styles/color-calendar.css...
@@ -11,39 +11,39 @@ Rendering src/styles/style-auro-calendar-month.css...
 Rendering src/styles/style-auro-calendar.css...
 Rendering src/styles/style.css...
 Rendering src/styles/tokens.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 

package/components/datepicker/README.md

@@ -4,8 +4,8 @@ The README.md file is a compiled document. No edits should be made directly to t
 README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
-and copied to `./componentDocs/README.md` each time the the docs are compiled.
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -17,7 +17,7 @@ The following sections are editable by making changes to the following files:
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
 -->
 
-# Formkit/auro-datepicker
+# Datepicker
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
@@ -37,18 +37,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/-formkit/-formkit/auro-datepicker/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-datepicker/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-datepicker?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-datepicker)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-datepicker?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
 ```shell
-$ npm i @auro-formkit/-formkit/-formkit/auro-datepicker
+$ npm i @aurodesignsystem/auro-formkit
 ```
-
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Design Token CSS Custom Property dependency
@@ -61,17 +55,18 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<-formkit/-formkit/auro-datepicker>` component.
+Defining the component dependency within each component that is using the `<auro-datepicker>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
 
 ```js
-import "@auro-formkit/-formkit/-formkit/auro-datepicker";
+import "@aurodesignsystem/auro-formkit/auro-datepicker";
 ```
-
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
+
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
@@ -86,7 +81,7 @@ import "@auro-formkit/-formkit/-formkit/auro-datepicker";
 ## Install bundled assets from CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `-formkit/-formkit/auro-datepicker__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-datepicker__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
 **WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
 
@@ -94,17 +89,17 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
-```html
-<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/@auro-formkit/-formkit/-formkit/auro-datepicker@3.2.0/dist/-formkit/-formkit/auro-datepicker__bundled.js" type="module"></script>
-```
-
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.40/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.40/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.40/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.40/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-formkit/auro-datepicker use cases
+## auro-datepicker use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
@@ -116,7 +111,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ## API Code Examples
 
-### Default auro-formkit/auro-datepicker
+### Default auro-datepicker
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -169,7 +164,7 @@ The custom element API file is generated in the build and committed back to the
 ### Testing
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\-formkit/-formkit/auro-datepicker.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+Automated tests are required for every Auro component. See `.\test\auro-datepicker.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 

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 -->