@godxjp/ui 28.6.0 → 28.8.0

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
-import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, RowToneProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, LabelProp, OnColumnFilterChangeProp, OnRowProp, RowToneProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
@@ -93,6 +93,14 @@ interface DataTableProps<T> {
     preset?: TablePresetProp;
     /** Default `"sm"`. Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
+    /**
+     * Accessible name for the horizontal-scroll REGION (the `tabindex="0"` wrapper a keyboard user
+     * lands on), not for the `<table>`. Optional: left out, the region takes the localized
+     * `dataTable.scrollRegion` default, so no consumer has to invent a name for every list. The
+     * region is announced only while it HAS overflow to reach. Same contract as `Table label`.
+     * (gh#817)
+     */
+    label?: LabelProp;
     /**
      * Per-row className for state-based row tinting (e.g. flag an invalid or empty record). Returned
      * classes are appended last, so they win over the built-in hover/selected fills.
@@ -146,7 +154,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-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 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, label, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     export var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

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

@@ -65,9 +65,11 @@ import {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  scrollRegionLabel
 } from "../data-display/table.js";
 import { cn } from "../../lib/utils.js";
+import { useScrollsHorizontally } from "../../lib/hooks.js";
 import { densityClass } from "../../lib/variants.js";
 import {
   controlIconSmClass,
@@ -230,6 +232,7 @@ function DataTable({
   stickyHeader = true,
   preset = "default",
   collapseBelow = "sm",
+  label,
   rowClassName,
   rowTone,
   rowSelection,
@@ -450,6 +453,7 @@ function DataTable({
     stickyHeader: sticky === void 0 ? stickyHeader : sticky !== false,
     preset,
     collapseBelow,
+    label,
     rowClassName,
     rowTone,
     bordered,
@@ -774,6 +778,7 @@ DataTable.Content = function DataTableContent() {
     stickyHeader,
     preset,
     collapseBelow,
+    label,
     rowClassName,
     rowTone,
     bordered,
@@ -816,6 +821,7 @@ DataTable.Content = function DataTableContent() {
   }, [missingHeaderNames]);
   const selectLabelColumn = visibleColumns.find((col) => col.priority === "primary") ?? visibleColumns[0];
   const scrollRef = React.useRef(null);
+  const scrolls = useScrollsHorizontally(scrollRef, !presetAttr);
   const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
   React.useEffect(() => {
     const el = scrollRef.current;
@@ -923,7 +929,7 @@ DataTable.Content = function DataTableContent() {
       "data-scroll-x": scroll?.x !== void 0 ? "" : void 0,
       "data-scroll-y": scroll?.y !== void 0 ? "" : void 0,
       "aria-busy": loading,
-      tabIndex: presetAttr ? void 0 : 0,
+      ...scrolls ? { role: "group", "aria-label": scrollRegionLabel(label, t), tabIndex: 0 } : {},
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -936,6 +942,7 @@ DataTable.Content = function DataTableContent() {
             Table,
             {
               scrollable: preset !== "default",
+              label,
               preset,
               collapseBelow,
               bordered,
@@ -982,7 +989,7 @@ DataTable.Content = function DataTableContent() {
                         ) : null;
                         const headerEmpty = isEmptyHeader(col.header);
                         const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
-                        const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+                        const label2 = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
                           headerContent,
                           sortIndicator
                         ] });
@@ -1000,7 +1007,7 @@ DataTable.Content = function DataTableContent() {
                             onClick: () => {
                               onHeaderClick(col);
                             },
-                            children: label
+                            children: label2
                           }
                         );
                         return /* @__PURE__ */ jsxs(
@@ -1027,7 +1034,7 @@ DataTable.Content = function DataTableContent() {
                               isSortable ? tooltipOn ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: sortButton }),
                                 /* @__PURE__ */ jsx(TooltipContent, { children: sortHint })
-                              ] }) : sortButton : label,
+                              ] }) : sortButton : label2,
                               col.filters ? /* @__PURE__ */ jsx(ColumnFilterMenu, { column: col }) : null
                             ]
                           },

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

