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

package/components/counter/demo/api.md

@@ -31,7 +31,7 @@
 
 | Name          | Description                          |
 |---------------|--------------------------------------|
-| [Default](#Default)     | Main label content for the counter.  |
+| [default](#default)     | Main label content for the counter.  |
 | [description](#description) | Descriptive content for the counter. |
 
 # auro-counter-group
@@ -64,17 +64,257 @@
 ## Slots
 
 | Name                      | Description                                      |
-|---------------------------|--------------------------------------------------|
-| [Default](#Default)                 | Slot for counter elements.                       |
-| [HelpText](#HelpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
-| [Label](#Label)                   | Dropdown label content. Only used when `isDropdown` is true. |
-| [ValueText](#ValueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
-| `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib |
-| `bib.fullscreen.headline` | Defines the headline to display above menu-options |
+|---------------------------|--------------------------------------------------|
+| `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true. |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
+| [default](#default)                 | Slot for counter elements.                       |
+| [helpText](#helpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
+| [label](#label)                   | Dropdown label content. Only used when `isDropdown` is true. |
+| [valueText](#valueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
 
+### Counter
+
+#### Min/Max and Value
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-minmax.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-minmax.html -->
+  <auro-counter min="1" max="5" value="2">
+    Adults
+    <span slot="description">Min: 1, Max: 5</span>
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-minmax.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-minmax.html -->
+
+```html
+<auro-counter min="1" max="5" value="2">
+  Adults
+  <span slot="description">Min: 1, Max: 5</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</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 -->
+  <auro-counter 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>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-disabled.html -->
+
+```html
+<auro-counter disabled value="0">
+  Disabled counter
+  <span slot="description">This counter cannot be modified</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Group
+
+#### Group Properties
+All available counter-group properties:
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-group-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/api-group-properties.html -->
+  <!-- Example of counter-group properties -->
+  <auro-counter-group max="10" min="2" isDropdown>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <div slot="label">Group with all properties</div>
+    <div slot="helpText">Total must be between 2-10</div>
+    <div slot="valueText">Custom total display</div>
+    <auro-counter>
+      Counter 1
+    </auro-counter>
+    <auro-counter>
+      Counter 2
+    </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/api-group-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-group-properties.html -->
+
+```html
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <div slot="label">Group with all properties</div>
+  <div slot="helpText">Total must be between 2-10</div>
+  <div slot="valueText">Custom total display</div>
+  <auro-counter>
+    Counter 1
+  </auro-counter>
+  <auro-counter>
+    Counter 2
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Available Slots
+All available slots for both components:
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-slots.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/api-slots.html -->
+  <!-- Example of all available slots -->
+  <auro-counter-group isDropdown>
+    <!-- Group slots -->
+    <div slot="label">Group with all slots</div>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <div slot="helpText">Help text appears below the group</div>
+    <div slot="valueText">Custom value display</div>
+    <!-- Counter with all slots -->
+    <auro-counter>
+      Default slot content
+      <span slot="description">Description slot content</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/api-slots.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-slots.html -->
+
+```html
+<!-- Example of all available slots -->
+<auro-counter-group isDropdown>
+  <!-- Group slots -->
+  <div slot="label">Group with all slots</div>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <div slot="helpText">Help text appears below the group</div>
+  <div slot="valueText">Custom value display</div>
+  <!-- Counter with all slots -->
+  <auro-counter>
+    Default slot content
+    <span slot="description">Description slot content</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Event Handling
+Listen for `input` events to react to user interactions.
+
+<code id="eventOutput">
+  Event values will appear here
+</code><br><br>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/events.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/events.html -->
+  <auro-counter-group id="eventExample">
+    <auro-counter>
+      Adults
+    </auro-counter>
+    <auro-counter>
+      Children
+    </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/events.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
+
+```html
+<auro-counter-group id="eventExample">
+  <auro-counter>
+    Adults
+  </auro-counter>
+  <auro-counter>
+    Children
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+----
+
+```javascript
+const counter = document.getElementById('eventExample');
+counter.addEventListener('input', (event) => {
+  console.log(`Values updated: ${JSON.stringify(event.detail)}`);
+});
+```
+
+</auro-accordion>
+
+#### Custom Value Display
+<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">Passengers</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">Passengers</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>
+
 ### Group Max/Min
 
 The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
@@ -157,15 +397,16 @@ The default value of `fullscreenBreakpoint` is `sm`.
 
 Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens)
 
-To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
-You can also set `bib.fullscreen.footer` to add any additional options on fullscreen view.
+To support fullscreen bib, setting the `bib.fullscreen.headline` slot is **REQUIRED**.
+You can also set `bib.fullscreen.footer` slot to add any additional options on fullscreen view.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-mobile-properties.html) -->
   <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
   <div style="max-width: 350px;">
     <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
-      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+      <span slot="label">Passengers</span>
+      <span slot="bib.fullscreen.headline">Passengers</span>
       <div slot="helpText">This is help text</div>
       <auro-counter>
         Adults
@@ -195,7 +436,8 @@ You can also set `bib.fullscreen.footer` to add any additional options on fullsc
 ```html
 <div style="max-width: 350px;">
   <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
-    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+    <span slot="label">Passengers</span>
+    <span slot="bib.fullscreen.headline">Passengers</span>
     <div slot="helpText">This is help text</div>
     <auro-counter>
       Adults

package/components/counter/demo/api.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() {
@@ -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);
       });
@@ -6246,12 +6250,23 @@ function dropdownCounterExample() {
   });
 }
 
+function eventCounterExample() {
+  const counter = document.getElementById('eventExample');
+  const output = document.getElementById('eventOutput');
+
+  counter.addEventListener('input', (event) => {
+    output.textContent = `Values updated: ${JSON.stringify(event.detail)}`;
+  });
+}
+
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
 
 function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
     dropdownCounterExample();
+    eventCounterExample();
+
   } catch (err) {
     if (initialCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/counter/demo/index.html

@@ -47,7 +47,6 @@
     </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-dropdown@latest/dist/auro-dropdown__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>

package/components/counter/demo/index.js

@@ -8,8 +8,7 @@ AuroCounter.register('custom-counter');
 
 export function initExamples(initialCount = 0) {
   try {
-    // javascript example function calls to be added here upon creation to test examples
-    // auroMenuResetExample();
+
   } catch (err) {
     if (initialCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called