@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.5 → 0.0.0-pr624.50

package/components/dropdown/demo/api.md

@@ -19,8 +19,8 @@
 | [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. |
 | [common](#common)                | `common`                |           | ` Boolean `                                      |                | If declared, the dropdown will be styled with the common theme. |
-| [commonLabelClasses](#commonLabelClasses)    |                         | readonly  | `object`                                         |                |                                                  |
-| [commonWrapperClasses](#commonWrapperClasses)  |                         | readonly  | `{ trigger: boolean; wrapper: boolean; hasFocus: boolean \| undefined; simple: boolean \| undefined; }` |                |                                                  |
+| [commonWrapperClasses](#commonWrapperClasses)  |                         | readonly  | `{ trigger: boolean; wrapper: boolean; hasFocus: boolean \| undefined; simple: boolean \| undefined; parentBorder: boolean; }` |                |                                                  |
+| [disableFocusTrap](#disableFocusTrap)      | `disableFocusTrap`      |           | `boolean`                                        |                | If declare, 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`                                         | ""             | Contains the help text message for the current validity error. |
@@ -41,7 +41,7 @@
 | [onSlotChange](#onSlotChange)          | `onSlotChange`          |           |                                                  |                |                                                  |
 | [placement](#placement)             | `placement`             |           | `string`                                         | "bottom-start" | Position where the bib should appear relative to the trigger. |
 | [rounded](#rounded)               | `rounded`               |           | ` Boolean `                                      |                | If declared, will apply border-radius to trigger and default slots. |
-| [shape](#shape)                 |                         |           | `string`                                         | "rounded"      |                                                  |
+| [shape](#shape)                 |                         |           | `string`                                         | "classic"      |                                                  |
 | [simple](#simple)                | `simple`                |           | `boolean`                                        |                | If declared, applies a border around the trigger slot. |
 | [size](#size)                  |                         |           | `string`                                         | "xl"           |                                                  |
 
@@ -50,6 +50,7 @@
 | 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.              |
 
@@ -847,8 +848,9 @@ 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">
@@ -865,6 +867,9 @@ 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>
@@ -883,6 +888,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>
@@ -915,8 +923,9 @@ 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">
@@ -933,6 +942,9 @@ 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>
@@ -951,6 +963,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>
@@ -1020,7 +1035,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) -->
@@ -1424,17 +1439,16 @@ 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
-@use "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska" as v;
-@use "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables" as vac;
+@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: transparent;
+  --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-dropdown-helptext-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});
@@ -1445,10 +1459,9 @@ The component may be restyled using the following code sample and changing the v
   --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: transparent;
+  --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-inverse, #{v.$ds-basic-color-texticon-inverse});
-  --ds-auro-dropdown-helptext-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});