---

## NotificationCenter
Menu-ready notification list with mark-as-read, delete, and empty state.
Renders each notification as a clickable card with timestamp.

**Import:** `import { NotificationCenter } from '@urbicon-ui/auth';`

### Examples
```svelte
<NotificationCenter {t} notifications={store.notifications}
  onMarkAsRead={(id) => store.markAsRead(id)}
  onMarkAllAsRead={() => store.markAllAsRead()}
/>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| notifications | `import('../../../server/adapters/types.js').NotificationRecord[]` | yes |  | Notification records to display. |
| class | `string` | no |  | Extra classes on the root element. |
| item | `Snippet<[import('../../../server/adapters/types.js').NotificationRecord]>` | no |  | Custom notification item renderer. |
| onClick | `(notification: import('../../../server/adapters/types.js').NotificationRecord) => void` | no |  | Called when a notification is clicked (e.g. to navigate to a URL). SECURITY: `notification.url` is DB-/server-sourced and untrusted — before passing it to `goto()` / `window.location`, validate it is same-origin or relative (reject `javascript:` and absolute cross-origin URLs). Never navigate to a raw `notification.url`. |
| onDelete | `(id: string) => void` | no |  | Called when a notification is deleted. |
| onMarkAllAsRead | `() => void` | no |  | Called when all notifications are marked as read. |
| onMarkAsRead | `(id: string) => void` | no |  | Called when a single notification is marked as read. |
| slotClasses | `Partial<Record<'root' | 'header' | 'list' | 'item' | 'empty', string>>` | no |  | Per-slot class overrides. See component source for available slot keys. |
| t | `AuthLocale` | no |  | Locale bundle. Auto-detected from i18n context when omitted. |
| unstyled | `boolean` | no |  | Strip all default styling. |

### Slots (slotClasses keys)
`root`, `header`, `list`, `item`, `empty`