@@ -10,6 +10,8 @@ export { Thumbnail } from "./thumbnail.js";
 export type { ThumbnailProp, ThumbnailProps, ThumbnailSizeProp } from "./thumbnail.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
+export { Marquee } from "./marquee.js";
+export type { MarqueeDirectionProp, MarqueeProp, MarqueeProps, MarqueeSpeedProp } from "./marquee.js";
 export { CredentialReveal } from "./credential-reveal.js";
 export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
 export { QrCode } from "./qr-code.js";

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

@@ -4,6 +4,7 @@ import { Swatch } from "./swatch.js";
 import { FeatureList } from "./feature-list.js";
 import { Thumbnail } from "./thumbnail.js";
 import { ListRow } from "./list-row.js";
+import { Marquee } from "./marquee.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
@@ -101,6 +102,7 @@ export {
   HoverCardTrigger,
   Legend,
   ListRow,
+  Marquee,
   PermissionMatrix,
   Popover,
   PopoverAnchor,

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { GapProp } from "../../props/vocabulary/index.js";
+export type { MarqueeDirectionProp, MarqueeSpeedProp, MarqueeProp, MarqueeProp as MarqueeProps, } from "../../props/components/data-display.prop.js";
+export declare const Marquee: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onPause" | "onPlay"> & {
+    children?: import("../../props/index.js").ChildrenProp;
+    play?: boolean;
+    defaultPlay?: boolean;
+    onPlayChange?: (play: boolean) => void;
+    direction?: import("./marquee.js").MarqueeDirectionProp;
+    speed?: import("./marquee.js").MarqueeSpeedProp;
+    gap?: GapProp;
+    pauseOnHover?: boolean;
+    fade?: boolean;
+    label?: import("../../props/index.js").LabelProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Pause, Play } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+import { ScrollArea } from "./scroll-area.js";
+function gapToken(step) {
+  if (step === "none" || step === 0) return "0px";
+  if (typeof step === "number") return `var(--space-${step})`;
+  return `var(--space-inline-${step})`;
+}
+const MAX_COPIES = 20;
+const Marquee = React.forwardRef(function Marquee2({
+  children,
+  play,
+  defaultPlay = true,
+  onPlayChange,
+  direction = "start",
+  speed = "base",
+  gap,
+  pauseOnHover = false,
+  fade = false,
+  label,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const trackId = React.useId();
+  const viewportRef = React.useRef(null);
+  const copyRef = React.useRef(null);
+  const [uncontrolledPlay, setUncontrolledPlay] = React.useState(defaultPlay);
+  const playing = play ?? uncontrolledPlay;
+  const [measurement, setMeasurement] = React.useState({ copies: 2, cycleScale: 1 });
+  React.useEffect(() => {
+    if (reducedMotion) return void 0;
+    const viewport = viewportRef.current;
+    const copy = copyRef.current;
+    if (!viewport || !copy || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => {
+      const copyWidth = copy.offsetWidth;
+      const viewportWidth = viewport.offsetWidth;
+      if (copyWidth <= 0 || viewportWidth <= 0) return;
+      const copies = Math.min(MAX_COPIES, Math.ceil(viewportWidth / copyWidth) + 1);
+      const cycleScale = Math.round(copyWidth / viewportWidth * 1e3) / 1e3;
+      setMeasurement(
+        (current) => current.copies === copies && current.cycleScale === cycleScale ? current : { copies, cycleScale }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(viewport);
+    observer.observe(copy);
+    return () => {
+      observer.disconnect();
+    };
+  }, [reducedMotion, children]);
+  const setPlaying = (next) => {
+    if (play === void 0) setUncontrolledPlay(next);
+    onPlayChange?.(next);
+  };
+  const rootStyle = {
+    ...style,
+    ...gap === void 0 ? null : { "--marquee-gap-inline": gapToken(gap) }
+  };
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "marquee",
+        "data-reduced-motion": "true",
+        "data-direction": direction,
+        className: cn("ui-marquee", className),
+        style: rootStyle,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            orientation: "horizontal",
+            className: "ui-marquee-scroller",
+            label: typeof label === "string" ? label : void 0,
+            children: /* @__PURE__ */ jsx("div", { id: trackId, "data-slot": "marquee-track", className: "ui-marquee-track", children: /* @__PURE__ */ jsx("div", { ref: copyRef, "data-slot": "marquee-copy", className: "ui-marquee-copy", children }) })
+          }
+        )
+      }
+    );
+  }
+  const animatedStyle = {
+    ...rootStyle,
+    "--marquee-copies": measurement.copies,
+    "--marquee-cycle-scale": measurement.cycleScale
+  };
+  const named = typeof label === "string" && label.trim() !== "";
+  const controlLabel = playing ? named ? t("dataDisplay.marquee.pauseNamed", { label }) : t("dataDisplay.marquee.pause") : named ? t("dataDisplay.marquee.playNamed", { label }) : t("dataDisplay.marquee.play");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "marquee",
+      "data-direction": direction,
+      "data-speed": speed,
+      "data-playing": playing ? "true" : "false",
+      "data-pause-on-hover": pauseOnHover ? "true" : "false",
+      "data-fade": fade ? "true" : "false",
+      className: cn("ui-marquee", className),
+      style: animatedStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: viewportRef, "data-slot": "marquee-viewport", className: "ui-marquee-viewport", children: /* @__PURE__ */ jsxs("div", { id: trackId, "data-slot": "marquee-track", className: "ui-marquee-track", children: [
+          /* @__PURE__ */ jsx("div", { ref: copyRef, "data-slot": "marquee-copy", className: "ui-marquee-copy", children }),
+          Array.from({ length: measurement.copies - 1 }, (_, index) => (
+            // Decorative by construction: `aria-hidden` keeps the duplicate out of the
+            // accessibility tree and `inert` keeps it out of the tab order. The prior art has
+            // neither, which is why its content is announced once per screenful of width.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "marquee-clone",
+                className: "ui-marquee-copy",
+                "aria-hidden": "true",
+                inert: true,
+                children
+              },
+              index
+            )
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "data-slot": "marquee-control",
+            className: "ui-marquee-control",
+            "aria-label": controlLabel,
+            "aria-controls": trackId,
+            onClick: () => {
+              setPlaying(!playing);
+            },
+            children: playing ? /* @__PURE__ */ jsx(Pause, { className: "ui-marquee-control-glyph", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "ui-marquee-control-glyph", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Marquee
+};

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

@@ -1,6 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useScrollsOnAxis } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 const ANCHOR_OFFSET_TOKEN = "--scroll-area-anchor-offset";
 const ANCHOR_OFFSET_FALLBACK_PX = 48;
@@ -121,12 +123,16 @@ const ScrollArea = React.forwardRef(
     onAnchoredChange,
     orientation = "vertical",
     scrollbar = "auto",
+    label,
     ...props
   }, ref) => {
+    const { t } = useTranslation();
     const [viewport, setViewport] = React.useState(null);
+    const viewportHandle = React.useRef(null);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
+        viewportHandle.current = node;
         for (const target of [ref, viewportRef]) {
           if (typeof target === "function") target(node);
           else if (target) target.current = node;
@@ -135,9 +141,17 @@ const ScrollArea = React.forwardRef(
       [ref, viewportRef]
     );
     useBottomAnchor(viewport, anchor === "bottom", anchorOffset, onAnchoredChange);
+    const scrolls = useScrollsOnAxis(viewportHandle, true, orientation);
+    const regionLabel = typeof label === "string" && label.trim() !== "" ? label : t("dataDisplay.scrollArea.region");
     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).
+      // scrolled without a pointer (WCAG 2.1.1 / axe scrollable-region-focusable). That stop must
+      // not be ANONYMOUS: unroled and unnamed it announces nothing, so it carries `role="group"`
+      // plus an accessible name (gh#821, the same defect gh#817 fixed in Table). `group`, not
+      // `region`: a named `region` IS a landmark, and a page with several scroll areas would ship
+      // several identically-named landmarks (axe `landmark-unique`). All three attributes come and
+      // go together with the overflow, because a focus stop that scrolls nothing is noise — and
+      // they precede `{...props}`, so a consumer's own `role`/`aria-label`/`tabIndex` still wins.
       //
       // 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
@@ -150,12 +164,12 @@ const ScrollArea = React.forwardRef(
         "div",
         {
           ref: attachViewport,
-          tabIndex: 0,
           "data-slot": "scroll-area-viewport",
           "data-anchor": anchor,
           "data-orientation": orientation,
           "data-scrollbar": scrollbar,
           className: cn("ui-scroll-area", className),
+          ...scrolls ? { role: "group", "aria-label": regionLabel, tabIndex: 0 } : {},
           ...props,
           children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-content", className: "ui-scroll-area-content", children })
         }

package/dist/components/data-display/service-launcher-card.d.ts

@@ -1,3 +1,28 @@
+/**
+ * RECORDED EXCEPTION to the Framework-Component Test (gh#814).
+ *
+ * `docs/COMPOSITION-VS-COMPONENT.md` §2 says all seven criteria must PASS and any FAIL makes a
+ * thing a composition pattern. This file FAILS two of them, and stays anyway:
+ *
+ *   C2 (encapsulates reusable BEHAVIOR) — FAIL. It owns no state, no keyboard handling and no
+ *      focus management; its only ARIA is three static attributes. §2 calls this "pure static
+ *      layout/visual arrangement".
+ *   C3 (not expressible by composing primitives) — FAIL. Its own imports are the answer: this is
+ *      `Card` + `CardContent` + `Badge` + one Lucide glyph, and §2's heuristic — "could I build
+ *      this right now from existing primitives + token overrides?" — is answered yes.
+ *
+ * It is RETAINED because `src/components/layout/app-launcher.tsx` consumes it: it is an internal
+ * building block of a component that does pass the test, so deleting it is not on the table, and
+ * removing a public export is breaking. Keeping it public was the cheaper call.
+ *
+ * SO: a consumer reaching for a service tile should compose `Card` + `CardContent` + `Badge`
+ * themselves, which is what C3 says. Reach for `ServiceLauncherCard` only to match `AppLauncher`'s
+ * own tiles. Do not cite it as precedent for adding another static tile to `src/components/` —
+ * the test still means what it says, and this is the exception that was argued and written down
+ * rather than the rule.
+ *
+ * Ledger, options considered and the decision: gh#814.
+ */
 import * as React from "react";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp, ToneProp } from "../../props/vocabulary/index.js";

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, FlushProp, LabelProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } from "../../props/vocabulary/index.js";
 export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
@@ -58,7 +58,29 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
+    /**
+     * Accessible name for the horizontal-scroll REGION — the `tabindex="0"` wrapper a keyboard user
+     * lands on to scroll a table wider than its container, NOT the `<table>` itself (pass `aria-label`
+     * for that; it reaches the table element as it always has).
+     *
+     * Optional on purpose. A consumer is never forced to invent a name for every table: left out, the
+     * region takes the localized `dataTable.scrollRegion` default ("Scrollable table"), which is what
+     * a screen-reader user needs to hear anyway — that the arrow keys now scroll something. Pass a
+     * plain string when the page can say WHICH table ("Pending approvals"); a non-string node cannot
+     * be an `aria-label`, so it falls back to the default (the PermissionMatrix `label` contract).
+     *
+     * The region is only announced while it HAS overflow to reach: no overflow, no tab stop, no role
+     * and no name, because a focus stop that scrolls nothing is noise. (gh#817)
+     */
+    label?: LabelProp;
 };
+/**
+ * The scroll region's accessible name. A `label` is only usable as an `aria-label` when it is a
+ * plain string, and no consumer is obliged to supply one at all — so anything else takes the
+ * localized default, which still tells the user what the stop is for. Shared with `DataTable`, so
+ * both tables name their region the same way.
+ */
+export declare function scrollRegionLabel(label: LabelProp | undefined, t: (key: string) => string): string;
 export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
@@ -117,6 +139,21 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
     };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
+    /**
+     * Accessible name for the horizontal-scroll REGION — the `tabindex="0"` wrapper a keyboard user
+     * lands on to scroll a table wider than its container, NOT the `<table>` itself (pass `aria-label`
+     * for that; it reaches the table element as it always has).
+     *
+     * Optional on purpose. A consumer is never forced to invent a name for every table: left out, the
+     * region takes the localized `dataTable.scrollRegion` default ("Scrollable table"), which is what
+     * a screen-reader user needs to hear anyway — that the arrow keys now scroll something. Pass a
+     * plain string when the page can say WHICH table ("Pending approvals"); a non-string node cannot
+     * be an `aria-label`, so it falls back to the default (the PermissionMatrix `label` contract).
+     *
+     * The region is only announced while it HAS overflow to reach: no overflow, no tab stop, no role
+     * and no name, because a focus stop that scrolls nothing is noise. (gh#817)
+     */
+    label?: LabelProp;
 } & React.RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

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

