Element: #131 Controlled (display/notification-bell) What it shows: A NotificationBell whose notifications live in state and are updated by its read, read-all and clear callbacks. When to use: An app header bell where the app owns the notification list and persists read and cleared state itself. Spec: - `let items = $state([` holds 3 notifications with `id`, `title`, `body`, `time` and `read` - Two items set `variant: 'success' as const` and `variant: 'warning' as const`, the New comment item sets none - `notifications={items}` passes the list to `NotificationBell` - `onRead={(id) =>` marks the matching item `read: true` - `onReadAll={() =>` marks every item as read - `onClear={() => (items = [])}` empties the list Tags: notification-bell, notifications, controlled, unread, header, state Needs: @codeatlasdev/ui@4.4.0 Components: NotificationBell Live demo: https://ui.codeatlas.com.br/docs/display/notification-bell#controlled (items = items.map((n) => (n.id === id ? { ...n, read: true } : n)))} onReadAll={() => (items = items.map((n) => ({ ...n, read: true })))} onClear={() => (items = [])} />