> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notifications Panel Wireframe Variables

> Template variables exposed by the Notifications Panel wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## Overview

The **Notifications Panel** wireframe exposes the variables below. Use them inside any `<velt-notifications-panel-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                    |
| ------------------------- | --------------------------- | ------------------------------------------ |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="notification.title" />` |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{settingsOpen}"`                 |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'tab-{selectedTab}': true"`   |

All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix.

## Data State

Per-feature data: the four notification groupings, the active settings tree, and the current document name.

| Variable                       | Type                                                                                                               | Description                                                                      | Example                                                                                      |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `notificationsForYouInSession` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` \| `null`                                 | Notifications matched to the current user.                                       | `<velt-data field="notificationsForYouInSession.length" />`                                  |
| `notificationsInSession`       | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` \| `null`                                 | All in-session notifications (combined feed).                                    | `<velt-data field="notificationsInSession.length" />`                                        |
| `notificationsByUserMap`       | `Record<string, { user: User; notifications: Notification[] }>`                                                    | Notifications grouped by user email.                                             | `<velt-data field="notificationsByUserMap[notification.from.email].notifications.length" />` |
| `notificationsByDocumentId`    | `{ documentId: string; notifications: Notification[] }[]` \| `null`                                                | Notifications grouped by document.                                               | `<velt-data field="notificationsByDocumentId.0.documentId" />`                               |
| `notificationsByDate`          | `{ date: string; displayName: string; notifications: Notification[] }[]` \| `null`                                 | Notifications grouped by date bucket.                                            | `<velt-data field="notificationsByDate.0.displayName" />`                                    |
| `currentDocumentName`          | `string`                                                                                                           | Display name of the current document.                                            | `<velt-data field="currentDocumentName" />`                                                  |
| `unreadNotificationsForYou`    | `number`                                                                                                           | Unread-count badge for the For-you tab (also exposed by the notifications-tool). | `<velt-data field="unreadNotificationsForYou" />`                                            |
| `settingsConfig`               | [`NotificationInitialSettingsConfig`](/api-reference/sdk/models/data-models#notificationinitialsettingsconfig)`[]` | Settings-tree configuration for the in-panel settings view.                      | `<velt-data field="settingsConfig.length" />`                                                |
| `settingsSelectedOption`       | `Record<string, `[`NotificationConfigValue`](/api-reference/sdk/models/data-models#notificationconfigvalue)`>`     | Selected option per accordion.                                                   | `<velt-data field="settingsSelectedOption.inbox" />`                                         |

## UI State

Per-instance UI flags driven by the panel itself.

| Variable                     | Type                                                                                             | Description                                                                 | Example                                                                |
| ---------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `selectedTab`                | `'forYou'` \| `'people'` \| `'documents'` \| `'all'`                                             | Active tab id.                                                              | `velt-class="'tab-{selectedTab}': true"`                               |
| `tabConfig`                  | [`NotificationTabConfig`](/api-reference/sdk/models/data-models#notificationtabconfig) \| `null` | Per-tab visibility config (`forYou`, `people`, `documents`, `all`).         | `velt-if="{tabConfig.forYou}"`                                         |
| `TABS`                       | `{ ForYou: 'forYou'; People: 'people'; Documents: 'documents'; All: 'all' }`                     | Constant tab-id map. Useful when comparing to `selectedTab`.                | `velt-class="'is-foryou': '{selectedTab} === {TABS.ForYou}'"`          |
| `tabPage`                    | `{ forYou: number; people: number; documents: number; all: number }`                             | Pagination cursor per tab.                                                  | `<velt-data field="tabPage.forYou" />`                                 |
| `pageSize`                   | `number`                                                                                         | Page size (default `5`).                                                    | `<velt-data field="pageSize" />`                                       |
| `panelOpenMode`              | `'popover'` \| `'sidebar'` \| ...                                                                | Layout mode for the panel.                                                  | `velt-class="'mode-{panelOpenMode}': true"`                            |
| `settingsOpen`               | `boolean`                                                                                        | Settings view is open.                                                      | `velt-class="'settings-open': {settingsOpen}"`                         |
| `settingsAccordionExpanded`  | `Record<string, boolean>`                                                                        | Per-accordion expanded state, keyed by setting id.                          | `velt-class="'inbox-open': {settingsAccordionExpanded.inbox}"`         |
| `settingsMutedAll`           | `boolean`                                                                                        | Master "mute all" toggle state.                                             | `velt-class="'muted-all': {settingsMutedAll}"`                         |
| `settingsItemRecentlyClosed` | `boolean`                                                                                        | Triggers the close animation.                                               | `velt-class="'recently-closed': {settingsItemRecentlyClosed}"`         |
| `settingsLayout`             | `'accordion'` \| ...                                                                             | Settings UI layout.                                                         | `velt-class="'layout-{settingsLayout}': true"`                         |
| `tabCount`                   | `number`                                                                                         | Number of visible tabs.                                                     | `<velt-data field="tabCount" />`                                       |
| `usersExpanded`              | `Record<string, boolean>`                                                                        | Per-user accordion expanded state, keyed by email.                          | `velt-class="'expanded': {usersExpanded[notification.from.email]}"`    |
| `documentExpanded`           | `Record<string, boolean>`                                                                        | Per-document accordion expanded state, keyed by document id.                | `velt-class="'expanded': {documentExpanded[notification.documentId]}"` |
| `shadowDom`                  | `boolean`                                                                                        | Shadow-DOM wrapping flag.                                                   | *Host config — set via element attribute.*                             |
| `notificationsPanelVisible`  | `boolean`                                                                                        | Panel itself is currently visible (also exposed by the notifications-tool). | `velt-class="'panel-visible': {notificationsPanelVisible}"`            |
| `darkMode`                   | `boolean`                                                                                        | Dark mode is active.                                                        | `velt-class="'theme-dark': {darkMode}"`                                |
| `variant`                    | `string`                                                                                         | Per-instance variant tag set on the host element.                           | `<velt-data field="variant" />`                                        |

## Feature State

Capability flags toggled via SDK config.

| Variable          | Type      | Description                 | Example                       |
| ----------------- | --------- | --------------------------- | ----------------------------- |
| `settingsEnabled` | `boolean` | Settings view is available. | `velt-if="{settingsEnabled}"` |

## Common Props

Every Notifications Panel primitive accepts:

| React Prop         | HTML Attribute      | Type                           | Default | Description                                                              |
| ------------------ | ------------------- | ------------------------------ | ------- | ------------------------------------------------------------------------ |
| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true`  | When `false`, the component always renders regardless of internal state. |

