@haruhimemoe/ui 0.5.1 → 0.7.0

package/CHANGELOG.md

@@ -6,6 +6,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-10-03
+
+### Changed
+
+- Accessibility pass (WCAG 2.2 AA). Fields keep the theme's 2px focus outline instead of hiding it behind a 1px border change. `RangeSlider` thumbs and chips are 24px, the minimum target size. The default `--h1-l` is `76%` (was `70%`), so `h1` text on `b5` clears 4.5:1 at every hue; pink gets a touch lighter at the default hue. `StarRating` picks its text color by contrast (white on the 6.5 to 7 star violet band, where gold was 3.9:1). `Table`'s scrolling wrapper is a focusable `<section>` named by the caption or `scrollLabel`. `SiteFooter` holds its columns in one `<nav>` (`navLabel`, default "Footer"), each column a `<section>` with its title as a heading (`headingLevel`, default 2), instead of a `<nav>` per column. `ReportDisclosure` keeps its status line mounted from the start and moves focus to it after a send. Field errors are `role="status"`, not `role="alert"`; radios no longer carry `aria-invalid` (the group describes the error). Text-only nav entries drop `aria-disabled`. `BeatmapStats` reads full stat names to screen readers.
+
+### Added
+
+- `CharCounter`'s `live` prop: announces only the over-limit text.
+- `Table`'s `scrollLabel`, `SiteFooter`'s `navLabel` and `headingLevel`.
+- README: an "Accessibility" section with the house rules every component follows.
+
+## [0.6.0] - 2026-09-28
+
+### Added
+
+- `SiteFooter`'s `tools` prop: a "haruhime tools" column linking the other live haruhime.moe tools (packs, pools, bb) and "All tools" on www, with the current tool left out. `HARUHIME_TOOLS` and `haruhimeToolsColumn` export the same data for a custom footer.
+
 ## [0.5.1] - 2026-09-28
 
 ### Security
@@ -92,7 +110,9 @@ 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.5.1...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.7.0...HEAD
+[0.7.0]: https://github.com/haruhimemoe/ui/compare/v0.6.0...v0.7.0
+[0.6.0]: https://github.com/haruhimemoe/ui/compare/v0.5.1...v0.6.0
 [0.5.1]: https://github.com/haruhimemoe/ui/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/haruhimemoe/ui/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/haruhimemoe/ui/compare/v0.3.0...v0.4.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.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.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
 
@@ -80,7 +80,7 @@ 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:
 
 - `--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 `70%`). `h1` text on `b4` (card links, "Clear filters") is under 4.5:1 for hues from about 222 to 283. Use `77%` there.
+- `--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`).
 
@@ -234,7 +234,7 @@ An error notice (`role="alert"`) is announced either way.
 
 #### `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.
+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.
 
 The first element inside gets no top margin (`[&>:first-child]:mt-0`, since 0.2.0), so a heading that opens the block sits flush with what's above it instead of taking the `h2` or `h3` gap. The rule reaches direct children only. If you wrap the content in `<section>`s, the heading at the top of the first section keeps its margin. Reach one level deeper for that:
 
@@ -322,7 +322,7 @@ 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. |
 | `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="alert"` `<div>` (`text-rose-300`), so a list of errors is fine. Sets `aria-invalid` and links the text with `aria-describedby`. |
+| `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.
@@ -358,7 +358,7 @@ Since 0.4.0. A native radio group on the `Checkbox` look: a `<fieldset>` named b
 | `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. |
 | `name` | `string` | generated | The radios' name, for a form. |
-| `hint`, `error` | `ReactNode` | none | Under the options, linked to the group with `aria-describedby`. An error is a `role="alert"` and marks the radios `aria-invalid`. |
+| `hint`, `error` | `ReactNode` | none | Under the options, linked to the group with `aria-describedby`. An error is a `role="status"` line (since 0.7.0; before, `role="alert"` and `aria-invalid` on each radio). |
 | `required` | `boolean` | `false` | Every radio gets `required`. |
 
 #### `TypeToConfirm` (client)
