Separate ListRow trailing control and fail fast on out-of-range Slider

ListRow with onClick now renders a container whose leading slot, title
and meta form one button, with the trailing slot as a sibling outside
it, so a trailing toggle or action is never nested in the row button
and never triggers the row's action.

Slider throws when value is outside [min, max] (including NaN) instead
of rendering a fill that disagrees with the clamped native input.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/package.json

@@ -5,10 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc --noEmit && vite build",
+    "build": "tsc --noEmit && vite build && npm run check:dist-fonts",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "npm run lint:colors && vitest run",
+    "lint:colors": "node scripts/lint-colors.mjs",
+    "check:dist-fonts": "node scripts/check-dist-fonts.mjs"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.104.1",

web/scripts/check-dist-fonts.mjs

@@ -0,0 +1,32 @@
+// Fails when the production build references Google Fonts: fonts are
+// self-hosted, so dist must never point at fonts.googleapis.com or
+// fonts.gstatic.com.
+import { readFileSync, readdirSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const distDir = fileURLToPath(new URL('../dist', import.meta.url))
+const hosts = ['fonts.googleapis.com', 'fonts.gstatic.com']
+
+function* files(dir) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) yield* files(path)
+    else yield path
+  }
+}
+
+const violations = []
+for (const path of files(distDir)) {
+  const content = readFileSync(path, 'latin1')
+  for (const host of hosts) {
+    if (content.includes(host)) violations.push(`${relative(distDir, path)}: ${host}`)
+  }
+}
+
+if (violations.length > 0) {
+  console.error('Production build references Google Fonts; fonts must be self-hosted:')
+  for (const v of violations) console.error(`  ${v}`)
+  process.exit(1)
+}
+console.log('check:dist-fonts: dist makes no Google Fonts requests')

web/scripts/lint-colors.mjs

@@ -0,0 +1,42 @@
+// Fails when a hex colour literal appears in any CSS or TypeScript file under
+// web/ outside the design tokens: every colour must come from a custom
+// property in tokens.css. Dependencies, build output and hidden directories
+// (tool caches) are not source and are skipped.
+import { readFileSync, readdirSync } from 'node:fs'
+import { extname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const webRoot = fileURLToPath(new URL('..', import.meta.url))
+const allowed = new Set(['src/styles/tokens.css'])
+const skippedDirs = new Set([join(webRoot, 'node_modules'), join(webRoot, 'dist')])
+const extensions = new Set(['.css', '.ts', '.tsx'])
+const hexColour = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g
+
+function* sourceFiles(dir) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (!skippedDirs.has(path) && !entry.name.startsWith('.')) yield* sourceFiles(path)
+    } else if (extensions.has(extname(entry.name))) yield path
+  }
+}
+
+const violations = []
+for (const path of sourceFiles(webRoot)) {
+  const name = relative(webRoot, path).split('\\').join('/')
+  if (allowed.has(name)) continue
+  readFileSync(path, 'utf8')
+    .split('\n')
+    .forEach((line, i) => {
+      for (const match of line.matchAll(hexColour)) {
+        violations.push(`${name}:${i + 1}: ${match[0]}`)
+      }
+    })
+}
+
+if (violations.length > 0) {
+  console.error('Hex colour literals found; use a token from src/styles/tokens.css:')
+  for (const v of violations) console.error(`  ${v}`)
+  process.exit(1)
+}
+console.log('lint:colors: no hex colour literals outside src/styles/tokens.css')

web/src/assets/fonts/BagelFatOne-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Bagel Fat Project Authors (https://github.com/JAMO-TYPEFACE/BagelFat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/src/assets/fonts/Figtree-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/src/main.tsx

@@ -1,6 +1,8 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router'
+import './styles/tokens.css'
+import './styles/base.css'
 import App from './App.tsx'
 
 const root = document.getElementById('root')

web/src/styles/base.css

@@ -0,0 +1,11 @@
+/* App-wide base styles. Values come only from tokens.css. */
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-body);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}

web/src/styles/tokens.css

