@godxjp/ui 17.0.1 → 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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "17.0.1",
-  "godxUiMcp": "17.0.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"