@haruhimemoe/ui 0.11.2 → 0.12.0

package/CHANGELOG.md

@@ -6,6 +6,33 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.12.0] - 2026-10-04
+
+### Added
+
+- Motion tokens in `theme.css`: `duration-short` (150ms), `duration-medium` (250ms), `duration-long` (400ms), `ease-standard`, `ease-enter` and `ease-exit`. Every `transition-*` now reads `duration-short` and `ease-standard`, the values it had.
+- One reduced-motion rule: under `prefers-reduced-motion: reduce` every animation and transition finishes in 0.01ms and smooth scrolling turns off, in the kit and in the app's own markup. `data-motion="essential"` keeps an element's motion.
+- High contrast: under `prefers-contrast: more`, `c2`, `c3`, `c4` and `h1` get 8 points lighter and `h2` 4 points darker, through `--contrast-lift` (`0%` opts out).
+- The `coarse:` variant (`@media (pointer: coarse)`), for a touchscreen as the main pointer.
+- `useMotionAllowed()` (client): true when the visitor allows motion, false on the server, during hydration and under reduced motion, live. Lifted from haruhime.moe's homepage banner.
+- `Text` and `textClasses`: a line of text in six tones (`default` c2, `muted` c3, `subtle` c4, `error`, `warning` amber-300, `success`) and three sizes, for the error, warning and muted text apps wrote by hand.
+- `download` on `ButtonLink` and `TextLink` renders a plain `<a download>` (no prefetch, no client routing), for any value but `false`.
+- `hideLabel` on `TextInput`, `Select`, `Textarea`, `Checkbox` and `RadioGroup`: the label (legend for RadioGroup) is hidden visually but still names the control, with no gap left above it.
+- `ModBadge` `color` (`ModBadgeColor`): any of the six bucket colors, the ten @haruhimemoe/pool palette colors or `neutral`, overriding the color the mod's letters pick. A value outside the list falls back to the bucket.
+- 44px touch targets on a coarse pointer: chips and choice chips, checkbox and radio rows, Disclosure and HeaderMenu buttons and menu items, Tabs and LinkTabs, palette rows, FilterPanel's toggle, code copy buttons and ContentNav links.
+- Under more contrast, cards, chips, neutral badges and the tabs track get a `c4` edge, and code blocks, menus, the palette and its key hints a `c4` border. In forced colors, cards, chips, badges, mod badges and the tabs track keep a 1px border; an unavailable chip is GrayText.
+
+### Changed
+
+- `c2`, `c3`, `c4`, `h1` and `h2` are defined through lightness variables (`--c2-l`, `--c3-l` and `--c4-l` join `--h1-l` and `--h2-l`) plus the contrast lift. The default colors are unchanged.
+- `Notice`, field errors, `CharCounter`, `AsyncButton`'s failure text and the palette's input error use Text's tones, so they get one step lighter under more contrast.
+- **Button no longer stretches** in a flex column or a grid cell: `buttonClasses()` adds `w-fit` (Button, ButtonLink, AsyncButton, CopyButton, Pagination). Pass `className="w-full"` where a full-width button is wanted. `self-start` on buttons is now a no-op.
+- Buttons at `md` are 44px tall on touch screens (`coarse:h-11`). Secondary and ghost buttons get a `c4` edge under more contrast; every button keeps a 1px border in forced colors, and a disabled one uses the system's GrayText there.
+- `CopyMarkdownButton` follows Button's classes again (a test now pins its copy).
+- `BrandPage`'s file links are `TextLink download`.
+- Fields are 44px tall with 16px text on touch screens (no iOS zoom), checkbox and radio rows 44px tall, and a field's border is `c4` under more contrast.
+- `RangeSlider`'s value boxes also become 44px tall with 16px text on touch screens: they use `fieldClasses`, the same field look.
+
 ## [0.11.2] - 2026-10-04
 
 ### Fixed
@@ -165,7 +192,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `className` on every component, and the extras passed to `buttonClasses` and `fieldClasses`, merge with tailwind-merge: a caller's class replaces a built-in one that sets the same property (`fieldClasses("w-auto")` drops `w-full`).
 - Shell: `SiteHeader` (brand slot, nav links as data with `aria-current`, actions slot), `NavLinks`, `SiteFooter` (link columns as data, fine print, the haruhime.moe wordmark and a GitHub link) and `PageShell` (skip link, header, main, footer).
 
