@godxjp/ui 22.0.0 → 23.1.0

package/README.md

@@ -55,7 +55,7 @@ A value is defined **once** as a CSS var (`--primary`), mapped to a utility in t
 | **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
-| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
+| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                                                              |
 | **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime` (adapter — i18n/datetime singleton)                                                                                                                                                                        |
 | **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                                                                                                                                                                                    |
 | **Form**           | `@godxjp/ui/form`         | `useZodForm`, `FormRoot` (adapter subpath — pulls react-hook-form)                                                                                                                                                                      |
@@ -155,9 +155,9 @@ pnpm release --ui <patch|minor|major> --mcp <…|skip>   # publish lib + MCP in
 | `check:mcp-orphans`     | every public component HAS a catalog entry (catalog can't rot)       |
 | `check:core-isolation`  | the root export pulls no foreign runtime (adapters stay on subpaths) |
 
-### Runtime visual audit (Playwright + axe-core)
+### Runtime visual audit (Playwright)
 
-`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs axe-core plus computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
+`scripts/visual-audit.mjs` drives a **real browser** over a running app and runs computed-style heuristics (target size, OKLCH accent chroma, rendered emoji, mis-laid-out alerts) — catching what the static `pnpm audit` (source regexes) can't see. Playwright + `@axe-core/playwright` are **optional peers**, installed only by apps that run the audit.
 
 ```bash
 # from a consumer, against its running dev/preview server:
@@ -166,7 +166,7 @@ node node_modules/@godxjp/ui/scripts/visual-audit.mjs http://localhost:5173 --fo
 node node_modules/@godxjp/ui/scripts/visual-audit.mjs --strict http://localhost:5173       # CI gate
 ```
 
-**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1) · `@axe-core/playwright >=4.10 <5` (tested 4.12.1) · `axe-core >=4.10 <5` (tested 4.12.1). Playwright 1.55+ is required for the `browser.newContext()` → `context.newPage()` flow axe expects; older `browser.newPage()` throws _"Please use browser.newContext()"_.
+**Tested peer range** (pin one of these): `playwright >=1.55 <2` (tested 1.61.1)
 
 `--format json` **always** emits valid JSON — even on bootstrap failure — with a `status` (`ok` · `partial` · `error`) that separates **infrastructure errors** (missing peers, page won't load, axe won't inject → `errors[]`, `summary: null`/flagged) from **product findings** (`findings[]`). A tool failure can therefore never be misread as "zero violations". `pnpm check:visual-audit` is the CI smoke test: it serves a fixture page tripping all five rule families and asserts each one fires.
 

package/dist/app/date-format-labels.d.ts

