@godxjp/ui 27.8.0 → 27.10.0

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/data-entry/toggle-count.tsx

@@ -72,6 +72,14 @@ const TICKETS: Ticket[] = [
   },
 ];
 
+const TAGS = [
+  { value: "design", label: "設計", count: 12 },
+  { value: "runbook", label: "運用手順", count: 148 },
+  { value: "onboarding", label: "入社手続き", count: 7 },
+  { value: "security", label: "セキュリティ", count: 31 },
+  { value: "archive", label: "アーカイブ", count: 1240 },
+];
+
 const STATUS_LABEL: Record<Ticket["status"], string> = {
   open: "未対応",
   waiting: "保留中",
@@ -93,6 +101,8 @@ const COLUMNS = [
 ];
 
 export default function Demo() {
+  // The tag panel of a Wiki/document screen — the chip this vocabulary exists for.
+  const [tags, setTags] = useState<string[]>(["design"]);
   // Faceted filter chips — pressed = the facet is applied. Counts are the facet sizes.
   const [facets, setFacets] = useState<string[]>(["open"]);
   // A reaction row: the count is how many people reacted, the pressed state is whether YOU did.
@@ -112,6 +122,47 @@ export default function Demo() {
       subtitle="カウント付きの押下チップ · faceted filter · リアクション"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>タグで絞り込む · soft + pill のチップ</CardTitle>
+            <CardDescription>
+              Wiki / ドキュメントのタグパネル。variant=&quot;soft&quot; が休止時の面（--secondary、
+              Badge variant=&quot;secondary&quot; と同じ塗り）、shape=&quot;pill&quot; が角、count
+              が件数、押下が選択。variant / size / shape はグループに一度だけ書けば context
+              で全アイテムに届く。default や outline
+              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <ToggleGroup
+                type="multiple"
+                variant="soft"
+                shape="pill"
+                size="xs"
+                value={tags}
+                onValueChange={setTags}
+                aria-label="タグで絞り込み"
+              >
+                {TAGS.map((tag) => (
+                  <ToggleGroupItem
+                    key={tag.value}
+                    value={tag.value}
+                    count={tag.count}
+                    countLabel="ページ"
+                  >
+                    {tag.label}
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
+              <Text tone="muted" size="sm">
+                読み上げは「設計, 12 ページ」。数字はピル側が aria-hidden で、単位つきの一文が
+                sr-only で並ぶので、ラベルと数字がくっついて「設計12」になることはない。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>問い合わせ受信箱</CardTitle>

package/docs/data-entry/toggle-group.tsx

@@ -95,10 +95,11 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>variant · default / outline</CardTitle>
+            <CardTitle level={2}>variant · default / outline / soft</CardTitle>
             <CardDescription>
               variant は ToggleGroup にだけ指定すれば全アイテムへ伝播する（各 ToggleGroupItem
-              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。
+              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。soft
+              は休止時から --secondary で塗られるので、チップの列に使う。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -123,6 +124,43 @@ export default function Demo() {
                   <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
                 </ToggleGroup>
               </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;soft&quot;
+                </Text>
+                <ToggleGroup type="single" variant="soft" defaultValue="pdf">
+                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                  <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>shape · default / pill / sharp</CardTitle>
+            <CardDescription>
+              shape も variant / size と同じく行の決定なので、ToggleGroup
+              に一度書けば全アイテムへ伝播する。値は Button / Badge と同じ三つで、読む radius
+              トークンも同じ。チップの列は soft + pill。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {(["default", "pill", "sharp"] as const).map((shape) => (
+                <Flex key={shape} direction="col" gap="sm">
+                  <Text as="p" size="sm" tone="muted">
+                    shape=&quot;{shape}&quot;
+                  </Text>
+                  <ToggleGroup type="single" variant="soft" shape={shape} defaultValue="pdf">
+                    <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                    <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                    <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                  </ToggleGroup>
+                </Flex>
+              ))}
             </Flex>
           </CardContent>
         </Card>

package/docs/data-entry/toggle.tsx

@@ -46,11 +46,14 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Variants</CardTitle>
             <CardDescription>
-              default (filled background when pressed) vs outline (border style).
+              default（押下時だけ面が出る・休止時は透明な 1px 枠）· outline（--background
+              の上の細い枠）· soft（休止時から --secondary で塗られる）。
+              最初の二つはツールバー向けで、休止しているチップは「何もない」ように見える。
+              チップとして並べるときは soft。
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" gap="md">
+            <Flex direction="row" gap="md" wrap>
               <Toggle
                 variant="default"
                 pressed={pinned}
@@ -67,6 +70,55 @@ export default function Demo() {
               >
                 消費税対象のみ
               </Toggle>
+              <Toggle variant="soft" aria-label="草案のみ">
+                草案のみ
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              soft + shape=&quot;pill&quot; · チェック可能なタグチップ
+            </CardTitle>
+            <CardDescription>
+              antd の Tag.CheckableTag にあたる形。soft が休止時の面を、shape が角を担う。shape は
+              Button / Badge と同じ default / pill / sharp の三値で、同じ radius
+              トークンを読む。押下すると面が --primary に反転するので、状態は色だけに依存しない。
+              取り消せる（×つきの）タグは選択ではなく削除なので Badge の onRemove
+              側、つまり別のコンポーネントになる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" wrap align="center">
+                <Toggle variant="soft" shape="pill" size="xs" defaultPressed>
+                  設計
+                </Toggle>
+                <Toggle variant="soft" shape="pill" size="xs">
+                  実装
+                </Toggle>
+                <Toggle variant="soft" shape="pill" size="xs">
+                  検証
+                </Toggle>
+              </Flex>
+              <Flex direction="row" gap="sm" wrap align="center">
+                <Toggle variant="soft" shape="default">
+                  default（--radius-md）
+                </Toggle>
+                <Toggle variant="soft" shape="pill">
+                  pill
+                </Toggle>
+                <Toggle variant="soft" shape="sharp">
+                  sharp
+                </Toggle>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                soft の面は Badge variant=&quot;secondary&quot; / Button
+                variant=&quot;secondary&quot; と同じ --secondary。ホバーは不透明な --secondary-hover
+                なので、ページの上でもカードの上でも同じ色になる。
+              </Text>
             </Flex>
           </CardContent>
         </Card>

package/docs/data-entry/upload.tsx

@@ -9,6 +9,7 @@ import {
 } from "@godxjp/ui/data-entry";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { FilePlus2, Plus } from "lucide-react";
 
 /**
  * Upload — drag-and-drop / button / avatar / picture file uploader (6 variants).
@@ -32,6 +33,7 @@ export default function Demo() {
   const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
   const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
   const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
+  const [triggerIconItems, setTriggerIconItems] = useState<UploadFileItem[]>([]);
   const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
   const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
   const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
@@ -187,6 +189,48 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>triggerIcon · 「新規作成」がアップロードのとき</CardTitle>
+            <CardDescription>
+              variant=&quot;button&quot;
+              のトリガーが描くグリフを差し替える。コンポーネントを渡す（triggerIcon=&#123;Plus&#125;、
+              要素ではない）。triggerVariant
+              は強弱しか変えられないので、実体はアップロードでも「新規作成」として並ぶボタンは
+              これまで矢印を背負うしかなかった。クラスと余白と aria-hidden
+              はライブラリ側が持ったままなので、差し替えても大きさは --upload-row-icon-size
+              のまま、読み上げにも出ない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" wrap align="center">
+              <Upload
+                variant="button"
+                triggerIcon={Plus}
+                triggerVariant="default"
+                value={triggerIconItems}
+                onValueChange={setTriggerIconItems}
+                accept=".pdf"
+                onUpload={demoUpload}
+              >
+                資料を追加
+              </Upload>
+              <Upload
+                variant="button"
+                triggerIcon={FilePlus2}
+                triggerSize="icon-sm"
+                triggerVariant="ghost"
+                value={[]}
+                onValueChange={() => {}}
+                aria-label="請求書を添付"
+              />
+              <Upload variant="button" value={[]} onValueChange={() => {}}>
+                既定のグリフ
+              </Upload>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Picture Card</CardTitle>

package/docs/general/button/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@godxjp/ui/data-display";
 import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { Bell, Pencil, Plus, Trash2 } from "lucide-react";
 
 /**
  * Button — the core action primitive. Composed only from real @godxjp/ui
@@ -26,23 +26,35 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Count</CardTitle>
             <CardDescription>
-              Trailing totals, overflow cap, and explicit zero visibility.
+              Trailing totals, overflow cap, and explicit zero visibility. countLabel
+              は数字が何を数えているかを読み上げに渡す（Toggle と同じ語彙）。ピルは aria-hidden
+              で、単位つきの一文が sr-only で並ぶので、名前は「保留中, 18 件」。countLabel
+              を渡さなくても「保留中, 18」までは分かれる。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="row" wrap align="center" gap="md">
-              <Button variant="outline" count={18}>
+              <Button variant="outline" count={18} countLabel="件">
                 保留中
               </Button>
-              <Button variant="outline" count={128} overflowCount={99}>
+              <Button variant="outline" count={128} overflowCount={99} countLabel="件">
                 受信トレイ
               </Button>
-              <Button variant="ghost" count={0} showZero>
+              <Button variant="ghost" count={0} showZero countLabel="件">
                 完了
               </Button>
-              <Button variant="ghost" count={0} showZero={false}>
+              <Button variant="ghost" count={0} showZero={false} countLabel="件">
                 非表示のゼロ
               </Button>
+              <Button
+                variant="outline"
+                size="icon-sm"
+                aria-label="通知"
+                count={3}
+                countLabel="件の未読"
+              >
+                <Bell aria-hidden="true" />
+              </Button>
             </Flex>
           </CardContent>
         </Card>

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" />
                     書き出す