@aurodesignsystem-dev/auro-formkit 0.0.0-pr1112.0 → 0.0.0-pr1118.1

package/components/combobox/demo/api.md

@@ -35,6 +35,7 @@
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  |           | `string`              |                            | Custom help text message to display when validity = `customError`. |
 | [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`              | "xl"                       |                                                  |
 | [triggerIcon](#triggerIcon)                   | `triggerIcon`                   |           | `boolean`             | false                      | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
 | [type](#type)                          | `type`                          |           | `string`              |                            | Applies the defined value as the type attribute on auro-input. |
@@ -1264,12 +1265,13 @@ export function auroMenuLoadingExample() {
 </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) -->
@@ -1313,6 +1315,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
         <auro-menuoption static nomatch>No matching option</auro-menuoption>
       </auro-menu>
+    </auro-combobox>
+    <auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
+      <span slot="bib.fullscreen.headline">Bib Header</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+      <auro-menu>
+        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+        <auro-menuoption static nomatch>No matching option</auro-menuoption>
+      </auro-menu>
     </auro-combobox>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1362,6 +1377,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
+  </auro-combobox>
+  <auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
   </auro-combobox>
 </div>
 ```