@haruhimemoe/ui 0.11.1 → 0.12.0

package/dist/components/basics/textStyles.js

@@ -0,0 +1,18 @@
+/**
+ * @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 { cx } from "../../utils/cx.js";
+import { TEXT_SIZES, TEXT_TONES } from "./textTones.js";
+/**
+ * @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 const textClasses = ({ tone = "default", size = "sm", bold = false, className, } = {}) => cx(TEXT_TONES[tone], TEXT_SIZES[size], bold && "font-bold", className);

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

@@ -0,0 +1,17 @@
+/**
+ * @file src/components/basics/textTones.ts
+ * @desc Text's tones and sizes as finished class strings (internal, no cx), so a client file
+ *       that must not load tailwind-merge (PaletteInput) can still use the error tone. Status
+ *       tones get one lighter step under prefers-contrast: more.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/** Text's color: c2 body, c3 muted, c4 subtle, or a status color. */
+export type TextTone = "default" | "muted" | "subtle" | "error" | "warning" | "success";
+/** Text's size: text-xs, text-sm (the default) or text-base. */
+export type TextSize = "xs" | "sm" | "base";
+/** The class for each tone. Every tone clears 4.5:1 on b4, b5 and b6 at text-sm. */
+export declare const TEXT_TONES: Readonly<Record<TextTone, string>>;
+/** The class for each size. */
+export declare const TEXT_SIZES: Readonly<Record<TextSize, string>>;

package/dist/components/basics/textTones.js

@@ -0,0 +1,24 @@
+/**
+ * @file src/components/basics/textTones.ts
+ * @desc Text's tones and sizes as finished class strings (internal, no cx), so a client file
+ *       that must not load tailwind-merge (PaletteInput) can still use the error tone. Status
+ *       tones get one lighter step under prefers-contrast: more.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/** The class for each tone. Every tone clears 4.5:1 on b4, b5 and b6 at text-sm. */
+export const TEXT_TONES = {
+    default: "text-c2",
+    muted: "text-c3",
+    subtle: "text-c4",
+    error: "text-rose-300 contrast-more:text-rose-200",
+    warning: "text-amber-300 contrast-more:text-amber-200",
+    success: "text-emerald-300 contrast-more:text-emerald-200",
+};
+/** The class for each size. */
+export const TEXT_SIZES = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+};

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

@@ -0,0 +1,16 @@
+/**
+ * @file src/components/basics/useMotionAllowed.ts
+ * @desc Whether the visitor allows motion, for motion JavaScript drives (an autoplay video, a
+ *       canvas, element.animate()). CSS motion is already covered by theme.css's reduced-motion
+ *       rule. False on the server, during hydration, without matchMedia, and while the visitor
+ *       asks for reduced motion; it follows the setting live.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/**
+ * @function useMotionAllowed
+ * @returns {boolean} true when the visitor allows motion; false on the server, during hydration,
+ *          without matchMedia, and under prefers-reduced-motion: reduce
+ */
+export declare function useMotionAllowed(): boolean;

package/dist/components/basics/useMotionAllowed.js

@@ -0,0 +1,41 @@
+/**
+ * @file src/components/basics/useMotionAllowed.ts
+ * @desc Whether the visitor allows motion, for motion JavaScript drives (an autoplay video, a
+ *       canvas, element.animate()). CSS motion is already covered by theme.css's reduced-motion
+ *       rule. False on the server, during hydration, without matchMedia, and while the visitor
+ *       asks for reduced motion; it follows the setting live.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+"use client";
+import { useSyncExternalStore } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+const reducedMotionQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(QUERY)
+    : null;
+const subscribe = (onChange) => {
+    const list = reducedMotionQuery();
+    if (!list)
+        return () => { };
+    if (typeof list.addEventListener === "function") {
+        list.addEventListener("change", onChange);
+        return () => list.removeEventListener("change", onChange);
+    }
+    // Safari before 14 has only the older addListener on a MediaQueryList.
+    list.addListener(onChange);
+    return () => list.removeListener(onChange);
+};
+const getSnapshot = () => {
+    const list = reducedMotionQuery();
+    return list ? !list.matches : false;
+};
+const getServerSnapshot = () => false;
+/**
+ * @function useMotionAllowed
+ * @returns {boolean} true when the visitor allows motion; false on the server, during hydration,
+ *          without matchMedia, and under prefers-reduced-motion: reduce
+ */
+export function useMotionAllowed() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/dist/components/brand/BrandPage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from "../basics/Card.js";
 import { linkClasses } from "../basics/linkStyles.js";
