> ## 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.

# Inline Comments Section Wireframe Variables

> Template variables exposed by the Inline Comments Section 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 **Inline Comments Section** wireframe exposes the variables below. Use them inside any `<velt-inline-comments-section-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                           |
| ------------------------- | --------------------------- | ------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="annotations.length" />`        |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{skeletonLoading}"`                     |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'sort-{sortState.sortOrder}': true"` |

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

<Note>
  **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside an Inline Comments Section wireframe, prefer the explicit path on the right when reading these values:

  | Conflicting name         | Use this in Inline Comments Section   |
  | ------------------------ | ------------------------------------- |
  | `readOnly`               | `featureState.readOnly`               |
  | `messageTruncation`      | `featureState.messageTruncation`      |
  | `messageTruncationLines` | `featureState.messageTruncationLines` |
  | `componentId`            | `uiState.componentId`                 |
</Note>

The list iterates through the standard Comment Dialog primitives — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) for variables that resolve inside nested dialog tags.

## App State

App-wide values resolved from the shared signal.

| Variable | Type                                                 | Description                    | Example                           |
| -------- | ---------------------------------------------------- | ------------------------------ | --------------------------------- |
| `user`   | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="user.name" />` |

## Data State

Per-section data: the live annotation list, the in-flight composer annotation, and available statuses.

