<div class="app-select-wrap">
  <select
    class="app-select"
    [class.app-select--sm]="size() === 'sm'"
    [class.app-select--md]="size() === 'md'"
    [class.app-select--lg]="size() === 'lg'"
    [disabled]="isDisabled || disabled()"
    [attr.id]="formField?.fieldId ?? null"
    [attr.aria-label]="ariaLabel()"
    [attr.aria-describedby]="formField?.describedBy() ?? null"
    [value]="value"
    (change)="handleChange($event)"
    (blur)="handleBlur()"
  >
    @for (option of options(); track option.value) {
      <option [value]="option.value" [title]="option.description ?? ''">{{ option.label }}</option>
    }
  </select>
  <app-icon name="chevronDown" [size]="16" class="app-select-arrow" />
</div>
@if (activeDescription(); as description) {
  <small class="app-select-description">{{ description }}</small>
}
