@aurodesignsystem/auro-formkit 2.0.0-beta.46 → 2.0.0-beta.48

package/components/datepicker/demo/api.md

@@ -13,6 +13,8 @@
 | [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`. |
+| [largeMobileHeadline](#largeMobileHeadline)             | `largeMobileHeadline`             |           | `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. |
@@ -54,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. |
 
@@ -79,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>
@@ -91,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>
@@ -106,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>
@@ -119,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>
@@ -127,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
 
@@ -166,6 +173,7 @@ 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="mobileHeadline">Error Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -180,6 +188,7 @@ 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="mobileHeadline">Error Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -214,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`.
 
@@ -222,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>
@@ -234,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>
@@ -245,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.
 
@@ -253,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>
@@ -265,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>
@@ -274,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>
@@ -292,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>
@@ -309,6 +324,7 @@ 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="mobileHeadline">maxDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -323,6 +339,7 @@ This example demonstrates that behavior.
 
 ```html
 <auro-datepicker id="maxDateExample" 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>
@@ -375,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>
@@ -393,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>
@@ -410,6 +429,7 @@ 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="mobileHeadline">minDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -424,6 +444,7 @@ This example demonstrates that behavior.
 
 ```html
 <auro-datepicker id="minDateExample" 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>
@@ -474,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
@@ -522,6 +505,7 @@ 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>
@@ -534,6 +518,7 @@ 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>
@@ -551,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>
@@ -568,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>
@@ -588,6 +577,7 @@ 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>
@@ -601,6 +591,7 @@ 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>
@@ -632,6 +623,7 @@ 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="mobileHeadline">value Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -644,6 +636,7 @@ 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="mobileHeadline">value Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -659,6 +652,7 @@ 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="mobileHeadline">valueEnd Example</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Choose a date</span>
@@ -672,6 +666,7 @@ 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="mobileHeadline">valueEnd Example</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
@@ -680,6 +675,35 @@ Value of the second input (end date), selected for the datepicker. Can be used t
 <!-- 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 -->
+</auro-accordion>
+
 ### Method Examples
 
 #### focus
@@ -690,6 +714,7 @@ The focus method will apply focus state to the datepicker's input field.
   <!-- 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>
@@ -705,6 +730,7 @@ The focus method will apply focus state to the datepicker's input field.
 
 ```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>
@@ -744,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>
@@ -756,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>
@@ -765,12 +793,13 @@ 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="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>
@@ -784,6 +813,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 ```html
 <auro-datepicker>
+  <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>
@@ -800,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>
@@ -812,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>
@@ -827,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>
@@ -840,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>
@@ -862,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>
@@ -881,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>
@@ -905,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>
@@ -924,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>
@@ -938,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
 
@@ -948,6 +1028,7 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <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="mobileHeadline">Reset Example</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Choose a date</span>
@@ -962,6 +1043,7 @@ Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd`
 
 ```html
 <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="mobileHeadline">Reset Example</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
@@ -992,6 +1074,7 @@ 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="mobileHeadline">dynamic slot  Example</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Choose a date</span>
@@ -1005,6 +1088,7 @@ 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="mobileHeadline">dynamic slot  Example</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Choose a date</span>
@@ -1146,6 +1230,7 @@ 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>
@@ -1158,6 +1243,7 @@ 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>
@@ -1189,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 />
@@ -1206,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 />
@@ -1243,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});