| Variable                    | Type                                                                                          | Description                                               | Example                                       |
| --------------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------- |
| `annotations`               | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]`            | Annotations rendered in this section after filter / sort. | `<velt-data field="annotations.length" />`    |
| `allAnnotations`            | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]`            | Unfiltered list scoped to the section's target element.   | `<velt-data field="allAnnotations.length" />` |
| `composerCommentAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) \| `undefined` | Draft annotation being composed in this section.          | `velt-if="{composerCommentAnnotation}"`       |
| `statuses`                  | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)`[]`                      | Available status options for the filter dropdown.         | `<velt-data field="statuses.0.name" />`       |

## UI State

Per-instance UI flags driven by the section itself.

| Variable                                | Type                                                                     | Description                                                                                                    | Example                                                                      |
| --------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `skeletonLoading`                       | `boolean`                                                                | Skeleton loader is active while annotations load.                                                              | `velt-if="{skeletonLoading}"`                                                |
| `darkMode`                              | `boolean`                                                                | Dark mode is active.                                                                                           | `velt-class="'dark': {darkMode}"`                                            |
| `variant`                               | `string`                                                                 | Per-instance variant tag set on the host element.                                                              | `<velt-data field="variant" />`                                              |
| `uiState.componentId`                   | `string`                                                                 | Unique id of this section instance.                                                                            | `<velt-data field="uiState.componentId" />`                                  |
| `filterState`                           | `InlineSectionFilterState`                                               | Combined filter state (filters + dropdown open).                                                               | `<velt-data field="filterState.filters.length" />`                           |
| `filterState.filters`                   | `InlineSectionFilterItem[]`                                              | Per-status filter rows.                                                                                        | `<velt-data field="filterState.filters.length" />`                           |
| `filterState.filterDropdownOpen`        | `boolean`                                                                | Filter dropdown menu is open.                                                                                  | `velt-class="'open': {filterState.filterDropdownOpen}"`                      |
| `sortState`                             | `InlineSectionSortState`                                                 | Combined sort state.                                                                                           | `<velt-data field="sortState.sortBy" />`                                     |
| `sortState.sortBy`                      | `'createdAt'` \| `'lastUpdated'`                                         | Current sort field.                                                                                            | `<velt-data field="sortState.sortBy" />`                                     |
| `sortState.sortOrder`                   | `'asc'` \| `'desc'`                                                      | Current sort direction.                                                                                        | `velt-class="'sort-{sortState.sortOrder}': true"`                            |
| `sortState.activeSortOption`            | `InlineSortingCriteria`                                                  | Currently selected sort option.                                                                                | `<velt-data field="sortState.activeSortOption" />`                           |
| `sortState.sortingDropdownOpen`         | `boolean`                                                                | Sort dropdown menu is open.                                                                                    | `velt-class="'open': {sortState.sortingDropdownOpen}"`                       |
| `isResolvedCommentsOnDomFilterSelected` | `boolean`                                                                | "Show resolved" filter is currently selected.                                                                  | `velt-class="'show-resolved': {isResolvedCommentsOnDomFilterSelected}"`      |
| `resolvedCommentsOnDom`                 | `boolean`                                                                | Resolved annotations are rendered.                                                                             | `velt-if="{resolvedCommentsOnDom}"`                                          |
| `selectedAnnotationsMap`                | `SelectedAnnotationsMap`                                                 | Map keyed by `annotationId` → selected flag.                                                                   | `velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"` |
| `selectedAnnotationsLocationMap`        | `SelectedAnnotationsLocationMap`                                         | Internal selection bookkeeping by location.                                                                    | *Internal — read entries via bracket notation if needed.*                    |
| `parentLocalUIState.shadowDom`          | `boolean`                                                                | Shadow-DOM rendering is enabled.                                                                               | *Host config — set via element attribute.*                                   |
| `dialogVariant`                         | `string`                                                                 | Variant forwarded to nested comment-dialogs.                                                                   | `<velt-data field="dialogVariant" />`                                        |
| `composerVariant`                       | `string`                                                                 | Variant forwarded to the composer.                                                                             | `<velt-data field="composerVariant" />`                                      |
| `composerPosition`                      | `ComposerPosition`                                                       | Composer placement (`'top'` or `'bottom'`).                                                                    | `velt-class="'composer-{composerPosition}': true"`                           |
| `multiThread`                           | `boolean`                                                                | Multi-thread layout is active.                                                                                 | `velt-class="'multi-thread': {multiThread}"`                                 |
| `fullExpanded`                          | `boolean`                                                                | Section is fully expanded.                                                                                     | `velt-class="'expanded': {fullExpanded}"`                                    |
| `commentPlaceholder`                    | `string`                                                                 | Placeholder for the new-comment composer.                                                                      | `<velt-data field="commentPlaceholder" />`                                   |
| `replyPlaceholder`                      | `string`                                                                 | Placeholder for the reply composer.                                                                            | `<velt-data field="replyPlaceholder" />`                                     |
| `composerPlaceholder`                   | `string`                                                                 | Generic composer placeholder.                                                                                  | `<velt-data field="composerPlaceholder" />`                                  |
| `editPlaceholder`                       | `string`                                                                 | Placeholder for the generic edit composer.                                                                     | `<velt-data field="editPlaceholder" />`                                      |
| `editCommentPlaceholder`                | `string`                                                                 | Placeholder for the edit-comment composer.                                                                     | `<velt-data field="editCommentPlaceholder" />`                               |
| `editReplyPlaceholder`                  | `string`                                                                 | Placeholder for the edit-reply composer.                                                                       | `<velt-data field="editReplyPlaceholder" />`                                 |
| `targetElementId`                       | `string`                                                                 | DOM target the section is anchored to.                                                                         | `<velt-data field="targetElementId" />`                                      |
| `folderId`                              | `string`                                                                 | Folder this section's annotations belong to.                                                                   | `<velt-data field="folderId" />`                                             |
| `veltFolderId`                          | `string`                                                                 | Velt-managed folder id.                                                                                        | `<velt-data field="veltFolderId" />`                                         |
| `clientDocumentId`                      | `string`                                                                 | Client-supplied document id.                                                                                   | `<velt-data field="clientDocumentId" />`                                     |
| `documentId`                            | `string`                                                                 | Resolved document id for this section.                                                                         | `<velt-data field="documentId" />`                                           |
| `locationId`                            | `string`                                                                 | Location id this section is scoped to.                                                                         | `<velt-data field="locationId" />`                                           |
| `context`                               | `Record<string, any>`                                                    | Free-form annotation context.                                                                                  | `<velt-data field="context.something" />`                                    |
| `contextOptions`                        | [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions) | Context-options config for new annotations.                                                                    | `<velt-data field="contextOptions.documentId" />`                            |
| `readOnly`                              | `boolean`                                                                | Per-instance read-only flag. Prefer `featureState.readOnly` (see naming conflicts above).                      | `velt-class="'readonly': {readOnly}"`                                        |
| `messageTruncation`                     | `boolean`                                                                | Per-instance truncation flag. Prefer `featureState.messageTruncation` (see naming conflicts above).            | `velt-class="'truncate': {messageTruncation}"`                               |
| `messageTruncationLines`                | `number`                                                                 | Per-instance truncation line count. Prefer `featureState.messageTruncationLines` (see naming conflicts above). | `<velt-data field="messageTruncationLines" />`                               |

## Feature State

Capability flags toggled via SDK config.

| Variable                              | Type      | Description                         | Example                                                     |
| ------------------------------------- | --------- | ----------------------------------- | ----------------------------------------------------------- |
| `featureState.readOnly`               | `boolean` | Section is in read-only mode.       | `velt-class="'readonly': {featureState.readOnly}"`          |
| `featureState.anonymousEmail`         | `boolean` | Anonymous-email capture is enabled. | `velt-if="{featureState.anonymousEmail}"`                   |
| `featureState.messageTruncation`      | `boolean` | Long messages are truncated.        | `velt-class="'truncate': {featureState.messageTruncation}"` |
| `featureState.messageTruncationLines` | `number`  | Line count for truncation.          | `<velt-data field="featureState.messageTruncationLines" />` |