@@ -0,0 +1,116 @@
+/* MealQuest design tokens — final palette "B4: Grape + teal blue on off-white".
+   Built on the Organic design system (styles.css in this bundle); these values OVERRIDE its defaults. */
+/* Fonts are self-hosted from web/src/assets/fonts (OFL; licence texts alongside)
+   in place of the handoff's Google Fonts @import, so the app never calls Google.
+   Bagel Fat One: Google Fonts latin and latin-ext woff2 subsets.
+   Figtree: upstream static woff2 (github.com/erikdkennedy/figtree). */
+@font-face {
+  font-family: "Bagel Fat One";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/BagelFatOne-LatinExt.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Bagel Fat One";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/BagelFatOne-Latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/Figtree-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../assets/fonts/Figtree-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/Figtree-Bold.woff2") format("woff2");
+}
+
+:root {
+  /* Ground + ink */
+  --color-bg: #f9f6f1;          /* oklch(0.975 0.008 85) — page / phone background */
+  --color-surface: #eee9de;     /* oklch(0.935 0.016 85) — cards, rows, inputs */
+  --color-text: #201e1d;
+  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
+  --on-accent: #f9f6f1;         /* text/icons on --color-accent fills (never dark text on grape) */
+
+  /* Primary accent — Grape (hue 300) */
+  --color-accent: #5a358c;      /* oklch(0.42 0.14 300) */
+  --color-accent-100: #f8f1ff;
+  --color-accent-200: #eedfff;
+  --color-accent-300: #dac3ff;
+  --color-accent-400: #c1a1f9;
+  --color-accent-500: #a47ee1;
+  --color-accent-600: #865fc0;
+  --color-accent-700: #68449b;  /* accent-colored small text on light grounds */
+  --color-accent-800: #4a2d73;
+  --color-accent-900: #2d1a49;
+
+  /* Second accent — Teal blue (hue 215) */
+  --color-accent-2: #29889c;    /* oklch(0.58 0.09 215) */
+  --color-accent-2-100: #e0fbff;
+  --color-accent-2-200: #bbf3ff;
+  --color-accent-2-300: #88e0f6;
+  --color-accent-2-400: #3fc7e4;
+  --color-accent-2-500: #00a9ca;
+  --color-accent-2-600: #008aaa; /* toggles ON, "Try it" button, + buttons */
+  --color-accent-2-700: #006b88;
+  --color-accent-2-800: #004c63; /* teal text on teal-100/200 fills */
+  --color-accent-2-900: #002f3e;
+
+  /* Neutrals (unchanged from Organic) */
+  --color-neutral-100: #f9f4ed;
+  --color-neutral-200: #eee7db;
+  --color-neutral-300: #dcd3c4;
+  --color-neutral-400: #c0b6a5;
+  --color-neutral-500: #a19786;
+  --color-neutral-600: #82796a;
+  --color-neutral-700: #645c50;
+  --color-neutral-800: #474238;
+  --color-neutral-900: #2e2b25;
+
+  /* Type */
+  --font-heading: "Bagel Fat One", system-ui, sans-serif; /* weight 400 only */
+  --font-body: "Figtree", system-ui, sans-serif;          /* 400 / 600 / 700 */
+  --font-mono: ui-monospace, Menlo, monospace;
+
+  /* Radii */
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 28px;
+  --radius-card: 32px;   /* mobile hero cards */
+  --radius-pill: 999px;  /* buttons, inputs, tags, nav */
+
+  /* Spacing (Organic, density 1.1) */
+  --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px;
+
+  /* Elevation */
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
+  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
+  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
+
+  /* Motion */
+  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);   /* nav pill, snap-back, bumps */
+  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);    /* card promotion */
+  --ease-throw: cubic-bezier(.55, 0, .8, .4);      /* fly-off right */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --motion-scale: 0; }
+}

web/src/test/hitArea.ts

@@ -0,0 +1,26 @@
+import { expect } from 'vitest'
+
+// Minimum tap target from the handoff's accessibility rules.
+export const MIN_HIT_AREA = 44
+
+function px(value: string): number {
+  return value.endsWith('px') ? Number.parseFloat(value) : 0
+}
+
+// The tap target an element's stylesheet guarantees: the larger of its
+// declared size and declared minimum size, per axis. jsdom does no layout, so
+// this reads the CSS Modules' computed values (Vitest runs with css: true).
+// A dimension the CSS leaves unsized counts as 0 and fails the check.
+export function hitArea(element: Element): { width: number; height: number } {
+  const style = getComputedStyle(element)
+  return {
+    width: Math.max(px(style.width), px(style.minWidth)),
+    height: Math.max(px(style.height), px(style.minHeight)),
+  }
+}
+
+export function expectMinHitArea(element: Element) {
+  const { width, height } = hitArea(element)
+  expect(width, 'hit area width').toBeGreaterThanOrEqual(MIN_HIT_AREA)
+  expect(height, 'hit area height').toBeGreaterThanOrEqual(MIN_HIT_AREA)
+}

web/src/ui/Button.module.css

@@ -0,0 +1,63 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-width: 44px;
+  min-height: 48px;
+  padding: 0 22px;
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-heading);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+  transition: transform 100ms var(--ease-out-soft), background-color 100ms var(--ease-out-soft);
+}
+
+.button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.primary {
+  background: var(--color-accent);
+  color: var(--on-accent);
+}
+
+.primary:hover:not(:disabled),
+.primary:active:not(:disabled) {
+  background: var(--color-accent-800);
+}
+
+.outline {
+  background: transparent;
+  border-color: var(--color-neutral-300);
+  color: var(--color-text);
+}
+
+.outline:hover:not(:disabled),
+.outline:active:not(:disabled) {
+  background: var(--color-neutral-200);
+}
+
+.dark {
+  background: var(--color-text);
+  color: var(--color-bg);
+}
+
+.dark:hover:not(:disabled),
+.dark:active:not(:disabled) {
+  background: var(--color-neutral-800);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+}

web/src/ui/Button.test.tsx

