@misoto22/design 0.7.0 → 0.9.0

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoveHorizontal } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { clampToRange, parseNumber, snapToStep } from "../../lib/numeric.js";
+const PX_PER_STEP = 4;
+const COARSE = 10;
+function NumberField({
+  value,
+  defaultValue,
+  onValueChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  unit,
+  scrub = true,
+  invalid,
+  disabled,
+  className,
+  ref,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  const unitId = useId();
+  const [uncontrolled, setUncontrolled] = useState(
+    defaultValue ?? (Number.isFinite(min) ? min : 0)
+  );
+  const current = value ?? uncontrolled;
+  const [draft, setDraft] = useState(null);
+  const draftRef = useRef(null);
+  const setDraftText = (text) => {
+    draftRef.current = text;
+    setDraft(text);
+  };
+  const emit = (next) => {
+    if (value === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+  };
+  const settle = (next) => emit(clampToRange(snapToStep(next, step, Number.isFinite(min) ? min : 0), min, max));
+  const entry = useRef(current);
+  const drag = useRef(null);
+  const startScrub = (event) => {
+    if (event.button !== 0 || disabled) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startValue: current,
+      // A scrub is spatial, so it follows the reading direction the way the
+      // slider's own track does: in an RTL page, more is to the left.
+      sign: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+    };
+  };
+  const moveScrub = (event) => {
+    const state = drag.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const notches = Math.round((event.clientX - state.startX) / PX_PER_STEP) * state.sign;
+    settle(state.startValue + notches * step * (event.shiftKey ? COARSE : 1));
+  };
+  const endScrub = (event) => {
+    if (drag.current?.pointerId !== event.pointerId) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    drag.current = null;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", disabled && "opacity-(--disabled-opacity)", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "number",
+        inputMode: "decimal",
+        disabled,
+        value: draft ?? String(current),
+        min: Number.isFinite(min) ? min : void 0,
+        max: Number.isFinite(max) ? max : void 0,
+        step,
+        "aria-describedby": [describedBy, unit ? unitId : null].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+        onFocus: (event) => {
+          entry.current = current;
+          onFocus?.(event);
+        },
+        onChange: (event) => {
+          setDraftText(event.target.value);
+          const parsed = parseNumber(event.target.value);
+          if (parsed !== null) emit(parsed);
+          onChange?.(event);
+        },
+        onBlur: (event) => {
+          const text = draftRef.current;
+          const parsed = text === null ? null : parseNumber(text);
+          if (parsed !== null) settle(parsed);
+          setDraftText(null);
+          onBlur?.(event);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const text = draftRef.current;
+            const parsed = text === null ? null : parseNumber(text);
+            if (parsed !== null) settle(parsed);
+            setDraftText(null);
+          }
+          if (event.key === "Escape") {
+            emit(entry.current);
+            setDraftText(null);
+            event.currentTarget.blur();
+          }
+          onKeyDown?.(event);
+        },
+        className: cn(
+          CONTROL_BASE,
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          "tabular-nums",
+          // Full literal strings: Tailwind only emits what it can read here.
+          scrub && "ps-9",
+          unit && "pe-12",
+          // Three browsers, three spinners, none of them this system's.
+          "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        ),
+        ...rest
+      }
+    ),
+    scrub && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        onPointerDown: startScrub,
+        onPointerMove: moveScrub,
+        onPointerUp: endScrub,
+        onPointerCancel: endScrub,
+        className: cn(
+          "absolute inset-y-0 start-0 flex touch-none select-none items-center ps-2.5 text-(--ink-3-aa) transition-colors duration-(--duration-fast)",
+          disabled ? "pointer-events-none" : "cursor-ew-resize hover:text-(--ink)"
+        ),
+        children: /* @__PURE__ */ jsx(MoveHorizontal, { className: "size-4" })
+      }
+    ),
+    unit && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: unitId,
+        className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-sm text-(--ink-3-aa)",
+        children: unit
+      }
+    )
+  ] });
+}
+var NumberField_default = NumberField;
+export {
+  NumberField,
+  NumberField_default as default
+};
+//# sourceMappingURL=NumberField.js.map

