Bubble

Overview

Bubble is helm-native: ZitsBubble and its slots implement their own presentation, with no Navius primitive underneath. ZitsBubble sizes to content (up to 80% of the row) and paints its child ZitsBubbleContent through *:data-[slot=bubble-content] selectors driven by Variant; ZitsBubbleGroup stacks consecutive bubbles from the same sender, and ZitsBubbleReactions anchors an overlapping reaction row to a bubble edge.

Install

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

Bubble ships as part of the chat registry item alongside ZitsMessage, ZitsMessageScroller, and ZitsAttachment; there is no standalone bubble item.

Usage

@using Zits.Ui.Components

<ZitsBubble Variant="secondary">
    <ZitsBubbleContent>Nice work on the release.</ZitsBubbleContent>
    <ZitsBubbleReactions>
        <span role="img" aria-label="Reactions: thumbs up, heart">&#128077; &#10084;&#65039;</span>
    </ZitsBubbleReactions>
</ZitsBubble>

Parts and props

ChildContent and Attributes pass through unchanged on all four parts.

ZitsBubble adds:

Prop	Type	Default	Description
Variant	string	"default"	One of default, secondary, muted, tinted, outline, ghost, destructive. Paints the child ZitsBubbleContent.
Align	string	"start"	start or end; prefer setting alignment on ZitsMessage instead in chat UIs.

ZitsBubbleReactions adds:

Prop	Type	Default	Description
Side	string	"bottom"	top or bottom; which bubble edge the row overlaps.
Align	string	"end"	start or end.

ZitsBubbleContent and ZitsBubbleGroup take no variant/size params of their own.

Styling surface

Attributes on every part is merged with each part’s base class set via Cn.Class, with the caller’s classes applied last. For an interactive bubble, render your own button/a inside ZitsBubbleContent; it inherits the variant’s hover treatment via the [&>[data-slot=bubble-content]:is(button,a)] selectors (Blazor has no asChild/Slot equivalent, ADR-0003).

Parameter	Values
Variant	default · secondary · muted · tinted · outline · ghost · destructive
Align (Bubble)	start · end
Side (Reactions)	top · bottom
Align (Reactions)	start · end

Data attribute hooks

Part	Attribute	Description
Bubble	data-variant	Mirrors the Variant prop.
Bubble	data-align	Mirrors the Align prop.
BubbleReactions	data-side	Mirrors the Side prop.
BubbleReactions	data-align	Mirrors the Align prop.

Accessibility mechanism

None of these parts wire ARIA roles themselves; a reaction row of emoji spans should carry role="img" and a descriptive aria-label (as in Usage above) so it announces once instead of per-glyph. ZitsBubbleContent’s base class styles button/a descendants with a focus-visible ring, so an interactive bubble stays keyboard-focusable without extra wiring.