@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/counter/demo/api.md

@@ -1,69 +1,32 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- The below content is automatically added from ./../docs/api.md -->
 
-# auro-counter
-
-## Properties
-
-| Property     | Attribute    | Type      | Default     | Description                                      |
-|--------------|--------------|-----------|-------------|--------------------------------------------------|
-| [appearance](#appearance) | `appearance` | `string`  | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [disabled](#disabled)   | `disabled`   | `boolean` | false       | Indicates if the counter is disabled.            |
-| [error](#error)      | `error`      | `string`  |             | Error state and message.<br />True if set, value is the error message. |
-| [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       | DEPRECATED - use `appearance` instead.           |
-| [validity](#validity)   | `validity`   | `string`  | "undefined" | The validity state of the counter.               |
-| [value](#value)      | `value`      | `number`  | "undefined" | The current value of the counter.                |
-
-## Methods
-
-| Method      | Type                                   | Description                                      |
-|-------------|----------------------------------------|--------------------------------------------------|
-| [decrement](#decrement) | `(value?: number \| undefined): void`  | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
-| [increment](#increment) | `(value?: number \| undefined): void`  | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
-| [validate](#validate)  | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
-
-## Events
+# auro-counter-group
 
-| Event   | Type                                           |
-|---------|------------------------------------------------|
-| [input](#input) | `CustomEvent<{ value: number \| undefined; }>` |
-
-## Slots
-
-| Name              | Description                                |
-|-------------------|--------------------------------------------|
-|                   | Main label content for the counter.        |
-| `ariaLabel.minus` | Accessible label for the decrement button. |
-| `ariaLabel.plus`  | Accessible label for the increment button. |
-| [description](#description)     | Descriptive content for the counter.       |
-| [helpText](#helpText)        | Help text content for the counter.         |
-
-# auro-counter-group
+The `auro-counter-group` element provides a flexible interface for grouping multiple counters, supporting validation, custom validity messages, and disabled states based on the group's value.
 
 ## Properties
 
-| Property                  | Attribute                 | Type                     | Default        | Description                                      |
-|---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
-| [appearance](#appearance)              | `appearance`              | `string`                 | "'default'"    | Defines whether the component will be on lighter or darker backgrounds. |
-| [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [error](#error)                   | `error`                   | `string`                 |                | The current error message to display when the component is invalid. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`                 | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />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`                | false          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| [layout](#layout)                  |                           | `'classic'\|'snowflake'` |                | Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'. |
-| [matchWidth](#matchWidth)              | `matchWidth`              | `boolean`                | false          | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
-| [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          | DEPRECATED - use `appearance` instead.           |
-| [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". |
-| [shift](#shift)                   | `shift`                   | `boolean`                | "false"        | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| [total](#total)                   | `total`                   | `number`                 | "undefined"    | The total value of the counters.                 |
-| [validity](#validity)                | `validity`                | `string`                 | "undefined"    | Reflects the validity state.                     |
-| [value](#value)                   | `value`                   | `object`                 | "undefined"    | The current individual values of the nested counters. |
+| Property                  | Attribute                 | Type                                             | Default          | Description                                      |
+|---------------------------|---------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
+| [appearance](#appearance)              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
+| [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                                        | "false"          | If declared, bib's position will be automatically calculated where to appear. |
+| [error](#error)                   | `error`                   | `string`                                         |                  | The current error message to display when the component is invalid. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean`                                        | false            | If true, the counter group is displayed as a dropdown. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean`                                        | false            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [layout](#layout)                  | `layout`                  | `'classic' \| 'snowflake'`                       | "'classic'"      | Determines the layout style of the counter group when it is a dropdown. |
+| [matchWidth](#matchWidth)              | `matchWidth`              | `boolean`                                        | false            | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
+| [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            | DEPRECATED - use `appearance` instead.           |
+| [placement](#placement)               | `placement`               | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
+| [shift](#shift)                   | `shift`                   | `boolean`                                        | false            | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
+| [total](#total)                   | `total`                   | `number`                                         | "undefined"      | The total value of the counters.                 |
+| [validity](#validity)                | `validity`                | `string`                                         | "undefined"      | Reflects the validity state.                     |
+| [value](#value)                   | `value`                   | `object`                                         | "undefined"      | The current individual values of the nested counters. |
 
 ## Methods
 
@@ -89,38 +52,142 @@
 | [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. |
+| [valueText](#valueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
+
+# auro-counter
+
+The `auro-counter` element provides a flexible counter interface with increment and decrement buttons, supporting optional sub-labels and disabled states.
+
+## Properties
+
+| Property     | Attribute    | Type                     | Default     | Description                                      |
+|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
+| [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [disabled](#disabled)   | `disabled`   | `boolean`                |             | Indicates if the counter is disabled.            |
+| [error](#error)      | `error`      | `string`                 |             | Error state and message.<br />True if set, value is the error message. |
+| [max](#max)        | `max`        | `number`                 |             | The maximum value for the counter.               |
+| [min](#min)        | `min`        | `number`                 |             | The minimum value for the counter.               |
+| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [validity](#validity)   | `validity`   | `string`                 |             | The validity state of the counter.               |
+| [value](#value)      | `value`      | `number`                 |             | The current value of the counter.                |
+
+## Methods
+
+| Method      | Type                                   | Description                                      |
+|-------------|----------------------------------------|--------------------------------------------------|
+| [decrement](#decrement) | `(value?: number \| undefined): void`  | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
+| [increment](#increment) | `(value?: number \| undefined): void`  | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
+| [validate](#validate)  | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+
+## Events
+
+| Event   | Type                                           |
+|---------|------------------------------------------------|
+| [input](#input) | `CustomEvent<{ value: number \| undefined; }>` |
+
+## Slots
+
+| Name              | Description                                |
+|-------------------|--------------------------------------------|
+| `ariaLabel.minus` | Accessible label for the decrement button. |
+| `ariaLabel.plus`  | Accessible label for the increment button. |
+| [default](#default)         | Main label content for the counter.        |
+| [description](#description)     | Descriptive content for the counter.       |
+| [helpText](#helpText)        | Help text content for the counter.         |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
+## Basic Counter
+
+<div class="exampleWrapper">
+  <!-- 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-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 
-### Counter
+```html
+<auro-counter>
+  Adults
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### Min/Max and Value
+## Basic Counter Group
+
 <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">
+  <!-- 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: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 -->
+
+```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 -->
+</auro-accordion>
+
+## Counter Properties & Attribute Examples
+
+### Appearance on Dark Backgrounds
+
+Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
+
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-counter appearance="inverse">
     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 -->
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
 
 ```html
-<auro-counter min="1" max="5" value="2">
+<auro-counter appearance="inverse">
   Adults
-  <span slot="description">Min: 1, Max: 5</span>
 </auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Disabled State
+### Disabled
+
+A counter can be disabled by adding the `disabled` attribute.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-disabled.html) -->
@@ -132,8 +199,8 @@
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
   <auro-counter appearance="inverse" disabled value="0">
     Disabled counter
     <span slot="description">This counter cannot be modified</span>
@@ -152,193 +219,235 @@
 </auro-counter>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
+
+```html
 <auro-counter appearance="inverse" disabled value="0">
   Disabled counter
   <span slot="description">This counter cannot be modified</span>
-</auro-counter>
+</auro-counter>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Counter Group
+### Error
+
+A custom error can be set on the counter by adding the `error` attribute the desired message.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
+  <auro-counter error="There is an error with the counter">
+    Adults
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
+  <auro-counter appearance="inverse" error="There is an error with the 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/counter-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
+
+```html
+<auro-counter error="There is an error with the counter">
+  Adults
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-error.html -->
+
+```html
+<auro-counter appearance="inverse" error="There is an error with the counter">
+  Adults
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### Group Properties
-All available counter-group properties:
+### Min/Max and Value
+
+Use the `min`, `max`, and `value` attributes to set the minimum and maximum allowable values for the counter, as well as its initial value.
 
 <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: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/api-group-properties.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/api-group-properties.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-minmax.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-minmax.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-counter min="1" max="5" value="2">
+  Adults
+  <span slot="description">Min: 1, Max: 5</span>
+</auro-counter>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Available Slots
-All available slots for both components:
+## Counter Slot Examples
+
+### Description
+
+A description can be added with the `description` slot. 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/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="ariaLabel.minus">Custom Minus Button Label</span>
-      <span slot="ariaLabel.plus">Custom Plus Button Label</span>
-      <span slot="description">Description slot content</span>
-    </auro-counter>
-  </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/description.html -->
+  <auro-counter>
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-description.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-description.html -->
+  <auro-counter appearance="inverse">
+    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>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/api-slots.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/api-slots.html -->
+  <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 -->
 
 ```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>
+  Adults
+  <span slot="description">18 years or older</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-description.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-description.html -->
+
+```html
+<auro-counter appearance="inverse">
+  Adults
+  <span slot="description">18 years or older</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Help Text
+
+Help text is supported with counters, and can be added by targetting the `helptext` slot.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
   <auro-counter>
-    Default slot content
-    <span slot="ariaLabel.minus">Custom Minus Button Label</span>
-    <span slot="ariaLabel.plus">Custom Plus Button Label</span>
-    <span slot="description">Description slot content</span>
+    Adults
+    <span slot="helpText">This is help text for the counter</span>
   </auro-counter>
-</auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-helptext.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-helptext.html -->
+  <auro-counter appearance="inverse">
+    Adults
+    <span slot="helpText">This is help text for the counter</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-helptext.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
+
+```html
+<auro-counter>
+  Adults
+  <span slot="helpText">This is help text for the counter</span>
+</auro-counter>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-helptext.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-helptext.html -->
+
+```html
+<auro-counter appearance="inverse">
+  Adults
+  <span slot="helpText">This is help text for the counter</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Event Handling
-Listen for `input` events to react to user interactions.
+## Counter Group Properties & Attribute Examples
+
+### Appearance on Dark Backgrounds
 
-<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">
+Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
+
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
+  <auro-counter-group appearance="inverse">
     <auro-counter>
-      Adults
+      Short label
     </auro-counter>
     <auro-counter>
-      Children
+      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>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-group.html -->
 
 ```html
-<auro-counter-group id="eventExample">
+<auro-counter-group appearance="inverse">
   <auro-counter>
-    Adults
+    Short label
   </auro-counter>
   <auro-counter>
-    Children
+    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 -->
-----
-
-```javascript
-const counter = document.getElementById('eventExample');
-counter.addEventListener('input', (event) => {
-  console.log(`Values updated: ${JSON.stringify(event.detail)}`);
-});
-```
-
 </auro-accordion>
 
-#### Custom Value Display
+### Dropdown Counter Group
+
+Use the `isDropdown` attribute to place a counter group into the dropdown menu. 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-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="ariaLabel.bib.close">Close Popup</span>
-      <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-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
   <auro-counter-group isDropdown>
     <span slot="ariaLabel.bib.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Passengers</span>
-    <div slot="valueText">Custom value text</div>
-    <div slot="label"></div>
+    <div slot="label">Passengers</div>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>
@@ -352,66 +461,172 @@ counter.addEventListener('input', (event) => {
       <span slot="description">Under 2 years</span>
     </auro-counter>
   </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-dropdown.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-dropdown.html -->
+  <auro-counter-group appearance="inverse" 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>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
+
+```html
+<auro-counter-group isDropdown>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <span slot="bib.fullscreen.headline">Passengers</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>
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-dropdown.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-dropdown.html -->
+
+```html
+<auro-counter-group appearance="inverse" 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>
 
-### Counter with Custom Error
+### Snowflake Layout
 
-A custom error can be set on the counter by adding the `error` attribute the desired message.
+Counter dropdowns support an alternate "snowflake" layout, using `layout="snowflake"`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
-  <auro-counter error="There is an error with the counter">
-    Adults
-  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
+  <!-- Example of counter-group properties -->
+  <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+    <div slot="label">Snowflake Dropdown Group</div>
+    <div slot="helpText">Total must be between 2-10</div>
+    <auro-counter>
+      Counter 1
+    </auro-counter>
+    <auro-counter>
+      Counter 2
+    </auro-counter>
+  </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
-  <auro-counter appearance="inverse" error="There is an error with the counter">
-    Adults
-  </auro-counter>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-snowflake.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-snowflake.html -->
+  <!-- Example of counter-group properties -->
+  <auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+    <div slot="label">Snowflake Dropdown Group</div>
+    <div slot="helpText">Total must be between 2-10</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/counter-error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-snowflake.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-snowflake.html -->
 
 ```html
-<auro-counter error="There is an error with the counter">
-  Adults
-</auro-counter>
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown layout="snowflake">
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+  <div slot="label">Snowflake Dropdown Group</div>
+  <div slot="helpText">Total must be between 2-10</div>
+  <auro-counter>
+    Counter 1
+  </auro-counter>
+  <auro-counter>
+    Counter 2
+  </auro-counter>
+</auro-counter-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
-<auro-counter appearance="inverse" error="There is an error with the counter">
-  Adults
-</auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-snowflake.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-snowflake.html -->
+
+```html
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+  <div slot="label">Snowflake Dropdown Group</div>
+  <div slot="helpText">Total must be between 2-10</div>
+  <auro-counter>
+    Counter 1
+  </auro-counter>
+  <auro-counter>
+    Counter 2
+  </auro-counter>
+</auro-counter-group>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Counter Dropdown with Errored Counters
 
-A counter dropdown with counters in an errored state will display the errors for each errored counter by default
+A counter dropdown with individual counters in an errored state will display the errors for each errored counter by default.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error.html -->
   <auro-counter-group isDropdown>
     <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
-    <auro-counter error="Cannot have less than 1 adult passenger">
+    <auro-counter error="Custom error on Adults counter">
       Adults
       <span slot="description">18 years or older</span>
     </auro-counter>
-    <auro-counter error="Cannot have more than 2 child passengers">
+    <auro-counter error="Custom error on Children counter">
       Children
       <span slot="description">2-17 years</span>
     </auro-counter>
@@ -420,19 +635,19 @@ A counter dropdown with counters in an errored state will display the errors for
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error.html -->
 
 ```html
 <auro-counter-group isDropdown>
   <span slot="ariaLabel.bib.close">Close Popup</span>
   <div slot="bib.fullscreen.headline">Passengers</div>
   <div slot="label">Passengers</div>
-  <auro-counter error="Cannot have less than 1 adult passenger">
+  <auro-counter error="Custom error on Adults counter">
     Adults
     <span slot="description">18 years or older</span>
   </auro-counter>
-  <auro-counter error="Cannot have more than 2 child passengers">
+  <auro-counter error="Custom error on Children counter">
     Children
     <span slot="description">2-17 years</span>
   </auro-counter>
@@ -443,20 +658,20 @@ A counter dropdown with counters in an errored state will display the errors for
 
 ### Counter Dropdown with Custom Error
 
-The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
+The `error` attribute can also be used on the counter group to set a custom error message. This will override any individual counter error messages.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
-  <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-group.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-group.html -->
+  <auro-counter-group error="Custom error on counter group" isDropdown>
     <span slot="ariaLabel.bib.close">Close Popup</span>
     <div slot="bib.fullscreen.headline">Passengers</div>
     <div slot="label">Passengers</div>
-    <auro-counter error="Cannot have less than 1 adult passenger">
+    <auro-counter error="Custom error on Adults counter">
       Adults
       <span slot="description">18 years or older</span>
     </auro-counter>
-    <auro-counter error="Cannot have more than 2 child passengers">
+    <auro-counter error="Custom error on Children counter">
       Children
       <span slot="description">2-17 years</span>
     </auro-counter>
@@ -465,19 +680,19 @@ The error message for a dropdown counter with errored counters can also be overr
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-group.html -->
 
 ```html
-<auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+<auro-counter-group error="Custom error on counter group" isDropdown>
   <span slot="ariaLabel.bib.close">Close Popup</span>
   <div slot="bib.fullscreen.headline">Passengers</div>
   <div slot="label">Passengers</div>
-  <auro-counter error="Cannot have less than 1 adult passenger">
+  <auro-counter error="Custom error on Adults counter">
     Adults
     <span slot="description">18 years or older</span>
   </auro-counter>
-  <auro-counter error="Cannot have more than 2 child passengers">
+  <auro-counter error="Custom error on Children counter">
     Children
     <span slot="description">2-17 years</span>
   </auro-counter>
@@ -488,7 +703,7 @@ The error message for a dropdown counter with errored counters can also be overr
 
 ### 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.
+The group counter `max` or `min` property sets the property 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`.
 
 **Example has group max set to 12**
 
@@ -523,9 +738,9 @@ The group counter max or min property sets the value for all counters in the gro
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Counter Max/Min
+### Counter Max/Min within Group
 
-You can also individually set the max or min value for each counter in a group.
+You can also individually set the `max` or `min` value for each counter in a group.
 
 **Example has group max set to 12**
 
@@ -560,7 +775,8 @@ You can also individually set the max or min value for each counter in a group.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Customized bib position
+### Customized Bib Position
+
 The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes.
 
 - `placement` specifies the preferred position where the bib should appear relative to the trigger.
@@ -692,13 +908,13 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Dropdown with fullscreen bib
+### Dropdown with Fullscreen Bib
 
 You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
 
 The default value of `fullscreenBreakpoint` is `sm`. 
 
-Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens)
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
 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.
@@ -764,4 +980,306 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+## Counter Group Slot Examples
+
+### Display Value
+
+Use the `valueText` slot to customize the value display in the dropdown trigger.
+
+<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="ariaLabel.bib.close">Close Popup</span>
+      <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="ariaLabel.bib.close">Close Popup</span>
+    <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>
+
+## Event Examples
+
+### Input Event
+
+Listen for `input` events to react to user interactions. Open the browser console to see the event output.
+
+This event fires both on individual counter changes and when the counter group value changes. The event detail contains the current values of all counters in the group.
+
+<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 -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/events.js -->
+
+```js
+export function eventCounterExample() {
+  const counter = document.getElementById('eventExample');
+
+  counter.addEventListener('input', (event) => {
+    console.log(`Values updated: ${JSON.stringify(event.detail)}`);
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Common Usage Patterns & Functional Examples
+
+### All Counter Properties
+
+This example demonstrates the use of all available counter properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/api-properties.html -->
+  <!-- Example of all counter properties -->
+  <auro-counter-group>
+    <!-- Basic counter with min/max -->
+    <auro-counter min="1" max="5" value="2">
+      Min 1, Max 5
+    </auro-counter>
+    <!-- Disabled counter -->
+    <auro-counter disabled value="0">
+      Disabled counter
+    </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-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-properties.html -->
+
+```html
+<!-- Example of all counter properties -->
+<auro-counter-group>
+  <!-- Basic counter with min/max -->
+  <auro-counter min="1" max="5" value="2">
+    Min 1, Max 5
+  </auro-counter>
+  <!-- Disabled counter -->
+  <auro-counter disabled value="0">
+    Disabled counter
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### All Counter Group Properties
+
+This example demonstrates the use of 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>
+
+### All 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="ariaLabel.minus">Custom Minus Button Label</span>
+      <span slot="ariaLabel.plus">Custom Plus Button Label</span>
+      <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="ariaLabel.minus">Custom Minus Button Label</span>
+    <span slot="ariaLabel.plus">Custom Plus Button Label</span>
+    <span slot="description">Description slot content</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Restyle Component with CSS Variables
+
+The component may be restyled by changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
+
+```scss
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+
+:host(:not([ondark])),
+:host(:not([appearance="inverse"])) {
+  /* Snowflake Dropdown Tokens */
+  --ds-auro-counter-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-counter-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
+  --ds-auro-counter-outline-color: transparent;
+
+  /* Classic Tokens */
+  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, #{v.$ds-advanced-color-button-tertiary-background});
+  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
+  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #{v.$ds-advanced-color-button-tertiary-text});
+  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
+}
+
+:host([ondark]),
+:host([appearance="inverse"]) {
+  /* Snowflake Dropdown Tokens */
+  --ds-auro-counter-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
+  --ds-auro-counter-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
+  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-counter-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
+  --ds-auro-counter-outline-color: transparent;
+
+  /* Classic Tokens */
+  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, #{v.$ds-advanced-color-button-tertiary-background-inverse});
+  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
+  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #{v.$ds-advanced-color-button-tertiary-text-inverse});
+  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider-inverse, #{v.$ds-basic-color-border-divider-inverse});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->