@aurodesignsystem-dev/auro-formkit 0.0.0-pr1166.0 → 0.0.0-pr1167.0

package/components/datepicker/demo/api.md

@@ -75,16 +75,18 @@
 
 ## Slots
 
-| Name                       | Description                                      |
-|----------------------------|--------------------------------------------------|
-| `ariaLabel.bib.close`      | Sets aria-label on close button in fullscreen bib |
-| `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. |
-| [fromLabel](#fromLabel)                | Defines the label content for the first input.   |
-| [helpText](#helpText)                 | Defines the content of the helpText.             |
-| `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. |
+| Name                          | Description                                      |
+|-------------------------------|--------------------------------------------------|
+| `ariaLabel.bib.close`         | Sets aria-label on close button in fullscreen bib |
+| `ariaLabel.input.clear`       | Sets aria-label on clear button                  |
+| `ariaLabel.input.clear.range` | Sets aria-label on clear button for return date input in `layout="classic"` ONLY. |
+| `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. |
+| [fromLabel](#fromLabel)                   | Defines the label content for the first input.   |
+| [helpText](#helpText)                    | Defines the content of the helpText.             |
+| `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. |
 
 ## CSS Shadow Parts
 
@@ -962,6 +964,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 +1060,84 @@ To view this demo, set your window to a mobile screen size.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### toLabel
+#### ariaLabel.input.clear
 
-Only for use with the `range` attribute. Sets the label for the second input.
+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/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 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 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/ariaLabelInputClear.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelInputClear.html -->
+
+```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 -->
+</auro-accordion>
 
+#### ariaLabel.input.clear.range
+
+In the `classic` layout with the `range` attribute, use the `ariaLabel.input.clear.range` slot to set the `aria-label` for the clear button in the return date input. This slot is ignored in all other configurations. Otherwise, the `ariaLabel.input.clear` slot is used for both clear buttons.
+
 <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/ariaLabelInputClearRange.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ariaLabelInputClearRange.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>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="toLabel">Choose a return date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
+    <span slot="ariaLabel.input.clear.range">Return Date Clear Input Button</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/ariaLabelInputClearRange.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelInputClearRange.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>
-  <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="toLabel">Choose a return date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
+  <span slot="ariaLabel.input.clear.range">Return Date Clear Input Button</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->