package/dist/components/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["'use client'\n\nimport { MoveHorizontal } from 'lucide-react'\nimport { useId, useRef, useState, type InputHTMLAttributes, type PointerEvent, type Ref } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { clampToRange, parseNumber, snapToStep } from '../../lib/numeric'\n\n/**\n * Pixels of travel per step while scrubbing.\n *\n * Four is the number a pointer reads as \"one notch\". At one or two the value\n * runs away from the hand; past about eight the gesture stops feeling like it\n * is driving anything and a reader goes back to typing.\n */\nconst PX_PER_STEP = 4\n\n/** How much Shift multiplies a scrub by. Ten, as in every drawing tool. */\nconst COARSE = 10\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'type'> {\n  value?: number\n  defaultValue?: number\n  /** Fires with the parsed number. Raw `onChange` still fires with the event. */\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  /** The increment for the arrows and for one notch of a scrub. */\n  step?: number\n  /**\n   * A unit drawn inside the end of the field — `%`, `px`, `ms`.\n   *\n   * The field reserves a fixed slot for it, so keep it to about four\n   * characters; a longer one runs under a long number. It is announced through\n   * `aria-describedby` as well as drawn, because a unit nobody hears turns\n   * \"300\" into a number with no dimension.\n   */\n  unit?: string\n  /**\n   * A grip at the start of the field that changes the value as it is dragged.\n   *\n   * On by default, and the reason to reach for this over `<Input type=\"number\">`:\n   * a value that is being TUNED — a duration, a weight, an offset — is found by\n   * sweeping through neighbouring values, not by typing candidates one at a\n   * time. Shift multiplies the travel by ten.\n   *\n   * Pointer only, and `aria-hidden` for that reason: the same journey on a\n   * keyboard is the arrow keys on the field itself, which the platform already\n   * provides. Turn it off where the number is a quantity rather than a setting\n   * — a line item's quantity is chosen, not swept to.\n   */\n  scrub?: boolean\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLInputElement>\n}\n\n/**\n * A number, typed or swept to.\n *\n * `Input` with `type=\"number\"` is a box that happens to reject letters. This is\n * the control for a number that has a RANGE and a sensible increment: the\n * arrows step it, the grip sweeps it, and `min`, `max` and `step` are honoured\n * on the way out rather than merely announced.\n *\n * Reach for `Slider` instead when the position along the range is the\n * information — a volume, a confidence, anything a reader judges by where the\n * thumb sits. Reach for this when the digits are. A slider that also has to be\n * exact is a `Slider` with `editable`, not one of these beside it.\n *\n * **Clamping happens when the field is left, not while it is being typed.** A\n * minimum of 10 would otherwise make 50 unreachable: the `5` is clamped up to\n * 10 before the `0` arrives. So `onValueChange` can report a number outside the\n * range mid-keystroke, and the value that settles is always inside it.\n *\n * The native spinner buttons are hidden — they are three different controls in\n * three browsers, and none of them is this system's. The grip replaces them for\n * a pointer; the arrow keys were always the keyboard's answer.\n *\n * @example\n * <Field label=\"Line height\"><NumberField defaultValue={1.5} min={1} max={3} step={0.1} /></Field>\n * @example\n * <Field label=\"Timeout\"><NumberField defaultValue={30} min={0} max={600} unit=\"s\" /></Field>\n */\nexport function NumberField({\n  value,\n  defaultValue,\n  onValueChange,\n  min = Number.NEGATIVE_INFINITY,\n  max = Number.POSITIVE_INFINITY,\n  step = 1,\n  unit,\n  scrub = true,\n  invalid,\n  disabled,\n  className,\n  ref,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NumberFieldProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  const unitId = useId()\n\n  const [uncontrolled, setUncontrolled] = useState<number>(\n    defaultValue ?? (Number.isFinite(min) ? min : 0),\n  )\n  const current = value ?? uncontrolled\n\n  // Non-null only while the box is being typed into. The field shows the draft\n  // verbatim then, so a half-typed \"1.\" or \"-\" survives to the next keystroke\n  // instead of being rewritten into a number the moment it parses.\n  //\n  // Mirrored into a ref because Escape has to clear it and then blur the field\n  // in the SAME event: `setDraft(null)` has not been applied by the time the\n  // blur handler runs, so a handler reading the state variable would still see\n  // the abandoned text and commit it.\n  const [draft, setDraft] = useState<string | null>(null)\n  const draftRef = useRef<string | null>(null)\n  const setDraftText = (text: string | null) => {\n    draftRef.current = text\n    setDraft(text)\n  }\n\n  const emit = (next: number) => {\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  /** Reconciles a number with the range and the step, then commits it. */\n  const settle = (next: number) => emit(clampToRange(snapToStep(next, step, Number.isFinite(min) ? min : 0), min, max))\n\n  // What the value was when the box gained focus, so Escape has something to\n  // go back to: the raw emits above have already moved it by then.\n  const entry = useRef(current)\n\n  const drag = useRef<{ pointerId: number; startX: number; startValue: number; sign: 1 | -1 } | null>(null)\n\n  const startScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    if (event.button !== 0 || disabled) return\n    // Otherwise the gesture selects the text of the field it is dragging over.\n    event.preventDefault()\n    event.currentTarget.setPointerCapture(event.pointerId)\n    drag.current = {\n      pointerId: event.pointerId,\n      startX: event.clientX,\n      startValue: current,\n      // A scrub is spatial, so it follows the reading direction the way the\n      // slider's own track does: in an RTL page, more is to the left.\n      sign: getComputedStyle(event.currentTarget).direction === 'rtl' ? -1 : 1,\n    }\n  }\n\n  const moveScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    const state = drag.current\n    if (!state || state.pointerId !== event.pointerId) return\n    const notches = Math.round((event.clientX - state.startX) / PX_PER_STEP) * state.sign\n    settle(state.startValue + notches * step * (event.shiftKey ? COARSE : 1))\n  }\n\n  const endScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    if (drag.current?.pointerId !== event.pointerId) return\n    event.currentTarget.releasePointerCapture(event.pointerId)\n    drag.current = null\n  }\n\n  return (\n    <div className={cn('relative w-full', disabled && 'opacity-(--disabled-opacity)', className)}>\n      <input\n        ref={ref}\n        type=\"number\"\n        inputMode=\"decimal\"\n        disabled={disabled}\n        value={draft ?? String(current)}\n        min={Number.isFinite(min) ? min : undefined}\n        max={Number.isFinite(max) ? max : undefined}\n        step={step}\n        aria-describedby={[describedBy, unit ? unitId : null].filter(Boolean).join(' ') || undefined}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        onFocus={(event) => {\n          entry.current = current\n          onFocus?.(event)\n        }}\n        onChange={(event) => {\n          setDraftText(event.target.value)\n          // The raw number, unclamped — see the note on the component.\n          const parsed = parseNumber(event.target.value)\n          if (parsed !== null) emit(parsed)\n          onChange?.(event)\n        }}\n        onBlur={(event) => {\n          const text = draftRef.current\n          const parsed = text === null ? null : parseNumber(text)\n          if (parsed !== null) settle(parsed)\n          setDraftText(null)\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter') {\n            const text = draftRef.current\n            const parsed = text === null ? null : parseNumber(text)\n            if (parsed !== null) settle(parsed)\n            setDraftText(null)\n          }\n          if (event.key === 'Escape') {\n            emit(entry.current)\n            setDraftText(null)\n            event.currentTarget.blur()\n          }\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          CONTROL_BASE,\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          'tabular-nums',\n          // Full literal strings: Tailwind only emits what it can read here.\n          scrub && 'ps-9',\n          unit && 'pe-12',\n          // Three browsers, three spinners, none of them this system's.\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...rest}\n      />\n      {scrub && (\n        <span\n          // Not a button: it commits nothing, has no keyboard journey of its\n          // own, and announcing it would give a reader a control that does\n          // nothing when they press it. The arrow keys on the field are the\n          // keyboard's path to the same values.\n          aria-hidden=\"true\"\n          onPointerDown={startScrub}\n          onPointerMove={moveScrub}\n          onPointerUp={endScrub}\n          onPointerCancel={endScrub}\n          className={cn(\n            'absolute inset-y-0 start-0 flex touch-none select-none items-center ps-2.5 text-(--ink-3-aa) transition-colors duration-(--duration-fast)',\n            disabled ? 'pointer-events-none' : 'cursor-ew-resize hover:text-(--ink)',\n          )}\n        >\n          <MoveHorizontal className=\"size-4\" />\n        </span>\n      )}\n      {unit && (\n        <span\n          id={unitId}\n          className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-sm text-(--ink-3-aa)\"\n        >\n          {unit}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default NumberField\n"],"mappings":"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","names":[]}

