@haruhimemoe/ui 0.11.1 → 0.12.0

package/dist/components/forms/TextInput.js

@@ -3,10 +3,10 @@ import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @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 function TextInput({ 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("input", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
+export function TextInput({ 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("input", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
 }

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

@@ -1,10 +1,12 @@
 /**
  * @file src/components/forms/Textarea.tsx
  * @desc Labeled textarea on the shared field look (at least 6rem tall, resizes vertically), with
- *       an optional hint and error wired through aria-describedby and aria-invalid. Server-safe.
+ *       an optional hint and error wired through aria-describedby and aria-invalid. Repeats
+ *       `coarse:min-h-24` so tailwind-merge drops the field look's `coarse:min-h-11`: a 44px
+ *       minimum would shrink the textarea on a touch screen. 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 +14,8 @@ import { type FieldProps } from "./FieldFrame.js";
 export type TextareaProps = Omit<ComponentProps<"textarea">, "id"> & FieldProps;
 /**
  * @function Textarea
- * @param props {TextareaProps} native textarea props, plus id, label, hint, error and
+ * @param props {TextareaProps} native textarea props, plus id, label, hideLabel, hint, error and
  *        wrapperClassName; `className` goes on the `<textarea>`
  * @returns {JSX.Element} a label, the textarea, and the hint and error when given
  */
-export declare function Textarea({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ id, label, hideLabel, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/components/forms/Textarea.js

@@ -4,10 +4,10 @@ import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @function Textarea
- * @param props {TextareaProps} native textarea props, plus id, label, hint, error and
+ * @param props {TextareaProps} native textarea props, plus id, label, hideLabel, hint, error and
  *        wrapperClassName; `className` goes on the `<textarea>`
  * @returns {JSX.Element} a label, the textarea, and the hint and error when given
  */
-export function Textarea({ 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("textarea", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(cx("min-h-24 resize-y", className)) }) }));
+export function Textarea({ 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("textarea", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(cx("coarse:min-h-24 min-h-24 resize-y", className)) }) }));
 }

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

@@ -6,7 +6,7 @@
  *       delete and transfer forms, as one component.
  * @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";
 import type { ButtonVariant } from "../basics/buttonStyles.js";

package/dist/components/forms/TypeToConfirm.js

@@ -6,7 +6,7 @@
  *       delete and transfer forms, as one component.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,5 +42,5 @@ export function TypeToConfirm({ id, expected, label = `Type ${expected} to confi
             setPending(false);
         }
     };
-    return (_jsxs("form", { onSubmit: submit, className: cx("flex flex-col gap-3", className), ...props, children: [children, _jsx(TextInput, { id: id, label: label, hint: hint, error: error, value: typed, autoComplete: "off", autoCapitalize: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: variant, className: "self-start", disabled: !matches || pending, children: pending && pendingLabel !== undefined ? pendingLabel : submitLabel })] }));
+    return (_jsxs("form", { onSubmit: submit, className: cx("flex flex-col gap-3", className), ...props, children: [children, _jsx(TextInput, { id: id, label: label, hint: hint, error: error, value: typed, autoComplete: "off", autoCapitalize: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: variant, disabled: !matches || pending, children: pending && pendingLabel !== undefined ? pendingLabel : submitLabel })] }));
 }

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

@@ -1,12 +1,14 @@
 /**
  * @file src/components/forms/fieldStyles.ts
- *  * @desc Shared field classes for TextInput, Select, Textarea and RangeBox (the packs look), and
+ * @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.
+ *       takes focus, when the h1 border and ring take over so focus stays visible. On a coarse
+ *       pointer a field is 44px tall with 16px text (iOS Safari zooms into smaller text); under
+ *       more contrast its border is c4.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 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,15 +1,17 @@
 /**
  * @file src/components/forms/fieldStyles.ts
- *  * @desc Shared field classes for TextInput, Select, Textarea and RangeBox (the packs look), and
+ * @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.
+ *       takes focus, when the h1 border and ring take over so focus stays visible. On a coarse
+ *       pointer a field is 44px tall with 16px text (iOS Safari zooms into smaller text); under
+ *       more contrast its border is c4.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 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 disabled:opacity-50 aria-invalid:border-rose-400 aria-invalid:focus-visible:border-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 coarse:min-h-11 coarse:text-base contrast-more:border-c4";
 /** A field or group label: bold c3 at text-sm (internal). */
 export const FIELD_LABEL = "font-bold text-c3 text-sm";
 /**

package/dist/components/mdx/CodeBlock.d.ts

@@ -6,7 +6,7 @@
  *       Server-safe: the only client piece is the copy button (CodeCopyButton).
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
 /** The code (any line endings, trailing newline optional), language, title, highlighted lines

package/dist/components/mdx/CodeBlock.js

@@ -37,7 +37,7 @@ export async function CodeBlock({ code, lang, title, highlight = [], className,
     const lines = tokens ?? text.split("\n").map((content) => [{ content, offset: 0 }]);
     const marked = new Set(highlight);
     const name = title ?? lang;
-    return (_jsxs("div", { className: cx("mt-3 overflow-hidden rounded-md border border-b3 bg-b6", className), ...rest, children: [_jsxs("div", { className: "flex min-h-9 items-center justify-between gap-3 border-b3 border-b px-3 py-1 text-c3 text-sm", children: [_jsx("span", { className: "truncate", children: name ?? "Code" }), _jsx(CodeCopyButton, { code: text, label: title ? `Copy ${title}` : "Copy code" })] }), _jsx("pre", { role: "group", 
+    return (_jsxs("div", { className: cx("mt-3 overflow-hidden rounded-md border border-b3 bg-b6 contrast-more:border-c4", className), ...rest, children: [_jsxs("div", { className: "flex min-h-9 items-center justify-between gap-3 border-b3 border-b px-3 py-1 text-c3 text-sm", children: [_jsx("span", { className: "truncate", children: name ?? "Code" }), _jsx(CodeCopyButton, { code: text, label: title ? `Copy ${title}` : "Copy code" })] }), _jsx("pre", { role: "group", 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region needs keyboard focus
                 tabIndex: 0, "aria-label": name ? `Code: ${name}` : "Code", className: "overflow-x-auto py-3 text-c2 text-sm leading-6", children: _jsx("code", { children: lines.flatMap((line, index) => {
                         const span = (_jsx("span", { className: marked.has(index + 1) ? MARKED : LINE, "data-highlighted": marked.has(index + 1) ? "" : undefined, children: line.map((token, i) => tokens ? (_jsx("span", { style: tokenStyle(token), children: token.content }, i)) : (token.content)) }, index));

package/dist/components/mdx/CodeCopyButton.d.ts

@@ -6,7 +6,7 @@
  *       string and never imports cx, keeping tailwind-merge out of the client bundle.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 /** The code to copy, and the button's accessible name (e.g. "Copy x.ts" or "Copy code"). */
 export type CodeCopyButtonProps = {

package/dist/components/mdx/CodeCopyButton.js

@@ -6,13 +6,13 @@
  *       string and never imports cx, keeping tailwind-merge out of the client bundle.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusOutput } from "../actions/StatusOutput.js";
 import { useLatestStatus } from "../actions/useLatestStatus.js";
-const BUTTON = "inline-flex min-h-6 min-w-6 items-center justify-center rounded px-2 py-0.5 text-c2 text-sm hover:bg-b4 hover:text-c1";
+const BUTTON = "inline-flex min-h-6 min-w-6 items-center justify-center rounded px-2 py-0.5 text-c2 text-sm hover:bg-b4 hover:text-c1 coarse:min-h-11 coarse:min-w-11";
 /**
  * @function CodeCopyButton
  * @param props {CodeCopyButtonProps} the code to copy and the button's accessible name

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

@@ -2,22 +2,27 @@
  * @file src/components/osu/ModBadge.tsx
  * @desc A mod pool slot's pill (NM1, HD2, TB), colored by its mod bucket the way tournament
  *       sheets and packs.haruhime.moe color them: NM sky, HD amber, HR rose, DT and NC violet,
- *       FM emerald, TB orange. Anything else is a quiet b3 pill; `className` recolors it (a
- *       custom bucket). Server-safe.
+ *       FM emerald, TB orange. Anything else is a quiet b3 pill; `color` picks any of 17 colors
+ *       (the buckets', the pool palette's and neutral) for a custom bucket. Server-safe.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps } from "react";
-/** Every native `<span>` prop (including `ref`), plus the slot or mod it shows. */
-export type ModBadgeProps = ComponentProps<"span"> & {
+/** A badge color: the six bucket colors, @haruhimemoe/pool's PALETTE names, or neutral. */
+export type ModBadgeColor = "sky" | "amber" | "rose" | "violet" | "emerald" | "orange" | "green" | "teal" | "pink" | "lime" | "cyan" | "fuchsia" | "yellow" | "red" | "indigo" | "stone" | "neutral";
+/** Every native `<span>` prop (except the legacy `color`), plus the slot and an optional color. */
+export type ModBadgeProps = Omit<ComponentProps<"span">, "color"> & {
     /** A mod or slot label ("HD", "NM1", "TB"). Its first two letters pick the color. */
     mod: string;
+    /** Overrides the color picked from the mod's first two letters. */
+    color?: ModBadgeColor | undefined;
 };
 /**
  * @function ModBadge
- * @param props {ModBadgeProps} the mod or slot label, and native span props (children replace
- *        the shown text; a `title` can name the bucket)
- * @returns {JSX.Element} a rounded pill in the bucket's color with dark text, or b3 with c2 text
+ * @param props {ModBadgeProps} the mod or slot label, an optional color, and native span props
+ *        (children replace the shown text; a `title` can name the bucket)
+ * @returns {JSX.Element} a rounded pill in the color (or the bucket's), dark text on color, c2 on
+ *          neutral
  */
-export declare function ModBadge({ mod, className, children, ...props }: ModBadgeProps): import("react").JSX.Element;
+export declare function ModBadge({ mod, color, className, children, ...props }: ModBadgeProps): import("react").JSX.Element;

package/dist/components/osu/ModBadge.js

@@ -1,22 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+// Literal classes, so the app's Tailwind finds them through theme.css's @source. Every background
+// is light enough for text-b6 at 4.5:1 or more.
+const COLORS = {
+    sky: "bg-sky-400 text-b6",
+    amber: "bg-amber-300 text-b6",
+    rose: "bg-rose-400 text-b6",
+    violet: "bg-violet-400 text-b6",
+    emerald: "bg-emerald-400 text-b6",
+    orange: "bg-orange-400 text-b6",
+    green: "bg-green-400 text-b6",
+    teal: "bg-teal-300 text-b6",
+    pink: "bg-pink-400 text-b6",
+    lime: "bg-lime-300 text-b6",
+    cyan: "bg-cyan-300 text-b6",
+    fuchsia: "bg-fuchsia-400 text-b6",
+    yellow: "bg-yellow-300 text-b6",
+    red: "bg-red-400 text-b6",
+    indigo: "bg-indigo-300 text-b6",
+    stone: "bg-stone-300 text-b6",
+    neutral: "bg-b3 text-c2",
+};
 const BUCKETS = {
-    NM: "bg-sky-400",
-    HD: "bg-amber-300",
-    HR: "bg-rose-400",
-    DT: "bg-violet-400",
-    NC: "bg-violet-400",
-    FM: "bg-emerald-400",
-    TB: "bg-orange-400",
+    NM: "sky",
+    HD: "amber",
+    HR: "rose",
+    DT: "violet",
+    NC: "violet",
+    FM: "emerald",
+    TB: "orange",
+};
+const BASE = "inline-flex min-w-11 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-2 py-0.5 font-extrabold text-xs forced-colors:border";
+/** The color's classes: `color` when it is one, else the mod's bucket, else neutral. */
+const colorClasses = (color, mod) => {
+    if (color !== undefined && Object.hasOwn(COLORS, color))
+        return COLORS[color];
+    const bucket = BUCKETS[mod.slice(0, 2).toUpperCase()];
+    return COLORS[bucket ?? "neutral"];
 };
-const BASE = "inline-flex min-w-11 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-2 py-0.5 font-extrabold text-xs";
 /**
  * @function ModBadge
- * @param props {ModBadgeProps} the mod or slot label, and native span props (children replace
- *        the shown text; a `title` can name the bucket)
- * @returns {JSX.Element} a rounded pill in the bucket's color with dark text, or b3 with c2 text
+ * @param props {ModBadgeProps} the mod or slot label, an optional color, and native span props
+ *        (children replace the shown text; a `title` can name the bucket)
+ * @returns {JSX.Element} a rounded pill in the color (or the bucket's), dark text on color, c2 on
+ *          neutral
  */
-export function ModBadge({ mod, className, children, ...props }) {
-    const color = BUCKETS[mod.slice(0, 2).toUpperCase()];
-    return (_jsx("span", { className: cx(BASE, color ? `${color} text-b6` : "bg-b3 text-c2", className), ...props, children: children ?? mod }));
+export function ModBadge({ mod, color, className, children, ...props }) {
+    return (_jsx("span", { className: cx(BASE, colorClasses(color, mod), className), ...props, children: children ?? mod }));
 }

package/dist/components/palette/CommandPalette.d.ts

@@ -8,7 +8,7 @@
  *       Mount once, inside a client component, since commands carry functions.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { CommandPaletteProps } from "./types.js";
 export type { CommandPaletteProps } from "./types.js";

package/dist/components/palette/CommandPalette.js

@@ -8,7 +8,7 @@
  *       Mount once, inside a client component, since commands carry functions.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,7 +29,7 @@ import { useProviderSearch } from "./useProviderSearch.js";
 const NONE = [];
 const CHORD_MS = 800;
 const DIALOG = "m-0 h-dvh max-h-none w-full max-w-none bg-transparent p-0 text-c1 backdrop:bg-b6/70 backdrop:backdrop-blur-sm sm:h-auto sm:pt-[12vh]";
-const PANEL = "mx-auto flex h-full max-h-dvh w-full flex-col overflow-hidden border-b3 bg-b6 shadow-2xl sm:h-auto sm:max-h-[70vh] sm:max-w-xl sm:rounded-xl sm:border";
+const PANEL = "mx-auto flex h-full max-h-dvh w-full flex-col overflow-hidden border-b3 bg-b6 shadow-2xl sm:h-auto sm:max-h-[70vh] sm:max-w-xl sm:rounded-xl sm:border contrast-more:border-c4";
 /**
  * @function CommandPalette
  * @param props {CommandPaletteProps} commands, root providers, storage key, hotkey, placeholder,

package/dist/components/palette/PaletteInput.d.ts

@@ -7,7 +7,7 @@
  *       always mounted, so a message that appears is announced.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import { type Ref } from "react";
 /** The input's state and ids. */

package/dist/components/palette/PaletteInput.js

@@ -7,11 +7,12 @@
  *       always mounted, so a message that appears is announced.
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { TEXT_TONES } from "../basics/textTones.js";
 /**
  * @function PaletteInput
  * @param props {PaletteInputProps} value, placeholder, name, crumbs, list and active ids, error
@@ -19,5 +20,5 @@ import { useId } from "react";
  */
 export function PaletteInput({ ref, value, placeholder, label, crumbs, listId, activeId, error, onChange, }) {
     const errorId = `${useId()}-error`;
-    return (_jsxs("div", { className: "border-b4 border-b has-[input:focus-visible]:border-h1", children: [_jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [crumbs.map((crumb, index) => (_jsx("span", { className: "shrink-0 rounded bg-b4 px-2 py-0.5 text-c3 text-xs", children: crumb }, index))), _jsx("input", { ref: ref, type: "text", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": activeId, "aria-autocomplete": "list", "aria-label": label, "aria-invalid": error ? true : undefined, "aria-describedby": errorId, autoComplete: "off", spellCheck: false, value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), className: "min-w-0 flex-1 bg-transparent text-base text-c1 outline-hidden placeholder:text-c4 sm:text-lg" })] }), _jsx("p", { id: errorId, role: "status", className: error ? "px-4 pb-2 text-rose-300 text-xs" : "sr-only", children: error })] }));
+    return (_jsxs("div", { className: "border-b4 border-b has-[input:focus-visible]:border-h1", children: [_jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [crumbs.map((crumb, index) => (_jsx("span", { className: "shrink-0 rounded bg-b4 px-2 py-0.5 text-c3 text-xs", children: crumb }, index))), _jsx("input", { ref: ref, type: "text", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": activeId, "aria-autocomplete": "list", "aria-label": label, "aria-invalid": error ? true : undefined, "aria-describedby": errorId, autoComplete: "off", spellCheck: false, value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), className: "min-w-0 flex-1 bg-transparent text-base text-c1 outline-hidden placeholder:text-c4 sm:text-lg" })] }), _jsx("p", { id: errorId, role: "status", className: error ? `px-4 pb-2 text-xs ${TEXT_TONES.error}` : "sr-only", children: error })] }));
 }

package/dist/components/palette/PaletteRow.d.ts

@@ -6,7 +6,7 @@
  *       on the dialog, so this isn't focusable (aria-activedescendant names it).
  * @author David @dvhsh (https://dvh.sh)
  * @created Sat Oct 3, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { FuzzyMatch } from "./fuzzy.js";
 import type { Command } from "./types.js";

package/dist/components/palette/PaletteRow.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { displayShortcut, parseShortcut } from "./hotkeys.js";
 // The active row shows its state with an h1 edge, not background alone: bg-b4 on b6 is only
-// 1.5:1. min-h-9 keeps every row a 36px target.
-const ROW = "flex min-h-9 cursor-default items-center gap-3 rounded-lg border-l-2 border-transparent px-3 py-2";
+// 1.5:1. min-h-9 keeps every row a 36px target, 44px on a coarse pointer.
+const ROW = "flex min-h-9 cursor-default items-center gap-3 rounded-lg border-l-2 border-transparent px-3 py-2 coarse:min-h-11";
 const ACTIVE = `${ROW} border-h1 bg-b4 forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`;
-const KBD = "rounded border border-b3 bg-b5 px-1.5 font-sans text-c3 text-xs";
+const KBD = "rounded border border-b3 bg-b5 px-1.5 font-sans text-c3 text-xs contrast-more:border-c4";
 const highlighted = (title, ranges) => {
     const parts = [];
     let at = 0;

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

@@ -6,7 +6,7 @@
  *       a click on a link, or focus leaving it closes it too.
  * @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 link in the panel. */

package/dist/components/shell/HeaderMenu.js

@@ -6,14 +6,14 @@
  *       a click on a link, or focus leaving it closes it too.
  * @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";
 import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../utils/cx.js";
 import { AutoLink } from "../basics/AutoLink.js";
-const ITEM = "block rounded px-3 py-2 font-bold text-c2 text-sm hover:bg-b4 hover:text-c1";
+const ITEM = "block rounded px-3 py-2 font-bold text-c2 text-sm hover:bg-b4 hover:text-c1 coarse:py-3";
 /**
  * @function HeaderMenu
  * @param props {HeaderMenuProps} the button's content, the links, extra controls as children, the
@@ -54,5 +54,5 @@ export function HeaderMenu({ label, items = [], children, align = "end", buttonL
             box?.removeEventListener("focusout", onFocusOut);
         };
     }, [open]);
-    return (_jsxs("div", { ref: wrapper, className: cx("relative", className), ...props, children: [_jsx("button", { ref: button, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": buttonLabel, onClick: () => setOpen(!open), className: cx("flex min-h-6 items-center gap-2 font-bold text-c1 text-sm transition-colors hover:text-h1", buttonClassName), children: label }), _jsxs("div", { id: panelId, hidden: !open, className: cx("absolute z-10 mt-2 w-44 flex-col gap-1 rounded-lg border border-b3 bg-b6 p-2", open && "flex", align === "end" ? "right-0" : "left-0"), children: [items.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, className: ITEM, onClick: () => setOpen(false), children: item.label }) }, item.href))) })) : null, children] })] }));
+    return (_jsxs("div", { ref: wrapper, className: cx("relative", className), ...props, children: [_jsx("button", { ref: button, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": buttonLabel, onClick: () => setOpen(!open), className: cx("flex coarse:min-h-11 min-h-6 items-center gap-2 font-bold text-c1 text-sm transition-colors hover:text-h1", buttonClassName), children: label }), _jsxs("div", { id: panelId, hidden: !open, className: cx("absolute z-10 mt-2 w-44 flex-col gap-1 rounded-lg border border-b3 bg-b6 p-2 contrast-more:border-c4", open && "flex", align === "end" ? "right-0" : "left-0"), children: [items.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, className: ITEM, onClick: () => setOpen(false), children: item.label }) }, item.href))) })) : null, children] })] }));
 }

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

@@ -5,7 +5,7 @@
  *       loads its own URL. Server-safe: the caller says which link is current.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sun Oct 4, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
 /** One tab: where it links, its text, and whether it is the page being shown. */

package/dist/components/shell/LinkTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
 import { AutoLink } from "../basics/AutoLink.js";
-const TAB = "rounded-full px-3 py-1 font-bold text-sm transition-colors";
+const TAB = "inline-flex items-center rounded-full px-3 py-1 font-bold text-sm transition-colors coarse:min-h-11";
 // Forced-colors mode drops the pill's background, so the current tab is underlined there.
 const CURRENT = "bg-b3 text-c1 forced-colors:underline";
 const OTHER = "text-c3 hover:text-c1";

package/dist/index.d.ts

@@ -23,8 +23,11 @@ export { Notice, type NoticeProps, type NoticeTone } from "./components/basics/N
 export { PageHeader, type PageHeaderProps } from "./components/basics/PageHeader.js";
 export { Prose, type ProseProps } from "./components/basics/Prose.js";
 export { type TabItem, Tabs, type TabsProps } from "./components/basics/Tabs.js";
+export { Text, type TextProps } from "./components/basics/Text.js";
 export { TextLink, type TextLinkProps } from "./components/basics/TextLink.js";
 export { tabId, tabPanelId } from "./components/basics/tabIds.js";
+export { type TextClassOptions, type TextSize, type TextTone, textClasses, } from "./components/basics/textStyles.js";
+export { useMotionAllowed } from "./components/basics/useMotionAllowed.js";
 export { BrandPage, type BrandPageAsset, type BrandPageFont, type BrandPageProps, } from "./components/brand/BrandPage.js";
 export { BrandSwatch, type BrandSwatchProps } from "./components/brand/BrandSwatch.js";
 export { ContentIndex, type ContentIndexProps } from "./components/content/ContentIndex.js";
@@ -58,7 +61,7 @@ export { HaruhimeWordmark, type HaruhimeWordmarkProps, } from "./components/icon
 export { HaruhimeWordmarkLink, type HaruhimeWordmarkLinkProps, } from "./components/icons/HaruhimeWordmarkLink.js";
 export { JsonLd, type JsonLdProps } from "./components/meta/JsonLd.js";
 export { type BeatmapStatKey, BeatmapStats, type BeatmapStatsProps, } from "./components/osu/BeatmapStats.js";
-export { ModBadge, type ModBadgeProps } from "./components/osu/ModBadge.js";
+export { ModBadge, type ModBadgeColor, type ModBadgeProps, } from "./components/osu/ModBadge.js";
 export { PlayerCard, type PlayerCardProps, type PlayerTeam, } from "./components/osu/PlayerCard.js";
 export { StarRating, type StarRatingProps } from "./components/osu/StarRating.js";
 export { CommandPalette } from "./components/palette/CommandPalette.js";

package/dist/index.js

@@ -24,8 +24,11 @@ export { Notice } from "./components/basics/Notice.js";
 export { PageHeader } from "./components/basics/PageHeader.js";
 export { Prose } from "./components/basics/Prose.js";
 export { Tabs } from "./components/basics/Tabs.js";
+export { Text } from "./components/basics/Text.js";
 export { TextLink } from "./components/basics/TextLink.js";
 export { tabId, tabPanelId } from "./components/basics/tabIds.js";
+export { textClasses, } from "./components/basics/textStyles.js";
+export { useMotionAllowed } from "./components/basics/useMotionAllowed.js";
 // Brand
 export { BrandPage, } from "./components/brand/BrandPage.js";
 export { BrandSwatch } from "./components/brand/BrandSwatch.js";
@@ -64,7 +67,7 @@ export { HaruhimeWordmarkLink, } from "./components/icons/HaruhimeWordmarkLink.j
 export { JsonLd } from "./components/meta/JsonLd.js";
 // osu!
 export { BeatmapStats, } from "./components/osu/BeatmapStats.js";
-export { ModBadge } from "./components/osu/ModBadge.js";
+export { ModBadge, } from "./components/osu/ModBadge.js";
 export { PlayerCard, } from "./components/osu/PlayerCard.js";
 export { StarRating } from "./components/osu/StarRating.js";
 // Palette

package/dist/theme.css

@@ -13,9 +13,13 @@
  *       (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.
+ *
+ *       It also follows three browser settings: prefers-reduced-motion (one global rule,
+ *       data-motion="essential" opts out), prefers-contrast: more (--contrast-lift) and a coarse
+ *       pointer (the coarse: variant).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 
 /* This file ships as dist/theme.css, so './' is the package's compiled components. */
@@ -23,9 +27,21 @@
 
 :root {
   --hue: 333;
+  --contrast-lift: 0%;
   color-scheme: dark;
 }
 
+/* More contrast: c2, c3, c4 and h1 get lighter and h2 darker by the lift. An app opts out with
+   --contrast-lift: 0%; the lift adds to its own --h1-l and --h2-l. */
+@media (prefers-contrast: more) {
+  :root {
+    --contrast-lift: 8%;
+  }
+}
+
+/* A touchscreen as the main pointer. The same query as Tailwind's pointer-coarse:, shorter. */
+@custom-variant coarse (@media (pointer: coarse));
+
 @theme inline {
   --color-b1: hsl(var(--hue) 10% 40%);
   --color-b2: hsl(var(--hue) 10% 30%);
@@ -35,16 +51,30 @@
   --color-b6: hsl(var(--hue) 10% 10%);
 
   --color-c1: hsl(var(--hue) 40% 100%);
-  --color-c2: hsl(var(--hue) 40% 90%);
-  --color-c3: hsl(var(--hue) 40% 80%);
-  --color-c4: hsl(var(--hue) 40% 70%);
+  --color-c2: hsl(var(--hue) 40% calc(var(--c2-l, 90%) + var(--contrast-lift)));
+  --color-c3: hsl(var(--hue) 40% calc(var(--c3-l, 80%) + var(--contrast-lift)));
+  --color-c4: hsl(var(--hue) 40% calc(var(--c4-l, 70%) + var(--contrast-lift)));
 
-  --color-h1: hsl(var(--hue) 100% var(--h1-l, 76%));
-  --color-h2: hsl(var(--hue) 50% var(--h2-l, 45%));
+  --color-h1: hsl(var(--hue) 100% calc(var(--h1-l, 76%) + var(--contrast-lift)));
+  --color-h2: hsl(var(--hue) 50% calc(var(--h2-l, 45%) - var(--contrast-lift) / 2));
 
   --font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
 }
 
+/* Motion tokens. A plain @theme, not inline, so utilities read the variables and one change
+   reaches every user: duration-short (hovers, presses, color changes), duration-medium (panels,
+   dialogs), duration-long (large surfaces); ease-standard, ease-enter, ease-exit. */
+@theme {
+  --transition-duration-short: 150ms;
+  --transition-duration-medium: 250ms;
+  --transition-duration-long: 400ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --default-transition-duration: var(--transition-duration-short);
+  --default-transition-timing-function: var(--ease-standard);
+}
+
 /* CodeBlock reads these as Shiki's CSS-variables theme. Every token keeps 4.5:1 against both b6
    (the block's background) and b4 (the highlighted-line tint) at every integer --hue. The keyword
    and link tokens get their own hue-derived value instead of var(--color-h1): that variable's
@@ -69,4 +99,24 @@
     outline-offset: 2px;
     border-radius: 4px;
   }
+
+  /* The one reduced-motion rule for the family: the browser setting, no in-app toggle. 0.01ms, not
+     0, so transitionend and animationend still fire. !important in the base layer beats every
+     normal declaration in later layers, so an app's own duration-* or animate-* can't escape it.
+     data-motion="essential" keeps motion that carries meaning. Pseudo-elements can't sit inside
+     :where() or :not(), so each gets its own selector. */
+  @media (prefers-reduced-motion: reduce) {
+    :where(*:not([data-motion="essential"], [data-motion="essential"] *)),
+    :where(*:not([data-motion="essential"], [data-motion="essential"] *))::before,
+    :where(*:not([data-motion="essential"], [data-motion="essential"] *))::after {
+      /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat utility and inline transitions */
+      animation-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat utility and inline transitions */
+      animation-iteration-count: 1 !important;
+      /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat utility and inline transitions */
+      transition-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat utility and inline transitions */
+      scroll-behavior: auto !important;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.11.1",
+  "version": "0.12.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 player cards, a command palette, content section tooling, brand pages and the site header and footer.",
   "keywords": [
     "osu",