@godxjp/ui 27.7.0 → 27.9.0

package/dist/styles/data-entry-layout.css

@@ -448,6 +448,7 @@
 
   .ui-upload-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--upload-row-space-gap);
     padding-inline: var(--upload-row-space-inline);
@@ -462,6 +463,18 @@
     flex: 1 1 0%;
   }
 
+  .ui-upload-row-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--upload-row-space-gap);
+    margin-inline-start: auto;
+  }
+
+  .ui-upload-row-actions:empty {
+    display: none;
+  }
+
   .ui-upload-row-icon {
     inline-size: var(--upload-row-icon-size);
     block-size: var(--upload-row-icon-size);

package/dist/styles/layout.css

@@ -1450,6 +1450,7 @@
 
   @media (width < 40rem) {
     .ui-flex[data-hide-below="sm"],
+    .app-topbar-brand[data-hide-below="sm"],
     .ui-topbar-item[data-hide-below="sm"],
     [data-slot="table-head"][data-hide-below="sm"],
     [data-slot="table-cell"][data-hide-below="sm"] {
@@ -1459,6 +1460,7 @@
 
   @media (width < 48rem) {
     .ui-flex[data-hide-below="md"],
+    .app-topbar-brand[data-hide-below="md"],
     .ui-topbar-item[data-hide-below="md"],
     [data-slot="table-head"][data-hide-below="md"],
     [data-slot="table-cell"][data-hide-below="md"] {
@@ -1468,6 +1470,7 @@
 
   @media (width < 64rem) {
     .ui-flex[data-hide-below="lg"],
+    .app-topbar-brand[data-hide-below="lg"],
     .ui-topbar-item[data-hide-below="lg"],
     [data-slot="table-head"][data-hide-below="lg"],
     [data-slot="table-cell"][data-hide-below="lg"] {
@@ -1477,6 +1480,7 @@
 
   @media (width < 80rem) {
     .ui-flex[data-hide-below="xl"],
+    .app-topbar-brand[data-hide-below="xl"],
     .ui-topbar-item[data-hide-below="xl"],
     [data-slot="table-head"][data-hide-below="xl"],
     [data-slot="table-cell"][data-hide-below="xl"] {
@@ -1485,28 +1489,88 @@
   }
 
   @media (width >= 40rem) {
-    .ui-flex[data-hide-from="sm"] {
+    .ui-flex[data-hide-from="sm"],
+    .app-topbar-brand[data-hide-from="sm"],
+    .ui-topbar-item-icon[data-hide-from="sm"] {
       display: none;
     }
   }
 
   @media (width >= 48rem) {
-    .ui-flex[data-hide-from="md"] {
+    .ui-flex[data-hide-from="md"],
+    .app-topbar-brand[data-hide-from="md"],
+    .ui-topbar-item-icon[data-hide-from="md"] {
       display: none;
     }
   }
 
   @media (width >= 64rem) {
-    .ui-flex[data-hide-from="lg"] {
+    .ui-flex[data-hide-from="lg"],
+    .app-topbar-brand[data-hide-from="lg"],
+    .ui-topbar-item-icon[data-hide-from="lg"] {
       display: none;
     }
   }
 
   @media (width >= 80rem) {
-    .ui-flex[data-hide-from="xl"] {
+    .ui-flex[data-hide-from="xl"],
+    .app-topbar-brand[data-hide-from="xl"],
+    .ui-topbar-item-icon[data-hide-from="xl"] {
       display: none;
     }
   }
+
+  @media (width < 40rem) {
+    .ui-topbar-item-label[data-hide-below="sm"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 48rem) {
+    .ui-topbar-item-label[data-hide-below="md"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 64rem) {
+    .ui-topbar-item-label[data-hide-below="lg"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  @media (width < 80rem) {
+    .ui-topbar-item-label[data-hide-below="xl"] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: var(--stroke-hairline);
+      block-size: var(--stroke-hairline);
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
 }
 
 @layer components {

package/dist/styles/shell-layout.css

@@ -737,6 +737,28 @@
     align-items: center;
   }
 
+  .app-topbar-logo {
+    max-inline-size: var(--app-shell-brand-max-inline-size);
+    min-inline-size: 0;
+    flex: 0 1 auto;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+
+  .app-topbar-brand {
+    display: contents;
+  }
+
+  @media (width < 40rem) {
+    .app-topbar-logo {
+      max-inline-size: var(--app-shell-brand-compact-max-inline-size);
+    }
+
+    .app-topbar-logo [data-slot="logo-wordmark"] {
+      display: none;
+    }
+  }
+
   .app-topbar-custom {
     display: flex;
     min-width: 0;
@@ -1997,12 +2019,32 @@
     flex: 1 1 0%;
     justify-content: center;
   }
+
   .ui-topbar-end {
     max-width: 100%;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
     margin-inline-start: auto;
   }
 
+  .ui-topbar[data-overflow="scroll"] {
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+
+  .ui-topbar[data-overflow="scroll"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ui-topbar[data-overflow="scroll"] > .ui-topbar-end {
+    max-inline-size: none;
+    min-inline-size: auto;
+  }
+
+  .ui-topbar[data-overflow="scroll"] > .ui-topbar-start {
+    min-inline-size: var(--topbar-item-min-width);
+  }
+
   .ui-topbar-item {
     display: inline-flex;
     min-width: var(--topbar-item-min-width);

package/dist/tokens/components/control.css

@@ -281,14 +281,17 @@
   --tree-select-empty-space-block: var(--space-6);
 
   --calendar-space-inset: var(--space-3);
+
   --calendar-month-space-gap: var(--space-4);
   --calendar-caption-space-inline: var(--space-8);
   --calendar-caption-font-size: var(--font-size-sm);
   --calendar-nav-space-block-start: var(--space-3);
-  --calendar-nav-space-inline: var(--space-1);
+
+  --calendar-nav-space-inline: var(--calendar-space-inset);
 
   --calendar-nav-rest-alpha: 0.7;
-  --calendar-grid-space-block-start: var(--space-4);
+
+  --calendar-grid-space-block-start: var(--space-3);
   --calendar-week-space-block-start: var(--space-2);
   --calendar-weekday-font-size: var(--font-size-xs);
   --calendar-weekday-radius: var(--radius-md);

package/dist/tokens/components/data-display.css

@@ -132,9 +132,12 @@
   --thumbnail-radius: var(--radius);
 
   --timeline-dot-done-background: initial;
+  --timeline-dot-done-foreground: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;
 
+  --timeline-dot-current-ring-width: var(--stroke-xl);
+
   --qr-code-foreground: 0 0% 0%;
   --qr-code-background: 0 0% 100%;
   --qr-code-size-xs: 6rem;
@@ -173,9 +176,15 @@
 
 :root {
   --range-timeline-label-width: var(--app-shell-sidebar-width);
-  --range-timeline-unit-width: calc(var(--control-height-sm) * 2);
+
+  --range-timeline-unit-width: var(--range-timeline-unit-width-default);
+
+  --range-timeline-unit-width-compact: calc(var(--control-height-sm) * 1.5);
+  --range-timeline-unit-width-default: calc(var(--control-height-sm) * 2);
+  --range-timeline-unit-width-comfortable: calc(var(--control-height-sm) * 2.5);
   --range-timeline-row-height: var(--control-height-lg);
   --range-timeline-bar-height: var(--control-height-sm);
+
   --range-timeline-border-color: var(--border);
 
   --range-timeline-grid-color: initial;

package/dist/tokens/components/shell.css

@@ -43,6 +43,9 @@
   --app-shell-bar-inset-compact: var(--space-page-compact-x);
   --app-shell-bar-gap: var(--space-3);
 
+  --app-shell-brand-max-inline-size: none;
+  --app-shell-brand-compact-max-inline-size: var(--app-shell-bar-height);
+
   --app-shell-sidebar-width: 16rem;
   --app-shell-sidebar-collapsed-width: 4rem;
 

package/dist/tokens/components/tree.css

@@ -19,6 +19,8 @@
 
   --tree-line-color: initial;
 
+  --tree-divider-color: initial;
+
   --tree-node-hover-background: initial;
   --tree-node-selected-background: initial;
   --tree-node-selected-foreground: initial;

package/docs/DESIGN-AUTHORITY.md

@@ -298,6 +298,26 @@ bottomEnd | none` (`TablePaginationPositionProp`, default `['bottomEnd']`), the
   purpose: omitted, `flow="columns"` keeps `start` and `flow="rows"` keeps the grid's stretch, so
   no existing grid moves; antd's `Row` default is `top` in every case.
 
+- **`Tree.divided` — a new capability, named from this library, not from antd (gh#732).** antd's
+  `Tree` has no horizontal rule between nodes at all (only `showLine`, the VERTICAL parent/child
+  rail), so there is no antd spelling to port and nothing to be out of parity with. The name was
+  picked from the two the library already uses for the idea, and they are not interchangeable here:
+  **`bordered` means a GRID** — `Table` / `DataTable` "outer frame + vertical rules between
+  columns", `Descriptions` "bordered table with shaded label cells", `Calendar` "rule the day
+  grid", `RangeTimeline` "row rules, header rule, a vertical rule per column" — while the
+  horizontal hairline BETWEEN rows of a vertical list is called a **divider** everywhere it exists
+  (`--list-row-border` on `ListRow`, `--command-item-divider-color`, `--table-flush-divider-*`,
+  `--card-*-divider`). A `Tree` has no columns and no frame, so `bordered` would promise chrome the
+  prop does not draw and would collide with a real Tree frame later. `Command.split` is the same
+  hairline, but that name is antd `List.split` adopted verbatim (gh#699) and carries a second
+  meaning there — zero list padding, rows bled to the panel edge — which `Tree` must not inherit.
+  So: `divided`, matching the token `--tree-divider-color`, a positive boolean adjective like
+  `striped` (gh#700). It **defaults to `false`**, unlike `RangeTimeline bordered`: a Gantt body is
+  unreadable without a grid, whereas `Tree`'s documented chrome default is quiet (cardinal rule
+  #44 — `showLine` ships off for the same reason, and the token file states it), and default-on
+  would rule every existing tree, including the picker-sized and `size="xs"` outlines where a rule
+  every 24px is noise rather than structure. A tree used as page navigation opts in.
+
 - **`RangeTimeline` nested rows take `Tree`'s spelling, not antd's (gh#724).** antd has no Gantt;
   the nearest names are `Tree expandedKeys` / `defaultExpandedKeys` / `onExpand` and `Table
 expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mapped the Tree ones

package/docs/FRAME-COVERAGE-REPORT.md

@@ -45,7 +45,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CardBar | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | TimeRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
-| RangeTimeline | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
+| RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | ResponsiveGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/timeline.tsx

@@ -1,3 +1,5 @@
+import type { CSSProperties } from "react";
+
 import { useTranslation } from "@godxjp/ui/i18n";
 import {
   Card,
@@ -142,7 +144,10 @@ export default function Demo() {
             <CardTitle level={2}>承認・消費税トラッカー</CardTitle>
             <CardDescription>
               variant="status" は status ごとにグリフを切り替えます（done → チェック、current →
-              塗りつぶしドット、pending → 連番）。
+              塗りつぶしドット、pending → 連番）。進捗レールの色は1つだけ：
+              done・current・通過済みの線 はすべて --primary で塗られ、current
+              はリング（--timeline-dot-current-ring-width）と グリフで区別します。Steps の finish /
+              process と同じ約束です。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -163,6 +168,31 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>進捗レールの色をテーマで戻す</CardTitle>
+            <CardDescription>
+              done の緑と current の紫という 27.8 までの配色に戻したい場合は、塗りとインクを
+              対にしてテーマで指定します。塗りだけを戻すと、若竹の緑にほぼ白のグリフが乗って 2.18:1
+              になり AA を満たしません（gh#643）。同じ要領で --timeline-dot-current-background と
+              --timeline-line-completed-background も再着色できます。
+            </CardDescription>
+          </CardHeader>
+          {/* The knobs are declared on the CARD BODY, not on the Timeline: custom properties
+              inherit, so one scope retints every Timeline inside it — which is how a service
+              theme sets them (once, globally, or under `[data-tenant]`), not per call site. */}
+          <CardContent
+            style={
+              {
+                "--timeline-dot-done-background": "hsl(var(--success))",
+                "--timeline-dot-done-foreground": "hsl(var(--success-foreground))",
+              } as CSSProperties
+            }
+          >
+            <Timeline variant="status" items={approvalItems} />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>RangeTimeline</CardTitle>
@@ -236,6 +266,52 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>密度（density）— 1日の列幅</CardTitle>
+            <CardDescription>
+              同じ31日分の軸を density で三段。compact は1日42px、default
+              は従来どおり56px、comfortable は70px です。動くのは列幅だけで、行の高さもバーの高さも
+              ラベル列の幅も変わりません。画面に入る日数を増やしたいときは compact
+              を選びます（app.css でトークンを書く必要はありません）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {(["compact", "default", "comfortable"] as const).map((density) => (
+                <div key={density}>
+                  <Text size="xs" tone="muted">
+                    density=&quot;{density}&quot;
+                  </Text>
+                  <RangeTimeline
+                    label={t("rangeTimeline.schedule")}
+                    density={density}
+                    today={8}
+                    bands={[{ label: monthLabel(8), units: 31 }]}
+                    columns={Array.from({ length: 31 }, (_, index) => {
+                      const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
+                      return {
+                        label: new Intl.NumberFormat(locale).format(index + 1),
+                        units: 1,
+                        muted: weekday === 0 || weekday === 6,
+                      };
+                    })}
+                    rows={[
+                      { id: "design", label: "要件定義", start: 0, end: 6 },
+                      { id: "build", label: "実装", start: 7, end: 22 },
+                      { id: "review", label: "レビュー", start: 20, end: 29 },
+                    ].map((row) => ({
+                      ...row,
+                      startLabel: dayLabel(row.start + 1),
+                      endLabel: dayLabel(row.end + 1),
+                    }))}
+                  />
+                </div>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>

package/docs/data-display/tree.tsx

@@ -100,6 +100,48 @@ const fileDetails: Record<string, { size: string; changed: string }> = {
   "docs/tree.mdx": { size: "4.1 KB", changed: "2026-09-10" },
 };
 
+// ── the page index used as NAVIGATION inside a Card (`divided`, gh#732) ──────────────────────
+const wikiPages: TreeNodeProp[] = [
+  {
+    value: "handbook",
+    label: "社内ハンドブック",
+    children: [
+      { value: "handbook/onboarding", label: "入社手続き", isLeaf: true },
+      { value: "handbook/expenses", label: "経費精算", isLeaf: true },
+      {
+        value: "handbook/security",
+        label: "情報セキュリティ",
+        children: [
+          { value: "handbook/security/passwords", label: "パスワード規程", isLeaf: true },
+          { value: "handbook/security/incidents", label: "インシデント報告", isLeaf: true },
+        ],
+      },
+    ],
+  },
+  {
+    value: "product",
+    label: "プロダクト仕様",
+    children: [
+      { value: "product/release", label: "リリース手順", isLeaf: true },
+      { value: "product/support", label: "サポート窓口", isLeaf: true },
+    ],
+  },
+  { value: "minutes", label: "議事録", isLeaf: true },
+];
+
+const wikiPageDetails: Record<string, { updated: string; author: string }> = {
+  handbook: { updated: "2026-09-01", author: "総務部" },
+  "handbook/onboarding": { updated: "2026-08-18", author: "人事部" },
+  "handbook/expenses": { updated: "2026-07-30", author: "経理部" },
+  "handbook/security": { updated: "2026-09-11", author: "情報システム部" },
+  "handbook/security/passwords": { updated: "2026-09-11", author: "情報システム部" },
+  "handbook/security/incidents": { updated: "2026-06-02", author: "情報システム部" },
+  product: { updated: "2026-09-14", author: "プロダクト部" },
+  "product/release": { updated: "2026-09-14", author: "プロダクト部" },
+  "product/support": { updated: "2026-05-20", author: "CS部" },
+  minutes: { updated: "2026-09-16", author: "総務部" },
+};
+
 // ── card 3 · async branches (fieldNames + loadData + titleRender) ────────────────────────────
 type Department = { id: string; name: string; leaf?: boolean; units?: Department[] };
 
@@ -130,6 +172,8 @@ export default function Demo() {
   const [granted, setGranted] = React.useState<string[]>(["billing.invoice.read"]);
   // Card 2 — selection is controlled and drives the detail pane.
   const [openFile, setOpenFile] = React.useState<string | undefined>("src/components/tree.tsx");
+  // The page index — the tree IS the navigation, so selection is what the reading pane follows.
+  const [openPage, setOpenPage] = React.useState<string | undefined>("handbook/security/passwords");
   // Card 3 — async children land in state, exactly as a real fetch would.
   const [departments, setDepartments] = React.useState<Department[]>(initialDepartments);
   // Card 5 — independent (strict) checks, and a multi-select tree.
@@ -239,6 +283,56 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ページ一覧をナビゲーションに使う（divided）</CardTitle>
+            <CardDescription>
+              ドキュメント／wiki のページ一覧のように、ツリーそのものが画面のナビゲーションになる
+              ときは divided で行間に罫を引きます。罫は各行の block-start に 1
+              本ずつ、外側の最初の行にだけ引かれません。 深さに関係なく行の幅いっぱいに走るので
+              （インデントは行の padding であって margin ではありません）、 子行が「表の中の表」に
+              見えることはありません。色は --tree-divider-color（既定 hsl(var(--border))）。 divided
+              は既定オフで、このページの他のカードがその既定の姿です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" wrap>
+              <Card className="w-72">
+                <CardHeader>
+                  <CardTitle level={3}>ページ一覧</CardTitle>
+                </CardHeader>
+                <CardContent flush>
+                  <Tree
+                    aria-label="ページ一覧"
+                    divided
+                    treeData={wikiPages}
+                    defaultExpandAll
+                    value={openPage}
+                    onValueChange={(next) => setOpenPage(next as string | undefined)}
+                  />
+                </CardContent>
+              </Card>
+              <Flex direction="col" gap="sm">
+                {openPage && wikiPageDetails[openPage] ? (
+                  <Descriptions
+                    items={[
+                      { label: "パス", children: openPage },
+                      { label: "最終更新", children: wikiPageDetails[openPage].updated },
+                      { label: "更新者", children: wikiPageDetails[openPage].author },
+                    ]}
+                  />
+                ) : (
+                  <EmptyState
+                    icon={FolderTree}
+                    title="ページが選択されていません"
+                    description="左の一覧からページを選んでください。"
+                  />
+                )}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>組織ツリー（loadData · fieldNames · titleRender）</CardTitle>

package/docs/data-entry/calendar.tsx

@@ -77,8 +77,9 @@ export default function Demo() {
               罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
             </CardTitle>
             <CardDescription>
-              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --input の
-              50%、背景に対し約 1.7:1)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
+              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --border、
+              背景に対し約 1.15:1)。表の行やカードの枠と同じ段なので、罫線が枠より濃くなることは
+              ない。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
               罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
               {"{false}"} を渡す。
             </CardDescription>

package/docs/general/icon.tsx

@@ -183,7 +183,9 @@ export default function Demo() {
 
               <Flex direction="col" gap="xs">
                 <Heading level={3}>Button の中 · 明示した段が Button の既定に勝つ</Heading>
-                <Flex direction="row" gap="sm" align="center">
+                {/* 320px では 2 つのラベル付き Button が 1 行に収まらない。Button はラベル幅より
+                    縮まないので、行を折り返させるのは並べた側の責任（`wrap`）。 */}
+                <Flex direction="row" gap="sm" align="center" wrap>
                   <Button size="sm">
                     <Icon as={Download} size="sm" />
                     書き出す