Marker

Conversation timestamp/system-event marker: inline micro-status, outlined pill row, or labeled separator line. IM time dividers ("Today 10:00"), join/leave system events, and AI "generating" statuses all belong here.

Basic usage (three variants)

default / border / separator

System: conversation createdNew member joinedToday 10:00

Example

variant="default" (small secondary text, default) suits system notes; border is an outlined pill row for status badges; separator stretches lines on both sides of the text — the primary form for time dividers.

Time divider (separator)

Time dividers in a conversation flow

YesterdayLast message from yesterday.Today 10:00First message from today.

Example

Separator semantics discipline: a text-bearing separator must not get role="separator" — its accessible name would come from aria-label and the text would be treated as decoration, hiding "Yesterday/Today" from screen readers. This component adds no such role; the lines are purely visual.

Icons & streaming status

icon slot + role=status

Generating answer… All synced

Example

slot="icon" holds decorative icons (wrapper is aria-hidden; content carries the semantics). Streaming/progress status is declared by the host via role="status" directly (native ARIA reflection announces changes) — the component does not duplicate it.

Semantic status (status) & streaming shimmer (shimmer)

info / success / warning / danger + shimmer

Connected to serverSync complete (12 items)Only 10% storage leftConnection lostToday 10:00Generating answer… (shimmer)

Example

status (info / success / warning / danger) is a semantic status tier: text, border (border) and separator lines take semantic color tokens and adapt automatically in dark mode. The boolean shimmer enables a streaming shimmer (a gradient sweep across the text that only animates background position, never size; degrades to static text under prefers-reduced-motion). status only changes visual semantics — it does not set an ARIA role; streaming announcement is still declared by the host via role="status".

Empty state

Empty content

The first row (default) hides entirely without content; the second (separator) keeps the line itself — the line is its reason to exist.

Example

API

oas-marker

Attributes

Attribute	Description	Type	Default
shimmer	Boolean present: streaming shimmer (gradient sweep across the text; degrades to static text under prefers-reduced-motion)	—	—
status	Semantic status: info / success / warning / danger — text, border and separator take semantic color tokens (dark-mode aware; does not set an ARIA role, streaming announcement stays with the host)	—	—
variant	Variant: default (small secondary text), border (outlined pill row), separator (stretching lines both sides of the text — the primary time-divider form); empty content hides default/border entirely while separator keeps the line	—	—

Slots

Name	Description
default	Text content
icon	Decorative icon slot (wrapper is aria-hidden; streaming/progress status is declared by the host via role=status, not duplicated by the component)

CSS Variables

CSS Variable	Default
--oas-marker-font	inherit
--oas-marker-shimmer-from	var(--oas-color-text-secondary)
--oas-marker-shimmer-to	var(--oas-color-text-primary)

CSS variable: --oas-marker-font (font-size opening, default inherit). Parts: ::part(marker) / ::part(icon) / ::part(content). A11y discipline: a text-bearing separator must not get role="separator" (its accessible name would come from aria-label and the text would be treated as decoration).