@godxjp/ui 19.2.0 → 19.4.0

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.2.0",
-  "godxUiMcp": "19.2.0",
+  "version": "19.4.0",
+  "godxUiMcp": "19.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -333,17 +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",
-    "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: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",