@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/dropdown/demo/api.md

@@ -1,39 +1,41 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- The below content is automatically added from ./../docs/api.md -->
 
-# auro-dropdown
+# auro-dropdown
+
+The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
 
 ## Properties
 
-| Property                | Attribute               | Type        | Default        | Description                                      |
-|-------------------------|-------------------------|-------------|----------------|--------------------------------------------------|
-| `a11yRole`              |                         |             |                | The value for the role attribute of the trigger element. |
-| [appearance](#appearance)            | `appearance`            | `string`    | "'default'"    | Defines whether the component will be on lighter or darker backgrounds. |
-| [autoPlacement](#autoPlacement)         | `autoPlacement`         | `boolean`   | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [chevron](#chevron)               | `chevron`               | ` Boolean ` |                | If declared, the dropdown displays a chevron on the right. |
-| [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 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. |
-| [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`   | false          | If true, the dropdown bib is taking the fullscreen when it's open. |
-| [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`   |                | DEPRECATED - use `appearance` instead.           |
-| [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"    |                                                  |
-| [shift](#shift)                 | `shift`                 | `boolean`   | "false"        | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| [simple](#simple)                | `simple`                | `boolean`   |                | If declared, applies a border around the trigger slot. |
-| [size](#size)                  |                         |             | "undefined"    |                                                  |
+| Property                | Attribute               | Type                                             | Default          | Description                                      |
+|-------------------------|-------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
+| `a11yRole`              |                         |                                                  |                  | The value for the role attribute of the trigger element. |
+| [appearance](#appearance)            | `appearance`            | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
+| [autoPlacement](#autoPlacement)         | `autoPlacement`         | `boolean`                                        |                  | If declared, bib's position will be automatically calculated where to appear. |
+| [chevron](#chevron)               | `chevron`               | `boolean`                                        |                  | If declared, the dropdown displays a chevron on the right. |
+| [disableEventShow](#disableEventShow)      | `disableEventShow`      | `boolean`                                        |                  | 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, will apply error UI to the dropdown. |
+| [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`  | `'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)           | `hoverToggle`           | `boolean`                                        |                  | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
+| [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`                                        | false            | If true, the dropdown bib is taking the fullscreen when it's open. |
+| [isPopoverVisible](#isPopoverVisible)      | `open`                  | `boolean`                                        | false            | If true, the dropdown bib is displayed.          |
+| [layout](#layout)                | `layout`                | `'classic' \| 'emphasized' \| 'snowflake'`       | "'classic'"      | Sets the layout of the dropdown.                 |
+| [matchWidth](#matchWidth)            | `matchWidth`            | `boolean`                                        | false            | If declared, the popover and trigger will be set to the same width. |
+| [noFlip](#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) | `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`                                        |                  | DEPRECATED - use `appearance="inverse"` instead. |
+| [onSlotChange](#onSlotChange)          | `onSlotChange`          |                                                  |                  | If declared, and a function is set, that function will execute when the slot content is updated. |
+| [placement](#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](#shape)                 |                         |                                                  | "undefined"      |                                                  |
+| [shift](#shift)                 | `shift`                 | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
+| [simple](#simple)                | `simple`                | `boolean`                                        |                  | If declared, applies a border around the trigger slot. |
+| [size](#size)                  |                         |                                                  | "undefined"      |                                                  |
 
 ## Methods
 
@@ -48,7 +50,7 @@
 
 | Event                       | Type                                 | Description                                      |
 |-----------------------------|--------------------------------------|--------------------------------------------------|
-| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` |                                                  |
+| `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.      |
 
@@ -66,18 +68,15 @@
 |------------|--------------------------------------------------|
 | [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
+## Basic
 
-The most basic, simple version of `auro-dropdown`.
+The following examples demonstrate basic usage of the `auro-dropdown` component with different types of trigger content.
 
-#### Text content in trigger
+### Text
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -90,17 +89,6 @@ The most basic, simple version of `auro-dropdown`.
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-dropdown appearance="inverse" aria-label="custom label">
-    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/basic.html) -->
@@ -115,8 +103,8 @@ The most basic, simple version of `auro-dropdown`.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
 <auro-dropdown appearance="inverse" aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
@@ -126,11 +114,11 @@ The most basic, simple version of `auro-dropdown`.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Icon content in trigger
+### Icon
 
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicIcon.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basicIcon.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-icon.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-icon.html -->
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
@@ -143,8 +131,8 @@ The most basic, simple version of `auro-dropdown`.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicIcon.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicIcon.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-icon.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-icon.html -->
 
 ```html
 <auro-dropdown aria-label="custom label">
@@ -158,9 +146,12 @@ The most basic, simple version of `auro-dropdown`.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+### Button
+
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButton.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basicButton.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-button.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-button.html -->
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
@@ -173,8 +164,8 @@ The most basic, simple version of `auro-dropdown`.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicButton.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicButton.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-button.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-button.html -->
 
 ```html
 <auro-dropdown aria-label="custom label">
@@ -189,41 +180,30 @@ The most basic, simple version of `auro-dropdown`.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Property Examples
+## Property & Attribute Examples
 
-#### bordered
+### Appearance on Dark Backgrounds
 
-Adds the border style around the dropdown trigger.
+Use the `appearance="inverse"` attribute to ensure proper styling when the dropdown is used on dark backgrounds.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/bordered.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/bordered.html -->
-  <auro-dropdown aria-label="custom label" bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceBordered.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceBordered.html -->
-  <auro-dropdown appearance="inverse" aria-label="custom label" layout="classic" shape="classic" size="lg">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-dropdown appearance="inverse" aria-label="custom label">
+  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/bordered.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/bordered.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
 
 ```html
-<auro-dropdown aria-label="custom label" bordered>
+<auro-dropdown appearance="inverse" aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
@@ -231,20 +211,22 @@ Adds the border style around the dropdown trigger.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceBordered.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearanceBordered.html -->
-<auro-dropdown appearance="inverse" aria-label="custom label" layout="classic" shape="classic" size="lg">
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-dropdown appearance="inverse" aria-label="custom label">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 
-#### chevron
+### Chevron
 
-Adds the bib visibility state chevron to the right side of the trigger content.
+Use the `chevron` attribute to add a chevron icon to the dropdown trigger.
 
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron.html) -->
@@ -272,102 +254,10 @@ Adds the bib visibility state chevron to the right side of the trigger content.
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronIcon.html) -->
-<!-- The below content is automatically added from ./../apiExamples/chevronIcon.html -->
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronIcon.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/chevronIcon.html -->
-
-```html
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronButton.html) -->
-<!-- The below content is automatically added from ./../apiExamples/chevronButton.html -->
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button slot="trigger">
-      Dropdown
-    </auro-button>
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronButton.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/chevronButton.html -->
-
-```html
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button slot="trigger">
-      Dropdown
-    </auro-button>
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronInput.html) -->
-<!-- The below content is automatically added from ./../apiExamples/chevronInput.html -->
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      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/chevronInput.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/chevronInput.html -->
-
-```html
-<auro-dropdown aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 
-#### disabled
+### Disabled
 
-Disables the trigger preventing the dropdown bib from being shown.
+Use the `disabled` attribute to disable interaction with the dropdown.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
@@ -376,15 +266,13 @@ Disables the trigger preventing the dropdown bib from being shown.
     aria-label="custom label"
     disabled
     chevron
-    rounded
-    inset
-    bordered>
+    layout="classic" shape="classic" size="lg">
     Lorem ipsum solar
     <div slot="trigger">
       Trigger
     </div>
     <span slot="helpText">
-      Helper text
+      Help text
     </span>
     <span slot="label">
       Name
@@ -393,8 +281,8 @@ Disables the trigger preventing the dropdown bib from being shown.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
   <auro-dropdown
     aria-label="custom label"
     disabled
@@ -406,7 +294,7 @@ Disables the trigger preventing the dropdown bib from being shown.
       Trigger
     </div>
     <span slot="helpText">
-      Helper text
+      Help text
     </span>
     <span slot="label">
       Name
@@ -424,15 +312,13 @@ Disables the trigger preventing the dropdown bib from being shown.
   aria-label="custom label"
   disabled
   chevron
-  rounded
-  inset
-  bordered>
+  layout="classic" shape="classic" size="lg">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
   </div>
   <span slot="helpText">
-    Helper text
+    Help text
   </span>
   <span slot="label">
     Name
@@ -440,8 +326,8 @@ Disables the trigger preventing the dropdown bib from being shown.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
 
 ```html
 <auro-dropdown
@@ -455,7 +341,7 @@ Disables the trigger preventing the dropdown bib from being shown.
     Trigger
   </div>
   <span slot="helpText">
-    Helper text
+    Help text
   </span>
   <span slot="label">
     Name
@@ -465,18 +351,18 @@ Disables the trigger preventing the dropdown bib from being shown.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### error
+### Error
 
-Adds the error state UI to the trigger.
+Use the `error` attribute to set persistent error state styling on the dropdown.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-dropdown common error id="commonSlotError">
+  <auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#commonSlotError').hide()">
+      <auro-button onclick="document.querySelector('#errorDropdownExample').hide()">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -493,13 +379,13 @@ Adds the error state UI to the trigger.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
-  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
+  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="errorDropdownOnDarkExample">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#commonSlotErrorOnDark').hide()">
+      <auro-button onclick="document.querySelector('#errorDropdownOnDarkExample').hide()">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -521,11 +407,11 @@ Adds the error state UI to the trigger.
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-dropdown common error id="commonSlotError">
+<auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#commonSlotError').hide()">
+    <auro-button onclick="document.querySelector('#errorDropdownExample').hide()">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -541,15 +427,15 @@ Adds the error state UI to the trigger.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearanceError.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearanceError.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-error.html -->
 
 ```html
-<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
+<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="errorDropdownOnDarkExample">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#commonSlotErrorOnDark').hide()">
+    <auro-button onclick="document.querySelector('#errorDropdownOnDarkExample').hide()">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -567,29 +453,59 @@ Adds the error state UI to the trigger.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### noToggle
+### Fullscreen Bib
 
-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.
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
+
+The default value of `fullscreenBreakpoint` is `sm`. 
+
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noToggle.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/noToggle.html -->
-  <auro-dropdown aria-label="custom label" noToggle>
-    Lorem ipsum solar
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
+  <auro-dropdown fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron id="fullscreenBreakpointExample">
+    <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.
+      </p>
+      <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.
+      </p>
+      <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.
+      </p>
+    </div>
+    <auro-button onclick="document.querySelector('#fullscreenBreakpointExample').hide()">
+      Dismiss Dropdown
+    </auro-button>
     <div slot="trigger">
       Trigger
     </div>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noToggle.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/noToggle.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
 
 ```html
-<auro-dropdown aria-label="custom label" noToggle>
-  Lorem ipsum solar
+<auro-dropdown fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron id="fullscreenBreakpointExample">
+  <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.
+    </p>
+    <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.
+    </p>
+    <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.
+    </p>
+  </div>
+  <auro-button onclick="document.querySelector('#fullscreenBreakpointExample').hide()">
+    Dismiss Dropdown
+  </auro-button>
   <div slot="trigger">
     Trigger
   </div>
@@ -598,86 +514,223 @@ In cases where it is desired behavior for `auro-dropdown` to only show, not togg
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### fullscreenBreakpoint
+### Layouts
+
+The `auro-dropdown` element supports multiple layouts to fit different design needs. The available layouts are: `classic`, `emphasized`, and `snowflake`. Each layout offers a unique visual style while maintaining the same core functionality.
 
-On mobile view, adding the `fullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode. 
+**Important**: The `emphasized` and `snowflake` layouts are designed specifically for dark backgrounds and should be used with the `appearance="inverse"` attribute.
+
+#### Classic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customDimensions300.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/customDimensions300.html -->
-  <style>
-    #customDropdown300::part(size) {
-      width: 300px;
-      max-height: 200px;
-    }
-    </style>
-  <div style="width: 300px;" aria-label="custom label">
-    <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.
-        </p>
-        <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.
-        </p>
-        <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.
-        </p>
-      </div>
-      <div slot="trigger">
-        Trigger
-      </div>
-    </auro-dropdown>
-  </div>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
+  <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#classic').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customDimensions300.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/customDimensions300.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/classic/basic.html -->
 
 ```html
-<style>
-  #customDropdown300::part(size) {
-    width: 300px;
-    max-height: 200px;
-  }
-  </style>
-<div style="width: 300px;" aria-label="custom label">
-  <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.
-      </p>
-      <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.
-      </p>
-      <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.
-      </p>
+<auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#classic').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
+  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+        Dismiss Dropdown
+      </auro-button>
     </div>
+    <span slot="helpText">
+      Help text
+    </span>
     <div slot="trigger">
       Trigger
     </div>
   </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Customized bib position
-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.
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/floaterConfig.html -->
-  <style>
+```html
+<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Emphasized
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+  <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-dropdown>
+  <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-dropdown>
+  <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
+
+```html
+<auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-dropdown>
+<auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-dropdown>
+<auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Snowflake
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
+  <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
+
+```html
+<auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Customized Bib Position
+
+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/floater-config.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
+  <style>
     .floaterConfigDropdown::part(size) {
       width: 300px;
       max-height: 200px;
@@ -769,8 +822,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floaterConfig.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/floaterConfig.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floater-config.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
 
 ```html
 <style>
@@ -865,57 +918,47 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Slot Examples
-
-#### default
-
-All examples shown on this page include default slot content.
-
-#### trigger
+### Match Width
 
-Content defined in the `trigger` slot will be rendered in the clickable trigger of the dropdown that is used to display the bib. Focus state visual effects will be disabled on the trigger when it contains a focusable element other than `<auro-input>`.
-
-This slot may contain any static content (e.g. plain text) and/or no more than one of the following elements:
-- `<a>`
-- `<auro-hyperlink>`
-- `<button>`
-- `<auro-button>`
-- `<input>`
-- `<auro-input>`
-
-#### label
-
-Content defined in the `label` slot will be rendered left aligned inside the trigger above all other defined trigger slot content.
+When the `matchWidth` attribute is applied, the width of the dropdown bib will match the width of the trigger element.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/label.html -->
-  <auro-dropdown
-    bordered
-    rounded
-    inset
-    chevron>
-    Lorem ipsum solar
-    <span slot="label">Name</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-width.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/match-width.html -->
+  <auro-dropdown id="common" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#common').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
     <div slot="trigger">
       Trigger
     </div>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/label.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/label.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-width.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/match-width.html -->
 
 ```html
-<auro-dropdown
-  bordered
-  rounded
-  inset
-  chevron>
-  Lorem ipsum solar
-  <span slot="label">Name</span>
+<auro-dropdown id="common" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#common').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
   <div slot="trigger">
     Trigger
   </div>
@@ -924,43 +967,29 @@ Content defined in the `label` slot will be rendered left aligned inside the tri
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### helpText
+### No Toggle
 
-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.
+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.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
-  <auro-dropdown
-    aria-label="custom label"
-    inset
-    bordered
-    rounded>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-toggle.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/no-toggle.html -->
+  <auro-dropdown aria-label="custom label" noToggle>
     Lorem ipsum solar
-    <span slot="helpText">
-      Helper text
-    </span>
     <div slot="trigger">
       Trigger
     </div>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/helpText.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/helpText.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-toggle.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/no-toggle.html -->
 
 ```html
-<auro-dropdown
-  aria-label="custom label"
-  inset
-  bordered
-  rounded>
+<auro-dropdown aria-label="custom label" noToggle>
   Lorem ipsum solar
-  <span slot="helpText">
-    Helper text
-  </span>
   <div slot="trigger">
     Trigger
   </div>
@@ -969,65 +998,82 @@ Content defined in the `helpText` slot will be rendered left aligned below the t
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#####
+## Method Examples
+
+### Hide
+
+The `hide()` method can be called from within the default slot content. This is useful for cases such as `auro-select` when the dropdown should be collapsed after making a selection.
+
+The `hide()` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`.
 
-When combined with the `error` property the `helpText` slot content is colored red.
+This example demonstrations collapsing the dropdown by clicking a button within the dropdown bib content.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpTextError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/helpTextError.html -->
-  <auro-dropdown
-    aria-label="custom label"
-    inset
-    bordered
-    rounded
-    error>
-    Lorem ipsum solar
-    <span slot="helpText">
-      Helper text
-    </span>
-    <div slot="trigger">
-      Trigger
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmatically-hide.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/programmatically-hide.html -->
+  <auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
+    <p>
+      Lorem ipsum solar
+    </p>
+    <div style="padding: var(--ds-size-150);">
+      <auro-button id="hideExampleBtn" onclick="document.querySelector('#hideExample').hide()">
+        Hide Dropdown
+      </auro-button>
     </div>
+    <span slot="trigger">
+      Trigger
+    </span>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/helpTextError.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/helpTextError.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-hide.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-hide.html -->
 
 ```html
-<auro-dropdown
-  aria-label="custom label"
-  inset
-  bordered
-  rounded
-  error>
-  Lorem ipsum solar
-  <span slot="helpText">
-    Helper text
-  </span>
-  <div slot="trigger">
-    Trigger
+<auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
+  <p>
+    Lorem ipsum solar
+  </p>
+  <div style="padding: var(--ds-size-150);">
+    <auro-button id="hideExampleBtn" onclick="document.querySelector('#hideExample').hide()">
+      Hide Dropdown
+    </auro-button>
   </div>
+  <span slot="trigger">
+    Trigger
+  </span>
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-hide.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-hide.js -->
 
-### Method Examples
+```js
+export function hideExample() {
+  const btn = document.querySelector('#hideExampleBtn');
+  const dropdown = document.querySelector('#hideExample');
+
+  btn.addEventListener('click', () => {
+    dropdown.hide();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### show
+### Show
 
-The `show` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`. This example will execute the `show` method on a `keydown` event with focus in the input element.
+The `show()` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`. This example will execute the `show()` method on a `keydown` event with focus in the input element.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticallyShow.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/programmaticallyShow.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmatically-show.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/programmatically-show.html -->
   <auro-input id="showExampleTriggerInput" required>
     <span slot="label">Enter a value to show the dropdown</span>
-  </auro-input>
+  </auro-input>
+  <br />
   <auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
     <p>
       Lorem ipsum solar
@@ -1035,16 +1081,17 @@ The `show` method may also be called from anywhere in your code by executing `do
     <span slot="trigger">Trigger Label</span>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmaticallyShow.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/programmaticallyShow.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-show.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-show.html -->
 
 ```html
 <auro-input id="showExampleTriggerInput" required>
   <span slot="label">Enter a value to show the dropdown</span>
-</auro-input>
+</auro-input>
+<br />
 <auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
   <p>
     Lorem ipsum solar
@@ -1053,8 +1100,8 @@ The `show` method may also be called from anywhere in your code by executing `do
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmaticallyShow.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/programmaticallyShow.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-show.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-show.js -->
 
 ```js
 export function showExample() {
@@ -1069,80 +1116,81 @@ export function showExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### hide
-
-The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-select` when the dropdown should be collapsed after making a selection.
-
-The `hide` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`.
+## Slot Examples
+
+### Help Text
 
-This example demonstrations collapsing the dropdown by clicking a button within the dropdown bib content.
+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/programmaticallyHide.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/programmaticallyHide.html -->
-  <auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
-    <p>
-      Lorem ipsum solar
-    </p>
-    <auro-button id="hideExampleBtn">
-      Dismiss Dropdown
-    </auro-button>
-    <auro-input
-      slot="trigger"
-      id="hideExampleTrigger">
-    </auro-input>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/help-text.html -->
+  <auro-dropdown
+    aria-label="custom label"
+    inset
+    bordered
+    rounded>
+    Lorem ipsum solar
+    <span slot="helpText">
+      Helper text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
   </auro-dropdown>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmaticallyHide.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/programmaticallyHide.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
 
 ```html
-<auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
-  <p>
-    Lorem ipsum solar
-  </p>
-  <auro-button id="hideExampleBtn">
-    Dismiss Dropdown
-  </auro-button>
-  <auro-input
-    slot="trigger"
-    id="hideExampleTrigger">
-  </auro-input>
+<auro-dropdown
+  aria-label="custom label"
+  inset
+  bordered
+  rounded>
+  Lorem ipsum solar
+  <span slot="helpText">
+    Helper text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-</auro-accordion>
 
-### Other Examples
+### Trigger
+
+Content defined in the `trigger` slot will be rendered in the clickable trigger of the dropdown that is used to display the bib. Focus state visual effects will be disabled on the trigger when it contains a focusable element other than `<auro-input>`.
+
+This slot may contain any static content (e.g. plain text) and/or no more than one of the following elements:
+- `<a>`
+- `<auro-hyperlink>`
+- `<button>`
+- `<auro-button>`
+- `<input>`
+- `<auro-input>`
+- `<svg>`
+- `<auro-icon>`
 
-#### Width and Sizing Behavior
+## Common Usage Patterns & Functional Examples
+
+### Width and Sizing Behavior
 
-- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `size` part.
+- **Width:** The `auro-dropdown` element will automatically consume the full width of its parent container. Wrap the `auro-dropdown` in a container element with a defined width to control the overall width of the dropdown.
 
-- **Styling Options:** Only the following styles can be applied to the `size` part:
-  - `width`
-  - `height`
-  - `maxWidth`
-  - `maxHeight`
+- **Scroll Behavior:** When the content exceeds the specified size, the browser will provide a scroll for the overflow.
 
-- **Scroll Behavior:** When the content exceeds the specified size, the browser will provide a scroll for the overflow.
-
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customDimensions100.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/customDimensions100.html -->
-  <style>
-    #customDropdown100::part(size) {
-      width: 100px;
-      max-height: 200px;
-    }
-  </style>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-dimensions.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/custom-dimensions.html -->
   <div style="width: 100px;" aria-label="custom label">
     <auro-dropdown id="customDropdown100" layout="classic" shape="classic" size="lg" chevron>
-      <div>
+      <div style="max-height: 200px;">
         <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.
         </p>
@@ -1162,19 +1210,13 @@ This example demonstrations collapsing the dropdown by clicking a button within
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customDimensions100.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/customDimensions100.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-dimensions.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom-dimensions.html -->
 
 ```html
-<style>
-  #customDropdown100::part(size) {
-    width: 100px;
-    max-height: 200px;
-  }
-</style>
 <div style="width: 100px;" aria-label="custom label">
   <auro-dropdown id="customDropdown100" layout="classic" shape="classic" size="lg" chevron>
-    <div>
+    <div style="max-height: 200px;">
       <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.
       </p>
@@ -1194,23 +1236,23 @@ This example demonstrations collapsing the dropdown by clicking a button within
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### In Auro Dialog
+### Dropdown in Dialog
 
-The component can be in a dialog.
+The element used within an `auro-dialog`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inDialog.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
   <div>
     <auro-button id="dropdown-dialog-opener">Dropdown in Dialog</auro-button>
     <auro-dialog id="dropdown-dialog">
       <span slot="header">Dropdown in Dialog</span>
       <div slot="content">
-        <auro-dropdown id="commonSlot" common bordered rounded inset chevron>
+        <auro-dropdown id="in-dialog-dropdown" layout="classic" shape="classic" size="lg">
           <div style="padding: var(--ds-size-150);">
             Lorem ipsum solar
             <br />
-            <auro-button onclick="document.querySelector('#commonSlot').hide()">
+            <auro-button onclick="document.querySelector('#in-dialog-dropdown').hide()">
               Dismiss Dropdown
             </auro-button>
           </div>
@@ -1231,8 +1273,8 @@ The component can be in a dialog.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
 
 ```html
 <div>
@@ -1240,11 +1282,11 @@ The component can be in a dialog.
   <auro-dialog id="dropdown-dialog">
     <span slot="header">Dropdown in Dialog</span>
     <div slot="content">
-      <auro-dropdown id="commonSlot" common bordered rounded inset chevron>
+      <auro-dropdown id="in-dialog-dropdown" layout="classic" shape="classic" size="lg">
         <div style="padding: var(--ds-size-150);">
           Lorem ipsum solar
           <br />
-          <auro-button onclick="document.querySelector('#commonSlot').hide()">
+          <auro-button onclick="document.querySelector('#in-dialog-dropdown').hide()">
             Dismiss Dropdown
           </auro-button>
         </div>
@@ -1263,8 +1305,8 @@ The component can be in a dialog.
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
 
 ```js
 export function inDialogExample() {
@@ -1277,9 +1319,9 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Theme Support
+## Restyle Component with CSS Variables
 
-The component may be restyled using the following code sample and changing the values of the following token(s).
+The component may be restyled by changing the values of the following token(s).
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->