+import { TextLink } from "../basics/TextLink.js";
 import { BrandSwatch } from "./BrandSwatch.js";
 const DEFAULT_FONTS = [
     { name: "Nunito", usage: "Wordmarks and headings" },
@@ -13,5 +14,5 @@ const IMAGE = /\.(svg|png|jpe?g|webp)$/i;
  * @returns {JSX.Element} the brand page's sections, in order
  */
 export function BrandPage({ name, tagline, url, writing, dos, donts, palette, assets, contact, familyHref, fonts = DEFAULT_FONTS, slots, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { title: "Name", children: [_jsx("p", { className: "font-bold text-c1 text-xl", children: name }), _jsx("p", { children: tagline }), _jsx("p", { children: writing }), _jsx("p", { children: _jsx("a", { className: LINK, href: url, children: url }) })] }), _jsx(Card, { title: "Logo", children: _jsx("ul", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: assets.map((asset) => (_jsxs("li", { className: "flex flex-col gap-2", children: [IMAGE.test(asset.href) ? (_jsx("div", { className: `flex h-32 items-center justify-center rounded-md p-4 ${asset.dark ? "bg-b6" : "bg-c1"}`, children: _jsx("img", { src: asset.href, alt: "", className: "max-h-full max-w-full" }) })) : null, _jsx("a", { className: LINK, href: asset.href, download: true, children: asset.label })] }, asset.href))) }) }), slots?.afterLogo, _jsx(Card, { title: "Colors", children: _jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Object.entries(palette).map(([token, hex]) => (_jsx("li", { children: _jsx(BrandSwatch, { token: token, hex: hex }) }, token))) }) }), slots?.afterColors, _jsx(Card, { title: "Type", children: _jsx("ul", { className: "flex flex-col gap-1", children: fonts.map((font) => (_jsxs("li", { children: [_jsx("span", { className: "font-bold text-c1", children: font.name }), ": ", font.usage] }, font.name))) }) }), _jsx(Card, { title: "Do's and don'ts", children: _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Do" }), _jsx("ul", { className: "list-disc pl-5", children: dos.map((item) => (_jsx("li", { children: item }, item))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Don't" }), _jsx("ul", { className: "list-disc pl-5", children: donts.map((item) => (_jsx("li", { children: item }, item))) })] })] }) }), _jsx(Card, { title: "osu!", children: _jsx("p", { children: "Not affiliated with osu! or ppy. osu! is a trademark of ppy Pty Ltd." }) }), familyHref ? (_jsx(Card, { title: "Family", children: _jsx("a", { className: LINK, href: familyHref, children: "Part of the haruhime.moe family." }) })) : null, _jsx(Card, { title: "Contact", children: _jsx("a", { className: LINK, href: `mailto:${contact}`, children: contact }) }), slots?.end] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { title: "Name", children: [_jsx("p", { className: "font-bold text-c1 text-xl", children: name }), _jsx("p", { children: tagline }), _jsx("p", { children: writing }), _jsx("p", { children: _jsx("a", { className: LINK, href: url, children: url }) })] }), _jsx(Card, { title: "Logo", children: _jsx("ul", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: assets.map((asset) => (_jsxs("li", { className: "flex flex-col gap-2", children: [IMAGE.test(asset.href) ? (_jsx("div", { className: `flex h-32 items-center justify-center rounded-md p-4 ${asset.dark ? "bg-b6" : "bg-c1"}`, children: _jsx("img", { src: asset.href, alt: "", className: "max-h-full max-w-full" }) })) : null, _jsx(TextLink, { href: asset.href, download: true, children: asset.label })] }, asset.href))) }) }), slots?.afterLogo, _jsx(Card, { title: "Colors", children: _jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Object.entries(palette).map(([token, hex]) => (_jsx("li", { children: _jsx(BrandSwatch, { token: token, hex: hex }) }, token))) }) }), slots?.afterColors, _jsx(Card, { title: "Type", children: _jsx("ul", { className: "flex flex-col gap-1", children: fonts.map((font) => (_jsxs("li", { children: [_jsx("span", { className: "font-bold text-c1", children: font.name }), ": ", font.usage] }, font.name))) }) }), _jsx(Card, { title: "Do's and don'ts", children: _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Do" }), _jsx("ul", { className: "list-disc pl-5", children: dos.map((item) => (_jsx("li", { children: item }, item))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Don't" }), _jsx("ul", { className: "list-disc pl-5", children: donts.map((item) => (_jsx("li", { children: item }, item))) })] })] }) }), _jsx(Card, { title: "osu!", children: _jsx("p", { children: "Not affiliated with osu! or ppy. osu! is a trademark of ppy Pty Ltd." }) }), familyHref ? (_jsx(Card, { title: "Family", children: _jsx("a", { className: LINK, href: familyHref, children: "Part of the haruhime.moe family." }) })) : null, _jsx(Card, { title: "Contact", children: _jsx("a", { className: LINK, href: `mailto:${contact}`, children: contact }) }), slots?.end] }));
 }

