@aurodesignsystem/auro-formkit 6.1.0 → 6.2.0

package/components/dropdown/demo/api.md

@@ -11,32 +11,34 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 |---------------------------|---------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
 | `a11yRole`                |                           | `string`                                         |                  | The value for the role attribute of the trigger element. |
 | `appearance`              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
-| `autoPlacement`           | `autoPlacement`           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
+| `autoPlacement`           | `autoplacement`           | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
 | `chevron`                 | `chevron`                 | `boolean`                                        |                  | If declared, the dropdown displays a chevron on the right. |
-| `desktopModal`            | `desktopModal`            | `boolean`                                        |                  | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
-| `disableEventShow`        | `disableEventShow`        | `boolean`                                        |                  | If declared, the dropdown will only show by calling the API .show() public method. |
-| `disableKeyboardHandling` | `disableKeyboardHandling` | `boolean`                                        |                  | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
+| `desktopModal`            | `desktopmodal`            | `boolean`                                        |                  | If declared, the dropdown will behave as a modal dialog when in a desktop viewport size. |
+| `disableEventShow`        | `disableeventshow`        | `boolean`                                        |                  | If declared, the dropdown will only show by calling the API .show() public method. |
+| `disableKeyboardHandling` | `disablekeyboardhandling` | `boolean`                                        |                  | If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior. |
 | `disabled`                | `disabled`                | `boolean`                                        |                  | If declared, the dropdown is not interactive.    |
+| `dropdownWidth`           | `dropdownwidth`           | `number`                                         |                  | Sets the width of the dropdown bib in pixels.    |
 | `error`                   | `error`                   | `boolean`                                        |                  | If declared, will apply error UI to the dropdown. |
-| `errorMessage`            | `errorMessage`            | `string`                                         | "undefined"      | Contains the help text message for the current validity error. |
-| `focusShow`               | `focusShow`               | `boolean`                                        |                  | If declared, the bib will display when focus is applied to the trigger. |
-| `fullscreenBreakpoint`    | `fullscreenBreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| `hoverToggle`             | `hoverToggle`             | `boolean`                                        |                  | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
-| `isBibFullscreen`         | `isBibFullscreen`         | `boolean`                                        | false            | If true, the dropdown bib is taking the fullscreen when it's open. |
+| `errorMessage`            | `errormessage`            | `string`                                         | "undefined"      | Contains the help text message for the current validity error. |
+| `focusShow`               | `focusshow`               | `boolean`                                        |                  | If declared, the bib will display when focus is applied to the trigger. |
+| `fullscreenBreakpoint`    | `fullscreenbreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| `hoverToggle`             | `hovertoggle`             | `boolean`                                        |                  | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
+| `isBibFullscreen`         | `isbibfullscreen`         | `boolean`                                        | false            | If true, the dropdown bib is taking the fullscreen when it's open. |
 | `isPopoverVisible`        | `open`                    | `boolean`                                        | false            | If true, the dropdown bib is displayed.          |
 | `layout`                  | `layout`                  | `'classic' \| 'emphasized' \| 'snowflake'`       | "'classic'"      | Sets the layout of the dropdown.                 |
-| `matchWidth`              | `matchWidth`              | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
-| `noFlip`                  | `noFlip`                  | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| `noHideOnThisFocusLoss`   | `noHideOnThisFocusLoss`   | `boolean`                                        | false            | If declared, the dropdown will not hide when moving focus outside the element. |
-| `noToggle`                | `noToggle`                | `boolean`                                        |                  | If declared, the trigger will only show the dropdown bib. |
+| `matchWidth`              | `matchwidth`              | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
+| `noFlip`                  | `noflip`                  | `boolean`                                        |                  | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| `noHideOnThisFocusLoss`   | `nohideonthisfocusloss`   | `boolean`                                        | false            | If declared, the dropdown will not hide when moving focus outside the element. |
+| `noToggle`                | `notoggle`                | `boolean`                                        |                  | If declared, the trigger will only show the dropdown bib. |
 | `offset`                  | `offset`                  | `number`                                         | "0"              | Gap between the trigger element and bib.         |
-| `onDark`                  | `onDark`                  | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
-| `onSlotChange`            | `onSlotChange`            |                                                  |                  | If declared, and a function is set, that function will execute when the slot content is updated. |
+| `onDark`                  | `ondark`                  | `boolean`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
+| `onSlotChange`            |                           | `() => void`                                     |                  | If declared, and a function is set, that function will execute when the slot content is updated. |
 | `placement`               | `placement`               | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
-| `shape`                   |                           |                                                  | "undefined"      |                                                  |
+| `shape`                   | `shape`                   | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "undefined"      | Sets the shape of the dropdown.                  |
 | `shift`                   | `shift`                   | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
 | `simple`                  | `simple`                  | `boolean`                                        |                  | If declared, applies a border around the trigger slot. |
-| `size`                    |                           |                                                  | "undefined"      |                                                  |
+| `size`                    | `size`                    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`           | "undefined"      | Sets the size of the dropdown.                   |
+| `tabIndex`                | `tabindex`                | `number`                                         |                  | Sets the tabindex applied to the dropdown trigger for keyboard focus order. |
 
 ## Methods
 
@@ -49,11 +51,11 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 
 ## Events
 
-| Event                       | Type                                 | Description                                      |
-|-----------------------------|--------------------------------------|--------------------------------------------------|
-| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
-| `auroDropdown-toggled`      |                                      | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` | `CustomEvent<any>`                   | Notifies that the trigger has been clicked.      |
+| Event                       | Type                          | Description                                      |
+|-----------------------------|-------------------------------|--------------------------------------------------|
+| `auroDropdown-idAdded`      | `CustomEvent<{ id: string }>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
+| `auroDropdown-toggled`      |                               | Notifies that the visibility of the dropdown bib has changed. |
+| `auroDropdown-triggerClick` | `CustomEvent<any>`            | Notifies that the trigger has been clicked.      |
 
 ## Slots
 
@@ -71,4 +73,5 @@ The `auro-dropdown` element provides a way to place content in a bib that can be
 | `helpText` | The helpText content container.                  |
 | `size`     | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
 | `trigger`  | The trigger content container.                   |
+| `wrapper`  | The trigger wrapper element surrounding the trigger content and chevron. |
 <!-- AURO-GENERATED-CONTENT:END -->