@@ -1,8 +1,20 @@
 import type { AppLocale } from "./types.js";
 import type { AppDateFormat } from "./date-formats.js";
 export declare const APP_DATE_FORMAT_OPTIONS: {
-    value: "dmy" | "iso" | "mdy";
+    value: "dmy" | "iso" | "mdy" | "ymd";
 }[];
 export declare function getDateFormatLabel(dateFormat: AppDateFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
-/** Suggested default per locale — vi → dmy, ja → iso, en → mdy. */
+/**
+ * Suggested default per locale — vi → dmy, ja → ymd, en → mdy.
+ *
+ * `ja` used to be `iso` (`yyyy-MM-dd`). Nothing recorded a reason for it, and it is not the form a
+ * Japanese business document is written in: those use `YYYY/MM/DD` (or `YYYY年MM月DD日`). The cost
+ * of the old default was measured in a consumer — gino-cloud shipped its own date formatter as an
+ * explicit stopgap purely to get the slashes, which is the package's own rule 1 broken by the
+ * package's own default.
+ *
+ * ONLY THE DEFAULT MOVES. A stored preference still wins (see `resolveDateFormat` in
+ * app-provider.tsx), a service can pin any value through `defaultDateFormat`, and `iso` is still
+ * one keystroke away in `DateFormatPicker`.
+ */
 export declare function resolveDefaultDateFormat(locale: AppLocale): AppDateFormat;

package/dist/app/date-format-labels.js

@@ -6,7 +6,7 @@ function getDateFormatLabel(dateFormat, locale, fallbackLocale = "en") {
 }
 function resolveDefaultDateFormat(locale) {
   if (locale === "en") return "mdy";
-  if (locale === "ja") return "iso";
+  if (locale === "ja") return "ymd";
   return "dmy";
 }
 export {

package/dist/app/date-formats.d.ts

@@ -1,7 +1,19 @@
 /** Date-only display preset — sent as `x-date-format` to backend. */
 import { type AppTimeFormat } from "./time-formats.js";
-export type AppDateFormat = "iso" | "dmy" | "mdy";
-export declare const APP_DATE_FORMATS: readonly ["iso", "dmy", "mdy"];
+export type AppDateFormat = "iso" | "ymd" | "dmy" | "mdy";
+/**
+ * `ymd` (`yyyy/MM/dd`) IS THE JAPANESE BUSINESS FORM, AND ITS ABSENCE WAS A HOLE WITH NO WAY OUT.
+ *
+ * The axis shipped three values and none of them said `2026/05/01`: `iso` writes hyphens, and the
+ * two slash forms put the day or the month first. A Japanese-first consumer (gino-cloud) therefore
+ * wrote its own formatter and marked it an explicit stopgap — the tell that a named axis was
+ * missing a value rather than the consumer wanting something exotic, since the only alternative
+ * the package left was the thing docs/DATETIME.md rule 1 forbids ("never use date-fns/format,
+ * toLocaleString, or raw ISO slices for UI").
+ *
+ * It sits BEFORE the day/month-first pair because it is the other year-first form, next to `iso`.
+ */
+export declare const APP_DATE_FORMATS: readonly ["iso", "ymd", "dmy", "mdy"];
 export declare const APP_REQUEST_HEADER_DATE_FORMAT: "x-date-format";
 /** date-fns pattern for date-only display. */
 export declare function getDatePattern(dateFormat: AppDateFormat): string;

package/dist/app/date-formats.js

@@ -1,8 +1,15 @@
 import { getTimePattern } from "./time-formats.js";
-const APP_DATE_FORMATS = ["iso", "dmy", "mdy"];
+const APP_DATE_FORMATS = [
+  "iso",
+  "ymd",
+  "dmy",
+  "mdy"
+];
 const APP_REQUEST_HEADER_DATE_FORMAT = "x-date-format";
 function getDatePattern(dateFormat) {
   switch (dateFormat) {
+    case "ymd":
+      return "yyyy/MM/dd";
     case "dmy":
       return "dd/MM/yyyy";
     case "mdy":
@@ -16,7 +23,7 @@ function getDateTimePattern(timeFormat, dateFormat) {
   return `${getDatePattern(dateFormat)} ${getTimePattern(timeFormat)}`;
 }
 function isAppDateFormat(value) {
-  return value === "iso" || value === "dmy" || value === "mdy";
+  return APP_DATE_FORMATS.includes(value);
 }
 export {
   APP_DATE_FORMATS,

package/dist/components/data-display/data-table.d.ts

@@ -13,6 +13,13 @@ interface DataTableProps<T> {
     columns: ColumnDef<T>[];
     /** Required when `selectable` is true. Default: assume row.id (typed as any). */
     getRowId?: (row: T) => string;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort — an id is a KEY, and announced
+     * it reads a UUID aloud. `rowSelection.getCheckboxProps` `aria-label` still overrides a row.
+     */
+    getRowLabel?: (row: T) => string;
     selectable?: boolean;
     selected?: Set<string>;
     onSelectChange?: (next: Set<string>) => void;
@@ -130,7 +137,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, getRowLabel, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

package/dist/components/data-display/data-table.js

@@ -190,6 +190,7 @@ function DataTable({
   data,
   columns,
   getRowId = noopGetRowId,
+  getRowLabel,
   selectable = false,
   selected: controlledSelected,
   onSelectChange,
@@ -443,6 +444,7 @@ function DataTable({
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities,
@@ -764,6 +766,7 @@ DataTable.Content = function DataTableContent() {
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities
@@ -791,6 +794,7 @@ DataTable.Content = function DataTableContent() {
       );
     }
   }, [missingHeaderNames]);
+  const selectLabelColumn = visibleColumns.find((col) => col.priority === "primary") ?? visibleColumns[0];
   const scrollRef = React.useRef(null);
   const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
   React.useEffect(() => {
@@ -1096,6 +1100,9 @@ DataTable.Content = function DataTableContent() {
                   const rowKey = getRowId(original);
                   const isSelected = row.getIsSelected();
                   const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
+                  const labelValue = selectLabelColumn ? original[selectLabelColumn.key] : void 0;
+                  const rowLabel = getRowLabel?.(original) ?? (typeof labelValue === "string" && labelValue.trim() !== "" || typeof labelValue === "number" ? String(labelValue) : row.id);
+                  const selectRowLabel = checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: rowLabel });
                   const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
                   const isExpanded = canExpand && expandedKeys.includes(rowKey);
                   const rowProps = onRow?.(original, rowIndex) ?? {};
@@ -1206,7 +1213,7 @@ DataTable.Content = function DataTableContent() {
                                       RadioItem,
                                       {
                                         value: rowKey,
-                                        "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                        "aria-label": selectRowLabel,
                                         onClick: (e) => {
                                           e.stopPropagation();
                                         }
@@ -1222,7 +1229,7 @@ DataTable.Content = function DataTableContent() {
                                   onCheckedChange: (v) => {
                                     row.toggleSelected(!!v);
                                   },
-                                  "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                  "aria-label": selectRowLabel,
                                   onClick: (e) => {
                                     e.stopPropagation();
                                   }

package/dist/components/data-display/scroll-area.d.ts

@@ -1,6 +1,26 @@
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import type { ScrollAreaProp } from "../../props/components/data-display.prop.js";
-export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, keyof ScrollAreaProp>;
-export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
-export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ScrollAreaProps = ScrollAreaProp & Omit<React.ComponentPropsWithoutRef<"div">, keyof ScrollAreaProp>;
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProp & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaProp> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Deliberately NOT exported: a deprecated no-op must not grow the package's public type surface.
+ * Nothing was exported for it before either — it used to be typed straight off Radix.
+ */
+type ScrollBarProps = {
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+};
+/**
+ * @deprecated Renders nothing. Native scrolling has no separate bar element to mount: the browser
+ * draws the scrollbar for whichever axis overflows, and WHICH axes may overflow is
+ * `<ScrollArea orientation="vertical | horizontal | both">`.
+ *
+ * Under Radix, mounting a `ScrollBar` was what ENABLED its axis (Radix read `scrollbarXEnabled` /
+ * `scrollbarYEnabled` from these children and wrote the viewport's inline `overflowX`/`overflowY`
+ * from them), so `<ScrollBar orientation="horizontal" />` was load-bearing rather than decorative.
+ * It is kept as an inert export so existing call sites keep compiling; move the intent to
+ * `orientation` — `<ScrollArea orientation="both">` is the replacement for a vertical area that
+ * also mounted a horizontal bar.
+ */
+export declare function ScrollBar(_props: ScrollBarProps): null;
+export {};

package/dist/components/data-display/scroll-area.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect } from "@react-aria/utils";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
 const ANCHOR_OFFSET_TOKEN = "--scroll-area-anchor-offset";
 const ANCHOR_OFFSET_FALLBACK_PX = 48;
@@ -113,18 +111,6 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
     };
   }, [viewport, enabled, offset]);
 }
-function useAmbientDirection(root, provided) {
-  const [ambient, setAmbient] = React.useState(void 0);
-  useLayoutEffect(() => {
-    if (provided !== void 0) return;
-    const parent = root?.parentElement;
-    if (!parent || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
-      return;
-    }
-    setAmbient(window.getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
-  }, [root, provided]);
-  return provided ?? ambient;
-}
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -134,75 +120,51 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
-    dir,
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
-    const [root, setRoot] = React.useState(null);
-    const attachRoot = React.useCallback(
-      (node) => {
-        setRoot(node);
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
-      [ref]
-    );
-    const direction = useAmbientDirection(root, dir);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
-        if (typeof viewportRef === "function") viewportRef(node);
-        else if (viewportRef)
-          viewportRef.current = node;
+        for (const target of [ref, viewportRef]) {
+          if (typeof target === "function") target(node);
+          else if (target) target.current = node;
+        }
       },
-      [viewportRef]
+      [ref, viewportRef]
     );
     useBottomAnchor(viewport, anchor === "bottom", anchorOffset, onAnchoredChange);
-    return /* @__PURE__ */ jsxs(
-      ScrollAreaPrimitive.Root,
-      {
-        ref: attachRoot,
-        dir: direction,
-        className: cn("relative overflow-hidden", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            ScrollAreaPrimitive.Viewport,
-            {
-              ref: attachViewport,
-              tabIndex: 0,
-              "data-slot": "scroll-area-viewport",
-              "data-anchor": anchor,
-              "data-orientation": orientation,
-              className: "size-full rounded-[inherit]",
-              children
-            }
-          ),
-          orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
-          orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
-          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-        ]
-      }
+    return (
+      // `tabIndex={0}` keeps the scroll viewport keyboard-reachable so overflowing content can be
+      // scrolled without a pointer (WCAG 2.1.1 / axe scrollable-region-focusable).
+      //
+      // NO `dir` IS STAMPED HERE, deliberately. Radix's Root called `useDirection(dir)`, which
+      // falls back to the literal "ltr" and writes it onto the element — and a `dir` attribute is
+      // not advisory: it resets the inline axis for the whole subtree, so every `margin-inline-*`,
+      // `text-align: start` and `align-items: flex-end` inside resolved LTR on an RTL page
+      // (measured in Chromium: a chat feed inside `dir="rtl"` kept its own bubbles on the wrong
+      // side). A plain element inherits the page's direction, which is the correct answer and
+      // needs no code. A caller may still pass `dir` explicitly; it rides through with the rest.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: attachViewport,
+          tabIndex: 0,
+          "data-slot": "scroll-area-viewport",
+          "data-anchor": anchor,
+          "data-orientation": orientation,
+          className: cn("ui-scroll-area", className),
+          ...props,
+          children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-content", className: "ui-scroll-area-content", children })
+        }
+      )
     );
   }
 );
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "ui-scroll-area-bar flex touch-none transition-colors select-none",
-      orientation === "vertical" && "ui-scroll-area-bar--vertical h-full border-s border-s-transparent",
-      orientation === "horizontal" && "ui-scroll-area-bar--horizontal flex-col border-t border-t-transparent",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "ui-scroll-area-thumb bg-border relative flex-1" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
+function ScrollBar(_props) {
+  return null;
+}
 export {
   ScrollArea,
   ScrollBar

package/dist/components/data-entry/cascader.js

@@ -13,7 +13,7 @@ import {
   resolveAriaInvalid
 } from "./control-surface.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
-import { ScrollArea, ScrollBar } from "../data-display/scroll-area.js";
+import { ScrollArea } from "../data-display/scroll-area.js";
 import { Command, CommandInput } from "./command.js";
 import {
   filterTreeOptions,
@@ -311,8 +311,11 @@ function Cascader({
     if (multiple) commitMulti([]);
     else commitSingle([]);
   };
-  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+  const renderCascadeColumns = () => (
+    // `both`: the columns strip overflows sideways, and a tall column scrolls down. Under Radix
+    // this was a vertical area plus a mounted `<ScrollBar orientation="horizontal" />`, which was
+    // how Radix was told to open the second axis at all.
+    /* @__PURE__ */ jsx(ScrollArea, { className: "w-full", orientation: "both", children: /* @__PURE__ */ jsx("div", { className: "ui-cascader-columns", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
       "ul",
       {
         role: "listbox",
@@ -371,9 +374,8 @@ function Cascader({
         })
       },
       colIndex
-    )) }),
-    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
-  ] });
+    )) }) })
+  );
   const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.cascader.clear"));
   const showClear = clearControl.enabled && hasValue && !disabled && !readOnly && !loading;
   const surface = controlSurfaceAttrs({ variant, status, size });

