<button
  type="button"
  class="theme-switcher__trigger"
  [cdkMenuTriggerFor]="themeMenu"
  [attr.aria-label]="triggerAriaLabel()"
>
  <lib-icon [name]="currentIcon()" [size]="14" />
  <span>{{ currentLabel() }}</span>
  <lib-icon name="chevron-down" [size]="12" />
</button>

<ng-template #themeMenu>
  <div
    cdkMenu
    class="theme-switcher__menu"
    role="menu"
    i18n-aria-label="@@theme.menu.aria"
    aria-label="Theme"
  >
    @for (option of options; track option.mode) {
    <button
      type="button"
      cdkMenuItem
      class="theme-switcher__item"
      [class.theme-switcher__item--active]="mode() === option.mode"
      [attr.aria-checked]="mode() === option.mode"
      role="menuitemradio"
      (click)="select(option.mode)"
    >
      <lib-icon [name]="option.icon" />
      <span class="theme-switcher__label">{{ option.label }}</span>
      @if (mode() === option.mode) {
      <lib-icon name="check" [size]="16" />
      }
    </button>
    }
  </div>
</ng-template>
