Picky Eaters

What each screen proves

The 7 levels — SeverityBadge

Ordered by family, then by how much attention the level asks for: allergy · intolerance · hate · dislike · ARFID · like · favorite. Weight carries the level — allergy is filled and also carries the hatch, while ARFID sits at the quietest tier because it is neutral information, not a warning.

Does it survive without color?

The right-hand strip is the same markup with `filter: grayscale(1)`. If a reader can still tell the seven levels apart there, color vision is not a requirement for safety. Every level keeps a distinct glyph shape and a distinct English word; allergy keeps its hatch as a third channel.

SeverityIndicator

The compact form for rows with no room for a pill. It is never interactive and never carries a focus ring — it is a label, not a control. The accessible name defaults to the level and can be enriched with the food.

The allergy hatch

45° stripes, 3px on an 8px period. Allergy is the only level that blocks a dish, so it always carries four channels at once: color, the Prohibit glyph, the word “Allergy”, and this pattern. Color alone is never allowed to carry it — and the pattern survives forced-colors mode, where tints do not.

CompatibilityLight

The host's traffic light. It takes a state and a number of DISHES — no name, no person, no guest count. The host sees the aggregate only: what to change about the dish, never whose list caused it. Names reach a host solely through a guest's own consent flow, and never through this component.

Avatar & AvatarStack

Initials are the default, not the fallback of last resort — most people never upload a picture. The initials logic has to cope with one-word names and with names that have no Latin letters at all.

MemberRow

Role is a badge with its own glyph (crown · two people · one person), so “who can edit this event” never depends on color. The actions slot takes a menu button — its own ≥44px target, inside the row but not inside the row's own click target.

GroupCard

One card, one target: the whole card becomes the link, so there is never a nested control fighting it for the tap.

TasteSlider

Four stops over the EXISTING preference levels — I hate it · I don't like it · I like it · I love it → hate/dislike/like/favorite (D-066 §5). It writes nothing but an existing FoodLevel: there is no intensity field, the data contracts stay fixed and the compatibility engine and its 25 tests are untouched. Underneath it is a native <input type="range">, so arrow keys, Home/End, Page Up/Down and touch drag are correct for free; aria-valuetext announces the visible sentence instead of “2 of 3”. The four labels are pointer shortcuts in a sibling row that is aria-hidden and out of the tab order, so the range stays the single announced control.

InviteLinkCard

The link carries the event, never anyone's food list — the card says so out loud. Press Copy to see the confirmed state: it is internal state that flashes for two seconds and announces itself politely, so there is no prop to pin it open for a screenshot.

AppShell

The nav is a flex sibling, not a fixed overlay, so the scroll region is intrinsically clear of it — no magic bottom padding and no layout shift when the nav mounts. Inside this gallery the frame is height-constrained (h-full) so it fits the phone mock; the shipped default is h-dvh.

BottomNav

Four destinations — list · groups · scan · explore — plus a separate circular Add action that is never “active”. The active tab is not color-only: the Phosphor weight switches duotone → fill, so the state survives greyscale and deuteranopia.

ScreenHeader

Back control, title (+ subtitle) and a trailing actions slot in one row, so short screens keep their vertical space. The caller picks h1 or h2 rather than the component guessing the document outline.

PageTitle

The in-body page heading (D-078 / D-079): 32/40/700 in --text-brand-display, with an optional count line underneath. It sits at the top of the SCROLLABLE body, so it announces the screen on arrival and then scrolls away under the chrome veil — the nav's active state keeps the “where am I” answer permanently. The screen owns its gutter: PageTitle renders a bare block and takes whatever inset the caller passes.

SectionHeader

Titles a block inside a screen, with one optional trailing action.

Divider

Decorative by default, so screen readers stay quiet. Inset pulls the rule in by one spacing step at each end — that is the list-row rule used across the product.

HScroll

The one horizontally scrollable row in the system. The edge fades are a mask, not a painted gradient, so they work on any surface and in either theme without knowing what is behind them — and they are stateful: the leading fade only appears once you have scrolled, the trailing one disappears at the end, so a fade always means there is more this way. A row that fits centres itself; a row that overflows left-aligns and slides.

Card

Four variants. `list` is the ONLY yellow surface in the product (D-011): it marks a personal list, and using it anywhere else would make yellow mean nothing.

Card — interactive