## Common Props

Every Inline Comments Section 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-section config signal (annotations, statuses, filter / sort state).
* `[parentLocalUIState]` — per-instance UI state signal.

The root `<velt-inline-comments-section>` element additionally accepts attributes that map onto config and local UI state values: `target-element-id`, `folder-id`, `document-id`, `location-id`, `context`, `dialog-variant`, `composer-variant`, `composer-position`, `comment-placeholder` / `reply-placeholder` / `composer-placeholder` / `edit-placeholder`, `multi-thread`, `full-expanded`, `read-only`, `message-truncation`, `message-truncation-lines`, `dark-mode`, `variant`, `shadow-dom`.

## 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                                        |
| ------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------- |
| `filter`            | `InlineSectionFilterItem<`[`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)`>` | filter-dropdown list-item / checkbox / label tags  | `<velt-data field="filter.metadata.name" />`   |
| `filter.id`         | `string`                                                                                          | Same as above.                                     | `<velt-data field="filter.id" />`              |
| `filter.isSelected` | `boolean`                                                                                         | Same as above.                                     | `velt-class="'selected': {filter.isSelected}"` |
| `filter.metadata`   | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)                              | Same as above.                                     | `<velt-data field="filter.metadata.color" />`  |
| `sortOption`        | `InlineSortingCriteria`                                                                           | sorting-dropdown content-item / -icon / -tick tags | `<velt-data field="sortOption" />`             |
| `sortOptionText`    | `string`                                                                                          | sorting-dropdown content-item / -name tags         | `<velt-data field="sortOptionText" />`         |
| `isActive`          | `boolean`                                                                                         | sorting-dropdown content-item                      | `velt-class="'active': {isActive}"`            |
| `isAscending`       | `boolean`                                                                                         | sorting-dropdown content-item-icon                 | `velt-if="{isAscending}"`                      |

## Type Reference

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

| Type                                                                           | Description                                                                        |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.).                                |
| [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)           | Status definition (id, name, color, icon).                                         |
| [`User`](/api-reference/sdk/models/data-models#user)                           | Identified end-user object.                                                        |
| [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions)       | Context-options config for new annotations.                                        |
| `InlineSectionFilterState`                                                     | Combined filter-state shape (`filters`, `filterDropdownOpen`).                     |
| `InlineSectionFilterItem`                                                      | One filter row (`id`, `isSelected`, `metadata`).                                   |
| `InlineSortingCriteria`                                                        | Sort-option discriminator (`'createdAt'`, `'lastUpdated'`, `'mostReplies'`, etc.). |
| `ComposerPosition`                                                             | Composer placement (`'top'` \| `'bottom'`).                                        |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `inline-comments-section` (root)

The customer-facing root primitive customers place in their app.

* **Public element:** `<velt-inline-comments-section>`
* **Wireframe tag:** `<velt-inline-comments-section-wireframe>`

| Property        | Value                                   |
| --------------- | --------------------------------------- |
| Extra variables | None — root only sees common variables. |
| `shouldShow`    | Always renders when present.            |

***

### `inline-comments-section-panel`

The wrapper container for the section. Composes header (count + filter + sort) + list + composer.

* **Public element:** `<velt-inline-comments-section-panel>`
* **Wireframe tag:** `<velt-inline-comments-section-panel-wireframe>`

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

***

### `inline-comments-section-skeleton`

Skeleton loader.

* **Public element:** `<velt-inline-comments-section-skeleton>`
* **Wireframe tag:** `<velt-inline-comments-section-skeleton-wireframe>`

| Property        | Value                      |
| --------------- | -------------------------- |
| Extra variables | None.                      |
| `shouldShow`    | `skeletonLoading === true` |

***

### `inline-comments-section-comment-count`

The "N comments" label at the top of the section.

* **Public element:** `<velt-inline-comments-section-comment-count>`
* **Wireframe tag:** `<velt-inline-comments-section-comment-count-wireframe>`

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltInlineCommentsSectionWireframe.CommentCount>
      <VeltData field="annotations.length" /> comments
    </VeltInlineCommentsSectionWireframe.CommentCount>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-comment-count-wireframe>
      <velt-data field="annotations.length"></velt-data> comments
    </velt-inline-comments-section-comment-count-wireframe>
    ```
  </Tab>
</Tabs>

***

### `inline-comments-section-list`

Iterates `annotations` and renders a comment-dialog primitive per entry. Inside, the standard [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) resolve.

* **Public element:** `<velt-inline-comments-section-list>`
* **Wireframe tag:** `<velt-inline-comments-section-list-wireframe>`

| Property        | Value                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None at the list level. The nested comment-dialog tags receive `commentObj` / `commentIndex` from each iteration — see Comment Dialog. |

***

### `inline-comments-section-composer-container`

The per-section composer (renders the standard comment-dialog composer). Inside this wireframe the standard Comment Dialog Composer variables are available.

* **Public element:** `<velt-inline-comments-section-composer-container>`
* **Wireframe tag:** `<velt-inline-comments-section-composer-container-wireframe>`

| Property        | Value                                                                                                                                                                                                          |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables#comment-dialog-composer). |

## Deeply-Nested Wireframe Tags

The filter and sort dropdowns decompose further. Each tag below has its own `<velt-inline-comments-section-...-wireframe>` registration and inherits context variables from its parent dropdown.

### Filter dropdown tags

The filter dropdown lets the user filter the section by status. Composes trigger + content (with apply button) + per-status list-items.

| Tag                                                                                   | Notes                             | Example                                                 |
| ------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------- |
| `<velt-inline-comments-section-filter-dropdown-wireframe>`                            | Root.                             | `velt-class="'open': {filterState.filterDropdownOpen}"` |
| `<velt-inline-comments-section-filter-dropdown-trigger-wireframe>`                    | Trigger pill.                     | (click handler)                                         |
| `<velt-inline-comments-section-filter-dropdown-trigger-name-wireframe>`               | Trigger label.                    | `<velt-data field="filterState.filters.length" />`      |
| `<velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe>`              | Chevron.                          | *Visual only.*                                          |
| `<velt-inline-comments-section-filter-dropdown-content-wireframe>`                    | Open menu.                        | `velt-class="'open': {filterState.filterDropdownOpen}"` |
| `<velt-inline-comments-section-filter-dropdown-content-list-wireframe>`               | List wrapper.                     | (iterates over `filterState.filters`)                   |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>`          | Per-status row. Exposes `filter`. | `<velt-data field="filter.metadata.name" />`            |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe>` | Checkbox. Exposes `filter`.       | `velt-class="'checked': {filter.isSelected}"`           |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe>`    | Status name. Exposes `filter`.    | `<velt-data field="filter.metadata.name" />`            |
| `<velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe>`       | Apply button.                     | (click handler)                                         |

### Sorting dropdown tags

The sort dropdown — pick between "Created first", "Last updated", "Most replies", etc. Composes trigger + content + per-option content-items with tick / icon / name.

| Tag                                                                           | Notes                                                                                            | Example                                                |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| `<velt-inline-comments-section-sorting-dropdown-wireframe>`                   | Root.                                                                                            | `velt-class="'open': {sortState.sortingDropdownOpen}"` |
| `<velt-inline-comments-section-sorting-dropdown-trigger-wireframe>`           | Trigger pill.                                                                                    | (click handler)                                        |
| `<velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>`      | Trigger icon.                                                                                    | `velt-class="'sort-{sortState.sortOrder}': true"`      |
| `<velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>`      | Trigger label.                                                                                   | `<velt-data field="sortState.activeSortOption" />`     |
| `<velt-inline-comments-section-sorting-dropdown-content-wireframe>`           | Open menu.                                                                                       | `velt-class="'open': {sortState.sortingDropdownOpen}"` |
| `<velt-inline-comments-section-sorting-dropdown-content-item-wireframe>`      | Per-option row. Exposes `sortOption`, `sortOptionText`, `isActive`.                              | `velt-class="'active': {isActive}"`                    |
| `<velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe>` | Per-option icon. Exposes `sortOption`, `isAscending`.                                            | `velt-if="{isAscending}"`                              |
| `<velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe>` | Per-option label. Exposes `sortOptionText`.                                                      | `<velt-data field="sortOptionText" />`                 |
| `<velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe>` | Selected-indicator tick. Exposes `sortOption`. Visible only when this is the active sort option. | `<velt-data field="sortOption" />`                     |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item
      veltClass="'active': {isActive}">
      <VeltData field="sortOptionText" />
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content-item-wireframe
      velt-class="'active': {isActive}">
      <velt-data field="sortOptionText"></velt-data>
    </velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
    ```
  </Tab>
</Tabs>

## Related

* [Inline Comments Section Wireframes](./wireframes) — composition reference for the wireframe tags themselves.
* [Inline Comments Section Primitives](./primitives) — granular components if you don't need a full wireframe.
* [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.