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)
JAMLPNDK
JAJAJA
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. The ring stands off the avatar (CPO ruling 2026-09-25): a transparent gap, then the ring, so the photo never touches it — 2px gap + 2px ring at 24px and 32px, 1px + 1px at 16px, whole pixels so every screen draws them exactly — and the dot sits on the ring, top-right (production AvatarView box32 = 24px photo · 2px gap · 2px ring). It is one atom rule, so every ringed avatar gets the gap; avatar groups show no ring. The signed-in user (desktop rail user row, open and collapsed; mobile More card) is the 24px avatar in its ring — 32px overall, like production's box32 — with a gray disc where the photo goes, never initials (.sb-avatar--ph). The gray disc stands in for the user's photo; the app shows the photo, and initials when there is none. Row 1: in RR + online · in RR + offline · out + online · out + offline · DAISI. Row 2: 16 / 24 / 32px. Row 3: the signed-in user — in RR + online · in RR + offline · out + online.
