@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.1

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/api.md

@@ -7,36 +7,43 @@
 
 | Attribute          | Type        | Description                                      |
 |--------------------|-------------|--------------------------------------------------|
+| [bordered](#bordered)         | ` Boolean ` | If declared, applies a border around the trigger slot. |
 | [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. |
-| [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. |
-| [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.          |
-| [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. |
+| Property                | Attribute               | Modifiers | 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. |
+| [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; }` |                |                                                  |
+| [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. |
+| [fluid](#fluid)                 | `fluid`                 |           | `Boolean`                                        |                | Makes the trigger to be full width of its parent container. |
+| [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.          |
+| [layout](#layout)                |                         |           | `string`                                         | "default"      |                                                  |
+| [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. |
+| [rounded](#rounded)               | `rounded`               |           | ` Boolean `                                      |                | If declared, will apply border-radius to trigger and default slots. |
+| [shape](#shape)                 |                         |           | `string`                                         | "rounded"      |                                                  |
+| [simple](#simple)                | `simple`                |           | `boolean`                                        |                | If declared, applies a border around the trigger slot. |
+| [size](#size)                  |                         |           | `string`                                         | "xl"           |                                                  |
 
 ## Methods
 
@@ -1417,18 +1424,35 @@ 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/alaska/SCSSVariables--alaska" as v;
+@use "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables" as vac;
 
-: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});
+: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-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-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});
+  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+}
+
+: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: transparent;
+  --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});
+  --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->