@@ -386,11 +386,14 @@ Since 0.4.0. A confirm for something that can't be undone: a `<form>` whose subm
 
 Since 0.5.0. How much of a length limit a text uses: "1,234 / 60,000 characters" in `c3`, then bold rose with ": 1,500 over the limit" once past it (at the limit is not over). You count, so any rule works (a string's length, a BBCode counter). Every native `<p>` prop except `children`.
 
+With `live` (since 0.7.0) an `<output>` live region inside it announces "1,500 over the limit" when the count goes over and nothing while under, so typing isn't read out number by number.
+
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `count` | `number` | required | How many are used. |
 | `limit` | `number` | required | The most allowed. |
 | `unit` | `string` | `"characters"` | What is counted. |
+| `live` | `boolean` | `false` | Announce the over-limit text to screen readers (since 0.7.0). |
 
 #### `VisibilitySelect` (client)
 
@@ -420,7 +423,7 @@ Since 0.5.0. Who can see something: private, unlisted or public, each with a lin
 
 #### `ReportDisclosure` (client)
 
-Since 0.5.0. "Report this": a `Disclosure` holding a reason `Textarea` (required) and a submit button. `onSubmit` gets the trimmed reason and says how it went: `{ ok: true, message? }` replaces the form with a `role="status"` line (your message, like "You already reported it.", or `sentMessage`); `{ ok: false, message }` shows the message as the field's error and keeps what was typed for a retry. A throw reads as `failedMessage`. One send at a time. Type: `ReportResult`.
+Since 0.5.0. "Report this": a `Disclosure` holding a reason `Textarea` (required) and a submit button. `onSubmit` gets the trimmed reason and says how it went: `{ ok: true, message? }` replaces the form with a `role="status"` line (your message, like "You already reported it.", or `sentMessage`), which takes focus, since the button that had it is gone (since 0.7.0; the line is mounted empty from the start, so it is announced); `{ ok: false, message }` shows the message as the field's error and keeps what was typed for a retry. A throw reads as `failedMessage`. One send at a time. Type: `ReportResult`.
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
@@ -433,7 +436,7 @@ Since 0.5.0. "Report this": a `Disclosure` holding a reason `Textarea` (required
 | `failedMessage` | `ReactNode` | `"Couldn't send the report. Try again."` | Said when `onSubmit` throws. |
 | `minLength`, `maxLength` | `number` | `3`, none | The reason's length limits. |
 | `rows` | `number` | `3` | The field's height. |
-| `className` | `string` | none | Classes for the wrapper (or the status line once sent). |
+| `className` | `string` | none | Classes for the wrapper around the disclosure and the status line. |
 
 ```tsx
 <ReportDisclosure
@@ -448,7 +451,7 @@ Since 0.5.0. "Report this": a `Disclosure` holding a reason `Textarea` (required
 
 #### `fieldClasses`
 
-`fieldClasses(className?: string): string` returns the field look (`b6` background, `b3` border, `h1` border on focus, rose border when `aria-invalid`, and an `h1` border and ring when an invalid field has focus). Use it on a bare control that labels itself:
+`fieldClasses(className?: string): string` returns the field look (`b6` background, `b3` border, `h1` border plus the theme's 2px `h1` outline on focus, rose border when `aria-invalid`, and the `h1` border back when an invalid field has focus; before 0.7.0 the outline was hidden and only the border changed). Use it on a bare control that labels itself:
 
 ```tsx
 <select aria-label="Move to" className={fieldClasses("w-auto")}>...</select>
@@ -750,7 +753,7 @@ The `<ul>` of links `SiteHeader` uses, for building your own header. Put it insi
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
-| `links` | `readonly SiteLinkItem[]` | required | The entries. |
+| `links` | `readonly SiteLinkItem[]` | required | The entries. An entry without an `href` renders as dimmed text with its `note` (no `aria-disabled` since 0.7.0: it isn't a control). |
 | `align` | `"start" \| "center"` | `"start"` | As `navAlign` on `SiteHeader`. |
 
 #### `SiteFooter`
@@ -759,7 +762,10 @@ Link columns, an extra slot, fine print, the haruhime.moe wordmark, a GitHub ico
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
-| `columns` | `readonly SiteFooterColumn[]` | `[]` | Each column is a `<nav>` named by its title, which shows above the list. Up to four columns side by side from `sm` up. |
+| `columns` | `readonly SiteFooterColumn[]` | `[]` | The columns sit in one `<nav>` (`navLabel`); each is a `<section>` headed by its title. Up to four columns side by side from `sm` up. Before 0.7.0 each column was its own `<nav>`. |
+| `navLabel` | `string` | `"Footer"` | The nav landmark's name. Keep it different from `SiteHeader`'s `navLabel`, so the two landmarks tell apart (since 0.7.0). |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | The column titles' heading level (since 0.7.0). |
+| `tools` | `HaruhimeToolsOptions` | none | Adds a "haruhime tools" column: the other live haruhime.moe tools as "name: blurb" links, then "All tools" on www. Options: `current` (the tool this footer is on, left out), `title` (`"haruhime tools"`), `allLabel` (`"All tools"`, `false` drops it), `allHref` (`"https://www.haruhime.moe"`), `position` (where among `columns`, default `1`, clamped). Since 0.6.0. |
 | `extra` | `ReactNode` | none | Shown above the fine print, e.g. a "clear local data" button. |
 | `finePrint` | `ReactNode` | none | One line of small print, in a `<p>`. |
 | `parentLink` | `boolean` | `true` | Show the haruhime.moe wordmark linking the parent site. With it, the last row holds the wordmark and the icons, and the fine print sits above. Without it, the fine print shares the row with the icons. |
@@ -769,6 +775,8 @@ Link columns, an extra slot, fine print, the haruhime.moe wordmark, a GitHub ico
 | `discordHref` | `string` | none | Where the Discord icon links, such as your server's invite (`https://discord.gg/...`). Without it there is no Discord icon. The icon sits before the GitHub icon at the same size. It stays white (`text-c1`) and dims on hover instead of changing color, since Discord's brand guidelines ask that the logo not be recolored. Since 0.3.0. |
 | `discordLabel` | `string` | `"Discord"` | The Discord link's accessible name. Since 0.4.0. |
 
+`HARUHIME_TOOLS` (each `{ id, name, href, blurb }`, type `HaruhimeTool`, ids `HaruhimeToolId`: `"packs" | "pools" | "bb"`) and `haruhimeToolsColumn(options)` (the same column as plain data, for a footer you lay out yourself) are exported too. Since 0.6.0. They are the one place outside the wordmark that names the haruhime.moe tools: a tool joins the list when it goes live.
+
 #### `LinkTabs`
 
 Since 0.4.0. A row of link tabs (Pools / Maps, All / Hidden): a named `<nav>` with a list of pill links. The current one gets `aria-current="page"` and a `b3` pill (underlined in forced colors mode). These are links, not ARIA tabs, since each loads its own URL. A Server Component: you say which is current. Every native `<nav>` prop except `children`. Type: `LinkTabItem`.
@@ -810,7 +818,7 @@ Since 0.4.0. Display pieces for beatmaps and mod pools. They take plain values (
 
 #### `StarRating`
 
-A star-rating pill colored on osu!'s difficulty spectrum: "★ 5.23" on the rating's color, dark text up to 6.5 and pale yellow above. The spectrum is osu!'s own, the same at every `--hue`, so the pill sets its colors inline. Screen readers hear "5.23 stars" and the `label` after it. Every native `<span>` prop except `children`; a `style` you pass merges over the colors.
+A star-rating pill colored on osu!'s difficulty spectrum: "★ 5.23" on the rating's color, dark text up to 6.5 and osu!'s pale yellow above, except where neither clears 4.5:1 on the pill (the violet band around 6.5 to 7 stars), which gets white (since 0.7.0). The spectrum is osu!'s own, the same at every `--hue`, so the pill sets its colors inline. Screen readers hear "5.23 stars" and the `label` after it. Every native `<span>` prop except `children`; a `style` you pass merges over the colors.
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
@@ -820,7 +828,7 @@ A star-rating pill colored on osu!'s difficulty spectrum: "★ 5.23" on the rati
 
 #### `BeatmapStats`
 
-A beatmap's CS, AR, OD, HP, BPM and length as a compact `<dl>`, in that order. Stats you leave out (or that aren't finite) don't show. CS, AR, OD, HP and BPM are `<abbr>`s titled with their full names. Every native `<dl>` prop except `children`. Type: `BeatmapStatKey`.
+A beatmap's CS, AR, OD, HP, BPM and length as a compact `<dl>`, in that order. Stats you leave out (or that aren't finite) don't show. CS, AR, OD, HP and BPM are `<abbr>`s titled with their full names; screen readers get the full name instead of the letters (since 0.7.0). Every native `<dl>` prop except `children`. Type: `BeatmapStatKey`.
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
@@ -862,7 +870,7 @@ Since 0.4.0. `Table`, `THead`, `TBody`, `Th` and `Td` give a data table the apps
 
 | Component | Extra props | What it renders |
 | --- | --- | --- |
-| `Table` | `caption?: ReactNode`, `hideCaption?: boolean` (default `false`), `wrapperClassName?: string` | A `<div>` that scrolls sideways on phones, around the `<table>`. `className` and `ref` go on the `<table>`. The caption names the table; `hideCaption` keeps it for screen readers only, when a heading already shows. |
+| `Table` | `caption?: ReactNode`, `hideCaption?: boolean` (default `false`), `wrapperClassName?: string`, `scrollLabel?: string` (default `"Table"`) | A `<section>` that scrolls sideways on phones, around the `<table>`. It takes keyboard focus (`tabindex="0"`) so the scroll is reachable without a mouse, and is named by the caption, or by `scrollLabel` without one (since 0.7.0; a plain `<div>` before). `className` and `ref` go on the `<table>`. The caption names the table; `hideCaption` keeps it for screen readers only, when a heading already shows. |
 | `THead` | none | A `<thead>` in `c3`, `text-xs`, uppercase. |
 | `TBody` | none | A `<tbody>` whose rows get a `b4` top border. Add `[&>tr]:align-top` for rows of mixed height. |
 | `Th` | `numeric?: boolean` | A `<th>` with `scope="col"` by default. With `scope="row"` it is a row's heading, in bold `c1`. |
@@ -878,18 +886,20 @@ Since 0.4.0. `cx(...classes: ClassValue[]): string` is the class merger every co
 
 ## Accessibility
 
-- Every component is checked in the test suite with axe-core's WCAG 2.0, 2.1 and 2.2 A and AA rules (all but color contrast, which needs a real browser). Interactive ones also have keyboard tests. The tests also calculate the contrast figures under Setup (`c1` on `h2`, `h1` on `b4`, and the `--h1-l` and `--h2-l` values).
-- Focus is always visible: the theme draws an `h1` outline on `:focus-visible`. Fields show focus with an `h1` border instead (plus an `h1` ring when invalid), and `RangeSlider` thumbs with a solid `h1` ring. Those keep a transparent outline, so Windows high contrast mode (forced colors) still shows focus.
-- In forced colors mode, a pressed `Chip` takes the system highlight colors, so on and off still look different.
-- Form fields link their label, hint and error. An error sets `aria-invalid` and is announced.
-- `Chip` uses `aria-pressed`. `ChipGroup`, `RangeSlider` and `FilterRow` are fieldsets named by their label. Inside a `FilterRow`, `hideLabel` leaves the naming to the row, so each row is announced once. `RangeSlider`'s thumbs are native range inputs with `aria-valuetext`, so "10+" reads as it shows.
-- `FilterPanel`'s phone toggle carries `aria-expanded` and `aria-controls`. The result count is a live region. When "Clear filters" disappears after use, focus moves to the panel's heading instead of getting lost.
-- `CopyButton` announces "Copied." (or the failure) through an `<output>`, on every press.
-- `Pagination` moves focus to its "Page X of Y" text when the link you pressed goes away on the first or last page.
-- `Tabs` follows the ARIA tabs pattern: one tab in the Tab order, arrows, Home and End to move, `aria-controls` to its panel. `ReportDisclosure` says the outcome in a `role="status"` line and keeps a failed reason in the field.
-- `SiteHeader` marks the current page with `aria-current`. `PageShell` starts with a skip link to `<main>`.
-- `DiscordIcon` and `GitHubIcon` are hidden from screen readers by default: give the link around each one an `aria-label`, as `SiteFooter` does.
-- You supply the text, so you also supply labels: give icon-only buttons an `aria-label`, and keep `label` props meaningful.
+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).
+- **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.
+- **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.
+- **Landmarks are few and named.** `PageShell` gives a skip link and `<main>`; `SiteHeader` one `<nav>` (`navLabel`, default "Main"); `SiteFooter` one `<nav>` (`navLabel`, default "Footer") with a headed `<section>` per column; `Pagination` and `LinkTabs` are labelled `<nav>`s. Give two of a kind different labels.
+- **Scrollable regions take focus.** `Table`'s wrapper is a focusable named section. Do the same for a `pre` inside `Prose`.
+- **Native first.** Fields are native inputs, selects and textareas; radios and checkboxes are native with a visible label; `RangeSlider`'s thumbs are native range inputs with `aria-valuetext` ("10+" reads as it shows); `Disclosure` and `HeaderMenu` are buttons with `aria-expanded` and `aria-controls`; `Tabs` follows the ARIA tabs pattern (one tab in the Tab order, arrows, Home and End, `aria-controls`). ARIA only where HTML has no element.
+- **Groups are named.** `ChipGroup`, `RangeSlider`, `RadioGroup` and `FilterRow` are fieldsets named by their label. Inside a `FilterRow`, `hideLabel` leaves the naming to the row, so each row is announced once.
+- **Icons are decorative; links and buttons have names.** `DiscordIcon` and `GitHubIcon` are hidden from screen readers; give the link around each one an `aria-label`, as `SiteFooter` does. Give icon-only buttons an `aria-label`, and keep `label` props meaningful. `BeatmapStats` reads "Circle size" where it shows "CS".
+- **Tested.** Every component is checked with axe-core's WCAG 2.0, 2.1 and 2.2 A and AA rules in the test suite (color contrast excepted: that needs a real browser, and the sites run a Playwright axe pass with it on). Interactive ones also have keyboard tests.
 
 ## Compatibility
 

package/dist/components/filters/RangeSlider.d.ts

@@ -7,7 +7,7 @@
  *       lives in rangeMath.ts and the boxes in RangeBox.tsx.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { HTMLAttributes } from "react";
 import { type GroupFrameProps } from "./GroupFrame.js";

package/dist/components/filters/RangeSlider.js

@@ -7,7 +7,7 @@
  *       lives in rangeMath.ts and the boxes in RangeBox.tsx.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,12 +17,12 @@ import { GroupFrame } from "./GroupFrame.js";
 import { RangeBox } from "./RangeBox.js";
 import { defaultParse, dragEnd, nextRange, normalizeRange, percent, rangeBounds, readDraft, thumbTarget, } from "./rangeMath.js";
 // Native range inputs, stacked on one track. Only the thumbs take the pointer, so either thumb
-// can be dragged wherever they sit. The focus ring goes on the thumb, not the full-width input:
+// can be dragged wherever they sit. Thumbs are 24px (size-6): WCAG 2.2's minimum target size. The focus ring goes on the thumb, not the full-width input:
 // solid h1, so it clears 3:1 on the panel. Forced-colors mode drops box-shadow rings, so the
 // input keeps a transparent outline (`outline-hidden`) that mode paints instead.
-const RANGE = "pointer-events-none absolute inset-x-0 top-1/2 h-4 w-full -translate-y-1/2 appearance-none bg-transparent focus-visible:outline-hidden disabled:cursor-not-allowed " +
-    "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-h1 [&::-webkit-slider-thumb]:bg-c1 " +
-    "[&::-moz-range-track]:bg-transparent [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-h1 [&::-moz-range-thumb]:bg-c1 " +
+const RANGE = "pointer-events-none absolute inset-x-0 top-1/2 h-6 w-full -translate-y-1/2 appearance-none bg-transparent focus-visible:outline-hidden disabled:cursor-not-allowed " +
+    "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-h1 [&::-webkit-slider-thumb]:bg-c1 " +
+    "[&::-moz-range-track]:bg-transparent [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-6 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-h1 [&::-moz-range-thumb]:bg-c1 " +
     "focus-visible:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-h1 focus-visible:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-h1";
 /**
  * @function RangeSlider
@@ -94,5 +94,5 @@ export function RangeSlider({ label, min: rawMin, max: rawMax, step: rawStep = 1
     const box = (end) => (_jsx(RangeBox, { label: end === "low" ? minLabel : maxLabel, text: end === "low" ? format(low) : highOpen ? openText : format(high), inputMode: inputMode, disabled: disabled, onCommit: commitDraft(end) }));
     const lowPercent = percent(low, bounds);
     const highPercent = highOpen ? 100 : percent(high, bounds);
-    return (_jsx(GroupFrame, { label: label, disabled: disabled, className: cx("disabled:opacity-50", className), ...props, children: _jsxs("div", { className: "flex items-center gap-3", children: [box("low"), _jsxs("div", { className: "relative h-5 min-w-0 flex-1", children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-b3" }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-x-2 top-1/2 h-1.5 -translate-y-1/2", children: _jsx("div", { "data-range-fill": "", className: "absolute inset-y-0 rounded-full bg-h1 forced-colors:bg-[Highlight]", style: { left: `${lowPercent}%`, right: `${100 - highPercent}%` } }) }), _jsx("input", { ...thumb("low"), className: cx(RANGE, lowPercent > 50 && "z-10") }), _jsx("input", { ...thumb("high"), className: RANGE })] }), box("high")] }) }));
+    return (_jsx(GroupFrame, { label: label, disabled: disabled, className: cx("disabled:opacity-50", className), ...props, children: _jsxs("div", { className: "flex items-center gap-3", children: [box("low"), _jsxs("div", { className: "relative h-6 min-w-0 flex-1", children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-b3" }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-x-3 top-1/2 h-1.5 -translate-y-1/2", children: _jsx("div", { "data-range-fill": "", className: "absolute inset-y-0 rounded-full bg-h1 forced-colors:bg-[Highlight]", style: { left: `${lowPercent}%`, right: `${100 - highPercent}%` } }) }), _jsx("input", { ...thumb("low"), className: cx(RANGE, lowPercent > 50 && "z-10") }), _jsx("input", { ...thumb("high"), className: RANGE })] }), box("high")] }) }));
 }

package/dist/components/filters/chipStyles.d.ts

@@ -5,10 +5,10 @@
  *       colors, so on and off still look different.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 /** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
-export declare const CHIP = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors";
+export declare const CHIP = "rounded-full px-2.5 py-1 font-bold text-xs transition-colors";
 /** A chip that is on (pressed or checked). */
 export declare const CHIP_ON = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
 /** A chip that is off. */

package/dist/components/filters/chipStyles.js

@@ -5,10 +5,11 @@
  *       colors, so on and off still look different.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 /** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
-export const CHIP = "rounded-full px-2.5 py-0.5 font-bold text-xs transition-colors";
+// py-1 with the text-xs line height makes a 24px pill: WCAG 2.2's minimum target size.
+export const CHIP = "rounded-full px-2.5 py-1 font-bold text-xs transition-colors";
 /** A chip that is on (pressed or checked). */
 export const CHIP_ON = "bg-h1 text-b6 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
 /** A chip that is off. */

package/dist/components/forms/CharCounter.d.ts

@@ -5,7 +5,7 @@
  *       length), so it fits any rule. Server-safe. Moved from bb.haruhime.moe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { ComponentProps } from "react";
 /** Every native `<p>` prop except children, plus the count, the limit and the unit. */