package/dist/components/Pagination/Pagination.d.ts

@@ -10,6 +10,24 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'>
     /** How many numbered pages sit either side of the current one. */
     siblings?: number;
     label?: string;
+    /**
+     * Names the two step controls.
+     *
+     * Each is a chevron and nothing else, so these strings are its entire
+     * accessible name — the same reason `AppShell` exposes `openLabel` and
+     * `closeLabel` rather than baking them in.
+     */
+    previousLabel?: string;
+    nextLabel?: string;
+    /**
+     * Names one numbered page.
+     *
+     * A function rather than a template, because the number does not sit in the
+     * same place in every language and neither does the noun around it —
+     * `"Page 3"`, `"第 3 页"`, `"Seite 3"`. The visible digit is the same either
+     * way; this is what a screen reader hears instead of a bare number.
+     */
+    pageLabel?: (page: number) => string;
 }
 declare const GAP: "\u2026";
 /**
@@ -36,9 +54,14 @@ declare function paginationRange(page: number, pageCount: number, siblings?: num
  *
  * Renders nothing at one page or fewer. A pager for a single page is furniture.
  *
+ * Every string a reader hears is a prop. The chevrons carry no text, so
+ * `previousLabel` and `nextLabel` are the whole of those two controls' names,
+ * and `pageLabel` is a function because "Page 3" is a phrase whose parts move
+ * around between languages.
+ *
  * @example
  * <Pagination page={page} pageCount={12} onPageChange={setPage} />
  */
-declare function Pagination({ page, pageCount, onPageChange, siblings, label, className, ...rest }: PaginationProps): react.JSX.Element | null;
+declare function Pagination({ page, pageCount, onPageChange, siblings, label, previousLabel, nextLabel, pageLabel, className, ...rest }: PaginationProps): react.JSX.Element | null;
 
 export { Pagination, type PaginationProps, Pagination as default, paginationRange };

package/dist/components/Pagination/Pagination.js

