@aurodesignsystem/auro-formkit 4.0.1 → 5.0.0-rc-1002.1.1

package/components/dropdown/demo/api.md

@@ -3,46 +3,42 @@
 
 # auro-dropdown
 
-## Attributes
-
-| Attribute          | Type        | Description                                      |
-|--------------------|-------------|--------------------------------------------------|
-| [disableEventShow](#disableEventShow) | ` Boolean ` | If declared, the dropdown will only show by calling the API .show() public method. |
-
 ## Properties
 
 | Property                | Attribute               | Type        | Default        | Description                                      |
 |-------------------------|-------------------------|-------------|----------------|--------------------------------------------------|
-| `a11yAutocomplete`      |                         | `string`    |                | The value for the aria-autocomplete attribute of the trigger element. |
 | `a11yRole`              |                         |             |                | The value for the role attribute of the trigger element. |
 | [autoPlacement](#autoPlacement)         | `autoPlacement`         | `boolean`   | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [bordered](#bordered)              | `bordered`              | ` Boolean ` |                | If declared, applies a border around the trigger slot. |
 | [chevron](#chevron)               | `chevron`               | ` Boolean ` |                | If declared, the dropdown displays a chevron on the right. |
-| [common](#common)                | `common`                | ` Boolean ` |                | If declared, the dropdown will be styled with the common theme. |
+| [disableEventShow](#disableEventShow)      | `disableEventShow`      | ` Boolean ` | "false"        | If declared, the dropdown will only show by calling the API .show() public method. |
+| [disableFocusTrap](#disableFocusTrap)      | `disableFocusTrap`      | `boolean`   |                | If declared, the focus trap inside of bib will be turned off. |
 | [disabled](#disabled)              | `disabled`              | ` Boolean ` |                | If declared, the dropdown is not interactive.    |
-| [error](#error)                 | `error`                 | ` Boolean ` |                | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [fluid](#fluid)                 | `fluid`                 | `Boolean`   |                | Makes the trigger to be full width of its parent container. |
+| [error](#error)                 | `error`                 | ` Boolean ` |                | If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both. |
+| [errorMessage](#errorMessage)          | `errorMessage`          | `string`    | "undefined"    | Contains the help text message for the current validity error. |
 | [focusShow](#focusShow)             | `focusShow`             | ` Boolean ` |                | If declared, the bib will display when focus is applied to the trigger. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)  | `fullscreenBreakpoint`  | ` String `  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />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)           | `hoverToggle`           | ` Boolean ` |                | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
-| [inset](#inset)                 | `inset`                 | ` Boolean ` |                | If declared, will apply padding around trigger slot content. |
 | [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`   | false          | If true, the dropdown bib is taking the fullscreen when it's open. |
-| [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false          | If true, the dropdown bib is displayed.          |
+| [isPopoverVisible](#isPopoverVisible)      | `open`                  | ` Boolean ` | false          | If true, the dropdown bib is displayed.          |
+| [layout](#layout)                |                         |             | "undefined"    |                                                  |
 | [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false          | If declared, the popover and trigger will be set to the same width. |
 | [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`. |
 | [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false          | If declared, the dropdown will not hide when moving focus outside the element. |
 | [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |                | If declared, the trigger will only show the dropdown bib. |
 | [offset](#offset)                | `offset`                | `number`    | "0"            | Gap between the trigger element and bib.         |
 | [onDark](#onDark)                | `onDark`                | `boolean`   |                | If declared, onDark styles will be applied.      |
-| [onSlotChange](#onSlotChange)          | `onSlotChange`          |             |                |                                                  |
-| [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" |
-| [rounded](#rounded)               | `rounded`               | ` Boolean ` |                | If declared, will apply border-radius to trigger and default slots. |
+| [onSlotChange](#onSlotChange)          | `onSlotChange`          |             |                | If declared, and a function is set, that function will execute when the slot content is updated. |
+| [placement](#placement)             | `placement`             | `string`    | "bottom-start" | Position where the bib should appear relative to the trigger. |
+| [shape](#shape)                 |                         |             | "undefined"    |                                                  |
+| [simple](#simple)                | `simple`                | `boolean`   |                | If declared, applies a border around the trigger slot. |
+| [size](#size)                  |                         |             | "undefined"    |                                                  |
 
 ## Methods
 
 | Method           | Type       | Description                                      |
 |------------------|------------|--------------------------------------------------|
 | [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
+| [focus](#focus)          | `(): void` | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
 | [hide](#hide)           | `(): void` | Public method to hide the dropdown.              |
 | [show](#show)           | `(): void` | Public method to show the dropdown.              |
 
@@ -50,9 +46,9 @@
 
 | Event                       | Type                                 | Description                                      |
 |-----------------------------|--------------------------------------|--------------------------------------------------|
-| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
+| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` |                                                  |
 | `auroDropdown-toggled`      |                                      | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` |                                      | Notifies that the trigger has been clicked.      |
+| `auroDropdown-triggerClick` | `CustomEvent<any>`                   | Notifies that the trigger has been clicked.      |
 
 ## Slots
 
@@ -60,24 +56,26 @@
 |------------|---------------------------------------|
 |            | Default slot for the popover content. |
 | [helpText](#helpText) | Defines the content of the helpText.  |
-| [label](#label)    | Defines the content of the label.     |
 | [trigger](#trigger)  | Defines the content of the trigger.   |
 
 ## CSS Shadow Parts
 
-| Part       | Description                                  |
-|------------|----------------------------------------------|
-| [chevron](#chevron)  | The collapsed/expanded state icon container. |
-| [helpText](#helpText) | The helpText content container.              |
-| [popover](#popover)  | The bib content container.                   |
-| [trigger](#trigger)  | The trigger content container.               |
+| Part       | Description                                      |
+|------------|--------------------------------------------------|
+| [chevron](#chevron)  | The collapsed/expanded state icon container.     |
+| [helpText](#helpText) | The helpText content container.                  |
+| [popover](#popover)  | The bib content container.                       |
+| [size](#size)     | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
+| [trigger](#trigger)  | The trigger content container.                   |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
 
 ### Basic
 
-The most basic, simple version of `auro-dropdown`.
+The most basic, simple version of `auro-dropdown`.
+
+#### Text content in trigger
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -125,6 +123,9 @@ The most basic, simple version of `auro-dropdown`.
 </auro-dropdown>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+#### Icon content in trigger
+
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicIcon.html) -->
 <!-- The below content is automatically added from ./../apiExamples/basicIcon.html -->
@@ -161,9 +162,7 @@ The most basic, simple version of `auro-dropdown`.
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
+    <auro-button slot="trigger">
       Dropdown
     </auro-button>
   </div>
@@ -179,9 +178,7 @@ The most basic, simple version of `auro-dropdown`.
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
+    <auro-button slot="trigger">
       Dropdown
     </auro-button>
   </div>
@@ -210,7 +207,7 @@ Adds the border style around the dropdown trigger.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkBordered.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDarkBordered.html -->
-  <auro-dropdown onDark aria-label="custom label" bordered>
+  <auro-dropdown onDark aria-label="custom label" layout="classic" shape="classic" size="lg">
     Lorem ipsum solar
     <div slot="trigger">
       Trigger
@@ -234,7 +231,7 @@ Adds the border style around the dropdown trigger.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkBordered.html) -->
 <!-- The below content is automatically added from ./../apiExamples/onDarkBordered.html -->
-<auro-dropdown onDark aria-label="custom label" bordered>
+<auro-dropdown onDark aria-label="custom label" layout="classic" shape="classic" size="lg">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
@@ -309,9 +306,7 @@ Adds the bib visibility state chevron to the right side of the trigger content.
 <auro-dropdown aria-label="custom label" chevron>
   Lorem ipsum solar
   <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
+    <auro-button slot="trigger">
       Dropdown
     </auro-button>
   </div>
@@ -327,9 +322,7 @@ Adds the bib visibility state chevron to the right side of the trigger content.
 <auro-dropdown aria-label="custom label" chevron>
   Lorem ipsum solar
   <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
+    <auro-button slot="trigger">
       Dropdown
     </auro-button>
   </div>
@@ -405,9 +398,7 @@ Disables the trigger preventing the dropdown bib from being shown.
     disabled
     onDark
     chevron
-    rounded
-    inset
-    bordered>
+    layout="classic" shape="classic" size="lg">
     Lorem ipsum solar
     <div slot="trigger">
       Trigger
@@ -454,9 +445,7 @@ Disables the trigger preventing the dropdown bib from being shown.
   disabled
   onDark
   chevron
-  rounded
-  inset
-  bordered>
+  layout="classic" shape="classic" size="lg">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
@@ -501,7 +490,7 @@ Adds the error state UI to the trigger.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-  <auro-dropdown onDark common error id="commonSlotErrorOnDark">
+  <auro-dropdown onDark layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
@@ -549,7 +538,7 @@ Adds the error state UI to the trigger.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
 <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-<auro-dropdown onDark common error id="commonSlotErrorOnDark">
+<auro-dropdown onDark layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
@@ -570,147 +559,6 @@ Adds the error state UI to the trigger.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### fluid
-
-The `fluid` property makes the trigger to have the full width.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/fluid.html -->
-  <auro-dropdown aria-label="custom label" fluid>
-    Lorem ipsum solar
-    <div slot="trigger">
-      <auro-input
-        borderless
-        slot="trigger"
-        id="inputExampleTrigger">
-      </auro-input>
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/fluid.html -->
-
-```html
-<auro-dropdown aria-label="custom label" fluid>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      borderless
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### inset
-
-The `inset` property applies a predefined amount of CSS `padding` to the `trigger` slot content. Use this property to apply borderless style.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inset.html -->
-  <auro-dropdown aria-label="custom label" inset>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
-
-```html
-<auro-dropdown aria-label="custom label" inset>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/insetBordered.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/insetBordered.html -->
-  <auro-dropdown
-    aria-label="custom label"
-    inset
-    rounded
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/insetBordered.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/insetBordered.html -->
-
-```html
-<auro-dropdown
-  aria-label="custom label"
-  inset
-  rounded
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### rounded
-
-The `rounded` property applies `border-radius` CSS to the trigger and default slot content.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/rounded.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/rounded.html -->
-  <auro-dropdown
-    aria-label="custom label"
-    rounded
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/rounded.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/rounded.html -->
-
-```html
-<auro-dropdown
-  aria-label="custom label"
-  rounded
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 #### noToggle
 
 In cases where it is desired behavior for `auro-dropdown` to only show, not toggle, the bib content when activating the trigger the `noToggle` attribute must be applied.
@@ -756,7 +604,7 @@ On mobile view, adding the `fullscreenBreakpoint="{breakpoint-token}"` will swit
     }
     </style>
   <div style="width: 300px;" aria-label="custom label">
-    <auro-dropdown id="customDropdown300" inset bordered rounded chevron fullscreenBreakpoint="sm">
+    <auro-dropdown id="customDropdown300" layout="classic" shape="classic" size="lg" chevron fullscreenBreakpoint="sm">
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -788,7 +636,7 @@ On mobile view, adding the `fullscreenBreakpoint="{breakpoint-token}"` will swit
   }
   </style>
 <div style="width: 300px;" aria-label="custom label">
-  <auro-dropdown id="customDropdown300" inset bordered rounded chevron fullscreenBreakpoint="sm">
+  <auro-dropdown id="customDropdown300" layout="classic" shape="classic" size="lg" chevron fullscreenBreakpoint="sm">
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -827,7 +675,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     }
   </style>
   <div aria-label="custom label">
-    <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron placement="bottom-end" offset="20" noFlip>
+    <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron placement="bottom-end" offset="20" noFlip>
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -840,12 +688,13 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         </p>
       </div>
       <div slot="trigger">
-        Trigger for bottom-end bib with 20px offset and noFlip
+        Trigger
       </div>
+      <span slot="helpText">Trigger for bottom-end bib with 20px offset and noFlip</span>
     </auro-dropdown>
   </div>
   <div aria-label="custom label">
-    <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron placement="bottom-end" offset="20">
+    <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron placement="bottom-end" offset="20">
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -858,12 +707,15 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         </p>
       </div>
       <div slot="trigger">
+        Trigger
+      </div>
+      <div slot="helpText">
         Trigger for bottom-end bib with 20px offset and flip
       </div>
     </auro-dropdown>
   </div>
   <div aria-label="custom label">
-    <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron autoPlacement noFlip placement="right" offset="20">
+    <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron autoPlacement noFlip placement="right" offset="20">
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -876,6 +728,9 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         </p>
       </div>
       <div slot="trigger">
+        Trigger
+      </div>
+      <div slot="helpText">
         Trigger for right bib with 20px offset, autoPlacement and noFlip
       </div>
     </auro-dropdown>
@@ -895,7 +750,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   }
 </style>
 <div aria-label="custom label">
-  <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron placement="bottom-end" offset="20" noFlip>
+  <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron placement="bottom-end" offset="20" noFlip>
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -908,12 +763,13 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       </p>
     </div>
     <div slot="trigger">
-      Trigger for bottom-end bib with 20px offset and noFlip
+      Trigger
     </div>
+    <span slot="helpText">Trigger for bottom-end bib with 20px offset and noFlip</span>
   </auro-dropdown>
 </div>
 <div aria-label="custom label">
-  <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron placement="bottom-end" offset="20">
+  <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron placement="bottom-end" offset="20">
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -926,12 +782,15 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       </p>
     </div>
     <div slot="trigger">
+      Trigger
+    </div>
+    <div slot="helpText">
       Trigger for bottom-end bib with 20px offset and flip
     </div>
   </auro-dropdown>
 </div>
 <div aria-label="custom label">
-  <auro-dropdown class="floaterConfigDropdown" inset bordered rounded chevron autoPlacement noFlip placement="right" offset="20">
+  <auro-dropdown class="floaterConfigDropdown" layout="classic" shape="classic" size="lg" chevron autoPlacement noFlip placement="right" offset="20">
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -944,6 +803,9 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       </p>
     </div>
     <div slot="trigger">
+      Trigger
+    </div>
+    <div slot="helpText">
       Trigger for right bib with 20px offset, autoPlacement and noFlip
     </div>
   </auro-dropdown>
@@ -1013,7 +875,7 @@ Content defined in the `label` slot will be rendered left aligned inside the tri
 
 #### helpText
 
-Content defined in the `helpText` slot will be rendered left aligned below the trigger.
+Content defined in the `helpText` slot will be rendered left aligned below the trigger. This slot requires the `auro-helptext` component be used as slot content for the helptext to render with the same styles as other form elements.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
@@ -1115,7 +977,7 @@ The `show` method may also be called from anywhere in your code by executing `do
   <auro-input id="showExampleTriggerInput" required>
     <span slot="label">Enter a value to show the dropdown</span>
   </auro-input>
-  <auro-dropdown id="showMethodExample" aria-label="custom label" fluid rounded bordered inset>
+  <auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
     <p>
       Lorem ipsum solar
     </p>
@@ -1132,7 +994,7 @@ The `show` method may also be called from anywhere in your code by executing `do
 <auro-input id="showExampleTriggerInput" required>
   <span slot="label">Enter a value to show the dropdown</span>
 </auro-input>
-<auro-dropdown id="showMethodExample" aria-label="custom label" fluid rounded bordered inset>
+<auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
   <p>
     Lorem ipsum solar
   </p>
@@ -1167,7 +1029,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticallyHide.html) -->
   <!-- The below content is automatically added from ./../apiExamples/programmaticallyHide.html -->
-  <auro-dropdown id="hideExample" aria-label="custom label" fluid rounded bordered inset>
+  <auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
     <p>
       Lorem ipsum solar
     </p>
@@ -1187,7 +1049,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <!-- The below code snippet is automatically added from ./../apiExamples/programmaticallyHide.html -->
 
 ```html
-<auro-dropdown id="hideExample" aria-label="custom label" fluid rounded bordered inset>
+<auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
   <p>
     Lorem ipsum solar
   </p>
@@ -1228,7 +1090,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
     }
   </style>
   <div style="width: 100px;" aria-label="custom label">
-    <auro-dropdown id="customDropdown100" inset bordered rounded chevron>
+    <auro-dropdown id="customDropdown100" layout="classic" shape="classic" size="lg" chevron>
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -1260,7 +1122,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
   }
 </style>
 <div style="width: 100px;" aria-label="custom label">
-  <auro-dropdown id="customDropdown100" inset bordered rounded chevron>
+  <auro-dropdown id="customDropdown100" layout="classic" shape="classic" size="lg" chevron>
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -1281,52 +1143,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Truncated trigger component with fixed width
-
-`auro-dropdown` trigger component will be truncated if the text is too long than its container width.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/truncatedText.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/truncatedText.html -->
-  <div style="width: 250px;">
-    <auro-dropdown common aria-label="Label content for screen reader">
-      <div style="padding: var(--ds-size-150); width: 500px;">
-        I really prefer Alaska Airlines for my vacation travels
-      </div>
-      <span slot="helpText">
-        Help text
-      </span>
-      <div slot="trigger">
-        I really prefer Alaska Airlines for my vacation travels
-      </div>
-    </auro-dropdown>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/truncatedText.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/truncatedText.html -->
-
-```html
-<div style="width: 250px;">
-  <auro-dropdown common aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150); width: 500px;">
-      I really prefer Alaska Airlines for my vacation travels
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      I really prefer Alaska Airlines for my vacation travels
-    </div>
-  </auro-dropdown>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### in Dialog
+#### In Auro Dialog
 
 The component can be in a dialog.
 
@@ -1417,18 +1234,33 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
 ```scss
-@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
-@import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+
+:host(:not([ondark])) {
+  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-dropdown-trigger-outline-color: transparent;
+  --ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{vac.$ds-elevation-200});
+  --ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+}
 
-:host {
-  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
-  --ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-dropdown-trigger-border-color: transparent;
+:host([ondark]) {
+  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
+  --ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
   --ds-auro-dropdown-trigger-outline-color: transparent;
-  --ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
-  --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
-  --ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{vac.$ds-elevation-200});
+  --ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->