Comment Sidebar Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Comment Sidebar is the panel that lists all annotations in a document — with filters, search, focused-thread view, and a page-mode composer. Variables below are available inside any <velt-comments-sidebar-...-wireframe> or <velt-comment-sidebar-...-wireframe> tag (both prefixes are used) via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="focusedAnnotation.from.name" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{componentConfig.skeletonLoading}"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"`

Hybrid access pattern. Unlike Comment Dialog, the sidebar uses a flat componentConfig model — every property lives directly on the root rather than nested under appState / data / uiState / featureState. A small set of sidebar-specific names are mapped — those are listed under Mapped Variables and resolve via bare names. For everything else, write {componentConfig.<name>} and the resolver will reach it via the flat fallback.

Mapped Variables

These entries resolve only inside sidebar wireframes — their data is set by the sidebar’s componentConfigSignal.

Variable	Type	Sample Value	Description	Example
`focusedAnnotation`	`CommentAnnotation`	`{ annotationId: "ann-42", from: { name: "Mayank" }, comments: [{ commentText: "Looks good", ... }], ... }`	The currently-focused annotation in focused-thread view. Supports deep paths (`{focusedAnnotation.from.name}`, `{focusedAnnotation.comments.length}`).	`<velt-data field="focusedAnnotation.from.name" />`
`selectedMinimalFilterDropdownOption`	`{ filter: string; sort: string }`	`{ filter: "all", sort: "date" }`	Currently-selected option in the minimal filter dropdown.	`velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"`
`appliedFiltersCount`	`number`	`2`	Number of filters currently applied — drives the badge on the filter button.	`<velt-data field="appliedFiltersCount" />`
`filteredCommentAnnotationsCount`	`number`	`12`	Count of annotations after filtering.	`<velt-data field="filteredCommentAnnotationsCount" />`
`unreadCommentAnnotationCount`	`number`	`3`	Count of unread annotations on the current document. Also exposed inside Comment Dialog.	`<velt-data field="unreadCommentAnnotationCount" />`

Inherited Mapped Variables

The sidebar shares these standard mapped entries with every other Comments feature. For full definitions see Comment Dialog Wireframe Variables:

App state: user, isUserAdmin, isKnownUser.
Per-instance UI: darkMode, variant.
Comment data: annotation, annotations, allAnnotations, commentAnnotation, commentAnnotations.

Inside a sidebar wireframe that nests a comment-dialog wireframe (e.g. focused-thread mode), all of the Comment Dialog variables become available.

Component Config

Many sidebar properties are not in the wireframe map. Reach them via {componentConfig.<name>}. Grouped by area for readability — the underlying shape is flat. Layout / mode — which rendering mode the sidebar is in.

Variable	Type	Description	Example
`componentConfig.darkMode`	`boolean`	Per-sidebar dark-mode flag.	`velt-class="'dark': {componentConfig.darkMode}"`
`componentConfig.variant`	`string`	Wireframe variant id (default `'sidebar'`).	`<velt-data field="componentConfig.variant" />`
`componentConfig.fullScreen`	`boolean`	Sidebar is rendered full-screen.	`velt-class="'fullscreen': {componentConfig.fullScreen}"`
`componentConfig.embedMode`	`string` \| `null`	Embedded vs floating vs default layout.	`velt-class="'embed-{componentConfig.embedMode}': true"`
`componentConfig.floatingMode`	`boolean`	Floating overlay layout is active.	`velt-class="'floating': {componentConfig.floatingMode}"`
`componentConfig.pageMode`	`boolean`	Page-mode layout is active.	`velt-class="'page-mode': {componentConfig.pageMode}"`
`componentConfig.readOnly`	`boolean`	Read-only mode is active.	`velt-class="'readonly': {componentConfig.readOnly}"`
`componentConfig.sidebarVisible`	`boolean`	Master visibility toggle.	`velt-if="{componentConfig.sidebarVisible}"`
`componentConfig.sidebarReadMode`	`boolean`	Read-mode flag.	`velt-class="'read-mode': {componentConfig.sidebarReadMode}"`
`componentConfig.fullExpanded`	`boolean`	Sidebar is fully expanded.	`velt-class="'expanded': {componentConfig.fullExpanded}"`

Loading / empty state.

Variable	Type	Description	Example
`componentConfig.skeletonLoading`	`boolean`	Skeleton loader is active while annotations load.	`velt-if="{componentConfig.skeletonLoading}"`
`componentConfig.noCommentsFound`	`boolean`	No annotations exist in scope.	`velt-if="{componentConfig.noCommentsFound}"`
`componentConfig.noCommentsFoundForAppliedFilters`	`boolean`	Filters reduced the list to zero.	`velt-if="{componentConfig.noCommentsFoundForAppliedFilters}"`

