@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0

package/components/counter/demo/api.md

@@ -1,1053 +1,462 @@
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
-<!-- The below content is automatically added from ./../api.md -->
-
-# auro-counter
-
-## Attributes
-
-| Attribute          | Type        | Description                                      |
-|--------------------|-------------|--------------------------------------------------|
-| [disableEventShow](#disableEventShow) | ` Boolean ` | If declared, the dropdown will only show by calling the API .show() public method. |
-
+<!-- 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                                      |
-|-------------------------|-------------------------|-------------|---------|--------------------------------------------------|
-| [bordered](#bordered)              | `bordered`              | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
-| [chevron](#chevron)               | `chevron`               | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
-| [disabled](#disabled)              | `disabled`              | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
-| [error](#error)                 | `error`                 | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [inset](#inset)                 | `inset`                 | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
-| [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
-| [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
-| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false   | If delclared, the dropdown will not hide when moving focus outside the element. |
-| [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the dropdown bib. |
-| [ready](#ready)                 | `ready`                 | ` Boolean ` |         | When false the component API should not be called. |
-| [rounded](#rounded)               | `rounded`               | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
+| Property   | Attribute  | Type      | Default     | Description                           |
+|------------|------------|-----------|-------------|---------------------------------------|
+| [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled. |
+| [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.    |
+| [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.    |
+| [validity](#validity) | `validity` | `string`  | "undefined" | The validity state of the counter.    |
+| [value](#value)    | `value`    | `number`  | "undefined" | The current value of the counter.     |
 
 ## Methods
 
-| Method | Type       | Description                 |
-|--------|------------|-----------------------------|
-| [hide](#hide) | `(): void` | Hides the dropdown content. |
-| [show](#show) | `(): void` | Shows the dropdown content. |
+| 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                                  | Description                                      |
-|-----------------------------|---------------------------------------|--------------------------------------------------|
-| `auroDropdown-ready`        | `CustomEvent<any>`                    | Notifies that the component has finished initializing. |
-| `auroDropdown-toggled`      | `CustomEvent<{ expanded: boolean; }>` | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` | `CustomEvent<any>`                    | Notifies that the trigger has been clicked.      |
-| [dropdownToggled](#dropdownToggled)           | `CustomEvent<{ expanded: boolean; }>` | (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. |
+| Event   | Type                                           |
+|---------|------------------------------------------------|
+| [input](#input) | `CustomEvent<{ value: number \| undefined; }>` |
 
 ## Slots
 
-| Name       | Description                           |
-|------------|---------------------------------------|
-|            | Default slot for the popover content. |
-| [helpText](#helpText) | Defines the content of the helpText.  |
-| [label](#label)    | Defines the content of the label.     |
-| [trigger](#trigger)  | Defines the content of the trigger.   |
+| Name          | Description                          |
+|---------------|--------------------------------------|
+| [default](#default)     | Main label content for the counter.  |
+| [description](#description) | Descriptive content for the counter. |
+
+# auro-counter-group
+
+## Properties
+
+| Property                  | Attribute                 | Type      | Default     | Description                                      |
+|---------------------------|---------------------------|-----------|-------------|--------------------------------------------------|
+| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`  | "sm"        | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
+| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean` | false       | Indicates if the counter group is displayed as a dropdown. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` |             | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [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. |
+| [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. |
 
-## CSS Shadow Parts
+## Methods
 
-| Part       | Description                                  |
-|------------|----------------------------------------------|
-| [chevron](#chevron)  | The collapsed/expanded state icon container. |
-| [helpText](#helpText) | The helpText content container.              |
-| [popover](#popover)  | The bib content container.                   |
-| [trigger](#trigger)  | The trigger content container.               |
-<!-- AURO-GENERATED-CONTENT:END -->
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
-## API Examples
+## Events
 
-### Basic
+| Event   | Type                                             |
+|---------|--------------------------------------------------|
+| [input](#input) | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` |
 
-The most basic, simple version of auro-drodown.
+## Slots
 
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| `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/basic.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-  <auro-counter aria-label="custom label">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
+  <!-- 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/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
-
-```html
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basicIcon.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/basicIcon.html -->
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basicIcon.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basicIcon.html -->
-
-```html
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basicButton.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/basicButton.html -->
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
-      Dropdown
-    </auro-button>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basicButton.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basicButton.html -->
-
-```html
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
-      Dropdown
-    </auro-button>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basicInput.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/basicInput.html -->
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      borderless
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basicInput.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basicInput.html -->
-
-```html
-<auro-counter aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      borderless
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Property Examples
-
-#### bordered
-
-Adds the border style around the dropdown trigger.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/bordered.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/bordered.html -->
-<auro-counter aria-label="custom label" bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/bordered.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/bordered.html -->
-
-```html
-<auro-counter aria-label="custom label" bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### chevron
-
-Adds the bib visibility state chevron to the right side of the trigger content.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevron.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/chevron.html -->
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevron.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/chevron.html -->
-
-```html
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronIcon.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/chevronIcon.html -->
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronIcon.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/chevronIcon.html -->
-
-```html
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-icon
-      category="interface"
-      name="arrow-down"></auro-icon>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronButton.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/chevronButton.html -->
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
-      Dropdown
-    </auro-button>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronButton.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/chevronButton.html -->
-
-```html
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-button
-      slot="trigger"
-      fluid>
-      Dropdown
-    </auro-button>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronInput.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/chevronInput.html -->
-<auro-counter aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronInput.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/chevronInput.html -->
-
+<!-- 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 aria-label="custom label" chevron>
-  Lorem ipsum solar
-  <div slot="trigger">
-    <auro-input
-      slot="trigger"
-      id="inputExampleTrigger">
-    </auro-input>
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### disabled
-
-Disables the trigger preventing the dropdown bib from being shown.
-
+<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/disabled.html) -->
-<!-- The below content is automatically added from ./../../apiExamples/disabled.html -->
-<auro-counter aria-label="custom label" disabled>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-<!-- 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 -->
-
-```html
-<auro-counter aria-label="custom label" disabled>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledAll.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/disabledAll.html -->
-  <auro-counter
-    aria-label="custom label"
-    disabled
-    chevron
-    rounded
-    inset
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-    <span slot="helpText">
-      Helper text
-    </span>
-    <span slot="label">
-      Name
-    </span>
+  <!-- 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>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledAll.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/disabledAll.html -->
-
+<!-- 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
-  aria-label="custom label"
-  disabled
-  chevron
-  rounded
-  inset
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-  <span slot="helpText">
-    Helper text
-  </span>
-  <span slot="label">
-    Name
-  </span>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### error
-
-Adds the error state UI to the trigger.
+<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/error.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/error.html -->
-  <auro-counter aria-label="custom label" error>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
+  <!-- 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>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
-
+<!-- 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
-<auro-counter aria-label="custom label" error>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorBordered.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/errorBordered.html -->
-  <auro-counter
-    aria-label="custom label"
-    inset
-    error
-    rounded
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
+<!-- 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-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorBordered.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/errorBordered.html -->
-
-```html
-<auro-counter
-  aria-label="custom label"
-  inset
-  error
-  rounded
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
+  <auro-counter>
+    Counter 2
+  </auro-counter>
+</auro-counter-group>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### inset
-
-The `inset` property applies a predefined amount of CSS `padding` to the `trigger` slot content.
+</auro-accordion>
+
+#### Available Slots
+All available slots for both components:
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/inset.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/inset.html -->
-  <auro-counter aria-label="custom label" inset>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
+  <!-- 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>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/inset.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/inset.html -->
-
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/api-slots.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-slots.html -->
+
 ```html
-<auro-counter aria-label="custom label" inset>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/insetBordered.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/insetBordered.html -->
-  <auro-counter
-    aria-label="custom label"
-    inset
-    rounded
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
+<!-- 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-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/insetBordered.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/insetBordered.html -->
-
-```html
-<auro-counter
-  aria-label="custom label"
-  inset
-  rounded
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
+</auro-counter-group>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### rounded
-
-The `rounded` property applies `border-radius` CSS to the trigger and default slot content.
+</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/rounded.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/rounded.html -->
-  <auro-counter
-    aria-label="custom label"
-    rounded
-    bordered>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
+  <!-- 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>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/rounded.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/rounded.html -->
-
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
+
 ```html
-<auro-counter
-  aria-label="custom label"
-  rounded
-  bordered>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### noToggle
-
-In cases where it is desired behavior for `auro-counter` to only show, not toggle, the bib content when activating the trigger the `noToggle` attribute must be applied.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/noToggle.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/noToggle.html -->
-  <auro-counter aria-label="custom label" noToggle>
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
+<auro-counter-group id="eventExample">
+  <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/noToggle.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/noToggle.html -->
-
-```html
-<auro-counter aria-label="custom label" noToggle>
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Slot Examples
-
-#### trigger & default
-
-All examples shown on this page include default and `trigger` slot content.
-
-#### label
-
-Content defined in the `label` slot will be rendered left aligned inside the trigger above all other defined trigger slot content.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/label.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/label.html -->
-  <auro-counter
-    bordered
-    rounded
-    inset
-    chevron>
-    Lorem ipsum solar
-    <span slot="label">Name</span>
-    <div slot="trigger">
-      Trigger
-    </div>
+  <auro-counter>
+    Children
   </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/label.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/label.html -->
-
-```html
-<auro-counter
-  bordered
-  rounded
-  inset
-  chevron>
-  Lorem ipsum solar
-  <span slot="label">Name</span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</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-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### helpText
-
-Content defined in the `helpText` slot will be rendered left aligned below the trigger.
 
+</auro-accordion>
+
+#### Custom Value Display
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/helpText.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/helpText.html -->
-  <auro-counter
-    aria-label="custom label"
-    inset
-    bordered
-    rounded>
-    Lorem ipsum solar
-    <span slot="helpText">
-      Helper text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/helpText.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/helpText.html -->
-
-```html
-<auro-counter
-  aria-label="custom label"
-  inset
-  bordered
-  rounded>
-  Lorem ipsum solar
-  <span slot="helpText">
-    Helper text
-  </span>
-  <div slot="trigger">
-    Trigger
+  <!-- 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-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#####
-
-When combined with the `error` property the `helpText` slot content is colored red.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/helpTextError.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/helpTextError.html -->
-  <auro-counter
-    aria-label="custom label"
-    inset
-    bordered
-    rounded
-    error>
-    Lorem ipsum solar
-    <span slot="helpText">
-      Helper text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/helpTextError.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/helpTextError.html -->
-
+<!-- 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
-<auro-counter
-  aria-label="custom label"
-  inset
-  bordered
-  rounded
-  error>
-  Lorem ipsum solar
-  <span slot="helpText">
-    Helper text
-  </span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-counter>
-```
+<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>
-
-### Method Examples
+</auro-accordion>
+
+### Group Max/Min
 
-#### show
+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 `show` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`. This example will execute the `show` method on a `keydown` event with focus in the input element.
+**Example has group max set to 12**
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/programmaticallyShow.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/programmaticallyShow.html -->
-  <auro-input id="showExampleTriggerInput" required>
-    <span slot="label">Enter a value to show the dropdown</span>
-  </auro-input>
-  <auro-counter id="showMethodExample" aria-label="custom label" rounded bordered inset>
-    <p>
-      Lorem ipsum solar
-    </p>
-    <span slot="trigger">Trigger Label</span>
-  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-max.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/group-max.html -->
+  <auro-counter-group max="12" min="0">
+    <auro-counter>
+      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>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/programmaticallyShow.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/programmaticallyShow.html -->
-
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-max.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/group-max.html -->
+
 ```html
-<auro-input id="showExampleTriggerInput" required>
-  <span slot="label">Enter a value to show the dropdown</span>
-</auro-input>
-<auro-counter id="showMethodExample" aria-label="custom label" rounded bordered inset>
-  <p>
-    Lorem ipsum solar
-  </p>
-  <span slot="trigger">Trigger Label</span>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/programmaticallyShow.js) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/programmaticallyShow.js -->
-
-```js
-export function showExample() {
-  const triggerInput = document.querySelector('#showExampleTriggerInput');
-  const dropdownElem = document.querySelector('#showMethodExample');
-
-  triggerInput.addEventListener('keydown', () => {
-    dropdownElem.show();
-  });
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### hide
-
-The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-select` when the dropdown should be collapsed after making a selection.
-
-The `hide` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`.
-
-This example demonstrations collapsing the dropdown by clicking a button within the dropdown bib content.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/programmaticallyHide.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/programmaticallyHide.html -->
-  <auro-counter id="hideExample" aria-label="custom label" rounded bordered inset>
-    <p>
-      Lorem ipsum solar
-    </p>
-    <auro-button id="hideExampleBtn">
-      Dismiss Dropdown
-    </auro-button>
-    <auro-input
-      slot="trigger"
-      id="hideExampleTrigger">
-    </auro-input>
+<auro-counter-group max="12" min="0">
+  <auro-counter>
+    Short label
   </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/programmaticallyHide.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/programmaticallyHide.html -->
-
-```html
-<auro-counter id="hideExample" aria-label="custom label" rounded bordered inset>
-  <p>
-    Lorem ipsum solar
-  </p>
-  <auro-button id="hideExampleBtn">
-    Dismiss Dropdown
-  </auro-button>
-  <auro-input
-    slot="trigger"
-    id="hideExampleTrigger">
-  </auro-input>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-</auro-accordion>
-
-### Other Examples
-
-#### Width and Sizing Behavior
-
-##### Width
-`auro-counter` will consume all available width of the parent container. `auro-counter` can be made narrower by wrapping it in a container of the desired width.
+  <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 Max/Min
 
-##### Dropdown Content Sizing
-If the dropdown's content size should not exceed a certain height, you can control it using CSS. Add a `max-height` property and set `overflow: scroll` to enable scrollability for content that exceeds the specified height.
+You can also individually set the max or min value for each counter in a group.
 
+**Example has group max set to 12**
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions100.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/customDimensions100.html -->
-  <div style="width: 100px;" aria-label="custom label">
-    <auro-counter inset bordered rounded chevron>
-      <div style="width: 100px; max-height: 200px; overflow: scroll;">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </div>
-      <div slot="trigger">
-        Trigger
-      </div>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-counter-max.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/group-counter-max.html -->
+  <auro-counter-group max="12" min="0">
+    <auro-counter max="5">
+      This counter has a max value of 5
     </auro-counter>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customDimensions100.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/customDimensions100.html -->
-
-```html
-<div style="width: 100px;" aria-label="custom label">
-  <auro-counter inset bordered rounded chevron>
-    <div style="width: 100px; max-height: 200px; overflow: scroll;">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-    </div>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-counter>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions300.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/customDimensions300.html -->
-  <div style="width: 300px;" aria-label="custom label">
-    <auro-counter inset bordered rounded chevron>
-      <div style="width: 300px; max-height: 200px; overflow: scroll;">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </div>
-      <div slot="trigger">
-        Trigger
-      </div>
+    <auro-counter max="8">
+      This counter has a max value of 8
     </auro-counter>
-  </div>
+  </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customDimensions300.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/customDimensions300.html -->
-
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-counter-max.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/group-counter-max.html -->
+
 ```html
-<div style="width: 300px;" aria-label="custom label">
-  <auro-counter inset bordered rounded chevron>
-    <div style="width: 300px; max-height: 200px; overflow: scroll;">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-    </div>
-    <div slot="trigger">
-      Trigger
-    </div>
+<auro-counter-group max="12" min="0">
+  <auro-counter max="5">
+    This counter has a max value of 5
   </auro-counter>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+  <auro-counter max="8">
+    This counter has a max value of 8
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with fullscreen bib
+
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
 
-#### Truncated trigger component with fixed width
+The default value of `fullscreenBreakpoint` is `sm`. 
 
-`auro-counter` trigger component will be truncated if the text is too long than its container width.
+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.
+
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/truncatedText.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/truncatedText.html -->
-  <div style="width: 250px;">
-    <auro-counter common aria-label="Label content for screen reader">
-      <div style="padding: var(--ds-size-150); width: 500px;">
-        I really prefer Alaska Airlines for my vacation travels
+  <!-- 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="label">Passengers</span>
+      <span slot="bib.fullscreen.headline">Passengers</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>
+      <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+        <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+        <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
       </div>
-      <span slot="helpText">
-        Help text
-      </span>
-      <div slot="trigger">
-        I really prefer Alaska Airlines for my vacation travels
-      </div>
-    </auro-counter>
+    </auro-counter-group>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/truncatedText.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/truncatedText.html -->
-
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+
 ```html
-<div style="width: 250px;">
-  <auro-counter common aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150); width: 500px;">
-      I really prefer Alaska Airlines for my vacation travels
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      I really prefer Alaska Airlines for my vacation travels
+<div style="max-width: 350px;">
+  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+    <span slot="label">Passengers</span>
+    <span slot="bib.fullscreen.headline">Passengers</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>
+    <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+      <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+      <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
     </div>
-  </auro-counter>
-</div>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-
-### Theme Support
-
-The component may be restyled using the following code sample and changing the values of the following token(s).
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
-
-```scss
-:host {
-  --ds-auro-counter-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-  --ds-auro-counter-label-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-  --ds-auro-counter-popover-border-color: transparent;
-  --ds-auro-counter-popover-boxshadow-color: rgba(0 0 0 / .08);
-  --ds-auro-counter-popover-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-  --ds-auro-counter-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-counter-trigger-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-  --ds-auro-counter-trigger-border-color: transparent;
-  --ds-auro-counter-trigger-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->