@godxjp/ui 31.4.0 → 31.6.0

package/docs/data-display/org-chart.tsx

@@ -0,0 +1,165 @@
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  OrgChart,
+  type OrgChartNodeProp,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Bot, Building2, Settings, Users } from "lucide-react";
+
+/**
+ * OrgChart — who reports to whom, people and AI agents on one chart (gh#1034).
+ *
+ * Three levels: the CEO, three department heads, and their reports, two of which are AI agents.
+ * An agent's box is dashed and its accessible name ends in "AI agent", so the difference is never
+ * the stroke alone. The chart is an APG tree view: Tab lands on one box, the arrow keys walk it.
+ *
+ * Narrow the preview: under 40rem of CONTAINER width the same data turns into an indented Tree.
+ * The second card is deliberately narrow to show that form beside the wide one.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "Organization",
+    items: [
+      { id: "chart", label: "Org chart", icon: Building2 },
+      { id: "members", label: "Members", icon: Users },
+      { id: "agents", label: "Agents", icon: Bot },
+    ],
+  },
+  { label: "Admin", items: [{ id: "settings", label: "Settings", icon: Settings }] },
+];
+
+const mark = (initials: string) => (
+  <Avatar size="sm">
+    <AvatarFallback>{initials}</AvatarFallback>
+  </Avatar>
+);
+
+const agentMark = (
+  <Avatar size="sm" appearance="tinted">
+    <AvatarFallback>
+      <Bot aria-hidden="true" />
+    </AvatarFallback>
+  </Avatar>
+);
+
+const org: OrgChartNodeProp[] = [
+  {
+    key: "ceo",
+    name: "Haruka Tanaka",
+    title: "Chief Executive Officer",
+    avatar: mark("HT"),
+    children: [
+      {
+        key: "cto",
+        name: "Kenji Watanabe",
+        title: "Chief Technology Officer",
+        avatar: mark("KW"),
+        children: [
+          {
+            key: "review-agent",
+            name: "Review Agent",
+            title: "Code review · pull requests",
+            variant: "agent",
+            avatar: agentMark,
+            extra: <Badge tone="success">Running</Badge>,
+          },
+          {
+            key: "platform",
+            name: "Mai Suzuki",
+            title: "Platform Lead",
+            avatar: mark("MS"),
+          },
+        ],
+      },
+      {
+        key: "coo",
+        name: "Daniel Park",
+        title: "Chief Operating Officer",
+        avatar: mark("DP"),
+        children: [
+          {
+            key: "support-agent",
+            name: "Support Agent",
+            title: "Tier-1 customer support",
+            variant: "agent",
+            avatar: agentMark,
+            extra: <Badge tone="warning">Paused</Badge>,
+          },
+          {
+            key: "ops",
+            name: "Linh Nguyen",
+            title: "Operations Manager",
+            avatar: mark("LN"),
+          },
+        ],
+      },
+      {
+        key: "cfo",
+        name: "Sofia Rossi",
+        title: "Chief Financial Officer",
+        avatar: mark("SR"),
+        children: [
+          {
+            key: "controller",
+            name: "Takumi Ito",
+            title: "Financial Controller",
+            avatar: mark("TI"),
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default function OrgChartDoc() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chart"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "Admin", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={<Topbar />}
+    >
+      <PageContainer
+        title="Org chart"
+        subtitle="OrgChart · people and AI agents, top-down. Dashed boxes are agents."
+      >
+        <Card>
+          <CardContent>
+            <OrgChart data={org} label="Company org chart" />
+          </CardContent>
+        </Card>
+
+        {/* THE NARROW FORM: the same data under 40rem of container width. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            narrow container · the same data as a Tree
+          </Text>
+          <Card className="max-w-sm">
+            <CardContent>
+              <OrgChart data={org} label="Company org chart (list)" />
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/data-display/timeline.tsx

@@ -230,6 +230,39 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* sticky sits OUTSIDE a Card on purpose: Card clips (`overflow: hidden`), and a clipping
+            ancestor becomes the box the header sticks to — the same limit as antd Table sticky. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>sticky · the axis stays on screen (gh#1044)</CardTitle>
+            <CardDescription>
+              A long schedule scrolled by the page, placed as a page section rather than inside a
+              Card (a Card clips, which would pin the header to the card instead of the viewport).
+              With sticky the band and tick rows stay at the top of the viewport — offsetHeader
+              clears a fixed app topbar — and still scroll sideways with the body.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+        <RangeTimeline
+          data-testid="range-timeline-sticky"
+          label={t("rangeTimeline.schedule")}
+          sticky={{ offsetHeader: 0 }}
+          today={8}
+          bands={[{ label: monthLabel(8), units: 30 }]}
+          columns={Array.from({ length: 30 }, (_, index) => ({
+            label: new Intl.NumberFormat(locale).format(index + 1),
+            units: 1,
+          }))}
+          rows={Array.from({ length: 40 }, (_, index) => ({
+            id: `task-${index + 1}`,
+            label: `Task ${index + 1}`,
+            start: index % 20,
+            end: (index % 20) + 5,
+            startLabel: dayLabel((index % 20) + 1),
+            endLabel: dayLabel((index % 20) + 6),
+          }))}
+        />
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>

package/docs/data-display/tree.tsx

@@ -12,7 +12,9 @@ import {
   Tree,
   type TreeNodeProp,
 } from "@godxjp/ui/data-display";
+import { SearchInput } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
 import { Building2, FolderTree, ShieldCheck } from "lucide-react";
 
@@ -167,7 +169,85 @@ function attachChildren(nodes: Department[], id: string, children: Department[])
   );
 }
 
+// ── card 4 · a long lazy level (height + virtual · filterTreeNode · retry) ────────────────────
+// The godx-task shape (gh#1041-1043): 2 suites → 28 sections → up to 421 cases per section,
+// fetched when a section opens. antd's Tree has no "load more" node — `height` keeps a 421-row
+// level to a few dozen DOM rows — so the one paged section below composes its own: a leaf whose
+// selection asks for the next page. It is a real treeitem, so the keyboard reaches it.
+const CASE_PAGE = 100;
+// The data carries VALUES only; every visible label is derived from the value through `t()` at
+// render (`labelSuiteTree`), so the demo follows the active locale like the library's chrome does.
+const suites: TreeNodeProp[] = [1, 2].map((suiteNumber) => ({
+  value: `suite-${suiteNumber}`,
+  label: "",
+  children: Array.from({ length: 14 }, (_, sectionIndex) => ({
+    value: `suite-${suiteNumber}/section-${sectionIndex + 1}`,
+    label: "",
+    isLeaf: false,
+  })),
+}));
+
+function caseNodes(section: string, from: number, to: number): TreeNodeProp[] {
+  return Array.from({ length: to - from }, (_, index) => ({
+    value: `${section}/case-${from + index + 1}`,
+    label: "",
+    isLeaf: true,
+  }));
+}
+
+function withChildren(
+  nodes: TreeNodeProp[],
+  value: string,
+  children: TreeNodeProp[],
+): TreeNodeProp[] {
+  return nodes.map((node) =>
+    node.value === value
+      ? { ...node, children }
+      : node.children
+        ? { ...node, children: withChildren(node.children, value, children) }
+        : node,
+  );
+}
+
+function labelSuiteTree(
+  nodes: TreeNodeProp[],
+  t: ReturnType<typeof useTranslation>["t"],
+): TreeNodeProp[] {
+  return nodes.map((node) => {
+    const value = node.value;
+    let label: string;
+    if (value.endsWith("::more")) {
+      label = t("treeDocs.longList.loadMore", { count: CASE_PAGE });
+    } else if (/\/case-\d+$/.test(value)) {
+      label = t("treeDocs.longList.case", {
+        number: String(Number(value.split("case-").pop())).padStart(3, "0"),
+      });
+    } else if (/\/section-\d+$/.test(value)) {
+      const number = Number(value.split("section-").pop());
+      const key =
+        value === "suite-1/section-2"
+          ? "treeDocs.longList.sectionFailing"
+          : value === "suite-1/section-3"
+            ? "treeDocs.longList.sectionPaged"
+            : "treeDocs.longList.section";
+      label = t(key, { number, count: CASE_PAGE });
+    } else {
+      label = t(
+        value === "suite-1"
+          ? "treeDocs.longList.suiteIntegration"
+          : "treeDocs.longList.suiteAcceptance",
+      );
+    }
+    return {
+      ...node,
+      label,
+      children: node.children ? labelSuiteTree(node.children, t) : undefined,
+    };
+  });
+}
+
 export default function Demo() {
+  const { t } = useTranslation();
   // Card 1 — checks are controlled so the readout beside the tree can never disagree with it.
   const [granted, setGranted] = React.useState<string[]>(["billing.invoice.read"]);
   // Card 2 — selection is controlled and drives the detail pane.
@@ -179,6 +259,45 @@ export default function Demo() {
   // Card 5 — independent (strict) checks, and a multi-select tree.
   const [strictChecks, setStrictChecks] = React.useState<string[]>(["people", "people.read"]);
   const [picked, setPicked] = React.useState<string[]>(["billing", "audit"]);
+  // Card 4 — the long lazy level.
+  const [suiteTree, setSuiteTree] = React.useState<TreeNodeProp[]>(suites);
+  const [caseQuery, setCaseQuery] = React.useState("");
+  // "" (not undefined) keeps the tree CONTROLLED while nothing is open.
+  const [openCase, setOpenCase] = React.useState("");
+  const failedOnce = React.useRef(false);
+
+  const loadSection = async (node: TreeNodeProp) => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    if (node.value === "suite-1/section-2" && !failedOnce.current) {
+      failedOnce.current = true;
+      // Rejected: the branch folds back shut, and opening it again asks again (gh#1041).
+      throw new Error("network");
+    }
+    const paged = node.value === "suite-1/section-3";
+    const children = caseNodes(node.value, 0, paged ? CASE_PAGE : 421);
+    if (paged) {
+      children.push({
+        value: `${node.value}::more`,
+        label: "",
+        isLeaf: true,
+      });
+    }
+    setSuiteTree((current) => withChildren(current, node.value, children));
+  };
+
+  const loadMoreCases = (moreValue: string) => {
+    const section = moreValue.replace(/::more$/, "");
+    setSuiteTree((current) => {
+      const sectionNode = current
+        .flatMap((suite) => suite.children ?? [])
+        .find((node) => node.value === section);
+      const loaded = (sectionNode?.children ?? []).filter((node) => !node.value.endsWith("::more"));
+      const next = caseNodes(section, loaded.length, Math.min(421, loaded.length + CASE_PAGE));
+      const more =
+        loaded.length + next.length < 421 ? [{ value: moreValue, label: "", isLeaf: true }] : [];
+      return withChildren(current, section, [...loaded, ...next, ...more]);
+    });
+  };
 
   const loadDepartment = async (node: TreeNodeProp) => {
     // A real delay, so the Skeleton row and aria-busy are OBSERVABLE rather than theoretical.
@@ -365,6 +484,41 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("treeDocs.longList.title")}</CardTitle>
+            <CardDescription>{t("treeDocs.longList.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <SearchInput
+                ariaLabel={t("treeDocs.longList.searchLabel")}
+                placeholder={t("treeDocs.longList.searchPlaceholder")}
+                value={caseQuery}
+                onValueChange={setCaseQuery}
+                onSearch={() => {}}
+              />
+              <Tree
+                aria-label={t("treeDocs.longList.treeLabel")}
+                treeData={labelSuiteTree(suiteTree, t)}
+                height={360}
+                defaultExpandedValues={["suite-1"]}
+                loadData={loadSection}
+                filterTreeNode={(node) =>
+                  caseQuery.trim() !== "" && String(node.label).includes(caseQuery.trim())
+                }
+                value={openCase}
+                onValueChange={(next) => {
+                  // The "load more" leaf is an action, not a selection — it never stays selected,
+                  // so choosing it again always asks for the next page.
+                  if (typeof next === "string" && next.endsWith("::more")) loadMoreCases(next);
+                  else setOpenCase((next as string | undefined) ?? "");
+                }}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>checkStrictly と multiple（チェックと選択は別の軸）</CardTitle>

package/docs/data-entry/branch-scope-picker.tsx

@@ -54,7 +54,12 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <FormField label="適用範囲" required>
-                <BranchScopePicker branches={BRANCHES} value={scope} onValueChange={setScope} />
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={scope}
+                  onValueChange={setScope}
+                  notFoundContent="No branch matches that search"
+                />
               </FormField>
             </CardContent>
           </Card>

package/docs/data-entry/record-picker.tsx

@@ -109,6 +109,7 @@ export default function Demo() {
                 value={owner}
                 onValueChange={(v) => setOwner(v as string)}
                 dialogTitle="Choose an owner"
+                notFoundContent="No one matches that name"
               />
               <Text as="p" size="2xs" tone="muted" tabular>
                 value: {JSON.stringify(owner)}

package/docs/data-entry/transfer.tsx

@@ -104,6 +104,7 @@ export default function Demo() {
               defaultValue={[]}
               showSearch
               pagination={{ pageSize: 3 }}
+              locale={{ notFoundContent: ["No matching accounts", "Nothing selected yet"] }}
               name="accounts[]"
             />
           </CardContent>

package/docs/i18n/messages/en.json

@@ -1450,5 +1450,24 @@
     "nameColumn": "Name",
     "inviteTitle": "Send invitation",
     "send": "Send"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "Long child lists (height · virtual · filterTreeNode)",
+      "description": "2 suites → 28 sections → up to 421 cases. With height the tree scrolls inside that height and renders only the rows in view (antd height + virtual). Nodes matching the search are highlighted by filterTreeNode, never hidden. Section 2 fails its first loadData and fetches again when reopened. Section 3 shows how to compose a paged API: selecting the last leaf loads the next 100.",
+      "searchLabel": "Search cases",
+      "searchPlaceholder": "Highlight by case name (e.g. 042)",
+      "treeLabel": "Test suites",
+      "suiteIntegration": "Integration tests",
+      "suiteAcceptance": "Acceptance tests",
+      "section": "Section {number}",
+      "sectionFailing": "Section {number} (first load fails)",
+      "sectionPaged": "Section {number} ({count} at a time)",
+      "case": "Case {number}",
+      "loadMore": {
+        "one": "Load {count} more",
+        "other": "Load {count} more"
+      }
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1444,5 +1444,23 @@
     "nameColumn": "氏名",
     "inviteTitle": "招待を送信",
     "send": "送信"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "長い子リスト（height · virtual · filterTreeNode）",
+      "description": "2 スイート → 28 セクション → 最大 421 ケース。height を渡すとツリー自身がその高さでスクロールし、見えている行だけを描画します（antd の height + virtual）。検索語に一致するノードは filterTreeNode で強調されるだけで、隠れません。セクション 2 は初回の loadData が失敗し、もう一度開くと再取得します。セクション 3 は API がページングされている場合の組み立て例で、末尾の葉を選ぶと次の 100 件を読み込みます。",
+      "searchLabel": "ケースを検索",
+      "searchPlaceholder": "ケース名で強調（例: 042）",
+      "treeLabel": "テストスイート",
+      "suiteIntegration": "結合テスト",
+      "suiteAcceptance": "受入テスト",
+      "section": "セクション {number}",
+      "sectionFailing": "セクション {number}（初回の読み込みが失敗）",
+      "sectionPaged": "セクション {number}（{count} 件ずつ）",
+      "case": "ケース {number}",
+      "loadMore": {
+        "other": "さらに {count} 件を読み込む"
+      }
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1444,5 +1444,23 @@
     "nameColumn": "Họ tên",
     "inviteTitle": "Gửi lời mời",
     "send": "Gửi"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "Danh sách con dài (height · virtual · filterTreeNode)",
+      "description": "2 bộ → 28 mục → tối đa 421 ca. Với height, cây cuộn trong chiều cao đó và chỉ vẽ các hàng đang thấy (antd height + virtual). Nút khớp từ tìm kiếm được filterTreeNode làm nổi bật, không bị ẩn. Mục 2 thất bại ở lần loadData đầu và tải lại khi mở lần nữa. Mục 3 là ví dụ ghép cho API phân trang: chọn lá cuối để tải thêm 100 ca.",
+      "searchLabel": "Tìm ca kiểm thử",
+      "searchPlaceholder": "Làm nổi bật theo tên ca (vd: 042)",
+      "treeLabel": "Bộ kiểm thử",
+      "suiteIntegration": "Kiểm thử tích hợp",
+      "suiteAcceptance": "Kiểm thử chấp nhận",
+      "section": "Mục {number}",
+      "sectionFailing": "Mục {number} (lần tải đầu thất bại)",
+      "sectionPaged": "Mục {number} (mỗi lần {count} ca)",
+      "case": "Ca {number}",
+      "loadMore": {
+        "other": "Tải thêm {count} ca"
+      }
+    }
   }
 }

package/docs/navigation/tabs.tsx

@@ -651,37 +651,39 @@ export default function Demo() {
             rendered and the view below is never remounted by a tab switch. */}
         <Card>
           <CardHeader>