Filter state.

Variable	Type	Description	Example
`componentConfig.moreFiltersVisible`	`boolean`	Expanded filter panel is open.	`velt-class="'filters-open': {componentConfig.moreFiltersVisible}"`
`componentConfig.filterConfig`	`CommentSidebarFilterConfig`	Filter-panel configuration (`layout`, ordering, etc.).	`<velt-data field="componentConfig.filterConfig.layout" />`
`componentConfig.filters`	`Record<string, any[]>`	Currently-selected filter values per category.	`<velt-data field="componentConfig.filters.statuses.length" />`
`componentConfig.systemFiltersOperator`	`'AND'` \| `'OR'`	How multiple filter categories compose.	`velt-class="'op-{componentConfig.systemFiltersOperator}': true"`

List data.

Variable	Type	Description	Example
`componentConfig.virtualScrollData`	`{ type: string; data: any }[]`	Virtual-scroll items (annotations + section dividers).	`<velt-data field="componentConfig.virtualScrollData.length" />`
`componentConfig.commentAnnotationsCountByFilters`	`Record<string, Record<string, number>>`	Per-filter-category-and-id annotation count.	`<velt-data field="componentConfig.commentAnnotationsCountByFilters.status.OPEN" />`

Callbacks.

Variable	Type	Description	Example
`componentConfig.openMoreFilters`	`Function`	Open the more-filters panel. Wire to a custom trigger.	Call this from your custom click handler.
`componentConfig.toggleMoreFilters`	`Function`	Toggle the more-filters panel.	Call this from your custom click handler.

Common Props

The root <velt-comments-sidebar> element accepts a wide set of attributes; the most useful for wireframe authors:

React Prop	HTML Attribute	Type	Default	Description
`fullScreen`	`full-screen`	`boolean`	`false`	Full-screen layout.
`embedMode`	`embed-mode`	`string`	`null`	Embedded layout id (e.g. `'figma'`).
`floatingMode`	`floating-mode`	`boolean`	`false`	Floating-overlay layout.
`pageMode`	`page-mode`	`boolean`	`false`	Page-mode layout (includes top-level composer).
`darkMode`	`dark-mode`	`boolean`	`false`	Force dark mode.
`readOnly`	`read-only`	`boolean`	`false`	Read-only mode.
`variant`	`variant`	`string`	`'sidebar'`	Wireframe variant id.
`dialogVariant`	`dialog-variant`	`string`	—	Variant forwarded to nested comment-dialogs.
`focusedThreadDialogVariant`	`focused-thread-dialog-variant`	`string`	—	Variant for the focused-thread dialog.
`pageModeComposerVariant`	`page-mode-composer-variant`	`string`	—	Variant for the page-mode composer.
`sortBy`	`sort-by`	`string`	—	Sort field.
`sortOrder`	`sort-order`	`'asc'` \| `'desc'`	—	Sort direction.
`currentLocationSuffix`	`current-location-suffix`	`string`	—	Per-location suffix used in location-scoped filters.
`systemFiltersOperator`	`system-filters-operator`	`'AND'` \| `'OR'`	`'AND'`	How filter categories compose.
`selection`	`selection`	`string`	—	Selection behavior mode.
`expandOnSelection`	`expand-on-selection`	`boolean`	—	Auto-expand sidebar on annotation selection.
`sortData`	`sort-data`	`string`	—	Sort data source.
`queryParamsComments`	`query-params-comments`	`boolean`	—	Use URL query params for comment navigation.

Signal inputs (for parent-child component composition):

[componentConfigSignal] — shared per-sidebar config signal.

Every primitive accepts default-condition to bypass shouldShow for previews.

Context-Specific Variables

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

Variable	Type	Available in	Example
`focusedAnnotation`	`CommentAnnotation`	`<velt-comments-sidebar-focused-thread-wireframe>` and descendants	`<velt-data field="focusedAnnotation.from.name" />`
`sidebarRef`	`HTMLElement`	Focused-thread context — DOM reference to the sidebar overlay (used by inner overlay positioning).	Internal — not normally read in user wireframes.
`filter`	`{ name: string }`	Per-filter-category tags — `<velt-comments-sidebar-filter-name-wireframe>` and friends.	`<velt-data field="filter.name" />`
`item`	`{ name: string; count: number; selected: boolean }`	Per-option-row tags — filter-item children, status / location / document dropdown content-items.	`<velt-data field="item.name" />`
`group`	`{ name: string; count: number; expanded: boolean }`	`<velt-comments-sidebar-list-item-group-wireframe>` and children	`velt-class="'expanded': {group.expanded}"`
`tag`	`{ name: string }`	Filter-search-tag children — `<velt-comments-sidebar-filter-search-tags-item-wireframe>` and friends	`<velt-data field="tag.name" />`

