@godxjp/ui 18.11.1 → 18.12.2

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/components/data-entry/select.js

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
 import { mergeAriaIds, omitFieldA11y, pickFieldA11y } from "../../lib/field-a11y.js";
 import { SearchSelect } from "./search-select.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 function isDataSelect(props) {
   return "options" in props || "loadOptions" in props;
 }
@@ -203,6 +204,7 @@ function DataSelect({
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
+  const { t } = useTranslation();
   const searchable = showSearch ?? Boolean(loadOptions);
   const hasOptions = options.length > 0;
   if (searchable) {
@@ -255,7 +257,9 @@ function DataSelect({
     option.value
   );
   const isControlled = value !== void 0;
-  return /* @__PURE__ */ jsxs(
+  const canClear = clearable !== false && isControlled && !disabled && !readOnly;
+  const showClear = canClear && Boolean(value);
+  const select = /* @__PURE__ */ jsxs(
     SelectPrimitive.Root,
     {
       "data-slot": "select",
@@ -268,7 +272,17 @@ function DataSelect({
       disabled: disabled || !hasOptions,
       name,
       children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { id, "data-testid": dataTestId, className, ...ariaProps, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            id,
+            "data-testid": dataTestId,
+            className: cn(showClear && "pe-9", canClear ? void 0 : className),
+            showIndicator: !showClear,
+            ...ariaProps,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+          }
+        ),
         /* @__PURE__ */ jsx(SelectContent, { children: groupDataOptions(options).map(
           (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
@@ -278,6 +292,21 @@ function DataSelect({
       ]
     }
   );
+  if (!canClear) return select;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    select,
+    showClear ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 end-2 flex items-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
+        "data-testid": dataTestId ? `${dataTestId}-clear` : void 0,
+        className: "flex size-6 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        onClick: () => onValueChange?.("", void 0),
+        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+      }
+    ) }) : null
+  ] });
 }
 export {
   Select,

package/dist/components/layout/responsive-grid.d.ts

@@ -1,7 +1,13 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
 export type ResponsiveGridProps = {
     columns?: ResponsiveGridColumnsProp;
+    /**
+     * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
+     * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
+     * to strip its old `columns` prop.
+     */
+    preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, children }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, preset, children }: ResponsiveGridProps): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -1,20 +1,31 @@
 import { jsx } from "react/jsx-runtime";
+const RESPONSIVE_GRID_PRESET_COLUMNS = {
+  "pricing-plans": { sm: 3, md: 3, lg: 3 }
+};
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
-      "--responsive-grid-sm": Math.min(columns, 2),
-      "--responsive-grid-md": Math.min(columns, 3),
-      "--responsive-grid-lg": columns
+      sm: Math.min(columns, 2),
+      md: Math.min(columns, 3),
+      lg: columns
     };
   }
   return {
-    "--responsive-grid-sm": columns.sm ?? 1,
-    "--responsive-grid-md": columns.md ?? columns.sm ?? 1,
-    "--responsive-grid-lg": columns.lg ?? columns.md ?? columns.sm ?? 1
+    sm: columns.sm ?? 1,
+    md: columns.md ?? columns.sm ?? 1,
+    lg: columns.lg ?? columns.md ?? columns.sm ?? 1
+  };
+}
+function toStyle(resolved) {
+  return {
+    "--responsive-grid-sm": resolved.sm,
+    "--responsive-grid-md": resolved.md,
+    "--responsive-grid-lg": resolved.lg
   };
 }
-function ResponsiveGrid({ columns = 4, children }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children }) });
+function ResponsiveGrid({ columns = 4, preset, children }) {
+  const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: toStyle(resolved), children }) });
 }
 export {
   ResponsiveGrid

package/dist/props/components/layout.prop.d.ts

@@ -136,6 +136,19 @@ export type ResponsiveGridColumnsProp = number | {
     md?: number;
     lg?: number;
 };
+/**
+ * Named, package-owned column geometry for ResponsiveGrid — the semantic alternative to a
+ * consumer hand-rolling a `columns={{ sm, md, lg }}` breakpoint map for a recognised collection
+ * shape. Takes priority over `columns` when both are set (`columns` is then ignored, not merged).
+ *
+ * `pricing-plans` — the canonical billing/pricing-plan collection: 1 column until the `lg` step
+ * (container ≥ 64rem), then 3 columns from `lg` upward. Because ResponsiveGrid has no step above
+ * `lg`, this reads as exactly 3 columns at BOTH the 1024px and 1440px reference widths and 1
+ * column at 390px — the 3/3/1 contract requested for the billing plan catalog
+ * (dxs-platform/platform#333, tracked upstream at dxs-platform/pkg-ui#14). General-purpose beyond
+ * pricing: any 3-up desktop / 1-up mobile collection (no intermediate `md` step) can reuse it.
+ */
+export type ResponsiveGridPresetProp = "pricing-plans";
 export type MasterDetailRailWidthProp = "compact" | "standard";
 export type MasterDetailRailProp = "master" | "detail";
 /**

package/dist/props/registry.d.ts

@@ -532,6 +532,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly ResponsiveGridPresetProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly MasterDetailRailWidthProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";

package/dist/props/registry.js

@@ -525,6 +525,7 @@ const COMPONENT_PROP_REGISTRY = {
     ]
   },
   ResponsiveGridColumnsProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  ResponsiveGridPresetProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   MasterDetailRailWidthProp: {
     group: "layout",
     file: "components/layout.prop.ts",

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.2",
+  "godxUiMcp": "18.12.2",
   "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",