-            <CardTitle level={2}>controls · タブ列だけ(外部の領域を切り替える)</CardTitle>
+            <CardTitle level={2}>
+              controls · strip only (switches a region outside the tabs)
+            </CardTitle>
             <CardDescription>
-              controls に外部領域の id を渡すと tabpanel を描かず、選択中のタブの aria-controls
-              がその領域を指す。領域は Tabs の外にあるのでタブを切り替えても再マウントされない。
-              compound の TabsTrigger も items と同じ count を描く。
+              Pass the id of an outside region to controls: no tabpanel is rendered and the selected
+              tab's aria-controls points at that region. The region lives outside Tabs, so switching
+              tabs never remounts it. A compound TabsTrigger draws the same count as items.
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
               <Tabs
-                aria-label="対応状況"
+                aria-label="Status"
                 controls="tabs-inbox-view"
                 variant="line"
                 value={inboxStatus}
                 onValueChange={setInboxStatus}
                 items={[
-                  { value: "open", label: "未対応", count: 12, countLabel: "件" },
-                  { value: "doing", label: "対応中", count: 3, countLabel: "件" },
-                  { value: "done", label: "完了", count: 128, countLabel: "件" },
+                  { value: "open", label: "Open", count: 12, countLabel: "threads" },
+                  { value: "doing", label: "In progress", count: 3, countLabel: "threads" },
+                  { value: "done", label: "Done", count: 128, countLabel: "threads" },
                 ]}
               />