Type Reference

Types referenced by the variables above are documented in Data Models:

Type	Description
`CommentAnnotation`	The annotation thread (id, status, comments, etc.).
`User`	Identified end-user object.
`CommentSidebarFilterConfig`	Filter-panel configuration (`layout`, ordering, etc.).

Subcomponents

Each subcomponent below has its own wireframe tag. For per-subcomponent CSS classes, see Styling; for per-subcomponent props, see the existing Comment Sidebar Components.

`comments-sidebar` (root)

The root primitive — the <velt-comments-sidebar> element customers place in their app.

Public element: <velt-comments-sidebar>
Wireframe tag: <velt-comments-sidebar-wireframe>

Property	Value
Extra variables	None — root only sees common variables.
`shouldShow`	`componentConfig.isFirstComponent		componentConfig.floatingMode		componentConfig.embedMode`. The floating-mode overlay additionally requires` componentConfig.sidebarVisible`.

Class	Applied when
`velt-comments-sidebar-container`	Always on the host wrapper.
`dark`	`componentConfig.darkMode` is true.
`snippyly-sidebar-panel velt-overlay-panel`	On the floating overlay container.

React / Next.js
Other Frameworks

<VeltCommentsSidebarWireframe>
  <VeltCommentsSidebarWrapperWireframe>
    <VeltCommentSidebarHeaderWireframe />
    <VeltCommentSidebarListWireframe />
    <VeltCommentSidebarEmptyPlaceholderWireframe
      velt-if="{componentConfig.noCommentsFound} || {componentConfig.noCommentsFoundForAppliedFilters}" />
  </VeltCommentsSidebarWrapperWireframe>
</VeltCommentsSidebarWireframe>

<velt-comments-sidebar-wireframe>
  <velt-comments-sidebar-wrapper-wireframe>
    <velt-comment-sidebar-header-wireframe></velt-comment-sidebar-header-wireframe>
    <velt-comment-sidebar-list-wireframe></velt-comment-sidebar-list-wireframe>
    <velt-comments-sidebar-empty-placeholder-wireframe
      velt-if="{componentConfig.noCommentsFound} || {componentConfig.noCommentsFoundForAppliedFilters}"></velt-comments-sidebar-empty-placeholder-wireframe>
  </velt-comments-sidebar-wrapper-wireframe>
</velt-comments-sidebar-wireframe>

`comments-sidebar-wrapper`

Wrapper element that hosts the actual sidebar content + scroll container. Always rendered when the sidebar is visible.

Public element: <velt-comments-sidebar-wrapper>
Wireframe tag: Registered via the wrapper’s own template; exposes componentConfigSignal and [darkMode].

Property	Value
Extra variables	None beyond common variables.

`comment-sidebar-header`

Top of the sidebar — title row with the action buttons (filter, fullscreen, close, search…).

Public element: <velt-comment-sidebar-header>
Wireframe tag: <velt-comment-sidebar-header-wireframe>

Property	Value
Extra variables	None beyond common variables.

`comment-sidebar-filter-button`

Filter icon button. Click opens the more-filters panel. An alternate badge SVG renders when appliedFiltersCount > 0.

Public element: <velt-comment-sidebar-filter-button>
Wireframe tag: <velt-comments-sidebar-filter-button-wireframe>

Property	Value
Extra variables	None.
Host classes	`velt-sidebar-header--filter-button` (always); `velt-comments-sidebar-filter-button-open` when `componentConfig.moreFiltersVisible` is true.

`comment-sidebar-close-button` / `comment-sidebar-fullscreen-button`

Close / fullscreen toggle buttons in the header.

Wireframe tags: <velt-comment-sidebar-close-button-wireframe>, <velt-comment-sidebar-fullscreen-button-wireframe>

Property	Value
Extra variables	None.

`comment-sidebar-search`

Search input row.

Public element: <velt-comment-sidebar-search>
Wireframe tag: <velt-comment-sidebar-search-wireframe>

Property	Value
Extra variables	None.

`comment-sidebar-filter`

The expanded filter panel — opens when the filter button is clicked. Contains many child filter primitives (status / priority / people / pages / documents / accessMode / commentCategory / version), each with its own <velt-comment-sidebar-filter-<name>-wireframe>.

Public element: <velt-comment-sidebar-filter>
Wireframe tag: <velt-comment-sidebar-filter-wireframe>

Property	Value
Extra variables	Per-iteration `filter` (category metadata) and `item` (per-option row) — see Context-Specific Variables.

