@if (notifications().length > 0) {
  <aside class="floating-notifications" aria-live="polite" aria-atomic="true">
    @for (note of notifications(); track note.id) {
      <article class="floating-note" [class]="'floating-note floating-note-' + note.type">
        <p>{{ note.message }}</p>
        <button type="button" (click)="dismiss(note.id)" aria-label="Dismiss">×</button>
      </article>
    }
  </aside>
}
