@godxjp/ui 18.11.1 → 18.12.0

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/shell-layout.css

@@ -78,14 +78,16 @@
   }
 
   /* `.app-main` carries tabindex="0" (axe scrollable-region-focusable, dbad118), so keyboard
-   * focus can land on the region — without a rule here the USER-AGENT default outline (blue
-   * in Chrome) wraps the whole content area. Use the design-system ring instead; INSET because
-   * `.app-main` is the shell's clip boundary (`contain: paint`) and an outset shadow would be
-   * clipped by the grid. Never remove the indicator outright — the region is focusable and
-   * must show focus (WCAG 2.4.7, gh#271). */
+   * 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(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+    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 {

package/dist/styles/table-layout.css

@@ -281,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/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.1",
-  "godxUiMcp": "18.11.1",
+  "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",