Notification Item
`pura-notification-item` renders a single notification row in a flex layout: icon on the left, title over description in the middle, and time with a dismiss button on the right, marking an "unread" dot when the `unread` attribute is present. Use it inside a notification panel or list. The agent-native layer mirrors the live state in `data-pura-notification-*` attributes on the host and registers each instance in `window.__puraNotificationItems` (indexed by `data-pura-id`), letting agents enumerate, read, and drive the rows via `markRead()`, `markUnread()`, and `dismiss()` without entering the Shadow DOM.
Preview
<div role="list" style="max-width:420px;border:1px solid var(--pura-border,#e5e5e5);border-radius:8px;overflow:hidden">
<pura-notification-item id="notif1" title="New comment" time="2 min ago" unread dismissible>
<span slot="icon">💬</span>
Ana replied on your task "Review proposal".
</pura-notification-item>
<pura-notification-item title="Payment confirmed" time="1 h ago" dismissible>
<span slot="icon">✅</span>
We received the payment for the May invoice.
</pura-notification-item>
</div>
<script type="module">
import "/pura/lib/notification-item.js";
const n = document.getElementById("notif1");
n.addEventListener("click", () => n.markRead());
n.addEventListener("read", (e) => console.log("read:", e.detail.id));
n.addEventListener("dismiss", (e) => console.log("dismissed:", e.detail.id));
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | — | Bold text for the row title. When omitted, the title line is hidden. |
time | string | — | Short time or relative time shown on the right (e.g., "2 min ago"). Mirrored in the datetime attribute of the <time>. |
unread | boolean | false | Shows the unread dot and applies emphasized styling to the title. |
dismissible | boolean | false | Renders the dismiss button (×) on the right. |
dismiss-label | string | Dispensar | Accessible label (aria-label) for the dismiss button. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/notification-item.js"></script>import "./pura/lib/notification-item.js";