@putdotio/design 5.2.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/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.2.0",
+  "version": "5.2.1",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",

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 {