@godxjp/ui 17.0.0 → 18.0.0

package/dist/props/vocabulary/data.prop.d.ts

@@ -13,6 +13,15 @@ export type OnRowClickProp<T> = (row: T) => void;
 export type ColumnDefProp<T> = {
     key: string;
     header: React.ReactNode;
+    /**
+     * Accessible header text for a column whose `header` is visually empty — the
+     * standard case for a row-actions or selection column. Rendered as an
+     * `sr-only` label inside the `<th>` so the column keeps a screen-reader name
+     * (e.g. "Actions" / "Select") while showing nothing on screen. Required
+     * (dev-warned) when `header` is empty; ignored when `header` has visible text.
+     * Route the string through `t()` for i18n.
+     */
+    ariaLabel?: string;
     render?: (row: T) => React.ReactNode;
     sortable?: boolean;
     width?: string;

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -11,7 +11,7 @@ export type ShapeProp = "default" | "pill" | "sharp";
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
 export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info";
-/** Font weight — the dxs-kintai canon is THREE weights only: `regular` (400 body), `medium` (500
+/** Font weight — the reference-design canon is THREE weights only: `regular` (400 body), `medium` (500
  *  heading/label), `bold` (700 emphasis). 600/`semibold` is forbidden. */
 export type FontWeightProp = "regular" | "medium" | "bold";
 /** Heading level — drives both the `--heading-h*` size token and the semantic `<h1..h4>` element. */

package/dist/styles/base.css

@@ -218,7 +218,7 @@
 
   /* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
    * the document outline (one <h1> per page, levels never skipped). Visual size
-   * follows the dxs-kintai scale; component titles override via their own class.
+   * follows the reference-design scale; component titles override via their own class.
    * Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
    * brands (display face on headings, body face on prose). */
   :where(h1, h2, h3, h4, h5, h6) {

package/dist/styles/layout.css

@@ -175,6 +175,16 @@
     gap: var(--space-inline-lg);
   }
 
+  /* ResponsiveGrid OWNS its query container. The component wraps the grid in
+   * `.ui-responsive-grid-scope` (container-type: inline-size, named `responsive-grid`) so the
+   * column breakpoints resolve against the WIDTH AVAILABLE TO THE GRID — not the viewport and not
+   * an undeclared ancestor `container-type`. This makes it correct inside a narrow card, a
+   * SplitPane aside, or a bare `<div>`; it can never silently stay one column for want of an
+   * external container context (gh#165). Named so it queries its own scope, never a closer one. */
+  .ui-responsive-grid-scope {
+    container: responsive-grid / inline-size;
+  }
+
   .ui-responsive-grid {
     display: grid;
     gap: var(--space-stack-md);
@@ -185,24 +195,33 @@
     min-width: 0;
   }
 
-  @container (min-width: 640px) {
+  @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 768px) {
+  @container responsive-grid (min-width: 48rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-md, 3), minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 1024px) {
+  @container responsive-grid (min-width: 64rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
     }
   }
 
+  /* SplitPane OWNS its query container too — `.ui-split-pane-scope`
+   * (container-type: inline-size, named `split-pane`). The two-column layout is chosen from the
+   * pane's OWN available width, so a narrow embedded pane on a large viewport correctly stays a
+   * single column, and a wide pane on a small viewport can split (gh#165 — replaces the old
+   * `@media (min-width: 1080px)` viewport query that ignored the container). */
+  .ui-split-pane-scope {
+    container: split-pane / inline-size;
+  }
+
   .ui-split-pane {
     display: grid;
     gap: var(--space-stack-md);
@@ -259,7 +278,7 @@
     opacity: 0.5;
   }
 
-  @media (min-width: 1080px) {
+  @container split-pane (min-width: 48rem) {
     .ui-split-pane[data-aside-width="sm"] {
       grid-template-columns: minmax(0, 1fr) 20rem;
     }
@@ -543,22 +562,30 @@
 }
 
 @layer components {
+  /* Pagination is ONE horizontal row and never wraps to a second desktop line (gh#153 — the old
+   * `flex-wrap: wrap` split the range / size-changer / page strip across rows). The number strip
+   * (`.ui-pagination-list`) absorbs any overflow by scrolling horizontally rather than wrapping; a
+   * genuinely narrow viewport uses the INTENTIONAL compact form via the `simple` prop (Prev · n/N ·
+   * Next, no page buttons) — not browser-driven wrapping. */
   .ui-pagination {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    min-width: 0;
     align-items: center;
     justify-content: flex-end;
     gap: var(--pagination-gap);
   }
 
-  .ui-pagination[data-simple="true"] {
-    flex-wrap: nowrap;
-  }
-
+  /* Total / range label sits at the start and truncates rather than pushing the controls onto a
+   * second line — the nav row stays one line at every width (gh#153). */
   .ui-pagination-total {
+    min-width: 0;
     margin-inline-end: auto;
+    overflow: hidden;
     color: hsl(var(--muted-foreground));
     font-size: var(--pagination-total-font-size);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .ui-pagination-count {
@@ -576,12 +603,22 @@
 
   .ui-pagination-list {
     display: flex;
+    min-width: 0;
     align-items: center;
     gap: var(--pagination-item-gap);
+    /* Overflow scrolls horizontally instead of wrapping onto a second row. Hidden scrollbar keeps
+     * the desktop bar clean; the strip stays swipeable on touch. */
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .ui-pagination-list::-webkit-scrollbar {
+    display: none;
   }
 
   .ui-pagination-item {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
   }

package/dist/styles/shell-layout.css

@@ -143,6 +143,21 @@
     display: none;
   }
 
+  /* AppShell-owned mobile drawer trigger — hidden on desktop, shown once the docked sidebar
+   * collapses out below `lg` (gh#165). The drawer nav itself is a focus-trapped Sheet. */
+  .app-mobile-nav-trigger {
+    display: none;
+    flex: 0 0 auto;
+    margin-inline-end: var(--space-1);
+  }
+
+  /* The drawer nav reuses the docked Sidebar node; its `.sb-root { display: contents }` flattens
+   * into the scrollable SheetBody so sections/footer flow naturally in the panel. */
+  .app-mobile-nav-body {
+    display: flex;
+    flex-direction: column;
+  }
+
   .app-topbar-spacer {
     flex: 1;
   }
@@ -171,6 +186,10 @@
     .app-topbar-left:has(.app-mobile-sidebar-trigger) {
       display: flex;
     }
+
+    .app-mobile-nav-trigger {
+      display: inline-flex;
+    }
   }
 
   .sb-root {

package/dist/styles/text-layout.css

@@ -33,7 +33,7 @@
     font-size: var(--font-size-2xl);
   }
 
-  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600.
+  /* Weight — the reference-design canon (400 body · 500 heading/label · 700 emphasis). No 600.
    * Shared by text + heading; the two-attribute heading selectors outrank the base heading
    * rule below, so `<Heading weight="bold">` renders a semantic, emphasised title. */
   [data-slot="text"][data-weight="regular"],

package/dist/tokens/components/card.css

@@ -43,7 +43,7 @@
   --card-header-border-bottom: initial;
   --card-radius: var(--radius);
   /* Resting elevation — quiet by default (rule #44): cards are flat (1px border, no shadow) in the
-   * dxs-kintai baseline. A service that wants lifted cards sets this to an elevation token once,
+   * reference-design baseline. A service that wants lifted cards sets this to an elevation token once,
    * e.g. --card-shadow: var(--shadow-sm), and every Card picks up the shadow with no markup change. */
   --card-shadow: 0 0 0 0 transparent;
   /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the

package/dist/tokens/foundation.css

@@ -1,7 +1,7 @@
 /* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
 
 :root {
-  /* Color system (HSL components) — dxs-kintai: warm hue-60 neutral spine,
+  /* Color system (HSL components) — the reference design: warm hue-60 neutral spine,
    * SmartHR blue primary, 和色/wa-iro semantics. */
   --background: 60 33% 99%; /* #fdfdfb warm off-white */
   --foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
@@ -220,7 +220,7 @@
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
-  /* dxs-kintai uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
+  /* the reference design uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
    * forbidden (ambiguous between 500 and 700) — the legacy "semibold" token collapses to medium
    * so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
   --font-weight-semibold: 500;
@@ -325,7 +325,7 @@
 
   /* Motion — the primitive tier for animation, so enter/transition timing reads a token
    * instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2).
-   * dxs-kintai keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
+   * the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift.
    * Consumers honour prefers-reduced-motion at the call site. */
   --duration-fast: 150ms;
   --duration-base: 250ms;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "17.0.0",
-  "godxUiMcp": "16.10.0",
+  "version": "18.0.0",
+  "godxUiMcp": "17.0.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -276,9 +276,10 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
-    "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:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm build && 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:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && 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: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:release": "pnpm build && 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: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 check:frame-coverage && pnpm check:frame-axe && pnpm test",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
+    "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
@@ -304,6 +305,9 @@
     "check:contrast": "node scripts/check-contrast.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
+    "check:frame-axe": "node scripts/check-frame-axe.mjs",
+    "check:frame-geometry": "node scripts/frame-geometry.mjs",
+    "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "check:use-client": "node scripts/check-use-client.mjs"

package/scripts/ui-audit.mjs

@@ -281,9 +281,9 @@ const RULES = [
   {
     id: "no-em-dash-in-copy",
     severity: "warn",
-    // Em-dash (U+2014) in JSX text — dxs-kintai uses the middot `·` for JP/EN pairs and calm copy.
+    // Em-dash (U+2014) in JSX text — the reference design uses the middot `·` for JP/EN pairs and calm copy.
     test: /[A-Za-z0-9぀-ヿ一-鿿]\s*—\s*[A-Za-z0-9぀-ヿ一-鿿]/,
-    standard: "@godxjp/ui dxs-kintai typography (best-ux) · Unicode punctuation",
+    standard: "@godxjp/ui reference-design typography (best-ux) · Unicode punctuation",
     message:
       "No em-dash (—) in product copy. Use a middot `·` for JP/EN label pairs, or restructure into two calm sentences. Keep copy factual and quiet.",
   },

package/scripts/visual-audit-rules.mjs

@@ -29,7 +29,7 @@ export const VISUAL_RULES = [
     id: "oversaturated-accent",
     severity: "warn",
     category: "color",
-    standard: "@godxjp/ui dxs-kintai 渋み (OKLCH chroma ≤ 0.18)",
+    standard: "@godxjp/ui reference-design 渋み (OKLCH chroma ≤ 0.18)",
     fix: "Desaturate brand/primary surfaces — keep OKLCH chroma ≤ 0.18. Read --primary tokens; never paint a full-width bar in raw vivid blue.",
   },
   {
@@ -75,7 +75,7 @@ export function oklchChroma({ r, g, b }) {
   return Math.hypot(oa, ob);
 }
 
-/** dxs-kintai restraint bound. A signal/brand surface above this chroma "screams". */
+/** reference-design restraint bound. A signal/brand surface above this chroma "screams". */
 export const CHROMA_LIMIT = 0.18;
 
 /** @returns {boolean} true when an accent surface exceeds the 渋み chroma limit. */