# 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` | `'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.

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 | If true, the counter group is displayed as a dropdown. | | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.
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.
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
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 | Method | Type | Description | |------------|----------------------------------------|--------------------------------------------------| | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. | | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. | | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.

**force**: Whether to force validation. | ## Events | Event | Type | |---------|--------------------------------------------------| | [input](#input) | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` | ## Slots | Name | Description | |---------------------------|--------------------------------------------------| | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib | | `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-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.
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.

**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.

**value**: The amount to increment by. | | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.

**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. | ## Basic Counter
Adults
See code ```html Adults ``` ## Basic Counter Group
Short label Another short label This is an example of the wrapping behavior for a long label
See code ```html Short label Another short label This is an example of the wrapping behavior for a long label ``` ## Counter Properties & Attribute Examples ### Appearance on Dark Backgrounds Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
Adults
See code ```html Adults ``` ### Disabled A counter can be disabled by adding the `disabled` attribute.
Disabled counter This counter cannot be modified
Disabled counter This counter cannot be modified
See code ```html Disabled counter This counter cannot be modified ``` ```html Disabled counter This counter cannot be modified ``` ### Error A custom error can be set on the counter by adding the `error` attribute the desired message.
Adults
Adults
See code ```html Adults ``` ```html Adults ``` ### 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.
Adults Min: 1, Max: 5
See code ```html Adults Min: 1, Max: 5 ``` ## 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.
Adults 18 years or older
Adults 18 years or older
See code ```html Adults 18 years or older ``` ```html Adults 18 years or older ``` ### Help Text Help text is supported with counters, and can be added by targetting the `helptext` slot.
Adults This is help text for the counter
Adults This is help text for the counter
See code ```html Adults This is help text for the counter ``` ```html Adults This is help text for the counter ``` ## Counter Group Properties & Attribute Examples ### Appearance on Dark Backgrounds Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
Short label Another short label This is an example of the wrapping behavior for a long label
See code ```html Short label Another short label This is an example of the wrapping behavior for a long label ``` ### 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.
Close Popup Passengers
Passengers
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years
Passengers
Passengers
Adults 18 years or older Children 2-17 years
See code ```html Close Popup Passengers
Passengers
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years ``` ```html
Passengers
Passengers
Adults 18 years or older Children 2-17 years ``` ### Snowflake Layout Counter dropdowns support an alternate "snowflake" layout, using `layout="snowflake"`.
Close Popup
Group fullscreen label
Snowflake Dropdown Group
Total must be between 2-10
Counter 1 Counter 2
Close Popup
Group fullscreen label
Snowflake Dropdown Group
Total must be between 2-10
Counter 1 Counter 2
See code ```html Close Popup
Group fullscreen label
Snowflake Dropdown Group
Total must be between 2-10
Counter 1 Counter 2 ``` ```html Close Popup
Group fullscreen label
Snowflake Dropdown Group
Total must be between 2-10
Counter 1 Counter 2 ``` ### Counter Dropdown with Errored Counters A counter dropdown with individual counters in an errored state will display the errors for each errored counter by default.
Close Popup
Passengers
Passengers
Adults 18 years or older Children 2-17 years
See code ```html Close Popup
Passengers
Passengers
Adults 18 years or older Children 2-17 years ``` ### Counter Dropdown with Custom Error 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.
Close Popup
Passengers
Passengers
Adults 18 years or older Children 2-17 years
See code ```html Close Popup
Passengers
Passengers
Adults 18 years or older Children 2-17 years ``` ### Group Max/Min 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**
Short label This is an example of the wrapping behavior for a long label
See code ```html Short label This is an example of the wrapping behavior for a long label ``` ### Counter Max/Min within Group You can also individually set the `max` or `min` value for each counter in a group. **Example has group max set to 12**
This counter has a max value of 5 This counter has a max value of 8
See code ```html This counter has a max value of 5 This counter has a max value of 8 ``` ### 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. - `offset` sets the distance between the trigger and the bib. - When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`. - Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position. - `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
Passengers
Label bottom-end bib with 20px offset Adults 18 years or older Children 2-17 years
Passengers
Label bottom-end bib with 20px offset and noFlip Adults 18 years or older Children 2-17 years
Passengers
Label right bib with 20px offset, noFlip and autoPlacement Adults 18 years or older Children 2-17 years
Passengers
Label bottom-start with 20px offset, noFlip and shift enabled Adults 18 years or older Children 2-17 years
See code ```html
Passengers
Label bottom-end bib with 20px offset Adults 18 years or older Children 2-17 years
Passengers
Label bottom-end bib with 20px offset and noFlip Adults 18 years or older Children 2-17 years
Passengers
Label right bib with 20px offset, noFlip and autoPlacement Adults 18 years or older Children 2-17 years
Passengers
Label bottom-start with 20px offset, noFlip and shift enabled Adults 18 years or older Children 2-17 years
``` ### 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). 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.
Close Popup Passengers Passengers
This is help text
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years
Reset Save
See code ```html
Close Popup Passengers Passengers
This is help text
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years
Reset Save
``` ## Counter Group Slot Examples ### Display Value Use the `valueText` slot to customize the value display in the dropdown trigger.
Close Popup Passengers
Custom value text
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years
See code ```html
Close Popup Passengers
Custom value text
Adults 18 years or older Children Under 17 years old. Restrictions apply if traveling without an adult. Lap Infants Under 2 years
``` ## 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.
Adults Children
See code ```html Adults Children ``` ```js export function eventCounterExample() { const counter = document.getElementById('eventExample'); counter.addEventListener('input', (event) => { console.log(`Values updated: ${JSON.stringify(event.detail)}`); }); } ``` ## Common Usage Patterns & Functional Examples ### All Counter Properties This example demonstrates the use of all available counter properties.
Min 1, Max 5 Disabled counter
See code ```html Min 1, Max 5 Disabled counter ``` ### All Counter Group Properties This example demonstrates the use of all available counter group properties.
Group fullscreen label
Group with all properties
Total must be between 2-10
Custom total display
Counter 1 Counter 2
See code ```html
Group fullscreen label
Group with all properties
Total must be between 2-10
Custom total display
Counter 1 Counter 2 ``` ### All Slots All available slots for both components.
Group with all slots
Group fullscreen label
Help text appears below the group
Custom value display
Default slot content Custom Minus Button Label Custom Plus Button Label Description slot content
See code ```html
Group with all slots
Group fullscreen label
Help text appears below the group
Custom value display
Default slot content Custom Minus Button Label Custom Plus Button Label Description slot content ``` ## Restyle Component with CSS Variables The component may be restyled by changing the values of the following token(s). ```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}); } ```