SearchField — prefix-icon · with search button · clear · disabled
resting (prefix icon)
showSearchButton + clear
disabled
SegmentedControl — height 32 · track gray-07 · r7
primary
with disabled item
Date-range indicator — .sb-daterange (header element family)
The header date-range indicator — part of the new header element family, reused across Views experiences. Lesser-hierarchy clickable indicator: transparent bg, 12px calendar glyph + mediumAction label, both blue-01. NO caret — canonical form is icon + label only; clicking opens the standard date-range picker (comp-datepicker). Last swatch = disabled. Supersedes the hand-rolled .sb-msel--link date chips.
Colored status dropdown — .sb-statusdd (RoundedText-based)
ICON RULING: the DEAL family carries per-status LEADING ICONS (code-canonical via toUiIcon); the CUSTOMER family is label-only. RoundedText trigger — code: deal_status_extensions.dart toUiForegroundColor/toUiBackgroundColor (01 fg / 02 bg) · CustomDropdown matchAngleDownForegroundColor. r5 · pad 4/2 · min-h 16 · max-w 138 ellipsize · regularParagraph label · 1px border + label + 12px caret (24px box) all in the 01 color. TOP = deal statuses w/ glyphs (deals screen); BOTTOM = customer statuses, label-only — dealership-defined on an 8-color enum incl. gray. Open state reuses the standard popover menu.
Avatar — AvatarView · status dot (always) + round-robin ring (only in RR)
JA ML PN DK
JA JA JA
RULE: every avatar shows a status dot (green-01 online / gray-05 offline), sized 5·6·8 for 16·24·32px with a page-bg separation ring. The round-robin RING shows ONLY when the user is in the round robin — green-01 online / gray-05 offline; no ring when out. Combos shown: inRR+online · inRR+offline · out+online · out+offline · DAISI. Bottom row = 16/24/32 sizes.