@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

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@2.2.1-beta.3/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/api.html

@@ -22,7 +22,8 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>

package/components/dropdown/demo/api.md

@@ -31,6 +31,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.      |
 | [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. |
@@ -86,6 +87,17 @@ 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/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-dropdown onDark 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) -->
@@ -100,6 +112,15 @@ 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">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicIcon.html) -->
@@ -173,15 +194,26 @@ The most basic, simple version of `auro-dropdown`.
 Adds the border style around the dropdown trigger.
 
 <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 -->
+  <!-- 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/onDarkBordered.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkBordered.html -->
+  <auro-dropdown onDark aria-label="custom label" bordered>
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -197,6 +229,15 @@ 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" bordered>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### chevron
@@ -331,37 +372,35 @@ Adds the bib visibility state chevron to the right side of the trigger content.
 Disables the trigger preventing the dropdown bib from being shown.
 
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-<auro-dropdown aria-label="custom label" disabled>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-dropdown
+    aria-label="custom label"
+    disabled
+    chevron
+    rounded
+    inset
+    bordered>
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+    <span slot="helpText">
+      Helper text
+    </span>
+    <span slot="label">
+      Name
+    </span>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-
-```html
-<auro-dropdown aria-label="custom label" disabled>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledAll.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabledAll.html -->
+<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-dropdown
     aria-label="custom label"
     disabled
+    onDark
     chevron
     rounded
     inset
@@ -381,8 +420,8 @@ Disables the trigger preventing the dropdown bib from being shown.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledAll.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabledAll.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 
 ```html
 <auro-dropdown
@@ -405,6 +444,28 @@ 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-dropdown
+  aria-label="custom label"
+  disabled
+  onDark
+  chevron
+  rounded
+  inset
+  bordered>
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+  <span slot="helpText">
+    Helper text
+  </span>
+  <span slot="label">
+    Name
+  </span>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### error
@@ -414,8 +475,43 @@ Adds the error state UI to the trigger.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-dropdown aria-label="custom label" error>
-    Lorem ipsum solar
+  <auro-dropdown common error id="commonSlotError">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#commonSlotError').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <span slot="label">
+      Element label (default text will be read by screen reader)
+    </span>
+    <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/onDarkError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+  <auro-dropdown onDark common error id="commonSlotErrorOnDark">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#commonSlotErrorOnDark').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <span slot="label">
+      Element label (default text will be read by screen reader)
+    </span>
     <div slot="trigger">
       Trigger
     </div>
@@ -428,49 +524,46 @@ Adds the error state UI to the trigger.
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-dropdown aria-label="custom label" error>
-  Lorem ipsum solar
+<auro-dropdown common error id="commonSlotError">
+  <div style="padding: var(--ds-size-150);">
+    Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#commonSlotError').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <span slot="label">
+    Element label (default text will be read by screen reader)
+  </span>
   <div slot="trigger">
     Trigger
   </div>
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorBordered.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/errorBordered.html -->
-  <auro-dropdown
-    aria-label="custom label"
-    inset
-    error
-    rounded
-    bordered>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+<auro-dropdown onDark common error id="commonSlotErrorOnDark">
+  <div style="padding: var(--ds-size-150);">
     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/errorBordered.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/errorBordered.html -->
-
-```html
-<auro-dropdown
-  aria-label="custom label"
-  inset
-  error
-  rounded
-  bordered>
-  Lorem ipsum solar
+    <br />
+    <auro-button onclick="document.querySelector('#commonSlotErrorOnDark').hide()">
+      Dismiss Dropdown
+    </auro-button>
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <span slot="label">
+    Element label (default text will be read by screen reader)
+  </span>
   <div slot="trigger">
     Trigger
   </div>
-</auro-dropdown>
-```
+</auro-dropdown>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1321,20 +1414,18 @@ 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/tokens/SCSSVariables';
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+@import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
 
 :host {
-  --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
-  --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-  --ds-auro-dropdown-popover-border-color: transparent;
-  --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
-  --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
+  --ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
   --ds-auro-dropdown-trigger-border-color: transparent;
   --ds-auro-dropdown-trigger-outline-color: transparent;
-  --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --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-color-container-primary-default, #{$ds-color-container-primary-default});
-  --ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --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});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->