@putdotio/design 5.1.0 → 5.2.1

package/DESIGN.md

@@ -78,7 +78,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
 
 ## Colors
 
-- Yellow `#FDCE45` (`--yellow-solid`) is the brand value in both modes: brand mark, primary actions, folder and file emphasis, progress, focus. Hover is `--yellow-solid-hover`.
+- Yellow `#FDCE45` (`--yellow-solid`) is the brand value in both modes: brand mark, primary actions, folder and file emphasis, progress. Hover is `--yellow-solid-hover`.
 - Every yellow is one of these tokens, flat. Yellow text on light surfaces is `--yellow-text-secondary`.
 - Dark is the default product mode; light serves landing pages, docs, and states that read better light.
 - Red, green, and neutral come from their token scales.
@@ -90,7 +90,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
 - TV product UI has no mono face (a debug overlay may use the platform's system monospace): 10-foot numerics use GT America `tnum`. Platforms without OpenType feature selection (Roku: `Font` takes only `uri` and `size`) get proportional figures, so budget timecodes for reflow (`1` is 399/1000 em, `0` is 636).
 - GT America is Latin only (523 codepoints, Western and Central European plus Turkish, no dingbats such as `✓` `▶` `★`). Symbols are icons. Text that can hold a filename keeps a fallback family; web falls back per glyph, while one-font-per-label platforms must ship a fallback or render `.notdef` boxes.
 - The root is the browser default, `100%` (16px), so text follows the reader's setting. Components choose a text role, not a size step: `--fs-ui` (14px) for UI chrome (labels, buttons, nav, links, errors), `--fs-body` (16px) for body and long text, `--fs-caption` (12px) for captions, and `--fs-field` (16px) for typed text, which keeps iOS Safari from zooming on focus.
-- The steps are rem on Tailwind's 16px scale: `--fs-xs` 12px, `--fs-sm` 14, `--fs-base` 16, `--fs-md` 18, `--fs-lg` 24, `--fs-xl` 32, `--fs-2xl` 48, `--fs-3xl` 64, `--fs-display` 96. Screen titles and one-time-code digits take `--fs-title` (22px) on a 30px line with `--tracking-snug`; the code separator is `--fs-md`.
+- The steps are rem on Tailwind's 16px scale: `--fs-xs` 12px, `--fs-sm` 14, `--fs-base` 16, `--fs-md` 18, `--fs-lg` 24, `--fs-xl` 32, `--fs-2xl` 48, `--fs-3xl` 64, `--fs-display` 96. Screen titles take `--fs-title` (22px) on a 30px line with `--tracking-snug`. One-time-code digits take `--fs-title` in mono; the code separator is `--fs-md`.
 
 ## Layout & Spacing
 
@@ -101,7 +101,7 @@ Tier 1, 3, and 4 cards are Components (put.io owns the recipe); tier 2 cards are
 
 ## Elevation & Depth
 
-Borders and soft shadows mark interaction: popovers, modals, menus, TV focus, drag and drop targets. Glow belongs only to focused TV states.
+Borders and soft shadows mark interaction: popovers, modals, menus, TV focus, drag and drop targets. Nothing glows; TV focus is a fill.
 
 ## Shapes
 
@@ -116,7 +116,8 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - **Primary:** `--button-primary-bg`, hover `--button-primary-bg-hover`, label `--button-primary-fg`. At most one per action group.
 - **Secondary:** `--button-default-bg` plus a `--border` border; hover steps both (`--button-default-bg-hover`, `--border-hover`).
 - **Ghost:** text only, `--button-ghost-fg`; hover adds `--button-ghost-bg-hover` and lifts the label to `--button-ghost-fg-hover`. Use it for anything quieter than secondary: header `Sign in`, toolbar actions, `Cancel` beside a confirm, icon-only buttons.
-- **Disabled:** submit buttons are never disabled at rest; the submit validates. A filled button is disabled only while its action runs (with a spinner) or once it is done, so it keeps its own fill and label at full opacity; a finished 2FA “Verified” is a `.btn-success` with `data-state="success"`. Secondary and quiet buttons drop their text to `--solid` at full opacity.
+- **Disabled:** `:disabled` and `aria-disabled="true"` read the same. Submit buttons are never disabled at rest; the submit validates. A filled button is disabled only while its action runs (with a spinner) or once it is done, so it keeps its own fill and label at full opacity; a finished 2FA “Verified” is a `.btn-success` with `data-state="success"`. Secondary and quiet buttons drop their text to `--solid` at full opacity.
+- **Hover:** only under `(hover: hover) and (pointer: fine)`, so a tap never leaves a button lit.
 - **Focus:** `--shadow-focus`, a 2px `--bg` gap then a 2px `--solid-hover` ring, at least 3:1 against the page and panels in both modes.
 - A bordered button always fills (secondary). Border-only buttons read smaller beside solid fills and vanish on dark.
 - Four sizes share one box per size across tiers: default 36px, `md` 32px, `sm` 28px, `xs` 24px. Read `--button-height*`, `--button-padding-x*`, `--button-label-size*`, `--button-tracking*`, `--button-icon-size`, `--button-gap`.
@@ -135,14 +136,14 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 
 ### Auth
 
-- Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-note`, `.auth-actions`, `.auth-links`, `.auth-footer`.
+- Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-logo`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-note`, `.auth-actions`, `.auth-links`, `.auth-footer`.
 - The logo sits top-left in the header, in a `30.33px` box (26px ink × 7/6). The top right stays empty by default.
 - One left-aligned column, up to `340px`, is centred horizontally and optically centred vertically: the form's middle sits near 45% of the viewport height, never below the true middle.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-caption`, separated by middots, 16px above the page bottom.
 - Text is one size: labels, hints, `.auth-note` lines, errors, and the link row take `--fs-ui`. The footer and a label's own action take `--fs-caption`; fields take `--fs-field`.
 - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
 - Fields and buttons keep the standard 36px box: the filled field and a full-width default-size primary.
-- Labels are small, muted, and above the field.
+- Labels are small, regular, muted, and above the field.
 - The primary button is full-width yellow. “Forgot password?” is the Password field's `.label-action`. Other secondary actions sit under the form in `.auth-links`: a bare link stays muted (“Use a recovery code”, “← Back to sign in”); a prompt's link (“New to put.io? Sign up”, “Wrong account? Sign out”) is `--text`, medium, and underlines only on hover. Two items split to the edges; a lone link or prompt centres.
 - Buttons outside a form sit in `.auth-actions`, 16px below what precedes them; a description `.auth-note` right before them leaves 28px. A back link leads with Phosphor's arrow-left as inline SVG. A legal line under the submit button centres on it.
 - Tab order runs fields (each followed by its label action), submit, then secondary links; DOM order follows visual order, with no positive `tabindex`. Two-factor runs the code, Verify, then its links. The reveal-password toggle takes `tabindex="-1"` and keeps its accessible name: keyboard-only users can't toggle visibility, screen-reader users still can in browse mode. No link leaves the tab order.
@@ -150,7 +151,7 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 - Copy: “Sign in”, “Sign up”, and “That username or password doesn't look right.”
 - auth.put.io still ships the older card layout: drift.
 - References: `web-s06-auth`, `web-p00c-auth-signin`, `web-p00d-auth-signup`, `web-p00e-auth-2fa`. Outside references: the TIDAL, Stripe Link, Cursor, Linear, and Vercel sign-in pages.
-- One-time codes are one `.otp-input` (`inputmode="numeric"`, `autocomplete="one-time-code"`, `maxlength="6"`, `aria-invalid`) shown through two `.otp-group`s, one `.otp-separator`, and six `.otp-slot`s; script syncs slot text and `filled`/`active`, and maps a clicked slot to the input selection. The slots stretch the full column with mono digits. The label reads “Code from your authenticator app”, with no hint line.
+- One-time codes are one `.otp-input` (`inputmode="numeric"`, `autocomplete="one-time-code"`, `maxlength="6"`, `aria-invalid`) inside an `.otp` root, shown through two `.otp-group`s, one `.otp-separator`, and six `.otp-slot`s; script syncs slot text and `filled`/`active`, and maps a clicked slot to the input selection. The slots stretch the full column with mono digits. The label reads “Code from your authenticator app”, with no hint line.
 - Editing an invalid code closes the error; retry waits for six digits. `data-state="verifying"` disables the input, keeps the digits, and announces through a polite live region. `data-state="success"` keeps the digits read-only, announces continuation in a `role="status"` region, and shows no further action; the consumer owns navigation. The submit turns a disabled `.btn-success` with `data-state="success"`, relabelled “Verified”, announced through a visually hidden status region.
 - “Use a recovery code” appears only once a consumer owns the route. Groups own the responsive width, so the control fits narrow columns without scrolling.
 

package/README.md

@@ -47,28 +47,15 @@ keeps the token file's element styles below utilities:
 ```
 
 Utilities then read the tokens: `bg-bg` is `var(--bg)`, `rounded-sm` is
-`var(--radius-sm)`, `text-lg` is `var(--fs-lg)`. The full mapping:
+`var(--radius-sm)`, `text-lg` is `var(--fs-lg)`. Theme rules:
 [Tailwind v4 theme](system/README.md#tailwind-v4-theme).
 
-Package entrypoints, from `exports` in [package.json](package.json):
-
-| Subpath                          | File                                                                                |
-| -------------------------------- | ----------------------------------------------------------------------------------- |
-| `@putdotio/design/css`           | [`dist/css/tokens.css`](dist/css/tokens.css)                                        |
-| `@putdotio/design/components`    | [`system/components.css`](system/components.css)                                    |
-| `@putdotio/design/tailwind`      | [`dist/css/tailwind.css`](dist/css/tailwind.css)                                    |
-| `@putdotio/design/tokens`        | [`dist/tokens.flat.json`](dist/tokens.flat.json)                                    |
-| `@putdotio/design/tokens/meta`   | [`dist/tokens.js`](dist/tokens.js), typed by [`dist/tokens.d.ts`](dist/tokens.d.ts) |
-| `@putdotio/design/tokens/dtcg`   | [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)                                    |
-| `@putdotio/design/tokens/figma`  | [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)                      |
-| `@putdotio/design/assets/<file>` | [`system/assets`](system/assets)                                                    |
-| `@putdotio/design/design.md`     | [`DESIGN.md`](DESIGN.md)                                                            |
+Every entrypoint is listed under `exports` in [package.json](package.json).
 
 ## Docs
 
 - [Design contract](DESIGN.md)
-- [Design guide structure](system/README.md)
-- [Distribution](docs/distribution.md)
+- [Design guide](system/README.md)
 - [Contributing](CONTRIBUTING.md)
 - [Security](https://github.com/putdotio/.github/blob/main/SECURITY.md)
 - [Agent guide](AGENTS.md)

package/dist/css/tokens.css

@@ -521,6 +521,9 @@
 }
 
 /* -- Document base ------------------------------------------------- */
+/* Native scrollbars, controls and autofill follow the mode. */
+:root { color-scheme: light; }
+.dark { color-scheme: dark; }
 html {
   background: var(--html-bg);
   color: var(--text);
@@ -555,7 +558,6 @@ body {
 .num, .tabular {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  font-feature-settings: "tnum";
 }
 
 h1, .h1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",
@@ -93,5 +93,5 @@
     "typescript": "^7.0.2",
     "yaml": "^2.9.0"
   },
-  "packageManager": "pnpm@12.14.0"
+  "packageManager": "pnpm@12.15.0"
 }

package/system/README.md

@@ -1,228 +1,76 @@
 # put.io design system
 
-The guide site: generated site tokens, component CSS, preview cards, and the
-design-system index.
+The guide site and the package's component and Tailwind layers. The design
+rules live in [DESIGN.md](../DESIGN.md).
 
-## Layout
-
-- `index.html` redirects to `design-system.html`, the guide and preview-card
-  index. `design-system-light.html` redirects to
-  `design-system.html?theme=light`.
-- `tokens.css` is generated from `../tokens/**/*.tokens.json`; edit the token
-  sources and rebuild.
-- `components.css` is the Tier-1 component layer (the web contract).
-- `tv.css` is the TV / 10-foot component CSS, scoped to `.tv` artboards.
-- `assets/` holds logos, favicons, retro marks, and app icons.
-- `preview/` holds specimen cards for the foundations and every platform tier.
-  Its `_`-prefixed files are card chrome only (frame, tier strip, HIG, M3, and
-  Roku shells, resize and password-toggle helpers).
-
-Cards are named `<platform>-<section><n>-<subject>.html` with section letter `f`
-foundations, `c` components, `e` elements, `p` patterns, or `s` screens
-(`ios-e01-toggle.html`); the numbered `00-…13-…` files are the tier-0
-foundations. Element cards are a fixed 1120×580 viewport: one control, its
-states, a spec strip, a don't block.
-
-## Fonts
-
-Preview pages load the public put.io font CSS from `static.put.io`, the same
-source as the product; font licensing is in
-[Distribution](../docs/distribution.md#fonts-and-assets). Each preview links
-both families in `<head>`:
-
-```html
-<link rel="stylesheet" href="https://static.put.io/fonts/gt-america/standard/font.css" />
-<link rel="stylesheet" href="https://static.put.io/fonts/berkeley-mono/variable/font.css" />
-```
-
-Those two links are the full font set: mono text reads `--font-mono` (Berkeley
-Mono), whose tabular figures carry the numerics.
-
-Weight names on the font host:
-`100 ultra-light · 200 thin · 300 light · 400 regular · 500 medium · 700 bold · 900 black`.
-The tokens use four of them through `--fw-regular`, `--fw-medium`, `--fw-bold`,
-and `--fw-black`.
-
-## Using tokens
-
-Guide pages in `system/` load the generated site stylesheet:
-
-```html
-<link rel="stylesheet" href="./tokens.css" />
-```
-
-The canonical source is DTCG-compatible JSON in [`../tokens`](../tokens). This
-site stylesheet (`system/tokens.css`) and the package stylesheet
-(`dist/css/tokens.css`, exported as `@putdotio/design/css`) are generated from
-the same source. Brand yellow is `var(--yellow-solid)`; its emitted hsl form is
-pinned in the [`../DESIGN.md`](../DESIGN.md) frontmatter, and the
-`--button-primary-bg-hover` derivation is in
-[Distribution](../docs/distribution.md#generated-files).
-
-Stacking, breakpoints, the root font-size, and the `@media` literal rule live
-in [Layout & Spacing](../DESIGN.md#layout--spacing) and
-[Typography](../DESIGN.md#typography).
-
-Package consumers import as in the [README](../README.md#use).
-
-For **TV preview cards**, also load `tv.css`, which adds the `.tv`, `.scr`,
-`.row`, solid surface tiers, and player chrome on top of the tokens, authored
-1:1 at 1920×1080 (a px in the file is a px on the TV). Every component selector
-is scoped under `.tv`, so the file can be bundled globally alongside web
-components. Platform repos implement TV components in their native UI stacks:
-
-```html
-<link rel="stylesheet" href="./tokens.css" /> <link rel="stylesheet" href="./tv.css" />
-```
-
-TV material, focus, and the `tv` token group rules live in
-[Components](../DESIGN.md#components). Guide specifics: the `tv` group is
-`mode: "tv"` and read from `dist/tokens.flat.json`; `--radius-tv` is the one
-`tv` value the token CSS emits, so `tv.css` declares the `--tv-*` properties
-its cards use itself.
-
-## Core rules
-
-- **Yellow** follows [Colors](../DESIGN.md#colors). Guide specifics: `--yellow-solid-hover` is the hover peer with one value in both modes, and button focus-visible rings use `--shadow-focus`: a 2px `--bg` gap, then a 2px `--solid-hover` ring, at least 3:1 against the page and panels. `--shadow-focus-color` (the yellow at 35% alpha) stays only as shadcn's `--ring`. Form fields focus with `--field-ring` instead.
-- **Yellow as text on light** uses `--yellow-text-secondary` (≈5:1, AA); `--yellow-solid` is fill-only on light backgrounds.
-- **Labels on yellow** use `--primary-foreground`, a warm dark that passes AA on the yellow fill.
-- **One design, two modes.** Light and dark are the same markup and components with different token values. Toggle `.dark` on `<html>`; one page serves both modes. Components consume semantic tokens (`--bg`, `--text`, `--border`, `--accent`, …) instead of raw `#hex` or `hsl()`.
-- **Text sizes are tokens.** The guide, the web previews, and their shared CSS (`_tier.css`, `_frame.css`, `_element.css`) set text with a role (`--fs-ui`, `--fs-body`, `--fs-caption`, `--fs-field`) or a heading step, per [Typography](../DESIGN.md#typography). Icon glyphs keep px, rules under `.tv` keep the TV grid, and native and TV previews keep platform px. `pnpm verify` fails on any other literal font size.
-- **Wordmarks are optically pre-centred.** All three logo SVGs carry built-in top padding in the viewBox (retro pair `0 -16 376 112`, `logo.svg` `0 -24.44 621.79 176.055`). Flex-centre them as-is, with no `translateY` nudge. Height-set placements size boxes at 7/6 of the ink height.
-
-Icons, fields and panels, and raw filenames follow the root
-[Components](../DESIGN.md#components) and
-[Content and Icons](../DESIGN.md#content-and-icons).
-
-## Binding tiers
+## Preview cards
 
-Tier definitions, the Component/Element distinction, and the `preview/_tier.css`
-pairing rule live in [Binding Tiers](../DESIGN.md#binding-tiers). An Element
-card shows how a stock control receives tokens.
+`design-system.html` indexes every card. Each card renders one concept against
+the real tokens; read it as a spec.
 
-Native cards are drawn 1:1 in their own unit (iPhone 393×852pt, iPad
-1024×768pt, Apple Watch 176×215pt, Android 412×915dp, TV 1920×1080px), so a
-number written on a card is the number in the HIG or the Material spec. Those
-metrics are Apple's and Google's and stay out of the put.io token graph. Device
-bezels and on-video chrome stay untokenised.
+- Name cards `<platform>-<section><n>-<subject>.html`, with section `f`
+  foundations, `c` components, `e` elements, `p` patterns, or `s` screens
+  (`ios-e01-toggle.html`). The numbered `00-…13-…` files are tier-0
+  foundations. `pnpm verify` rejects other names.
+- Element cards are a fixed 1120×580 viewport: one control, its states, a spec
+  strip, a don't block.
+- Native cards are drawn 1:1 in their own unit (iPhone 393×852pt, iPad
+  1024×768pt, Apple Watch 176×215pt, Android 412×915dp, TV 1920×1080px), so a
+  number on a card is the number in the HIG or the Material spec. Those
+  metrics, device bezels, and on-video chrome stay out of the token graph.
+- Each card links the public font CSS from `static.put.io`; these two links are
+  the full font set:
+
+  ```html
+  <link rel="stylesheet" href="https://static.put.io/fonts/gt-america/standard/font.css" />
+  <link rel="stylesheet" href="https://static.put.io/fonts/berkeley-mono/variable/font.css" />
+  ```
+
+- TV cards also load `tv.css`, authored 1:1 at 1920×1080 and scoped under
+  `.tv`. It declares the `--tv-*` properties its cards use, because the token
+  CSS emits only `--radius-tv` from the `tv` group.
+- Wordmark SVGs carry their optical centring in the viewBox. Flex-centre them
+  as is, with no `translateY` nudge.
 
 ## Theme System
 
-The guide (`design-system.html`) owns the theme toggle. It writes
-`putio-ds-theme` to `localStorage`, updates `html.dark`, and broadcasts
-`{type:'__theme', theme}` to every embedded preview iframe via `postMessage`,
-so embeds flip live without reloading. Each preview's inline bootstrap reads
-the same storage key on standalone open, and `preview/_resize.js` listens for
-the parent broadcast when embedded. A URL query (`?theme=light` or
-`?theme=dark`) overrides both, for screenshots.
+Light and dark are the same markup with different token values: toggle `.dark`
+on `<html>`. The guide stores the choice in `localStorage` and broadcasts it to
+embedded cards; `?theme=light` or `?theme=dark` overrides both, for
+screenshots.
 
-Fixed-mode previews opt out with `<html data-theme-lock="dark">`, reserved for
-product mockups whose visual language is intrinsically one mode. A 10-foot
-screen, a native app mockup, and on-video player chrome are fixed-mode
-surfaces, so the `ios-*`, `android-*`, `androidtv-*`, `tvos-*`, `watchos-*`,
-`roku-*`, `tv-*`, and `mobile-*` cards plus `web-p06-player.html` are locked.
-Locked previews ignore `localStorage`, parent broadcasts, and the URL query.
-New component previews stay unlocked, so the tokens render them in both modes.
+Native, TV, and on-video player cards are fixed-mode product mockups and set
+`<html data-theme-lock="dark">`, which ignores the toggle and the query. Every
+other card stays unlocked, and the e2e suite checks it in both modes.
 
 ## shadcn / Base UI interop
 
-The token layer aliases the canonical shadcn token names, so shadcn/ui blocks,
-Base UI components, and Tailwind presets resolve against put.io values without
-renaming. Each shadcn name aliases a put.io token and carries no value of its
-own, so the two name systems cannot drift.
-
-| shadcn name                                  | put.io target                                              |
-| -------------------------------------------- | ---------------------------------------------------------- |
-| `--primary` / `--primary-foreground`         | `--yellow-solid` / `var(--primary-foreground)` (warm dark) |
-| `--destructive` / `--destructive-foreground` | `--red-solid` / `var(--destructive-foreground)` (= `#fff`) |
-| `--success` / `--success-foreground`         | `--green-solid` / `var(--success-foreground)` (= `#fff`)   |
-| `--muted` / `--muted-foreground`             | `--bg-secondary` / `--text-secondary`                      |
-| `--accent` / `--accent-foreground`           | `--component-bg` / `--text`                                |
-| `--card` / `--card-foreground`               | `--component-bg` / `--text`                                |
-| `--popover` / `--popover-foreground`         | `--component-bg` / `--text`                                |
-| `--input`                                    | `--field-border`                                           |
-| `--ring`                                     | `--shadow-focus-color`                                     |
-| `--background` / `--foreground`              | `--bg` / `--text`                                          |
-
-The `--input-*` set (`-bg`, `-border`, `-border-hover`, `-border-focus`,
-`-ring`, `-text`, `-placeholder`, `-radius`) and `--foreground-muted` are
-[deprecated](../docs/distribution.md#deprecated-tokens): shadcn itself names
-only `--input` and `--muted-foreground`. Each deprecated name aliases its
-replacement; **author against `--field-*` and `--text-secondary`.**
+The token layer defines the shadcn names (`--primary`, `--muted-foreground`,
+`--input`, `--ring`, …) as aliases of put.io tokens, so shadcn/ui blocks and
+Base UI components resolve against put.io values without renaming.
 
-On a solid surface, read the foreground tokens (`--primary-foreground`,
-`--destructive-foreground`, `--success-foreground`), which encode the mode-safe
-inverse pair, instead of writing literal `#000` / `#fff`.
-
-put.io components use the long descriptive names (`--component-bg-hover`,
-`--yellow-text-secondary`) because they name the role exactly; shadcn-imported
-code keeps the short names.
+- Author against `--field-*` and `--text-secondary`. The `--input-*` set and
+  `--foreground-muted` are deprecated aliases.
+- On a solid fill, read `--primary-foreground`, `--destructive-foreground`, or
+  `--success-foreground` instead of literal `#000` or `#fff`.
+- Express state with `data-state` (`open`, `checked`, `completed`, …), the
+  attribute headless primitives set, not class flags such as `.is-active`.
+- Mark compound parts with `data-slot` (`modal-header`, `card-title`, …) so
+  external CSS can target one part without nested class chains.
 
 ### Tailwind v4 theme
 
 `@putdotio/design/tailwind` ([`dist/css/tailwind.css`](../dist/css/tailwind.css))
-maps the tokens into Tailwind v4 theme keys. The build derives each key from the
-token's type and CSS name, so new tokens join their namespace without a hand
-list. Import it after `tailwindcss` and `@putdotio/design/css`; the
-[README](../README.md#use) shows the import lines.
-
-| Tailwind key              | put.io token                                               | Example utilities                               |
-| ------------------------- | ---------------------------------------------------------- | ----------------------------------------------- |
-| `--color-<name>`          | every color token `--<name>`                               | `bg-bg`, `text-muted-foreground`                |
-| `--font-*`                | `--font-*`                                                 | `font-sans`, `font-mono`                        |
-| `--font-weight-*`         | `--fw-*`                                                   | `font-regular`, `font-bold`                     |
-| `--text-*`                | `--fs-*`                                                   | `text-sm`, `text-display`                       |
-| `--leading-*`             | `--lh-*`                                                   | `leading-tight`                                 |
-| `--tracking-*`            | `--tracking-*`, `--button-tracking*`                       | `tracking-tight`, `tracking-button`             |
-| `--radius`, `--radius-*`  | `--radius`, `--radius-*`, `--<component>-radius`           | `rounded`, `rounded-sm`, `rounded-panel`        |
-| `--shadow-*`              | `--shadow-*`, `--<component>-shadow`, `--<component>-ring` | `shadow-sm`, `shadow-menu`, `shadow-field-ring` |
-| `--ease-*`                | `--ease-*`                                                 | `ease-out`                                      |
-| `--transition-duration-*` | `--dur-*`                                                  | `duration-base`                                 |
-
-- The block is `@theme inline reference`. Utilities read the put.io custom
-  property where they apply, so `.dark` works. Tailwind declares none of the
-  keys, so `--radius-sm` or `--font-sans` stays the token instead of a
-  self-reference. In custom CSS, read the put.io name (`var(--bg)`), not
-  `var(--color-bg)`.
-- shadcn class names such as `bg-primary`, `border-input`, and
-  `text-muted-foreground` resolve through the aliases above.
-- `text-*` sizes set no line height; the document's `--lh-normal` applies until
-  a `leading-*` utility sets one.
-- TV tokens, z-indexes and breakpoints stay out. Deprecated tokens stay in until a major release removes them.
-- `--spacing` is `var(--space-1)`, so `p-4` is 16px at any root size and equals
-  `--space-4`. Tailwind defaults that put.io does not define, such as
-  `rounded-xl`, stay available.
-
-### State via `data-state`, not class flags
-
-Base UI / headless primitives set
-`data-state="open|closed|checked|unchecked|active|completed|pending|loading"`
-on the DOM. put.io components target those same attribute values in CSS; see
-the wizard step bar in `web-p00b-form-flows.html`
-(`.step[data-state="completed"]`) and the menu/table cards. Express state with
-`data-state` rather than class flags (`.is-active`, `.on`, `.current`), so the
-same DOM contract works with any controlling code and devtools show the state
-directly.
-
-### Compound parts via `data-slot`
-
-shadcn marks parts of compound components with `data-slot="card-header"`,
-`data-slot="card-title"`, and so on. put.io does the same on the folder picker
-(`data-slot="modal" / "modal-header" / "modal-body" / "modal-footer"`), so
-external CSS can target one part without nested class chains.
-
-## Design variants
-
-Four documented type stacks; pick one per surface:
-
-| Variant      | Stack                                              | Use when                             |
-| ------------ | -------------------------------------------------- | ------------------------------------ |
-| Clean Modern | GT America                                         | default app UI                       |
-| Monospace    | Berkeley Mono                                      | terminal, logs, technical dashboards |
-| Brutalist    | GT America Black + Berkeley Mono                   | marketing punctuation                |
-| Editorial    | GT America Black 900 (tight tracking) + GT America | landing hero, about                  |
-
-## Preview cards
-
-`design-system.html` is the full index. Each card renders one concept against
-the real tokens; read it as a spec.
+maps the tokens into Tailwind v4 theme keys: `bg-bg`, `rounded-panel`,
+`text-display`, `duration-base`. Import it after `tailwindcss` and
+`@putdotio/design/css`, as in the [README](../README.md#use).
+
+- The block is `@theme inline reference`: utilities read the put.io custom
+  property, so `.dark` works. In custom CSS, read the put.io name (`var(--bg)`),
+  not `var(--color-bg)`.
+- `text-*` sizes set no line height; `--lh-normal` applies until a `leading-*`
+  utility sets one.
+- `--spacing` is `var(--space-1)`, so `p-4` is 16px and equals `--space-4`.
+- z-indexes, breakpoints, and the `tv` group except `--radius-tv` stay out.
+  Tailwind defaults that put.io does not define, such as `rounded-xl`, stay
+  available.

package/system/assets/app-icon-monochrome.svg

@@ -0,0 +1,9 @@
+<!--
+  108dp adaptive-icon grid, at the colour icon's scale (its 1024 master fills
+  the 72dp centre). Paths carry no fill: the platform tints them.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108">
+  <path fill-rule="evenodd" d="M34.594 44.508H35.651V40.289H36.709V38.18H37.766V37.125H38.823V36.07H39.881V33.961H41.996V32.906H43.053V31.852H45.168V30.797H47.283V29.742L58.915 29.742V30.797H61.029V31.852H63.144V32.906H65.259V33.961H66.316V35.016H67.374V36.07H68.431V38.18H69.489V40.289H70.546V42.398H71.604V52.945H70.546V56.109H69.489V58.219H68.431V59.273H67.374V60.328H66.316V61.383H65.259V62.438H64.202V63.492H62.087V64.547H59.972V65.602H55.742V66.656H45.168V67.711H44.111V72.984H43.053V74.039H41.996V75.094H36.709V74.039H35.651V72.984H34.594L34.594 44.508ZM46.225 44.508V42.398H47.283V41.344H49.397V40.289H51.512V39.234H54.685V40.289H57.857V41.344H58.914V42.398H59.972V44.508H61.029V50.836H59.972V51.891H58.914V52.945H57.857V54H56.8V55.055H49.397V54H48.34V52.945H47.283V51.891H46.225V49.781H45.168V44.508H46.225Z"/>
+  <path d="M50.455 43.453H48.34V45.562H47.283V48.727H48.34V50.836H49.398V48.727H50.455V46.617H51.513V45.562H53.627V44.508H55.742V43.453H56.8V42.398H53.627V41.344H52.57V42.398H50.455V43.453Z"/>
+  <path d="M74.776 44.508H73.719V54H72.662V57.164H71.604V59.273H70.546V60.328H69.489V61.383H68.432V62.438H67.374V63.492H66.317V64.547H65.259V65.602H63.145V66.656H61.03V67.711H56.8V68.766H46.226L46.226 74.039H45.168V75.094H44.111V76.148H43.053V77.203H39.881V78.258H40.939V79.312H46.226V78.258H47.283V77.203H48.341V71.93H49.398V70.875H59.972V69.82H64.202V68.766H66.317V67.711H68.432V66.656H69.489V65.602H70.546V64.547H71.604V63.492H72.662V62.438H73.719V60.328H74.776V57.164H75.834V46.617H74.776V44.508Z"/>
+</svg>

package/system/components.css

@@ -79,6 +79,7 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
 .btn-icon { width: calc(var(--button-height) * var(--tw-fs, 1)) !important; padding: 0 !important; text-transform: none; letter-spacing: normal; }
 .btn-icon.btn-md { width: calc(var(--button-height-md) * var(--tw-fs, 1)) !important; }
 .btn-icon.btn-sm { width: calc(var(--button-height-sm) * var(--tw-fs, 1)) !important; }
+.btn-icon.btn-xs { width: calc(var(--button-height-xs) * var(--tw-fs, 1)) !important; }
 
 /* Layout-only modifier — full-width CTA */
 .btn-block { width: 100%; }
@@ -98,18 +99,17 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
 .btn-quiet.btn-danger, .btn-quiet.btn-info, .btn-quiet.btn-default {
   background: transparent; border-color: transparent; color: var(--button-ghost-fg);
 }
-.btn-quiet:hover:not(:disabled), .btn-quiet.btn-default:hover:not(:disabled) { background: var(--button-ghost-bg-hover); border-color: transparent; color: var(--button-ghost-fg-hover); }
+/* The hover fill and focus ring round off; an icon-only quiet button takes the square box. */
+.btn-quiet { border-radius: var(--button-radius); }
+.btn-quiet.btn-icon { height: calc(var(--button-height) * var(--tw-fs, 1)); }
 .btn-quiet.btn-info { color: var(--text); }
 /* --yellow-text-secondary, not --yellow-solid: solid is a fill step, and in
    light mode the brand yellow as a glyph colour on a light surface is
    unreadable. The text step carries a legible value in both modes. */
 .btn-quiet.btn-primary, .btn-quiet.btn-warning { color: var(--yellow-text-secondary); }
-.btn-quiet.btn-primary:hover:not(:disabled), .btn-quiet.btn-warning:hover:not(:disabled) { background: var(--yellow-component-bg-hover); border-color: transparent; color: var(--yellow-text-secondary); }
 .btn-quiet.btn-success { color: var(--green-solid); }
-.btn-quiet.btn-success:hover:not(:disabled) { background: var(--green-component-bg-hover); border-color: transparent; color: var(--green-solid); }
 .btn-quiet.btn-danger { color: var(--red-solid); }
-.btn-quiet.btn-danger:hover:not(:disabled) { background: var(--red-component-bg-hover); border-color: transparent; color: var(--red-solid); }
-.btn-quiet:disabled { opacity: 1; color: var(--solid); background: transparent; }
+.btn-quiet:is(:disabled, [aria-disabled="true"]) { opacity: 1; color: var(--solid); background: transparent; }
 
 /* Variants — token-driven. Foregrounds read from --*-foreground
    tokens in tokens.css so "what color on top" lives in one place.
@@ -121,17 +121,11 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
    accidental low-contrast bug. Never use these variants at xs/sm — the
    label drops below the large-text threshold. */
 .btn-primary  { background: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-primary-fg); }
-.btn-primary:hover:not(:disabled)  { background: var(--button-primary-bg-hover); border-color: var(--button-primary-bg-hover); }
 .btn-success  { background: var(--button-success-bg); border-color: var(--button-success-bg); color: var(--button-success-fg); }
-.btn-success:hover:not(:disabled)  { background: var(--button-success-bg-hover); border-color: var(--button-success-bg-hover); }
 .btn-danger   { background: var(--button-danger-bg);  border-color: var(--button-danger-bg);  color: var(--button-danger-fg); }
-.btn-danger:hover:not(:disabled)   { background: var(--button-danger-bg-hover);  border-color: var(--button-danger-bg-hover); }
 .btn-info     { background: var(--button-info-bg);    border-color: var(--button-info-bg);    color: var(--button-info-fg); }
-.btn-info:hover:not(:disabled)     { background: var(--button-info-bg-hover);    border-color: var(--button-info-bg-hover); }
 .btn-invert   { background: var(--text);          border-color: var(--border);        color: var(--invert-foreground); }
-.btn-invert:hover:not(:disabled)   { border-color: var(--border-hover); }
 .btn-default  { background: var(--button-default-bg); border-color: var(--border);        color: var(--button-default-fg); }
-.btn-default:hover:not(:disabled)  { background: var(--button-default-bg-hover); border-color: var(--border-hover); }
 
 /* Ghost — the third tier: text-only. No fill, no border at rest;
    hover paints the shared quiet fill and lifts the label a step
@@ -143,36 +137,55 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
    Disabled matches the quiet treatment: the colour drops to --solid,
    the box does not fade. */
 .btn-ghost    { background: var(--button-ghost-bg); border-color: transparent; color: var(--button-ghost-fg); }
-.btn-ghost:hover:not(:disabled)    { background: var(--button-ghost-bg-hover); border-color: transparent; color: var(--button-ghost-fg-hover); }
-.btn-ghost:disabled { opacity: 1; color: var(--solid); background: transparent; }
+.btn-ghost:is(:disabled, [aria-disabled="true"]) { opacity: 1; color: var(--solid); background: transparent; }
+
+/* Hover — pointer devices only, so a tapped button doesn't stay lit on touch.
+   Quiet comes after the filled variants, so a quiet info button keeps the
+   ghost hover. */
+@media (hover: hover) and (pointer: fine) {
+  .btn-primary:hover:not(:disabled, [aria-disabled="true"])  { background: var(--button-primary-bg-hover); border-color: var(--button-primary-bg-hover); }
+  .btn-success:hover:not(:disabled, [aria-disabled="true"])  { background: var(--button-success-bg-hover); border-color: var(--button-success-bg-hover); }
+  .btn-danger:hover:not(:disabled, [aria-disabled="true"])   { background: var(--button-danger-bg-hover);  border-color: var(--button-danger-bg-hover); }
+  .btn-info:hover:not(:disabled, [aria-disabled="true"])     { background: var(--button-info-bg-hover);    border-color: var(--button-info-bg-hover); }
+  .btn-invert:hover:not(:disabled, [aria-disabled="true"])   { border-color: var(--border-hover); }
+  .btn-default:hover:not(:disabled, [aria-disabled="true"])  { background: var(--button-default-bg-hover); border-color: var(--border-hover); }
+  .btn-ghost:hover:not(:disabled, [aria-disabled="true"])    { background: var(--button-ghost-bg-hover); border-color: transparent; color: var(--button-ghost-fg-hover); }
+  .btn-quiet:hover:not(:disabled, [aria-disabled="true"]) { background: var(--button-ghost-bg-hover); border-color: transparent; color: var(--button-ghost-fg-hover); }
+  .btn-quiet.btn-primary:hover:not(:disabled, [aria-disabled="true"]), .btn-quiet.btn-warning:hover:not(:disabled, [aria-disabled="true"]) { background: var(--yellow-component-bg-hover); border-color: transparent; color: var(--yellow-text-secondary); }
+  .btn-quiet.btn-success:hover:not(:disabled, [aria-disabled="true"]) { background: var(--green-component-bg-hover); border-color: transparent; color: var(--green-solid); }
+  .btn-quiet.btn-danger:hover:not(:disabled, [aria-disabled="true"]) { background: var(--red-component-bg-hover); border-color: transparent; color: var(--red-solid); }
+}
 
 /* States */
-/* Bare disabled buttons fade; hover styles above are gated on :not(:disabled).
+/* Bare disabled buttons fade. `aria-disabled="true"` counts as disabled, as
+   Base UI sets it on focusable disabled buttons; hover skips both.
    Submit buttons are never disabled at rest: the submit validates. A filled
    button is disabled only while its action runs (with a spinner) or once it
    is done, so it keeps its own fill and label at full opacity: "Verifying…"
    stays yellow, a finished 2FA "Verified" stays green with
    data-state="success". */
-button:disabled { opacity: 0.3; cursor: not-allowed; }
-:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-invert):not(.btn-quiet):disabled { opacity: 1; }
-.btn-default:not(.btn-quiet):disabled { opacity: 1; color: var(--solid); }
-/* An opaque double ring: a --bg gap, then --solid-hover, ≥3:1 on page and panels. */
-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+button:is(:disabled, [aria-disabled="true"]) { opacity: 0.3; cursor: not-allowed; }
+:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-invert):not(.btn-quiet):is(:disabled, [aria-disabled="true"]) { opacity: 1; }
+.btn-default:not(.btn-quiet):is(:disabled, [aria-disabled="true"]) { opacity: 1; color: var(--solid); }
+/* An opaque double ring: a --bg gap, then --solid-hover, ≥3:1 on page and panels.
+   Forced-colors mode drops box-shadow and paints the transparent outline. */
+button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-focus); }
 
 /* Loading state — hides label, paints a CSS spinner over the button */
-button.is-loading { color: transparent !important; position: relative; pointer-events: none; opacity: 0.75; }
+button.is-loading { color: transparent !important; position: relative; pointer-events: none; }
 button.is-loading::after {
   content: ''; position: absolute; inset: 0; margin: auto;
   width: 14px; height: 14px; border-radius: 50%;
   border: 1.5px solid currentColor; border-top-color: transparent;
+  color: var(--text);
   opacity: 0.75;
   animation: spin 0.7s linear infinite;
 }
 .btn-primary.is-loading::after { color: var(--primary-foreground); }
-.btn-success.is-loading::after,
-.btn-danger.is-loading::after,
-.btn-info.is-loading::after,
-.btn-invert.is-loading::after { color: var(--destructive-foreground); }
+.btn-success.is-loading::after { color: var(--button-success-fg); }
+.btn-danger.is-loading::after { color: var(--button-danger-fg); }
+.btn-info.is-loading::after { color: var(--button-info-fg); }
+.btn-invert.is-loading::after { color: var(--invert-foreground); }
 .btn-default.is-loading::after, .btn-ghost.is-loading::after { color: var(--text); }
 /* The spinner borrows currentColor, and .is-loading makes the label colour
    transparent — so a quiet button needs its own spinner colour or the control
@@ -186,14 +199,14 @@ button.is-loading::after {
    cards. Defined once here; do not redeclare it per card. */
 @keyframes spin { to { transform: rotate(360deg); } }
 
-/* Inputs/textareas/selects inherit nothing from the button reset.
-   These are dropped for safety in case they ever do. */
+/* Typed text never takes a label's tracking or case. Tailwind v4 preflight
+   sets letter-spacing: inherit on form controls, so reset both here. */
 input, textarea, select { text-transform: none; letter-spacing: normal; }
 
 
 /* ===========================================================
    Specimen header — the yellow-mono index marker that anchors
-   each preview card. 11 files used to duplicate this verbatim.
+   each preview card.
    =========================================================== */
 .head {
   display: flex; align-items: baseline; gap: 16px;
@@ -221,13 +234,11 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
               pages take neither: see .auth-page.
 
      .panel = quiet inline reference container. Sits ON --bg,
-              uses --bg-secondary so it stays recessive but
-              still bordered. Code blocks, info asides, sidebar
-              panels, callouts. Lower visual weight than a card.
+              reads --panel-* so consumers can retheme it apart
+              from cards; today the values match. Code blocks,
+              info asides, sidebar panels, callouts.
 
-   Both use the same hairline border + 8–10 px radius — the
-   ONLY thing that differs is the surface fill. Pick the role,
-   not the chrome.
+   Pick the role, not the chrome.
    =========================================================== */
 .card {
   background: var(--component-bg);
@@ -252,10 +263,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 /* ===========================================================
    Field primitives — production parity with app.put.io forms.
 
-   ONE source of truth for input chrome. Local preview files used
-   to redefine `.field` three times with different focus rings;
-   now they all inherit from here. To override per-screen, change
-   geometry (height/padding) — not the surface tokens.
+   ONE source of truth for input chrome. To override per-screen,
+   change geometry (height/padding) — not the surface tokens.
 
    Surface contract (filled, so a field reads on any surface):
      bg            → --field-bg          (= --bg-secondary)
@@ -290,10 +299,12 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
     background   var(--dur-fast) var(--ease-out);
 }
 .field::placeholder { color: var(--field-placeholder); }
-.field:hover { border-color: var(--field-border-hover); }
+@media (hover: hover) and (pointer: fine) {
+  .field:hover:where(:not(:disabled, [aria-disabled="true"])) { border-color: var(--field-border-hover); }
+}
 .field:focus,
 .field:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
   border-color: var(--field-border-focus);
   box-shadow: var(--field-ring);
 }
@@ -312,8 +323,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   border-color: var(--red-border);
   transition-duration: var(--dur-reveal);
 }
-.field[aria-invalid="true"]:hover {
-  border-color: var(--red-border-hover);
+@media (hover: hover) and (pointer: fine) {
+  .field[aria-invalid="true"]:hover { border-color: var(--red-border-hover); }
 }
 .field[aria-invalid="true"]:focus,
 .field[aria-invalid="true"]:focus-visible {
@@ -381,8 +392,10 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   text-decoration: none;
   white-space: nowrap;
 }
-.form-group > .label-action:hover,
-.form-group .label-row a:hover { color: var(--text); }
+@media (hover: hover) and (pointer: fine) {
+  .form-group > .label-action:hover,
+  .form-group .label-row a:hover { color: var(--text); }
+}
 
 /* ===========================================================
    Form feedback — one public recipe for block and inline status.
@@ -406,6 +419,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   color: var(--alert-info-body);
   font-size: var(--fs-ui);
   line-height: var(--lh-normal);
+  overflow-wrap: anywhere;
 }
 .form-callout[hidden] { display: none; }
 .form-callout > :is(i, svg) {
@@ -484,6 +498,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   gap: clamp(4px, 2vw, 8px);
   width: 100%;
   min-width: 0;
+  isolation: isolate;
 }
 .otp-input {
   position: absolute;
@@ -495,6 +510,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   margin: 0;
   padding: 0;
   border: 0;
+  font-size: var(--fs-field);
   opacity: 0;
   cursor: text;
 }
@@ -531,6 +547,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   border-color: var(--field-border-focus);
   box-shadow: var(--field-ring);
 }
+@media (forced-colors: active) {
+  .otp:focus-within .otp-slot[data-state="active"] { outline: 2px solid Highlight; }
+}
 .otp-separator {
   flex: 0 0 auto;
   padding: 0;
@@ -617,7 +636,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .auth-title {
   margin: 0 0 28px;
   font-size: var(--fs-title);
-  line-height: 30px;
+  line-height: calc(30 / 22);
   font-weight: var(--fw-medium);
   letter-spacing: var(--tracking-snug);
   color: var(--text);
@@ -667,9 +686,11 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   text-decoration: none;
   text-underline-offset: 3px;
 }
-.auth-links a:hover { text-decoration: underline; }
 .auth-links > a { color: var(--text-secondary); font-weight: inherit; }
-.auth-links > a:hover { color: var(--text); text-decoration: none; }
+@media (hover: hover) and (pointer: fine) {
+  .auth-links a:hover { text-decoration: underline; }
+  .auth-links > a:hover { color: var(--text); text-decoration: none; }
+}
 /* Two items split to the edges; a lone link or prompt centres. */
 .auth-links > :only-child { margin-inline: auto; text-align: center; }
 /* A back link leads with Phosphor's arrow-left, an inline SVG (or the icon font). */
@@ -685,7 +706,17 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   font-size: var(--fs-caption);
 }
 .auth-footer a { color: var(--text-secondary); text-decoration: none; }
-.auth-footer a:hover { color: var(--text); }
+@media (hover: hover) and (pointer: fine) {
+  .auth-footer a:hover { color: var(--text); }
+}
+.form-group > .label-action:focus-visible,
+.form-group .label-row a:focus-visible,
+.auth-links a:focus-visible,
+.auth-footer a:focus-visible {
+  outline: 2px solid var(--solid-hover);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
 /* A middot centres in the gap before each link after the first. The empty
    alt keeps it out of the link's accessible name. */
 .auth-footer > * + * { position: relative; }
@@ -742,25 +773,35 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
    `.on` is exactly the invented flag the state contract tells
    you not to add — prefer the attribute in new markup.
 
-   .checkbox  — div or <span>, data-state="checked" when on
+   .checkbox  — <button role="checkbox">, aria-checked or data-state="checked"
    input[type="checkbox"] — native inputs get the brand accent
-   .switch    — div, data-state="checked" when on
+   .switch    — <button role="switch">, aria-checked or data-state="checked".
+                Resize it with --switch-width and --switch-height; the thumb
+                and its travel follow.
    =========================================================== */
 .checkbox {
+  position: relative;
+  /* Buttons default to border-box; a span and a button draw the same box. */
+  box-sizing: content-box;
   width: 14px; height: 14px; flex-shrink: 0;
-  border: 1.5px solid var(--border-hover);
+  padding: 0;
+  border: 1.5px solid var(--solid);
   border-radius: var(--radius-sm);
   background: transparent;
+  cursor: pointer;
   transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
 }
+/* Pads the 14px box out to the 24px minimum target (WCAG 2.5.8). */
+.checkbox::before { content: ''; position: absolute; inset: -5px; }
 .checkbox.checked,
-.checkbox[data-state="checked"] {
+.checkbox[data-state="checked"],
+.checkbox[aria-checked="true"] {
   background: var(--yellow-solid);
   border-color: var(--yellow-solid);
-  position: relative;
 }
 .checkbox.checked::after,
-.checkbox[data-state="checked"]::after {
+.checkbox[data-state="checked"]::after,
+.checkbox[aria-checked="true"]::after {
   content: ''; position: absolute; left: 3px; top: 0;
   width: 5px; height: 9px;
   border: solid var(--primary-foreground); border-width: 0 2px 2px 0;
@@ -769,7 +810,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 input[type="checkbox"], input[type="radio"] { accent-color: var(--yellow-solid); cursor: pointer; }
 
 .switch {
-  width: 44px; height: 24px; flex-shrink: 0;
+  width: var(--switch-width, 44px); height: var(--switch-height, 24px); flex-shrink: 0;
+  padding: 0;
+  border: 0;
   border-radius: var(--radius-pill);
   background: var(--component-bg-active);
   position: relative; cursor: pointer;
@@ -777,13 +820,17 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--yellow-solid);
 }
 .switch::after {
   content: ''; position: absolute; top: 2px; left: 2px;
-  width: 20px; height: 20px; border-radius: 50%;
+  width: calc(var(--switch-height, 24px) - 4px); height: calc(var(--switch-height, 24px) - 4px); border-radius: 50%;
   background: var(--text);
-  transition: left var(--dur-fast) var(--ease-out);
+  transition: transform var(--dur-fast) var(--ease-out);
 }
 .switch.on,
-.switch[data-state="checked"] { background: var(--green-solid); }
+.switch[data-state="checked"],
+.switch[aria-checked="true"] { background: var(--green-solid); }
 /* The thumb rides the green selected track, so it takes the token for "what
    colour sits on green" rather than a raw white that no theme can reach. */
 .switch.on::after,
-.switch[data-state="checked"]::after { left: 22px; background: var(--button-success-fg); }
+.switch[data-state="checked"]::after,
+.switch[aria-checked="true"]::after { transform: translateX(calc(var(--switch-width, 44px) - var(--switch-height, 24px))); background: var(--button-success-fg); }
+.checkbox:focus-visible,
+.switch:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-focus); }

package/tokens/foundation.css

@@ -1,4 +1,7 @@
 /* -- Document base ------------------------------------------------- */
+/* Native scrollbars, controls and autofill follow the mode. */
+:root { color-scheme: light; }
+.dark { color-scheme: dark; }
 html {
   background: var(--html-bg);
   color: var(--text);
@@ -33,7 +36,6 @@ body {
 .num, .tabular {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  font-feature-settings: "tnum";
 }
 
 h1, .h1 {