The compact filter + sort dropdown shown in the minimal layout (when filterConfig.layout === 'minimal'). Composes a trigger + content; each has its own wireframe tag.

Wireframe tag: <velt-comments-sidebar-minimal-filter-dropdown-wireframe>

Variable	Type	Example
`selectedMinimalFilterDropdownOption.filter`	`string`	`velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"`
`selectedMinimalFilterDropdownOption.sort`	`string`	`<velt-data field="selectedMinimalFilterDropdownOption.sort" />`

The ”⋯” actions dropdown next to the minimal filter (mark all read, etc.).

Wireframe tag: <velt-comments-sidebar-minimal-actions-dropdown-wireframe>

Property	Value
Extra variables	None.

`comment-sidebar-status`

Status filter dropdown (one of the per-category filter dropdowns; lives inside the filter panel). A standalone selector is also available as <velt-comment-sidebar-status>.

Public element: <velt-comment-sidebar-status>
Wireframe tag: <velt-comment-sidebar-status-wireframe>

Property	Value
Extra variables	Per-iteration `item` for each status option — see Context-Specific Variables.

`comment-sidebar-list`

The annotations list. Iterates componentConfig.virtualScrollData and renders a comment-dialog primitive (in sidebar mode) per annotation entry.

Public element: <velt-comment-sidebar-list>
Wireframe tag: <velt-comment-sidebar-list-wireframe>

Property	Value
Extra variables	None at the list level. Nested comment-dialog wireframes (e.g. `<velt-comment-dialog-thread-card-wireframe>`) resolve in the standard Comment Dialog scope — see Comment Dialog Wireframe Variables.

`comment-sidebar-empty-placeholder`

Empty-state shown when the document has no annotations or the active filters reduce to zero.

Public element: <velt-comment-sidebar-empty-placeholder>
Wireframe tag: <velt-comments-sidebar-empty-placeholder-wireframe>

Property	Value
Extra variables	None.
`shouldShow`	`componentConfig.noCommentsFound		componentConfig.noCommentsFoundForAppliedFilters`

Class	Applied when
`velt-sidebar--no-comments-container`	Always on the wrapper.
`velt-sidebar--no-comments-block`	Inner block.
`velt-sidebar--no-comments-message-container`	Message wrapper.
`velt-sidebar--no-comments-message-header`	Heading.

`comment-sidebar-skeleton`

Skeleton loader shown while annotations are being fetched.

Public element: <velt-comment-sidebar-skeleton>
Wireframe tag: <velt-comment-sidebar-skeleton-wireframe>

Property	Value
Extra variables	None.
`shouldShow`	`componentConfig.skeletonLoading === true`

`comment-sidebar-focused-thread`

Focused-thread view — a single annotation taken full-width inside the sidebar with a back button. This is where focusedAnnotation becomes resolvable.

Public element: <velt-comment-sidebar-focused-thread>
Wireframe tag: <velt-comments-sidebar-focused-thread-wireframe>

Variable	Type	Example
`focusedAnnotation`	`CommentAnnotation`	`<velt-data field="focusedAnnotation.from.name" />`
`sidebarRef`	`HTMLElement`	Internal — DOM reference for overlay positioning.

Property	Value
`shouldShow`	`!componentConfig.skeletonLoading && componentConfig.focusedAnnotation` is set.

Class	Applied when
`velt-comment-sidebar-focused-thread`	Always on the wrapper.

The focused-thread renders its own back-button + a comment-dialog (in dialogVariant='sidebar' and focusedThreadDialogVariant='sidebar' modes). Inside the inner comment-dialog wireframes the standard Comment Dialog variables resolve — see Comment Dialog Wireframe Variables.

React / Next.js
Other Frameworks

<VeltCommentsSidebarFocusedThreadWireframe>
  <div className="my-focused-thread">
    <button className="back-button">Back</button>
    <h2><velt-data field="focusedAnnotation.from.name" /></h2>
    <p><velt-data field="focusedAnnotation.comments.0.commentText" /></p>
  </div>
</VeltCommentsSidebarFocusedThreadWireframe>

<velt-comments-sidebar-focused-thread-wireframe>
  <div class="my-focused-thread">
    <button class="back-button">Back</button>
    <h2><velt-data field="focusedAnnotation.from.name"></velt-data></h2>
    <p><velt-data field="focusedAnnotation.comments.0.commentText"></velt-data></p>
  </div>
</velt-comments-sidebar-focused-thread-wireframe>

`comment-sidebar-page-mode-composer`

The page-level “Add comment” composer at the top of the sidebar when componentConfig.pageMode is enabled.