@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Button } from './Button.tsx'
+import styles from './Button.module.css'
+
+describe('Button', () => {
+  it('is a button that defaults to type="button" and the primary variant', () => {
+    render(<Button>Save changes</Button>)
+    const button = screen.getByRole('button', { name: 'Save changes' })
+    expect(button).toHaveAttribute('type', 'button')
+    expect(button).toHaveClass(styles.button!, styles.primary!)
+  })
+
+  it.each(['primary', 'outline', 'dark'] as const)('renders the %s variant with a ≥ 44 px hit area', (variant) => {
+    render(<Button variant={variant}>Go</Button>)
+    const button = screen.getByRole('button', { name: 'Go' })
+    expect(button).toHaveClass(styles[variant]!)
+    expectMinHitArea(button)
+  })
+
+  it('declares the 100 ms pressed scale transition', () => {
+    render(<Button>Go</Button>)
+    expect(getComputedStyle(screen.getByRole('button')).transition).toContain('transform 100ms')
+  })
+
+  it('does not fire onClick when disabled', () => {
+    const onClick = vi.fn()
+    render(
+      <Button disabled onClick={onClick}>
+        Go
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Go' })
+    expect(button).toBeDisabled()
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('forwards the ref, rest props and an explicit type', () => {
+    const ref = createRef<HTMLButtonElement>()
+    render(
+      <Button ref={ref} type="submit" aria-describedby="hint">
+        Send
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Send' })
+    expect(ref.current).toBe(button)
+    expect(button).toHaveAttribute('type', 'submit')
+    expect(button).toHaveAttribute('aria-describedby', 'hint')
+  })
+})

web/src/ui/Button.tsx

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './Button.module.css'
+
+export type ButtonVariant = 'primary' | 'outline' | 'dark'
+
+export type ButtonProps = ComponentPropsWithRef<'button'> & {
+  variant?: ButtonVariant
+}
+
+// Pill button. Primary is grape with --on-accent text; outline and dark are the
+// secondary treatments from the handoff. `type` defaults to "button" so a
+// Button inside a form never submits by accident.
+export function Button({ variant = 'primary', type = 'button', className, ...rest }: ButtonProps) {
+  const classes = [styles.button, styles[variant], className].filter(Boolean).join(' ')
+  return <button type={type} className={classes} {...rest} />
+}

web/src/ui/Card.module.css

@@ -0,0 +1,13 @@
+.card {
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  color: var(--color-text);
+}
+
+.surface {
+  background: var(--color-surface);
+}
+
+.muted {
+  background: var(--color-neutral-100);
+}

web/src/ui/Card.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { Card } from './Card.tsx'
+import styles from './Card.module.css'
+
+describe('Card', () => {
+  it('renders its children on the surface fill by default', () => {
+    render(<Card aria-label="Tonight">Tacos</Card>)
+    const card = screen.getByLabelText('Tonight')
+    expect(card).toHaveTextContent('Tacos')
+    expect(card).toHaveClass(styles.card!, styles.surface!)
+  })
+
+  it('supports the muted tone', () => {
+    render(<Card data-testid="card" tone="muted" />)
+    expect(screen.getByTestId('card')).toHaveClass(styles.muted!)
+  })
+})

web/src/ui/Card.tsx

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './Card.module.css'
+
+export type CardTone = 'surface' | 'muted'
+
+export type CardProps = ComponentPropsWithRef<'div'> & {
+  // surface = --color-surface; muted = the secondary neutral-100 fill.
+  tone?: CardTone
+}
+
+export function Card({ tone = 'surface', className, ...rest }: CardProps) {
+  const classes = [styles.card, styles[tone], className].filter(Boolean).join(' ')
+  return <div className={classes} {...rest} />
+}

web/src/ui/Checkbox.module.css

@@ -0,0 +1,63 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 44px;
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.input {
+  appearance: none;
+  display: grid;
+  place-content: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  border: 2px solid var(--color-neutral-400);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+}
+
+/* The check mark. */
+.input::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: var(--on-accent);
+  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 21%, 85% 7%, 39% 69%);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: transform 160ms var(--ease-spring), opacity 160ms var(--ease-out-soft);
+}
+
+.input:checked {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+}
+
+.input:checked::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.input:disabled,
+.input:disabled + .label {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.label {
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .input::before {
+    transition: none;
+  }
+}

web/src/ui/Checkbox.test.tsx

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Checkbox } from './Checkbox.tsx'
+
+describe('Checkbox', () => {
+  it('is a native checkbox named by its label', () => {
+    render(<Checkbox label="Chicken thighs" />)
+    const box = screen.getByRole('checkbox', { name: 'Chicken thighs' })
+    expect(box.tagName).toBe('INPUT')
+    expect(box).toHaveAttribute('type', 'checkbox')
+    expect(box).not.toBeChecked()
+  })
+
+  it('toggles when the input or its label text is clicked', () => {
+    render(<Checkbox label="Limes" />)
+    const box = screen.getByRole('checkbox', { name: 'Limes' })
+    fireEvent.click(box)
+    expect(box).toBeChecked()
+    fireEvent.click(screen.getByText('Limes'))
+    expect(box).not.toBeChecked()
+  })
+
+  it('reflects a controlled checked state and disabled', () => {
+    render(<Checkbox label="Rice" checked disabled readOnly />)
+    const box = screen.getByRole('checkbox', { name: 'Rice' })
+    expect(box).toBeChecked()
+    expect(box).toBeDisabled()
+  })
+
+  it('has a ≥ 44 px hit area (the wrapping label)', () => {
+    render(<Checkbox label="Rice" />)
+    const hit = screen.getByRole('checkbox', { name: 'Rice' }).closest('label')!
+    expectMinHitArea(hit)
+  })
+})

web/src/ui/Checkbox.tsx

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import styles from './Checkbox.module.css'
+
+export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type'> & {
+  label: ReactNode
+}
+
+// Native checkbox, styled. The wrapping label is the hit area (at least
+// 44×44), so tapping the text toggles it too.
+export function Checkbox({ label, className, ...rest }: CheckboxProps) {
+  return (
+    <label className={[styles.root, className].filter(Boolean).join(' ')}>
+      <input type="checkbox" className={styles.input} {...rest} />
+      <span className={styles.label}>{label}</span>
+    </label>
+  )
+}

web/src/ui/Chip.module.css

@@ -0,0 +1,35 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent-2-200);
+  color: var(--color-accent-2-900);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.removable {
+  padding-right: 0;
+}
+
+/* 44 px hit box around a small cross; negative margins keep the chip 36 px
+   tall and the cross close to the label. */
+.remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 44px;
+  height: 44px;
+  margin: -4px 0 -4px -14px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}

