@godxjp/ui 28.7.0 → 28.8.0

package/docs/navigation/anchor.tsx

@@ -0,0 +1,285 @@
+import { useRef, useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+  ScrollArea,
+} from "@godxjp/ui/data-display";
+import { Heading, Paragraph, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Anchor, type AnchorItemProp } from "@godxjp/ui/navigation";
+
+/**
+ * Anchor — Ant Design `Anchor` (6.6.5). The in-page section navigation, and the only thing in the
+ * library that COMPUTES which section is current.
+ *
+ * This page is built out of the cases that break a table of contents, not the one that flatters it:
+ *
+ * — a FORTY-entry rail beside a TWO-entry one, in the same screen, because the rail that works at
+ *   two entries is not the rail that works at forty (it scrolls, and the ink rail has to keep up);
+ * — a 71-character UNBREAKABLE label, which is a real section title (a config key, a German
+ *   compound, a URL) and the shape that widens a rail until the page grows a scrollbar;
+ * — CJK beside Latin in the same list, where the same nominal size is a taller line box;
+ * — a section TALLER than its scrollport, which is where an IntersectionObserver band goes blank
+ *   and this component keeps answering;
+ * — the HORIZONTAL direction, which is what a narrow viewport collapses to;
+ * — and a bounded `getContainer`, because a page is very often not the thing that scrolls.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+
+/** A real section title that cannot be broken anywhere. Exactly 71 characters. */
+const UNBREAKABLE = "RegionalDeploymentConfigurationParameterNamespaceIdentifierOverrides123";
+
+const PRIMER: AnchorItemProp[] = [
+  { key: "p1", href: "#primer-what", title: "What it resolves" },
+  { key: "p2", href: "#primer-why", title: "Why not sticky" },
+];
+
+const CHAPTERS = [
+  { id: "ch-intro", latin: "Introduction", cjk: "はじめに" },
+  { id: "ch-scope", latin: "Scope and audience", cjk: "対象範囲と読者" },
+  { id: "ch-terms", latin: "Defined terms", cjk: "用語の定義" },
+  { id: "ch-accounts", latin: "Accounts", cjk: "アカウント" },
+  { id: "ch-identity", latin: "Identity verification", cjk: "本人確認" },
+  { id: "ch-billing", latin: "Billing", cjk: "請求" },
+  { id: "ch-invoices", latin: "Invoices and receipts", cjk: "請求書と領収書" },
+  { id: "ch-taxes", latin: "Taxes", cjk: "税" },
+  { id: "ch-refunds", latin: "Refunds", cjk: "返金" },
+  { id: "ch-plans", latin: "Plans", cjk: "プラン" },
+  { id: "ch-limits", latin: "Usage limits", cjk: "利用上限" },
+  { id: "ch-fair-use", latin: "Fair use", cjk: "公正利用" },
+  { id: "ch-data", latin: "Data ownership", cjk: "データの帰属" },
+  { id: "ch-retention", latin: "Retention", cjk: "保持期間" },
+  { id: "ch-deletion", latin: "Deletion", cjk: "削除" },
+  { id: "ch-export", latin: "Export", cjk: "エクスポート" },
+  { id: "ch-security", latin: "Security", cjk: "セキュリティ" },
+  { id: "ch-incident", latin: "Incident response", cjk: "インシデント対応" },
+  { id: "ch-subprocessors", latin: "Sub-processors", cjk: "再委託先" },
+  { id: "ch-transfers", latin: "International transfers", cjk: "国際移転" },
+  { id: "ch-availability", latin: "Availability", cjk: "可用性" },
+  { id: "ch-maintenance", latin: "Maintenance windows", cjk: "メンテナンス" },
+  { id: "ch-support", latin: "Support", cjk: "サポート" },
+  { id: "ch-escalation", latin: "Escalation", cjk: "エスカレーション" },
+  { id: "ch-credits", latin: "Service credits", cjk: "サービスクレジット" },
+  { id: "ch-acceptable", latin: "Acceptable use", cjk: "禁止事項" },
+  { id: "ch-content", latin: "Customer content", cjk: "顧客コンテンツ" },
+  { id: "ch-ip", latin: "Intellectual property", cjk: "知的財産" },
+  { id: "ch-feedback", latin: "Feedback", cjk: "フィードバック" },
+  { id: "ch-publicity", latin: "Publicity", cjk: "公表" },
+  { id: "ch-warranty", latin: "Warranties", cjk: "保証" },
+  { id: "ch-liability", latin: "Limitation of liability", cjk: "責任の制限" },
+  { id: "ch-indemnity", latin: "Indemnity", cjk: "補償" },
+  { id: "ch-term", latin: "Term", cjk: "契約期間" },
+  { id: "ch-suspension", latin: "Suspension", cjk: "利用停止" },
+  { id: "ch-termination", latin: "Termination", cjk: "解約" },
+  { id: "ch-survival", latin: "Survival", cjk: "存続条項" },
+  { id: "ch-law", latin: "Governing law", cjk: "準拠法" },
+  { id: "ch-disputes", latin: "Disputes", cjk: "紛争解決" },
+  { id: "ch-namespace", latin: UNBREAKABLE, cjk: "名前空間の上書き" },
+  { id: "ch-changes", latin: "Changes to these terms", cjk: "本規約の変更" },
+  { id: "ch-contact", latin: "Contact", cjk: "お問い合わせ" },
+];
+
+const CHAPTER_ITEMS: AnchorItemProp[] = CHAPTERS.map((chapter) => ({
+  key: chapter.id,
+  href: `#${chapter.id}`,
+  // CJK beside Latin on ONE row: the same nominal size, a taller line box, and the rail has to
+  // hold both without the ink rail losing its alignment.
+  title: (
+    <>
+      {chapter.cjk} · {chapter.latin}
+    </>
+  ),
+}));
+
+const HORIZONTAL: AnchorItemProp[] = [
+  { key: "h-overview", href: "#bar-overview", title: "概要 · Overview" },
+  { key: "h-pricing", href: "#bar-pricing", title: "価格 · Pricing" },
+  { key: "h-security", href: "#bar-security", title: "セキュリティ · Security" },
+  { key: "h-faq", href: "#bar-faq", title: "よくある質問 · FAQ" },
+];
+
+function Chapter({ id, title, lines }: { id: string; title: string; lines: number }) {
+  return (
+    <section id={id} aria-labelledby={`${id}-heading`}>
+      <Heading level={3} id={`${id}-heading`}>
+        {title}
+      </Heading>
+      {Array.from({ length: lines }, (_, line) => (
+        <Paragraph key={line}>
+          本条は{title}について定めます。The clause is deliberately long enough that a reader spends
+          several scroll gestures inside it, which is the case an IntersectionObserver band cannot
+          answer and a decision line can.
+        </Paragraph>
+      ))}
+    </section>
+  );
+}
+
+export default function Demo() {
+  const primerRef = useRef<HTMLDivElement>(null);
+  const chaptersRef = useRef<HTMLDivElement>(null);
+  const barRef = useRef<HTMLDivElement>(null);
+  const [reading, setReading] = useState<string>("");
+
+  return (
+    <PageContainer
+      title="Anchor"
+      subtitle="antd Anchor · the decision line, the suppressed click, the landing hash, aria-current=location"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle>1 · Two entries, and what the component reports</CardTitle>
+            <CardDescription>
+              The smallest rail there is, bounded by its own `getContainer` rather than the page.
+              `onValueChange` hands back the href the SCROLL POSITION resolved, which is the value
+              printed below it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" align="start">
+              <Anchor
+                affix={false}
+                showInkInFixed
+                label="Primer sections"
+                items={PRIMER}
+                getContainer={() => primerRef.current ?? window}
+                onValueChange={setReading}
+              />
+              <ScrollArea viewportRef={primerRef} className="h-64 flex-1" label="Primer">
+                <Flex direction="col" gap="md">
+                  <Chapter id="primer-what" title="What it resolves" lines={4} />
+                  <Chapter id="primer-why" title="Why not sticky" lines={4} />
+                </Flex>
+              </ScrollArea>
+            </Flex>
+            <Descriptions
+              items={[
+                { label: "onValueChange", children: <Text>{reading || "—"}</Text> },
+                {
+                  label: "aria-current",
+                  children: <Badge variant="secondary">location</Badge>,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>2 · Forty-two entries, CJK beside Latin, and a 71-character label</CardTitle>
+            <CardDescription>
+              The rail that works at two entries is not the rail that works at forty-two: this one
+              scrolls, the ink rail keeps up, and the `{UNBREAKABLE.length}`-character unbreakable
+              title wraps instead of widening the column until the page grows a scrollbar.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" align="start">
+              <ScrollArea className="h-96 w-64 shrink-0" label="Contents">
+                <Anchor
+                  affix={false}
+                  showInkInFixed
+                  label="Agreement contents"
+                  items={CHAPTER_ITEMS}
+                  getContainer={() => chaptersRef.current ?? window}
+                />
+              </ScrollArea>
+              <ScrollArea viewportRef={chaptersRef} className="h-96 flex-1" label="Agreement">
+                <Flex direction="col" gap="md">
+                  {CHAPTERS.map((chapter) => (
+                    <Chapter
+                      key={chapter.id}
+                      id={chapter.id}
+                      title={`${chapter.cjk} · ${chapter.latin}`}
+                      // One chapter is far taller than the scrollport on purpose — the case a
+                      // band-based scrollspy cannot answer and a decision line can.
+                      lines={chapter.id === "ch-billing" ? 24 : 3}
+                    />
+                  ))}
+                </Flex>
+              </ScrollArea>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>3 · direction=&quot;horizontal&quot; — the narrow case</CardTitle>
+            <CardDescription>
+              One row that scrolls inline rather than wrapping onto a second, because the ink rail
+              has to stay beside the label it belongs to. Nesting is not available here, and Ant
+              Design says the same.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Anchor
+              affix={false}
+              showInkInFixed
+              direction="horizontal"
+              label="Page sections"
+              items={HORIZONTAL}
+              getContainer={() => barRef.current ?? window}
+            />
+            <ScrollArea viewportRef={barRef} className="h-64" label="Sections">
+              <Flex direction="col" gap="md">
+                <Chapter id="bar-overview" title="概要 · Overview" lines={3} />
+                <Chapter id="bar-pricing" title="価格 · Pricing" lines={3} />
+                <Chapter id="bar-security" title="セキュリティ · Security" lines={3} />
+                <Chapter id="bar-faq" title="よくある質問 · FAQ" lines={3} />
+              </Flex>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>4 · Against the page, pinned by Affix</CardTitle>
+            <CardDescription>
+              The default. `affix` is `true`, so the rail pins itself once it reaches the line;
+              `targetOffsetBlockStart` is the room a clicked section leaves for whatever is pinned
+              above it. Landing on one of these hashes selects the entry with no scroll event at
+              all, and the click moves FOCUS to the section, not just the scroll position.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" align="start">
+              <Anchor
+                offsetBlockStart={16}
+                targetOffsetBlockStart={24}
+                label="On this page"
+                items={[
+                  { key: "page-a", href: "#page-alpha", title: "Alpha · 第一章" },
+                  {
+                    key: "page-b",
+                    href: "#page-beta",
+                    title: "Beta · 第二章",
+                    children: [
+                      { key: "page-b1", href: "#page-beta-one", title: "Beta, part one" },
+                      { key: "page-b2", href: "#page-beta-two", title: "Beta, part two" },
+                    ],
+                  },
+                  { key: "page-c", href: "#page-gamma", title: "Gamma · 第三章" },
+                ]}
+              />
+              <Flex direction="col" gap="md" className="flex-1">
+                <Chapter id="page-alpha" title="Alpha · 第一章" lines={6} />
+                <Chapter id="page-beta" title="Beta · 第二章" lines={2} />
+                <Chapter id="page-beta-one" title="Beta, part one" lines={6} />
+                <Chapter id="page-beta-two" title="Beta, part two" lines={6} />
+                <Chapter id="page-gamma" title="Gamma · 第三章" lines={8} />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/mega-menu-panel.tsx

@@ -0,0 +1,86 @@
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { MegaMenu, type MegaMenuItemProp } from "@godxjp/ui/navigation";
+import { ShieldCheck, Users } from "lucide-react";
+
+/**
+ * MegaMenu — ONE panel, open, and nothing else on the page.
+ *
+ * A separate frame from `mega-menu.tsx` on purpose. An open panel is an OVERLAY: it is
+ * `position: fixed` so that `Topbar`'s `overflow: clip` slots and `Card`'s `overflow: hidden` do
+ * not clip it away, which means an always-open panel paints over whatever is beneath it. On a
+ * page of demo cards that is a measurement hazard — the open panel covers the next card and every
+ * sweep of that card reads the panel instead. So the open state lives here, alone, where it is
+ * the subject rather than the obstruction.
+ *
+ * This is the edge case page: a column with an icon and a description beside a bare one, a
+ * disabled row, a 71-character unbreakable identifier, and CJK beside Latin in the same column.
+ */
+const ITEMS: MegaMenuItemProp[] = [
+  {
+    key: "products",
+    label: "製品",
+    panel: {
+      groups: [
+        {
+          key: "core",
+          label: "コア業務",
+          icon: <Users />,
+          description: "毎日使う基幹アプリ。人事と給与はひとつの従業員台帳を共有します。",
+          links: [
+            {
+              key: "hr",
+              label: "人事管理 / HR",
+              href: "/hr",
+              icon: <Users />,
+              description: "従業員台帳、異動履歴、組織図",
+            },
+            { key: "payroll", label: "給与計算 / Payroll", href: "/payroll" },
+          ],
+        },
+        {
+          key: "addons",
+          label: "アドオン",
+          links: [
+            { key: "attendance", label: "勤怠管理", href: "/attendance" },
+            { key: "workflow", label: "ワークフロー", href: "/workflow" },
+            { key: "eol", label: "提供終了予定のモジュール", href: "/eol", disabled: true },
+          ],
+        },
+        {
+          key: "platform",
+          label: "Platform",
+          icon: <ShieldCheck />,
+          links: [
+            { key: "sso", label: "SSO / SAML", href: "/sso" },
+            {
+              key: "webhook",
+              label: "webhookEndpointConfigurationForOutboundPayrollNotificationsV2",
+              href: "/webhooks",
+              description: "エンドポイント設定",
+            },
+          ],
+        },
+      ],
+      footer: (
+        <Text tone="muted" size="sm">
+          すべての製品と価格は製品一覧ページでご覧いただけます。
+        </Text>
+      ),
+    },
+  },
+  { key: "pricing", label: "料金", href: "/pricing" },
+];
+
+export default function MegaMenuPanelDoc() {
+  return (
+    <PageContainer
+      title="MegaMenu · 開いたパネル"
+      subtitle="1 つの nav、パネルは開いたまま · アイコンと説明のある列 / 素の列 / 無効な行 / 71 文字の識別子"
+    >
+      <Flex direction="col" gap="lg">
+        <MegaMenu label="開いたパネルの例" items={ITEMS} defaultOpen="products" value="payroll" />
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/mega-menu.tsx

@@ -0,0 +1,254 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { MegaMenu, type MegaMenuItemProp } from "@godxjp/ui/navigation";
+import {
+  BookOpen,
+  Building2,
+  Calculator,
+  CreditCard,
+  FileText,
+  LifeBuoy,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+
+/**
+ * MegaMenu — the primary site navigation whose top-level items disclose a full-width panel.
+ *
+ * WAI-ARIA APG **Disclosure Navigation with Top-Level Links**, not Menubar: a bar of links to
+ * PLACES is not a menu of COMMANDS, and `role="menu"` would promise assistive technology an
+ * application menu. That is also why this is not `DropdownMenu` plus a token — `DropdownMenu` is
+ * `role="menu"` by construction.
+ *
+ * The cards below are deliberately NOT tidy. Each one is an edge a real site hits on day one and a
+ * demo page usually hides: a panel with forty links beside a panel with one, a 71-character
+ * unbreakable label, CJK beside Latin, a group carrying an icon and a description beside a bare
+ * column, and the narrow layout where the panel has nowhere to go.
+ */
+
+/** Forty links, which is the size at which a panel stops being a list and starts being a screen. */
+const FORTY = Array.from({ length: 40 }, (_, index) => ({
+  key: `report-${index + 1}`,
+  label: `レポート ${String(index + 1).padStart(2, "0")}`,
+  href: `/reports/${index + 1}`,
+}));
+
+/** The bar every other card varies. CJK labels beside Latin ones, on purpose. */
+const ITEMS: MegaMenuItemProp[] = [
+  {
+    key: "products",
+    label: "製品",
+    icon: <Building2 />,
+    panel: {
+      groups: [
+        {
+          key: "core",
+          label: "コア業務",
+          icon: <Users />,
+          description: "毎日使う基幹アプリ。人事と給与はひとつの従業員台帳を共有します。",
+          links: [
+            {
+              key: "hr",
+              label: "人事管理 / HR",
+              href: "/hr",
+              icon: <Users />,
+              description: "従業員台帳、異動履歴、組織図",
+            },
+            {
+              key: "payroll",
+              label: "給与計算 / Payroll",
+              href: "/payroll",
+              icon: <Calculator />,
+              description: "月次締め、賞与、年末調整",
+            },
+            {
+              key: "expense",
+              label: "経費精算 / Expenses",
+              href: "/expense",
+              icon: <CreditCard />,
+              description: "申請から振込まで",
+            },
+          ],
+        },
+        {
+          // A BARE column beside the decorated one above: no icon, no description, no heading
+          // beyond the label. Both shapes have to look deliberate side by side.
+          key: "addons",
+          label: "アドオン",
+          links: [
+            { key: "attendance", label: "勤怠管理", href: "/attendance" },
+            { key: "workflow", label: "ワークフロー", href: "/workflow" },
+            { key: "mynumber", label: "マイナンバー管理", href: "/mynumber" },
+            { key: "eol", label: "提供終了予定のモジュール", href: "/eol", disabled: true },
+          ],
+        },
+        {
+          key: "platform",
+          label: "Platform",
+          icon: <ShieldCheck />,
+          links: [
+            { key: "sso", label: "SSO / SAML", href: "/sso" },
+            { key: "audit", label: "Audit log", href: "/audit" },
+            {
+              // 71 characters, no space, no hyphen — a real webhook identifier pasted into a nav.
+              // It must WRAP inside its column, never widen the panel past the viewport.
+              key: "webhook",
+              label: "webhookEndpointConfigurationForOutboundPayrollNotificationsV2",
+              href: "/webhooks",
+              description: "エンドポイント設定",
+            },
+          ],
+        },
+      ],
+      footer: (
+        <Text tone="muted" size="sm">
+          すべての製品と価格は製品一覧ページでご覧いただけます。
+        </Text>
+      ),
+    },
+  },
+  {
+    key: "reports",
+    label: "レポート",
+    icon: <FileText />,
+    panel: {
+      groups: [
+        { key: "all", label: "標準レポート (40)", links: FORTY.slice(0, 20) },
+        { key: "more", label: "続き", links: FORTY.slice(20) },
+      ],
+    },
+  },
+  {
+    key: "support",
+    label: "Support",
+    icon: <LifeBuoy />,
+    panel: {
+      // ONE link. The narrowest panel a consumer will ever build, and it must not look broken
+      // beside the forty-link one above.
+      groups: [
+        {
+          key: "contact",
+          label: "お問い合わせ",
+          links: [{ key: "contact-us", label: "サポートに連絡する", href: "/support" }],
+        },
+      ],
+    },
+  },
+  { key: "docs", label: "ドキュメント", href: "/docs", icon: <BookOpen /> },
+  { key: "pricing", label: "料金", href: "/pricing" },
+];
+
+export default function MegaMenuDoc() {
+  const [route, setRoute] = useState("payroll");
+
+  return (
+    <PageContainer
+      title="MegaMenu"
+      subtitle="APG Disclosure Navigation · 全幅パネル · roving tabindex · hover intent · 狭い画面ではアコーディオン"
+    >
+      <Flex direction="col" gap="lg">
+        {/* 1 · IN A REAL BAR — the component where it actually lives. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>サイトのヘッダー · ロゴの隣に置く</CardTitle>
+            <CardDescription>
+              バーのふるまい（roving tabindex・aria-expanded・Escape で戻る）はすべて `MegaMenu`
+              が持ちます。現在のルートは `value` で渡し、`aria-current=&quot;page&quot;`
+              としてバーとパネルの両方に出ます。
+              <br />
+              `Topbar` のスロットには入れないでください。実測した理由が 2
+              つあります。`topbar-center` は約 1280px 未満で `display: none` になるのでノート PC
+              の幅でナビゲーションごと消え、`topbar-start` は `overflow: clip` かつ `flex-wrap:
+              nowrap` の 1 行なので、狭い画面で縦に開く アコーディオンが行からはみ出します（375px で
+              58 要素がビューポート外）。電話幅のサイトナビは バーの中ではなく `Sheet`
+              の中に置く、というのが実サイトの答えです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex align="center" gap="md">
+              <Text weight="semibold">GodX</Text>
+              <MegaMenu
+                label="メインナビゲーション"
+                items={ITEMS}
+                value={route}
+                onValueChange={setRoute}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* 2 · THE EDGES — one link beside forty, an unbreakable token, CJK beside Latin. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>端 · 1 件のパネルと 40 件のパネル</CardTitle>
+            <CardDescription>
+              「レポート」は 40 件、「Support」は 1 件。40
+              件のパネルは列に折り返して高さを抑え、それでも入り切らなければブロック方向にスクロールします。「Platform」列の
+              71 文字の webhook
+              識別子は列の中で折り返し、バーやパネルをビューポートの外へ広げません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <MegaMenu label="端の例" items={ITEMS} />
+          </CardContent>
+        </Card>
+
+        {/* 3 · HOVER INTENT — the mode antd defaults to, and the diagonal it has to survive. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>triggerAction=&quot;hover&quot; · 斜めに動くマウス</CardTitle>
+            <CardDescription>
+              Ant Design の `triggerSubMenuAction`。トリガーから離れただけでは閉じません —
+              閉じるのは nav 全体からポインタが出たときだけで、それも `closeDelay`（既定 100ms、antd
+              の `subMenuCloseDelay`
+              と同じ）の猶予があります。だから「製品」から斜め下のリンクへ一直線に動けます。クリックでも開くので、タッチ端末で行き止まりになりません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <MegaMenu label="ホバーの例" items={ITEMS} triggerAction="hover" size="sm" />
+          </CardContent>
+        </Card>
+
+        {/* 4 · NARROW — the same disclosure, in flow. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              狭い画面 · 同じ disclosure がそのままアコーディオンになる
+            </CardTitle>
+            <CardDescription>
+              全幅パネルは 375px では行き場がありません。768px
+              未満ではバーが縦に積み、パネルは自分のトリガーの真下にインフローで開きます。DOM もARIA
+              も同じ（`aria-expanded` / `aria-controls`）で、Escape もそのまま効きます。Menubar
+              ではなく Disclosure を選んだ配当がこれです。ブラウザを 768px
+              より狭くして確かめてください。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <MegaMenu label="狭い画面の例" items={ITEMS} size="lg" />
+          </CardContent>
+        </Card>
+
+        {/* 5 · WHAT IT IS NOT. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>これは DropdownMenu ではない</CardTitle>
+            <CardDescription>
+              `DropdownMenu` は `role=&quot;menu&quot;` /
+              `role=&quot;menuitem&quot;`（コマンドのメニュー）です。リンクの集まりにこれを使うと、スクリーンリーダーはアプリケーションメニューとして読み上げ、Tab
+              はウィジェット全体から出てしまいます。これがメガメニューの典型的な a11y
+              欠陥で、このコンポーネントが存在する理由です。操作（削除・名前の変更）には
+              `DropdownMenu`、場所への移動には `MegaMenu` を使ってください。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Text tone="muted" size="sm">
+              現在のルート: {route}
+            </Text>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}