Public element: <velt-comment-sidebar-page-mode-composer>
Wireframe tag: <velt-comment-sidebar-page-mode-composer-wireframe>

Property	Value
Extra variables	Delegates to the standard Comment Dialog composer — see Comment Dialog Composer.

`comment-sidebar-action-button` / `comment-sidebar-reset-filter-button`

Generic action-button / reset-filter-button primitives used inside the empty placeholder and other positions.

Wireframe tags: <velt-comment-sidebar-action-button-wireframe>, <velt-comment-sidebar-reset-filter-button-wireframe>

Property	Value
Extra variables	None.

Standalone filter dropdowns customers can place anywhere in their UI (independent of the main filter panel). Each has its own trigger + content + content-item structure.

Wireframe tags: <velt-comment-sidebar-location-filter-dropdown-wireframe>, <velt-comments-sidebar-document-filter-dropdown-wireframe>, <velt-comments-sidebar-status-dropdown-wireframe>

Property	Value
Extra variables	Per-iteration `item` for each option — see Context-Specific Variables.

Deeply-Nested Wireframe Tags

The sidebar has the largest set of overridable surfaces in the SDK. Tags are grouped by area below — every tag is registered and customers can override any individual surface.

Tag	Notes	Example
`<velt-comments-sidebar-panel-wireframe>`	The visible panel container.	`velt-class="'embed': {componentConfig.embedMode}"`
`<velt-comments-sidebar-header-wireframe>`	Sidebar header bar.	(composes header children)
`<velt-comments-sidebar-toggle-button-wireframe>`	Open / close toggle button.	(click handler)
`<velt-comments-sidebar-close-button-wireframe>`	Close button.	(click handler closes the sidebar)
`<velt-comments-sidebar-fullscreen-button-wireframe>`	Fullscreen toggle.	`velt-class="'fullscreen': {componentConfig.fullScreen}"`
`<velt-comments-sidebar-search-wireframe>`	Search input row.	`<velt-data field="componentConfig.searchQuery" />`
`<velt-comments-sidebar-list-wireframe>`	The annotations list.	(composes list-item rows)
`<velt-comments-sidebar-list-item-wireframe>`	Per-annotation row.	`velt-class="'is-selected': {annotation.selected}"`
`<velt-comments-sidebar-list-item-dialog-container-wireframe>`	Container for the inline comment-dialog inside a list item.	(composes the nested dialog)
`<velt-comments-sidebar-list-item-group-wireframe>`	Section divider for grouped lists.	`velt-class="'expanded': {group.expanded}"`
`<velt-comments-sidebar-list-item-group-name-wireframe>`	Group name label.	`<velt-data field="group.name" />`
`<velt-comments-sidebar-list-item-group-count-wireframe>`	Group count badge.	`<velt-data field="group.count" />`
`<velt-comments-sidebar-list-item-group-arrow-wireframe>`	Expand / collapse chevron.	`velt-class="'open': {group.expanded}"`
`<velt-comments-sidebar-skeleton-wireframe>`	Skeleton loader.	`velt-if="{componentConfig.skeletonLoading}"`
`<velt-comments-sidebar-page-mode-wireframe>`	Page-mode wrapper variant.	`velt-if="{componentConfig.pageMode}"`
`<velt-comments-sidebar-reset-filter-button-wireframe>`	Reset-filters button (used in empty placeholder).	`velt-if="{componentConfig.appliedFiltersCount} > 0"`
`<velt-comments-sidebar-focused-thread-dialog-container-wireframe>`	Container for the focused-thread comment-dialog.	(composes the nested dialog)

The expanded filter panel composes a title + close + many per-category sub-panels + done / reset buttons + per-item primitives.