@@ -1,7 +1,13 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { tableHeadHeightClass } from "../../lib/control-styles.js";
+import { useScrollsHorizontally } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
+function scrollRegionLabel(label, t) {
+  return typeof label === "string" && label.trim() !== "" ? label : t("dataTable.scrollRegion");
+}
 const Table = React.forwardRef(
   ({
     className,
@@ -11,45 +17,56 @@ const Table = React.forwardRef(
     preset = "default",
     collapseBelow = "sm",
     columnWidths,
+    label,
     ...props
-  }, ref) => (
-    // A table wider than its container scrolls horizontally in this wrapper; keep it
-    // keyboard-reachable so it can be scrolled without a pointer (WCAG 2.1.1 / axe
-    // scrollable-region-focusable). No landmark role — avoids landmark-unique collisions.
-    // When `scrollable` is false an ancestor owns the scroll region, so this is a bare
-    // positioning box (no `overflow`, no tab stop) to avoid a redundant nested scroller.
-    // step attribute; with `preset="default"` neither is emitted, so the box is byte-identical.
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          scrollable ? "relative w-full overflow-auto" : "relative w-full",
-          preset === "action-collection" && "ui-table-collection",
-          preset === "stacked-record-collection" && "ui-table-stacked-collection"
-        ),
-        "data-preset": preset === "default" ? void 0 : preset,
-        "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
-        "data-column-widths": columnWidths ? "" : void 0,
-        style: columnWidths ? {
-          "--table-action-collection-actions-width": columnWidths.actions,
-          "--table-action-collection-actions-width-compact": columnWidths.actionsCompact,
-          "--table-action-collection-meta-width-compact": columnWidths.metaCompact,
-          "--table-action-collection-min-inline-size-compact": columnWidths.minInlineSizeCompact
-        } : void 0,
-        ...scrollable ? { tabIndex: 0 } : {},
-        children: /* @__PURE__ */ jsx(
-          "table",
-          {
-            ref,
-            "data-slot": "table",
-            "data-striped": striped === void 0 ? void 0 : striped ? "" : "false",
-            className: cn("w-full caption-bottom", bordered && "ui-table-bordered", className),
-            ...props
-          }
-        )
-      }
-    )
-  )
+  }, ref) => {
+    const { t } = useTranslation();
+    const scrollRef = React.useRef(null);
+    const scrolls = useScrollsHorizontally(scrollRef, scrollable);
+    return (
+      // A table wider than its container scrolls horizontally in this wrapper; keep it
+      // keyboard-reachable so it can be scrolled without a pointer (WCAG 2.1.1 / axe
+      // scrollable-region-focusable). That stop must not be ANONYMOUS: an unnamed, unroled focus
+      // stop announces nothing at all, so it carries `role="group"` + an accessible name (gh#817).
+      // `group`, not `region`: a named `region` IS a landmark, and a page with three tables would
+      // then ship three same-named landmarks (axe `landmark-unique`) — the reason the role was left
+      // off in the first place. `group` is announced, takes a name, and is not a landmark.
+      // When `scrollable` is false an ancestor owns the scroll region, so this is a bare
+      // positioning box (no `overflow`, no tab stop) to avoid a redundant nested scroller.
+      // step attribute; with `preset="default"` neither is emitted, so the box is byte-identical.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: cn(
+            scrollable ? "relative w-full overflow-auto" : "relative w-full",
+            preset === "action-collection" && "ui-table-collection",
+            preset === "stacked-record-collection" && "ui-table-stacked-collection"
+          ),
+          "data-preset": preset === "default" ? void 0 : preset,
+          "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
+          "data-column-widths": columnWidths ? "" : void 0,
+          style: columnWidths ? {
+            "--table-action-collection-actions-width": columnWidths.actions,
+            "--table-action-collection-actions-width-compact": columnWidths.actionsCompact,
+            "--table-action-collection-meta-width-compact": columnWidths.metaCompact,
+            "--table-action-collection-min-inline-size-compact": columnWidths.minInlineSizeCompact
+          } : void 0,
+          ...scrolls ? { role: "group", "aria-label": scrollRegionLabel(label, t), tabIndex: 0 } : {},
+          children: /* @__PURE__ */ jsx(
+            "table",
+            {
+              ref,
+              "data-slot": "table",
+              "data-striped": striped === void 0 ? void 0 : striped ? "" : "false",
+              className: cn("w-full caption-bottom", bordered && "ui-table-bordered", className),
+              ...props
+            }
+          )
+        }
+      )
+    );
+  }
 );
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
@@ -140,5 +157,6 @@ export {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  scrollRegionLabel
 };

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

