@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/datepicker/demo/api.md

@@ -1,54 +1,55 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- The below content is automatically added from ./../docs/api.md -->
 
-# auro-datepicker
+# auro-datepicker
+
+The `auro-datepicker` component provides users with a way to select a date or date range from a calendar popup or fullscreen calendar on mobile.
 
 ## Properties
 
-| Property                           | Attribute                         | Modifiers | Type                                             | Default                                          | Description                                      |
-|------------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
-| [appearance](#appearance)                       | `appearance`                      |           | `string`                                         | "'default'"                                      | Defines whether the component will be on lighter or darker backgrounds. |
-| [autoPlacement](#autoPlacement)                    | `autoPlacement`                   |           | `boolean`                                        | "false"                                          | If declared, bib's position will be automatically calculated where to appear. |
-| [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. |
-| [commonDisplayValueWrapperClasses](#commonDisplayValueWrapperClasses) |                                   | readonly  | `{ [x: string]: boolean; displayValueWrapper: boolean; util_displayHiddenVisually: boolean; }` |                                                  |                                                  |
-| [disabled](#disabled)                         | `disabled`                        |           | `boolean`                                        | false                                            | If set, disables the datepicker.                 |
-| [dvInputOnly](#dvInputOnly)                      | `dvInputOnly`                     |           | `boolean`                                        | false                                            | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
-| [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`. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)             | `fullscreenBreakpoint`            |           | `string`                                         | "sm"                                             | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [hasError](#hasError)                         |                                   | readonly  | `boolean`                                        |                                                  |                                                  |
-| [inputmode](#inputmode)                        | `inputmode`                       |           | `string`                                         |                                                  | Exposes inputmode attribute for input.           |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)          | `largeFullscreenHeadline`         |           | `boolean`                                        | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| [layout](#layout)                           |                                   |           | `string`                                         | "classic"                                        |                                                  |
-| [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. |
-| [noFlip](#noFlip)                           | `noFlip`                          |           | `boolean`                                        | "false"                                          | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                       | `noValidate`                      |           | `boolean`                                        | false                                            | If set, disables auto-validation on blur.        |
-| [offset](#offset)                           | `offset`                          |           | `number`                                         | "0"                                              | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                           | `onDark`                          |           | `boolean`                                        | false                                            | DEPRECATED - use `appearance` instead.           |
-| [placeholder](#placeholder)                      | `placeholder`                     |           | `string`                                         |                                                  | Placeholder text to display in the input(s) when no value is set. |
-| [placeholderEndDate](#placeholderEndDate)               | `placeholderEndDate`              |           | `string`                                         |                                                  | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
-| [placement](#placement)                        | `placement`                       |           | `string`                                         | "bottom-start"                                   | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [range](#range)                            | `range`                           |           | `boolean`                                        | false                                            | If set, turns on date range functionality in auro-calendar. |
-| [referenceDates](#referenceDates)                   | `referenceDates`                  |           | `array`                                          |                                                  | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of dates in the format of `MM-DD-YYYY`. |
-| [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`. |
-| [shape](#shape)                            |                                   |           | `string`                                         | "classic"                                        |                                                  |
-| [shift](#shift)                            | `shift`                           |           | `boolean`                                        | "false"                                          | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| [size](#size)                             |                                   |           | `string`                                         | "lg"                                             |                                                  |
-| [stacked](#stacked)                          | `stacked`                         |           | `boolean`                                        | false                                            | Set true to make datepicker stacked style.       |
-| [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". |
+| Property                          | Attribute                         | Modifiers | Type                                             | Default                                          | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
+| [appearance](#appearance)                      | `appearance`                      |           | `string`                                         | "'default'"                                      | Defines whether the component will be on lighter or darker backgrounds. |
+| [autoPlacement](#autoPlacement)                   | `autoPlacement`                   |           | `boolean`                                        | "false"                                          | If declared, bib's position will be automatically calculated where to appear. |
+| [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.                 |
+| [dvInputOnly](#dvInputOnly)                     | `dvInputOnly`                     |           | `boolean`                                        | false                                            | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
+| [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`. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)            | `fullscreenBreakpoint`            |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"                                           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [hasError](#hasError)                        |                                   | readonly  | `boolean`                                        |                                                  |                                                  |
+| [inputmode](#inputmode)                       | `inputmode`                       |           | `string`                                         |                                                  | Exposes inputmode attribute for input.           |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)         | `largeFullscreenHeadline`         |           | `boolean`                                        | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [layout](#layout)                          | `layout`                          |           | `'classic' \| 'snowflake'`                       | "'classic'"                                      | Sets the layout of the datepicker.               |
+| [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. |
+| [noFlip](#noFlip)                          | `noFlip`                          |           | `boolean`                                        | false                                            | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                      | `noValidate`                      |           | `boolean`                                        | false                                            | If set, disables auto-validation on blur.        |
+| [offset](#offset)                          | `offset`                          |           | `number`                                         | "0"                                              | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                          | `onDark`                          |           | `boolean`                                        | false                                            | DEPRECATED - use `appearance="inverse"` instead. |
+| [placeholder](#placeholder)                     | `placeholder`                     |           | `string`                                         |                                                  | Placeholder text to display in the input(s) when no value is set. |
+| [placeholderEndDate](#placeholderEndDate)              | `placeholderEndDate`              |           | `string`                                         |                                                  | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
+| [placement](#placement)                       | `placement`                       |           | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'"                                 | Position where the bib should appear relative to the trigger. |
+| [range](#range)                           | `range`                           |           | `boolean`                                        | false                                            | If set, turns on date range functionality in auro-calendar. |
+| [referenceDates](#referenceDates)                  | `referenceDates`                  |           | `array`                                          |                                                  | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of dates in the format of `MM-DD-YYYY`. |
+| [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`. |
+| [shape](#shape)                           |                                   |           | `string`                                         | "classic"                                        |                                                  |
+| [shift](#shift)                           | `shift`                           |           | `boolean`                                        | false                                            | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
+| [size](#size)                            |                                   |           | `string`                                         | "lg"                                             |                                                  |
+| [stacked](#stacked)                         | `stacked`                         |           | `boolean`                                        | false                                            | Set true to make datepicker stacked style.       |
+| [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
 
@@ -85,7 +86,8 @@
 | `bib.fullscreen.headline`  | Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout. |
 | `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.             |
+| [helpText](#helpText)                 | Defines the content of the helpText.             |
+| [label](#label)                    | Defines the label content for the entire datepicker when `layout="snowflake"`. |
 | `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. |
 
@@ -102,14 +104,12 @@
 | [trigger](#trigger)         | Use for customizing the style of the datepicker trigger. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
-
-### Basic
+## Basic
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker required="">
+  <auro-datepicker>
     <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -123,7 +123,7 @@
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker required="">
+<auro-datepicker>
   <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
@@ -133,14 +133,14 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Basic Range
+## Range
 
-When used, the datepicker will display two inputs and the component will support selection of dates for a start and end date.
+The datepicker can also be used to select a range between two dates by adding the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range minDate="07/08/2025">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/range.html -->
+  <auro-datepicker range>
     <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
@@ -148,14 +148,14 @@ When used, the datepicker will display two inputs and the component will support
     <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
 
 ```html
-<auro-datepicker range minDate="07/08/2025">
+<auro-datepicker range>
   <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
@@ -166,11 +166,250 @@ When used, the datepicker will display two inputs and the component will support
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Attribute Examples
+## Property & Attribute Examples
 
-#### disabled
+### Appearance on Dark Backgrounds
 
-If set, disables the datepicker.
+Use `appearance="inverse"` to display the datepicker on dark backgrounds.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-datepicker appearance="inverse">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+
+```html
+<auro-datepicker appearance="inverse">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-range.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-range.html -->
+  <auro-datepicker appearance="inverse" range>
+    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-range.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-range.html -->
+
+```html
+<auro-datepicker appearance="inverse" range>
+  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Customized Bib Position
+
+The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes.
+
+- `placement` specifies the preferred position where the bib should appear relative to the trigger.
+- `offset` sets the distance between the trigger and the bib.
+- When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`.
+- Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position.
+- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floater-config.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
+  <div style="width: 400px">
+    <auro-datepicker offset="20" placement="bottom-start" noFlip>
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+    <br/>
+    <auro-datepicker offset="20" placement="bottom-start">
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">bottom-start with 20px offset and flip</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+    <br/>
+    <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+  </div>
+  <div style="width: 600px; padding-top: 1em;">
+    <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
+    <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
+      <span slot="ariaLabel.bib.close">Close Calendar</span>
+      <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+      <span slot="fromLabel">Departure</span>
+      <span slot="toLabel">Return</span>
+      <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+    </auro-datepicker>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floater-config.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
+
+```html
+<div style="width: 400px">
+  <auro-datepicker offset="20" placement="bottom-start" noFlip>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <br/>
+  <auro-datepicker offset="20" placement="bottom-start">
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">bottom-start with 20px offset and flip</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <br/>
+  <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+</div>
+<div style="width: 600px; padding-top: 1em;">
+  <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
+  <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+  </auro-datepicker>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Start & End Date
+
+The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.
+
+In <strong>desktop</strong>, the calendar month navigation will be restricted by these dates. In <strong>mobile</strong>, the following logic is used:
+
+- if both `calendarStartDate` and `calendarEndDate` are defined: all months between, including these dates, will be rendered.
+- If only `calendarStartDate` is defined: 12 months will be rendered starting with this value.
+- if only `calendarEndDate` is defined: The current date month through the value of this 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`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-start-and-end-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/calendar-start-and-end-date.html -->
+  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+    <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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/calendar-start-and-end-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/calendar-start-and-end-date.html -->
+
+```html
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+  <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Focus Date
+
+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` 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.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-focus-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/calendar-focus-date.html -->
+  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+    <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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/calendar-focus-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/calendar-focus-date.html -->
+
+```html
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+  <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Central Date
+
+The `centralDate` attribute can be used to force the calendar to navigate to a specific month. WARNING: Do not set the `centralDate` attribute on blur.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/central-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/central-date.html -->
+  <auro-datepicker centralDate="06/16/1980">
+    <span slot="bib.fullscreen.headline">centralDate Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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/central-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/central-date.html -->
+
+```html
+<auro-datepicker centralDate="06/16/1980">
+  <span slot="bib.fullscreen.headline">centralDate Example</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Disabled
+
+Set the `disabled` attribute to disable all interaction with the datepicker.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
@@ -195,7 +434,7 @@ If set, disables the datepicker.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### error
+#### Error
 
 Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
 
@@ -204,13 +443,14 @@ A custom error message can be set using the `error` attribute, or it can be used
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
+  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+  <br />
   <auro-datepicker error="Custom error message" id="errorExample">
     <span slot="bib.fullscreen.headline">Error Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  </auro-datepicker>
-  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+  </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -219,13 +459,14 @@ A custom error message can be set using the `error` attribute, or it can be used
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
+<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+<br />
 <auro-datepicker error="Custom error message" id="errorExample">
   <span slot="bib.fullscreen.headline">Error Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
-<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.js) -->
@@ -247,21 +488,15 @@ export function errorExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Reference Dates
+### Format
 
-You can choose to outline dates for the user to reference by passing a string containing an array of values to the component to tell it which dates are your reference dates.
-
-Example:
-```html
-<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]'></auro-datepicker>
-```
+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/referenceDates.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/referenceDates.html -->
-  <auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <!-- 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="bib.fullscreen.headline">Format Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </auro-datepicker>
@@ -269,42 +504,12 @@ Example:
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/referenceDates.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/referenceDates.html -->
-
-```html
-<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### Input Mode
-
-You can manually set the input mode for the input.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
-  <auro-datepicker inputmode="numeric">
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.dateLabel">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/inputmode.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/format.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/format.html -->
 
 ```html
-<auro-datepicker inputmode="numeric">
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<auro-datepicker format="yyyy/mm/dd">
+  <span slot="bib.fullscreen.headline">Format Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
@@ -312,36 +517,36 @@ You can manually set the input mode for the input.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### calendarStartDate & calendarEndDate
+### Fullscreen Bib
 
-The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
 
-In <strong>desktop</strong>, the calendar month navigation will be restricted by these dates. In <strong>mobile</strong>, the following logic is used:
+The default value of `fullscreenBreakpoint` is `sm`. 
 
-- 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 attribute will be rendered.
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-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`.
+To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarStartAndEndDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
-    <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
+  <auro-datepicker fullscreenBreakpoint="lg">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarStartAndEndDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/calendarStartAndEndDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
 
 ```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
-  <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
+<auro-datepicker fullscreenBreakpoint="lg">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
@@ -349,32 +554,28 @@ Note: This does not restrict setting a value outside of those date constraints.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### calendarFocusDate
+### Input Mode
 
-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` 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.
+You can manually set the input mode for the input with the `inputmode` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendarFocusDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendarFocusDate.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
-    <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+  <auro-datepicker inputmode="numeric">
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendarFocusDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/calendarFocusDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
 
 ```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
-  <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
+<auro-datepicker inputmode="numeric">
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
@@ -382,17 +583,13 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### centralDate
-
-The `centralDate` attribute can be used to force the calendar to navigate to a specific month. WARNING: Do not set the `centralDate` attribute on blur.
-
-#### maxDate
+### Max Date
 
 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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/max-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/max-date.html -->
   <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
     <span slot="bib.fullscreen.headline">maxDate Example</span>
     <span slot="fromLabel">Choose a date</span>
@@ -402,8 +599,8 @@ To give a higher limit you can bind a date to the `maxDate` attribute. It is rec
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/maxDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/maxDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/max-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/max-date.html -->
 
 ```html
 <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
@@ -414,6 +611,9 @@ To give a higher limit you can bind a date to the `maxDate` attribute. It is rec
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+#### Update Max Date
+
 Setting the `maxDate` attribute to a date earlier than the auro-datepicker `value` will result in the following changes to the component state:
 
 * `value` will to reset to `undefined`.
@@ -422,34 +622,36 @@ Setting the `maxDate` attribute to a date earlier than the auro-datepicker `valu
 This example demonstrates that behavior.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMaxDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/updateMaxDate.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-max-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/update-max-date.html -->
+  <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
+  <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
+  <br />
   <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
     <span slot="bib.fullscreen.headline">maxDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">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>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/updateMaxDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/updateMaxDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-max-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/update-max-date.html -->
 
 ```html
+<auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
+<auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
+<br />
 <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
   <span slot="bib.fullscreen.headline">maxDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">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>
+</auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/updateMaxDate.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/updateMaxDate.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-max-date.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/update-max-date.js -->
 
 ```js
 function formatDateString(date) {
@@ -491,13 +693,13 @@ export function updateMaxDateExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### minDate
+### Min Date
 
 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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/min-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/min-date.html -->
   <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
     <span slot="bib.fullscreen.headline">minDate Example</span>
     <span slot="fromLabel">Choose a date</span>
@@ -507,8 +709,8 @@ To give a lower limit you can bind a date to the `minDate` attribute. It is reco
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/minDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/minDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/min-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/min-date.html -->
 
 ```html
 <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
@@ -519,6 +721,9 @@ To give a lower limit you can bind a date to the `minDate` attribute. It is reco
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+#### Update Min Date
+
 Setting the `minDate` attribute to a date later than the auro-datepicker `value` will result in the following changes to the component state:
 
 * `value` will to reset to `undefined`.
@@ -527,34 +732,36 @@ Setting the `minDate` attribute to a date later than the auro-datepicker `value`
 This example demonstrates that behavior.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/updateMinDate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/updateMinDate.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-min-date.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/update-min-date.html -->
+  <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
+  <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
+  <br />
   <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
     <span slot="bib.fullscreen.headline">minDate Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">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>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/updateMinDate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/updateMinDate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-min-date.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/update-min-date.html -->
 
 ```html
+<auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
+<auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
+<br />
 <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
   <span slot="bib.fullscreen.headline">minDate Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">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>
+</auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/updateMinDate.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/updateMinDate.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-min-date.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/update-min-date.js -->
 
 ```js
 function formatDateString(date) {
@@ -596,15 +803,56 @@ export function updateMinDateExample() {
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+### Month Names 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="bib.fullscreen.headline">Localization Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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="bib.fullscreen.headline">Localization Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">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>
 
-#### noValidate
+### No Validate
 
-When set, the datepicker will not validate when navigating away from the component.
+Set `noValidate` to force the datepicker not to validate when navigating away from the component.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noValidate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/noValidate.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-validate.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/no-validate.html -->
   <auro-datepicker required noValidate>
     <span slot="bib.fullscreen.headline">noValidate Example</span>
     <span slot="fromLabel">Choose a date</span>
@@ -614,8 +862,8 @@ When set, the datepicker will not validate when navigating away from the compone
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noValidate.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/noValidate.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-validate.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/no-validate.html -->
 
 ```html
 <auro-datepicker required noValidate>
@@ -627,7 +875,43 @@ When set, the datepicker will not validate when navigating away from the compone
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### required
+### Reference Dates
+
+You can choose to outline dates for the user to reference by passing a string containing an array of values to the component to tell it which dates are your reference dates.
+
+Example:
+```html
+<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]'></auro-datepicker>
+```
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reference-dates.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/reference-dates.html -->
+  <auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">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/reference-dates.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/reference-dates.html -->
+
+```html
+<auro-datepicker referenceDates='["10-05-2025", "10-15-2025", "10-20-2025", "10-22-2025"]' minDate="10-12-2025">
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Required
 
 Populates the `required` attribute on the input. Used for client-side validation.
 
@@ -641,6 +925,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </auro-datepicker>
+  <br />
   <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
     <span slot="bib.fullscreen.headline">Required Example</span>
     <span slot="fromLabel">Departure</span>
@@ -660,6 +945,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
+<br />
 <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
   <span slot="bib.fullscreen.headline">Required Example</span>
   <span slot="fromLabel">Departure</span>
@@ -670,9 +956,9 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### stacked
+### Stacked
 
-Set stacked attribute to make range datepicker stacked style.
+Set the `stacked` attribute to make range datepicker stacked style.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/stacked.html) -->
@@ -699,97 +985,20 @@ Set stacked attribute to make range datepicker stacked style.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Customized bib position
-The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes.
-
-- `placement` specifies the preferred position where the bib should appear relative to the trigger.
-- `offset` sets the distance between the trigger and the bib.
-- When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`.
-- Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position.
-- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/floaterConfig.html -->
-  <div style="width: 400px">
-    <auro-datepicker offset="20" placement="bottom-start" noFlip>
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
-      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    </auro-datepicker>
-    <auro-datepicker offset="20" placement="bottom-start">
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">bottom-start with 20px offset and flip</span>
-      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    </auro-datepicker>
-    <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
-      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    </auro-datepicker>
-  </div>
-  <div style="width: 600px; padding-top: 1em;">
-    <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
-    <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
-      <span slot="ariaLabel.bib.close">Close Calendar</span>
-      <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-      <span slot="fromLabel">Departure</span>
-      <span slot="toLabel">Return</span>
-      <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
-    </auro-datepicker>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floaterConfig.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/floaterConfig.html -->
-
-```html
-<div style="width: 400px">
-  <auro-datepicker offset="20" placement="bottom-start" noFlip>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
-    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  </auro-datepicker>
-  <auro-datepicker offset="20" placement="bottom-start">
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">bottom-start with 20px offset and flip</span>
-    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  </auro-datepicker>
-  <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
-    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  </auro-datepicker>
-</div>
-<div style="width: 600px; padding-top: 1em;">
-  <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
-  <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
-  </auro-datepicker>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### validity
+### Validity
 
 Specifies the `validityState` the element is in. Upon first interaction, or presetting the `error` attribute, the component will validate on `focusout`. After validation, `validityState` can be queried from the component by using the following JavaScript.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/validity.html) -->
   <!-- The below content is automatically added from ./../apiExamples/validity.html -->
+  <auro-button id="validityExampleBtn">Get validity</auro-button>
+  <br />
   <auro-datepicker required id="validityExample">
     <span slot="bib.fullscreen.headline">validity Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </auro-datepicker>
-  <auro-button id="validityExampleBtn">Get validity</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -798,12 +1007,13 @@ Specifies the `validityState` the element is in. Upon first interaction, or pres
 <!-- The below code snippet is automatically added from ./../apiExamples/validity.html -->
 
 ```html
+<auro-button id="validityExampleBtn">Get validity</auro-button>
+<br />
 <auro-datepicker required id="validityExample">
   <span slot="bib.fullscreen.headline">validity Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-</auro-datepicker>
-<auro-button id="validityExampleBtn">Get validity</auro-button>
+</auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/validity.js) -->
@@ -823,9 +1033,9 @@ export function validityExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### value
+### Value
 
-Value selected for the datepicker. Can be used to pre-set the value of the datepicker. When the `range` attribute is used, `value` is for the first input.
+The `value` attribute represents the value selected for the datepicker. Can be used to pre-set the value of the datepicker. When the `range` attribute is used, `value` is for the first input.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
@@ -852,13 +1062,13 @@ Value selected for the datepicker. Can be used to pre-set the value of the datep
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### valueEnd
+### Value of Second Input in Range Mode
 
-Value of the second input (end date), selected for the datepicker. Can be used to pre-set the value of the datepicker. Only applicable for a datepicker with the `range` attribute.
+The `valueEnd` attribute represents the value of the second input (end date), selected for the datepicker. Can be used to pre-set the value of the datepicker. Only applicable for a datepicker with the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueEnd.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/valueEnd.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value-end.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/value-end.html -->
   <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
     <span slot="bib.fullscreen.headline">valueEnd Example</span>
     <span slot="fromLabel">Departure</span>
@@ -869,8 +1079,8 @@ Value of the second input (end date), selected for the datepicker. Can be used t
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueEnd.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueEnd.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-end.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/value-end.html -->
 
 ```html
 <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
@@ -883,197 +1093,259 @@ Value of the second input (end date), selected for the datepicker. Can be used t
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### format
+## Method Examples
+
+### Focus
 
-The `format` attribute is used to define the date format used by the datepicker. The default value is `mm/dd/yyyy`.
+The `focus()` method will apply focus state to the datepicker's input field.
 
 <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="bib.fullscreen.headline">Format Headline</span>
-    <span slot="fromLabel">Choose a date</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/focus.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 />
+  <auro-datepicker id="focusExampleElem" range>
+    <span slot="bib.fullscreen.headline">Focus Example</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
     <span slot="bib.fullscreen.dateLabel">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 -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/focus.html -->
 
 ```html
-<auro-datepicker format="yyyy/mm/dd">
-  <span slot="bib.fullscreen.headline">Format Headline</span>
-  <span slot="fromLabel">Choose a date</span>
+<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 />
+<auro-datepicker id="focusExampleElem" range>
+  <span slot="bib.fullscreen.headline">Focus Example</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/focus.js -->
 
-### Method Examples
+```js
+export function focusExample() {
+  const focusExampleElem = document.querySelector('#focusExampleElem');
+  const focusExampleBtn = document.querySelector('#focusExampleBtn');
+  const focusExampleBtnTwo = document.querySelector('#focusExampleBtnTwo');
+
+  focusExampleBtn.addEventListener('click', () => {
+    focusExampleElem.focus();
+  });
+
+  focusExampleBtnTwo.addEventListener('click', () => {
+    focusExampleElem.focus('endDate');
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### focus
+### Reset State
 
-The focus method will apply focus state to the datepicker's input field.
+Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd` and `validity` state. Doing so will preserve all other attributes and properties.
 
 <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="bib.fullscreen.headline">Focus Example</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <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="bib.fullscreen.headline">Reset Example</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="bib.fullscreen.dateLabel">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-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<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="bib.fullscreen.headline">Reset Example</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Event Examples
+
+### Watch for Value Changes
+
+The following example listens for the `auroDatePicker-valueSet` event. Once triggered, `element.value` may be queried for the new value **and** in successful scenarios, an alert will appear. Open the JavaScript console in the browser's developer tools to see the `console.warn` message that appears after the `auroDatePicker-valueSet` event has been triggered.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alert-value.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/alert-value.html -->
+  <auro-datepicker id="datePickerValueAlert">
+    <span slot="bib.fullscreen.headline">Alert Value Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/focus.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alert-value.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/alert-value.html -->
 
 ```html
-<auro-datepicker id="focusExampleElem" range>
-  <span slot="bib.fullscreen.headline">Focus Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
+<auro-datepicker id="datePickerValueAlert">
+  <span slot="bib.fullscreen.headline">Alert Value Example</span>
+  <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">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) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/focus.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alert-value.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/alert-value.js -->
 
 ```js
-export function focusExample() {
-  const focusExampleElem = document.querySelector('#focusExampleElem');
-  const focusExampleBtn = document.querySelector('#focusExampleBtn');
-  const focusExampleBtnTwo = document.querySelector('#focusExampleBtnTwo');
-
-  focusExampleBtn.addEventListener('click', () => {
-    focusExampleElem.focus();
-  });
+export function alertValueExample() {
+  const valueAlertExample = document.querySelector('#datePickerValueAlert');
 
-  focusExampleBtnTwo.addEventListener('click', () => {
-    focusExampleElem.focus('endDate');
-  });
+  valueAlertExample.addEventListener('auroDatePicker-valueSet', () => {
+    console.warn('Select value changed to:', valueAlertExample.value);
+    alert(`Select value changed to: ${valueAlertExample.value}`);
+  })
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Slot Examples
+## Slot Examples
 
-#### fromLabel
+### Aria Label for Clear Button
 
-Sets the label used for the input. When the `range` attribute is used this is the first of two inputs.
+Use the `ariaLabel.input.clear` slot to set the `aria-label` for the clear button in the trigger input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker required="">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-input-clear.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/aria-label-input-clear.html -->
+  <auro-datepicker>
     <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/aria-label-input-clear.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/snowflake/aria-label-input-clear.html -->
+  <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="label">Date</span>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    <span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label-input-clear.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/aria-label-input-clear.html -->
 
 ```html
-<auro-datepicker required="">
+<auro-datepicker>
   <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### toLabel
-
-Only for use with the `range` attribute. Sets the label for the second input.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range minDate="07/08/2025">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/aria-label-input-clear.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/aria-label-input-clear.html -->
 
 ```html
-<auro-datepicker range minDate="07/08/2025">
+<auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
   <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+  <span slot="label">Date</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  <span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### helpText
+### Fullscreen Bib Date Label and Headline
 
-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.
+Use the `bib.fullscreen.dateLabel` and `bib.fullscreen.headline` slots to set the the label at the top of the bib and headline when viewed in the mobile layout.
+To view this demo, set your window to a mobile screen size.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker>
-    <span slot="bib.fullscreen.headline">helpText Example</span>
+    <span slot="ariaLabel.bib.close">Close Calendar</span>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    <span slot="helpText">Choose a date must be today or earlier.</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/helpText.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/helpText.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-datepicker>
-  <span slot="bib.fullscreen.headline">helpText Example</span>
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  <span slot="helpText">Choose a date must be today or earlier.</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### bib.fullscreen.dateLabel and bib.fullscreen.headline
+### From Label
 
-Sets the headline and the label at the top of the bib when viewed in the mobile layout. 
-To view this demo, set your window to a mobile screen size.
+The `fromLabel` slot sets the label used for the input. When the `range` attribute is used this is the first of two inputs.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker required="">
+  <auro-datepicker>
     <span slot="ariaLabel.bib.close">Close Calendar</span>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
@@ -1087,7 +1359,7 @@ To view this demo, set your window to a mobile screen size.
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker required="">
+<auro-datepicker>
   <span slot="ariaLabel.bib.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
@@ -1097,53 +1369,71 @@ To view this demo, set your window to a mobile screen size.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### ariaLabel.input.clear
+### To Label
 
-Use the `ariaLabel.input.clear` slot to set the `aria-label` for the clear button in the trigger input.
+The `toLabel` slot sets the label for the second input. Only for use with the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelInputClear.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/ariaLabelInputClear.html -->
-  <auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/range.html -->
+  <auro-datepicker range>
     <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
+    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ariaLabelInputClear.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/snowflake/ariaLabelInputClear.html -->
-  <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="label">Date</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
+
+```html
+<auro-datepicker range>
+  <span slot="ariaLabel.bib.close">Close Calendar</span>
+  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Help Text
+
+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/help-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/help-text.html -->
+  <auro-datepicker>
+    <span slot="bib.fullscreen.headline">helpText Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-    <span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
+    <span slot="helpText">Choose a date must be today or earlier.</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelInputClear.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelInputClear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
 
 ```html
 <auro-datepicker>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="bib.fullscreen.headline">helpText Example</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
+  <span slot="helpText">Choose a date must be today or earlier.</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Date Slot
+### Date Slot
 
 Custom content can be added to any day in the calendar using a `slot` named following the pattern `date_{MM}_{DD}_{YYYY}` (e.g. `date_01_08_2024`).
 
@@ -1154,8 +1444,8 @@ Slot content support is limited to text only and a maximum of five (5) character
 Slot content can be styled using [inline styles](https://www.codecademy.com/article/html-inline-styles) or [CSS Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/) (`part="dateSlot"`).
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dateSlot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dateSlot.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/date-slot.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/date-slot.html -->
   <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
     <span slot="bib.fullscreen.headline">dateSlot Example</span>
     <span slot="fromLabel">Choose a date</span>
@@ -1172,8 +1462,8 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dateSlot.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dateSlot.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/date-slot.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/date-slot.html -->
 
 ```html
 <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
@@ -1192,15 +1482,15 @@ Slot content can be styled using [inline styles](https://www.codecademy.com/arti
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Popover Slot
+### Popover Slot
 
 Custom content can be added to any day's `auro-popover` in the calendar using a `slot` named following the pattern `popover_{MM}_{DD}_{YYYY}` (e.g. `popover_01_08_2024`).
 
 The popover slot is intended for use with calendar dates that are `disabled` (e.g. before minimum date or after maximum date).
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverSlot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/popoverSlot.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-slot.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/popover-slot.html -->
   <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
     <span slot="bib.fullscreen.headline">Popover Slot Example</span>
     <span slot="fromLabel">Choose a date</span>
@@ -1217,8 +1507,8 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popoverSlot.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/popoverSlot.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popover-slot.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/popover-slot.html -->
 
 ```html
 <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
@@ -1237,103 +1527,15 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### 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="bib.fullscreen.headline">Localization Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.dateLabel">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="bib.fullscreen.headline">Localization Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.dateLabel">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
-
-Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd` and `validity` state. Doing so will preserve all other attributes and properties.
-
-<div class="exampleWrapper">
-  <!-- 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="bib.fullscreen.headline">Reset Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-  </auro-datepicker>
-  <auro-button id="resetStateBtn">Reset</auro-button>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
-
-```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="bib.fullscreen.headline">Reset Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.dateLabel">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) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
-
-```js
-export function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
-    elem.reset();
-  });
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+## Common Usage Patterns & Functional Examples
 
-#### Dynamic Slot Content
+### Dynamic Slot Content
 
 This example demonstrates data driven slot content for days in the calendar. In this example, the slot content is inserted into each `auro-calendar-cell` after the bib of the `auro-datepicker` is opened, simulating an API call on a dynamic data source.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamicSlot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dynamicSlot.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic-slot.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dynamic-slot.html -->
   <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
     <span slot="bib.fullscreen.headline">dynamic slot  Example</span>
     <span slot="fromLabel">Departure</span>
@@ -1344,8 +1546,8 @@ This example demonstrates data driven slot content for days in the calendar. In
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamicSlot.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dynamicSlot.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-slot.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-slot.html -->
 
 ```html
 <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
@@ -1356,8 +1558,8 @@ This example demonstrates data driven slot content for days in the calendar. In
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamicSlot.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dynamicSlot.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-slot.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-slot.js -->
 
 ```js
 export function populateSlotContentExample() {
@@ -1483,56 +1685,13 @@ export function populateSlotContentExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Watch for value changes
-
-The following example listens for the `auroDatePicker-valueSet` event. Once triggered, `element.value` may be queried for the new value **and** in successful scenarios, an alert will appear. Open the JavaScript console in the browser's developer tools to see the `console.warn` message that appears after the `auroDatePicker-valueSet` event has been triggered.
-
-<div class="exampleWrapper">
-  <!-- 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="bib.fullscreen.headline">Alert Value Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.dateLabel">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/alertValue.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/alertValue.html -->
-
-```html
-<auro-datepicker id="datePickerValueAlert">
-  <span slot="bib.fullscreen.headline">Alert Value Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alertValue.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/alertValue.js -->
-
-```js
-export function alertValueExample() {
-  const valueAlertExample = document.querySelector('#datePickerValueAlert');
-
-  valueAlertExample.addEventListener('auroDatePicker-valueSet', () => {
-    console.warn('Select value changed to:', valueAlertExample.value);
-    alert(`Select value changed to: ${valueAlertExample.value}`);
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### in Dialog
+### Datepicker in Dialog
 
-The component can be in a dialog.
+The following example demonstrates the use of `<auro-datepicker>` within an `<auro-dialog>` component.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inDialog.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
   <div>
     <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
     <auro-dialog id="datepicker-dialog">
@@ -1547,8 +1706,8 @@ The component can be in a dialog.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
 
 ```html
 <div>
@@ -1563,8 +1722,8 @@ The component can be in a dialog.
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
 
 ```js
 export function inDialogExample() {
@@ -1577,9 +1736,9 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Theme Support
+## Restyle Component with CSS Variables
 
-The component may be restyled using the following code sample and changing the values of the following token(s).
+The component may be restyled by changing the values of the following token(s).
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->