Tag	Notes	Example
`<velt-comments-sidebar-filter-wireframe>`	The expanded filter panel root.	`velt-class="'open': {componentConfig.moreFiltersVisible}"`
`<velt-comments-sidebar-filter-title-wireframe>`	Panel title.	(static label)
`<velt-comments-sidebar-filter-close-button-wireframe>`	Close button.	(click handler)
`<velt-comments-sidebar-filter-done-button-wireframe>`	”Done” button to apply changes.	(click handler)
`<velt-comments-sidebar-filter-reset-button-wireframe>`	Reset-all button.	`velt-if="{componentConfig.appliedFiltersCount} > 0"`
`<velt-comments-sidebar-filter-view-all-wireframe>`	”View all” expander for a category with many options.	(click handler)
`<velt-comments-sidebar-filter-name-wireframe>`	Filter category name label.	`<velt-data field="filter.name" />`
`<velt-comments-sidebar-filter-status-wireframe>`	Status filter category.	(composes per-status rows)
`<velt-comments-sidebar-filter-priority-wireframe>`	Priority filter category.	(composes per-priority rows)
`<velt-comments-sidebar-filter-people-wireframe>`	People filter category.	(composes per-user rows)
`<velt-comments-sidebar-filter-assigned-wireframe>`	Assigned-to filter category.	(composes per-user rows)
`<velt-comments-sidebar-filter-tagged-wireframe>`	Tagged-with filter category.	(composes per-user rows)
`<velt-comments-sidebar-filter-involved-wireframe>`	Involved-in filter category.	(composes per-user rows)
`<velt-comments-sidebar-filter-document-wireframe>`	Document filter category.	(composes per-document rows)
`<velt-comments-sidebar-filter-location-wireframe>`	Location filter category.	(composes per-location rows)
`<velt-comments-sidebar-filter-versions-wireframe>`	Version filter category.	(composes per-version rows)
`<velt-comments-sidebar-filter-comment-type-wireframe>`	Comment-type filter category.	(composes per-type rows)
`<velt-comments-sidebar-filter-category-wireframe>`	Comment-category filter.	(composes per-category rows)
`<velt-comments-sidebar-filter-custom-wireframe>`	Custom filter category (for customer-defined filters).	(composes per-option rows)
`<velt-comments-sidebar-filter-group-by-wireframe>`	Group-by selector.	(composes per-group rows)

Inside each filter category, each individual option is rendered as a filter-item.

Tag	Notes	Example
`<velt-comments-sidebar-filter-item-wireframe>`	Per-option row.	`velt-class="'selected': {item.selected}"`
`<velt-comments-sidebar-filter-item-name-wireframe>`	Option name.	`<velt-data field="item.name" />`
`<velt-comments-sidebar-filter-item-count-wireframe>`	Option’s annotation-count badge.	`<velt-data field="item.count" />`
`<velt-comments-sidebar-filter-item-checkbox-wireframe>`	Checkbox wrapper.	(composes the two variants below)
`<velt-comments-sidebar-filter-item-checkbox-checked-wireframe>`	Checkbox icon (checked variant).	`velt-if="{item.selected}"`
`<velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe>`	Checkbox icon (unchecked variant).	`velt-if="!{item.selected}"`

Filter-search tags

Tag	Notes	Example
`<velt-comments-sidebar-filter-search-wireframe>`	Search input wrapper inside the filter panel.	(composes input + tags)
`<velt-comments-sidebar-filter-search-input-wireframe>`	The actual input.	(input handler)
`<velt-comments-sidebar-filter-search-dropdown-icon-wireframe>`	Dropdown chevron icon.	Visual only.
`<velt-comments-sidebar-filter-search-tags-wireframe>`	Selected-tag pills container.	`<velt-data field="componentConfig.selectedFilterTags.length" />`
`<velt-comments-sidebar-filter-search-tags-item-wireframe>`	A single selected-tag pill.	`<velt-data field="tag.name" />`
`<velt-comments-sidebar-filter-search-tags-item-name-wireframe>`	Tag name.	`<velt-data field="tag.name" />`
`<velt-comments-sidebar-filter-search-tags-item-close-wireframe>`	Tag remove (×) button.	(click handler)
`<velt-comments-sidebar-filter-search-hidden-count-wireframe>`	”+N more” badge when tags overflow.	`<velt-data field="hiddenCount" />`

Customers can place these dropdowns outside the main filter panel.

Tag	Notes	Example
`<velt-comments-sidebar-status-wireframe>`	Standalone status-filter root.	(composes trigger + content)
`<velt-comments-sidebar-status-dropdown-trigger-wireframe>`	Trigger pill.	(click handler)
`<velt-comments-sidebar-status-dropdown-trigger-name-wireframe>`	Label inside trigger.	`<velt-data field="item.name" />`
`<velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe>`	Trigger chevron.	Visual only.
`<velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe>`	Selected-count indicator dot.	`velt-if="{appliedFiltersCount} > 0"`
`<velt-comments-sidebar-status-dropdown-content-wireframe>`	Open menu wrapper.	(composes content rows)
`<velt-comments-sidebar-status-dropdown-content-item-wireframe>`	Per-status row.	`velt-class="'selected': {item.selected}"`
`<velt-comments-sidebar-status-dropdown-content-item-name-wireframe>`	Status name.	`<velt-data field="item.name" />`
`<velt-comments-sidebar-status-dropdown-content-item-icon-wireframe>`	Status icon.	`<velt-data field="item.icon" />`
`<velt-comments-sidebar-status-dropdown-content-item-count-wireframe>`	Status count badge.	`<velt-data field="item.count" />`
`<velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe>`	Checkbox.	(composes the two variants below)
`<velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe>`	Checked variant.	`velt-if="{item.selected}"`
`<velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe>`	Unchecked variant.	`velt-if="!{item.selected}"`
`<velt-comments-sidebar-document-filter-dropdown-trigger-wireframe>`	Document-filter dropdown trigger.	(click handler)
`<velt-comments-sidebar-document-filter-dropdown-trigger-label-wireframe>`	Trigger label.	`<velt-data field="item.name" />`
`<velt-comments-sidebar-document-filter-dropdown-content-wireframe>`	Document-filter open menu.	(composes content rows)
`<velt-comments-sidebar-location-filter-dropdown-wireframe>`	Location-filter root.	(composes trigger + content)
`<velt-comments-sidebar-location-filter-dropdown-trigger-wireframe>`	Trigger pill.	(click handler)
`<velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe>`	Trigger label.	`<velt-data field="item.name" />`
`<velt-comments-sidebar-location-filter-dropdown-content-wireframe>`	Open menu.	(composes content rows)