package/dist/components/data-entry/checkbox.js

@@ -6,6 +6,7 @@ import { Check, Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { CheckboxGroup } from "./checkbox-group.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 function CheckboxGlyph({ state }) {
   return state === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" });
 }
@@ -93,9 +94,10 @@ const CheckboxRoot = React.forwardRef((props, ref) => {
         // itself). react-aria's root is a `<label>`, which is `display:inline` — without this the
         // 16px box collapses to nothing. CheckboxVisual already carries the same three for the
         // same reason.
-        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
         className
       ),
+      render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),
       onChange: (next) => {
         setUncontrolled(next);
         onCheckedChange?.(next);

package/dist/components/data-entry/choice-hit-target.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * THE PAINTED BOX OF A CHOICE CONTROL IS ITS OWN HIT TARGET (gh#476).
+ *
+ * react-aria-components renders the real `<input>` inside a `VisuallyHidden` span, and that span
+ * carries its geometry as an INLINE style: `position:absolute; width:1px; height:1px;
+ * clip:rect(0 0 0 0); clip-path:inset(50%)`, pinned at the label's top-left. The thing a user
+ * sees and aims at is the `<label>` wrapped around it, so every pointer landing on the control
+ * hits the LABEL, and the input's own hit area is a 13x13 box at a different origin than the
+ * 16x16 one that is painted.
+ *
+ * Measured on `data-entry-checkbox` before this helper existed: of 49 points scanned across the
+ * box, **0** reached the input, 46 reached the label; Playwright `check()` / `uncheck()` without
+ * `force` timed out on `<label data-slot="checkbox"> intercepts pointer events`, the same check a
+ * browser applies to a real pointer. `force: true` passed, which is the tell: the control is
+ * functional, it is simply covered.
+ *
+ * An inline style can only be beaten with `!important`, so the WRAPPER is replaced instead of
+ * fought. The `render` prop hands over the DOM children react-aria built; the VisuallyHidden
+ * element among them becomes a `.ui-choice-input` span that control.css sizes to the painted box.
+ * The `<input>` itself — its props, its ref, its keyboard handling, its place in the a11y tree —
+ * is passed through untouched, so this is a geometry change and nothing else.
+ */
+export declare function withOwnHitTarget(children: React.ReactNode): React.ReactNode;

package/dist/components/data-entry/choice-hit-target.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { VisuallyHidden } from "react-aria-components";
+function withOwnHitTarget(children) {
+  return React.Children.map(
+    children,
+    (child) => React.isValidElement(child) && child.type === VisuallyHidden ? /* @__PURE__ */ jsx("span", { "data-slot": "choice-input", className: "ui-choice-input", children: child.props.children }) : child
+  );
+}
+export {
+  withOwnHitTarget
+};

package/dist/components/data-entry/control-surface.d.ts

@@ -59,3 +59,11 @@ export declare function applyMaxTagCount<T extends {
     omitted: T[];
     overflow: React.ReactNode | undefined;
 };
+/**
+ * Split a run of text on antd's `tokenSeparators` — the contract behind "paste a column out of a
+ * spreadsheet and get one value per line".
+ *
+ * Shared by `TagInput` and the tags/multiple `Select`: they are the two controls that turn typing
+ * into several values, and two copies of this would be two answers to "what is a separator".
+ */
+export declare function splitByTokenSeparators(text: string, separators: string[]): string[];

package/dist/components/data-entry/control-surface.js

@@ -31,9 +31,18 @@ function applyMaxTagCount(items, maxTagCount, maxTagPlaceholder) {
   const overflow = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map(({ value, label }) => ({ value, label }))) : maxTagPlaceholder;
   return { visible, omitted, overflow };
 }
+function escapeForCharClass(character) {
+  return character.replace(/[\\\]^-]/g, "\\$&");
+}
+function splitByTokenSeparators(text, separators) {
+  if (!separators.length) return [text];
+  const pattern = new RegExp(`[${separators.map(escapeForCharClass).join("")}]`);
+  return text.split(pattern);
+}
 export {
   applyMaxTagCount,
   controlSurfaceAttrs,
   resolveAllowClear,
-  resolveAriaInvalid
+  resolveAriaInvalid,
+  splitByTokenSeparators
 };