`interactive` turns the whole card into one target with hover, pressed and focus-visible affordances. Render it `as="button"` or `as="a"` so it is actually reachable by keyboard — an interactive div is not.

ListRow & ListRowGroup

The group draws the inset divider between rows and never after the last one, so a list never ends on a hanging rule. Leading slot is a fixed 40px icon column; the trailing slot here holds the severity.

FoodCategoryTile

The Uber services-grid unit: neutral tile surface, art on top, label centred below, the whole tile is the target. Selection is not color-only — a check mark appears.

Skeleton & Spinner

Skeleton for a layout we can predict, Spinner for a wait we cannot. The shimmer stops under `prefers-reduced-motion`.

EmptyState & ErrorState

Both take a food glyph or a Phosphor icon, a title, a description and one action. Copy is warm and blames the situation, never the reader.

Button

4 variants × 3 sizes, with/without icons, fullWidth, loading.

IconButton

Chip

All 3 kinds: filter (independent toggle), choice (one-of-many), input (committed token with remove).

IllustrationChip

Despite the name it is NOT a Chip: a 48px illustration with the label underneath — no background, no stroke, no pill (D-066 §1, D-076). Seven coloured pills turned the top of My list into a rainbow, and a coloured pill also implies severity, which a filter does not carry. Selection runs on three channels — brand label + semibold + a 4px indicator bar — never colour alone; the bar's height is reserved when unselected, so toggling a facet can never reflow the row.

Badge

Non-interactive status label — every tone pairs a verified bg/fg pair.

SegmentedControl

Radix ToggleGroup — arrow-key nav, roving tabindex, deselection swallowed (never empty).

Tabs

Real tabs with role=tabpanel content — use SegmentedControl instead when there are no panels.

Input

Textarea

SearchField

Always-visible search — never the icon-triggered overlay pattern. Pass-3 anatomy (D-070): a decorative magnifying glass INSIDE the pill at the leading edge, then the query text, and NO trailing search button — a search button next to an always-live filter was a second, redundant affordance that on device read as the field's primary action. The onSearch and searchLabel props went with it. The only trailing element is the clear (×), and only while there is text. Sort/filter is now one icon button inline to the right of the field, owned by the screen (D-071).

Select

Switch

Checkbox

RadioGroup

Complete mini-form — add a food item

Validation runs on submit; the button stays enabled the whole time. The first invalid field receives focus so a screen-reader or keyboard user lands exactly where the error is announced.

Sheet

Bottom sheet with grab handle, side is always bottom.

Dialog

Centred modal, reserved for irreversible or blocking decisions — reversible actions use Toast + Undo instead.

ConfirmDialog

The one confirm shape the product uses — destructive confirms default focus to Cancel, never Confirm.

Tooltip

Hover/keyboard-focus affordance only — content must be supplementary, never essential, since touch has no equivalent trigger.

Toast

Every reversible action resolves through toast() + Undo — never a ConfirmDialog for these.

Phosphor UI icons

Weight defaults to duotone (D-012) — every other weight is an explicit override.

Food glyph kit — all 30 P0 ids

Driven by foodIconManifest; nothing here is a hardcoded list.

Food icon notes

Color reference

The primitive ramps and every semantic token, collapsed so the reference stays a reference. Open any row to read its authored value, its resolved value on the theme you are looking at, and its measured contrast ratio.

Spacing

Eight Uber steps, shown at true size. Larger gaps compose (32 + 16) rather than adding a ninth step.

Radius

Corner radii, from square through the card family to the pill.

Elevation

Shown at true shadow on the current theme's card surface. Dark deepens the shadow and lightens the surface — it never stacks black on black.

Contextual control surface

Not a flat token pair: --control-bg and --surface-self resolve against the nearest [data-surface] ancestor, so a chip, a field or a tonal button is the right tone on the white app ground AND on a surface without ever taking a prop. Surface containers (Card, Sheet, Dialog, field wrappers, the nav pill, tiles, GroupCard, InviteLinkCard) set the attribute; controls only read the token. The ladder alternates and caps at level 2, so two equal tones can never touch at any depth.

Chrome veil

The bottom nav and the sticky tab header are the same recipe, mirrored: a veil of --surface-app at --chrome-veil-opacity over a --chrome-backdrop-blur backdrop, ramping over --chrome-veil-fade at the edge that meets the content. Tokens are shared so the two edges of the screen can never drift.

Motion

Durations and easings, replayable. Press the button to move the dots; press again to send them back.