Compact filter + sort UI used in the minimal layout (matches the multi-thread pattern).

Tag	Notes	Example
`<velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe>`	Trigger pill.	(click handler)
`<velt-comments-sidebar-minimal-filter-dropdown-content-wireframe>`	Open menu.	(composes filter rows)
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe>`	”All” filter row.	`velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'all\\''"`
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-open-wireframe>`	”Open” filter row.	`velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'open\\''"`
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe>`	”Resolved” filter row.	(selected-state)
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe>`	”Read” filter row.	(selected-state)
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe>`	”Unread” filter row.	(selected-state)
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-assigned-to-me-wireframe>`	”Assigned to me” row.	(selected-state)
`<velt-comments-sidebar-minimal-filter-dropdown-content-filter-reset-wireframe>`	Reset-filter row.	(click handler)
`<velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe>`	Per-row selected tick.	`velt-if="{item.selected}"`
`<velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe>`	Sort-by-date row.	(selected-state)
`<velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe>`	Sort-by-unread row.	(selected-state)
`<velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe>`	Actions dropdown trigger (”⋯”).	(click handler)
`<velt-comments-sidebar-minimal-actions-dropdown-content-wireframe>`	Actions menu.	(composes the actions below)
`<velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe>`	”Mark all as read” action.	(click handler)
`<velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe>`	”Mark all as resolved” action.	(click handler)

Putting it together

A typical Comment Sidebar with a custom header showing an applied-filters badge, a list of annotations, and a focused-thread view that gates on focusedAnnotation:

React / Next.js
Other Frameworks

<VeltCommentsSidebarWireframe>
  <VeltCommentsSidebarWrapperWireframe>
    <VeltCommentSidebarHeaderWireframe>
      <h2>Comments</h2>
      <VeltCommentsSidebarFilterButtonWireframe
        velt-class="'has-filters': {appliedFiltersCount} > 0">
        Filter
        <span velt-if="{appliedFiltersCount} > 0">
          <velt-data field="appliedFiltersCount" />
        </span>
      </VeltCommentsSidebarFilterButtonWireframe>
      <VeltCommentSidebarCloseButtonWireframe />
    </VeltCommentSidebarHeaderWireframe>

    <VeltCommentSidebarListWireframe />

    <VeltCommentsSidebarEmptyPlaceholderWireframe
      velt-if="{componentConfig.noCommentsFound} || {componentConfig.noCommentsFoundForAppliedFilters}">
      <p>No comments to show.</p>
      <VeltCommentsSidebarResetFilterButtonWireframe
        velt-if="{appliedFiltersCount} > 0">
        Clear filters
      </VeltCommentsSidebarResetFilterButtonWireframe>
    </VeltCommentsSidebarEmptyPlaceholderWireframe>

    <VeltCommentsSidebarFocusedThreadWireframe>
      <div className="my-focused">
        <button>Back</button>
        <h3><velt-data field="focusedAnnotation.from.name" /></h3>
      </div>
    </VeltCommentsSidebarFocusedThreadWireframe>
  </VeltCommentsSidebarWrapperWireframe>
</VeltCommentsSidebarWireframe>