package/dist/components/content/ContentNav.js

@@ -13,8 +13,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link.js";
 import { usePathname } from "next/navigation.js";
-const LINK_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 text-c3";
-const CURRENT_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 bg-b4 font-bold text-c1";
+const LINK_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 text-c3 coarse:py-2.5";
+const CURRENT_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 bg-b4 font-bold text-c1 coarse:py-2.5";
 /**
  * @function ContentNav
  * @param props {ContentNavProps} the nav's accessible name, the index link, and the groups

package/dist/components/content/CopyMarkdownButton.d.ts

@@ -2,7 +2,9 @@
  * @file src/components/content/CopyMarkdownButton.tsx
  * @desc A button that fetches a page's raw Markdown and copies it to the clipboard, reporting the
  *       result in an `<output>` beside it (a polite live region), for a doc page's "Copy as
- *       Markdown" action. Any failure (the fetch rejects, the response isn't ok, or the clipboard
+ *       Markdown" action. Where `ClipboardItem` exists, the clipboard write starts inside the click
+ *       with the fetch as a promised Blob, since Safari rejects a write that starts after an
+ *       awaited fetch; elsewhere it fetches, then calls `writeText`. Any failure (the fetch rejects, the response isn't ok, or the clipboard
  *       refuses) announces the same failure message; the button never throws. Its own client file
  *       with finished class strings (no `cx`), so tailwind-merge stays out of the browser bundle
  *       for `ContentPage`, the Server Component that renders it. Not a wrapper around

package/dist/components/content/CopyMarkdownButton.js

@@ -2,7 +2,9 @@
  * @file src/components/content/CopyMarkdownButton.tsx
  * @desc A button that fetches a page's raw Markdown and copies it to the clipboard, reporting the
  *       result in an `<output>` beside it (a polite live region), for a doc page's "Copy as
- *       Markdown" action. Any failure (the fetch rejects, the response isn't ok, or the clipboard
+ *       Markdown" action. Where `ClipboardItem` exists, the clipboard write starts inside the click
+ *       with the fetch as a promised Blob, since Safari rejects a write that starts after an
+ *       awaited fetch; elsewhere it fetches, then calls `writeText`. Any failure (the fetch rejects, the response isn't ok, or the clipboard
  *       refuses) announces the same failure message; the button never throws. Its own client file
  *       with finished class strings (no `cx`), so tailwind-merge stays out of the browser bundle
  *       for `ContentPage`, the Server Component that renders it. Not a wrapper around
@@ -15,8 +17,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusOutput } from "../actions/StatusOutput.js";
 import { useLatestStatus } from "../actions/useLatestStatus.js";
-// buttonClasses({ variant: "secondary" }) copied as a literal, so this file imports no cx.
-const BUTTON_CLASS_NAME = "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 bg-b3 text-c1 not-disabled:hover:bg-b2 h-9 px-4 text-sm";
+// buttonClasses({ variant: "secondary" }) copied as a literal, so this file imports no cx. The
+// test pins it to buttonClasses.
+const BUTTON_CLASS_NAME = "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] bg-b3 text-c1 not-disabled:hover:bg-b2 contrast-more:inset-ring contrast-more:inset-ring-c4 h-9 px-4 text-sm coarse:h-11";
 /**
  * @function CopyMarkdownButton
  * @param props {CopyMarkdownButtonProps} the Markdown source's URL, plus optional label and
@@ -28,11 +31,23 @@ export function CopyMarkdownButton({ href, label = "Copy as Markdown", copiedLab
     const copy = async () => {
         const run = start();
         try {
-            const response = await fetch(href);
-            if (!response.ok)
-                throw new Error(String(response.status));
-            const text = await response.text();
-            await navigator.clipboard.writeText(text);
+            if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+                // Started synchronously in the click so Safari keeps the user activation.
+                const blob = fetch(href).then(async (response) => {
+                    if (!response.ok)
+                        throw new Error(String(response.status));
+                    return new Blob([await response.text()], { type: "text/plain" });
+                });
+                // If the write is refused before reading the blob, its own rejection stays handled.
+                blob.catch(() => undefined);
+                await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+            }
+            else {
+                const response = await fetch(href);
+                if (!response.ok)
+                    throw new Error(String(response.status));
+                await navigator.clipboard.writeText(await response.text());
+            }
             settle(run, "copied");
         }
         catch {

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

@@ -5,7 +5,7 @@
  *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 import { type HeadingLevel } from "../basics/cardStyles.js";

package/dist/components/filters/FilterPanel.js

@@ -5,7 +5,7 @@
  *       button; from `sm` up they are always shown.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,7 +39,7 @@ export function FilterPanel({ title, headingLevel = 2, resultCount, active = fal
         cleared.current = false;
     }, [showClear]);
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4", CARD, className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: CARD_HEADING, children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
+    return (_jsxs("section", { "aria-labelledby": titleId, className: cx("flex flex-col gap-4", CARD, className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Heading, { id: titleId, ref: headingRef, tabIndex: -1, className: CARD_HEADING, children: title }), _jsx("button", { type: "button", "aria-labelledby": titleId, "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen(!open), className: "inline-flex coarse:size-11 size-8 items-center justify-center rounded-full text-c2 transition-colors hover:bg-b3 hover:text-c1 sm:hidden", children: _jsx("span", { "aria-hidden": "true", children: open ? "▴" : "▾" }) })] }), _jsx("output", { "aria-live": "polite", className: "text-c3 text-sm", children: resultCount }), showClear ? (_jsx("button", { type: "button", onClick: () => {
                             cleared.current = true;
                             onClear();
                         }, className: "ml-auto font-bold text-h1 text-sm transition-colors hover:text-c1", children: clearLabel })) : null] }), _jsx("div", { id: bodyId, className: cx("flex-col gap-3", open ? "flex" : "hidden sm:flex"), children: children })] }));

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

@@ -5,7 +5,7 @@
  *       that leaves the name to a surrounding FilterRow. 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, type ReactNode } from "react";
 /** Every native `<fieldset>` prop, plus the group's label and whether a FilterRow names it. */
