@misoto22/design 0.7.0 → 0.8.0

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/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":[]}

package/dist/components/SearchableMenu/SearchableMenu.d.ts

@@ -2,10 +2,19 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface MenuAction {
-    /** Stable id, and what the filter matches on. */
+    /**
+     * Stable identity for the row. Not what the filter matches — the label is,
+     * and an id a reader would never type is exactly what this used to be.
+     */
     id: string;
+    /** What the row prints. Its text is the first thing the filter matches. */
     label: ReactNode;
-    /** Plain text the filter should match beyond the label. */
+    /**
+     * More text the filter should match, beyond the label's own words.
+     *
+     * The synonym a reader reaches for first: "download" for Export, "bin" for
+     * Delete. Required in practice only when the label prints no text at all.
+     */
     keywords?: string[];
     /** Printed at the end of the row. */
     shortcut?: string;

package/dist/components/SearchableMenu/SearchableMenu.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import { isValidElement, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
 import {
   Command,
   CommandEmpty,
@@ -13,6 +14,27 @@ import {
   CommandSeparator
 } from "../Command/Command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+function textOf(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join(" ");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
+function filterKeywords(action) {
+  const label = textOf(action.label).trim();
+  const extra = action.keywords ?? [];
+  if (DEV && !label && extra.length === 0) {
+    warn({
+      code: "SEARCHABLE_MENU_LABEL_UNREADABLE",
+      problem: "A SearchableMenu action has a label with no text in it, so the filter has nothing to match and the row can never be found by typing.",
+      field: "actions[].label",
+      fix: "Give the action keywords with the words a reader would type for it, or put text in the label.",
+      component: "SearchableMenu"
+    });
+  }
+  return label ? [label, ...extra] : extra;
+}
 function SearchableMenu({
   actions,
   children,
@@ -54,7 +76,7 @@ function SearchableMenu({
             CommandItem,
             {
               value: action.id,
-              keywords: action.keywords,
+              keywords: filterKeywords(action),
               disabled: action.disabled,
               shortcut: action.shortcut,
               onSelect: () => {

package/dist/components/SearchableMenu/SearchableMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SearchableMenu/SearchableMenu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown } from 'lucide-react'\nimport { useState, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface MenuAction {\n  /** Stable id, and what the filter matches on. */\n  id: string\n  label: ReactNode\n  /** Plain text the filter should match beyond the label. */\n  keywords?: string[]\n  /** Printed at the end of the row. */\n  shortcut?: string\n  /** Optional group heading. Rows with the same value are shown together. */\n  group?: string\n  disabled?: boolean\n  destructive?: boolean\n  onSelect: () => void\n}\n\nexport interface SearchableMenuProps {\n  actions: MenuAction[]\n  /** The trigger's text. */\n  children: ReactNode\n  /** Names the menu for assistive tech. */\n  label: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  align?: 'start' | 'center' | 'end'\n  className?: string\n}\n\n/**\n * A menu of actions you can type into.\n *\n * The fourth corner of a square the system otherwise had three of, and the\n * distinction is worth stating because reaching for the wrong one is easy:\n *\n * | | few options | many options |\n * |---|---|---|\n * | **sets a value** | `Select` | `Combobox` |\n * | **runs an action** | `DropdownMenu` | `SearchableMenu` |\n *\n * A `DropdownMenu` past about a dozen rows stops being scannable, and the\n * usual response — nesting submenus — makes it worse. This is the same list\n * with a filter over it.\n *\n * Not the same thing as `Command`: that is a page-level palette, usually modal\n * and usually bound to ⌘K. This is anchored to a control, like the menu it\n * replaces.\n *\n * The rows are `option`s inside a listbox rather than `menuitem`s, because that\n * is what the filtering pattern requires — the highlight moves through\n * `aria-activedescendant` while focus stays in the input, and a menu cannot do\n * that. The trade is deliberate: a menu that cannot be filtered is worse for\n * the reader than a listbox that runs actions.\n *\n * @example\n * <SearchableMenu label=\"Actions\" actions={ACTIONS}>Actions</SearchableMenu>\n */\nexport function SearchableMenu({\n  actions,\n  children,\n  label,\n  searchPlaceholder = 'Filter…',\n  emptyMessage = 'Nothing matches.',\n  align = 'start',\n  className,\n}: SearchableMenuProps) {\n  const [open, setOpen] = useState(false)\n\n  // Grouped in declaration order, so a caller controls the arrangement by the\n  // order they list actions rather than by an extra prop.\n  const groups: { name: string | undefined; items: MenuAction[] }[] = []\n  for (const action of actions) {\n    const last = groups.at(-1)\n    if (last && last.name === action.group) last.items.push(action)\n    else groups.push({ name: action.group, items: [action] })\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        className={cn(\n          'inline-flex min-h-(--control-h-sm) items-center gap-2 rounded-(--radius-pill) border border-(--rule-2) px-4 text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--ink)',\n          className,\n        )}\n      >\n        {children}\n        <ChevronDown size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align={align} className=\"w-64 overflow-hidden p-0\">\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups.map((group, index) => (\n              <div key={group.name ?? index}>\n                {index > 0 && <CommandSeparator />}\n                <CommandGroup heading={group.name}>\n                  {group.items.map((action) => (\n                    <CommandItem\n                      key={action.id}\n                      value={action.id}\n                      keywords={action.keywords}\n                      disabled={action.disabled}\n                      shortcut={action.shortcut}\n                      onSelect={() => {\n                        setOpen(false)\n                        action.onSelect()\n                      }}\n                      className={action.destructive ? 'text-(--danger)' : undefined}\n                    >\n                      {action.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </div>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default SearchableMenu\n"],"mappings":";AA6FM,SAQE,KARF;AA3FN,SAAS,mBAAmB;AAC5B,SAAS,gBAAgC;AACzC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AAyDjD,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,SAA8D,CAAC;AACrE,aAAW,UAAU,SAAS;AAC5B,UAAM,OAAO,OAAO,GAAG,EAAE;AACzB,QAAI,QAAQ,KAAK,SAAS,OAAO,MAAO,MAAK,MAAM,KAAK,MAAM;AAAA,QACzD,QAAO,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,EAC1D;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACD,oBAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA;AAAA;AAAA,IAC9F;AAAA,IACA,oBAAC,kBAAe,OAAc,OAAc,WAAU,4BACpD,+BAAC,WAAQ,OAAO,GAAG,KAAK,KAAK,iBAAiB,IAAI,WAAU,yBAC1D;AAAA,0BAAC,gBAAa,aAAa,mBAAmB;AAAA,MAC9C,qBAAC,eACC;AAAA,4BAAC,gBAAc,wBAAa;AAAA,QAC3B,OAAO,IAAI,CAAC,OAAO,UAClB,qBAAC,SACE;AAAA,kBAAQ,KAAK,oBAAC,oBAAiB;AAAA,UAChC,oBAAC,gBAAa,SAAS,MAAM,MAC1B,gBAAM,MAAM,IAAI,CAAC,WAChB;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO;AAAA,cACd,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,MAAM;AACd,wBAAQ,KAAK;AACb,uBAAO,SAAS;AAAA,cAClB;AAAA,cACA,WAAW,OAAO,cAAc,oBAAoB;AAAA,cAEnD,iBAAO;AAAA;AAAA,YAXH,OAAO;AAAA,UAYd,CACD,GACH;AAAA,aAnBQ,MAAM,QAAQ,KAoBxB,CACD;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/SearchableMenu/SearchableMenu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown } from 'lucide-react'\nimport { isValidElement, useState, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface MenuAction {\n  /**\n   * Stable identity for the row. Not what the filter matches — the label is,\n   * and an id a reader would never type is exactly what this used to be.\n   */\n  id: string\n  /** What the row prints. Its text is the first thing the filter matches. */\n  label: ReactNode\n  /**\n   * More text the filter should match, beyond the label's own words.\n   *\n   * The synonym a reader reaches for first: \"download\" for Export, \"bin\" for\n   * Delete. Required in practice only when the label prints no text at all.\n   */\n  keywords?: string[]\n  /** Printed at the end of the row. */\n  shortcut?: string\n  /** Optional group heading. Rows with the same value are shown together. */\n  group?: string\n  disabled?: boolean\n  destructive?: boolean\n  onSelect: () => void\n}\n\nexport interface SearchableMenuProps {\n  actions: MenuAction[]\n  /** The trigger's text. */\n  children: ReactNode\n  /** Names the menu for assistive tech. */\n  label: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  align?: 'start' | 'center' | 'end'\n  className?: string\n}\n\n/** The plain text a label prints, gathered through whatever wraps it. */\nfunction textOf(node: ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (Array.isArray(node)) return node.map(textOf).join(' ')\n  if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children)\n  return ''\n}\n\n/**\n * What the filter matches this row on.\n *\n * cmdk derives an item's value from the first string in\n * `[props.value, props.children, ref]`, and only falls back to the row's\n * `textContent` when `value` is absent. This component passes the id as the\n * value, because that is the row's identity and two rows may print the same\n * words — so with the opaque ids an application actually has, the label a\n * reader can SEE scored zero and the menu showed its empty state. Lifting the\n * label's text into the keywords is what makes the visible words match, while\n * the id stays the identity.\n */\nfunction filterKeywords(action: MenuAction): string[] {\n  const label = textOf(action.label).trim()\n  const extra = action.keywords ?? []\n\n  if (DEV && !label && extra.length === 0) {\n    warn({\n      code: 'SEARCHABLE_MENU_LABEL_UNREADABLE',\n      problem:\n        'A SearchableMenu action has a label with no text in it, so the filter has nothing to match and the row can never be found by typing.',\n      field: 'actions[].label',\n      fix: 'Give the action keywords with the words a reader would type for it, or put text in the label.',\n      component: 'SearchableMenu',\n    })\n  }\n\n  return label ? [label, ...extra] : extra\n}\n\n/**\n * A menu of actions you can type into.\n *\n * The fourth corner of a square the system otherwise had three of, and the\n * distinction is worth stating because reaching for the wrong one is easy:\n *\n * | | few options | many options |\n * |---|---|---|\n * | **sets a value** | `Select` | `Combobox` |\n * | **runs an action** | `DropdownMenu` | `SearchableMenu` |\n *\n * A `DropdownMenu` past about a dozen rows stops being scannable, and the\n * usual response — nesting submenus — makes it worse. This is the same list\n * with a filter over it.\n *\n * Not the same thing as `Command`: that is a page-level palette, usually modal\n * and usually bound to ⌘K. This is anchored to a control, like the menu it\n * replaces.\n *\n * The rows are `option`s inside a listbox rather than `menuitem`s, because that\n * is what the filtering pattern requires — the highlight moves through\n * `aria-activedescendant` while focus stays in the input, and a menu cannot do\n * that. The trade is deliberate: a menu that cannot be filtered is worse for\n * the reader than a listbox that runs actions.\n *\n * @example\n * <SearchableMenu label=\"Actions\" actions={ACTIONS}>Actions</SearchableMenu>\n */\nexport function SearchableMenu({\n  actions,\n  children,\n  label,\n  searchPlaceholder = 'Filter…',\n  emptyMessage = 'Nothing matches.',\n  align = 'start',\n  className,\n}: SearchableMenuProps) {\n  const [open, setOpen] = useState(false)\n\n  // Grouped in declaration order, so a caller controls the arrangement by the\n  // order they list actions rather than by an extra prop.\n  const groups: { name: string | undefined; items: MenuAction[] }[] = []\n  for (const action of actions) {\n    const last = groups.at(-1)\n    if (last && last.name === action.group) last.items.push(action)\n    else groups.push({ name: action.group, items: [action] })\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        className={cn(\n          'inline-flex min-h-(--control-h-sm) items-center gap-2 rounded-(--radius-pill) border border-(--rule-2) px-4 text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--ink)',\n          className,\n        )}\n      >\n        {children}\n        <ChevronDown size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align={align} className=\"w-64 overflow-hidden p-0\">\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups.map((group, index) => (\n              <div key={group.name ?? index}>\n                {index > 0 && <CommandSeparator />}\n                <CommandGroup heading={group.name}>\n                  {group.items.map((action) => (\n                    <CommandItem\n                      key={action.id}\n                      value={action.id}\n                      keywords={filterKeywords(action)}\n                      disabled={action.disabled}\n                      shortcut={action.shortcut}\n                      onSelect={() => {\n                        setOpen(false)\n                        action.onSelect()\n                      }}\n                      className={action.destructive ? 'text-(--danger)' : undefined}\n                    >\n                      {action.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </div>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default SearchableMenu\n"],"mappings":";AA8IM,SAQE,KARF;AA5IN,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,gBAAgC;AACzD,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AAuCxD,SAAS,OAAO,MAAyB;AACvC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAI,MAAM,QAAQ,IAAI,EAAG,QAAO,KAAK,IAAI,MAAM,EAAE,KAAK,GAAG;AACzD,MAAI,eAAyC,IAAI,EAAG,QAAO,OAAO,KAAK,MAAM,QAAQ;AACrF,SAAO;AACT;AAcA,SAAS,eAAe,QAA8B;AACpD,QAAM,QAAQ,OAAO,OAAO,KAAK,EAAE,KAAK;AACxC,QAAM,QAAQ,OAAO,YAAY,CAAC;AAElC,MAAI,OAAO,CAAC,SAAS,MAAM,WAAW,GAAG;AACvC,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,SAAO,QAAQ,CAAC,OAAO,GAAG,KAAK,IAAI;AACrC;AA8BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,SAA8D,CAAC;AACrE,aAAW,UAAU,SAAS;AAC5B,UAAM,OAAO,OAAO,GAAG,EAAE;AACzB,QAAI,QAAQ,KAAK,SAAS,OAAO,MAAO,MAAK,MAAM,KAAK,MAAM;AAAA,QACzD,QAAO,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,EAC1D;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACD,oBAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA;AAAA;AAAA,IAC9F;AAAA,IACA,oBAAC,kBAAe,OAAc,OAAc,WAAU,4BACpD,+BAAC,WAAQ,OAAO,GAAG,KAAK,KAAK,iBAAiB,IAAI,WAAU,yBAC1D;AAAA,0BAAC,gBAAa,aAAa,mBAAmB;AAAA,MAC9C,qBAAC,eACC;AAAA,4BAAC,gBAAc,wBAAa;AAAA,QAC3B,OAAO,IAAI,CAAC,OAAO,UAClB,qBAAC,SACE;AAAA,kBAAQ,KAAK,oBAAC,oBAAiB;AAAA,UAChC,oBAAC,gBAAa,SAAS,MAAM,MAC1B,gBAAM,MAAM,IAAI,CAAC,WAChB;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO;AAAA,cACd,UAAU,eAAe,MAAM;AAAA,cAC/B,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,MAAM;AACd,wBAAQ,KAAK;AACb,uBAAO,SAAS;AAAA,cAClB;AAAA,cACA,WAAW,OAAO,cAAc,oBAAoB;AAAA,cAEnD,iBAAO;AAAA;AAAA,YAXH,OAAO;AAAA,UAYd,CACD,GACH;AAAA,aAnBQ,MAAM,QAAQ,KAoBxB,CACD;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/components/Select/Select.d.ts

@@ -15,13 +15,29 @@ interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
      * picker over its own calendar, say.
      */
     contentClassName?: string;
-    /** Names the control. Required — the trigger shows a value, and a value is not a name. */
+    /**
+     * Names the control. Required — the trigger shows a value, and a value is not
+     * a name.
+     *
+     * It is announced together with the value, not instead of it: the trigger is
+     * named by the label and by its own text, so a reader hears "Region,
+     * Australia". Inside a `Field` with a label, that label is used and this one
+     * is not repeated.
+     */
     label: string;
     placeholder?: string;
     /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
     invalid?: boolean;
     disabled?: boolean;
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** The spelling a form library sets; read together with `invalid`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
     /** `SelectItem`s, optionally wrapped in `SelectGroup` with a `SelectLabel`. */
     children: ReactNode;
 }
@@ -53,7 +69,7 @@ interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
  *   </Select>
  * </Field>
  */
-declare function Select({ label, placeholder, invalid, disabled, className, contentClassName, children, ...props }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, invalid, disabled, className, contentClassName, children, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...props }: SelectProps): react.JSX.Element;
 type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
 /** One option. The tick marks the chosen one; the fill marks the highlighted one. */
 declare function SelectItem({ className, children, ...props }: SelectItemProps): react.JSX.Element;

package/dist/components/Select/Select.js

@@ -2,8 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { useId } from "react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 import { useOverlayContainer } from "../../lib/overlay-container.js";
+import { useFieldControl } from "../Field/field-control.js";
 import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
 const SelectRoot = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
@@ -15,15 +18,28 @@ function Select({
   className,
   contentClassName,
   children,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...props
 }) {
-  const bad = isInvalid(invalid);
+  warnBlankName("Select", "label", label, "the trigger is announced with no name");
+  const bad = isInvalid(invalid, ariaInvalid);
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
   const container = useOverlayContainer();
   return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { disabled, ...props, children: [
     /* @__PURE__ */ jsxs(
       SelectPrimitive.Trigger,
       {
-        "aria-label": label,
+        id: triggerId,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
         "aria-invalid": bad || void 0,
         className: cn(
           CONTROL_BASE,
@@ -32,7 +48,8 @@ function Select({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "truncate", children: /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }) }),
           /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
             ChevronDown,
             {