## Announcement Bar (S—118)

A slim top-of-page bar that rotates through announcements with a vertical slide, pauses on hover and can be dismissed.

- URL: https://sundaeui.dev/components/announcement-bar
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/announcement-bar.json`
- Tags: top-bar, announcement, ticker, banner, dismiss, promo

Messages slide up one after another on a timer and pause while the pointer or focus is on the bar. Small arrows let people step through manually.
Dismiss collapses the bar’s height smoothly so the page below does not jump.

### Usage

```tsx
import { AnnouncementBar } from '@/components/sundae/announcement-bar'

<AnnouncementBar />
```

### Props

- `messages` (`{ id: string; text: string; href?: string; cta?: string }[]`, required): Announcements.
- `interval` (`number`, default `4000`): Rotation in ms.
- `onDismiss` (`() => void`): Called on close.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Launches, sales, status notes, cookie-free promo slots.

### When not to use

- Urgent alerts: use an inline alert that does not rotate away.

### Accessibility

- A region labelled "Announcements"; rotation pauses on hover and focus (WCAG 2.2.2).
- The message is announced politely only when changed manually.
- Reduced motion removes the movement and keeps every state change.