@@ -14,7 +14,9 @@ export type GroupFrameProps = ComponentProps<"fieldset"> & {
     label: ReactNode;
     /**
      * Leave the name to a surrounding FilterRow: no label shows, and the fieldset is not a group
-     * of its own (role none), so screen readers hear the row's name once.
+     * of its own (role none), so screen readers hear the row's name once. Unlike the fields'
+     * hideLabel (TextInput, RadioGroup...), which keeps the label for screen readers, this one
+     * drops it.
      */
     hideLabel?: boolean | undefined;
 };

package/dist/components/filters/GroupFrame.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *       that leaves the name to a surrounding FilterRow. Server-safe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { useId } from "react";
 import { cx } from "../../utils/cx.js";

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

@@ -5,13 +5,14 @@
  *       colors, so on and off still look different.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
-/** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
-export declare const CHIP = "rounded-full px-2.5 py-1 font-bold text-xs transition-colors";
+/** The pill: rounded, px-2.5 py-1, bold text-xs; 44px tall on a coarse pointer. */
+export declare const CHIP = "inline-flex items-center rounded-full px-2.5 py-1 font-bold text-xs transition-colors coarse:min-h-11 coarse:px-3.5";
 /** 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. */
-export declare const CHIP_OFF = "bg-b3 text-c2";
-/** A chip that can't be used right now: dimmed, with a not-allowed cursor. */
-export declare const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40";
+export declare const CHIP_OFF = "bg-b3 text-c2 contrast-more:inset-ring contrast-more:inset-ring-c4 forced-colors:border";
+/** A chip that can't be used right now: dimmed, with a not-allowed cursor (GrayText in forced
+ *  colors). */
+export declare const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40 forced-colors:text-[GrayText]";