Signal inputs (for parent-child component composition):

* `[componentConfigSignal]` — shared per-feature config signal (notification groupings, tab config, settings).
* `[parentLocalUIState]` — per-instance UI state signal (`darkMode`, `variant`).

## Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag.

| Variable            | Type                                                                     | Available in                                                        | Example                                      |
| ------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------- | -------------------------------------------- |
| `notification`      | [`Notification`](/api-reference/sdk/models/data-models#notification)     | `<velt-notifications-panel-content-list-wireframe>` and descendants | `<velt-data field="notification.title" />`   |
| `notifications`     | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `*-content-list`, `*-content-load-more`                             | `<velt-data field="notifications.length" />` |
| `isLoadMoreVisible` | `boolean`                                                                | `*-content-load-more`                                               | `velt-if="{isLoadMoreVisible}"`              |
| `isAllRead`         | `boolean`                                                                | `*-content-all-read-container`                                      | `velt-if="{isAllRead}"`                      |

## Type Reference

Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models):

| Type                                                                                                           | Description                                                                                                                  |
| -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| [`Notification`](/api-reference/sdk/models/data-models#notification)                                           | A single notification (id, type, title, message, icon, from, to, documentId, documentName, createdAt, read, link, metadata). |
| [`User`](/api-reference/sdk/models/data-models#user)                                                           | Identified end-user object (used by `notification.from`, `notification.to`).                                                 |
| [`NotificationInitialSettingsConfig`](/api-reference/sdk/models/data-models#notificationinitialsettingsconfig) | One row of the settings tree (id, name, type, options).                                                                      |
| [`NotificationConfigValue`](/api-reference/sdk/models/data-models#notificationconfigvalue)                     | A selectable value inside a settings dropdown.                                                                               |
| [`NotificationTabConfig`](/api-reference/sdk/models/data-models#notificationtabconfig)                         | Per-tab visibility flags (`forYou`, `people`, `documents`, `all`).                                                           |

## Subcomponents

Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the `shouldShow` condition, and host CSS classes.

### `notifications-panel` (root)

The root primitive — the `<velt-notifications-panel>` element customers place in their app.

* **Public element:** `<velt-notifications-panel>`
* **Wireframe tag:** `<velt-notifications-panel-wireframe>`

| Property            | Value                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| Extra variables     | None — root only sees common variables.                                                                                 |
| Host class          | `v-notifications-panel-container velt-notifications-panel`                                                              |
| Conditional classes | `bottom-sheet` (when `bottomSheetMode`), `velt-notifications-panel--sidebar-panel` (when `panelOpenMode === 'sidebar'`) |

***

### `notifications-panel-title`

The panel title bar (heading + actions toolbar).

* **Public element:** `<velt-notifications-panel-title>`
* **Wireframe tag:** `<velt-notifications-panel-title-wireframe>`
* **Children:** `*-title-text`, `*-close-button`, `*-settings-button`, `*-read-all-button`, `*-view-all-button`.

| Property        | Value                                                                                            |
| --------------- | ------------------------------------------------------------------------------------------------ |
| Extra variables | None beyond common variables.                                                                    |
| Host classes    | `velt-notification-panel--title` (heading), `velt-notification-panel--actions` (actions toolbar) |

***

### `notifications-panel-title-text`

The text inside the title heading. Defaults to "Notifications".

* **Public element:** `<velt-notifications-panel-title-text>`
* **Wireframe tag:** `<velt-notifications-panel-title-text-wireframe>`

| Property        | Value |
| --------------- | ----- |
| Extra variables | None. |

***

### `notifications-panel-close-button`

Close button — clicking calls `componentConfig.closeNotificationsPanel()`.

* **Public element:** `<velt-notifications-panel-close-button>`
* **Wireframe tag:** `<velt-notifications-panel-close-button-wireframe>`

| Property        | Value                                   |
| --------------- | --------------------------------------- |
| Extra variables | None.                                   |
| Host class      | `velt-notification-panel--close-button` |

***

### `notifications-panel-settings-button`

Gear-icon button that opens the settings view.

* **Public element:** `<velt-notifications-panel-settings-button>`
* **Wireframe tag:** `<velt-notifications-panel-settings-button-wireframe>`

| Property        | Value                                                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None.                                                                                                                             |
| `shouldShow`    | Parent gates rendering on `settingsEnabled === true`.                                                                             |
| Host classes    | `velt-notifications-panel--settings-button-container` (outer wrapper), `velt-notifications-panel--settings-button` (inner button) |

***

### `notifications-panel-read-all-button`

"Mark all as read" button.

* **Public element:** `<velt-notifications-panel-read-all-button>`
* **Wireframe tag:** `<velt-notifications-panel-read-all-button-wireframe>`

| Property        | Value                                                      |
| --------------- | ---------------------------------------------------------- |
| Extra variables | None.                                                      |
| Host class      | `v-read-all-btn velt-notifications-panel--read-all-button` |

***

### `notifications-panel-view-all-button`

"View all" link that takes the user to the full notifications history.

* **Public element:** `<velt-notifications-panel-view-all-button>`
* **Wireframe tag:** `<velt-notifications-panel-view-all-button-wireframe>`

| Property        | Value                                                                      |
| --------------- | -------------------------------------------------------------------------- |
| Extra variables | None.                                                                      |
| Host class      | `all-notifications-view-all-btn velt-notifications-panel--view-all-button` |

***

### `notifications-panel-skeleton`

Skeleton loader shown while notifications are being fetched.

* **Public element:** `<velt-notifications-panel-skeleton>`
* **Wireframe tag:** `<velt-notifications-panel-skeleton-wireframe>`

| Property        | Value                                                                                                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None.                                                                                                                                                                             |
| `shouldShow`    | Driven by parent — renders while `isLoading === true`.                                                                                                                            |
| Host classes    | `skeleton skeleton-item-card` (card), `shine skeleton-item-avatar` (avatar shimmer), `skeleton-item-info` / `skeleton-iten-name-info` / `skeleton-item-body-info` (layout pieces) |

***

### `notifications-panel-header`

Tab strip across the top of the panel. Renders the four tab children.

* **Public element:** `<velt-notifications-panel-header>`
* **Wireframe tag:** `<velt-notifications-panel-header-wireframe>`
* **Children:** `*-tab-for-you`, `*-tab-people`, `*-tab-documents`, `*-tab-all`.

| Property        | Value                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None at the header level.                                                                                                                               |
| Host classes    | `v-notifications-panel-header velt-notifications-panel--header` (wrapper), `v-tabs-container velt-notifications-panel--tabs-container` (tabs container) |

***

### `notifications-panel-header-tab-for-you` / `-tab-people` / `-tab-documents` / `-tab-all`

The four tab buttons. Same shape; differ only in which `selectedTab` value they highlight.

* **Public elements:** `<velt-notifications-panel-header-tab-for-you>`, `<velt-notifications-panel-header-tab-people>`, `<velt-notifications-panel-header-tab-documents>`, `<velt-notifications-panel-header-tab-all>`
* **Wireframe tags:** `<velt-notifications-panel-header-tab-for-you-wireframe>` (and the three analogous tags).

| Property          | Value                                                                                                                                |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Extra variables   | None.                                                                                                                                |
| `shouldShow`      | Each tab is gated on `tabConfig.<tabId>` being truthy. The `selected` modifier class is applied when `selectedTab === TABS.<TabId>`. |
| Host class        | `v-tab velt-notifications-panel--tab`                                                                                                |
| Conditional class | `selected` / `velt-notifications-panel--tab-selected` (when `selectedTab === TABS.<TabId>`)                                          |

***

### `notifications-panel-content`

The body container. Renders one of four content children based on `selectedTab`.

* **Public element:** `<velt-notifications-panel-content>`
* **Wireframe tag:** `<velt-notifications-panel-content-wireframe>`
* **Children:** `*-content-for-you`, `*-content-people`, `*-content-documents`, `*-content-all`, `*-content-list`, `*-content-load-more`, `*-content-all-read-container`.

| Property        | Value                        |
| --------------- | ---------------------------- |
| Extra variables | None at the container level. |

***

### `notifications-panel-content-for-you` / `-content-all`

Tab body for the For-you / All tabs. Both render a chronological list (`notificationsByDate` for All, `notificationsForYouInSession` for For-you).

* **Wireframe tags:** `<velt-notifications-panel-content-for-you-wireframe>`, `<velt-notifications-panel-content-all-wireframe>`.

| Property          | Value                                                                                  |
| ----------------- | -------------------------------------------------------------------------------------- |
| Extra variables   | None at the container level — descendants receive `notification` per iteration.        |
| `shouldShow`      | Gated by parent on `selectedTab` matching this tab id.                                 |
| Host class        | `v-notifications velt-notifications-panel-content`                                     |
| Conditional class | `velt-notifications-panel-content--sidebar-panel` (when `panelOpenMode === 'sidebar'`) |

***

### `notifications-panel-content-people`

Tab body for the People tab. Iterates `notificationsByUserMap`.

* **Wireframe tag:** `<velt-notifications-panel-content-people-wireframe>`.

| Property        | Value                                                                                               |
| --------------- | --------------------------------------------------------------------------------------------------- |
| Extra variables | None at the container level — list-item descendants receive `user` and `userNotifications` per row. |
| `shouldShow`    | Gated by parent on `selectedTab === 'people'`.                                                      |
| Host class      | `v-users velt-notifications-panel-content--people`                                                  |

***

### `notifications-panel-content-documents`

Tab body for the Documents tab. Iterates `notificationsByDocumentId`.

* **Wireframe tag:** `<velt-notifications-panel-content-documents-wireframe>`.

| Property        | Value                                                                                                              |
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
| Extra variables | None at the container level — list-item descendants receive `documentId`, `documentName`, `documentNotifications`. |
| `shouldShow`    | Gated by parent on `selectedTab === 'documents'`.                                                                  |
| Host class      | `v-documents velt-notifications-panel-content--document`                                                           |

***

### `notifications-panel-content-list`

Iteration primitive that renders one row per notification. Injected with the per-tab notifications array.

* **Public element:** `<velt-notifications-panel-content-list>`
* **Wireframe tag:** `<velt-notifications-panel-content-list-wireframe>`

| Variable        | Type                                                                     | Example                                      |
| --------------- | ------------------------------------------------------------------------ | -------------------------------------------- |
| `notification`  | [`Notification`](/api-reference/sdk/models/data-models#notification)     | `<velt-data field="notification.title" />`   |
| `notifications` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `<velt-data field="notifications.length" />` |

***

### `notifications-panel-content-load-more`

"Load more" button at the bottom of paginated lists.

* **Public element:** `<velt-notifications-panel-content-load-more>`
* **Wireframe tag:** `<velt-notifications-panel-content-load-more-wireframe>`

| Variable            | Type                                                                     | Example                                      |
| ------------------- | ------------------------------------------------------------------------ | -------------------------------------------- |
| `notifications`     | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `<velt-data field="notifications.length" />` |
| `isLoadMoreVisible` | `boolean`                                                                | `velt-if="{isLoadMoreVisible}"`              |

| Property     | Value                                                         |
| ------------ | ------------------------------------------------------------- |
| `shouldShow` | `isLoadMoreVisible === true`                                  |
| Host class   | `v-load-more-btn velt-notifications-panel--content-load-more` |

***

### `notifications-panel-content-all-read-container`

Empty-state shown when the user has no unread notifications.

* **Public element:** `<velt-notifications-panel-content-all-read-container>`
* **Wireframe tag:** `<velt-notifications-panel-content-all-read-container-wireframe>`

| Variable    | Type      | Example                 |
| ----------- | --------- | ----------------------- |
| `isAllRead` | `boolean` | `velt-if="{isAllRead}"` |

| Property     | Value                                                                                                                                                                                                                                                 |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `shouldShow` | `isAllRead === true`                                                                                                                                                                                                                                  |
| Host classes | `all-notifications-read-container velt-notifications-panel--all-read-container` (wrapper), `notifications-read-emoji velt-notifications-panel--emoji` (emoji icon), `all-notifications-read-message velt-notifications-panel--message` (message text) |

***

### `notifications-panel-settings`

The settings view inside the panel. Renders header + accordion list + footer (mute-all section). Visible when the user clicks the settings button.

* **Public element:** `<velt-notifications-panel-settings>`
* **Wireframe tag:** `<velt-notifications-panel-settings-wireframe>`
* **Children:** `*-settings-header`, `*-settings-back-button`, `*-settings-title`, `*-settings-description`, `*-settings-accordion`, `*-settings-list`, `*-settings-footer`, `*-settings-mute-all-title`, `*-settings-mute-all-description`, `*-settings-mute-all-toggle`.

| Property        | Value                                                                                                     |
| --------------- | --------------------------------------------------------------------------------------------------------- |
| Extra variables | None at the container level — accordion descendants receive `setting` and `option` per iteration.         |
| `shouldShow`    | `settingsOpen === true`. The button-rendering parent additionally requires `settingsEnabled === true`.    |
| Host classes    | `velt-notification-panel--settings` (wrapper), `velt-notification-panel--settings-section` (each section) |

## Deeply-Nested Wireframe Tags

The four tab content primitives + per-tab list-items + the settings accordion all decompose further. Each tag below has its own `<velt-notifications-panel-...-wireframe>` registration and inherits context variables from its parent.

### Tab header explicit tags

| Tag                                                         | Notes          | Example                                                         |
| ----------------------------------------------------------- | -------------- | --------------------------------------------------------------- |
| `<velt-notifications-panel-header-tab-for-you-wireframe>`   | For-you tab.   | `velt-class="'selected': '{selectedTab} === {TABS.ForYou}'"`    |
| `<velt-notifications-panel-header-tab-people-wireframe>`    | People tab.    | `velt-class="'selected': '{selectedTab} === {TABS.People}'"`    |
| `<velt-notifications-panel-header-tab-documents-wireframe>` | Documents tab. | `velt-class="'selected': '{selectedTab} === {TABS.Documents}'"` |
| `<velt-notifications-panel-header-tab-all-wireframe>`       | All tab.       | `velt-class="'selected': '{selectedTab} === {TABS.All}'"`       |

### For-you / generic list-item tags

Inside each, `notification` is the per-iteration variable.

| Tag                                                                | Notes                          | Example                                            |
| ------------------------------------------------------------------ | ------------------------------ | -------------------------------------------------- |
| `<velt-notifications-panel-content-list-item-wireframe>`           | A single notification row.     | `velt-class="'is-unread': '!{notification.read}'"` |
| `<velt-notifications-panel-content-list-item-avatar-wireframe>`    | Avatar of `notification.from`. | `<velt-data field="notification.from.photoUrl" />` |
| `<velt-notifications-panel-content-list-item-headline-wireframe>`  | Headline text.                 | `<velt-data field="notification.title" />`         |
| `<velt-notifications-panel-content-list-item-body-wireframe>`      | Body text.                     | `<velt-data field="notification.message" />`       |
| `<velt-notifications-panel-content-list-item-file-name-wireframe>` | Document-name fragment.        | `<velt-data field="notification.documentName" />`  |
| `<velt-notifications-panel-content-list-item-time-wireframe>`      | Relative timestamp.            | `<velt-data field="notification.createdAt" />`     |
| `<velt-notifications-panel-content-list-item-unread-wireframe>`    | Unread indicator dot.          | `velt-if="!{notification.read}"`                   |

### People-tab list-item tags

Each row represents a user with their notifications grouped under them.

| Tag                                                                     | Notes                                       | Example                                                |
| ----------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
| `<velt-notifications-panel-content-people-list-wireframe>`              | The list wrapper.                           | (iterates `notificationsByUserMap`)                    |
| `<velt-notifications-panel-content-people-list-item-wireframe>`         | A single user row.                          | `velt-class="'expanded': {usersExpanded[user.email]}"` |
| `<velt-notifications-panel-content-people-list-item-avatar-wireframe>`  | User avatar.                                | `<velt-data field="user.photoUrl" />`                  |
| `<velt-notifications-panel-content-people-list-item-name-wireframe>`    | User name.                                  | `<velt-data field="user.name" />`                      |
| `<velt-notifications-panel-content-people-list-item-content-wireframe>` | Expanded notification list under this user. | (composes generic list-items)                          |
| `<velt-notifications-panel-content-people-list-item-count-wireframe>`   | Unread-count badge for this user.           | `<velt-data field="userNotifications.length" />`       |

### Documents-tab list-item tags

| Tag                                                                        | Notes                                           | Example                                                   |
| -------------------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------------- |
| `<velt-notifications-panel-content-documents-list-item-wireframe>`         | A single document row.                          | `velt-class="'expanded': {documentExpanded[documentId]}"` |
| `<velt-notifications-panel-content-documents-list-item-name-wireframe>`    | Document name.                                  | `<velt-data field="documentName" />`                      |
| `<velt-notifications-panel-content-documents-list-item-content-wireframe>` | Expanded notification list under this document. | (composes generic list-items)                             |
| `<velt-notifications-panel-content-documents-list-item-count-wireframe>`   | Notification count for this document.           | `<velt-data field="documentNotifications.length" />`      |
| `<velt-notifications-panel-content-documents-list-item-unread-wireframe>`  | Unread indicator.                               | `velt-if="{hasUnread}"`                                   |

### All-tab list-item tags

| Tag                                                                  | Notes                                             | Example                                       |
| -------------------------------------------------------------------- | ------------------------------------------------- | --------------------------------------------- |
| `<velt-notifications-panel-content-all-list-wireframe>`              | The list wrapper. Iterates `notificationsByDate`. | (composes per-date rows)                      |
| `<velt-notifications-panel-content-all-list-item-wireframe>`         | A single date-group row.                          | `<velt-data field="dateGroup.displayName" />` |
| `<velt-notifications-panel-content-all-list-item-content-wireframe>` | Notification list within a date group.            | (composes generic list-items)                 |
| `<velt-notifications-panel-content-all-list-item-label-wireframe>`   | Date label.                                       | `<velt-data field="dateGroup.displayName" />` |

### Settings tags

The settings view's accordion decomposes per row. `setting` and `option` are per-iteration variables.

| Tag                                                                              | Notes                                              | Example                                                                              |
| -------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------ |
| `<velt-notifications-panel-settings-header-wireframe>`                           | Header bar of the settings view.                   | (composes back-button + title)                                                       |
| `<velt-notifications-panel-settings-header-title-wireframe>`                     | Header title.                                      | (static label)                                                                       |
| `<velt-notifications-panel-settings-back-button-wireframe>`                      | Back button.                                       | (click handler closes the settings view)                                             |
| `<velt-notifications-panel-settings-title-wireframe>`                            | Section title.                                     | (static label)                                                                       |
| `<velt-notifications-panel-settings-description-wireframe>`                      | Section description.                               | (static label)                                                                       |
| `<velt-notifications-panel-settings-list-wireframe>`                             | Accordion list wrapper.                            | (iterates `settingsConfig`)                                                          |
| `<velt-notifications-panel-settings-accordion-wireframe>`                        | A single accordion row.                            | `velt-class="'expanded': {settingsAccordionExpanded[setting.id]}"`                   |
| `<velt-notifications-panel-settings-accordion-trigger-wireframe>`                | Trigger of an accordion row.                       | (click handler)                                                                      |
| `<velt-notifications-panel-settings-accordion-trigger-icon-wireframe>`           | Trigger icon.                                      | `<velt-data field="setting.name" />`                                                 |
| `<velt-notifications-panel-settings-accordion-trigger-label-wireframe>`          | Trigger label.                                     | `<velt-data field="setting.name" />`                                                 |
| `<velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>` | Currently-selected value displayed on the trigger. | `<velt-data field="settingsSelectedOption[setting.id]" />`                           |
| `<velt-notifications-panel-settings-accordion-content-wireframe>`                | Expanded content (option list).                    | (iterates `setting.options`)                                                         |
| `<velt-notifications-panel-settings-accordion-content-item-wireframe>`           | Per-option row.                                    | `velt-class="'selected': '{option.value} === {settingsSelectedOption[setting.id]}'"` |
| `<velt-notifications-panel-settings-accordion-content-item-icon-wireframe>`      | Option icon.                                       | `<velt-data field="option.icon" />`                                                  |
| `<velt-notifications-panel-settings-accordion-content-item-label-wireframe>`     | Option label.                                      | `<velt-data field="option.label" />`                                                 |
| `<velt-notifications-panel-settings-footer-wireframe>`                           | Footer wrapper holding the mute-all section.       | (composes mute-all children)                                                         |
| `<velt-notifications-panel-settings-mute-all-title-wireframe>`                   | "Mute all" label.                                  | (static label)                                                                       |
| `<velt-notifications-panel-settings-mute-all-description-wireframe>`             | Description text.                                  | (static label)                                                                       |
| `<velt-notifications-panel-settings-mute-all-toggle-wireframe>`                  | Toggle switch bound to `settingsMutedAll`.         | `velt-class="'on': {settingsMutedAll}"`                                              |

## Example

A minimal notifications panel with a title bar (title + close + settings + read-all buttons) and the per-tab content area.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
      <VeltNotificationsPanelWireframe>
        <VeltNotificationsPanelWireframe.Header>
          <div className="my-panel__title">
            <VeltNotificationsPanelWireframe.Title />
            <VeltNotificationsPanelWireframe.ReadAllButton />
            <VeltNotificationsPanelWireframe.SettingsButton />
            <VeltNotificationsPanelWireframe.CloseButton />
          </div>
        </VeltNotificationsPanelWireframe.Header>
        <VeltNotificationsPanelWireframe.Content />
      </VeltNotificationsPanelWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe>
      <velt-notifications-panel-wireframe>
        <velt-notifications-panel-header-wireframe>
          <div class="my-panel__title">
            <velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
            <velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
            <velt-notifications-panel-settings-button-wireframe></velt-notifications-panel-settings-button-wireframe>
            <velt-notifications-panel-close-button-wireframe></velt-notifications-panel-close-button-wireframe>
          </div>
        </velt-notifications-panel-header-wireframe>
        <velt-notifications-panel-content-wireframe></velt-notifications-panel-content-wireframe>
      </velt-notifications-panel-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Related

* [Notifications Panel Wireframes](./wireframes) — composition reference for the wireframe tags themselves.
* [Notifications Panel Primitives](./primitives) — granular components if you don't need a full wireframe.
* [Notifications Tool Wireframe Variables](../notifications-tool/wireframe-variables) — variables for the bell-icon trigger that opens this panel (most variables are shared).
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.