<!-- Semmet Angular: Spinbutton — https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Quantity" />
-->
<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">{{ label() }}</label>
<div class="stepper">
  <button type="button" (click)="decrement()" [attr.aria-label]="decrementLabel()">−</button>
  <input
    type="text"
    inputmode="numeric"
    role="spinbutton"
    [id]="instanceId + '-input'"
    [attr.aria-labelledby]="instanceId + '-label'"
    [attr.aria-valuemin]="min"
    [attr.aria-valuemax]="max"
    [attr.aria-valuenow]="value()"
    [value]="value()"
    (keydown)="handleKeydown($event)"
    (change)="handleInput($event)"
  />
  <button type="button" (click)="increment()" [attr.aria-label]="incrementLabel()">+</button>
</div>