package/dist/components/filters/chipStyles.js

@@ -5,14 +5,16 @@
  *       colors, so on and off still look different.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
-/** The pill: rounded, px-2.5 py-0.5, bold text-xs. */
+/** The pill: rounded, px-2.5 py-1, bold text-xs; 44px tall on a coarse pointer. */
 // 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";
+// inline-flex so a ChoiceChips <label> (inline) can take a min-height.
+export const CHIP = "inline-flex items-center rounded-full px-2.5 py-1 font-bold text-xs transition-colors coarse:min-h-11 coarse:px-3.5";
 /** 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. */
-export const CHIP_OFF = "bg-b3 text-c2";
-/** A chip that can't be used right now: dimmed, with a not-allowed cursor. */
-export const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40";
+export const CHIP_OFF = "bg-b3 text-c2 contrast-more:inset-ring contrast-more:inset-ring-c4 forced-colors:border";
+/** A chip that can't be used right now: dimmed, with a not-allowed cursor (GrayText in forced
+ *  colors). */
+export const CHIP_UNAVAILABLE = "cursor-not-allowed opacity-40 forced-colors:text-[GrayText]";

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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
 /** Every native `<p>` prop except children, plus the count, the limit and the unit. */

package/dist/components/forms/CharCounter.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+import { textClasses } from "../basics/textStyles.js";
 const format = (value) => value.toLocaleString("en-US");
 /**
  * @function CharCounter
@@ -10,5 +11,9 @@ export function CharCounter({ count, limit, unit = "characters", live = false, c
     const over = count - 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) }));
+    return (_jsx("p", { className: textClasses({
+            tone: over > 0 ? "error" : "muted",
+            bold: over > 0,
+            className: cx("tabular-nums", 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/Checkbox.d.ts

@@ -6,7 +6,7 @@
  *       hint and error.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
 import { type FieldProps } from "./FieldFrame.js";
@@ -15,7 +15,8 @@ export type CheckboxProps = Omit<ComponentProps<"input">, "id" | "type"> & Field
 /**
  * @function Checkbox
  * @param props {CheckboxProps} native input props (`checked`, `defaultChecked`, `onChange`...),
- *        plus id, label, hint, error and wrapperClassName; `className` goes on the `<input>`
+ *        plus id, label, hideLabel, hint, error and wrapperClassName; `className` goes on the
+ *        `<input>`
  * @returns {JSX.Element} the checkbox row, and the error under it when given
  */
-export declare function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/forms/Checkbox.js

@@ -4,12 +4,13 @@ import { FieldError, fieldControlProps, hintId } from "./FieldFrame.js";
 /**
  * @function Checkbox
  * @param props {CheckboxProps} native input props (`checked`, `defaultChecked`, `onChange`...),
- *        plus id, label, hint, error and wrapperClassName; `className` goes on the `<input>`
+ *        plus id, label, hideLabel, hint, error and wrapperClassName; `className` goes on the
+ *        `<input>`
  * @returns {JSX.Element} the checkbox row, and the error under it when given
  */
