Comment Sidebar Wireframe Variables

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

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

<VeltWireframe>
  <VeltCommentsSidebarWireframe>
    <VeltCommentsSidebarWireframe.Header>
      <div className="my-sidebar__title">
        <strong>Comments</strong>
        <VeltCommentsSidebarWireframe.FilterButton />
        <VeltCommentsSidebarWireframe.FullscreenButton />
        <VeltCommentsSidebarWireframe.CloseButton />
      </div>
    </VeltCommentsSidebarWireframe.Header>
    <VeltCommentsSidebarWireframe.List />
    <VeltCommentsSidebarWireframe.EmptyPlaceholder veltIf="{componentConfig.noCommentsFound}">
      <p>No comments yet.</p>
    </VeltCommentsSidebarWireframe.EmptyPlaceholder>
    <VeltCommentsSidebarWireframe.PageModeComposer />
  </VeltCommentsSidebarWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe>
  <velt-comments-sidebar-wireframe>
    <velt-comments-sidebar-header-wireframe>
      <div class="my-sidebar__title">
        <strong>Comments</strong>
        <velt-comments-sidebar-filter-button-wireframe></velt-comments-sidebar-filter-button-wireframe>
        <velt-comments-sidebar-fullscreen-button-wireframe></velt-comments-sidebar-fullscreen-button-wireframe>
        <velt-comments-sidebar-close-button-wireframe></velt-comments-sidebar-close-button-wireframe>
      </div>
    </velt-comments-sidebar-header-wireframe>
    <velt-comments-sidebar-list-wireframe></velt-comments-sidebar-list-wireframe>
    <velt-comments-sidebar-empty-placeholder-wireframe velt-if="{componentConfig.noCommentsFound}">
      <p>No comments yet.</p>
    </velt-comments-sidebar-empty-placeholder-wireframe>
    <velt-comments-sidebar-page-mode-composer-wireframe></velt-comments-sidebar-page-mode-composer-wireframe>
  </velt-comments-sidebar-wireframe>
</velt-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.

---

comment-sidebar-minimal-filter-dropdown

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" />

---

comment-sidebar-minimal-actions-dropdown

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.

---

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.

---

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

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.

Top-level sidebar tags

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)

Filter panel tags

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)

Filter-item tags

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" />

Standalone status / location / document dropdown tags

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)

Minimal filter / actions dropdown tags

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)

Related

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