@godxjp/ui 18.11.0 → 18.12.0

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

@@ -41,7 +41,10 @@ interface DataTableProps<T> {
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
     /**
      * Manual (server) flags. Default `false` so the simple `data`+`columns` case
-     * sorts / filters / paginates in-browser with no extra wiring. Set the
+     * sorts / filters in-browser with no extra wiring. Client pagination slices
+     * rows ONLY when engaged — a numbered `<DataTable.Pagination>` child is
+     * composed, or `pagination`/`onPaginationChange` is supplied; a plain table
+     * with neither renders every row (no silent 10-row cap, gh#270). Set the
      * relevant flag `true` and drive the matching state from your query for
      * server-side sort / filter / pagination.
      */

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

@@ -178,6 +178,10 @@ function DataTable({
     }
   };
   const tanstackColumns = React.useMemo(() => toTanstackColumns(columns), [columns]);
+  const hasNumberedPager = React.Children.toArray(children).some(
+    (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination" && typeof c.props.onChange !== "function"
+  );
+  const paginationEngaged = manualPagination || controlledPagination !== void 0 || onPaginationChange !== void 0 || hasNumberedPager;
   const table = useReactTable({
     data,
     columns: tanstackColumns,
@@ -185,7 +189,7 @@ function DataTable({
     getCoreRowModel: getCoreRowModel(),
     ...manualSorting ? {} : { getSortedRowModel: getSortedRowModel() },
     ...manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() },
-    ...manualPagination ? {} : { getPaginationRowModel: getPaginationRowModel() },
+    ...manualPagination || !paginationEngaged ? {} : { getPaginationRowModel: getPaginationRowModel() },
     manualSorting,
     manualFiltering,
     manualPagination,
@@ -419,6 +423,26 @@ DataTable.Content = function DataTableContent() {
       );
     }
   }, [missingHeaderNames]);
+  const scrollRef = React.useRef(null);
+  const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () => {
+      const overflowing = el.scrollWidth - el.clientWidth > 1;
+      const atEnd = Math.abs(el.scrollLeft) + el.clientWidth >= el.scrollWidth - 1;
+      setHasOverflowEnd(overflowing && !atEnd);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, []);
   const activeSort = sort ?? sortingStateToSort(table.getState().sorting);
   const isControlledSort = sort !== void 0 || !!onSortChange;
   const onHeaderClick = (col) => {
@@ -440,7 +464,12 @@ DataTable.Content = function DataTableContent() {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("ui-data-table-scroll", hasPinEnd && "ui-data-table-has-pin-end"),
+      ref: scrollRef,
+      className: cn(
+        "ui-data-table-scroll",
+        hasPinEnd && "ui-data-table-has-pin-end",
+        hasOverflowEnd && "ui-data-table-has-overflow-end"
+      ),
       "aria-busy": loading,
       tabIndex: presetAttr ? void 0 : 0,
       children: /* @__PURE__ */ jsx(

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

@@ -9,6 +9,14 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
      */
     scrollable?: boolean;
+    /**
+     * Draw the full cell grid (gh#274): a 1px outer frame plus vertical rules between columns
+     * (horizontal row rules already come from TableRow). Reach for this whenever the table
+     * carries rowSpan/colSpan merged cells — without column rules the merge relationships are
+     * unreadable. Colour comes from the `--table-border-color` token (default `--border`).
+     * Default `false` emits nothing, keeping the plain table byte-identical.
+     */
+    bordered?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
      * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
@@ -42,6 +50,14 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
      */
     scrollable?: boolean;
+    /**
+     * Draw the full cell grid (gh#274): a 1px outer frame plus vertical rules between columns
+     * (horizontal row rules already come from TableRow). Reach for this whenever the table
+     * carries rowSpan/colSpan merged cells — without column rules the merge relationships are
+     * unreadable. Colour comes from the `--table-border-color` token (default `--border`).
+     * Default `false` emits nothing, keeping the plain table byte-identical.
+     */
+    bordered?: boolean;
     /**
      * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
      * table exactly as it is. `"action-collection"` is the canonical dense approval / action queue

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

@@ -3,7 +3,14 @@ import * as React from "react";
 import { tableHeadHeightClass } from "../../lib/control-styles.js";
 import { cn } from "../../lib/utils.js";
 const Table = React.forwardRef(
-  ({ className, scrollable = true, preset = "default", collapseBelow = "sm", ...props }, ref) => (
+  ({
+    className,
+    scrollable = true,
+    bordered = false,
+    preset = "default",
+    collapseBelow = "sm",
+    ...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.
@@ -26,7 +33,7 @@ const Table = React.forwardRef(
           {
             ref,
             "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", className),
+            className: cn("w-full caption-bottom text-sm", bordered && "ui-table-bordered", className),
             ...props
           }
         )

package/dist/styles/alert-layout.css

@@ -9,7 +9,7 @@
     align-items: flex-start;
     gap: var(--alert-space-gap);
     width: 100%;
-    border-radius: var(--radius-md);
+    border-radius: var(--alert-radius);
     border-width: 1px;
     padding: var(--alert-space-inset);
     font-size: var(--font-size-base);

package/dist/styles/shell-layout.css

@@ -77,6 +77,19 @@
     background-color: var(--app-shell-main-background);
   }
 
+  /* `.app-main` carries tabindex="0" (axe scrollable-region-focusable, dbad118), so keyboard
+   * focus can land on the region. The UA default outline is suppressed and the indicator is
+   * token-gated (gh#276): `--region-focus-ring-width` defaults to 0 — OFF — because a
+   * control-strength frame around the whole content area reads as a glitch (`:focus-visible`
+   * promotes on any keypress after a click-focus, so mouse users see it constantly). A service
+   * that needs the visible keyboard-scroll affordance (WCAG 2.4.7) opts in via the token;
+   * INSET because `.app-main` is the shell's clip boundary (`contain: paint`). */
+  .app-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
+  }
+
   .app-footer {
     grid-area: footer;
     border-top: 1px solid hsl(var(--border));

package/dist/styles/table-layout.css

@@ -169,6 +169,11 @@
     padding-inline: var(--space-page-active-x);
   }
 
+  /* Scroll-hint fade — a SCROLL affordance, so it only shows while the region
+   * actually overflows and is not scrolled to the inline-end. The component
+   * measures the scroll box and stamps `.ui-data-table-has-overflow-end`
+   * (gh#267 — the fade used to render unconditionally, washing out the last
+   * column of tables that never scroll). */
   .ui-data-table-scroll::after {
     content: "";
     position: absolute;
@@ -178,9 +183,15 @@
     z-index: 20;
     width: 1.75rem;
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
     background: linear-gradient(to left, hsl(var(--background) / 0.88), transparent);
   }
 
+  .ui-data-table-has-overflow-end::after {
+    opacity: 1;
+  }
+
   [data-slot="card-content"][data-flush] .ui-data-table-scroll {
     margin-inline: 0;
     padding-inline: 0;
@@ -270,6 +281,19 @@
       var(--table-row-selected-background, hsl(var(--muted) / 0.3))
     );
   }
+
+  /* `<Table bordered>` — the full cell grid (gh#274). Horizontal row rules already come from
+   * TableRow's own border; here we add the outer frame and the vertical rules between columns,
+   * so rowSpan/colSpan merged cells read as merged (a merged group cell floating in whitespace
+   * is unreadable). Colour resolves the --table-border-color token at the CALL SITE so a scoped
+   * theme override of --border reaches it. */
+  .ui-table-bordered {
+    border: 1px solid var(--table-border-color, hsl(var(--border)));
+  }
+
+  .ui-table-bordered :is([data-slot="table-head"], [data-slot="table-cell"]):not(:last-child) {
+    border-inline-end: 1px solid var(--table-border-color, hsl(var(--border)));
+  }
 }
 
 @layer components {

package/dist/tokens/components/feedback.css

@@ -21,6 +21,10 @@
   --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
+  /* Alert corner radius (gh#268 — rule #45): a full-width Alert often sits in the
+   * same page column as a Card (--card-radius); a service aligns them by
+   * overriding this once. Default keeps the historical --radius-md. */
+  --alert-radius: var(--radius-md);
   --alert-space-inset: var(--space-section-active);
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);

package/dist/tokens/components/table.css

@@ -18,6 +18,12 @@
    * --table-cell-space-x are density-scaled and re-declared inside a `.ui-density-*` subtree, and a
    * :root binding would freeze the footer at the :root density (docs/TOKENS.md — the :root freeze
    * rule). Defaults = var(--space-stack-sm) block · var(--table-cell-space-x) inline. */
+  /* Cell-grid rule colour for `<Table bordered>` (gh#274) — the outer frame and the vertical
+   * rules between columns. Declared `initial` so the default re-resolves to the LIVE --border
+   * role at the call site (a :root binding to hsl(var(--border)) freezes at the :root value and
+   * a scoped [data-tenant] override of --border would never reach it — docs/TOKENS.md).
+   * Default = hsl(var(--border)). */
+  --table-border-color: initial;
   --table-pagination-padding-y: initial;
   --table-pagination-padding-x: initial;
   /* DataTable surface — narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a

package/dist/tokens/foundation.css

@@ -153,6 +153,17 @@
    * default re-resolves at the element that paints the ring while an explicit override still wins. */
   --focus-ring-color: initial; /* default = the live --ring role */
   --focus-ring-width: 2px;
+  /* REGION focus ring — the keyboard-scroll affordance on large scroll REGIONS (`.app-main`,
+   * gh#271/gh#276), separate from the control ring above. A control-strength 2px brand frame
+   * around the entire content area reads as a glitch to mouse-first users (`:focus-visible`
+   * promotes on any keypress after a click-focus), so the DEFAULT IS OFF — a deliberate,
+   * product-owner tradeoff against WCAG 2.4.7 for keyboard-scroll visibility. A service that
+   * needs the visible affordance opts in with ONE token:
+   *   --region-focus-ring-width: var(--focus-ring-width);
+   * `--region-focus-ring-color` is declared `initial` (NOT a :root var binding — the freeze
+   * rule) and resolves to the live focus-ring hue at the element that paints it. */
+  --region-focus-ring-width: 0;
+  --region-focus-ring-color: initial; /* default = hsl(var(--focus-ring-color, var(--ring))) */
 
   /* GRADIENTS — opt-in decorative fills exposed at the token layer so a service can paint a hero
    * banner, a brand wash, or a radial brand glow purely by configuring tokens (cardinal rule #45).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.11.0",
-  "godxUiMcp": "18.11.0",
+  "version": "18.12.0",
+  "godxUiMcp": "18.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -331,14 +331,15 @@
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
     "check:release-plan": "node scripts/check-release-command-plan.mjs",
     "check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
     "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
+    "check:mcp-catalog-coverage": "node scripts/check-mcp-catalog-coverage.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
     "gen:component-api-manifest": "node scripts/gen-component-api-manifest.mjs",