-export function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }) {
+export function Checkbox({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }) {
     const labelId = `${id}-label`;
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", wrapperClassName), children: [_jsxs("label", { htmlFor: id, className: "flex items-start gap-2 text-sm", children: [_jsx("input", { ...props, type: "checkbox", ...fieldControlProps({ id, hint, error, describedBy, invalid }), "aria-labelledby": labelledBy ? `${labelId} ${labelledBy}` : labelId, 
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", wrapperClassName), children: [_jsxs("label", { htmlFor: id, className: "flex items-start gap-2 coarse:py-2.5 text-sm", children: [_jsx("input", { ...props, type: "checkbox", ...fieldControlProps({ id, hint, error, describedBy, invalid }), "aria-labelledby": labelledBy ? `${labelId} ${labelledBy}` : labelId, 
                         // 24px, the WCAG 2.2 target size; -mt-0.5 centers it on the first text-sm line.
-                        className: cx("-mt-0.5 size-6 shrink-0 accent-h1", className) }), _jsxs("span", { children: [_jsx("span", { id: labelId, className: "font-bold text-c1", children: label }), hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(id), children: hint })] })) : null] })] }), _jsx(FieldError, { id: id, error: error })] }));
+                        className: cx("-mt-0.5 size-6 shrink-0 accent-h1", className) }), _jsxs("span", { children: [_jsx("span", { id: labelId, className: cx("font-bold text-c1", hideLabel && "sr-only"), children: label }), hint ? (_jsxs("span", { className: "text-c3", children: [hideLabel ? null : " · ", _jsx("span", { id: hintId(id), children: hint })] })) : null] })] }), _jsx(FieldError, { id: id, error: error })] }));
 }

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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 /** The label, hint and error every form field takes, keyed on the control's required id. */
@@ -20,6 +20,11 @@ export type FieldProps = {
     hint?: ReactNode | undefined;
     /** Error text under the control (a list is fine). Marks the control aria-invalid and links it. */
     error?: ReactNode | undefined;
+    /**
+     * Hide the label visually. It still names the control (screen readers, voice control). Unlike
+     * a filter group's hideLabel, the label stays: only its look goes.
+     */
+    hideLabel?: boolean | undefined;
     /** Classes for the wrapper around the label, control, hint and error (layout, width). */
     wrapperClassName?: string | undefined;
 };
@@ -84,9 +89,9 @@ type FieldFrameProps = Omit<FieldProps, "wrapperClassName"> & {
 };
 /**
  * @function FieldFrame
- * @param props {FieldFrameProps} the control's id, label, hint, error, wrapper classes and the
- *        control itself as children
+ * @param props {FieldFrameProps} the control's id, label, hideLabel, hint, error, wrapper classes
+ *        and the control itself as children
  * @returns {JSX.Element} the label, control, hint and error stacked in a column
  */
-export declare function FieldFrame({ id, label, hint, error, className, children }: FieldFrameProps): import("react").JSX.Element;
+export declare function FieldFrame({ id, label, hideLabel, hint, error, className, children, }: FieldFrameProps): import("react").JSX.Element;
 export {};

package/dist/components/forms/FieldFrame.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+import { textClasses } from "../basics/textStyles.js";
 import { FIELD_LABEL } from "./fieldStyles.js";
 /**
  * @function hintId
@@ -44,14 +45,14 @@ 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: "status", className: "text-rose-300 text-sm", children: error })) : null;
+    return error ? (_jsx("div", { id: errorId(id), role: "status", className: textClasses({ tone: "error" }), children: error })) : null;
 }
 /**
  * @function FieldFrame
- * @param props {FieldFrameProps} the control's id, label, hint, error, wrapper classes and the
- *        control itself as children
+ * @param props {FieldFrameProps} the control's id, label, hideLabel, hint, error, wrapper classes
+ *        and the control itself as children
  * @returns {JSX.Element} the label, control, hint and error stacked in a column
  */
