The native <input type="number"> provides a basic numeric input, but it lacks the spinbutton accessibility pattern, has no concept of grouped counters with shared constraints, and renders inconsistently across browsers. auro-counter and auro-counter-group provide an accessible, feature-rich alternative.

Native number inputs have limited screen reader support. The browser-rendered increment/decrement buttons are often small, difficult to interact with, and announced inconsistently.

auro-counter provides:

• ARIA spinbutton pattern — The component uses role="spinbutton" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext for complete screen reader semantics.
• Labeled controls — Increment and decrement buttons have customizable ARIA labels via ariaLabel.plus and ariaLabel.minus slots.
• Keyboard shortcuts — Arrow Up/Down, Ctrl+Arrow, and +/- keys all increment and decrement the value. These shortcuts go beyond what native number inputs provide.
• Focus delegation — delegatesFocus ensures focus reaches the interactive control regardless of where the user clicks.
• Description binding — The description slot content is linked via aria-describedByElements for additional context.

Native number inputs allow the user to type or spin past the min/max bounds, then rely on validation to catch the error.

auro-counter takes a proactive approach:

• The decrement button disables automatically at min
• The increment button disables automatically at max
• In a group, buttons disable based on the aggregate total, preventing any individual counter from pushing the group past its constraints

HTML has no concept of related numeric inputs with a shared constraint. For example, a passenger selector with "Adults", "Children", and "Infants" that must total no more than 9 requires custom JavaScript.

auro-counter-group handles this with:

• An aggregate total computed from all child counters
• Group-level min and max constraints applied across all children
• A value object with named entries (e.g., { adults: 2, children: 1 })
• Dynamic button disabling — when the group total reaches max, all increment buttons disable; when it reaches min, all decrement buttons disable
• Group-level validation that aggregates individual counter errors
• Optional dropdown presentation with isDropdown for compact UI

Native number inputs have no concept of responsive presentation.

auro-counter-group in dropdown mode adapts to the viewport:

• Desktop — Counters appear in a positioned dropdown panel
• Mobile — Counters open in a fullscreen dialog with a configurable breakpoint
• Layout options (classic, snowflake) control visual presentation

Native number input validation is limited to min, max, step, and required.

auro-counter integrates with the Auro form validation system:

• Group-level validation aggregates errors from all child counters
• touched tracking ensures errors appear only after interaction
• Dispatches auroFormElement-validated events for parent form coordination

Native number inputs render browser-specific controls that cannot be styled consistently.

auro-counter is built with the Auro Design System:

• Consistent visual language with clearly labeled +/- buttons
• Light and dark theme support (appearance)
• CSS ::part() selectors (counterControl, controlPlus, controlMinus, helpText)
• Design token integration for sizing and spacing