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

<<%= selector %> label="Escolha uma fruta" [items]="fruitOptions" />
-->
<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">{{ label() }}</label>
<input
  type="text"
  [id]="instanceId + '-input'"
  role="combobox"
  [attr.aria-expanded]="isOpen()"
  [attr.aria-controls]="instanceId + '-listbox'"
  aria-autocomplete="list"
  [attr.aria-activedescendant]="activeDescendantId()"
  [attr.aria-labelledby]="instanceId + '-label'"
  [value]="query()"
  (input)="onInput($event)"
  (keydown)="handleInputKeydown($event)"
  (focus)="openList()"
/>
<ul
  role="listbox"
  [id]="instanceId + '-listbox'"
  [attr.aria-labelledby]="instanceId + '-label'"
  [hidden]="!isOpen() || filteredItems().length === 0"
>
  @for (item of filteredItems(); track item.id; let i = $index) {
    <li
      role="option"
      [id]="instanceId + '-option-' + item.id"
      [attr.aria-selected]="i === activeIndex()"
      (click)="select(item)"
    >
      {{ item.label }}
    </li>
  }
</ul>
