@aurodesignsystem/auro-formkit 2.0.0-beta.51 → 2.0.0-beta.53

package/components/counter/demo/index.md

@@ -15,284 +15,134 @@ The `auro-counter` component is a ui element that enables a way to increment or
 
 ## Examples
 
-### Basic
+### 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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-counter-group>
-    <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:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
+  <auro-counter>
+    Adults
+  </auro-counter>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <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 -->
+  <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 -->
 
 ```html
-<auro-counter-group>
-  <auro-counter>
-    Short label
-  </auro-counter>
+<auro-counter>
+  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">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-description.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-description.html -->
   <auro-counter>
-    Another short label
+    Adults
+    <span slot="description">18 years or older</span>
   </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>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-description.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-description.html -->
+
+```html
+<auro-counter>
+  Adults
+  <span slot="description">18 years or older</span>
+</auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Description slot
+### 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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/description.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-counter-group>
     <auro-counter>
       Short label
-      <span slot="description"
-        >This is an example of a long sub label wrapping behavior</span
-      >
     </auro-counter>
     <auro-counter>
-      This is an example of the wrapping behavior for a long label
-      <span slot="description">with short sub label text</span>
+      Another short label
     </auro-counter>
     <auro-counter>
       This is an example of the wrapping behavior for a long label
-      <span slot="description"
-        >Combined with an example of a long sub label wrapping behavior</span
-      >
     </auro-counter>
   </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/description.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/description.html -->
+  <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 -->
 
 ```html
 <auro-counter-group>
   <auro-counter>
     Short label
-    <span slot="description"
-      >This is an example of a long sub label wrapping behavior</span
-    >
   </auro-counter>
   <auro-counter>
-    This is an example of the wrapping behavior for a long label
-    <span slot="description">with short sub label text</span>
+    Another short label
   </auro-counter>
   <auro-counter>
     This is an example of the wrapping behavior for a long label
-    <span slot="description"
-      >Combined with an example of a long sub label wrapping behavior</span
-    >
   </auro-counter>
 </auro-counter-group>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Dropdown
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
-  <div style="max-width: 350px;">
-    <auro-counter-group isDropdown>
-      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-      <div slot="label">Passengers</div>
-      <auro-counter>
-        Adults
-        <span slot="description">18 years or older</span>
-      </auro-counter>
-      <auro-counter>
-        Children
-        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-      </auro-counter>
-      <auro-counter>
-        Lap Infants
-        <span slot="description">Under 2 years</span>
-      </auro-counter>
-    </auro-counter-group>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
-
-```html
-<div style="max-width: 350px;">
-  <auro-counter-group isDropdown>
-    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-    <div slot="label">Passengers</div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-    </auro-counter>
-    <auro-counter>
-      Lap Infants
-      <span slot="description">Under 2 years</span>
-    </auro-counter>
-  </auro-counter-group>
-</div>
-```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Dropdown with custom value text
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
-  <div style="max-width: 350px;">
-    <auro-counter-group isDropdown>
-      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-      <div slot="valueText">Custom value text</div>
-      <div slot="label"></div>
-      <auro-counter>
-        Adults
-        <span slot="description">18 years or older</span>
-      </auro-counter>
-      <auro-counter>
-        Children
-        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-      </auro-counter>
-      <auro-counter>
-        Lap Infants
-        <span slot="description">Under 2 years</span>
-      </auro-counter>
-    </auro-counter-group>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-value-text.html -->
-
-```html
-<div style="max-width: 350px;">
-  <auro-counter-group isDropdown>
-    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-    <div slot="valueText">Custom value text</div>
-    <div slot="label"></div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-    </auro-counter>
-    <auro-counter>
-      Lap Infants
-      <span slot="description">Under 2 years</span>
-    </auro-counter>
-  </auro-counter-group>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Dropdown with help text
+### 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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-help-text.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-help-text.html -->
-  <div style="max-width: 350px;">
-    <auro-counter-group isDropdown>
-      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-      <div slot="helpText">This is help text</div>
-      <auro-counter>
-        Adults
-        <span slot="description">18 years or older</span>
-      </auro-counter>
-      <auro-counter>
-        Children
-        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-      </auro-counter>
-      <auro-counter>
-        Lap Infants
-        <span slot="description">Under 2 years</span>
-      </auro-counter>
-    </auro-counter-group>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-help-text.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-help-text.html -->
-
-```html
-<div style="max-width: 350px;">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-basic.html -->
   <auro-counter-group isDropdown>
-    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
-    <div slot="helpText">This is help text</div>
+    <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">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-    </auro-counter>
-    <auro-counter>
-      Lap Infants
-      <span slot="description">Under 2 years</span>
-    </auro-counter>
-  </auro-counter-group>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Disabled
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-counter-group>
-    <auro-counter disabled>
-      Short label
-    </auro-counter>
-    <auro-counter disabled>
-      This is an example of the wrapping behavior for a long label
-      <span slot="description">with short sub label text</span>
+      <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>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+  <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 -->
 
 ```html
