@aurodesignsystem/auro-formkit 5.6.0 → 5.8.0

package/components/datepicker/demo/api.html

@@ -50,9 +50,9 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js";

package/components/datepicker/demo/api.md

@@ -7,6 +7,7 @@
 
 | 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. |
@@ -28,11 +29,12 @@
 | [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                                            | If declared, onDark styles will be applied to the trigger. |
+| [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`. |
@@ -78,6 +80,7 @@
 | Name                       | Description                                      |
 |----------------------------|--------------------------------------------------|
 | `ariaLabel.bib.close`      | Sets aria-label on close button in fullscreen bib |
+| `ariaLabel.input.clear`    | Sets aria-label on clear button                  |
 | `bib.fullscreen.dateLabel` | Defines the content to display above selected dates in the mobile layout. |
 | `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. |
@@ -244,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.
@@ -962,6 +1001,39 @@ Sets the label used for the input. When the `range` attribute is used this is th
 <!-- 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 -->
+
+```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 -->
+</auro-accordion>
+
 #### helpText
 
 Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` attribute, the `helpText` slot can be used to describe the error.
@@ -1025,34 +1097,47 @@ To view this demo, set your window to a mobile screen size.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### toLabel
+#### ariaLabel.input.clear
+
+Use the `ariaLabel.input.clear` slot to set the `aria-label` for the clear button in the trigger input.
 
-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">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelInputClear.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ariaLabelInputClear.html -->
+  <auro-datepicker>
     <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="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/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>
+    <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/basicRange.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelInputClear.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelInputClear.html -->
 
 ```html
-<auro-datepicker range minDate="07/08/2025">
+<auro-datepicker>
   <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="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 -->
@@ -1504,11 +1589,13 @@ The component may be restyled using the following code sample and changing the v
 
 @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
-:host(:not([ondark])) {
+:host(:not([ondark])),
+:host(:not([appearance="inverse"])) {
   // datepicker
   --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
   --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
   --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-datepicker-outline-color: transparent;
 
   // calendar
   --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
@@ -1527,10 +1614,13 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 
-:host([ondark]) {
+:host([ondark]),
+:host([appearance="inverse"]) {
+  // datepicker
   --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
   --ds-auro-datepicker-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
   --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
+  --ds-auro-datepicker-outline-color: transparent;
 
   // calendar
   --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});