@aurodesignsystem/auro-formkit 2.2.1-beta.3 → 3.0.0

package/components/counter/README.md

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

package/components/counter/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/counter/demo/api.md

@@ -5,13 +5,14 @@
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default     | Description                           |
-|------------|------------|-----------|-------------|---------------------------------------|
-| [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled. |
-| [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.    |
-| [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.    |
-| [validity](#validity) | `validity` | `string`  | "undefined" | The validity state of the counter.    |
-| [value](#value)    | `value`    | `number`  | "undefined" | The current value of the counter.     |
+| Property   | Attribute  | Type      | Default     | Description                                      |
+|------------|------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled.            |
+| [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.               |
+| [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.               |
+| [onDark](#onDark)   | `onDark`   | `boolean` | false       | If declared, the counter will be rendered with onDark styles. |
+| [validity](#validity) | `validity` | `string`  | "undefined" | The validity state of the counter.               |
+| [value](#value)    | `value`    | `number`  | "undefined" | The current value of the counter.                |
 
 ## Methods
 
@@ -43,11 +44,12 @@
 | [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`  | "sm"           | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
 | [isDropdown](#isDropdown)              | `isDropdown`              | `boolean` | false          | Indicates if the counter group is displayed as a dropdown. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | [max](#max)                     | `max`                     | `number`  | "undefined"    | The maximum value allowed for the whole group of counters. |
 | [min](#min)                     | `min`                     | `number`  | "undefined"    | The minimum value allowed for the whole group of counters. |
 | [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`. |
 | [offset](#offset)                  | `offset`                  | `number`  | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                  | `onDark`                  | `boolean` | false          | If declared, counters and dropdown will be rendered with onDark styles. |
 | [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" |
 | [total](#total)                   | `total`                   | `number`  | "undefined"    | The total value of the counters.                 |
 | [validity](#validity)                | `validity`                | `string`  | "undefined"    | Reflects the validity state.                     |
@@ -106,6 +108,7 @@
 </auro-accordion>
 
 #### Disabled State
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/counter-disabled.html -->
@@ -115,8 +118,17 @@
   </auro-counter>
   <!-- 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-counter onDark disabled value="0">
+    Disabled counter
+    <span slot="description">This counter cannot be modified</span>
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-disabled.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/counter-disabled.html -->
 
@@ -126,7 +138,14 @@
   <span slot="description">This counter cannot be modified</span>
 </auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+<auro-counter onDark disabled value="0">
+  Disabled counter
+  <span slot="description">This counter cannot be modified</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Counter Group