> ## 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](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) overview.

## 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`](https://velt.dev/docs/api-reference/sdk/models/data-models#notification)`[]` \| `null` | Notifications matched to the current user. | `<velt-data field="notificationsForYouInSession.length" />` |
| `notificationsInSession` | [`Notification`](https://velt.dev/docs/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`](https://velt.dev/docs/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`](https://velt.dev/docs/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`](https://velt.dev/docs/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`](https://velt.dev/docs/api-reference/sdk/models/data-models#notification) | `<velt-notifications-panel-content-list-wireframe>` and descendants | `<velt-data field="notification.title" />` |
| `notifications` | [`Notification`](https://velt.dev/docs/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}"` |
| `isDefault` | `boolean` | `<velt-notifications-panel-content-settings-accordion-content-item-wireframe>` and its icon/label descendants | `velt-class="'default': {isDefault}"` |

`isDefault` is `true` when the notification setting option is the default value for that settings accordion row.

## Type Reference

Types referenced by the variables above are documented in [Data Models](https://velt.dev/docs/api-reference/sdk/models/data-models.md):

| Type | Description |
| - | - |
| [`Notification`](https://velt.dev/docs/api-reference/sdk/models/data-models#notification) | A single notification (id, type, title, message, icon, from, to, documentId, documentName, createdAt, read, link, metadata). |
| [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Identified end-user object (used by `notification.from`, `notification.to`). |
| [`NotificationInitialSettingsConfig`](https://velt.dev/docs/api-reference/sdk/models/data-models#notificationinitialsettingsconfig) | One row of the settings tree (id, name, type, options). |
| [`NotificationConfigValue`](https://velt.dev/docs/api-reference/sdk/models/data-models#notificationconfigvalue) | A selectable value inside a settings dropdown. |
| [`NotificationTabConfig`](https://velt.dev/docs/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`](https://velt.dev/docs/api-reference/sdk/models/data-models#notification) | `<velt-data field="notification.title" />` |
| `notifications` | [`Notification`](https://velt.dev/docs/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`](https://velt.dev/docs/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.

> [tab] 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] 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>
> ```

## Related

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.