@@ -16,10 +16,12 @@ export type CharCounterProps = Omit<ComponentProps<"p">, "children"> & {
     limit: number;
     /** What is counted (default "characters"). */
     unit?: string | undefined;
+    /** Announce "N over the limit" to screen readers when the count goes over (and silence when it comes back). */
+    live?: boolean | undefined;
 };
 /**
  * @function CharCounter
  * @param props {CharCounterProps} the count, the limit, the unit, and native `<p>` props
  * @returns {JSX.Element} "count / limit unit" in c3, or in bold rose with ": N over the limit"
  */
-export declare function CharCounter({ count, limit, unit, className, ...props }: CharCounterProps): import("react").JSX.Element;
+export declare function CharCounter({ count, limit, unit, live, className, ...props }: CharCounterProps): import("react").JSX.Element;

package/dist/components/forms/CharCounter.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
 const format = (value) => value.toLocaleString("en-US");
 /**
@@ -6,7 +6,9 @@ const format = (value) => value.toLocaleString("en-US");
  * @param props {CharCounterProps} the count, the limit, the unit, and native `<p>` props
  * @returns {JSX.Element} "count / limit unit" in c3, or in bold rose with ": N over the limit"
  */
-export function CharCounter({ count, limit, unit = "characters", className, ...props }) {
+export function CharCounter({ count, limit, unit = "characters", live = false, className, ...props }) {
     const over = count - limit;
-    return (_jsxs("p", { className: cx("text-sm tabular-nums", over > 0 ? "font-bold text-rose-300" : "text-c3", className), ...props, children: [`${format(count)} / ${format(limit)} ${unit}`, over > 0 ? `: ${format(over)} over the limit` : ""] }));
+    const overText = over > 0 ? `${format(over)} over the limit` : "";
+    const shown = `${format(count)} / ${format(limit)} ${unit}${over > 0 ? `: ${overText}` : ""}`;
+    return (_jsx("p", { className: cx("text-sm tabular-nums", over > 0 ? "font-bold text-rose-300" : "text-c3", className), ...props, children: live ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: shown }), _jsx("output", { "aria-live": "polite", className: "sr-only", children: overText })] })) : (shown) }));
 }