@@ -4,7 +4,6 @@ import * as React from "react";
 import { CheckCircle, CircleAlert, LoaderCircle, TriangleAlert } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Label } from "../data-entry/label.js";
-import { controlIconClass } from "../../lib/control-styles.js";
 import { cn } from "../../lib/utils.js";
 import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
 import { useOptionalAppContext } from "../../app/app-provider.js";
@@ -107,7 +106,16 @@ function FormField({
       errorId
     ),
     "aria-required": required ? true : childProps?.["aria-required"],
-    "aria-invalid": validationStatus === "error" ? true : childProps?.["aria-invalid"]
+    "aria-invalid": validationStatus === "error" ? true : childProps?.["aria-invalid"],
+    /* THE BOX SHOWS ITS OWN STATE, not just the line under it. `error` already reached the
+     * control through `aria-invalid`, but `warning` reached nothing — so a warned field drew an
+     * ordinary border and the only signal was a sentence below it. `.ui-control[data-status]`
+     * has painted both edges for a long time; FormField simply never passed the value down.
+     *
+     * Only `error` and `warning` are sent: `ControlStatusProp` is exactly those two, and
+     * `success` / `validating` have no control-level representation today. A child that sets its
+     * own `status` keeps it. */
+    ...validationStatus === "error" || validationStatus === "warning" ? { status: childProps?.status ?? validationStatus } : {}
   }) : children;
   const style = {};
   if (labelWidth != null)
@@ -166,16 +174,25 @@ function FormField({
               children: childWithA11y
             }
           ) }) }),
-          hasFeedback && validationStatus ? /* @__PURE__ */ jsxs("span", { id: feedbackId, role: "status", className: "ui-inline-xs text-xs", children: [
-            feedback ?? /* @__PURE__ */ jsx(
-              FeedbackIcon,
-              {
-                "aria-hidden": "true",
-                className: validationStatus === "validating" ? `${controlIconClass} motion-safe:animate-spin` : controlIconClass
-              }
-            ),
-            t(`dataEntry.form.${validationStatus}`)
-          ] }) : null,
+          hasFeedback && validationStatus ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              id: feedbackId,
+              role: "status",
+              "data-status": validationStatus,
+              className: "ui-form-feedback ui-inline-xs text-xs",
+              children: [
+                feedback ?? /* @__PURE__ */ jsx(
+                  FeedbackIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: validationStatus === "validating" ? "motion-safe:animate-spin" : void 0
+                  }
+                ),
+                t(`dataEntry.form.${validationStatus}`)
+              ]
+            }
+          ) : null,
           helperPlacement === "after" ? helperNode : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: error }) : null
         ] })