@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.51

package/components/datepicker/demo/api.md

@@ -5,35 +5,39 @@
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default                                          | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
-| [calendarEndDate](#calendarEndDate)                 | `calendarEndDate`                 | `string`  | "undefined"                                      | The last date that may be displayed in the calendar. |
-| [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               | `string`  | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
-| [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               | `string`  | "undefined"                                      | The first date that may be displayed in the calendar. |
-| [centralDate](#centralDate)                     | `centralDate`                     | `string`  |                                                  | The date that determines the currently visible month. |
-| [disabled](#disabled)                        | `disabled`                        | `boolean` | false                                            | If set, disables the datepicker.                 |
-| [error](#error)                           | `error`                           | `string`  |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [maxDate](#maxDate)                         | `maxDate`                         | `string`  |                                                  | Maximum date. All dates after will be disabled.  |
-| [minDate](#minDate)                         | `minDate`                         | `string`  |                                                  | Minimum date. All dates before will be disabled. |
-| [monthNames](#monthNames)                      | `monthNames`                      | `array`   | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
-| [noValidate](#noValidate)                      | `noValidate`                      | `boolean` | false                                            | If set, disables auto-validation on blur.        |
-| [range](#range)                           | `range`                           | `boolean` | false                                            | If set, turns on date range functionality in auro-calendar. |
-| [required](#required)                        | `required`                        | `boolean` | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `string`  |                                                  | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `string`  |                                                  | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `string`  |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `string`  |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `string`  |                                                  | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                        | `validity`                        | `string`  | "undefined"                                      | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `string`  | "undefined"                                      | Value selected for the datepicker.               |
-| [valueEnd](#valueEnd)                        | `valueEnd`                        | `string`  | "undefined"                                      | Value selected for the second datepicker when using date range. |
+| Property                          | Attribute                         | Modifiers | Type       | Default                                          | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|------------|--------------------------------------------------|--------------------------------------------------|
+| [calendarEndDate](#calendarEndDate)                 | `calendarEndDate`                 |           | `string`   | "undefined"                                      | The last date that may be displayed in the calendar. |
+| [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
+| [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
+| [centralDate](#centralDate)                     | `centralDate`                     |           | `string`   |                                                  | The date that determines the currently visible month. |
+| [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
+| [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)         | `largeFullscreenHeadline`         |           | `boolean`  |                                                  | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [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
 
@@ -52,7 +56,8 @@
 | `date_MM_DD_YYYY`    | Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot. |
 | [fromLabel](#fromLabel)          | Defines the label content for the first input.   |
 | [helpText](#helpText)           | Defines the content of the helpText.             |
-| [mobileDateLabel](#mobileDateLabel)    | Defines the content to display above selected dates in the mobile layout. |
+| [mobileDateLabel](#mobileDateLabel)    | Defines the content to display above selected dates in the mobile layout. |
+| [mobileHeadline](#mobileHeadline)     | Defines the headline to display above mobileDateLabels in the mobile layout. |
 | `popover_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell popover for the specified date. |
 | [toLabel](#toLabel)            | Defines the label content for the second input when the `range` attribute is used. |
 
@@ -77,6 +82,7 @@
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker>
+    <span slot="mobileHeadline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -89,6 +95,7 @@
 
 ```html
 <auro-datepicker>
+  <span slot="mobileHeadline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -104,6 +111,7 @@ When used, the datepicker will display two inputs and the component will support
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range>
+    <span slot="mobileHeadline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Roundtrip</span>
@@ -117,6 +125,7 @@ When used, the datepicker will display two inputs and the component will support
 
 ```html
 <auro-datepicker range>
+  <span slot="mobileHeadline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Roundtrip</span>
@@ -125,7 +134,7 @@ When used, the datepicker will display two inputs and the component will support
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Property Examples
+### Attribute Examples
 
 #### disabled
 
@@ -135,7 +144,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 +156,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 +173,9 @@ 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="mobileHeadline">Error Example</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 +188,9 @@ 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="mobileHeadline">Error Example</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>
@@ -208,7 +223,7 @@ In <strong>desktop</strong>, the calendar month navigation will be restricted by
 
 - 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.
+- if only `calendarEndDate` is defined: The current date month through the value of this attribute 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`.
 
@@ -216,6 +231,7 @@ Note: This does not restrict setting a value outside of those date constraints.
   <!-- 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="mobileHeadline">calendarStartDate & calendarEndDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -228,6 +244,7 @@ Note: This does not restrict setting a value outside of those date constraints.
 
 ```html
 <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+  <span slot="mobileHeadline">calendarStartDate & calendarEndDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -239,7 +256,7 @@ Note: This does not restrict setting a value outside of those date constraints.
 
 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`.
+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` attribute 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.
 
@@ -247,6 +264,7 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
   <!-- 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="mobileHeadline">calendarFocusDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -259,6 +277,7 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 
 ```html
 <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+  <span slot="mobileHeadline">calendarFocusDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -268,12 +287,13 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 
 #### maxDate
 
-To give a higher limit you can bind a date to the `maxDate` property. It is recommended to use the `setCustomValidityRangeOverflow` attribute to define an error message to display when validation fails the maximum date restriction.
+To give a higher limit you can bind a date to the `maxDate` attribute. It is recommended to use the `setCustomValidityRangeOverflow` attribute to define an error message to display when validation fails the maximum date restriction.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/maxDate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/maxDate.html -->
   <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+    <span slot="mobileHeadline">maxDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -286,6 +306,7 @@ To give a higher limit you can bind a date to the `maxDate` property. It is reco
 
 ```html
 <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+  <span slot="mobileHeadline">maxDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -303,7 +324,9 @@ 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="mobileHeadline">maxDate Example</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 +339,9 @@ 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="mobileHeadline">maxDate Example</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>
@@ -367,12 +392,13 @@ export function updateMaxDateExample() {
 
 #### minDate
 
-To give a lower limit you can bind a date to the `minDate` property. It is recommended to use the `setCustomValidityRangeUnderflow` attribute to define an error message to display when validation fails the minimum date restriction.
+To give a lower limit you can bind a date to the `minDate` attribute. It is recommended to use the `setCustomValidityRangeUnderflow` attribute to define an error message to display when validation fails the minimum date restriction.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/minDate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/minDate.html -->
   <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+    <span slot="mobileHeadline">minDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -385,6 +411,7 @@ To give a lower limit you can bind a date to the `minDate` property. It is recom
 
 ```html
 <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+  <span slot="mobileHeadline">minDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -402,7 +429,9 @@ 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="mobileHeadline">minDate Example</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 +444,9 @@ 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="mobileHeadline">minDate Example</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>
@@ -464,44 +495,6 @@ export function updateMinDateExample() {
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-
-#### monthNames
-
-May be used to provide localized month names. These names will only be shown in the calendar when viewed on a mobile device.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/monthNames.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/monthNames.html -->
-  <auro-datepicker id="monthNamesExample">
-    <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/monthNames.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/monthNames.html -->
-
-```html
-<auro-datepicker id="monthNamesExample">
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="mobileDateLabel">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/monthNames.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/monthNames.js -->
-
-```js
-export function monthNamesExample() {
-  const monthNamesExample = document.querySelector('#monthNamesExample');
-  const spanishMonths = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
-
-  monthNamesExample.monthNames = spanishMonths;
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### noValidate
@@ -512,7 +505,9 @@ When set, the datepicker will not validate when navigating away from the compone
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noValidate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noValidate.html -->
   <auro-datepicker required noValidate>
+    <span slot="mobileHeadline">noValidate Example</span>
     <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -523,7 +518,9 @@ When set, the datepicker will not validate when navigating away from the compone
 
 ```html
 <auro-datepicker required noValidate>
+  <span slot="mobileHeadline">noValidate Example</span>
   <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -539,10 +536,12 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
+    <span slot="mobileHeadline">Required Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
+    <span slot="mobileHeadline">Required Example</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Roundtrip</span>
@@ -556,10 +555,12 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 
 ```html
 <auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
+  <span slot="mobileHeadline">Required Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
+  <span slot="mobileHeadline">Required Example</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Roundtrip</span>
@@ -576,7 +577,9 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/validity.html) -->
   <!-- The below content is automatically added from ./../apiExamples/validity.html -->
   <auro-datepicker required id="validityExample">
+    <span slot="mobileHeadline">validity Example</span>
     <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 -->
@@ -588,7 +591,9 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
 
 ```html
 <auro-datepicker required id="validityExample">
+  <span slot="mobileHeadline">validity Example</span>
   <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 +623,9 @@ 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="mobileHeadline">value Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -629,7 +636,9 @@ 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="mobileHeadline">value Example</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -643,7 +652,10 @@ 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="mobileHeadline">valueEnd Example</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 +666,39 @@ 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="mobileHeadline">valueEnd Example</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### format
+
+The `format` attribute is used to define the date format used by the datepicker. The default value is `mm/dd/yyyy`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/format.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/format.html -->
+  <auro-datepicker format="yyyy/mm/dd">
+    <span slot="mobileHeadline">Format Headline</span>
+    <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/format.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/format.html -->
+
+```html
+<auro-datepicker format="yyyy/mm/dd">
+  <span slot="mobileHeadline">Format Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -669,12 +713,14 @@ 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="mobileHeadline">Focus Example</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>
-  <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 +729,14 @@ 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="mobileHeadline">Focus Example</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) -->
@@ -722,6 +770,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker>
+    <span slot="mobileHeadline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -734,6 +783,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 
 ```html
 <auro-datepicker>
+  <span slot="mobileHeadline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -743,13 +793,15 @@ Sets the label used for the input. When the `range` attribute is used this is th
 
 #### helpText
 
-Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` property, the `helpText` slot can be used to describe the error.
+Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` attribute, the `helpText` slot can be used to describe the error.
 
 <div class="exampleWrapper">
   <!-- 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="mobileHeadline">helpText Example</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 +813,9 @@ 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="mobileHeadline">helpText Example</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>
 ```
@@ -776,6 +830,7 @@ Sets the label used for the selected date display at the top of the bib when vie
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker>
+    <span slot="mobileHeadline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -788,6 +843,7 @@ Sets the label used for the selected date display at the top of the bib when vie
 
 ```html
 <auro-datepicker>
+  <span slot="mobileHeadline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -803,6 +859,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range>
+    <span slot="mobileHeadline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Roundtrip</span>
@@ -816,6 +873,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
 
 ```html
 <auro-datepicker range>
+  <span slot="mobileHeadline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Roundtrip</span>
@@ -838,6 +896,7 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dateSlot.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dateSlot.html -->
   <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+    <span slot="mobileHeadline">dateSlot Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
     <span slot="date_12_03_2023">Sold</span>
@@ -857,6 +916,7 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
 
 ```html
 <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+  <span slot="mobileHeadline">dateSlot Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
   <span slot="date_12_03_2023">Sold</span>
@@ -881,6 +941,7 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverSlot.html) -->
   <!-- The below content is automatically added from ./../apiExamples/popoverSlot.html -->
   <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+    <span slot="mobileHeadline">Popover Slot Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
     <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
@@ -900,6 +961,7 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 
 ```html
 <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+  <span slot="mobileHeadline">Popover Slot Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
   <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
@@ -914,7 +976,49 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Functional Examples
+### Functional Examples
+
+#### Localization
+
+The datepicker supports localized month names through the `monthNames` property. 
+
+This example demonstrates how to set the `monthNames` property to Korean month names, with a Korean date format.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/localization.html -->
+  <auro-datepicker format="yyyy/mm/dd" id="localizationExample">
+    <span slot="mobileHeadline">Localization Headline</span>
+    <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/localization.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
+
+```html
+<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
+  <span slot="mobileHeadline">Localization Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/localization.js -->
+
+```js
+export function localizationExample() {
+  const localizedDatepicker = document.querySelector("#localizationExample");
+
+  localizedDatepicker.monthNames = ['일월', '이월', '삼월', '사월', '오월', '유월', '칠월', '팔월', '구월', '시월', '십일월', '십이월'];
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
 #### Reset State
 
@@ -923,12 +1027,13 @@ 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="mobileHeadline">Reset Example</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 +1042,13 @@ 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="mobileHeadline">Reset Example</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 +1074,9 @@ 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="mobileHeadline">dynamic slot  Example</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 +1088,9 @@ 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="mobileHeadline">dynamic slot  Example</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
@@ -1120,7 +1230,9 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alertValue.html) -->
   <!-- The below content is automatically added from ./../apiExamples/alertValue.html -->
   <auro-datepicker id="datePickerValueAlert">
+    <span slot="mobileHeadline">Alert Value Example</span>
     <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1131,7 +1243,9 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
 
 ```html
 <auro-datepicker id="datePickerValueAlert">
+  <span slot="mobileHeadline">Alert Value Example</span>
   <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1161,6 +1275,7 @@ The component can be in a dialog.
   <div>
     <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
     <auro-dialog id="datepicker-dialog">
+      <span slot="mobileHeadline">inDialog Example</span>
       <span slot="header">Datepicker in Dialog</span>
       <div slot="content">
         <auro-datepicker />
@@ -1178,6 +1293,7 @@ The component can be in a dialog.
 <div>
   <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
   <auro-dialog id="datepicker-dialog">
+    <span slot="mobileHeadline">inDialog Example</span>
     <span slot="header">Datepicker in Dialog</span>
     <div slot="content">
       <auro-datepicker />
@@ -1215,8 +1331,6 @@ The component may be restyled using the following code sample and changing the v
 :host {
   --ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default});
-  --ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-  --ds-auro-calendar-mobile-header-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
   --ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
   --ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});