<velt-comments-sidebar-wireframe>
  <velt-comments-sidebar-wrapper-wireframe>
    <velt-comment-sidebar-header-wireframe>
      <h2>Comments</h2>
      <velt-comments-sidebar-filter-button-wireframe
        velt-class="'has-filters': {appliedFiltersCount} > 0">
        Filter
        <span velt-if="{appliedFiltersCount} > 0">
          <velt-data field="appliedFiltersCount"></velt-data>
        </span>
      </velt-comments-sidebar-filter-button-wireframe>
      <velt-comment-sidebar-close-button-wireframe></velt-comment-sidebar-close-button-wireframe>
    </velt-comment-sidebar-header-wireframe>

    <velt-comment-sidebar-list-wireframe></velt-comment-sidebar-list-wireframe>

    <velt-comments-sidebar-empty-placeholder-wireframe
      velt-if="{componentConfig.noCommentsFound} || {componentConfig.noCommentsFoundForAppliedFilters}">
      <p>No comments to show.</p>
      <velt-comments-sidebar-reset-filter-button-wireframe
        velt-if="{appliedFiltersCount} > 0">
        Clear filters
      </velt-comments-sidebar-reset-filter-button-wireframe>
    </velt-comments-sidebar-empty-placeholder-wireframe>

    <velt-comments-sidebar-focused-thread-wireframe>
      <div class="my-focused">
        <button>Back</button>
        <h3><velt-data field="focusedAnnotation.from.name"></velt-data></h3>
      </div>
    </velt-comments-sidebar-focused-thread-wireframe>
  </velt-comments-sidebar-wrapper-wireframe>
</velt-comments-sidebar-wireframe>

Comment Sidebar Components — wireframe overview and components reference.
Comment Sidebar V2 Wireframes — composition reference for the wireframe tags themselves.
Comment Sidebar V2 Primitives — granular components if you don’t need a full wireframe.
Comment Sidebar Button Wireframe Variables — the button that opens this sidebar.
Comment Dialog Wireframe Variables — variables that resolve inside nested dialog tags rendered by the list / focused-thread.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Comment Sidebar Wireframe Variables

Overview

Mapped Variables

Inherited Mapped Variables

Component Config

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`comments-sidebar` (root)

`comments-sidebar-wrapper`

`comment-sidebar-header`

`comment-sidebar-filter-button`

`comment-sidebar-close-button` / `comment-sidebar-fullscreen-button`

`comment-sidebar-search`

`comment-sidebar-filter`

`comment-sidebar-status`

`comment-sidebar-list`

`comment-sidebar-empty-placeholder`

`comment-sidebar-skeleton`

`comment-sidebar-focused-thread`

`comment-sidebar-page-mode-composer`

`comment-sidebar-action-button` / `comment-sidebar-reset-filter-button`

Deeply-Nested Wireframe Tags

Top-level sidebar tags

Filter panel tags

Filter-item tags

Filter-search tags

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Mapped Variables

​Inherited Mapped Variables

​Component Config

​Common Props

​Context-Specific Variables

​Type Reference

​Subcomponents

​comments-sidebar (root)

​comments-sidebar-wrapper

​comment-sidebar-header

​comment-sidebar-filter-button

​comment-sidebar-close-button / comment-sidebar-fullscreen-button

​comment-sidebar-search

​comment-sidebar-filter

​comment-sidebar-minimal-filter-dropdown

​comment-sidebar-minimal-actions-dropdown

​comment-sidebar-status

​comment-sidebar-list

​comment-sidebar-empty-placeholder

​comment-sidebar-skeleton

​comment-sidebar-focused-thread

​comment-sidebar-page-mode-composer

​comment-sidebar-action-button / comment-sidebar-reset-filter-button

​comment-sidebar-location-filter-dropdown / -document-filter-dropdown / -status-dropdown

​Deeply-Nested Wireframe Tags

​Top-level sidebar tags

​Filter panel tags

​Filter-item tags

​Filter-search tags

​Standalone status / location / document dropdown tags

​Minimal filter / actions dropdown tags

​Putting it together

​Related

Overview

Mapped Variables

Inherited Mapped Variables

Component Config

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`comments-sidebar` (root)

`comments-sidebar-wrapper`

`comment-sidebar-header`

`comment-sidebar-filter-button`

`comment-sidebar-close-button` / `comment-sidebar-fullscreen-button`

`comment-sidebar-search`

`comment-sidebar-filter`

`comment-sidebar-minimal-filter-dropdown`

`comment-sidebar-minimal-actions-dropdown`

`comment-sidebar-status`

`comment-sidebar-list`

`comment-sidebar-empty-placeholder`

`comment-sidebar-skeleton`

`comment-sidebar-focused-thread`

`comment-sidebar-page-mode-composer`

`comment-sidebar-action-button` / `comment-sidebar-reset-filter-button`

`comment-sidebar-location-filter-dropdown` / `-document-filter-dropdown` / `-status-dropdown`

Deeply-Nested Wireframe Tags

Top-level sidebar tags

Filter panel tags

Filter-item tags

Filter-search tags

Standalone status / location / document dropdown tags

Minimal filter / actions dropdown tags

Putting it together

Related