package/dist/components/data-entry/form-field.js

@@ -47,7 +47,7 @@ function FormField({
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
-  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground text-xs", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -69,6 +69,7 @@ function FormField({
     [fieldKey, emitFieldNames]
   );
   const childProps = React.isValidElement(children) ? children.props : void 0;
+  const controlId = childProps?.id ?? resolvedId;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
     // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
@@ -78,7 +79,7 @@ function FormField({
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
-    id: childProps?.id ?? resolvedId,
+    id: controlId,
     ...form?.disabled && childProps?.disabled !== false ? { disabled: true } : {},
     ...validationStatus === "validating" ? { "aria-busy": true } : {},
     // Read the child's own value first in BOTH cases: cloneElement
@@ -133,7 +134,7 @@ function FormField({
                 "span",
                 {
                   onClick: () => {
-                    const el = document.getElementById(resolvedId);
+                    const el = document.getElementById(controlId);
                     if (!(el instanceof HTMLElement)) return;
                     const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
                     (focusable ?? el).focus();
@@ -174,7 +175,7 @@ function FormField({
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-destructive text-xs", children: error }) : null
         ] })
       ]
     }

package/dist/components/data-entry/input.js

@@ -13,7 +13,7 @@ import {
 } from "./control-appearance.js";
 import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow]",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
   "aria-invalid:border-destructive",

package/dist/components/data-entry/number-input.js

@@ -57,6 +57,21 @@ const NumberInput = React.forwardRef(
   }, ref) => {
     const { t, locale } = useTranslation();
     const fieldA11y = pickFieldA11y(ariaProps);
+    const stepperVerbId = React.useId();
+    const fieldLabel = typeof fieldA11y["aria-label"] === "string" ? fieldA11y["aria-label"] : void 0;
+    const fieldLabelledBy = typeof fieldA11y["aria-labelledby"] === "string" ? fieldA11y["aria-labelledby"] : void 0;
+    const stepperName = (direction) => {
+      const verb = t(`ui.numberInput.${direction}`);
+      if (fieldLabelledBy) {
+        return { "aria-labelledby": `${fieldLabelledBy} ${stepperVerbId}-${direction}` };
+      }
+      if (fieldLabel) {
+        return {
+          "aria-label": t(`ui.numberInput.${direction}Field`, { label: fieldLabel }) || verb
+        };
+      }
+      return { "aria-label": verb };
+    };
     const isControlled = controlledValue !== void 0;
     const [internal, setInternal] = React.useState(defaultValue);
     const numericValue = isControlled ? controlledValue ?? null : internal;
@@ -228,7 +243,7 @@ const NumberInput = React.forwardRef(
             }
           ) : null,
           controls ? /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -237,12 +252,15 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-up",
                 tabIndex: -1,
                 disabled: !interactive || atMax,
-                "aria-label": t("ui.numberInput.increment"),
+                ...stepperName("increment"),
                 onClick: () => stepBy(1),
-                children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-increment`, className: "sr-only", children: t("ui.numberInput.increment") })
+                ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -251,9 +269,12 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-down",
                 tabIndex: -1,
                 disabled: !interactive || atMin,
-                "aria-label": t("ui.numberInput.decrement"),
+                ...stepperName("decrement"),
                 onClick: () => stepBy(-1),
-                children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-decrement`, className: "sr-only", children: t("ui.numberInput.decrement") })
+                ]
               }
             )
           ] }) : null