Marker

Overview

Marker is a three-part composite: ZitsMarker (root, Variant of default | border | separator), ZitsMarkerIcon (a decorative, hard-coded aria-hidden icon slot), and ZitsMarkerContent (the text, pairable with the shimmer CSS utility for streaming status). There is no Navius primitive underneath: Marker ships only in the chat registry bundle alongside Message, Bubble, and Attachment.

Install

navius add chat --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsMarker Variant="separator">
    <ZitsMarkerContent>Today</ZitsMarkerContent>
</ZitsMarker>

<ZitsMarker role="status">
    <ZitsMarkerIcon><ZitsSpinner /></ZitsMarkerIcon>
    <ZitsMarkerContent class="shimmer">Thinking&hellip;</ZitsMarkerContent>
</ZitsMarker>

Parts and props

Prop	Type	Default	Description
Variant	string	"default"	default | border | separator. Selects the Tailwind class set.

ZitsMarkerIcon and ZitsMarkerContent take only ChildContent and Attributes.

Styling surface

Every part accepts class/Attributes, merged via Cn.Class with the caller’s classes applied last.

Parameter	Values
Variant	default · border · separator

Data attribute hooks

Part	Attribute	Description
Marker	data-variant	Set from Variant; separator adds before/after divider rules, border adds a bottom border.

Marker is presentational by default (no ARIA role). For live status, the caller sets role="status" via the attribute seam and pairs a spinner in ZitsMarkerIcon with the shimmer class on ZitsMarkerContent. ZitsMarkerIcon hard-codes aria-hidden="true". Do not use role="separator" on a labeled separator-variant marker: it hides the visible label text from assistive tech. For an interactive marker, the shadcn source renders asChild over an a/ button; Blazor has no Slot/asChild equivalent (ADR-0003), so render your own anchor/button inside instead.