@godxjp/ui 19.3.1 → 19.4.0

package/docs/showcase/table-states.tsx

@@ -191,10 +191,13 @@ function StateSection({
  *  the loading skeleton visibly preserves the table's column layout. */
 function TableShell({
   caption,
+  banner,
   children,
 }: {
   caption: React.ReactNode;
-  children: React.ReactNode;
+  /** Padded band between the header and the flush table body (an Alert). */
+  banner?: React.ReactNode;
+  children?: React.ReactNode;
 }) {
   return (
     <Card>
@@ -206,7 +209,8 @@ function TableShell({
           </Text>
         </CardAction>
       </CardHeader>
-      <CardContent flush>{children}</CardContent>
+      {banner ? <CardContent>{banner}</CardContent> : null}
+      {children ? <CardContent flush>{children}</CardContent> : null}
     </Card>
   );
 }
@@ -288,8 +292,9 @@ export default function Demo() {
           title="エラー"
           note="エラーコード・リクエストID・再試行を明示する。"
         >
-          <TableShell caption="取得に失敗しました">
-            <div className="p-4">
+          <TableShell
+            caption="取得に失敗しました"
+            banner={
               <Alert tone="destructive">
                 <AlertTitle>勤怠データを取得できませんでした</AlertTitle>
                 <AlertDescription>
@@ -307,8 +312,8 @@ export default function Demo() {
                   </Button>
                 </AlertActions>
               </Alert>
-            </div>
-          </TableShell>
+            }
+          />
         </StateSection>
 
         {/* 4 ─ partial: some rows loaded, one segment failed / stale */}
@@ -317,29 +322,29 @@ export default function Demo() {
           title="部分的"
           note="一部のみ取得できた状態。失敗した区分だけを再取得できる。"
         >
-          <TableShell caption="4 / 5 部署を表示中">
-            <div>
-              <div className="p-4 pb-0">
-                <Alert tone="warning">
-                  <AlertTitle>一部のデータを取得できませんでした</AlertTitle>
-                  <AlertDescription>
-                    「倉庫」部署の打刻が取得できなかったため、最新ではない可能性があります。
-                    <br />
-                    <Text tone="muted">
-                      コード <code className="tabular-nums">ATTEND_PARTIAL_倉庫</code> ・
-                      リクエストID <code className="tabular-nums">req_7f3a91c0e8</code>
-                    </Text>
-                  </AlertDescription>
-                  <AlertActions>
-                    <Button variant="outline" size="sm">
-                      <RefreshCw aria-hidden="true" />
-                      倉庫を再取得
-                    </Button>
-                  </AlertActions>
-                </Alert>
-              </div>
-              <DataTable data={PARTIAL_ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
-            </div>
+          <TableShell
+            caption="4 / 5 部署を表示中"
+            banner={
+              <Alert tone="warning">
+                <AlertTitle>一部のデータを取得できませんでした</AlertTitle>
+                <AlertDescription>
+                  「倉庫」部署の打刻が取得できなかったため、最新ではない可能性があります。
+                  <br />
+                  <Text tone="muted">
+                    コード <code className="tabular-nums">ATTEND_PARTIAL_倉庫</code> ・ リクエストID{" "}
+                    <code className="tabular-nums">req_7f3a91c0e8</code>
+                  </Text>
+                </AlertDescription>
+                <AlertActions>
+                  <Button variant="outline" size="sm">
+                    <RefreshCw aria-hidden="true" />
+                    倉庫を再取得
+                  </Button>
+                </AlertActions>
+              </Alert>
+            }
+          >
+            <DataTable data={PARTIAL_ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
           </TableShell>
         </StateSection>
 

package/docs/showcase/table-sticky-columns.tsx

@@ -241,12 +241,13 @@ export default function Demo() {
                     <TableHead className={`${PIN_LEFT} w-56 min-w-56`}>従業員</TableHead>
                     {DAYS.map((d) => (
                       <TableHead key={d.key} className="text-center">
-                        <span className="flex flex-col leading-tight">
+                        {/* Weekday over its date reads as ONE label — no seam between the lines. */}
+                        <Flex direction="col" gap="none" className="leading-tight">
                           <Text weight="medium">{d.label}</Text>
                           <Text size="2xs" tone="muted" tabular>
                             {d.date}
                           </Text>
-                        </span>
+                        </Flex>
                       </TableHead>
                     ))}
                     <TableHead className="text-end tabular-nums">実働</TableHead>

package/docs/showcase/table-tree-rows.tsx

@@ -10,10 +10,11 @@
  *
  *   row model ........ flatten an org tree to rows carrying { depth, hasChildren,
  *                      expanded }, then derive `visibleRows` from the open set.
- *   tree column ...... ColumnDef.render draws a 14px-per-level indent (CSS var,
- *                      not a fixed layout dimension) + a twirl chevron Button
- *                      (ghost icon-sm) that rotates 90° when expanded — rendered
- *                      ONLY on parent rows; leaves get an aligning spacer.
+ *   tree column ...... ColumnDef.render indents one --table-cell-indent-space-step
+ *                      per level (the token `<TableCell indent>` reads) + a twirl
+ *                      chevron Button (ghost icon-sm) that rotates 90° when
+ *                      expanded — rendered ONLY on parent rows; leaves get an
+ *                      aligning spacer.
  *   metrics .......... 出勤率 / 遅刻 / 残業 as tabular-nums columns; 承認状態 as Badge(tone).
  *   chrome ........... DataTable.Toolbar + DensityToggle + sticky header (built in).
  *
@@ -242,9 +243,12 @@ const hours = new Intl.NumberFormat("ja-JP", {
 });
 
 // ── Tree name cell ───────────────────────────────────────────────────────────────
-// 14px indent per level via a CSS custom property (data-driven, not a fixed layout
-// dimension). Twirl chevron is rendered ONLY on parent rows; leaves get a spacer so
-// names stay aligned at the same depth.
+// One `--table-cell-indent-space-step` per level — the SAME token `<TableCell indent>`
+// reads, so the tree and a hand-authored table indent on one contract and a service
+// retunes the step in one place. DataTable owns the `<td>` here (the column `render`
+// receives no cell), so the level is applied to the cell's content instead of the cell.
+// Twirl chevron is rendered ONLY on parent rows; leaves get a spacer so names stay
+// aligned at the same depth.
 
 function TreeCell({
   row,
@@ -256,9 +260,12 @@ function TreeCell({
   onToggle: (id: string) => void;
 }) {
   return (
-    <span
-      className="flex items-center gap-1"
-      style={{ paddingInlineStart: `calc(${row.depth} * 14px)` }}
+    <Flex
+      align="center"
+      gap="xs"
+      style={{
+        paddingInlineStart: `calc(var(--table-cell-indent-space-step) * ${row.depth})`,
+      }}
     >
       {row.hasChildren ? (
         <Button
@@ -284,15 +291,15 @@ function TreeCell({
           className="inline-block size-[calc(var(--control-height)-0.5rem)] shrink-0"
         />
       )}
-      <span className="flex min-w-0 items-center gap-2">
+      <Flex align="center" gap="sm" className="min-w-0">
         <Text weight={row.kind === "従業員" ? "regular" : "medium"} truncate>
           {row.name}
         </Text>
         <Badge variant="outline" tone="neutral" className="shrink-0">
           {row.kind}
         </Badge>
-      </span>
-    </span>
+      </Flex>
+    </Flex>
   );
 }
 
@@ -391,7 +398,7 @@ function InteractiveTree() {
   );
 }
 
-// ── Fully-expanded static tree (proves all depth levels + the 14px indent) ───────
+// ── Fully-expanded static tree (proves all depth levels + the per-level indent) ──
 
 function ExpandedTree() {
   const open = React.useMemo(() => allParentIds(TREE), []);
@@ -417,7 +424,7 @@ export default function Demo() {
   return (
     <PageContainer
       title="ツリー行"
-      subtitle="階層行 (部署 → チーム → 従業員) · 14px/階層インデント · 親行のみ開閉トグル · 勤怠ロールアップ"
+      subtitle="階層行 (部署 → チーム → 従業員) · 階層ごとのインデント · 親行のみ開閉トグル · 勤怠ロールアップ"
       density="compact"
     >
       <Flex direction="col" gap="lg">

package/docs/showcase/table-view-tabs.tsx

@@ -367,22 +367,20 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
   neutral: "bg-muted-foreground",
 };
 
+// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
+// the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
+// raw `<span className="flex …">`, i.e. utility layout (gh#354).
 function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
   return (
-    <span className="flex items-center gap-2">
+    <Flex as="span" align="center" gap="sm">
       <span aria-hidden="true" className={`size-2 rounded-full ${DOT_CLASS[view.dot]}`} />
       <span>{view.label}</span>
-      <Text
-        as="span"
-        size="2xs"
-        weight="medium"
-        tone="muted"
-        tabular
-        className="bg-muted inline-flex min-w-5 items-center justify-center rounded-full px-1.5"
-      >
-        {count}
-      </Text>
-    </span>
+      <Badge as="span" tone="neutral" shape="pill">
+        <Text as="span" size="2xs" weight="medium" tabular>
+          {count}
+        </Text>
+      </Badge>
+    </Flex>
   );
 }
 
@@ -436,12 +434,12 @@ export default function Demo() {
       <Flex direction="col" gap="md">
         {/* Saved-view ribbon — controlled Tabs; switching swaps the preset below. */}
         <Tabs value={view} onValueChange={(v) => setView(v as ViewId)}>
-          <TabsList variant="line" className="h-auto flex-wrap gap-1 border-b">
+          <TabsList variant="line" className="h-auto w-full flex-wrap justify-start border-b">
             {VIEWS.map((v) => (
               <TabsTrigger
                 key={v.id}
                 value={v.id}
-                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent bg-transparent px-3 py-2 shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+                className="rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
               >
                 <ViewTrigger view={v} count={counts[v.id]} />
               </TabsTrigger>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.3.1",
-  "godxUiMcp": "19.3.1",
+  "version": "19.4.0",
+  "godxUiMcp": "19.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -333,16 +333,17 @@
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "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",
-    "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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && 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:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && 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:ci": "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:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
-    "verify:ci: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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
+    "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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && 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:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && 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:ci": "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:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
+    "verify:ci: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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
     "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "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-lockstep": "node scripts/check-release-lockstep.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",