-[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.11.2...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.12.0...HEAD
+[0.12.0]: https://github.com/haruhimemoe/ui/compare/v0.11.2...v0.12.0
 [0.11.2]: https://github.com/haruhimemoe/ui/compare/v0.11.1...v0.11.2
 [0.11.1]: https://github.com/haruhimemoe/ui/compare/v0.11.0...v0.11.1
 [0.11.0]: https://github.com/haruhimemoe/ui/compare/v0.10.0...v0.11.0

package/README.md

@@ -6,7 +6,7 @@ React components for the haruhime.moe osu! tools on Next.js. It ships the osu!-w
 
 See every component in its states at [haruhime.moe/ui](https://www.haruhime.moe/ui). The page names the version it runs.
 
-This README describes version 0.11.0. Anything marked "since 0.11.0" is not in 0.10.0, anything marked "since 0.10.0" is not in 0.9.0, anything marked "since 0.9.0" is not in 0.8.0, anything marked "since 0.8.0" is not in 0.7.0, anything marked "since 0.7.0" is not in 0.6.0, anything marked "since 0.6.0" is not in 0.5.0, anything marked "since 0.5.0" is not in 0.4.0, anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
+This README describes version 0.12.0. Anything marked "since 0.12.0" is not in 0.11.x, anything marked "since 0.11.0" is not in 0.10.0, anything marked "since 0.10.0" is not in 0.9.0, anything marked "since 0.9.0" is not in 0.8.0, anything marked "since 0.8.0" is not in 0.7.0, anything marked "since 0.7.0" is not in 0.6.0, anything marked "since 0.6.0" is not in 0.5.0, anything marked "since 0.5.0" is not in 0.4.0, anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
 
 ## Requirements
 
@@ -77,13 +77,19 @@ const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito", display:
 }
 ```
 
-At some hues the defaults drop below 4.5:1 contrast, so check yours. Two variables fix it:
+At some hues the defaults drop below 4.5:1 contrast, so check yours. Two variables fix it (and `--c2-l`, `--c3-l`, `--c4-l` set the content steps' lightness, default `90%`, `80%`, `70%`):
 
 - `--h2-l` sets the lightness of `h2` (default `45%`). White text on `h2` (primary buttons, the skip link) is under 4.5:1 for hues from about 23 to 205. Use `42%` at hue 200, `35%` at hue 150, or `31%` for any hue.
 - `--h1-l` sets the lightness of `h1` (default `76%` since 0.7.0, `70%` before). At `76%`, `h1` text on `b5` (links in cards and prose) is at or above 4.5:1 at every hue. On `b4` ("Clear filters" in a filter panel) it dips under for hues from about 238 to 248. Use `77%` there.
 
 The theme is dark only (`color-scheme: dark`).
 
+**5. Motion, contrast and touch (since 0.12.0).** The theme follows three browser settings. There is no in-app toggle.
+
+- **Reduced motion.** When the visitor asks for reduced motion (`prefers-reduced-motion: reduce`), every animation and transition finishes in 0.01ms and smooth scrolling turns off, in the kit and in your own markup. Put `data-motion="essential"` on an element whose movement is the message (a progress indicator): it and its children keep their motion. Tokens: `duration-short` (150ms: hovers, presses, color changes, and the default for every `transition-*`), `duration-medium` (250ms: panels, dialogs), `duration-long` (400ms: large surfaces), with `ease-standard` (the default), `ease-enter` and `ease-exit`. For motion JavaScript drives (an autoplay video, a canvas), read `useMotionAllowed()`.
+- **More contrast.** Under `prefers-contrast: more`, `c2`, `c3`, `c4` and `h1` get 8 points lighter and `h2` 4 points darker. Cards, chips, secondary and ghost buttons, neutral badges and the tabs track get a `c4` edge; fields, code blocks and menus swap their `b3` border for `c4`. The lift adds to your `--h1-l` and `--h2-l`. Set `--contrast-lift: 0%` on `:root` to opt out.
+- **Touch.** `coarse:` is a variant for a touchscreen as the main pointer (`@media (pointer: coarse)`, the same query as Tailwind's `pointer-coarse:`). Buttons at `md`, chips, checkbox and radio rows, tabs, menu items, palette rows and fields grow to 44px there, and fields use 16px text so iOS Safari doesn't zoom in. Undo it for one control with a class like `coarse:h-9`. A touchscreen laptop driven by its trackpad keeps the dense layout.
+
 ## Example
 
 ```tsx
@@ -180,6 +186,8 @@ A pill button. Every native `<button>` prop.
 | `size` | `"md" \| "lg"` | `"md"` | Height, padding and text size. |
 | `type` | `"button" \| "submit" \| "reset"` | `"button"` | Never submits a form unless you ask for `"submit"`. |
 
+Since 0.12.0 a button sits at its content width (`w-fit`), also in a flex column or a grid cell; pass `className="w-full"` for a full-width one. At `md` it is 44px tall on a coarse pointer.
+
 #### `ButtonLink`
 
 A link that looks like `Button`. Every `next/link` prop (`href`, `prefetch`, `replace`, `scroll`, `target`, `rel`...), plus `variant` and `size` as on `Button`.
@@ -187,6 +195,13 @@ A link that looks like `Button`. Every `next/link` prop (`href`, `prefetch`, `re
 - A string `href` with a scheme (`https:`, `mailto:`) or starting with `//` renders a plain `<a>`, and `next/link`'s own props are dropped. The href is read the way the browser reads it: leading spaces don't count and a backslash counts as a slash, so `/\host` and `\\host` are off-site too (since 0.4.0).
 - That plain `<a>` with `target="_blank"` and no `rel` gets `rel="noreferrer"`. A `rel` you pass always wins. Internal links get only the `rel` you pass.
 
+Since 0.12.0, `download` (any value but `false`) renders a plain `<a download>`: no prefetch of an API route or a large file, no client routing. An external href also renders a plain `<a>`, with `rel="noreferrer"` in a new tab.
+
+```tsx
+<ButtonLink href="/api/me/export" download variant="secondary">Download my data</ButtonLink>
+<ButtonLink href="https://osu.ppy.sh" target="_blank">osu!</ButtonLink>
+```
+
 #### `buttonClasses`
 
 `buttonClasses({ variant?, size?, className? }): string` returns the `Button` classes, for elements the components don't cover. Types: `ButtonVariant`, `ButtonSize`, `ButtonClassOptions`.
@@ -233,6 +248,25 @@ A `status` region is only reliably announced when its content changes while it i
 
 An error notice (`role="alert"`) is announced either way.
 
+#### `Text` and `textClasses` (since 0.12.0)
+
+A line of text in a tone and a size, instead of hand-written color classes. Every native `<p>` prop. Types: `TextTone`, `TextSize`, `TextClassOptions`.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `tone` | `"default" \| "muted" \| "subtle" \| "error" \| "warning" \| "success"` | `"default"` | `c2`, `c3`, `c4`, rose, amber or emerald. The status tones get one step lighter under more contrast. |
+| `size` | `"xs" \| "sm" \| "base"` | `"sm"` | The text size. |
+| `bold` | `boolean` | `false` | `font-bold`. |
+| `as` | `"p" \| "span" \| "div"` | `"p"` | The element. |
+
+`textClasses({ tone, size, bold, className })` returns the same classes for an element `Text` can't be (an `<output>`, a `<time>`, a class map). `Text` is styling only, not a live region: a message that appears after an action still goes in `Notice live` or a mounted `role="status"`. Error and warning text must say what is wrong in words.
+
+```tsx
+<Text tone="muted">Last updated Oct 4.</Text>
+<Text role="alert" tone="error" bold>That pack key is not valid.</Text>
+<output className={textClasses({ tone: "success" })}>Saved.</output>
+```
+
 #### `Prose`
 
 Long-form typography for MDX, docs and legal pages. A `max-w-3xl` `<div>` that styles the `h2`, `h3`, `p`, `a`, `strong`, `ul`, `ol`, `li`, `code`, `pre`, `hr` and `table` elements inside it. Every native `<div>` prop. A `pre` scrolls sideways, so give it `tabIndex={0}` (through your Markdown renderer's `components` map) so keyboard users can reach the scroll; CSS can't add that.
@@ -281,9 +315,11 @@ Since 0.4.0. A text link: `next/link` inside the app, a plain `<a>` off-site (wi
 <TextLink href={`/packs/${pack.id}`} variant="plain">{pack.name}</TextLink>
 ```
 
+`download` works the same way (since 0.12.0): `<TextLink href="/brand/haruhime-palette.json" download>Download palette (JSON)</TextLink>`.
+
 #### `linkClasses`
 
-Since 0.4.0. `linkClasses({ variant?, className? }): string` returns the `TextLink` classes, for an element that should look like one (a `<button>` that reads as a link, say). Type: `LinkClassOptions`.
+Since 0.4.0. `linkClasses({ variant?, className? }): string` returns the `TextLink` classes, for an element that should look like one (a `<button>` that reads as a link, say). Type: `LinkClassOptions`. Downloads use `TextLink download` since 0.12.0.
 
 #### `Badge`
 
@@ -312,6 +348,21 @@ The panels are yours. `tabId(prefix, tab)` and `tabPanelId(prefix, tab)` (server
 <div role="tabpanel" id={tabPanelId("ed", tab)} aria-labelledby={tabId("ed", tab)}>...</div>
 ```
 
+#### `useMotionAllowed` (client, since 0.12.0)
+
+`useMotionAllowed()` is `true` when the visitor allows motion. It is `false` on the server, during hydration, without `matchMedia`, and while the visitor asks for reduced motion, and it follows the setting live. Use it for motion JavaScript drives (an autoplay video, a canvas, `element.animate()`). CSS transitions and animations already stop through the theme, so components don't need it for those.
+
+```tsx
+"use client";
+
+import { useMotionAllowed } from "@haruhimemoe/ui";
+
+export function Hero() {
+  const motion = useMotionAllowed();
+  return motion ? <video autoPlay loop muted playsInline src="/loop.webm" /> : null;
+}
+```
+
 ### Forms
 
 The fields render a label, the control, an optional hint and an optional error, wired together for screen readers. They are Server Components: you pass the `id`, so they need no generated ids.
@@ -322,11 +373,12 @@ Shared props (type `FieldProps`), taken by `TextInput`, `Textarea`, `Select` and
 | --- | --- | --- | --- |
 | `id` | `string` | required | The control's id. The label points at it. The hint gets `<id>-hint` and the error `<id>-error`. |
 | `label` | `ReactNode` | required | The visible label. |
+| `hideLabel` | `boolean` | `false` | Since 0.12.0. Hides the label visually; it still names the control. No gap is left above the control. |
 | `hint` | `ReactNode` | none | Help text in a `<div>`, linked with `aria-describedby`. On `Checkbox` the hint sits inline inside the label, so keep it to text there. |
 | `error` | `ReactNode` | none | Error text in a `role="status"` `<div>` (`text-rose-300`; `role="alert"` before 0.7.0), so a list of errors is fine. Sets `aria-invalid` and links the text with `aria-describedby`. |
 | `wrapperClassName` | `string` | none | Classes for the wrapper around the label, control, hint and error, for layout (`min-w-48 flex-1`). |
 
-`className` goes on the control itself. Your own `aria-describedby` is kept after the hint and error ids.
+`className` goes on the control itself. Your own `aria-describedby` is kept after the hint and error ids. Fields are 44px tall with 16px text on a coarse pointer (since 0.12.0).
 
 #### `TextInput`
 
@@ -355,6 +407,7 @@ Since 0.4.0. A native radio group on the `Checkbox` look: a `<fieldset>` named b
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `label` | `ReactNode` | required | The legend. |
+| `hideLabel` | `boolean` | `false` | Since 0.12.0. Hides the legend visually; it still names the group. |
 | `options` | `readonly RadioOption[]` | required | `{ value: string; label: ReactNode; hint?: ReactNode; disabled?: boolean }` for each radio. |
 | `value` / `defaultValue` | `string` | none | The picked value, held by you (`value`, with `onChange`) or by the group (`defaultValue`). |
 | `onChange` | `(value: string) => void` | none | Gets the picked option's value. |
@@ -694,6 +747,8 @@ One labelled row: the label above the controls on phones, in a `w-28` column on
 | --- | --- | --- | --- |
 | `label` | `ReactNode` | required | The row's label. Also names the group. |
 
+Not the same as the fields' `hideLabel`: inside a `FilterRow`, a `ChipGroup`, `ChoiceChips` or `RangeSlider`'s own `hideLabel` drops its label entirely, because the row names it instead.
+
 #### `FilterPanel` (client)
 
 A titled panel of `FilterRow`s with a live result count and a "Clear filters" button. On phones the rows fold behind a button next to the title; from `sm` up they always show. Every native `<section>` prop except `title`.
@@ -963,11 +1018,12 @@ A beatmap's CS, AR, OD, HP, BPM and length as a compact `<dl>`, in that order. S
 
 #### `ModBadge`
 
-A mod pool slot's pill (`NM1`, `HD2`, `TB`), colored by the first two letters: NM sky, HD amber, HR rose, DT and NC violet, FM emerald, TB orange, with dark text. Anything else is a `b3` pill. Every native `<span>` prop; `children` replace the text, and `className` recolors it (`bg-pink-300` for a custom bucket).
+A mod pool slot's pill (`NM1`, `HD2`, `TB`), colored by the first two letters: NM sky, HD amber, HR rose, DT and NC violet, FM emerald, TB orange, with dark text. Anything else is a `b3` pill. Every native `<span>` prop; `children` replace the text. A custom bucket picks its color with `color`: `<ModBadge mod={code} color={PALETTE[entry.color].toLowerCase() as ModBadgeColor} />`. `className` still recolors it (`bg-pink-300`) when `color`'s fixed list doesn't fit.
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `mod` | `string` | required | The mod or slot label. |
+| `color` | `ModBadgeColor` | from `mod` | Since 0.12.0. Overrides the bucket color: `sky`, `amber`, `rose`, `violet`, `emerald`, `orange` (the buckets), `green`, `teal`, `pink`, `lime`, `cyan`, `fuchsia`, `yellow`, `red`, `indigo`, `stone` (@haruhimemoe/pool's PALETTE, lowercased), or `neutral`. |
 
 #### `PlayerCard`
 
@@ -1283,8 +1339,10 @@ Since 0.4.0. `cx(...classes: ClassValue[]): string` is the class merger every co
 The target is WCAG 2.2 AA. House rules, which every component follows and your own code around them should too:
 
 - **Focus is always visible, and always the same.** The theme draws a 2px `h1` outline, offset 2px, on `:focus-visible`. Fields keep it (since 0.7.0; before, they swapped it for a 1px border change) and add an `h1` border. `RangeSlider` thumbs show a solid `h1` ring instead and keep a transparent outline, so Windows high contrast mode (forced colors) still paints one. Never `outline: none`.
-- **Targets are 24px or more** (WCAG 2.2 2.5.8): buttons are `h-9`, chips and tabs 24px tall, slider thumbs 24px (since 0.7.0), checkboxes and radios 24px and the `Disclosure` and `HeaderMenu` buttons at least 24px tall (since 0.8.0).
+- **Targets are 24px or more, 44px on coarse pointers** (WCAG 2.2 2.5.8, and 2.5.5 on touch): buttons are `h-9` (`h-11` on a touchscreen since 0.12.0), chips and tabs 24px tall, slider thumbs 24px (since 0.7.0), checkboxes and radios 24px and the `Disclosure` and `HeaderMenu` buttons at least 24px tall (since 0.8.0). On a coarse pointer (since 0.12.0) buttons, chips, checkbox and radio rows, tabs, menu items, palette rows, the filter panel's toggle, code copy buttons, content nav links and fields grow to 44px. Text links in running text stay as they are (2.5.8 exempts inline targets).
 - **Contrast is computed, not eyeballed.** The test suite checks `c1` on `h2`, `h1` on `b4` and `b5`, and the hue overrides under Setup; `StarRating` picks its text color by contrast. Text is never dimmed with `opacity` (a `text-c4` line at 70% opacity drops under 4.5:1): use a lighter palette step instead.
+- **Motion follows the browser.** Under `prefers-reduced-motion: reduce` every transition and animation finishes in 0.01ms (since 0.12.0); `data-motion="essential"` is the one way out. `useMotionAllowed` covers motion JavaScript drives.
+- **High contrast.** Under `prefers-contrast: more` the text steps lighten, `h2` darkens and shapes that rely on a background shade get a `c4` edge (since 0.12.0). Forced colors (Windows high contrast) keep a 1px border on buttons, cards, chips and badges.
 - **Color never carries meaning alone.** Accent links are underlined, a pressed `Chip` is `aria-pressed`, the current nav link is `aria-current`, `CharCounter` says "over the limit" in words, errors are text.
 - **Live regions exist before they speak.** `CopyButton`, `AsyncButton`, `CharCounter live`, `FilterPanel`'s count and `ReportDisclosure`'s outcome render their `<output>` or `role="status"` node up front, empty, and swap the text in. Field errors are `role="status"` (polite); `Notice live tone="error"` is the one `role="alert"`.
 - **Focus never falls to the body.** When the control you pressed goes away, focus moves somewhere sensible: `FilterPanel` to its heading, `Pagination` to "Page X of Y", `InlineConfirm` back to its trigger, `ReportDisclosure` to its outcome line. Pending buttons use `aria-disabled`, not `disabled`, so focus stays.

package/dist/components/actions/AsyncButton.d.ts

@@ -6,7 +6,7 @@
  *       A rejected action shows the failure message in rose.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { type ReactNode } from "react";
 import { type ButtonProps } from "../basics/Button.js";

package/dist/components/actions/AsyncButton.js

@@ -6,13 +6,14 @@
  *       A rejected action shows the failure message in rose.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { cx } from "../../utils/cx.js";
 import { Button } from "../basics/Button.js";
+import { TEXT_TONES } from "../basics/textTones.js";
 import { StatusOutput } from "./StatusOutput.js";
 import { useLatestStatus } from "./useLatestStatus.js";
 /**
@@ -44,5 +45,5 @@ export function AsyncButton({ action, pendingLabel, failedMessage = "Something w
             setPending(false);
         }
     };
-    return (_jsxs("div", { className: cx("flex flex-wrap items-center gap-3", wrapperClassName), children: [_jsx(Button, { "aria-disabled": pending || undefined, onClick: run, className: cx("aria-disabled:cursor-wait aria-disabled:opacity-70", className), ...props, children: pending && pendingLabel !== undefined ? pendingLabel : children }), _jsx(StatusOutput, { run: status?.run ?? null, children: status?.result.failed ? (_jsx("span", { className: "text-rose-300", children: status.result.message })) : (status?.result.message) })] }));
+    return (_jsxs("div", { className: cx("flex flex-wrap items-center gap-3", wrapperClassName), children: [_jsx(Button, { "aria-disabled": pending || undefined, onClick: run, className: cx("aria-disabled:cursor-wait aria-disabled:opacity-70", className), ...props, children: pending && pendingLabel !== undefined ? pendingLabel : children }), _jsx(StatusOutput, { run: status?.run ?? null, children: status?.result.failed ? (_jsx("span", { className: TEXT_TONES.error, children: status.result.message })) : (status?.result.message) })] }));
 }

package/dist/components/basics/AutoLink.d.ts

@@ -2,11 +2,12 @@
  * @file src/components/basics/AutoLink.tsx
  * @desc A link that picks its element from the href (internal): `next/link` for paths inside the
  *       app, a plain `<a>` for a string href that leaves it (a scheme like https: or mailto:, or
- *       //host). The plain `<a>` drops next/link's own props, and gets rel="noreferrer" when it
- *       opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
+ *       //host) or that is a download (`download` set, even to `""`): no prefetch and no client
+ *       routing for a file. The plain `<a>` drops next/link's own props, and gets rel="noreferrer"
+ *       when it opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import Link from "next/link.js";
 import type { ComponentProps } from "react";
@@ -16,6 +17,9 @@ export type AutoLinkProps = ComponentProps<typeof Link>;
  * @function AutoLink
  * @param props {AutoLinkProps} next/link props
  * @returns {JSX.Element} a `next/link` for internal paths (and URL objects), or a plain `<a>` for
- *          an external string href, with rel="noreferrer" when `target="_blank"` and no `rel`
+ *          an external string href or a download, with rel="noreferrer" when `target="_blank"`
+ *          and no `rel`. `download` only forces the plain `<a>` for a string `href`: a URL-object
+ *          href still renders `next/link` (next/link's own typed routes don't take `download`
+ *          either, so that pairing isn't one this component needs to special-case).
  */
 export declare function AutoLink({ href, target, rel, ...props }: AutoLinkProps): import("react").JSX.Element;

package/dist/components/basics/AutoLink.js

@@ -3,11 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @file src/components/basics/AutoLink.tsx
  * @desc A link that picks its element from the href (internal): `next/link` for paths inside the
  *       app, a plain `<a>` for a string href that leaves it (a scheme like https: or mailto:, or
- *       //host). The plain `<a>` drops next/link's own props, and gets rel="noreferrer" when it
- *       opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
+ *       //host) or that is a download (`download` set, even to `""`): no prefetch and no client
+ *       routing for a file. The plain `<a>` drops next/link's own props, and gets rel="noreferrer"
+ *       when it opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import Link from "next/link.js";
 import { isExternalHref } from "../../utils/href.js";
@@ -15,10 +16,16 @@ import { isExternalHref } from "../../utils/href.js";
  * @function AutoLink
  * @param props {AutoLinkProps} next/link props
  * @returns {JSX.Element} a `next/link` for internal paths (and URL objects), or a plain `<a>` for
- *          an external string href, with rel="noreferrer" when `target="_blank"` and no `rel`
+ *          an external string href or a download, with rel="noreferrer" when `target="_blank"`
+ *          and no `rel`. `download` only forces the plain `<a>` for a string `href`: a URL-object
+ *          href still renders `next/link` (next/link's own typed routes don't take `download`
+ *          either, so that pairing isn't one this component needs to special-case).
  */
 export function AutoLink({ href, target, rel, ...props }) {
-    if (typeof href === "string" && isExternalHref(href)) {
+    // `download` counts when set to anything but undefined or false: "" is the attribute's own
+    // boolean form. A download is a file, never a page to prefetch or route to.
+    const download = props.download !== undefined && props.download !== false;
+    if (typeof href === "string" && (isExternalHref(href) || download)) {
         const { as: _as, replace: _replace, scroll: _scroll, shallow: _shallow, passHref: _passHref, prefetch: _prefetch, locale: _locale, legacyBehavior: _legacyBehavior, onNavigate: _onNavigate, transitionTypes: _transitionTypes, ...anchorProps } = props;
         return (_jsx("a", { href: href, target: target, rel: rel ?? (target === "_blank" ? "noreferrer" : undefined), ...anchorProps }));
     }

package/dist/components/basics/Badge.d.ts

@@ -4,7 +4,7 @@
  *       so screen readers read it in place with the text around it. Server-safe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
 /** The badge's colors: neutral b3, accent h1, a warning amber, or a muted outline. */

package/dist/components/basics/Badge.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
-const BASE = "inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs";
+const BASE = "inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs forced-colors:border";
 // The looks the apps already use: pools' tags and warnings, and its header's beta pill.
 const TONES = {
-    neutral: "bg-b3 text-c2",
+    neutral: "bg-b3 text-c2 contrast-more:inset-ring contrast-more:inset-ring-c4",
     accent: "bg-h1 font-bold text-b6",
     warning: "bg-amber-300/20 font-bold text-amber-200",
-    muted: "border border-b3 bg-b5 font-bold text-c4 uppercase tracking-wide",
+    muted: "border border-b3 bg-b5 font-bold text-c4 uppercase tracking-wide contrast-more:border-c4",
 };
 /**
  * @function Badge

package/dist/components/basics/Disclosure.d.ts

@@ -5,7 +5,7 @@
  *       so its form fields keep their values. Uncontrolled by default, or controlled with `open`.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<div>` prop for the wrapper, plus the button's text and the panel. */

package/dist/components/basics/Disclosure.js

@@ -5,7 +5,7 @@
  *       so its form fields keep their values. Uncontrolled by default, or controlled with `open`.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,5 +26,5 @@ export function Disclosure({ summary, children, defaultOpen = false, open, onOpe
             setInner(!isOpen);
         onOpenChange?.(!isOpen);
     };
-    return (_jsxs("div", { className: cx("flex flex-col gap-2", className), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cx("inline-flex min-h-6 items-center gap-1 self-start font-bold text-c2 text-sm transition-colors hover:text-c1", buttonClassName), children: [summary, _jsx("span", { "aria-hidden": "true", children: isOpen ? "▴" : "▾" })] }), _jsx("div", { id: panelId, hidden: !isOpen, className: panelClassName, children: children })] }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-2", className), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cx("inline-flex coarse:min-h-11 min-h-6 items-center gap-1 self-start font-bold text-c2 text-sm transition-colors hover:text-c1", buttonClassName), children: [summary, _jsx("span", { "aria-hidden": "true", children: isOpen ? "▴" : "▾" })] }), _jsx("div", { id: panelId, hidden: !isOpen, className: panelClassName, children: children })] }));
 }

package/dist/components/basics/Notice.d.ts

@@ -6,7 +6,7 @@
  *       status region that mounts with its text already inside may not be announced.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
 /** The notice's color, and its live role: `info` is c3, `warning` amber, `error` rose. */

package/dist/components/basics/Notice.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from "../../utils/cx.js";
-const TONES = {
-    info: "text-c3",
-    warning: "text-amber-300",
-    error: "text-rose-300",
+import { textClasses } from "./textStyles.js";
+const NOTICE_TONES = {
+    info: "muted",
+    warning: "warning",
+    error: "error",
 };
 /**
  * @function Notice
@@ -13,7 +13,7 @@ const TONES = {
  */
 export function Notice({ tone = "info", live = false, as = "p", className, ...props }) {
     const role = live ? (tone === "error" ? "alert" : "status") : undefined;
-    const classes = cx("text-sm", TONES[tone], className);
+    const classes = textClasses({ tone: NOTICE_TONES[tone], className });
     if (as === "div") {
         // Same attributes either way; only the ref's element type differs.
         return _jsx("div", { role: role, className: classes, ...props });

package/dist/components/basics/Tabs.d.ts

@@ -7,7 +7,7 @@
  *       `aria-labelledby={tabId(idPrefix, tab)}`. Controlled. Moved from bb.haruhime.moe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 /** One tab: its id (part of the tab's and panel's ids) and its text. */

package/dist/components/basics/Tabs.js

@@ -7,7 +7,7 @@
  *       `aria-labelledby={tabId(idPrefix, tab)}`. Controlled. Moved from bb.haruhime.moe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,8 +40,8 @@ export function Tabs({ label, idPrefix, tabs, value, onChange, className, onKeyD
         onChange(tab.id);
         document.getElementById(tabId(idPrefix, tab.id))?.focus();
     };
-    return (_jsx("div", { role: "tablist", "aria-label": label, onKeyDown: move, className: cx("flex gap-1 rounded-full bg-b4 p-1", className), ...props, children: tabs.map((tab, index) => {
+    return (_jsx("div", { role: "tablist", "aria-label": label, onKeyDown: move, className: cx("flex gap-1 rounded-full bg-b4 p-1 contrast-more:inset-ring contrast-more:inset-ring-c4 forced-colors:border", className), ...props, children: tabs.map((tab, index) => {
             const selected = tab.id === value;
-            return (_jsx("button", { type: "button", role: "tab", id: tabId(idPrefix, tab.id), "aria-selected": selected, "aria-controls": tabPanelId(idPrefix, tab.id), tabIndex: index === at ? 0 : -1, onClick: () => onChange(tab.id), className: cx("flex-1 rounded-full px-4 py-1.5 font-bold text-sm transition-colors", selected ? "bg-h2 text-c1 forced-colors:underline" : "text-c3 hover:text-c1"), children: tab.label }, tab.id));
+            return (_jsx("button", { type: "button", role: "tab", id: tabId(idPrefix, tab.id), "aria-selected": selected, "aria-controls": tabPanelId(idPrefix, tab.id), tabIndex: index === at ? 0 : -1, onClick: () => onChange(tab.id), className: cx("coarse:min-h-11 flex-1 rounded-full px-4 py-1.5 font-bold text-sm transition-colors", selected ? "bg-h2 text-c1 forced-colors:underline" : "text-c3 hover:text-c1"), children: tab.label }, tab.id));
         }) }));
 }

package/dist/components/basics/Text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file src/components/basics/Text.tsx
+ * @desc A line of text in one of six tones (body, muted, subtle, error, warning, success) and
+ *       three sizes. Styling only: not a live region. A message that appears after an action
+ *       still goes in Notice live, StatusOutput or a mounted role="status". Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ComponentProps } from "react";
+import { type TextSize, type TextTone } from "./textStyles.js";
+/** Every native `<p>` prop (including `ref`), plus the element, tone, size and weight. */
+export type TextProps = ComponentProps<"p"> & {
+    /** The element: "p" (default), "span" or "div". */
+    as?: "p" | "span" | "div" | undefined;
+    tone?: TextTone | undefined;
+    size?: TextSize | undefined;
+    bold?: boolean | undefined;
+};
+/**
+ * @function Text
+ * @param props {TextProps} native paragraph props, plus as, tone (default "default"), size
+ *        (default "sm") and bold
+ * @returns {JSX.Element} a `<p>`, `<span>` or `<div>` in the tone's color and the size
+ */
+export declare function Text({ as, tone, size, bold, className, ...props }: TextProps): import("react").JSX.Element;

package/dist/components/basics/Text.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { textClasses } from "./textStyles.js";
+/**
+ * @function Text
+ * @param props {TextProps} native paragraph props, plus as, tone (default "default"), size
+ *        (default "sm") and bold
+ * @returns {JSX.Element} a `<p>`, `<span>` or `<div>` in the tone's color and the size
+ */
+export function Text({ as = "p", tone, size, bold, className, ...props }) {
+    const classes = textClasses({ tone, size, bold, className });
+    // Same attributes for every element; only the ref's element type differs.
+    if (as === "span")
+        return _jsx("span", { className: classes, ...props });
+    if (as === "div")
+        return _jsx("div", { className: classes, ...props });
+    return _jsx("p", { className: classes, ...props });
+}

package/dist/components/basics/buttonStyles.d.ts

@@ -3,11 +3,11 @@
  * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 /** The pill's colors: `primary` is h2 (h1 on hover), `secondary` b3, `ghost` transparent. */
 export type ButtonVariant = "primary" | "secondary" | "ghost";
-/** The pill's height, padding and text size: `md` is h-9 and text-sm, `lg` h-11 and text-base. */
+/** The pill's height, padding and text size: `md` is h-9 (h-11 on a coarse pointer) and text-sm, `lg` h-11 and text-base. */
 export type ButtonSize = "md" | "lg";
 /** Options for {@link buttonClasses}. */
 export type ButtonClassOptions = {

package/dist/components/basics/buttonStyles.js

@@ -3,19 +3,22 @@
  * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { cx } from "../../utils/cx.js";
-const BASE = "inline-flex items-center justify-center gap-2 rounded-full font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-h1 disabled:cursor-not-allowed disabled:opacity-50";
+// w-fit: a flex-column or grid item keeps its content width instead of stretching. The 1px
+// border shows only in forced colors, where the pill's background is dropped.
+const BASE = "inline-flex w-fit items-center justify-center gap-2 rounded-full font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-h1 disabled:cursor-not-allowed disabled:opacity-50 forced-colors:border forced-colors:disabled:text-[GrayText]";
 // Hover only when not disabled. `not-disabled:` (not `enabled:`) so links, which are never
-// :disabled, keep their hover colors.
+// :disabled, keep their hover colors. Under more contrast, b3 and a transparent pill get a c4
+// edge: b3 on b5 is under 1.5:1.
 const VARIANTS = {
     primary: "bg-h2 text-c1 not-disabled:hover:bg-h1 not-disabled:hover:text-b6",
-    secondary: "bg-b3 text-c1 not-disabled:hover:bg-b2",
-    ghost: "bg-transparent text-c2 not-disabled:hover:bg-b4 not-disabled:hover:text-c1",
+    secondary: "bg-b3 text-c1 not-disabled:hover:bg-b2 contrast-more:inset-ring contrast-more:inset-ring-c4",
+    ghost: "bg-transparent text-c2 not-disabled:hover:bg-b4 not-disabled:hover:text-c1 contrast-more:inset-ring contrast-more:inset-ring-c4",
 };
 const SIZES = {
-    md: "h-9 px-4 text-sm",
+    md: "h-9 px-4 text-sm coarse:h-11",
     lg: "h-11 px-6 text-base",
 };
 /**

package/dist/components/basics/cardStyles.d.ts

@@ -4,11 +4,12 @@
  *       title, plus the heading levels either one takes for that title.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 /** A heading level for a component's title: `h2` to `h6` (a page has one `h1`). */
 export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
-/** The panel: rounded, b4 background, p-5, c2 text. */
-export declare const CARD = "rounded-[10px] bg-b4 p-5 text-c2";
+/** The panel: rounded, b4 background, p-5, c2 text; a c4 edge under more contrast, a 1px border
+ *  in forced colors. */
+export declare const CARD = "rounded-[10px] bg-b4 p-5 text-c2 contrast-more:inset-ring contrast-more:inset-ring-c4 forced-colors:border";
 /** The panel's title: bold c1 at text-lg. */
 export declare const CARD_HEADING = "font-bold text-c1 text-lg";

package/dist/components/basics/cardStyles.js

@@ -4,9 +4,10 @@
  *       title, plus the heading levels either one takes for that title.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
-/** The panel: rounded, b4 background, p-5, c2 text. */
-export const CARD = "rounded-[10px] bg-b4 p-5 text-c2";
+/** The panel: rounded, b4 background, p-5, c2 text; a c4 edge under more contrast, a 1px border
+ *  in forced colors. */
+export const CARD = "rounded-[10px] bg-b4 p-5 text-c2 contrast-more:inset-ring contrast-more:inset-ring-c4 forced-colors:border";
 /** The panel's title: bold c1 at text-lg. */
 export const CARD_HEADING = "font-bold text-c1 text-lg";

package/dist/components/basics/textStyles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/basics/textStyles.ts
+ * @desc textClasses: Text's look as a class string, for elements Text can't be (an <output>, a
+ *       <time>, a <li>, a class map). Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import { type TextSize, type TextTone } from "./textTones.js";
+export type { TextSize, TextTone } from "./textTones.js";
+/** Options for {@link textClasses}. */
+export type TextClassOptions = {
+    /** "default" (c2), "muted" (c3), "subtle" (c4), "error", "warning" or "success". */
+    tone?: TextTone | undefined;
+    /** "xs", "sm" (default) or "base". */
+    size?: TextSize | undefined;
+    /** font-bold. */
+    bold?: boolean | undefined;
+    className?: string | undefined;
+};
+/**
+ * @function textClasses
+ * @param opts {TextClassOptions} tone (default "default"), size (default "sm"), bold and extra
+ *        classes
+ * @returns {string} the text classes, with the caller's className last (it replaces a built-in
+ *          class that sets the same property)
+ */
+export declare const textClasses: ({ tone, size, bold, className, }?: TextClassOptions) => string;