@godxjp/ui 31.31.8 → 32.0.0

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

@@ -1,438 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** A folder's tag facets — more chips than any rail is wide, which is the `wrap` case (gh#741). */
-const folderTags = [
-  { value: "design", label: "設計", count: 12 },
-  { value: "runbook", label: "運用手順", count: 148 },
-  { value: "security", label: "セキュリティ", count: 37 },
-  { value: "onboarding", label: "オンボーディング", count: 9 },
-  { value: "incident", label: "障害報告", count: 64 },
-  { value: "contract", label: "契約", count: 21 },
-  { value: "billing", label: "請求", count: 83 },
-  { value: "release", label: "リリース", count: 156 },
-  { value: "meeting", label: "議事録", count: 402 },
-  { value: "hr", label: "人事", count: 18 },
-  { value: "legal", label: "法務", count: 6 },
-  { value: "archive", label: "アーカイブ", count: 311 },
-];
-
-/** A one-of-N setting: a list always has A sort order, so this row may never be empty (gh#744). */
-const sortOrders = [
-  { value: "updated", label: "更新日" },
-  { value: "created", label: "作成日" },
-  { value: "name", label: "名前" },
-  { value: "size", label: "サイズ" },
-  { value: "owner", label: "所有者" },
-  { value: "relevance", label: "関連度" },
-];
-
-/**
- * ToggleGroup — single or multi-select toggle set. type='single' for mutually
- * exclusive modes; type='multiple' for independent selections. Never raw radio
- * buttons for this pattern. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [period, setPeriod] = useState<string>("monthly");
-  const [formats, setFormats] = useState<string[]>(["pdf"]);
-  const [view, setView] = useState<string>("list");
-  const [tags, setTags] = useState<string[]>(["design", "runbook"]);
-  const [facet, setFacet] = useState<string>("design");
-  const [sort, setSort] = useState<string>("updated");
-
-  return (
-    <PageContainer
-      title="ToggleGroup"
-      subtitle="Single or multi-select toggle set · toolbar modes, output formats"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Single selection (type=“single”)</CardTitle>
-            <CardDescription>
-              Mutually exclusive · switching fiscal period. value is string, onValueChange receives
-              string.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="period" label="集計期間">
-              <ToggleGroup
-                type="single"
-                disallowEmptySelection
-                value={period}
-                onValueChange={setPeriod}
-              >
-                <ToggleGroupItem value="daily">日次</ToggleGroupItem>
-                <ToggleGroupItem value="monthly">月次</ToggleGroupItem>
-                <ToggleGroupItem value="quarterly">四半期</ToggleGroupItem>
-                <ToggleGroupItem value="yearly">年次</ToggleGroupItem>
-              </ToggleGroup>
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disallowEmptySelection · 空を許すかどうかが role を決める</CardTitle>
-            <CardDescription>
-              ARIA には「もう一度押して選択を外す」という radio
-              がない。選択のある radiogroup には必ずちょうど一つ checked
-              な項目があるので、ユーザーが今押したばかりの radiogroup
-              が空になった状態はスクリーンリーダーが読み上げられない。だから空を許すかどうかが
-              role を決める（gh#744）。既定（空を許す）は role=&quot;group&quot; ＋ 各項目
-              aria-pressed で、同じチップをもう一度押せば選択が外れ onValueChange(&quot;&quot;)
-              が飛ぶ。disallowEmptySelection を付けると role=&quot;radiogroup&quot; ＋
-              role=&quot;radio&quot; / aria-checked になり、選択中の項目をもう一度押しても外れず、矢印キーが
-              APG の radio group どおり選択ごと動く。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  既定（空を許す）· タグ絞り込み · role=&quot;group&quot; ＋
-                  aria-pressed。矢印キーはフォーカスだけを動かす
-                </Text>
-                <ToggleGroup
-                  type="single"
-                  variant="soft"
-                  shape="pill"
-                  wrap
-                  value={facet}
-                  onValueChange={(v) => setFacet(v as string)}
-                  aria-label="ファセット絞り込み"
-                >
-                  {folderTags.slice(0, 6).map((tag) => (
-                    <ToggleGroupItem key={tag.value} value={tag.value}>
-                      {tag.label}
-                    </ToggleGroupItem>
-                  ))}
-                </ToggleGroup>
-                <Text as="p" size="sm" tone="muted">
-                  選択中: {facet === "" ? "なし" : facet}
-                </Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  disallowEmptySelection · 並び替え · role=&quot;radiogroup&quot; ＋
-                  aria-checked。タブ位置は選択中の項目ひとつ、矢印キーが選択ごと動く
-                </Text>
-                <ToggleGroup
-                  type="single"
-                  variant="soft"
-                  shape="pill"
-                  wrap
-                  disallowEmptySelection
-                  value={sort}
-                  onValueChange={(v) => setSort(v as string)}
-                  aria-label="並び替え"
-                >
-                  {sortOrders.map((order) => (
-                    <ToggleGroupItem key={order.value} value={order.value}>
-                      {order.label}
-                    </ToggleGroupItem>
-                  ))}
-                </ToggleGroup>
-                <Text as="p" size="sm" tone="muted">
-                  選択中: {sort === "" ? "なし" : sort}
-                </Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Multiple selection (type=“multiple”)</CardTitle>
-            <CardDescription>
-              Independent toggles · output format selection. value is string[], onValueChange
-              receives string[].
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="formats" label="出力形式">
-              <ToggleGroup
-                type="multiple"
-                value={formats}
-                onValueChange={(v) => setFormats(v as string[])}
-              >
-                <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
-                <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
-                <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
-                <ToggleGroupItem value="mail">メール</ToggleGroupItem>
-              </ToggleGroup>
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>View density switcher</CardTitle>
-            <CardDescription>
-              Common use case: switching between display modes in a list or dashboard.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ToggleGroup
-              type="single"
-              disallowEmptySelection
-              value={view}
-              onValueChange={setView}
-            >
-              <ToggleGroupItem value="list">一覧</ToggleGroupItem>
-              <ToggleGroupItem value="card">カード</ToggleGroupItem>
-              <ToggleGroupItem value="compact">コンパクト</ToggleGroupItem>
-            </ToggleGroup>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>variant · default / outline / soft</CardTitle>
-            <CardDescription>
-              variant は ToggleGroup にだけ指定すれば全アイテムへ伝播する（各 ToggleGroupItem
-              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。soft
-              は休止時から --secondary で塗られるので、チップの列に使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  variant=&quot;default&quot;
-                </Text>
-                <ToggleGroup type="single" variant="default" defaultValue="pdf">
-                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
-                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
-                  <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  variant=&quot;outline&quot;
-                </Text>
-                <ToggleGroup type="single" variant="outline" defaultValue="pdf">
-                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
-                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
-                  <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>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>wrap · 折り返すタグ絞り込みの行</CardTitle>
-            <CardDescription>
-              wrap
-              を付けた行は、レールに収まらなくなった時点で次の行へ折り返す（gh#741）。名前も真偽値も
-              data-wrap 属性も Flex と同じ。既定は false で、variant
-              によって既定を変えることはしない。320px のレールで測ると 4 項目のセグメントは wrap
-              の有無に関わらず 1 行 32px
-              のままで、変わるのは元から溢れていた行だけだからである。折り返しても gap は 1
-              つなので、行間と列間は同じ 4px になる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  wrap · variant=&quot;soft&quot; shape=&quot;pill&quot; size=&quot;xs&quot; ·
-                  タグが 12 個あっても ToggleGroup は 1 つのまま（value / onValueChange も 1
-                  つ、矢印キーは折り返した行をまたいで DOM 順に進む）
-                </Text>
-                <ToggleGroup
-                  type="multiple"
-                  variant="soft"
-                  shape="pill"
-                  size="xs"
-                  wrap
-                  value={tags}
-                  onValueChange={(v) => setTags(v as string[])}
-                  aria-label="タグで絞り込み"
-                >
-                  {folderTags.map((tag) => (
-                    <ToggleGroupItem
-                      key={tag.value}
-                      value={tag.value}
-                      count={tag.count}
-                      countLabel="ページ"
-                    >
-                      {tag.label}
-                    </ToggleGroupItem>
-                  ))}
-                </ToggleGroup>
-                <Text as="p" size="sm" tone="muted">
-                  選択中: {tags.length === 0 ? "なし" : tags.join(" / ")}
-                </Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  wrap なし（既定）· セグメントは 1 行 32px のまま、何も変わらない
-                </Text>
-                <ToggleGroup
-                  type="single"
-                  variant="outline"
-                  defaultValue="daily"
-                  aria-label="集計単位"
-                >
-                  <ToggleGroupItem value="daily">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="monthly">月次</ToggleGroupItem>
-                  <ToggleGroupItem value="quarterly">四半期</ToggleGroupItem>
-                  <ToggleGroupItem value="yearly">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>
-            <CardDescription>
-              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md が既定。xs 24px / sm 28px
-              / md 32px / lg 36px はすべて --control-height
-              の同じ段なので、行の高さが先に決まっている場所ではその段を選ぶ。xs は 24px
-              の密な行にセグメントを載せるための段。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;xs&quot; · 24px の密な行
-                </Text>
-                <ToggleGroup type="single" size="xs" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
-                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;sm&quot;
-                </Text>
-                <ToggleGroup type="single" size="sm" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
-                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;md&quot;
-                </Text>
-                <ToggleGroup type="single" size="md" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
-                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;lg&quot;
-                </Text>
-                <ToggleGroup type="single" size="lg" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
-                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>継承と上書き（group → item）</CardTitle>
-            <CardDescription>
-              group の variant / size は全アイテムへ伝播し、item 側で明示した prop
-              が常に優先される。group だけ・item だけ・両方に指定した 3
-              つの書き方はすべて同じ描画になる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  group size=&quot;sm&quot; · 中央のみ item size=&quot;lg&quot; で上書き
-                </Text>
-                <ToggleGroup type="single" size="sm" variant="outline" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month" size="lg">
-                    月次
-                  </ToggleGroupItem>
-                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  group にのみ指定（伝播）
-                </Text>
-                <ToggleGroup type="single" size="lg" variant="outline" defaultValue="day">
-                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
-                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  item にのみ指定（従来の書き方・描画は不変）
-                </Text>
-                <ToggleGroup type="single" defaultValue="day">
-                  <ToggleGroupItem value="day" size="lg" variant="outline">
-                    日次
-                  </ToggleGroupItem>
-                  <ToggleGroupItem value="month" size="lg" variant="outline">
-                    月次
-                  </ToggleGroupItem>
-                </ToggleGroup>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/toggle.tsx

@@ -1,217 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Toggle } from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Toggle · a single pressed/unpressed button (Radix Toggle). Use for toolbar
- * actions and pinned filters. For multi-option selection use ToggleGroup.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [bold, setBold] = useState(false);
-  const [pinned, setPinned] = useState(true);
-  const [outline, setOutline] = useState(false);
-  const [unread, setUnread] = useState(true);
-
-  return (
-    <PageContainer
-      title="Toggle"
-      subtitle="Single pressed/unpressed button · toolbar actions, pinned filters"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled state</CardTitle>
-            <CardDescription>
-              Controlled via pressed/onPressedChange. Suitable for toolbar formatting or filter
-              pins.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md">
-              <Toggle pressed={bold} onPressedChange={setBold} aria-label="太字">
-                太字
-              </Toggle>
-              <Toggle pressed={pinned} onPressedChange={setPinned} aria-label="未払いをピン留め">
-                未払いをピン留め
-              </Toggle>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Variants</CardTitle>
-            <CardDescription>
-              default（押下時だけ面が出る・休止時は透明な 1px 枠）· outline（--background
-              の上の細い枠）· soft（休止時から --secondary で塗られる）。
-              最初の二つはツールバー向けで、休止しているチップは「何もない」ように見える。
-              チップとして並べるときは soft。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" wrap>
-              <Toggle
-                variant="default"
-                pressed={pinned}
-                onPressedChange={setPinned}
-                aria-label="仕訳フィルタ"
-              >
-                仕訳フィルタ
-              </Toggle>
-              <Toggle
-                variant="outline"
-                pressed={outline}
-                onPressedChange={setOutline}
-                aria-label="消費税対象のみ"
-              >
-                消費税対象のみ
-              </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>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Sizes</CardTitle>
-            <CardDescription>
-              xs 24px / sm 28px / md 32px / lg 36px · すべて --control-height
-              の同じ段。行の高さが先に決まっている場所では、その段を選ぶ。xs は 24px
-              の密な行にセグメント状のチップを載せるための段で、Button
-              を並べて自作する代わりになる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" align="center">
-              <Toggle size="xs" aria-label="極小サイズ">
-                極小
-              </Toggle>
-              <Toggle size="sm" aria-label="小サイズ">
-                小
-              </Toggle>
-              <Toggle size="md" aria-label="標準サイズ">
-                標準
-              </Toggle>
-              <Toggle size="lg" aria-label="大サイズ">
-                大
-              </Toggle>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
-            <CardDescription>
-              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
-              のチップがそのまま収まる。同じ段の Button size=&quot;xs&quot;
-              と高さが一致するので、行が段差にならない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Flex direction="row" gap="sm" align="center">
-                <Toggle size="xs" defaultPressed aria-label="未読のみ">
-                  未読のみ
-                </Toggle>
-                <Toggle size="xs" aria-label="添付あり">
-                  添付あり
-                </Toggle>
-                <Button size="xs" variant="outline">
-                  絞り込み
-                </Button>
-              </Flex>
-              <Text as="p" size="xs" tone="muted">
-                いずれも --control-height-xs（24px）。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Count</CardTitle>
-            <CardDescription>
-              count / overflowCount / showZero / countLabel · Button と同じ語彙。押下状態と数字が 1
-              つのコントロールに乗るので、ファセットフィルタチップやリアクションチップが real
-              primitive だけで書ける。数字は Intl.NumberFormat
-              でロケール整形され、アクセシブル名は「未読, 12 件」のように読み上げられる。
-              さらに詳しい実画面は Toggle Count のページを参照。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" align="center" wrap>
-              <Toggle
-                pressed={unread}
-                onPressedChange={setUnread}
-                count={12}
-                countLabel="件"
-                variant="outline"
-              >
-                未読
-              </Toggle>
-              <Toggle count={1240} overflowCount={999} countLabel="件" variant="outline">
-                すべて
-              </Toggle>
-              <Toggle count={0} showZero={false} countLabel="件" variant="outline">
-                下書き
-              </Toggle>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}