@aurodesignsystem/auro-formkit 5.2.2 → 5.3.0

package/components/datepicker/demo/api.md

@@ -39,6 +39,7 @@
 | [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. |
@@ -659,12 +660,13 @@ Set stacked attribute to make range datepicker stacked style.
 </auro-accordion>
 
 ### Customized bib position
-The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
+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) -->
@@ -685,6 +687,16 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       <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>
@@ -711,6 +723,16 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     <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>