-              <section id="tabs-inbox-view" aria-label="スレッド一覧">
-                <Text as="p">表示中: {inboxStatus}</Text>
+              <section id="tabs-inbox-view" aria-label="Threads">
+                <Text as="p">Showing: {inboxStatus}</Text>
               </section>
-              <Tabs aria-label="保存ビュー" controls="tabs-inbox-view" defaultValue="mine">
+              <Tabs aria-label="Saved views" controls="tabs-inbox-view" defaultValue="mine">
                 <TabsList variant="line">
-                  <TabsTrigger value="mine" count={4} countLabel="件">
-                    自分の担当
+                  <TabsTrigger value="mine" count={4} countLabel="threads">
+                    Mine
                   </TabsTrigger>
-                  <TabsTrigger value="all" count={143} countLabel="件">
-                    すべて
+                  <TabsTrigger value="all" count={143} countLabel="threads">
+                    All
                   </TabsTrigger>
                 </TabsList>
               </Tabs>

package/docs/query/data-state.tsx

@@ -66,9 +66,7 @@ function LoadingBlock() {
         query={query}
         skeleton={<SkeletonTable rows={4} columns={3} />}
         isEmpty={(d) => d.length === 0}
-        empty={
-          <EmptyState title="データがありません" description="条件に合う請求書はありません。" />
-        }
+        empty={<EmptyState title="No invoices" description="No invoice matches the filter." />}
       >
         {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
       </DataState>
@@ -78,7 +76,7 @@ function LoadingBlock() {
         size="sm"
         onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
       >
-        もう一度読み込む
+        Load again
       </Button>
     </Flex>
   );

package/docs/query/infinite-query-state.tsx

@@ -54,6 +54,7 @@ function Block() {
       flatten={flattenItemPages}
       isEmpty={(items) => items.length === 0}
       empty={<EmptyState title="アクティビティがありません" />}
+      loadMoreLabel="Show older activity"
     >
       {(items) => (
         <Timeline
@@ -80,7 +81,10 @@ export default function Demo() {
           <Card>
             <CardHeader>
               <CardTitle level={2}>アクティビティ</CardTitle>
-              <CardDescription>Click 「もっと見る」 to append the next page.</CardDescription>
+              <CardDescription>
+                Click “Show older activity” to append the next page. loadMoreLabel renames the
+                built-in button; its pending state stays the component&apos;s.
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <Block />

package/docs/roadmap/tree-components.md

@@ -79,7 +79,8 @@ that every Ant-shaped app reaches for was never built.
 | Density | — | `size: xs \| sm \| lg` (`md` is the default, never `"default"`) |
 | Directory variant | `<DirectoryTree>` | `variant="directory"` |
 | Drag & drop | `draggable` | **out of scope for v1** — file a follow-up issue |
-| Virtual scroll | `virtual` / `height` | **out of scope for v1** — cap with `ScrollArea`; file a follow-up issue |
+| Virtual scroll | `virtual` / `height` | `height` + `virtual` (gh#1042) — windowed rows are a flat run of treeitems; antd has no "load more" node, so none is shipped |
+| Match highlight | `filterTreeNode` | `filterTreeNode` (gh#1043) — `data-filter-node="true"` for antd's `filter-node` class, plus an sr-only "matches" |
 
 Plus the house rules: forward `ref`, spread `...props`, accept `className` + `id`, export
 `TreeProp` and `TreeProp as TreeProps` from `src/props/components/data-display.prop.ts`, and

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

@@ -430,7 +430,7 @@ export default function Demo() {
         {/* Saved-view ribbon — controlled, strip-only Tabs (gh#1021): `controls` points the
             selected tab at the grid below, which lives outside the Tabs and is never remounted. */}
         <Tabs
-          aria-label="保存ビュー"
+          aria-label="Saved views"
           controls="attendance-grid"
           value={view}
           onValueChange={(v) => setView(v as ViewId)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.4.0",
-  "godxUiMcp": "31.4.0",
+  "version": "31.6.0",
+  "godxUiMcp": "31.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",