@aurodesignsystem/auro-formkit 5.6.0 → 5.7.0

package/components/dropdown/demo/api.html

@@ -54,10 +54,10 @@
       initExamples();
     </script>
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm" type="module"></script>
   </body>
 </html>

package/components/dropdown/demo/api.md

@@ -8,6 +8,7 @@
 | 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. |
@@ -26,7 +27,7 @@
 | [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.      |
+| [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"    |                                                  |
@@ -90,9 +91,9 @@ The most basic, simple version of `auro-dropdown`.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
-  <auro-dropdown onDark aria-label="custom label">
+  <!-- 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
@@ -114,9 +115,9 @@ The most basic, simple version of `auro-dropdown`.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
-<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
-<auro-dropdown onDark aria-label="custom label">
+<!-- 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
@@ -206,9 +207,9 @@ Adds the border style around the dropdown trigger.
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkBordered.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkBordered.html -->
-  <auro-dropdown onDark aria-label="custom label" layout="classic" shape="classic" size="lg">
+  <!-- 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
@@ -230,9 +231,9 @@ Adds the border style around the dropdown trigger.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkBordered.html) -->
-<!-- The below content is automatically added from ./../apiExamples/onDarkBordered.html -->
-<auro-dropdown onDark aria-label="custom label" layout="classic" shape="classic" size="lg">
+<!-- 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
@@ -392,12 +393,12 @@ 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/onDarkDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
   <auro-dropdown
     aria-label="custom label"
     disabled
-    onDark
+    appearance="inverse"
     chevron
     layout="classic" shape="classic" size="lg">
     Lorem ipsum solar
@@ -439,12 +440,14 @@ Disables the trigger preventing the dropdown bib from being shown.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+
+```html
 <auro-dropdown
   aria-label="custom label"
   disabled
-  onDark
+  appearance="inverse"
   chevron
   layout="classic" shape="classic" size="lg">
   Lorem ipsum solar
@@ -457,7 +460,8 @@ Disables the trigger preventing the dropdown bib from being shown.
   <span slot="label">
     Name
   </span>
-</auro-dropdown>
+</auro-dropdown>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -489,9 +493,9 @@ 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/onDarkError.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-  <auro-dropdown onDark layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
+  <!-- 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">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
@@ -537,9 +541,11 @@ Adds the error state UI to the trigger.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
-<!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-<auro-dropdown onDark layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inverseAppearanceError.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inverseAppearanceError.html -->
+
+```html
+<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="commonSlotErrorOnDark">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
@@ -556,7 +562,8 @@ Adds the error state UI to the trigger.
   <div slot="trigger">
     Trigger
   </div>
-</auro-dropdown>
+</auro-dropdown>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1281,7 +1288,8 @@ The component may be restyled using the following code sample and changing the v
 @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])) {
+:host(:not([ondark])),
+:host(:not([appearance="inverse"])) {
   --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-hover-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
@@ -1295,7 +1303,8 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 
-:host([ondark]) {
+:host([ondark]),
+:host([appearance="inverse"]) {
   --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-hover-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});