package/dist/components/forms/FieldFrame.d.ts

@@ -7,7 +7,7 @@
  *       aria-invalid.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 /** The label, hint and error every form field takes, keyed on the control's required id. */

package/dist/components/forms/FieldFrame.js

@@ -44,7 +44,7 @@ export const fieldControlProps = ({ id, hint, error, describedBy, invalid, }) =>
  *          nothing without an error
  */
 export function FieldError({ id, error }) {
-    return error ? (_jsx("div", { id: errorId(id), role: "alert", className: "text-rose-300 text-sm", children: error })) : null;
+    return error ? (_jsx("div", { id: errorId(id), role: "status", className: "text-rose-300 text-sm", children: error })) : null;
 }
 /**
  * @function FieldFrame

package/dist/components/forms/RadioGroup.d.ts

@@ -7,7 +7,7 @@
  *       native radios do. Controlled (`value`) or uncontrolled (`defaultValue`).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** One radio: its value, its label, an optional inline hint, and whether it can be picked. */

package/dist/components/forms/RadioGroup.js

@@ -7,7 +7,7 @@
  *       native radios do. Controlled (`value`) or uncontrolled (`defaultValue`).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,6 +27,6 @@ export function RadioGroup({ label, options, name, value, defaultValue, onChange
                 const optionId = `${id}-${i}`;
                 return (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "radio", id: optionId, name: name ?? id, value: option.value, ...(value === undefined
                                 ? { defaultChecked: option.value === defaultValue }
-                                : { checked: option.value === value }), disabled: option.disabled, required: required, "aria-invalid": error ? true : undefined, "aria-labelledby": `${optionId}-label`, "aria-describedby": option.hint ? hintId(optionId) : undefined, onChange: () => onChange?.(option.value), className: "mt-1 accent-h1" }), _jsxs("span", { children: [_jsx("span", { id: `${optionId}-label`, className: "font-bold text-c1", children: option.label }), option.hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(optionId), children: option.hint })] })) : null] })] }, option.value));
+                                : { checked: option.value === value }), disabled: option.disabled, required: required, "aria-labelledby": `${optionId}-label`, "aria-describedby": option.hint ? hintId(optionId) : undefined, onChange: () => onChange?.(option.value), className: "mt-1 accent-h1" }), _jsxs("span", { children: [_jsx("span", { id: `${optionId}-label`, className: "font-bold text-c1", children: option.label }), option.hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(optionId), children: option.hint })] })) : null] })] }, option.value));
             }), hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
 }