web/src/ui/Chip.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Chip } from './Chip.tsx'
+
+describe('Chip', () => {
+  it('has no remove button unless onRemove is given', () => {
+    render(<Chip label="Beef tacos" />)
+    expect(screen.getByText('Beef tacos')).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('exposes an accessible "Remove {label}" button that calls onRemove', () => {
+    const onRemove = vi.fn()
+    render(<Chip label="Beef tacos" onRemove={onRemove} />)
+    const remove = screen.getByRole('button', { name: 'Remove Beef tacos' })
+    expect(remove).toHaveAttribute('type', 'button')
+    fireEvent.click(remove)
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('gives the remove button a ≥ 44 px hit area', () => {
+    render(<Chip label="Pizza night" onRemove={() => {}} />)
+    expectMinHitArea(screen.getByRole('button', { name: 'Remove Pizza night' }))
+  })
+})

web/src/ui/Chip.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './Chip.module.css'
+
+export type ChipProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  label: string
+  // When set, the chip shows a "Remove {label}" button that calls it.
+  onRemove?: () => void
+}
+
+export function Chip({ label, onRemove, className, ...rest }: ChipProps) {
+  const classes = [styles.chip, onRemove && styles.removable, className].filter(Boolean).join(' ')
+  return (
+    <span className={classes} {...rest}>
+      {label}
+      {onRemove && (
+        <button type="button" className={styles.remove} aria-label={`Remove ${label}`} onClick={onRemove}>
+          <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
+            <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="2.75" strokeLinecap="round" />
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}

web/src/ui/IconButton.module.css

@@ -0,0 +1,74 @@
+/* The button is the hit box; .face is the visible circle. A 40 px face sits in
+   a 44 px hit box whose negative margin keeps the 40 px layout footprint. */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.size40 {
+  width: 44px;
+  height: 44px;
+  margin: -2px;
+}
+
+.size62 {
+  width: 62px;
+  height: 62px;
+}
+
+.face {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-pill);
+  transition: transform 100ms var(--ease-out-soft);
+}
+
+.size40 .face {
+  width: 40px;
+  height: 40px;
+}
+
+.size62 .face {
+  width: 62px;
+  height: 62px;
+  box-shadow: var(--shadow-md);
+}
+
+.button:active:not(:disabled) .face {
+  transform: scale(0.97);
+}
+
+.surface {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.accent {
+  background: var(--color-accent);
+  color: var(--on-accent);
+}
+
+.teal {
+  background: var(--color-accent-2-600);
+  color: var(--on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .face {
+    transition: none;
+  }
+}

web/src/ui/IconButton.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { hitArea, expectMinHitArea } from '../test/hitArea.ts'
+import { IconButton } from './IconButton.tsx'
+
+describe('IconButton', () => {
+  it('is named by its label, not its icon', () => {
+    const onClick = vi.fn()
+    render(
+      <IconButton label="Notifications" onClick={onClick}>
+        <svg />
+      </IconButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Notifications' })
+    expect(button).toHaveAttribute('type', 'button')
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+
+  it('keeps a 44 px hit area around the 40 px circle', () => {
+    render(<IconButton label="Back" size={40} />)
+    const button = screen.getByRole('button', { name: 'Back' })
+    expectMinHitArea(button)
+    const face = button.firstElementChild!
+    expect(hitArea(face)).toEqual({ width: 40, height: 40 })
+  })
+
+  it('is 62 px at the large size', () => {
+    render(<IconButton label="Try it" size={62} tone="teal" />)
+    const button = screen.getByRole('button', { name: 'Try it' })
+    expectMinHitArea(button)
+    expect(hitArea(button)).toEqual({ width: 62, height: 62 })
+  })
+})

web/src/ui/IconButton.tsx

@@ -0,0 +1,33 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './IconButton.module.css'
+
+export type IconButtonSize = 40 | 62
+export type IconButtonTone = 'surface' | 'accent' | 'teal'
+
+export type IconButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label'> & {
+  // Accessible name; an icon alone never names a button.
+  label: string
+  size?: IconButtonSize
+  tone?: IconButtonTone
+}
+
+// Round icon-only button. The 40 px size keeps a 44 px hit box (see the CSS);
+// the 62 px size is the round action button with --shadow-md.
+export function IconButton({
+  label,
+  size = 40,
+  tone = 'surface',
+  type = 'button',
+  className,
+  children,
+  ...rest
+}: IconButtonProps) {
+  const classes = [styles.button, styles[`size${size}`], className].filter(Boolean).join(' ')
+  return (
+    <button type={type} aria-label={label} className={classes} {...rest}>
+      <span className={[styles.face, styles[tone]].join(' ')} aria-hidden="true">
+        {children}
+      </span>
+    </button>
+  )
+}

web/src/ui/ListRow.module.css

@@ -0,0 +1,69 @@
+.row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  min-height: 44px;
+  padding: 14px 16px;
+  color: var(--color-text);
+  text-align: left;
+}
+
+.interactive {
+  padding: 0;
+  border-radius: var(--radius-md);
+}
+
+.interactive:hover {
+  background: var(--color-neutral-200);
+}
+
+.main {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex: 1 1 auto;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 14px 16px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.interactive > .trailing {
+  padding-right: 16px;
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.title {
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.meta {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}

web/src/ui/ListRow.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { ListRow } from './ListRow.tsx'
+import { Toggle } from './Toggle.tsx'
+
+describe('ListRow', () => {
+  it('renders leading, title, meta and trailing slots without being interactive', () => {
+    render(
+      <ListRow
+        leading={<span>icon</span>}
+        title="Notifications"
+        meta="Push and Google Chat"
+        trailing={<span>chevron</span>}
+      />,
+    )
+    for (const text of ['icon', 'Notifications', 'Push and Google Chat', 'chevron']) {
+      expect(screen.getByText(text)).toBeInTheDocument()
+    }
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('is a single button with a ≥ 44 px hit area when it has onClick', () => {
+    const onClick = vi.fn()
+    render(<ListRow title="10 new side quests to swipe" onClick={onClick} />)
+    const row = screen.getByRole('button', { name: '10 new side quests to swipe' })
+    expect(row).toHaveAttribute('type', 'button')
+    expectMinHitArea(row)
+    fireEvent.click(row)
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+
+  it('keeps a trailing toggle outside the row button so each control fires only its own action', () => {
+    const onClick = vi.fn()
+    const onCheckedChange = vi.fn()
+    render(
+      <ListRow
+        title="Dinner reminders"
+        meta="Push at 4 pm"
+        trailing={<Toggle aria-label="Dinner reminders" checked={false} onCheckedChange={onCheckedChange} />}
+        onClick={onClick}
+      />,
+    )
+    const row = screen.getByRole('button', { name: /^Dinner reminders/ })
+    const toggle = screen.getByRole('switch', { name: 'Dinner reminders' })
+    expect(row).not.toContainElement(toggle)
+    expect(row.querySelector('button')).toBeNull()
+
+    fireEvent.click(toggle)
+    expect(onCheckedChange).toHaveBeenCalledExactlyOnceWith(true)
+    expect(onClick).not.toHaveBeenCalled()
+
+    fireEvent.click(row)
+    expect(onClick).toHaveBeenCalledOnce()
+    expect(onCheckedChange).toHaveBeenCalledOnce()
+  })
+})

web/src/ui/ListRow.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import styles from './ListRow.module.css'
+
+export type ListRowProps = {
+  title: ReactNode
+  meta?: ReactNode
+  // Leading slot: icon, photo or avatar.
+  leading?: ReactNode
+  // Trailing slot: chevron, toggle, count or action.
+  trailing?: ReactNode
+  // When set, the leading slot, title and meta form one button. The trailing
+  // slot stays a sibling outside it, so a trailing toggle or action is never
+  // nested in the row's button and never triggers the row's action.
+  onClick?: () => void
+  className?: string
+}
+
+export function ListRow({ title, meta, leading, trailing, onClick, className }: ListRowProps) {
+  const main = (
+    <>
+      {leading && <span className={styles.leading}>{leading}</span>}
+      <span className={styles.body}>
+        <span className={styles.title}>{title}</span>
+        {meta && <span className={styles.meta}>{meta}</span>}
+      </span>
+    </>
+  )
+  const trailingSlot = trailing && <span className={styles.trailing}>{trailing}</span>
+  if (onClick) {
+    return (
+      <div className={[styles.row, styles.interactive, className].filter(Boolean).join(' ')}>
+        <button type="button" className={styles.main} onClick={onClick}>
+          {main}
+        </button>
+        {trailingSlot}
+      </div>
+    )
+  }
+  return (
+    <div className={[styles.row, className].filter(Boolean).join(' ')}>
+      {main}
+      {trailingSlot}
+    </div>
+  )
+}

web/src/ui/Segmented.module.css

@@ -0,0 +1,35 @@
+.track {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface);
+}
+
+.option {
+  flex: 1 1 0;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 var(--space-4);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-neutral-700);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 150ms var(--ease-out-soft), box-shadow 150ms var(--ease-out-soft);
+}
+
+.selected {
+  background: var(--color-bg);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .option {
+    transition: none;
+  }
+}

web/src/ui/Segmented.test.tsx

@@ -0,0 +1,91 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Segmented } from './Segmented.tsx'
+import styles from './Segmented.module.css'
+
+const options = [
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+  { value: 'year', label: 'Year' },
+] as const
+
+type Period = (typeof options)[number]['value']
+
+function Harness({ initial = 'week' }: { initial?: Period }) {
+  const [value, setValue] = useState<Period>(initial)
+  return <Segmented label="Archive period" options={options} value={value} onValueChange={setValue} />
+}
+
+function radio(name: string) {
+  return screen.getByRole('radio', { name })
+}
+
+describe('Segmented', () => {
+  it('is a named radiogroup of radios with one checked', () => {
+    render(<Harness />)
+    expect(screen.getByRole('radiogroup', { name: 'Archive period' })).toBeInTheDocument()
+    expect(screen.getAllByRole('radio')).toHaveLength(3)
+    expect(radio('Week')).toHaveAttribute('aria-checked', 'true')
+    expect(radio('Month')).toHaveAttribute('aria-checked', 'false')
+    expect(radio('Week')).toHaveClass(styles.selected!)
+  })
+
+  it('has a single tab stop on the selected option', () => {
+    render(<Harness initial="month" />)
+    expect(radio('Month')).toHaveAttribute('tabindex', '0')
+    expect(radio('Week')).toHaveAttribute('tabindex', '-1')
+    expect(radio('Year')).toHaveAttribute('tabindex', '-1')
+  })
+
+  it('moves selection and focus with the arrow keys, wrapping at the ends', () => {
+    render(<Harness />)
+    radio('Week').focus()
+
+    fireEvent.keyDown(radio('Week'), { key: 'ArrowRight' })
+    expect(radio('Month')).toHaveAttribute('aria-checked', 'true')
+    expect(radio('Month')).toHaveFocus()
+
+    fireEvent.keyDown(radio('Month'), { key: 'ArrowDown' })
+    expect(radio('Year')).toHaveAttribute('aria-checked', 'true')
+
+    fireEvent.keyDown(radio('Year'), { key: 'ArrowRight' })
+    expect(radio('Week')).toHaveAttribute('aria-checked', 'true')
+    expect(radio('Week')).toHaveFocus()
+
+    fireEvent.keyDown(radio('Week'), { key: 'ArrowLeft' })
+    expect(radio('Year')).toHaveAttribute('aria-checked', 'true')
+
+    fireEvent.keyDown(radio('Year'), { key: 'ArrowUp' })
+    expect(radio('Month')).toHaveAttribute('aria-checked', 'true')
+    expect(radio('Month')).toHaveFocus()
+    expect(radio('Year')).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('jumps to the first and last option with Home and End', () => {
+    render(<Harness initial="month" />)
+    fireEvent.keyDown(radio('Month'), { key: 'End' })
+    expect(radio('Year')).toHaveAttribute('aria-checked', 'true')
+    fireEvent.keyDown(radio('Year'), { key: 'Home' })
+    expect(radio('Week')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('selects an option on click', () => {
+    render(<Harness />)
+    fireEvent.click(radio('Year'))
+    expect(radio('Year')).toHaveAttribute('aria-checked', 'true')
+    expect(radio('Week')).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('gives every option a ≥ 44 px hit area', () => {
+    render(<Harness />)
+    for (const option of screen.getAllByRole('radio')) expectMinHitArea(option)
+  })
+
+  it('fails fast when the value is not one of the options', () => {
+    expect(() =>
+      render(<Segmented label="Archive period" options={options} value={'decade' as Period} onValueChange={() => {}} />),
+    ).toThrow('value "decade" is not one of its options')
+  })
+})

web/src/ui/Segmented.tsx

@@ -0,0 +1,76 @@
+import { useRef, type KeyboardEvent } from 'react'
+import styles from './Segmented.module.css'
+
+export type SegmentedOption<T extends string> = {
+  value: T
+  label: string
+}
+
+export type SegmentedProps<T extends string> = {
+  // Accessible name of the radiogroup.
+  label: string
+  options: readonly SegmentedOption<T>[]
+  value: T
+  onValueChange: (value: T) => void
+  className?: string
+}
+
+const step: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }
+
+// Segmented control with radiogroup semantics: one tab stop (the selected
+// option); arrow keys move the selection and focus, wrapping at the ends;
+// Home and End jump to the first and last option.
+export function Segmented<T extends string>({ label, options, value, onValueChange, className }: SegmentedProps<T>) {
+  const refs = useRef<(HTMLButtonElement | null)[]>([])
+  const selected = options.findIndex((option) => option.value === value)
+  if (selected === -1) {
+    throw new Error(`Segmented "${label}": value "${value}" is not one of its options`)
+  }
+
+  function select(index: number) {
+    const option = options[index]
+    if (!option) throw new Error(`Segmented "${label}": no option at index ${index}`)
+    onValueChange(option.value)
+    refs.current[index]?.focus()
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const delta = step[event.key]
+    let next: number
+    if (delta !== undefined) next = (selected + delta + options.length) % options.length
+    else if (event.key === 'Home') next = 0
+    else if (event.key === 'End') next = options.length - 1
+    else return
+    event.preventDefault()
+    select(next)
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      className={[styles.track, className].filter(Boolean).join(' ')}
+      onKeyDown={onKeyDown}
+    >
+      {options.map((option, index) => {
+        const checked = index === selected
+        return (
+          <button
+            key={option.value}
+            ref={(el) => {
+              refs.current[index] = el
+            }}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            tabIndex={checked ? 0 : -1}
+            className={checked ? `${styles.option} ${styles.selected}` : styles.option}
+            onClick={() => select(index)}
+          >
+            {option.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

web/src/ui/Slider.module.css

@@ -0,0 +1,61 @@
+/* The input is the 44 px tall hit area; the track and knob are drawn by the
+   vendor pseudo-elements. --slider-fill is set inline from the value. */
+.slider {
+  appearance: none;
+  display: block;
+  width: 100%;
+  min-width: 44px;
+  height: 44px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.slider:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.slider::-webkit-slider-runnable-track {
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    to right,
+    var(--color-accent) var(--slider-fill),
+    var(--color-neutral-300) var(--slider-fill)
+  );
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  margin-top: -8px;
+  border: 3px solid var(--color-accent);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+}
+
+.slider::-moz-range-track {
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-300);
+}
+
+.slider::-moz-range-progress {
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+}
+
+.slider::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--color-accent);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+}

web/src/ui/Slider.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it } from 'vitest'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { Slider } from './Slider.tsx'
+
+function Harness() {
+  const [value, setValue] = useState(0.7)
+  return (
+    <Slider
+      aria-label="Creativity (temperature)"
+      min={0}
+      max={1}
+      step={0.1}
+      value={value}
+      onChange={(event) => setValue(Number(event.target.value))}
+    />
+  )
+}
+
+describe('Slider', () => {
+  it('is a native slider exposing its range and value', () => {
+    render(<Harness />)
+    const slider = screen.getByRole('slider', { name: 'Creativity (temperature)' })
+    expect(slider).toHaveAttribute('type', 'range')
+    expect(slider).toHaveAttribute('min', '0')
+    expect(slider).toHaveAttribute('max', '1')
+    expect(slider).toHaveValue('0.7')
+  })
+
+  it('updates the grape fill with the value', () => {
+    render(<Harness />)
+    const slider = screen.getByRole('slider')
+    expect(slider.style.getPropertyValue('--slider-fill')).toBe('70%')
+    fireEvent.change(slider, { target: { value: '0.2' } })
+    expect(slider).toHaveValue('0.2')
+    expect(slider.style.getPropertyValue('--slider-fill')).toBe('20%')
+  })
+
+  it('has a ≥ 44 px hit area', () => {
+    render(<Harness />)
+    expectMinHitArea(screen.getByRole('slider'))
+  })
+
+  it('fails fast on an empty range', () => {
+    expect(() => render(<Slider aria-label="Bad" min={1} max={1} value={1} readOnly />)).toThrow(
+      'max (1) must be greater than min (1)',
+    )
+  })
+
+  it('accepts values at both ends of the range', () => {
+    render(
+      <>
+        <Slider aria-label="At min" min={0} max={1} value={0} readOnly />
+        <Slider aria-label="At max" min={0} max={1} value={1} readOnly />
+      </>,
+    )
+    expect(screen.getByRole('slider', { name: 'At min' }).style.getPropertyValue('--slider-fill')).toBe('0%')
+    expect(screen.getByRole('slider', { name: 'At max' }).style.getPropertyValue('--slider-fill')).toBe('100%')
+  })
+
+  it.each([
+    [2, 'value (2) must be within [0, 1]'],
+    [-0.1, 'value (-0.1) must be within [0, 1]'],
+    [Number.NaN, 'value (NaN) must be within [0, 1]'],
+  ])('fails fast when the value %s is outside the range', (value, message) => {
+    expect(() => render(<Slider aria-label="Bad" min={0} max={1} value={value} readOnly />)).toThrow(message)
+  })
+})

web/src/ui/Slider.tsx

@@ -0,0 +1,30 @@
+import type { CSSProperties, ComponentPropsWithRef } from 'react'
+import styles from './Slider.module.css'
+
+export type SliderProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'value' | 'min' | 'max'> & {
+  value: number
+  min: number
+  max: number
+}
+
+// Native range input, styled: 8 px track, grape fill up to the value, 24 px
+// knob with a 3 px grape ring. Controlled, because the fill follows `value`.
+// Name it with aria-label or aria-labelledby.
+export function Slider({ value, min, max, className, style, ...rest }: SliderProps) {
+  if (!(max > min)) throw new Error(`Slider: max (${max}) must be greater than min (${min})`)
+  if (!(value >= min && value <= max)) {
+    throw new Error(`Slider: value (${value}) must be within [${min}, ${max}]`)
+  }
+  const fill = `${((value - min) / (max - min)) * 100}%`
+  return (
+    <input
+      type="range"
+      value={value}
+      min={min}
+      max={max}
+      className={[styles.slider, className].filter(Boolean).join(' ')}
+      style={{ ...style, '--slider-fill': fill } as CSSProperties}
+      {...rest}
+    />
+  )
+}

web/src/ui/Tag.module.css

@@ -0,0 +1,21 @@
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.grape {
+  background: var(--color-accent-100);
+  color: var(--color-accent-800);
+}
+
+.teal {
+  background: var(--color-accent-2-200);
+  color: var(--color-accent-2-800);
+}

web/src/ui/Tag.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { Tag } from './Tag.tsx'
+import styles from './Tag.module.css'
+
+describe('Tag', () => {
+  it('renders a static, non-interactive label', () => {
+    render(<Tag>Draft</Tag>)
+    const tag = screen.getByText('Draft')
+    expect(tag).toHaveClass(styles.grape!)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('supports the teal tone', () => {
+    render(<Tag tone="teal">Synced</Tag>)
+    expect(screen.getByText('Synced')).toHaveClass(styles.teal!)
+  })
+})

web/src/ui/Tag.tsx

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './Tag.module.css'
+
+export type TagTone = 'grape' | 'teal'
+
+export type TagProps = ComponentPropsWithRef<'span'> & {
+  tone?: TagTone
+}
+
+// Static label such as "Draft", "Side quest" or "Synced". Not interactive.
+export function Tag({ tone = 'grape', className, ...rest }: TagProps) {
+  const classes = [styles.tag, styles[tone], className].filter(Boolean).join(' ')
+  return <span className={classes} {...rest} />
+}

web/src/ui/TextInput.module.css

@@ -0,0 +1,46 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.label {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+
+.hiddenLabel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.input {
+  box-sizing: border-box;
+  min-width: 44px;
+  height: 48px;
+  padding: 0 20px;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: 16px;
+}
+
+.input::placeholder {
+  color: var(--color-neutral-700);
+}
+
+.input:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

web/src/ui/TextInput.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { hitArea, expectMinHitArea } from '../test/hitArea.ts'
+import { TextInput } from './TextInput.tsx'
+
+describe('TextInput', () => {
+  it('is a textbox named by its label', () => {
+    const onChange = vi.fn()
+    render(<TextInput label="Dinner name" placeholder="e.g. Chicken enchiladas" onChange={onChange} />)
+    const input = screen.getByRole('textbox', { name: 'Dinner name' })
+    fireEvent.change(input, { target: { value: 'Chili' } })
+    expect(onChange).toHaveBeenCalledOnce()
+    expect(input).toHaveValue('Chili')
+  })
+
+  it('keeps the accessible name when the label is visually hidden', () => {
+    render(<TextInput label="Add a regular" labelHidden />)
+    expect(screen.getByRole('textbox', { name: 'Add a regular' })).toBeInTheDocument()
+  })
+
+  it('is a 48 px pill with a ≥ 44 px hit area', () => {
+    render(<TextInput label="Dinner name" />)
+    const input = screen.getByRole('textbox', { name: 'Dinner name' })
+    expectMinHitArea(input)
+    expect(hitArea(input).height).toBe(48)
+  })
+
+  it('forwards the ref', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<TextInput label="Dinner name" ref={ref} />)
+    expect(ref.current).toBe(screen.getByRole('textbox', { name: 'Dinner name' }))
+  })
+})

web/src/ui/TextInput.tsx

@@ -0,0 +1,21 @@
+import { useId, type ComponentPropsWithRef } from 'react'
+import styles from './TextInput.module.css'
+
+export type TextInputProps = Omit<ComponentPropsWithRef<'input'>, 'id'> & {
+  label: string
+  // Hide the label visually; it stays the input's accessible name.
+  labelHidden?: boolean
+}
+
+// 48 px pill input on the surface fill, always associated with its label.
+export function TextInput({ label, labelHidden = false, type = 'text', className, ...rest }: TextInputProps) {
+  const id = useId()
+  return (
+    <div className={styles.field}>
+      <label htmlFor={id} className={labelHidden ? styles.hiddenLabel : styles.label}>
+        {label}
+      </label>
+      <input id={id} type={type} className={[styles.input, className].filter(Boolean).join(' ')} {...rest} />
+    </div>
+  )
+}

web/src/ui/Toggle.module.css

@@ -0,0 +1,57 @@
+/* The button is a 44 px hit box around the 40×24 track; negative margins keep
+   the 40×24 layout footprint. */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 44px;
+  height: 44px;
+  margin: -10px -2px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  cursor: pointer;
+}
+
+.toggle:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.track {
+  position: relative;
+  width: 40px;
+  height: 24px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-300);
+  transition: background-color 150ms var(--ease-out-soft);
+}
+
+.knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+  transition: transform 180ms var(--ease-spring);
+}
+
+.toggle[aria-checked='true'] .track {
+  background: var(--color-accent-2-600);
+}
+
+.toggle[aria-checked='true'] .knob {
+  transform: translateX(16px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track,
+  .knob {
+    transition: none;
+  }
+}

web/src/ui/Toggle.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { hitArea, expectMinHitArea } from '../test/hitArea.ts'
+import { Toggle } from './Toggle.tsx'
+
+function Harness() {
+  const [checked, setChecked] = useState(false)
+  return <Toggle aria-label="Push: New weekly plan ready" checked={checked} onCheckedChange={setChecked} />
+}
+
+function toggle() {
+  return screen.getByRole('switch', { name: 'Push: New weekly plan ready' })
+}
+
+describe('Toggle', () => {
+  it('is a switch reflecting its state in aria-checked', () => {
+    render(<Harness />)
+    expect(toggle()).toHaveAttribute('aria-checked', 'false')
+    fireEvent.click(toggle())
+    expect(toggle()).toHaveAttribute('aria-checked', 'true')
+    fireEvent.click(toggle())
+    expect(toggle()).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it.each([' ', 'Enter'])('toggles with the %j key', (key) => {
+    render(<Harness />)
+    fireEvent.keyDown(toggle(), { key })
+    expect(toggle()).toHaveAttribute('aria-checked', 'true')
+    fireEvent.keyDown(toggle(), { key })
+    expect(toggle()).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('suppresses native activation for Space and Enter so a key press toggles once', () => {
+    render(<Harness />)
+    expect(fireEvent.keyDown(toggle(), { key: ' ' })).toBe(false)
+    expect(fireEvent.keyUp(toggle(), { key: ' ' })).toBe(false)
+    expect(fireEvent.keyDown(toggle(), { key: 'Enter' })).toBe(false)
+    expect(fireEvent.keyDown(toggle(), { key: 'a' })).toBe(true)
+  })
+
+  it('ignores other keys', () => {
+    const onCheckedChange = vi.fn()
+    render(<Toggle aria-label="Chat" checked={false} onCheckedChange={onCheckedChange} />)
+    fireEvent.keyDown(screen.getByRole('switch', { name: 'Chat' }), { key: 'a' })
+    expect(onCheckedChange).not.toHaveBeenCalled()
+  })
+
+  it('is disabled when asked', () => {
+    const onCheckedChange = vi.fn()
+    render(<Toggle aria-label="Chat" checked={false} disabled onCheckedChange={onCheckedChange} />)
+    const sw = screen.getByRole('switch', { name: 'Chat' })
+    expect(sw).toBeDisabled()
+    fireEvent.click(sw)
+    expect(onCheckedChange).not.toHaveBeenCalled()
+  })
+
+  it('draws a 40×24 track inside a ≥ 44 px hit area', () => {
+    render(<Harness />)
+    expectMinHitArea(toggle())
+    expect(hitArea(toggle().firstElementChild!)).toEqual({ width: 40, height: 24 })
+  })
+})

web/src/ui/Toggle.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithRef, KeyboardEvent } from 'react'
+import styles from './Toggle.module.css'
+
+export type ToggleProps = Omit<
+  ComponentPropsWithRef<'button'>,
+  'type' | 'role' | 'aria-checked' | 'onChange' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'children'
+> & {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+// 40×24 pill switch (role="switch"). Name it with aria-label or
+// aria-labelledby. Space and Enter are handled here and their native button
+// activation is suppressed, so each key press toggles exactly once.
+export function Toggle({ checked, onCheckedChange, className, ...rest }: ToggleProps) {
+  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key !== ' ' && event.key !== 'Enter') return
+    event.preventDefault()
+    onCheckedChange(!checked)
+  }
+
+  function onKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key === ' ') event.preventDefault()
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      className={[styles.toggle, className].filter(Boolean).join(' ')}
+      onClick={() => onCheckedChange(!checked)}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      {...rest}
+    >
+      <span className={styles.track} aria-hidden="true">
+        <span className={styles.knob} />
+      </span>
+    </button>
+  )
+}

web/src/ui/index.ts

@@ -0,0 +1,11 @@
+export { Button, type ButtonProps, type ButtonVariant } from './Button.tsx'
+export { Card, type CardProps, type CardTone } from './Card.tsx'
+export { Checkbox, type CheckboxProps } from './Checkbox.tsx'
+export { Chip, type ChipProps } from './Chip.tsx'
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonTone } from './IconButton.tsx'
+export { ListRow, type ListRowProps } from './ListRow.tsx'
+export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx'
+export { Slider, type SliderProps } from './Slider.tsx'
+export { Tag, type TagProps, type TagTone } from './Tag.tsx'
+export { TextInput, type TextInputProps } from './TextInput.tsx'
+export { Toggle, type ToggleProps } from './Toggle.tsx'

web/vite.config.ts

@@ -14,6 +14,9 @@ export default defineConfig({
   },
   test: {
     environment: 'jsdom',
+    // Inject CSS Modules into jsdom so tests can assert the sizes the
+    // stylesheets actually declare (for example 44 px hit areas).
+    css: true,
     setupFiles: ['./src/test/setup.ts'],
   },
 })