-<auro-counter-group>
-  <auro-counter disabled>
-    Short label
+<auro-counter-group 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 disabled>
-    This is an example of the wrapping behavior for a long label
-    <span slot="description">with short sub label text</span>
+  <auro-counter>
+    Children
+    <span slot="description">2-17 years</span>
   </auro-counter>
 </auro-counter-group>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/components/counter/demo/index.min.js

@@ -1307,7 +1307,7 @@ var styleCss$6 = i$g`.counter{display:flex;align-items:center;justify-content:sp
  *
  * @element auro-counter
  * @extends LitElement
- * @slot Default - Main label content for the counter.
+ * @slot default - Main label content for the counter.
  * @slot description - Descriptive content for the counter.
  */
 class AuroCounter extends r$9 {
@@ -5512,7 +5512,7 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '6.1.2';
 
-var styleCss$3 = i$5`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
+var styleCss$3 = i$5`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5521,6 +5521,7 @@ var styleCss$3 = i$5`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-head
 /**
  * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
  *
+ * @attr {Boolean} no-margin-block - if declared, margin-block will be set to `0`
  * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
  * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
@@ -5653,7 +5654,7 @@ class AuroHeader extends r {
   }
 }
 
-var headerVersion = '3.0.0';
+var headerVersion = '4.0.0';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5752,7 +5753,7 @@ class AuroBibtemplate extends r {
           <button id="closeButton" @click="${this.onCloseButtonClick}">
             <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
           </button>
-          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header">
+          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
             <slot name="header"></slot>
           </${this.headerTag}>
           <span id="subheader">
@@ -5835,12 +5836,12 @@ if (!customElements.get("auro-counter-wrapper")) {
  *
  * @element auro-counter-group
  * @extends LitElement
- * @slot Default - Slot for counter elements.
- * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options
- * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib
- * @slot Label - Dropdown label content. Only used when `isDropdown` is true.
- * @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
- * @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
+ * @slot default - Slot for counter elements.
+ * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
+ * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
+ * @slot label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 class AuroCounterGroup extends r$9 {
   constructor() {
@@ -5948,7 +5949,7 @@ class AuroCounterGroup extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
       largeFullscreenHeadline: {
@@ -6123,7 +6124,10 @@ class AuroCounterGroup extends r$9 {
       this.bibtemplate.querySelectorAll(`[slot="${targetSlot}"]`).forEach((old) => old.remove());
 
       event.target.assignedNodes().forEach((node) => {
-        const clone = node.cloneNode(true);
+        const clone = node.cloneNode();
+        [...node.childNodes].forEach((child) => {
+          clone.append(child);
+        });
         clone.setAttribute('slot', targetSlot);
         this.bibtemplate.append(clone);
       });

package/components/counter/demo/readme.html

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-counter custom element</title>
+    <link
+      rel="stylesheet"
+      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" 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>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./readme.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+
+      initExamples();
+    </script>
+  </body>
+</html>

package/components/counter/demo/readme.md

@@ -0,0 +1,146 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+
+README.md is created by running `npm run build:docs`.
+
+This file is generated based on a template fetched from
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
+
+The following sections are editable by making changes to the following files:
+
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+
+# Counter
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Getting Started
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+
+#### NPM Installation
+
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+
+### Import Options
+
+#### Automatic Registration
+
+For automatic registration, simply import the component:
+
+```javascript
+// Registers <auro-counter> automatically
+import '@aurodesignsystem/auro-formkit/auro-counter';
+```
+
+#### Custom Registration
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCounter.register('custom-counter')` method on the component class and pass in a unique name.
+
+```javascript
+// Import the class only
+import { AuroCounter } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+
+// Register with a custom name if desired
+AuroCounter.register('custom-counter');
+```
+
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+
+This configuration enables proper module resolution for the component's TypeScript files.
+<!-- AURO-GENERATED-CONTENT:END -->
+**Reference component in HTML**
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
+```html
+<auro-counter-group>
+  <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 -->
+
+### Design Token CSS Custom Property dependency
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+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.0.0-beta.52/auro-counter/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-counter use cases
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `auro-counter` element should be used in situations where users may:
+
+* Need to input a numeric value within a defined range
+* Need a user-friendly interface for quantity selection
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Formkit development
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+
+### Filtering
+
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+
+To only develop a single component, use the `--filter` flag:
+
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
+<!-- AURO-GENERATED-CONTENT:END -->