package/dist/components/forms/ReportDisclosure.d.ts

@@ -6,7 +6,7 @@
  *       at a time; a throw reads as `failedMessage`. Moved from bb.haruhime.moe (ReportForm).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import { type ReactNode } from "react";
 /** What `onSubmit` says: done (with what to say) or not (with the error). */

package/dist/components/forms/ReportDisclosure.js

@@ -6,11 +6,11 @@
  *       at a time; a throw reads as `failedMessage`. Moved from bb.haruhime.moe (ReportForm).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../utils/cx.js";
 import { Button } from "../basics/Button.js";
 import { Disclosure } from "../basics/Disclosure.js";
@@ -27,9 +27,13 @@ export function ReportDisclosure({ onSubmit, summary = "Report", label = "What's
     const [error, setError] = useState(null);
     const [done, setDone] = useState(null);
     const running = useRef(false);
-    if (done !== null) {
-        return (_jsx("p", { role: "status", className: cx("text-c2 text-sm", className), children: done }));
-    }
+    const status = useRef(null);
+    // The form goes away with the button that had focus, so focus lands on the outcome instead
+    // of falling to the body.
+    useEffect(() => {
+        if (done !== null)
+            status.current?.focus();
+    }, [done]);
     const send = async (event) => {
         event.preventDefault();
         if (running.current)
@@ -50,5 +54,5 @@ export function ReportDisclosure({ onSubmit, summary = "Report", label = "What's
         running.current = false;
         setPending(false);
     };
-    return (_jsx(Disclosure, { summary: summary, className: className, children: _jsxs("form", { className: "flex flex-col gap-2", onSubmit: send, children: [_jsx(Textarea, { id: `${id}-reason`, label: label, hint: hint, error: error ?? undefined, value: reason, rows: rows, minLength: minLength, maxLength: maxLength, required: true, onChange: (event) => setReason(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: pending, className: "self-start", children: pending ? pendingLabel : submitLabel })] }) }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-2", className), children: [done === null ? (_jsx(Disclosure, { summary: summary, children: _jsxs("form", { className: "flex flex-col gap-2", onSubmit: send, children: [_jsx(Textarea, { id: `${id}-reason`, label: label, hint: hint, error: error ?? undefined, value: reason, rows: rows, minLength: minLength, maxLength: maxLength, required: true, onChange: (event) => setReason(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: pending, className: "self-start", children: pending ? pendingLabel : submitLabel })] }) })) : null, _jsx("p", { ref: status, role: "status", tabIndex: -1, className: done === null ? "sr-only" : "text-c2 text-sm", children: done })] }));
 }

package/dist/components/forms/fieldStyles.d.ts

@@ -1,13 +1,12 @@
 /**
  * @file src/components/forms/fieldStyles.ts
- * @desc Shared classes for inputs, selects, and textareas (osu!-web dark fields). Focus shows as
- *       an h1 border. On an invalid field it also gets an h1 ring, since rose to pink alone is
- *       hard to see. `outline-hidden` (not `outline-none`) leaves a transparent outline that
- *       forced-colors mode paints, so focus shows there too. Also the one label look that fields,
- *       groups and filter rows share.
+ *  * @desc Shared field classes for TextInput, Select, Textarea and RangeBox (the packs look), and
+ *       the label class the fieldsets share. Focus is the theme's 2px h1 outline, the same ring
+ *       every control gets, plus an h1 border; an invalid field keeps its rose border until it
+ *       takes focus, when the h1 border and ring take over so focus stays visible.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 /** A field or group label: bold c3 at text-sm (internal). */
 export declare const FIELD_LABEL = "font-bold text-c3 text-sm";

package/dist/components/forms/fieldStyles.js

@@ -1,16 +1,15 @@
 /**
  * @file src/components/forms/fieldStyles.ts
- * @desc Shared classes for inputs, selects, and textareas (osu!-web dark fields). Focus shows as
- *       an h1 border. On an invalid field it also gets an h1 ring, since rose to pink alone is
- *       hard to see. `outline-hidden` (not `outline-none`) leaves a transparent outline that
- *       forced-colors mode paints, so focus shows there too. Also the one label look that fields,
- *       groups and filter rows share.
+ *  * @desc Shared field classes for TextInput, Select, Textarea and RangeBox (the packs look), and
+ *       the label class the fieldsets share. Focus is the theme's 2px h1 outline, the same ring
+ *       every control gets, plus an h1 border; an invalid field keeps its rose border until it
+ *       takes focus, when the h1 border and ring take over so focus stays visible.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import { cx } from "../../utils/cx.js";
-const FIELD = "w-full rounded-md border border-b3 bg-b6 px-3 py-2 text-c1 text-sm placeholder:text-c4 focus-visible:border-h1 focus-visible:outline-hidden disabled:opacity-50 aria-invalid:border-rose-400 aria-invalid:focus-visible:border-h1 aria-invalid:focus-visible:ring-1 aria-invalid:focus-visible:ring-h1";
+const FIELD = "w-full rounded-md border border-b3 bg-b6 px-3 py-2 text-c1 text-sm placeholder:text-c4 focus-visible:border-h1 disabled:opacity-50 aria-invalid:border-rose-400 aria-invalid:focus-visible:border-h1";
 /** A field or group label: bold c3 at text-sm (internal). */
 export const FIELD_LABEL = "font-bold text-c3 text-sm";
 /**

package/dist/components/osu/BeatmapStats.d.ts

@@ -5,7 +5,7 @@
  *       not finite doesn't show. The short names are `<abbr>`s with the full name as a title.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 /** The stats BeatmapStats shows, in order. */

package/dist/components/osu/BeatmapStats.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
-const abbr = (short, full) => _jsx("abbr", { title: full, children: short });
+// The short form shows (and titles a tooltip); screen readers get the full name instead.
+const abbr = (short, full) => (_jsxs("abbr", { title: full, children: [_jsx("span", { "aria-hidden": "true", children: short }), _jsx("span", { className: "sr-only", children: full })] }));
 const LABELS = {
     cs: abbr("CS", "Circle size"),
     ar: abbr("AR", "Approach rate"),

package/dist/components/osu/starColors.d.ts

@@ -5,8 +5,9 @@
  *       They are the same at every --hue, like the wordmark's brand colors.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
+type Rgb = readonly [number, number, number];
 /**
  * @function starRatingColor
  * @param stars {number} a star rating
@@ -14,10 +15,19 @@
  *          straight blend between the two stops around it otherwise
  */
 export declare const starRatingColor: (stars: number) => string;
+/**
+ * @function contrastRatio
+ * @param a {Rgb} one color
+ * @param b {Rgb} the other
+ * @returns {number} the WCAG contrast ratio between them, 1 to 21
+ */
+export declare const contrastRatio: (a: Rgb, b: Rgb) => number;
 /**
  * @function starRatingTextColor
- * @param stars {number} a star rating
- * @returns {string} text that reads on `starRatingColor(stars)`: black up to 6.5, then osu!'s pale
- *          yellow on the dark end of the spectrum
+ * @param stars {number} the rating
+ * @returns {string} the text color on {@link starRatingColor}'s pill: osu!'s black up to the
+ *          dark end, its pale gold from there, white only where neither clears 4.5:1 (the violet
+ *          band around 6.5 to 7 stars)
  */
 export declare const starRatingTextColor: (stars: number) => string;
+export {};

package/dist/components/osu/starColors.js

@@ -5,7 +5,7 @@
  *       They are the same at every --hue, like the wordmark's brand colors.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 const STOPS = [
     [0.1, [66, 144, 251]],
@@ -45,4 +45,41 @@ export const starRatingColor = (stars) => {
  * @returns {string} text that reads on `starRatingColor(stars)`: black up to 6.5, then osu!'s pale
  *          yellow on the dark end of the spectrum
  */
-export const starRatingTextColor = (stars) => stars >= 6.5 ? css([255, 217, 102]) : css([0, 0, 0]);
+const BLACK = [0, 0, 0];
+const GOLD = [255, 217, 102];
+const WHITE = [255, 255, 255];
+const luminance = ([r, g, b]) => {
+    const channel = (v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+};
+/**
+ * @function contrastRatio
+ * @param a {Rgb} one color
+ * @param b {Rgb} the other
+ * @returns {number} the WCAG contrast ratio between them, 1 to 21
+ */
+export const contrastRatio = (a, b) => {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+};
+const parse = (color) => (color.match(/\d+/g) ?? ["0", "0", "0"]).slice(0, 3).map(Number);
+/**
+ * @function starRatingTextColor
+ * @param stars {number} the rating
+ * @returns {string} the text color on {@link starRatingColor}'s pill: osu!'s black up to the
+ *          dark end, its pale gold from there, white only where neither clears 4.5:1 (the violet
+ *          band around 6.5 to 7 stars)
+ */
+export const starRatingTextColor = (stars) => {
+    const pill = parse(starRatingColor(stars));
+    if (stars < 6.5 && contrastRatio(BLACK, pill) >= 4.5)
+        return css(BLACK);
+    if (contrastRatio(GOLD, pill) >= 4.5)
+        return css(GOLD);
+    if (contrastRatio(BLACK, pill) >= 4.5)
+        return css(BLACK);
+    return css(WHITE);
+};

package/dist/components/shell/NavItem.d.ts

@@ -5,7 +5,7 @@
  *       browser, so both lists print the same markup.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { SiteLinkItem } from "./links.js";
 /** One nav entry, its aria-current and the finished classes for its link. */

package/dist/components/shell/NavItem.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *       browser, so both lists print the same markup.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import { AutoLink } from "../basics/AutoLink.js";
 import { LinkNote } from "./LinkNote.js";
@@ -17,7 +17,7 @@ import { LinkNote } from "./LinkNote.js";
  */
 export function NavItem({ item, current, linkClassName }) {
     if (!item.href) {
-        return (_jsx("li", { children: _jsxs("span", { "aria-disabled": "true", className: "text-c4", children: [item.label, _jsx(LinkNote, { note: item.note })] }) }));
+        return (_jsx("li", { children: _jsxs("span", { className: "text-c4", children: [item.label, _jsx(LinkNote, { note: item.note })] }) }));
     }
     return (_jsx("li", { children: _jsx(AutoLink, { href: item.href, "aria-current": current, className: linkClassName, children: item.label }) }));
 }

package/dist/components/shell/SiteFooter.d.ts

@@ -1,16 +1,19 @@
 /**
  * @file src/components/shell/SiteFooter.tsx
- * @desc Site footer: labelled link columns from data (entries without an href show as text with
- *       a small note, like "soon"), an optional extra slot, one line of fine print, the
+ * @desc Site footer: link columns from data under one nav landmark, each a section headed by its title (entries without an href show as text with
+ *       a small note, like "soon"), an optional "haruhime tools" column linking the other tools,
+ *       an optional extra slot, one line of fine print, the
  *       haruhime.moe wordmark linking the parent site, a GitHub icon link, and an optional
  *       Discord icon link beside it (white, as Discord's brand guidelines ask).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
+import type { HeadingLevel } from "../basics/cardStyles.js";
+import { type HaruhimeToolsOptions } from "./haruhimeTools.js";
 import { type SiteLinkItem } from "./links.js";
-/** One footer column: a title (also the nav landmark's name) and its entries. */
+/** One footer column: a title (its heading, which names the column's section) and its entries. */
 export type SiteFooterColumn = {
     title: string;
     items: readonly SiteLinkItem[];
@@ -19,6 +22,15 @@ export type SiteFooterColumn = {
 export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
     /** Link columns, left to right. Internal hrefs use `next/link`, external ones a plain `<a>`. */
     columns?: readonly SiteFooterColumn[] | undefined;
+    /** The one nav landmark around the columns. Default "Footer". Keep it unlike the header's. */
+    navLabel?: string | undefined;
+    /** The column titles' heading level. Default 2. */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * Adds the "haruhime tools" column (haruhimeToolsColumn): the other haruhime.moe tools and
+     * "All tools". `current` leaves this tool out; `position` places it (default 1).
+     */
+    tools?: HaruhimeToolsOptions | undefined;
     /** Rendered above the fine print, e.g. a "clear local data" control. */
     extra?: ReactNode;
     /** One line of small print, e.g. a trademark notice. */
@@ -38,8 +50,8 @@ export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
 };
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ * @param props {SiteFooterProps} columns, the tools column, extra slot, fine print, parent, GitHub and Discord
  *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ columns: ownColumns, navLabel, headingLevel, tools, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/shell/SiteFooter.js

@@ -4,6 +4,7 @@ import { AutoLink } from "../basics/AutoLink.js";
 import { DiscordIcon } from "../icons/DiscordIcon.js";
 import { GitHubIcon } from "../icons/GitHubIcon.js";
 import { HaruhimeWordmarkLink } from "../icons/HaruhimeWordmarkLink.js";
+import { haruhimeToolsColumn } from "./haruhimeTools.js";
 import { LinkNote } from "./LinkNote.js";
 import { linkItemKey } from "./links.js";
 // The GitHub icon link in the bottom row.
@@ -15,11 +16,16 @@ const DISCORD_LINK = "shrink-0 text-c1 transition-opacity hover:opacity-80";
 const GRID_COLUMNS = ["", "", "sm:grid-cols-2", "sm:grid-cols-3", "sm:grid-cols-4"];
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ * @param props {SiteFooterProps} columns, the tools column, extra slot, fine print, parent, GitHub and Discord
  *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, discordLabel = "Discord", className, ...props }) {
+export function SiteFooter({ columns: ownColumns = [], navLabel = "Footer", headingLevel = 2, tools, extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, discordLabel = "Discord", className, ...props }) {
+    const columns = [...ownColumns];
+    if (tools) {
+        const at = Math.max(0, Math.min(tools.position ?? 1, columns.length));
+        columns.splice(at, 0, haruhimeToolsColumn(tools));
+    }
     const fine = finePrint ? _jsx("p", { className: "text-c4 text-xs", children: finePrint }) : null;
     const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: ICON_LINK, children: _jsx(GitHubIcon, {}) })) : null;
     const discord = discordHref ? (_jsx("a", { href: discordHref, "aria-label": discordLabel, className: DISCORD_LINK, children: _jsx(DiscordIcon, {}) })) : null;
@@ -28,5 +34,7 @@ export function SiteFooter({ columns = [], extra, finePrint, parentLink = true,
     // With the wordmark, the fine print gets its own line and the row holds wordmark + icon.
     // Without it, the fine print shares the row with the icon.
     const rowStart = parentLink ? _jsx(HaruhimeWordmarkLink, { href: parentHref }) : fine;
-    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), _jsx(LinkNote, { note: item.note })] }, linkItemKey(item)))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
+    const Heading = `h${headingLevel}`;
+    const columnId = (title) => `footer-${title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("section", { "aria-labelledby": columnId(column.title), children: [_jsx(Heading, { id: columnId(column.title), className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), _jsx(LinkNote, { note: item.note })] }, linkItemKey(item)))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
 }

package/dist/components/shell/haruhimeTools.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @file src/components/shell/haruhimeTools.ts
+ * @desc The haruhime.moe tools as data (HARUHIME_TOOLS) and the footer column that links them
+ *       from each tool (haruhimeToolsColumn): every other tool plus "All tools" on the parent
+ *       site. Sibling subdomains are separate sites to search engines, so each tool links the
+ *       others. Server-safe: no directive, no hooks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { SiteLinkItem } from "./links.js";
+/** A live haruhime.moe tool's id: its subdomain. */
+export type HaruhimeToolId = "packs" | "pools" | "bb";
+/** One live haruhime.moe tool: its name, home page and what it is in a few words. */
+export type HaruhimeTool = {
+    id: HaruhimeToolId;
+    name: string;
+    href: string;
+    /** A few words after the name in the footer, like "mappool downloads". */
+    blurb: string;
+};
+/** The live haruhime.moe tools in launch order. A tool joins this list once it's live. */
+export declare const HARUHIME_TOOLS: readonly HaruhimeTool[];
+/** haruhimeToolsColumn's (and SiteFooter's `tools` prop's) options. */
+export type HaruhimeToolsOptions = {
+    /** The tool the footer sits on. It's left out of the list (its own column links it). */
+    current?: HaruhimeToolId | undefined;
+    /** The column's title (and nav landmark name). Default "haruhime tools". */
+    title?: string | undefined;
+    /** The last entry, linking the parent site. Default "All tools"; false leaves it out. */
+    allLabel?: string | false | undefined;
+    /** Where "All tools" links. Default "https://www.haruhime.moe". */
+    allHref?: string | undefined;
+    /** Where SiteFooter puts the column among `columns` (0 is first). Default 1, after the first. */
+    position?: number | undefined;
+};
+/**
+ * @function haruhimeToolsColumn
+ * @param options {HaruhimeToolsOptions} the current tool, title and "All tools" link
+ * @returns {{ title: string; items: SiteLinkItem[] }} a footer column: each other tool as
+ *          "name: blurb", then "All tools" on the parent site
+ */
+export declare function haruhimeToolsColumn(options?: HaruhimeToolsOptions): {
+    title: string;
+    items: SiteLinkItem[];
+};

package/dist/components/shell/haruhimeTools.js

@@ -0,0 +1,30 @@
+/**
+ * @file src/components/shell/haruhimeTools.ts
+ * @desc The haruhime.moe tools as data (HARUHIME_TOOLS) and the footer column that links them
+ *       from each tool (haruhimeToolsColumn): every other tool plus "All tools" on the parent
+ *       site. Sibling subdomains are separate sites to search engines, so each tool links the
+ *       others. Server-safe: no directive, no hooks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** The live haruhime.moe tools in launch order. A tool joins this list once it's live. */
+export const HARUHIME_TOOLS = [
+    { id: "packs", name: "packs", href: "https://packs.haruhime.moe", blurb: "mappool downloads" },
+    { id: "pools", name: "pools", href: "https://pools.haruhime.moe", blurb: "mappool builder" },
+    { id: "bb", name: "bb", href: "https://bb.haruhime.moe", blurb: "osu! BBCode editor" },
+];
+/**
+ * @function haruhimeToolsColumn
+ * @param options {HaruhimeToolsOptions} the current tool, title and "All tools" link
+ * @returns {{ title: string; items: SiteLinkItem[] }} a footer column: each other tool as
+ *          "name: blurb", then "All tools" on the parent site
+ */
+export function haruhimeToolsColumn(options = {}) {
+    const { current, title = "haruhime tools", allLabel = "All tools" } = options;
+    const items = HARUHIME_TOOLS.filter((tool) => tool.id !== current).map((tool) => ({ href: tool.href, label: `${tool.name}: ${tool.blurb}` }));
+    if (allLabel !== false) {
+        items.push({ href: options.allHref ?? "https://www.haruhime.moe", label: allLabel });
+    }
+    return { title, items };
+}

package/dist/components/tables/Table.d.ts

@@ -5,9 +5,9 @@
  *       Server-safe. Fill it with THead, TBody, Th and Td.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
-import type { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<table>` prop (including `ref`), plus a caption and the wrapper's classes. */
 export type TableProps = ComponentProps<"table"> & {
     /** Names the table for screen readers. Shown above it unless `hideCaption`. */
@@ -16,6 +16,8 @@ export type TableProps = ComponentProps<"table"> & {
     hideCaption?: boolean | undefined;
     /** Classes for the wrapper `<div>` that scrolls sideways. */
     wrapperClassName?: string | undefined;
+    /** The scroll wrapper's accessible name when there is no caption. Default "Table". */
+    scrollLabel?: string | undefined;
 };
 /**
  * @function Table
@@ -23,4 +25,4 @@ export type TableProps = ComponentProps<"table"> & {
  *        wrapperClassName; `className` and `ref` go on the `<table>`
  * @returns {JSX.Element} an `overflow-x-auto` `<div>` around the `<table>` and its caption
  */
-export declare function Table({ caption, hideCaption, wrapperClassName, className, children, ...props }: TableProps): import("react").JSX.Element;
+export declare function Table({ caption, hideCaption, wrapperClassName, scrollLabel, className, children, ...props }: TableProps): import("react").JSX.Element;

package/dist/components/tables/Table.js

@@ -1,4 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/tables/Table.tsx
+ * @desc A data table on the apps' look: full width, small left-aligned text, in a wrapper that
+ *       scrolls sideways on phones, with an optional caption (visible, or for screen readers only).
+ *       Server-safe. Fill it with THead, TBody, Th and Td.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { useId } from "react";
 import { cx } from "../../utils/cx.js";
 import { FIELD_LABEL } from "../forms/fieldStyles.js";
 /**
@@ -7,6 +17,9 @@ import { FIELD_LABEL } from "../forms/fieldStyles.js";
  *        wrapperClassName; `className` and `ref` go on the `<table>`
  * @returns {JSX.Element} an `overflow-x-auto` `<div>` around the `<table>` and its caption
  */
-export function Table({ caption, hideCaption = false, wrapperClassName, className, children, ...props }) {
-    return (_jsx("div", { className: cx("overflow-x-auto", wrapperClassName), children: _jsxs("table", { className: cx("w-full text-left text-sm", className), ...props, children: [caption ? (_jsx("caption", { className: hideCaption ? "sr-only" : `mb-2 text-left ${FIELD_LABEL}`, children: caption })) : null, children] }) }));
+export function Table({ caption, hideCaption = false, wrapperClassName, scrollLabel = "Table", className, children, ...props }) {
+    const captionId = useId();
+    return (_jsx("section", { 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region needs keyboard focus
+        tabIndex: 0, "aria-labelledby": caption ? captionId : undefined, "aria-label": caption ? undefined : scrollLabel, className: cx("overflow-x-auto", wrapperClassName), children: _jsxs("table", { className: cx("w-full text-left text-sm", className), ...props, children: [caption ? (_jsx("caption", { id: captionId, className: hideCaption ? "sr-only" : `mb-2 text-left ${FIELD_LABEL}`, children: caption })) : null, children] }) }));
 }

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { type BeatmapStatKey, BeatmapStats, type BeatmapStatsProps, } from "./co
 export { ModBadge, type ModBadgeProps } from "./components/osu/ModBadge.js";
 export { StarRating, type StarRatingProps } from "./components/osu/StarRating.js";
 export { HeaderMenu, type HeaderMenuItem, type HeaderMenuProps, } from "./components/shell/HeaderMenu.js";
+export { HARUHIME_TOOLS, type HaruhimeTool, type HaruhimeToolId, type HaruhimeToolsOptions, haruhimeToolsColumn, } from "./components/shell/haruhimeTools.js";
 export { type LinkTabItem, LinkTabs, type LinkTabsProps } from "./components/shell/LinkTabs.js";
 export type { SiteLinkItem } from "./components/shell/links.js";
 export { NavLinks, type NavLinksProps, type SiteNavAlign } from "./components/shell/NavLinks.js";

package/dist/index.js

@@ -57,6 +57,7 @@ export { ModBadge } from "./components/osu/ModBadge.js";
 export { StarRating } from "./components/osu/StarRating.js";
 // Shell
 export { HeaderMenu, } from "./components/shell/HeaderMenu.js";
+export { HARUHIME_TOOLS, haruhimeToolsColumn, } from "./components/shell/haruhimeTools.js";
 export { LinkTabs } from "./components/shell/LinkTabs.js";
 export { NavLinks } from "./components/shell/NavLinks.js";
 export { PageShell } from "./components/shell/PageShell.js";

package/dist/theme.css

@@ -10,12 +10,12 @@
  *         @import "@haruhimemoe/ui/theme.css";
  *
  *       Set --hue on :root to recolor everything (default 333, pink). Some hues need --h2-l
- *       (h2 lightness, default 45%) or --h1-l (h1 lightness, default 70%) moved to keep text at
- *       4.5:1; the README lists values. Load Nunito with next/font as the --font-nunito variable;
+ *       (h2 lightness, default 45%) or --h1-l (h1 lightness, default 76%, which clears 4.5:1 on
+ *       b5 at every hue) moved to keep text at 4.5:1; the README lists values. Load Nunito with next/font as the --font-nunito variable;
  *       without it the sans stack falls back to the system font.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Sat Oct 3, 2026
  */
 
 /* This file ships as dist/theme.css, so './' is the package's compiled components. */
@@ -39,7 +39,7 @@
   --color-c3: hsl(var(--hue) 40% 80%);
   --color-c4: hsl(var(--hue) 40% 70%);
 
-  --color-h1: hsl(var(--hue) 100% var(--h1-l, 70%));
+  --color-h1: hsl(var(--hue) 100% var(--h1-l, 76%));
   --color-h2: hsl(var(--hue) 50% var(--h2-l, 45%));
 
   --font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "React components for the haruhime.moe osu! tools on Next.js: the osu!-web-style palette as a Tailwind theme, buttons, cards, form fields and confirms, filter controls, tables, osu! beatmap display pieces and the site header and footer.",
   "keywords": [
     "osu",