-export function FieldFrame({ id, label, hint, error, className, children }) {
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", className), children: [_jsx("label", { htmlFor: id, className: FIELD_LABEL, children: label }), children, hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
+export function FieldFrame({ id, label, hideLabel, hint, error, className, children, }) {
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", className), children: [_jsx("label", { htmlFor: id, className: cx(FIELD_LABEL, hideLabel && "sr-only"), children: label }), children, hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
 }

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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** One radio: its value, its label, an optional inline hint, and whether it can be picked. */
@@ -21,6 +21,8 @@ export type RadioOption = {
 export type RadioGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "children" | "defaultValue"> & {
     /** The legend, which names the group. */
     label: ReactNode;
+    /** Hide the legend visually; it still names the group. */
+    hideLabel?: boolean | undefined;
     options: readonly RadioOption[];
     /** The radios' name, for a form (default: a generated one). */
     name?: string | undefined;
@@ -43,4 +45,4 @@ export type RadioGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "chi
  *        the group's hint and error, plus native fieldset props (`disabled` turns off every radio)
  * @returns {JSX.Element} a `<fieldset>` with its `<legend>`, the radios, and the hint and error
  */
-export declare function RadioGroup({ label, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }: RadioGroupProps): import("react").JSX.Element;
+export declare function RadioGroup({ label, hideLabel, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }: RadioGroupProps): import("react").JSX.Element;

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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,11 +21,11 @@ import { FIELD_LABEL } from "./fieldStyles.js";
  *        the group's hint and error, plus native fieldset props (`disabled` turns off every radio)
  * @returns {JSX.Element} a `<fieldset>` with its `<legend>`, the radios, and the hint and error
  */
-export function RadioGroup({ label, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }) {
+export function RadioGroup({ label, hideLabel, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }) {
     const id = useId();
-    return (_jsxs("fieldset", { "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), className: cx("flex flex-col gap-2", className), ...props, children: [_jsx("legend", { className: cx("mb-1", FIELD_LABEL), children: label }), options.map((option, i) => {
+    return (_jsxs("fieldset", { "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), className: cx("flex flex-col gap-2", className), ...props, children: [_jsx("legend", { className: cx("mb-1", FIELD_LABEL, hideLabel && "sr-only"), children: label }), options.map((option, i) => {
                 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
+                return (_jsxs("label", { className: "flex items-start gap-2 coarse:py-2.5 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-labelledby": `${optionId}-label`, "aria-describedby": option.hint ? hintId(optionId) : undefined, onChange: () => onChange?.(option.value), 
                             // 24px, the WCAG 2.2 target size; -mt-0.5 centers it on the first text-sm line.

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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 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,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 Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,5 +54,5 @@ export function ReportDisclosure({ onSubmit, summary = "Report", label = "What's
         running.current = false;
         setPending(false);
     };
-    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 })] }));
+    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, 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/Select.d.ts

@@ -4,7 +4,7 @@
  *       through aria-describedby and aria-invalid. Options come in as children. Server-safe.
  * @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";
 import { type FieldProps } from "./FieldFrame.js";
@@ -12,8 +12,8 @@ import { type FieldProps } from "./FieldFrame.js";
 export type SelectProps = Omit<ComponentProps<"select">, "id"> & FieldProps;
 /**
  * @function Select
- * @param props {SelectProps} native select props with `<option>` children, plus id, label, hint,
- *        error and wrapperClassName; `className` goes on the `<select>`
+ * @param props {SelectProps} native select props with `<option>` children, plus id, label,
+ *        hideLabel, hint, error and wrapperClassName; `className` goes on the `<select>`
  * @returns {JSX.Element} a label, the select, and the hint and error when given
  */
-export declare function Select({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Select({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: SelectProps): import("react").JSX.Element;

package/dist/components/forms/Select.js

@@ -3,10 +3,10 @@ import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @function Select
- * @param props {SelectProps} native select props with `<option>` children, plus id, label, hint,
- *        error and wrapperClassName; `className` goes on the `<select>`
+ * @param props {SelectProps} native select props with `<option>` children, plus id, label,
+ *        hideLabel, hint, error and wrapperClassName; `className` goes on the `<select>`
  * @returns {JSX.Element} a label, the select, and the hint and error when given
  */
-export function Select({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
-    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("select", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
+export function Select({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
+    return (_jsx(FieldFrame, { id: id, label: label, hideLabel: hideLabel, hint: hint, error: error, className: wrapperClassName, children: _jsx("select", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
 }

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

@@ -4,7 +4,7 @@
  *       aria-describedby and aria-invalid. Server-safe: the required id names the hint and error.
  * @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";
 import { type FieldProps } from "./FieldFrame.js";
@@ -12,8 +12,8 @@ import { type FieldProps } from "./FieldFrame.js";
 export type TextInputProps = Omit<ComponentProps<"input">, "id"> & FieldProps;
 /**
  * @function TextInput
- * @param props {TextInputProps} native input props, plus id, label, hint, error and
+ * @param props {TextInputProps} native input props, plus id, label, hideLabel, hint, error and
  *        wrapperClassName; `className` goes on the `<input>`
  * @returns {JSX.Element} a label, the input, and the hint and error when given
  */
-export declare function TextInput({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: TextInputProps): import("react").JSX.Element;
+export declare function TextInput({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: TextInputProps): import("react").JSX.Element;