@aurodesignsystem-dev/auro-formkit 0.0.0-pr1175.0 → 0.0.0-pr1183.1

package/components/datepicker/demo/api.md

@@ -34,6 +34,7 @@
 | [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`. |
@@ -246,6 +247,42 @@ export function errorExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### 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/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>
+    <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/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.