@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

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

@@ -16,6 +16,7 @@ The `auro-counter` component is a ui element that enables a way to increment or
 ## Examples
 
 ### Basic Counter
+
 The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. This is the most basic implementation of a standalone counter:
 
 <div class="exampleWrapper">
@@ -26,8 +27,16 @@ The counter component provides a simple interface for incrementing or decrementi
   </auro-counter>
   <!-- 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-counter onDark>
+    Adults
+  </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/basic-standalone.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 
@@ -36,10 +45,17 @@ The counter component provides a simple interface for incrementing or decrementi
   Adults
 </auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+<auro-counter onDark>
+  Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Counter with Description
+
 Adding a description provides additional context to users. The description appears below the main label and is useful for displaying important information or requirements:
 
 <div class="exampleWrapper">
@@ -51,8 +67,17 @@ Adding a description provides additional context to users. The description appea
   </auro-counter>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
+  <auro-counter onDark>
+    Adults
+    <span slot="description">18 years or older</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/basic-description.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic-description.html -->
 
@@ -62,10 +87,18 @@ Adding a description provides additional context to users. The description appea
   <span slot="description">18 years or older</span>
 </auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
+<auro-counter onDark>
+  Adults
+  <span slot="description">18 years or older</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Basic Counter Group
+
 Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types:
 
 <div class="exampleWrapper">
@@ -84,8 +117,24 @@ Counter groups allow you to manage multiple related counters together. This is u
   </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
+  <auro-counter-group onDark>
+    <auro-counter>
+      Short label
+    </auro-counter>
+    <auro-counter>
+      Another short label
+    </auro-counter>
+    <auro-counter>
+      This is an example of the wrapping behavior for a long label
+    </auro-counter>
+  </auro-counter-group>
+  <!-- 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/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
@@ -102,10 +151,25 @@ Counter groups allow you to manage multiple related counters together. This is u
   </auro-counter>
 </auro-counter-group>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
+<auro-counter-group onDark>
+  <auro-counter>
+    Short label
+  </auro-counter>
+  <auro-counter>
+    Another short label
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+  </auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Dropdown Counter Group
+
 The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked:
 
 <div class="exampleWrapper">
@@ -125,8 +189,25 @@ The dropdown mode provides a more compact interface, ideal for forms where space
   </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
+  <auro-counter-group onDark isDropdown>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">2-17 years</span>
+    </auro-counter>
+  </auro-counter-group>
+  <!-- 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/dropdown-basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
 
@@ -144,5 +225,20 @@ The dropdown mode provides a more compact interface, ideal for forms where space
   </auro-counter>
 </auro-counter-group>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
+<auro-counter-group onDark isDropdown>
+  <div slot="bib.fullscreen.headline">Passengers</div>
+  <div slot="label">Passengers</div>
+  <auro-counter>
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <auro-counter>
+    Children
+    <span slot="description">2-17 years</span>
+  </auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>