@@ -34,6 +34,9 @@ function Pagination({
   onPageChange,
   siblings = 1,
   label = "Pagination",
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  pageLabel = (page2) => `Page ${page2}`,
   className,
   ...rest
 }) {
@@ -45,7 +48,7 @@ function Pagination({
       "button",
       {
         type: "button",
-        "aria-label": "Previous page",
+        "aria-label": previousLabel,
         disabled: page <= 1,
         onClick: () => onPageChange(page - 1),
         className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),
@@ -74,7 +77,7 @@ function Pagination({
           {
             type: "button",
             "aria-current": entry === page ? "page" : void 0,
-            "aria-label": `Page ${entry}`,
+            "aria-label": pageLabel(entry),
             "data-indicator-active": entry === page ? "true" : void 0,
             onClick: () => onPageChange(entry),
             className: cn(
@@ -91,7 +94,7 @@ function Pagination({
       "button",
       {
         type: "button",
-        "aria-label": "Next page",
+        "aria-label": nextLabel,
         disabled: page >= pageCount,
         onClick: () => onPageChange(page + 1),
         className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label=\"Previous page\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronLeft size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-m22-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={`Page ${entry}`}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label=\"Next page\"\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronRight size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n  /**\n   * Names the two step controls.\n   *\n   * Each is a chevron and nothing else, so these strings are its entire\n   * accessible name — the same reason `AppShell` exposes `openLabel` and\n   * `closeLabel` rather than baking them in.\n   */\n  previousLabel?: string\n  nextLabel?: string\n  /**\n   * Names one numbered page.\n   *\n   * A function rather than a template, because the number does not sit in the\n   * same place in every language and neither does the noun around it —\n   * `\"Page 3\"`, `\"第 3 页\"`, `\"Seite 3\"`. The visible digit is the same either\n   * way; this is what a screen reader hears instead of a bare number.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * Every string a reader hears is a prop. The chevrons carry no text, so\n * `previousLabel` and `nextLabel` are the whole of those two controls' names,\n * and `pageLabel` is a function because \"Page 3\" is a phrase whose parts move\n * around between languages.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  previousLabel = 'Previous page',\n  nextLabel = 'Next page',\n  pageLabel = (page) => `Page ${page}`,\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronLeft size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-m22-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={pageLabel(entry)}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronRight size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":["page"]}

package/dist/components/Popover/Popover.js

@@ -26,7 +26,7 @@ function PopoverContent({
       sideOffset,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 panel-blur",
+        "z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 shadow-(--panel-lift) panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { X } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix Popover root, trigger, anchor and close, as typed passthroughs. */\nexport const Popover = PopoverPrimitive.Root\nexport const PopoverTrigger = PopoverPrimitive.Trigger\nexport const PopoverAnchor = PopoverPrimitive.Anchor\nexport const PopoverClose = PopoverPrimitive.Close\n\nexport interface PopoverContentProps\n  extends ComponentProps<typeof PopoverPrimitive.Content> {\n  /** Names the panel for assistive tech. Required — a popover is a dialog. */\n  label: string\n  /** Show the top-end close control. */\n  showClose?: boolean\n}\n\n/**\n * A panel anchored to a control, holding content the reader can interact with.\n *\n * The line against `Tooltip` is not visual, it is behavioural: a tooltip\n * describes and cannot be entered; a popover holds things you tab to. Anything\n * with a link, a field or a button in it is a popover, and putting that inside\n * a tooltip makes it unreachable — the tooltip closes as soon as focus tries to\n * move into it.\n *\n * Against `DropdownMenu`: a menu is a list of actions with menu semantics and\n * arrow-key navigation. A popover is free-form, and its contents Tab like the\n * rest of the page.\n *\n * @example\n * <Popover>\n *   <PopoverTrigger asChild><Button variant=\"secondary\">Filters</Button></PopoverTrigger>\n *   <PopoverContent label=\"Filters\">\n *     <Field label=\"Status\"><Select>…</Select></Field>\n *   </PopoverContent>\n * </Popover>\n */\nexport function PopoverContent({\n  label,\n  showClose = false,\n  className,\n  sideOffset = 8,\n  children,\n  ...rest\n}: PopoverContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? undefined}>\n      <PopoverPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        aria-label={label}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n        {showClose && (\n          <PopoverPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-2 top-2 grid size-8 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={14} strokeWidth={1.5} aria-hidden />\n          </PopoverPrimitive.Close>\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport default Popover\n"],"mappings":";AAuDM,SAmBM,KAnBN;AArDN,YAAY,sBAAsB;AAClC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AACxC,MAAM,gBAAgB,iBAAiB;AACvC,MAAM,eAAe,iBAAiB;AA+BtC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,iBAAiB,QAAjB,EAAwB,WAAW,aAAa,QAC/C;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,QAC7C;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { X } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix Popover root, trigger, anchor and close, as typed passthroughs. */\nexport const Popover = PopoverPrimitive.Root\nexport const PopoverTrigger = PopoverPrimitive.Trigger\nexport const PopoverAnchor = PopoverPrimitive.Anchor\nexport const PopoverClose = PopoverPrimitive.Close\n\nexport interface PopoverContentProps\n  extends ComponentProps<typeof PopoverPrimitive.Content> {\n  /** Names the panel for assistive tech. Required — a popover is a dialog. */\n  label: string\n  /** Show the top-end close control. */\n  showClose?: boolean\n}\n\n/**\n * A panel anchored to a control, holding content the reader can interact with.\n *\n * The line against `Tooltip` is not visual, it is behavioural: a tooltip\n * describes and cannot be entered; a popover holds things you tab to. Anything\n * with a link, a field or a button in it is a popover, and putting that inside\n * a tooltip makes it unreachable — the tooltip closes as soon as focus tries to\n * move into it.\n *\n * Against `DropdownMenu`: a menu is a list of actions with menu semantics and\n * arrow-key navigation. A popover is free-form, and its contents Tab like the\n * rest of the page.\n *\n * @example\n * <Popover>\n *   <PopoverTrigger asChild><Button variant=\"secondary\">Filters</Button></PopoverTrigger>\n *   <PopoverContent label=\"Filters\">\n *     <Field label=\"Status\"><Select>…</Select></Field>\n *   </PopoverContent>\n * </Popover>\n */\nexport function PopoverContent({\n  label,\n  showClose = false,\n  className,\n  sideOffset = 8,\n  children,\n  ...rest\n}: PopoverContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? undefined}>\n      <PopoverPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        aria-label={label}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 shadow-(--panel-lift) panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n        {showClose && (\n          <PopoverPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-2 top-2 grid size-8 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={14} strokeWidth={1.5} aria-hidden />\n          </PopoverPrimitive.Close>\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport default Popover\n"],"mappings":";AAuDM,SAmBM,KAnBN;AArDN,YAAY,sBAAsB;AAClC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AACxC,MAAM,gBAAgB,iBAAiB;AACvC,MAAM,eAAe,iBAAiB;AA+BtC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,iBAAiB,QAAjB,EAAwB,WAAW,aAAa,QAC/C;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,QAC7C;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/Progress/Progress.d.ts

@@ -2,13 +2,25 @@ import * as react from 'react';
 import { ComponentProps } from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {
+interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value' | 'max'> {
     /**
-     * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the
-     * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a
-     * screen reader is told "indeterminate" rather than a number that is a guess.
+     * 0 to `max`, which is 100 unless you say otherwise. Omit (or pass `null`)
+     * when the duration is genuinely unknown — the bar then sweeps instead of
+     * filling, and Radix drops `aria-valuenow` so a screen reader is told
+     * "indeterminate" rather than a number that is a guess.
      */
     value?: number | null;
+    /**
+     * What `value` is measured against. 100 by default.
+     *
+     * The width is computed from it as well as announced from it. It used to be
+     * only announced: `max` reached Radix through `...rest` while the width was
+     * `value` clamped to 100, so `max={500}` with `value={100}` painted a full
+     * bar and told a screen reader "100 of 500". A max that is not a positive
+     * number is refused the way Radix refuses it — Radix warns, and both fall
+     * back to 100 rather than drawing one picture and announcing another.
+     */
+    max?: number;
     /** Names what is progressing. Required: a bare bar announces nothing. */
     label: string;
     /** Prints the percentage above the bar. Only meaningful when `value` is set. */
@@ -26,6 +38,6 @@ interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Roo
  * @example
  * <Progress label="Indexing" />
  */
-declare function Progress({ value, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
+declare function Progress({ value, max, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
 
 export { Progress, type ProgressProps, Progress as default };

package/dist/components/Progress/Progress.js

@@ -2,21 +2,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../../lib/cn.js";
-function Progress({ value = null, label, showValue = false, className, ...rest }) {
+import { warnBlankName } from "../../lib/warn.js";
+function Progress({
+  value = null,
+  max,
+  label,
+  showValue = false,
+  className,
+  ...rest
+}) {
+  warnBlankName("Progress", "label", label, "the progressbar is announced with no name and its percentage describes nothing");
   const indeterminate = value === null || value === void 0;
-  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value));
+  const ceiling = typeof max === "number" && !Number.isNaN(max) && max > 0 ? max : 100;
+  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value));
+  const percent = bounded / ceiling * 100;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     showValue && !indeterminate && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
       /* @__PURE__ */ jsx("span", { children: label }),
       /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
-        Math.round(clamped),
+        Math.round(percent),
         "%"
       ] })
     ] }),
     /* @__PURE__ */ jsx(
       ProgressPrimitive.Root,
       {
-        value: indeterminate ? null : clamped,
+        value: indeterminate ? null : bounded,
+        max,
         "aria-label": label,
         className: "relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)",
         ...rest,
@@ -24,13 +36,13 @@ function Progress({ value = null, label, showValue = false, className, ...rest }
           "span",
           {
             "data-m22-animated": true,
-            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40"
+            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite]"
           }
         ) : /* @__PURE__ */ jsx(
           ProgressPrimitive.Indicator,
           {
             className: "h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)",
-            style: { width: `${clamped}%` }
+            style: { width: `${percent}%` }
           }
         )
       }

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /**\n   * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the\n   * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a\n   * screen reader is told \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /** Names what is progressing. Required: a bare bar announces nothing. */\n  label: string\n  /** Prints the percentage above the bar. Only meaningful when `value` is set. */\n  showValue?: boolean\n}\n\n/**\n * A bar that fills, or sweeps when the end is unknown.\n *\n * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no\n * gradient and no glow, so the only thing carrying the reading is the boundary\n * between the two.\n *\n * @example\n * <Progress value={62} label=\"Uploading photos\" showValue />\n * @example\n * <Progress label=\"Indexing\" />\n */\nexport function Progress({ value = null, label, showValue = false, className, ...rest }: ProgressProps) {\n  const indeterminate = value === null || value === undefined\n  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value))\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {showValue && !indeterminate && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{label}</span>\n          <span className=\"tabular-nums\">{Math.round(clamped)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : clamped}\n        aria-label={label}\n        className=\"relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)\"\n        {...rest}\n      >\n        {indeterminate ? (\n          <span\n            data-m22-animated\n            // A quarter-width bar travelling the track. `transform` only, so it\n            // runs on the compositor and never triggers layout. `rtl:-scale-x-100`\n            // mirrors the whole motion rather than needing a second keyframe:\n            // in a right-to-left document the sweep has to run the other way, or\n            // it reads as progress running backwards.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40\"\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            // Width, not a translate. A `translateX(-N%)` fill has to be negated\n            // in a right-to-left document, and an inline style cannot carry a\n            // direction variant — so the bar grew from the wrong edge. Width\n            // grows from the inline start on its own, in either direction.\n            className=\"h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)\"\n            style={{ width: `${clamped}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAwCU,cACA,YADA;AAtCV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AA4BZ,SAAS,SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,KAAK,GAAkB;AACtG,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAClD,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AAEpE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBAAa,CAAC,iBACb,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACb,qBAAC,UAAK,WAAU,gBAAgB;AAAA,aAAK,MAAM,OAAO;AAAA,QAAE;AAAA,SAAC;AAAA,OACvD;AAAA,IAEF;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,gBAAgB,OAAO;AAAA,QAC9B,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YAMjB,WAAU;AAAA;AAAA,QACZ,IAEA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YAKC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA;AAAA,QAChC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value' | 'max'> {\n  /**\n   * 0 to `max`, which is 100 unless you say otherwise. Omit (or pass `null`)\n   * when the duration is genuinely unknown — the bar then sweeps instead of\n   * filling, and Radix drops `aria-valuenow` so a screen reader is told\n   * \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /**\n   * What `value` is measured against. 100 by default.\n   *\n   * The width is computed from it as well as announced from it. It used to be\n   * only announced: `max` reached Radix through `...rest` while the width was\n   * `value` clamped to 100, so `max={500}` with `value={100}` painted a full\n   * bar and told a screen reader \"100 of 500\". A max that is not a positive\n   * number is refused the way Radix refuses it — Radix warns, and both fall\n   * back to 100 rather than drawing one picture and announcing another.\n   */\n  max?: number\n  /** Names what is progressing. Required: a bare bar announces nothing. */\n  label: string\n  /** Prints the percentage above the bar. Only meaningful when `value` is set. */\n  showValue?: boolean\n}\n\n/**\n * A bar that fills, or sweeps when the end is unknown.\n *\n * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no\n * gradient and no glow, so the only thing carrying the reading is the boundary\n * between the two.\n *\n * @example\n * <Progress value={62} label=\"Uploading photos\" showValue />\n * @example\n * <Progress label=\"Indexing\" />\n */\nexport function Progress({\n  value = null,\n  max,\n  label,\n  showValue = false,\n  className,\n  ...rest\n}: ProgressProps) {\n  warnBlankName('Progress', 'label', label, 'the progressbar is announced with no name and its percentage describes nothing')\n  const indeterminate = value === null || value === undefined\n  // Radix's own test for a usable max, so the fallback below is the same\n  // fallback it applies — and `max` is forwarded raw, so Radix still prints the\n  // warning rather than this component swallowing a bad prop quietly.\n  const ceiling = typeof max === 'number' && !Number.isNaN(max) && max > 0 ? max : 100\n  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value))\n  const percent = (bounded / ceiling) * 100\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {showValue && !indeterminate && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{label}</span>\n          <span className=\"tabular-nums\">{Math.round(percent)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : bounded}\n        max={max}\n        aria-label={label}\n        className=\"relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)\"\n        {...rest}\n      >\n        {indeterminate ? (\n          <span\n            data-m22-animated\n            // A quarter-width bar travelling the track. `transform` only, so it\n            // runs on the compositor and never triggers layout. `rtl:-scale-x-100`\n            // mirrors the whole motion rather than needing a second keyframe:\n            // in a right-to-left document the sweep has to run the other way, or\n            // it reads as progress running backwards.\n            //\n            // Nothing overrides it under `motion-reduce`, and that is the fix\n            // rather than an omission: it used to become `w-full` at 40%\n            // opacity, which is the shape of a FINISHED bar at rest, so a\n            // reader who asked for less motion was told the operation was done.\n            // Still, it is a quarter of the track at the inline start — the\n            // same answer Spinner gives, where a ring that has stopped turning\n            // still reads as unfinished because it is not a whole circle.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite]\"\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            // Width, not a translate. A `translateX(-N%)` fill has to be negated\n            // in a right-to-left document, and an inline style cannot carry a\n            // direction variant — so the bar grew from the wrong edge. Width\n            // grows from the inline start on its own, in either direction.\n            className=\"h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)\"\n            style={{ width: `${percent}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAkEU,cACA,YADA;AAhEV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAwCvB,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,gBAAc,YAAY,SAAS,OAAO,gFAAgF;AAC1H,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAIlD,QAAM,UAAU,OAAO,QAAQ,YAAY,CAAC,OAAO,MAAM,GAAG,KAAK,MAAM,IAAI,MAAM;AACjF,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC;AACxE,QAAM,UAAW,UAAU,UAAW;AAEtC,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBAAa,CAAC,iBACb,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACb,qBAAC,UAAK,WAAU,gBAAgB;AAAA,aAAK,MAAM,OAAO;AAAA,QAAE;AAAA,SAAC;AAAA,OACvD;AAAA,IAEF;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,gBAAgB,OAAO;AAAA,QAC9B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YAcjB,WAAU;AAAA;AAAA,QACZ,IAEA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YAKC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA;AAAA,QAChC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

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

@@ -11,6 +11,12 @@ type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
  * requires and what a stack of hand-rolled `<input type="radio">` wrappers
  * usually gets wrong.
  *
+ * Inside a `Field` the group takes its name from that label, by pointing back
+ * at it: the root is a `<div role="radiogroup">` and `<label for>` does not bind
+ * to one, so the words above it click through no more than a `<legend>` does.
+ * Standing alone, it still needs an `aria-label` of its own — an unnamed group
+ * is three unlabelled radios.
+ *
  * @example
  * <RadioGroup defaultValue="light" aria-label="Theme">
  *   <RadioGroupItem value="light">Light</RadioGroupItem>

package/dist/components/RadioGroup/RadioGroup.js

@@ -3,9 +3,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useEffect, useRef } from "react";
 import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../Field/field-control.js";
 const ARROW_GRACE_MS = 300;
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("flex flex-col gap-2.5", className), ...props });
+  const field = useFieldControl();
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "aria-labelledby": named ? void 0 : field?.labelId,
+      className: cn("flex flex-col gap-2.5", className),
+      ...props
+    }
+  );
 }
 function RadioGroupItem({ children, className, id, onFocus, ...props }) {
   const arrowPressedAt = useRef(0);

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { useEffect, useRef, type ComponentProps, type FocusEvent, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * How recently an arrow key was pressed, in milliseconds, for selection to\n * still count as \"caused by\" it.\n *\n * A boolean cleared on `keyup` — which is how the upstream primitive tracks\n * this — loses the race: the roving focus moves through a React state update,\n * and by the time the commit lands and the element takes focus, a normal\n * keypress has already released. The result is a group whose arrow keys move\n * the outline and select nothing, which is half the ARIA radiogroup pattern\n * missing. A timestamp cannot be cleared out from under the focus handler.\n */\nconst ARROW_GRACE_MS = 300\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>\n\n/**\n * A set of mutually exclusive choices.\n *\n * Radix owns the roving tabindex, so the whole group is ONE tab stop and the\n * arrow keys move between options — which is what the ARIA radiogroup pattern\n * requires and what a stack of hand-rolled `<input type=\"radio\">` wrappers\n * usually gets wrong.\n *\n * @example\n * <RadioGroup defaultValue=\"light\" aria-label=\"Theme\">\n *   <RadioGroupItem value=\"light\">Light</RadioGroupItem>\n *   <RadioGroupItem value=\"dark\">Dark</RadioGroupItem>\n * </RadioGroup>\n */\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive.Root className={cn('flex flex-col gap-2.5', className)} {...props} />\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {\n  /** The visible label. Rendered inside the `<label>` that wraps the control. */\n  children: ReactNode\n}\n\n/**\n * One option, and its label, as a single click target.\n *\n * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle\n * is below every pointer-target guideline and is miserable on a phone. It is\n * also what gives the control its accessible name: remove the wrapper and the\n * radio has no name at all.\n *\n * Selection follows focus, which is the half of the pattern that makes a\n * radiogroup usable from the keyboard: moving to an option chooses it, so\n * nobody has to press an extra key to commit. That is implemented here rather\n * than inherited, because the upstream primitive gates it on a flag cleared by\n * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.\n * Re-selecting an already-selected option is a no-op, so this stays correct\n * even where the upstream path does fire.\n */\nexport function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps) {\n  const arrowPressedAt = useRef(0)\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.startsWith('Arrow')) arrowPressedAt.current = Date.now()\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n  }, [])\n\n  const selectOnArrowFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event)\n    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click()\n  }\n\n  return (\n    <label className={cn('flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)', className)}>\n      <RadioGroupPrimitive.Item\n        id={id}\n        onFocus={selectOnArrowFocus}\n        className=\"grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"size-2.5 rounded-full bg-(--accent)\" />\n      </RadioGroupPrimitive.Item>\n      {children}\n    </label>\n  )\n}\n\nexport default RadioGroup\n"],"mappings":";AAoCS,cA0CL,YA1CK;AAlCT,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AAanB,MAAM,iBAAiB;AAkBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAAO;AACjG;AAwBO,SAAS,eAAe,EAAE,UAAU,WAAW,IAAI,SAAS,GAAG,MAAM,GAAwB;AAClG,QAAM,iBAAiB,OAAO,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,IAAI,WAAW,OAAO,EAAG,gBAAe,UAAU,KAAK,IAAI;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,CAAC,UAAyC;AACnE,cAAU,KAAK;AACf,QAAI,KAAK,IAAI,IAAI,eAAe,UAAU,eAAgB,OAAM,cAAc,MAAM;AAAA,EACtF;AAEA,SACE,qBAAC,WAAM,WAAW,GAAG,mEAAmE,SAAS,GAC/F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,uCAAsC;AAAA;AAAA,IACjF;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { useEffect, useRef, type ComponentProps, type FocusEvent, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\n\n/**\n * How recently an arrow key was pressed, in milliseconds, for selection to\n * still count as \"caused by\" it.\n *\n * A boolean cleared on `keyup` — which is how the upstream primitive tracks\n * this — loses the race: the roving focus moves through a React state update,\n * and by the time the commit lands and the element takes focus, a normal\n * keypress has already released. The result is a group whose arrow keys move\n * the outline and select nothing, which is half the ARIA radiogroup pattern\n * missing. A timestamp cannot be cleared out from under the focus handler.\n */\nconst ARROW_GRACE_MS = 300\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>\n\n/**\n * A set of mutually exclusive choices.\n *\n * Radix owns the roving tabindex, so the whole group is ONE tab stop and the\n * arrow keys move between options — which is what the ARIA radiogroup pattern\n * requires and what a stack of hand-rolled `<input type=\"radio\">` wrappers\n * usually gets wrong.\n *\n * Inside a `Field` the group takes its name from that label, by pointing back\n * at it: the root is a `<div role=\"radiogroup\">` and `<label for>` does not bind\n * to one, so the words above it click through no more than a `<legend>` does.\n * Standing alone, it still needs an `aria-label` of its own — an unnamed group\n * is three unlabelled radios.\n *\n * @example\n * <RadioGroup defaultValue=\"light\" aria-label=\"Theme\">\n *   <RadioGroupItem value=\"light\">Light</RadioGroupItem>\n *   <RadioGroupItem value=\"dark\">Dark</RadioGroupItem>\n * </RadioGroup>\n */\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  return (\n    <RadioGroupPrimitive.Root\n      aria-labelledby={named ? undefined : field?.labelId}\n      className={cn('flex flex-col gap-2.5', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {\n  /** The visible label. Rendered inside the `<label>` that wraps the control. */\n  children: ReactNode\n}\n\n/**\n * One option, and its label, as a single click target.\n *\n * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle\n * is below every pointer-target guideline and is miserable on a phone. It is\n * also what gives the control its accessible name: remove the wrapper and the\n * radio has no name at all.\n *\n * Selection follows focus, which is the half of the pattern that makes a\n * radiogroup usable from the keyboard: moving to an option chooses it, so\n * nobody has to press an extra key to commit. That is implemented here rather\n * than inherited, because the upstream primitive gates it on a flag cleared by\n * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.\n * Re-selecting an already-selected option is a no-op, so this stays correct\n * even where the upstream path does fire.\n */\nexport function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps) {\n  const arrowPressedAt = useRef(0)\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.startsWith('Arrow')) arrowPressedAt.current = Date.now()\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n  }, [])\n\n  const selectOnArrowFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event)\n    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click()\n  }\n\n  return (\n    <label className={cn('flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)', className)}>\n      <RadioGroupPrimitive.Item\n        id={id}\n        onFocus={selectOnArrowFocus}\n        className=\"grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"size-2.5 rounded-full bg-(--accent)\" />\n      </RadioGroupPrimitive.Item>\n      {children}\n    </label>\n  )\n}\n\nexport default RadioGroup\n"],"mappings":";AA+CI,cA+CA,YA/CA;AA7CJ,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAahC,MAAM,iBAAiB;AAwBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAEzE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAC5C,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAwBO,SAAS,eAAe,EAAE,UAAU,WAAW,IAAI,SAAS,GAAG,MAAM,GAAwB;AAClG,QAAM,iBAAiB,OAAO,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,IAAI,WAAW,OAAO,EAAG,gBAAe,UAAU,KAAK,IAAI;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,CAAC,UAAyC;AACnE,cAAU,KAAK;AACf,QAAI,KAAK,IAAI,IAAI,eAAe,UAAU,eAAgB,OAAM,cAAc,MAAM;AAAA,EACtF;AAEA,SACE,qBAAC,WAAM,WAAW,GAAG,mEAAmE,SAAS,GAC/F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,uCAAsC;AAAA;AAAA,IACjF;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -8,6 +8,15 @@ interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root
      * keyboard stop, and an unnamed stop announces "group" and nothing else.
      */
     label: string;
