/*
riltt components — UI pieces shared by the app (translator.html) and documented in
design-system.html. Tokens come from riltt-tokens.css; load this after it.
Contents: Icon button · Segmented control · Menu · Count · Search field · Empty note ·
Deadline row · Group · Status pill · Source quote · Fact row
Everything here is built from riltt-tokens.css (text, space, surface, motion tokens).
── Icon button ────────────────────────────────────────────────────────────────
A ghost control: no border, no fill until hovered. 36px round by default; is-sm is
28px with an 8px corner, for actions inside a row. is-tinted gives it a resting fill
(the primary action in a row); is-primary is ink-filled (Save). [aria-pressed="true"] / [aria-expanded="true"] hold
the hover look while the thing it controls is on or open.
── Segmented control ──────────────────────────────────────────────────────────
…
A pill track with pill segments; the chosen one is ink. Selection can be marked with
aria-pressed, aria-selected or .is-active. [disabled] segments fade.
── Menu ───────────────────────────────────────────────────────────────────────
The one floating surface: white, hairline, --shadow-pop. Position it where it opens.
── Count ──────────────────────────────────────────────────────────────────────
3
A small pill number beside a title.
── Search field ───────────────────────────────────────────────────────────────
search
(optional)
White field, hairline that goes ink on focus. The clear button shows only while the field
is focused and has text (.has-value, set by the page). is-pill is the compact round one.
── Empty note ─────────────────────────────────────────────────────────────────
No history yet. Let riltt listen to your next meeting…
What a list says when it has nothing in it: a dashed hairline box, centered soft text.
── Deadline row ───────────────────────────────────────────────────────────────
One deadline: a date tile (the "when"), the title, a quiet second line (the meeting it
came from, or "needs a date"), and icon actions. Used on Home's Deadlines card, the
Deadlines page and the deadlines inside a meeting's notes — one design everywhere.
Sat3
Submit weekly status report
done
add to Google Calendar
dismiss (shows on hover)
In the app, deadlineRowHtml() in translator.html builds this markup.
── Group ──────────────────────────────────────────────────────────────────────
A titled, collapsible block of rows: the Deadlines page's Today / This week / Later,
the To-dos page's meetings, "Older meetings", "Done". One heading style everywhere:
chevron · title · count, rows indented under the title. Tones: default (ink), is-link
(teal — the title opens something), is-danger (overdue), is-quiet (archive-like folds).
3
…rows…
In the app, groupHtml() builds it and remembers each group's open/closed state.
── Status pill / status dot ───────────────────────────────────────────────────
Waiting on you
A thread's one-word state. Marigold when the next step is YOURS (the colour of "due
today"); ink when someone else has it — moving, not dead, so never grey; a hollow grey
ring when nothing has moved in three weeks; leaf when it's finished. The dot is the same
signal at list size.
── Source quote ───────────────────────────────────────────────────────────────
「では、方向性Bで進めましょう。」
"Then let's go with direction B."
Japanese
The sentence a line came from, in the language it was said in, with the translation
under it. Usually hidden until a format_quote icon button asks for it.
── Fact row ───────────────────────────────────────────────────────────────────