@godxjp/ui 31.31.8 → 32.0.0

package/docs/layout/flex.tsx

@@ -1,444 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  ListRow,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Flex · canonical flex primitive (replaced Stack/Inline as named shortcuts).
- * The default direction is "row" — matching the CSS `display:flex` initial value.
- * Use direction="col" for vertical stacks (formerly Stack); direction="row" is the
- * default for horizontal groups (formerly Inline). Keep spacing in gap prop · same
- * token scale as Stack/Inline. align + justify expose cross-axis and main-axis control.
- * wrap allows chip clusters and action rows to reflow. Composed only from real
- * @godxjp/ui components.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  return (
-    <PageContainer
-      title="Flex"
-      subtitle="方向・整列・間隔・折り返し · Stack/Inline を置き換えた汎用フレックスプリミティブ"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>既定 direction=&quot;row&quot; · CSS 標準</CardTitle>
-            <CardDescription>
-              direction を省略すると row（CSS の display:flex の初期値）。横並びが既定で、
-              縦積みには direction=&quot;col&quot; を明示する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="sm" align="center">
-              <Badge variant="outline">借方</Badge>
-              <Badge variant="outline">貸方</Badge>
-              <Badge variant="outline">残高</Badge>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>direction=&quot;col&quot; · 縦スタック</CardTitle>
-            <CardDescription>
-              縦積みは direction=&quot;col&quot; を明示する。gap
-              トークンで間隔を均一に制御。className で raw gap-* を使わない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Card>
-                <CardContent>
-                  <Text tone="muted">行 1 · 仕訳入力</Text>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent>
-                  <Text tone="muted">行 2 · 補助元帳</Text>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent>
-                  <Text tone="muted">行 3 · 試算表</Text>
-                </CardContent>
-              </Card>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              direction=&quot;row&quot; + justify=&quot;between&quot; · ツールバー
-            </CardTitle>
-            <CardDescription>
-              カードヘッダー内でタイトルとアクションを左右に配置する典型パターン。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="sm" align="center" justify="between">
-              <Text weight="medium">請求書一覧</Text>
-              <Flex direction="row" gap="xs" align="center">
-                <Button variant="outline" size="sm">
-                  エクスポート
-                </Button>
-                <Button size="sm">新規作成</Button>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              align=&quot;center&quot; + justify=&quot;center&quot; · センタリング
-            </CardTitle>
-            <CardDescription>
-              空状態やローディングブロックを両軸で中央揃えにする用途。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" align="center" justify="center" gap="sm" className="min-h-32">
-              <Text tone="muted">データがありません</Text>
-              <Button variant="outline" size="sm">
-                インポート
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>align · 交差軸の整列（全 5 値）</CardTitle>
-            <CardDescription>
-              direction=&quot;row&quot; の交差軸（縦方向）の揃え方。高さの異なる子要素で
-              start・center・end・baseline・stretch の違いを比較。baseline はテキストの
-              ベースライン、stretch は子要素を行の高さまで引き伸ばす。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {(["start", "center", "end", "stretch", "baseline"] as const).map((a) => (
-                <Flex
-                  key={a}
-                  direction="row"
-                  gap="sm"
-                  align={a}
-                  className="bg-muted min-h-20 rounded-md"
-                  style={{ padding: "var(--space-2)" }}
-                >
-                  <Text size="xs" tone="muted" className="w-16">
-                    {a}
-                  </Text>
-                  <Badge variant="outline">短</Badge>
-                  <Text>標準テキスト</Text>
-                  <Text size="2xl" weight="bold">
-                    大
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>justify · 主軸の配置（全 6 値）</CardTitle>
-            <CardDescription>
-              direction=&quot;row&quot; の主軸（横方向）の配置。固定幅トラックで余白の
-              分配を比較。between は端寄せ、around は各要素の周囲、evenly は要素間と端を
-              すべて均等にする。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {(["start", "center", "end", "between", "around", "evenly"] as const).map((j) => (
-                <Flex key={j} direction="row" gap="sm" align="center">
-                  <Text size="xs" tone="muted" className="w-16">
-                    {j}
-                  </Text>
-                  <Flex
-                    direction="row"
-                    gap="xs"
-                    align="center"
-                    justify={j}
-                    className="bg-muted flex-1 rounded-md"
-                    style={{ padding: "var(--space-2)" }}
-                  >
-                    <Badge variant="outline">借方</Badge>
-                    <Badge variant="outline">貸方</Badge>
-                    <Badge variant="outline">残高</Badge>
-                  </Flex>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>wrap · 折り返しの有無を比較</CardTitle>
-            <CardDescription>
-              wrap=&#123;true&#125;（既定の false に対して）。狭いトラックで折り返しの有無を
-              並べて比較。false では子要素が一行に圧縮され、true では次行へ流れる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" align="start" wrap>
-              <Flex direction="col" gap="xs" className="w-44">
-                <Text size="xs" tone="muted">
-                  wrap=&#123;false&#125;（既定）
-                </Text>
-                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
-                <Flex direction="row" gap="xs" wrap={false} className="bg-muted rounded-md p-2">
-                  <Badge variant="outline">勘定科目</Badge>
-                  <Badge variant="outline">補助科目</Badge>
-                  <Badge variant="outline">部門</Badge>
-                </Flex>
-              </Flex>
-              <Flex direction="col" gap="xs" className="w-44">
-                <Text size="xs" tone="muted">
-                  wrap=&#123;true&#125;
-                </Text>
-                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
-                <Flex direction="row" gap="xs" wrap className="bg-muted rounded-md p-2">
-                  <Badge variant="outline">勘定科目</Badge>
-                  <Badge variant="outline">補助科目</Badge>
-                  <Badge variant="outline">部門</Badge>
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>wrap · バッジ・チップクラスター</CardTitle>
-            <CardDescription>
-              direction=&quot;row&quot; + wrap=&#123;true&#125; でタグ・ステータスバッジが折り返す。
-              gap トークンで均一スペーシング。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap gap="xs" align="center">
-              <Badge tone="success">承認済</Badge>
-              <Badge tone="warning">保留中</Badge>
-              <Badge tone="info">確認待ち</Badge>
-              <Badge tone="destructive">却下</Badge>
-              <Badge variant="secondary">下書き</Badge>
-              <Badge variant="outline">アーカイブ</Badge>
-              <Badge>既定</Badge>
-              <Badge tone="neutral">中立</Badge>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>gap トークンスケール</CardTitle>
-            <CardDescription>
-              xs · sm · md（既定）· lg · xl。raw gap-* / space-* ユーティリティは使わない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {(["xs", "sm", "md", "lg", "xl"] as const).map((g) => (
-                <Flex key={g} direction="row" gap={g} align="center">
-                  <Text size="xs" tone="muted" className="w-6">
-                    {g}
-                  </Text>
-                  <Badge variant="outline">勘定科目</Badge>
-                  <Badge variant="outline">補助科目</Badge>
-                  <Badge variant="outline">部門</Badge>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レスポンシブな操作行</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex
-              id="responsive-actions"
-              direction={{ base: "col", lg: "row" }}
-              gap="md"
-              align="start"
-            >
-              <Flex fill>
-                <Text>画面幅に合わせて操作をまとめます。</Text>
-              </Flex>
-              <Button>保存</Button>
-              <Button variant="outline">キャンセル</Button>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>刻みにない幅で折りたたむ</CardTitle>
-            <CardDescription>
-              hideBelow の 4 段（40/48/64/80rem）に無い幅は hideBelowRaw / hideFromRaw
-              で指定します。900px ちょうどでは「広い側」だけが残り、両方消える隙間はありません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex align="center" gap="sm">
-              <Flex id="raw-wide-nav" hideBelowRaw={900} align="center" gap="sm">
-                <Button variant="ghost" size="sm">
-                  機能
-                </Button>
-                <Button variant="ghost" size="sm">
-                  料金
-                </Button>
-                <Button variant="ghost" size="sm">
-                  導入事例
-                </Button>
-              </Flex>
-              <Flex id="raw-narrow-nav" hideFromRaw={900} align="center" gap="sm">
-                <Button variant="outline" size="sm">
-                  メニュー
-                </Button>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>marker=&quot;none&quot; · 装飾のない意味的リスト</CardTitle>
-            <CardDescription>
-              as=&quot;ul&quot; は既定で中黒と字下げが付きます。設定メニューのような「行の一覧」では
-              marker=&quot;none&quot; を指定すると、ul と li の意味づけと gap トークンは残したまま、
-              中黒も字下げも消えます。行は ListRow as=&quot;li&quot;
-              で、区切り線は行が自分で描きます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <Flex id="semantic-list" as="ul" marker="none" direction="col" gap="none">
-              <ListRow
-                as="li"
-                title="二要素認証"
-                description="認証アプリ · 有効"
-                trailing={
-                  <Button size="xs" variant="outline">
-                    管理
-                  </Button>
-                }
-              />
-              <ListRow
-                as="li"
-                title="パスキー"
-                description="2 件登録済み"
-                trailing={
-                  <Button size="xs" variant="outline">
-                    管理
-                  </Button>
-                }
-              />
-              <ListRow
-                as="li"
-                title="回復コード"
-                description="未発行"
-                trailing={
-                  <Button size="xs" variant="outline">
-                    発行
-                  </Button>
-                }
-              />
-            </Flex>
-          </CardContent>
-          <CardContent>
-            <Flex id="semantic-list-gap" as="ul" marker="none" gap="sm" wrap>
-              <Flex as="li">
-                <Badge variant="outline">監査ログ</Badge>
-              </Flex>
-              <Flex as="li">
-                <Badge variant="outline">IP 制限</Badge>
-              </Flex>
-              <Flex as="li">
-                <Badge variant="outline">SSO</Badge>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>軽い強調と行アクション</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex id="hover-notice" surface="warning" pad={3} tabIndex={0}>
-                <Text>締切を確認してください。</Text>
-                <Flex reveal="hover" surface="popover" gap="xs" pad={1}>
-                  <Button variant="ghost" size="sm">
-                    編集
-                  </Button>
-                  <Button variant="ghost" size="sm">
-                    解除
-                  </Button>
-                </Flex>
-              </Flex>
-              <Flex as="ul" direction="col" gap="xs">
-                <li>添付ファイルを確認</li>
-                <li>担当者を選択</li>
-              </Flex>
-              <Flex surface="muted" pad={{ block: 2, inline: 3 }}>
-                <Text as="code" chip decoration="line-through">
-                  old_status
-                </Text>
-                <Text>更新済み</Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("showcase.flexMeasure.title")}</CardTitle>
-            <CardDescription>{t("showcase.flexMeasure.lead")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Flex
-                id="measure-narrow"
-                measure="narrow"
-                surface="muted"
-                pad={{ block: 2, inline: 6 }}
-                justify="center"
-              >
-                <Text tone="muted">measure=&quot;narrow&quot; · 42rem</Text>
-              </Flex>
-              <Flex
-                id="measure-medium"
-                measure="medium"
-                surface="muted"
-                pad={{ block: 2, inline: 6 }}
-                justify="center"
-              >
-                <Text tone="muted">measure=&quot;medium&quot; · 48rem</Text>
-              </Flex>
-              <Flex
-                id="measure-wide"
-                measure="wide"
-                surface="muted"
-                pad={{ block: 2, inline: 6 }}
-                justify="center"
-              >
-                <Text tone="muted">measure=&quot;wide&quot; · 72rem</Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/layout/legal-document-shell/_data.ts

@@ -1,110 +0,0 @@
-/**
- * Legal copy fixtures for the LegalDocumentShell pages.
- *
- * DATA ONLY (a `.ts` module, never a `.tsx` "kit") — the pages compose the real
- * `@godxjp/ui` primitives themselves, so a consumer can copy any page verbatim.
- * All legal text is CONSUMER-owned; the shell only receives it through `sections`.
- */
-
-export type LegalSectionFixture = {
-  id: string;
-  title: string;
-  paragraphs: string[];
-};
-
-/** Canonical JA terms-of-service document (SCR-005 shape). */
-export const TERMS_JA: LegalSectionFixture[] = [
-  {
-    id: "acceptance",
-    title: "第1条(本規約への同意)",
-    paragraphs: [
-      "本規約は、GodX 株式会社(以下「当社」といいます)が提供する各種サービス(以下「本サービス」といいます)の利用条件を定めるものです。利用者は、本サービスを利用することにより、本規約のすべての条項に同意したものとみなされます。",
-      "当社は、必要と判断した場合には、利用者に事前に通知することなく本規約を変更することがあります。変更後の本規約は、当社所定のウェブサイトに掲示された時点から効力を生じるものとします。",
-    ],
-  },
-  {
-    id: "accounts",
-    title: "第2条(アカウントの管理)",
-    paragraphs: [
-      "利用者は、自己の責任において、本サービスのアカウント情報を適切に管理するものとします。利用者は、いかなる場合にも、アカウントを第三者に譲渡または貸与することはできません。",
-      "アカウント情報が第三者によって使用されたことによって生じた損害について、当社に故意または重大な過失がある場合を除き、当社は一切の責任を負いません。",
-    ],
-  },
-  {
-    id: "prohibited",
-    title: "第3条(禁止事項)",
-    paragraphs: [
-      "利用者は、本サービスの利用にあたり、法令または公序良俗に違反する行為、当社もしくは第三者の知的財産権を侵害する行為、本サービスの運営を妨害するおそれのある行為を行ってはなりません。",
-      "当社は、利用者が前項に違反したと判断した場合、事前の通知なく、当該利用者に対して本サービスの全部または一部の利用を停止することができます。",
-    ],
-  },
-  {
-    id: "data-retention",
-    title: "第4条(データの保持期間)",
-    paragraphs: [
-      "当社は、会計関連法令および犯罪収益移転防止法に基づき、取引記録を取引終了日から7年間保持します。保持期間の経過後、当社は速やかに当該記録を削除または匿名化します。",
-      "利用者は、いつでも自己の個人データの開示、訂正または削除を請求することができます。ただし、法令上の保持義務が優先する場合はこの限りではありません。",
-    ],
-  },
-  {
-    id: "third-party",
-    title: "第5条(第三者サービスの利用)",
-    paragraphs: [
-      "本サービスは、決済、本人確認、通知配信などの目的で第三者のサービスを利用することがあります。当該第三者サービスの利用にあたっては、当該第三者が定める利用条件が別途適用されます。",
-    ],
-  },
-  {
-    id: "disclaimer",
-    title: "第6条(免責事項)",
-    paragraphs: [
-      "当社は、本サービスに事実上または法律上の瑕疵がないことを明示的にも黙示的にも保証しておりません。当社は、本サービスに起因して利用者に生じたあらゆる損害について、当社の故意または重過失による場合を除き、一切の責任を負いません。",
-    ],
-  },
-  {
-    id: "governing-law",
-    title: "第7条(準拠法および管轄裁判所)",
-    paragraphs: [
-      "本規約の解釈にあたっては、日本法を準拠法とします。本サービスに関して紛争が生じた場合には、東京地方裁判所を第一審の専属的合意管轄裁判所とします。",
-    ],
-  },
-  {
-    id: "contact",
-    title: "第8条(お問い合わせ窓口)",
-    paragraphs: [
-      "本規約に関するお問い合わせは、当社所定のお問い合わせフォームまたは legal@example.com までご連絡ください。",
-    ],
-  },
-];
-
-/**
- * Mixed-script wrapping fixture: the same document rendered with deliberately hostile
- * line-breaking material in JA (no spaces / kinsoku), EN (long compounds + a very long URL)
- * and VI (diacritic-heavy words that must never break mid-word).
- */
-export const WRAPPING_MIXED: LegalSectionFixture[] = [
-  {
-    id: "ja-kinsoku",
-    title: "日本語の長文セクション(禁則処理・行分割の確認)",
-    paragraphs: [
-      "当社は、個人情報の保護に関する法律その他の関係法令等を遵守し、利用者の個人情報を適正に取り扱うとともに、個人情報の漏えい、滅失または毀損の防止その他の個人情報の安全管理のために必要かつ適切な措置を講じるものとします。",
-      "「特定個人情報等」「要配慮個人情報」「仮名加工情報」「匿名加工情報」——これらの用語は、いずれも個人情報保護法に定義される意味を有し、句読点や括弧が行頭に来ないよう禁則処理が適用されます。",
-    ],
-  },
-  {
-    id: "en-long-compounds",
-    title:
-      "2. Cross-border data transfers, sub-processor notifications and telecommunications-infrastructure obligations",
-    paragraphs: [
-      "The Controller acknowledges that the Processor may engage sub-processors established outside the European Economic Area, provided that an adequacy decision, standard contractual clauses, or another transfer mechanism recognised under Chapter V of the General Data Protection Regulation is in place.",
-      "The current sub-processor register is published at https://example.com/legal/sub-processors/register?revision=2026-04-01&format=machine-readable and is updated at least thirty calendar days before any addition takes effect.",
-    ],
-  },
-  {
-    id: "vi-dau-thanh",
-    title: "3. Quyền riêng tư và nghĩa vụ bảo mật thông tin của người dùng",
-    paragraphs: [
-      "Chúng tôi chỉ thu thập những thông tin thực sự cần thiết để cung cấp dịch vụ, và tuyệt đối không chia sẻ dữ liệu cá nhân của bạn với bên thứ ba khi chưa nhận được sự đồng ý rõ ràng bằng văn bản.",
-      "Người dùng có quyền yêu cầu truy cập, chỉnh sửa hoặc xoá dữ liệu cá nhân của mình bất cứ lúc nào, trừ trường hợp pháp luật hiện hành quy định nghĩa vụ lưu trữ bắt buộc đối với dữ liệu đó.",
-    ],
-  },
-];

package/docs/layout/legal-document-shell/examples/desktop-1440.md

@@ -1,12 +0,0 @@
----
-title: Viewport 1440x900
-viewport: 1440x900
----
-
-Reference desktop geometry. The shell is wider than 56rem, so the contents render as a **sticky rail**
-on the start side — spanning the header, body and footer rows — beside a 46rem measure-capped
-document column.
-
-Scroll the frame: the active contents entry tracks the reading line (`aria-current="location"` + the
-leading marker + a heavier weight), and the rail stays pinned at
-`--legal-document-toc-inset-block-start`.

package/docs/layout/legal-document-shell/examples/desktop-1440.tsx

@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
-import { Button, Logo, Text } from "@godxjp/ui/general";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-import { TERMS_JA } from "../_data";
-
-/**
- * Viewport fixture — 1440×900 (desktop).
- *
- * Reference geometry: the shell is wider than 56rem, so the contents become a STICKY rail on the
- * start side, spanning the header / body / footer rows, beside a 46rem measure-capped column.
- * The rail stays in view for the whole scroll; the active entry tracks the reading line.
- */
-export default function Demo() {
-  const [activeSection, setActiveSection] = useState("acceptance");
-
-  return (
-    <CenteredShell
-      width="lg"
-      topbar={
-        <Topbar
-          start={
-            <Flex align="center" gap="sm">
-              <Logo glyph="G" />
-              <Text weight="medium">GodX ID</Text>
-            </Flex>
-          }
-          end={<AppSettingPicker kind="locale" />}
-        />
-      }
-      footer={
-        <Text size="xs" tone="muted">
-          2026 GodX 株式会社
-        </Text>
-      }
-    >
-      <LegalDocumentShell
-        title="利用規約"
-        version="2.4"
-        effectiveDate="2026-04-01"
-        summary="本規約は、GodX ID および連携する各サービスの利用条件を定めるものです。ご利用の前に必ずお読みください。"
-        contentsLabel="目次"
-        activeSection={activeSection}
-        onActiveSectionChange={setActiveSection}
-        sections={TERMS_JA.map((section) => ({
-          id: section.id,
-          title: section.title,
-          content: (
-            <Flex direction="col" gap="sm">
-              {section.paragraphs.map((paragraph) => (
-                <Text as="p" key={paragraph}>
-                  {paragraph}
-                </Text>
-              ))}
-            </Flex>
-          ),
-        }))}
-        documentNavigation={
-          <Flex direction="col" gap="xs" role="group" aria-label="法的文書">
-            <Button variant="secondary" size="sm" fullWidth aria-current="page">
-              利用規約
-            </Button>
-            <Button variant="ghost" size="sm" fullWidth>
-              プライバシーポリシー
-            </Button>
-            <Button variant="ghost" size="sm" fullWidth>
-              Cookie ポリシー
-            </Button>
-          </Flex>
-        }
-        footerAction={
-          <Flex gap="sm" wrap>
-            <Button size="sm">同意する</Button>
-            <Button size="sm" variant="outline">
-              PDF をダウンロード
-            </Button>
-          </Flex>
-        }
-      />
-    </CenteredShell>
-  );
-}

package/docs/layout/legal-document-shell/examples/mobile-390.md

@@ -1,22 +0,0 @@
----
-title: Viewport 390x844
-viewport: 390x844
----
-
-## Documented mobile behaviour
-
-Below the **56rem** container threshold the shell collapses to one column and the DOM order is
-exactly the reading order:
-
-1. document header (`h1` · version · `<time>` effective date · summary)
-2. **contents** — a static compact block
-3. the sections
-4. `footerAction`
-
-The rail is **deliberately not sticky and not height-capped** at this size: pinning a 8-item contents
-list on a 390×844 screen costs more vertical space than it saves, and a height-capped inner scroller
-inside a page scroller is a known touch-scroll trap. The entries stay real anchors with the same
-`--legal-document-scroll-offset` and the same focus handoff, so tapping one jumps to — and focuses —
-the section.
-
-Nothing here is a media query: the same rules apply to a 56rem-narrow pane on a large screen.