+    /**
+     * Which axes get a bar — and therefore which axes scroll at all. Radix sets
+     * the viewport's overflow from the bars that are mounted, so an axis without
+     * one is `hidden`: what is past that edge is not merely unmarked, it is
+     * unreachable by every key and every gesture.
+     *
+     * `both` is the default for that reason. Narrow it only when clipping the
+     * other axis is the thing you meant.
+     */
     orientation?: 'vertical' | 'horizontal' | 'both';
 }
 /**
@@ -23,6 +32,12 @@ interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root
  * needs no component. This is for a bounded panel: a long option list, a log,
  * a sidebar that outgrows its column.
  *
+ * Both axes scroll unless a caller says otherwise. The old vertical default
+ * read as a statement about which bar to draw and was in fact a statement about
+ * which half of the content existed: Radix sets the viewport's overflow from
+ * the mounted bars, so the axis without one was `hidden` and everything past it
+ * was unreachable — silently, and with the content perfectly well rendered.
+ *
  * @example
  * <ScrollArea label="Deploy log" className="h-48">…</ScrollArea>
  */

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,7 +4,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/cn.js";
 function ScrollArea({
   label,
-  orientation = "vertical",
+  orientation = "both",
   className,
   children,
   ...props
@@ -22,7 +22,7 @@ function ScrollArea({
             tabIndex: 0,
             role: "region",
             "aria-label": label,
-            className: "size-full rounded-[inherit]",
+            className: "relative size-full rounded-[inherit]",
             children
           }
         ),

package/dist/components/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client'\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Names the region. Required, and not decoration: a scroll container is a\n   * keyboard stop, and an unnamed stop announces \"group\" and nothing else.\n   */\n  label: string\n  orientation?: 'vertical' | 'horizontal' | 'both'\n}\n\n/**\n * A box that scrolls, with a scrollbar that looks the same on every platform.\n *\n * The reason to reach for this over `overflow-auto` is not the scrollbar — it\n * is that Radix keeps the viewport focusable and the bar operable, which a bare\n * overflow container does not. A scrollable region whose contents are not\n * themselves focusable is unreachable by keyboard: there is nothing to Tab to,\n * so everything past the fold does not exist without a mouse.\n *\n * For a page-level or prose scroll, the `scroll-slim` utility is lighter and\n * needs no component. This is for a bounded panel: a long option list, a log,\n * a sidebar that outgrows its column.\n *\n * @example\n * <ScrollArea label=\"Deploy log\" className=\"h-48\">…</ScrollArea>\n */\nexport function ScrollArea({\n  label,\n  orientation = 'vertical',\n  className,\n  children,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      type=\"hover\"\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        className=\"size-full rounded-[inherit]\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {(orientation === 'vertical' || orientation === 'both') && <Bar orientation=\"vertical\" />}\n      {(orientation === 'horizontal' || orientation === 'both') && <Bar orientation=\"horizontal\" />}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction Bar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none p-0.5 transition-colors duration-(--duration-fast)',\n        orientation === 'vertical' ? 'h-full w-2' : 'h-2 flex-col',\n      )}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-(--radius-pill) bg-(--rule-2)\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport default ScrollArea\n"],"mappings":";AAuCI,SAKE,KALF;AArCJ,YAAY,yBAAyB;AAErC,SAAS,UAAU;AA2BZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC,oBAAoB;AAAA,UAApB;AAAA,YACC,UAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,SACE,gBAAgB,cAAc,gBAAgB,WAAW,oBAAC,OAAI,aAAY,YAAW;AAAA,SACrF,gBAAgB,gBAAgB,gBAAgB,WAAW,oBAAC,OAAI,aAAY,cAAa;AAAA,QAC3F,oBAAC,oBAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,IAAI,EAAE,YAAY,GAA+C;AACxE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,eAAe;AAAA,MAC9C;AAAA,MAEA,8BAAC,oBAAoB,OAApB,EAA0B,WAAU,yDAAwD;AAAA;AAAA,EAC/F;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client'\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Names the region. Required, and not decoration: a scroll container is a\n   * keyboard stop, and an unnamed stop announces \"group\" and nothing else.\n   */\n  label: string\n  /**\n   * Which axes get a bar — and therefore which axes scroll at all. Radix sets\n   * the viewport's overflow from the bars that are mounted, so an axis without\n   * one is `hidden`: what is past that edge is not merely unmarked, it is\n   * unreachable by every key and every gesture.\n   *\n   * `both` is the default for that reason. Narrow it only when clipping the\n   * other axis is the thing you meant.\n   */\n  orientation?: 'vertical' | 'horizontal' | 'both'\n}\n\n/**\n * A box that scrolls, with a scrollbar that looks the same on every platform.\n *\n * The reason to reach for this over `overflow-auto` is not the scrollbar — it\n * is that Radix keeps the viewport focusable and the bar operable, which a bare\n * overflow container does not. A scrollable region whose contents are not\n * themselves focusable is unreachable by keyboard: there is nothing to Tab to,\n * so everything past the fold does not exist without a mouse.\n *\n * For a page-level or prose scroll, the `scroll-slim` utility is lighter and\n * needs no component. This is for a bounded panel: a long option list, a log,\n * a sidebar that outgrows its column.\n *\n * Both axes scroll unless a caller says otherwise. The old vertical default\n * read as a statement about which bar to draw and was in fact a statement about\n * which half of the content existed: Radix sets the viewport's overflow from\n * the mounted bars, so the axis without one was `hidden` and everything past it\n * was unreachable — silently, and with the content perfectly well rendered.\n *\n * @example\n * <ScrollArea label=\"Deploy log\" className=\"h-48\">…</ScrollArea>\n */\nexport function ScrollArea({\n  label,\n  orientation = 'both',\n  className,\n  children,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      type=\"hover\"\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        // Positioned, so an absolutely-positioned descendant — an `sr-only`\n        // label, a pinned marker — resolves against the thing that scrolls and\n        // travels with the content, rather than against the root and hanging\n        // still over it.\n        className=\"relative size-full rounded-[inherit]\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {(orientation === 'vertical' || orientation === 'both') && <Bar orientation=\"vertical\" />}\n      {(orientation === 'horizontal' || orientation === 'both') && <Bar orientation=\"horizontal\" />}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction Bar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none p-0.5 transition-colors duration-(--duration-fast)',\n        orientation === 'vertical' ? 'h-full w-2' : 'h-2 flex-col',\n      )}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-(--radius-pill) bg-(--rule-2)\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport default ScrollArea\n"],"mappings":";AAsDI,SAKE,KALF;AApDJ,YAAY,yBAAyB;AAErC,SAAS,UAAU;AA0CZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC,oBAAoB;AAAA,UAApB;AAAA,YACC,UAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY;AAAA,YAKZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,SACE,gBAAgB,cAAc,gBAAgB,WAAW,oBAAC,OAAI,aAAY,YAAW;AAAA,SACrF,gBAAgB,gBAAgB,gBAAgB,WAAW,oBAAC,OAAI,aAAY,cAAa;AAAA,QAC3F,oBAAC,oBAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,IAAI,EAAE,YAAY,GAA+C;AACxE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,eAAe;AAAA,MAC9C;AAAA,MAEA,8BAAC,oBAAoB,OAApB,EAA0B,WAAU,yDAAwD;AAAA;AAAA,EAC/F;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}