diff --git a/.storybook/visual-testing.md b/.storybook/visual-testing.md
index cc291d0..1bf6a54 100644
--- a/.storybook/visual-testing.md
+++ b/.storybook/visual-testing.md
@@ -35,6 +35,9 @@ pnpm test -u     # 基準画像を撮り直す（意図して見た目を変え
 2. **画面が 0.8 倍に縮む。** ストーリーを描く枠（1200×900）が窓（既定 1280×720）に収まらないと、Vitest が枠ごと縮めます。縮むと 1px のずれがふちのぼかしになり、pixelmatch がふちのぼかしを数えないので見のがします。`contextOptions.viewport` を枠より大きく取りました（`browser.viewport` は provider 側で無効化されていて効きません）
 3. **許す幅は割合で持たない。** `allowedMismatchedPixelRatio: 0.002` では、全ボタンの角を 12px から 0px にしても 4 本中 3 本が通りました。`allowedMismatchedPixels: 0` にしています
 4. **基準画像の置き場が Storybook を壊す。** 既定の置き場は `__screenshots__/Button.stories.tsx/` で、この**ディレクトリ名**が `../src/**/*.stories.tsx` に一致し、Storybook の索引作りが EISDIR で落ちて画面が真っ白になります。`screenshotDirectory` は何を渡してもテストファイルの隣に継ぎ足されるので（絶対パスも先頭の `/` が落ちる）、Storybook 側の指定を `**` から `*` に変えて、ディレクトリに降りないようにしました
+5. **`:not(:focus)` で隠す書き方は、pseudo-states で固定すると出てこない。** 「ふだんは隠れ、フォーカスしたときだけ見せる」を `not-focus:sr-only`（`:not(:focus)`）で書くと、`storybook-addon-pseudo-states` が `:not()` の中身を `:not(:focus), :not(.pseudo-focus)` に書き換えます。`.pseudo-focus` クラスを当てても `:not(:focus)` はまだ真のままなので、フォーカスした状態に固定したストーリーでも隠れたままになります。「フォーカスしたときだけ現す」ものは、`focus:` 側に見せる指定を書く形にします（SkipLink）
+6. **Controls で props を切り替えても、pseudo-states は前のクラスを外さない。** `storybook-addon-pseudo-states` が要素に付けた `.pseudo-focus` などのクラスは、Controls で props を変えても残ったままで、状態の見た目が消えません。切り替えるたびに要素を作り直す（切り替える値を `key` にする）と直ります（Accordion の `indicator`・focusRing の切り替え）
+7. **`pnpm test -u` は、パスを渡しても範囲を絞らないことがあります。** ディレクトリのパスだけでは全体の基準画像を撮り直すことがあります。範囲を絞るには、パスの後ろに `--update` を続けて書くか、ファイルを直接指定します（`pnpm vitest run --project=storybook <パス>` も使えます）
 
 ## 撮影の条件（`vitest.config.ts`）
 
diff --git a/README.md b/README.md
index bb4ae29..b399342 100644
--- a/README.md
+++ b/README.md
@@ -19,12 +19,27 @@
 
 ## つくりたいコンポーネント
 
+### 土台
+
+- [x] Icon
+- [x] VisuallyHidden
+- [x] ThemeProvider
+- [x] Collapsible
+- [x] ScrollArea
+- [x] AspectRatio
+- [x] Portal
+- [x] Transition
+
 ### 文字
 
 - [x] Heading
 - [x] Text
 - [x] Code
 - [x] Kbd
+- [x] Mark
+- [ ] Ruby
+- [ ] Highlight
+- [x] NumberFormat
 
 ### 本文
 
@@ -37,13 +52,26 @@
 - [x] Footnote
 - [ ] Steps
 - [ ] FileTree
+- [ ] CodeGroup
+- [ ] Embed
+- [ ] Gallery
+- [ ] ImageZoom
+- [x] Bleed
+- [ ] Spoiler
+- [ ] TypeTable
+- [ ] Mermaid
+- [ ] Math
 
 ### ページの枠
 
-- [ ] Container
+- [x] Container
 - [ ] Navbar
 - [ ] Footer
 - [ ] Sidebar
+- [ ] Stack
+- [x] SkipLink
+- [ ] Affix
+- [ ] Splitter
 
 ### ナビゲーション
 
@@ -54,6 +82,14 @@
 - [ ] Pagination
 - [ ] Menu
 - [ ] Stepper
+- [ ] NavigationMenu
+- [ ] ContextMenu
+- [ ] Toolbar
+- [ ] CommandPalette
+- [ ] BackToTop
+- [ ] Menubar
+- [ ] Tree
+- [ ] Tour
 
 ### 表示
 
@@ -62,17 +98,29 @@
 - [x] List
 - [x] Table
 - [x] Divider
-- [ ] Time
+- [x] Time
+- [x] RelativeTime
 - [ ] Avatar
 - [x] Badge
 - [ ] Chip
 - [ ] Timeline
-- [ ] Accordion
+- [x] Accordion
+- [x] Image
+- [ ] AvatarGroup
+- [ ] DescriptionList
+- [ ] Stat
+- [ ] Meter
+- [ ] Carousel
+- [ ] Indicator
 
 ### 操作
 
 - [x] Button
 - [x] Link
+- [ ] Toggle
+- [ ] ToggleGroup
+- [ ] ButtonGroup
+- [x] CopyButton
 
 ### 入力
 
@@ -80,7 +128,7 @@
 - [x] Select
 - [x] Switch
 - [x] Form
-- [ ] Textarea
+- [x] Textarea
 - [x] Checkbox
 - [x] Radio
 - [ ] Fieldset
@@ -90,6 +138,20 @@
 - [ ] NumberField
 - [ ] DatePicker
 - [ ] Dropzone
+- [ ] SearchField
+- [ ] PasswordField
+- [ ] Autocomplete
+- [ ] PinField
+- [ ] TagsInput
+- [ ] TimePicker
+- [ ] ColorPicker
+- [ ] Rating
+- [ ] Calendar
+- [ ] DateRangePicker
+- [x] CheckboxGroup
+- [ ] MaskInput
+- [ ] Editable
+- [ ] FileInput
 
 ### 通知
 
@@ -97,8 +159,9 @@
 - [x] Loading
 - [ ] Toast
 - [ ] Progress
-- [ ] Skeleton
-- [ ] Empty
+- [x] Skeleton
+- [ ] StatusPanel
+- [ ] LoadingOverlay
 
 ### 重なるもの
 
@@ -106,6 +169,32 @@
 - [x] Drawer
 - [x] Popover
 - [x] Tooltip
+- [x] AlertDialog
+- [ ] PreviewCard
+
+### アプリの画面
+
+Web アプリで使うものです。ポートフォリオのあとに作ります。土台は外のヘッドレス（TanStack Table・TanStack Virtual・dnd-kit）に peer dependency で乗り、ここでは見た目とトークンを持ちます。
+
+- [ ] DataTable
+- [ ] VirtualList
+- [ ] Sortable
+- [ ] Kanban
+- [ ] Popconfirm
+- [ ] ActionBar
+- [ ] Mentions
+- [ ] Cascader
+- [ ] TreeSelect
+- [ ] Transfer
+
+### チャット
+
+- [ ] Composer
+- [ ] MessageList
+- [ ] Bubble
+- [ ] TypingIndicator
+- [ ] Attachment
+- [ ] StreamingText
 
 ## Figma
 
diff --git a/design/adr/0102-overlay-components.md b/design/adr/0102-overlay-components.md
index 558d81b..1508f8c 100644
--- a/design/adr/0102-overlay-components.md
+++ b/design/adr/0102-overlay-components.md
@@ -107,7 +107,7 @@
   - つまみを押しても、Select のシートのように半分と高さいっぱいを切り替えません。はじいたとみなす速さも Base UI の値です
   - Tooltip の長押し（500ms）は実機で確かめていません。iOS の Safari で文字の選択や端末のメニューが出ないか、スクロールの始まりと取り違えないかを見ます
   - 構造を固定する Provider（原則11 の「使う側が固定できる」）は、まだ部品ごとの `presentation` だけです
-  - AlertDialog（外を押しても Esc でも閉じない確かめ）は部品として持たず、`dismissible`・`closeOnEscape`・`closeButton` の組み合わせで作ります
+  - AlertDialog（外を押しても Esc でも閉じない確かめ）は部品として持たず、`dismissible`・`closeOnEscape`・`closeButton` の組み合わせで作ります（2026-09-19: この記述は [ADR-0123](./0123-alert-dialog.md) で覆しました。組み合わせを間違えないことと、読み上げの役割を確実に切り替えるため、AlertDialog を部品として作りました）
 
 ## 原則への反映
 
diff --git a/design/adr/0121-reading-datetime-number.md b/design/adr/0121-reading-datetime-number.md
new file mode 100644
index 0000000..ed16a10
--- /dev/null
+++ b/design/adr/0121-reading-datetime-number.md
@@ -0,0 +1,68 @@
+# 0121. 文字の部品（Mark・Time・RelativeTime・NumberFormat）と、ThemeProvider の言語・タイムゾーンの既定
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半（ループ外）
+
+## 背景
+
+記事の外でも使える、文字まわりの小さな部品を作ります。目立たせたい言葉（Mark）は、これまで Prose が素の HTML の `<mark>` に当てる見た目だけを持ち（[ADR-0091](./0091-mark.md)）、部品としては存在していませんでした。日付・時刻（Time）、「3 日前」のような相対の日時（RelativeTime）、数・通貨・割合・単位（NumberFormat）は、どれも作っていませんでした。
+
+見た目の比較ではなく、書き方（どんな文字列になるか）と、日時の既定の言語・タイムゾーンをどう持つかという設計の判断なので、比較のストーリーは作っていません。
+
+## 候補
+
+比較ではなく、ユーザーへの問いと答えです（ほかの軸とまとめて質問しました）。
+
+| 問い                                   | 答え                                                                     |
+| -------------------------------------- | ------------------------------------------------------------------------ |
+| Time の既定の書き方                    | `YYYY/MM/DD`                                                             |
+| 言語・タイムゾーンの既定と、上書きの口 | 既定は ja-JP・Asia/Tokyo にしつつ、Provider などで上書きできるようにする |
+| 相対の日時は別の部品にするか           | 相対日付のコンポーネントとして作る                                       |
+| 通貨（JPY）の書き方                    | Intl の既定でよい                                                        |
+
+## 決定
+
+- **Mark**: `<mark>` を描く部品にしました。見た目のクラス列は `src/internal/reading/mark.ts` に出し、Prose の `<mark>` と共有します。見た目そのものは [ADR-0091](./0091-mark.md) のままです
+- **Time**: `<time dateTime>` を描き、読む文字は `Intl.DateTimeFormat` で書きます。既定は `YYYY/MM/DD`（ゼロ埋めの年/月/日。ja-JP で「2026/09/18」）です。`withTime` で時刻も付け（ja-JP で「2026/09/18 09:30」、24 時間）、`dateStyle`・`timeStyle`・`format` で Intl の書き方をそのまま渡せます。`YYYY-MM-DD` の文字列は、時刻を持たない暦の日付として扱い、どのタイムゾーンでも同じ日になるよう常に UTC で書きます。それ以外（Date・ISO 8601・ミリ秒）は `timeZone` の時刻で書きます
+- **言語・タイムゾーンの既定**: `ja-JP`・`Asia/Tokyo` に固定します。ブラウザの既定の言語やタイムゾーンには従いません。サーバーで描いた文字と、閲覧者の画面で描き直した文字が食い違わないようにするためです。部品の `locale`・`timeZone` props と、ThemeProvider に足した `locale`・`timeZone` props で上書きできます（部品の props が勝ちます）
+- **RelativeTime**: 「3 日前」「昨日」のように、今からの隔たりで書く別の部品にしました。今の時刻はブラウザでだけ読み、1 分ごとに書き直します。サーバーの HTML と hydration の最初の描画は、今の時刻を持たないので Time と同じふつうの日付にし、あとから相対の文字に描き直します。ふつうの日付は `title` に残します
+- **NumberFormat**: `<data value>` を描き、`Intl.NumberFormat` で書きます。数・通貨・割合・単位（`unit`）を選べ、通貨の書き方（`currencyDisplay`）の既定は `symbol` です（ja-JP の JPY で「￥1,280」）。小数の桁数など、Intl が持つ既定のふるまいはそのまま使い、上書きしません
+- **数字の幅**: 数字をそろえて表示する仕組み（tabular-nums 相当）は作っていません。欧文フォント（Mulish）の数字がもとから等幅で、比べても見た目の差が出なかったためです
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 5: YYYY/MM/DD で
+
+> 6: 言語の既定は ja-JP, Asia/Tokyo にしつつ、Provider などで上書きできますか？
+
+> 7: 相対日付のコンポーネントとして作れますか？
+
+> 8: オッケーです。
+
+- **既定を固定する**: 6 の問いのとおり、既定は ja-JP・Asia/Tokyo に固定し、ThemeProvider から上書きできる形にしました。サーバーで生成する記事と、海外からの閲覧者がいる場面の両方を考えると、ブラウザの既定に任せるより固定するほうが表示が安定します
+- **相対の日時は別部品**: 7 の問いのとおり、Time に相対表示のオプションを足すのではなく、RelativeTime という別の部品にしました。ふつうの日付と相対の日付は、サーバーとブラウザでの描き方（今の時刻を読むかどうか）が大きく違うためです
+- **通貨は Intl の既定のまま**: 8 の返事のとおり、JPY の書き方を @kazuemon/ui 側で決め直すことはしませんでした
+
+## 却下した案と理由
+
+比較ではなく設計の判断なので、却下した案はありません。
+
+## 影響
+
+- `src/components/mark/Mark.tsx`・`src/components/time/Time.tsx`・`src/components/relative-time/RelativeTime.tsx`・`src/components/number-format/NumberFormat.tsx` を足しました
+- `src/internal/reading/mark.ts`: Mark と Prose が共有する見た目のクラス列
+- `src/internal/date/`: `format-date.ts`（日時の解釈と書き方の計算。DOM も React も使いません）・`time-text.ts`（Time・RelativeTime が共有する大きさ・濃さのクラス）・`use-locale.ts`（ThemeProvider の locale・timeZone を読む）・`use-now.ts`（RelativeTime がブラウザでだけ今の時刻を読み、1 分ごとに書き直す）
+- `src/components/theme-provider/ThemeProvider.tsx`: `locale`（既定 `ja-JP`）・`timeZone`（既定 `Asia/Tokyo`）の props を足しました。内側の ThemeProvider が書いた値だけが外側より勝ちます
+- `src/index.ts` に `Mark`・`MarkProps`・`Time`・`TimeProps`・`RelativeTime`・`RelativeTimeProps`・`NumberFormat`・`NumberFormatProps` を足しました
+- backlog に足す未決事項: RelativeTime の「昨日」などの境界は UTC の 0 時で計算するため、端末の体感の「今日」とずれることがある。`Intl.RelativeTimeFormat`・`Intl.NumberFormat` の言い回しは ICU のバージョンでブラウザによって変わることがある。数字の幅をそろえるかは比べていない
+
+## 原則への反映
+
+反映なし。既存の原則の範囲内で、部品を足したものです。
+
+## 比較画像
+
+比較のストーリーを作っていないので、画像はありません。
diff --git a/design/adr/0122-accordion.md b/design/adr/0122-accordion.md
new file mode 100644
index 0000000..ce251d3
--- /dev/null
+++ b/design/adr/0122-accordion.md
@@ -0,0 +1,59 @@
+# 0122. Accordion の既定の見た目と、項目のあいだ・一覧の上下の区切り
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸96
+
+## 背景
+
+押して中身を開閉する項目を束ねた一覧（Accordion）を作ります。行と中身の見た目、開閉の 4 つの `appearance`（`plain`・`open-filled`・`filled`・`divided`）は [ADR-0117](./0117-collapsible.md) の Collapsible のままです。Accordion で決めるのは、既定にする `appearance` と、`divided` のときに項目のあいだだけでなく一覧の上下にも線を引くかどうかです。あわせて、同時にいくつ開けるか（`multiple`）と、題を包む見出しの段（`headingLevel`）の既定も決めます。
+
+## 候補
+
+| 案     | 内容                                                    |
+| ------ | ------------------------------------------------------- |
+| 現行版 | `divided`・項目のあいだと一覧の上下に線を引く。FAQ の形 |
+| A      | `divided`・線は項目のあいだだけ。一覧の上下には引かない |
+| B      | `plain`。線も塗りもなく、hover だけ淡いグレー           |
+| C      | `open-filled`。開いている項目だけグレーで塗る           |
+| D      | `filled`。いつもグレーで塗り、項目のあいだを少し離す    |
+
+## 決定
+
+**A（`divided`・項目のあいだの線だけ）を既定にします。** 一覧の上下には線を引きません。見出しや本文とのあいだに線が増えず、軽く見えるためです。ほかの 3 つの見た目（現行版・B・C・D）も、`appearance` の値としてどれも選べます。あわせて、`multiple` の既定は `false`（1 つ開くとほかは閉じる）にし、`headingLevel`（題を包む見出しの段）の既定は `3` にして、使う側が変えられるようにします。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 96は A デフォルトでお願いします
+
+> 1: 1つのみデフォルト、何個でもも選択可
+
+> 2: h3 既定、変更可
+
+- **既定は A**: 返事のとおり A を既定にしました。一覧の上下の線をなくしたトークン（`--accordion-edge-width` 相当の切り替え）は、決めたので部品に畳んで消し、`first:border-t-0 last:border-b-0` に書き換えました
+- **multiple の既定**: 「1つのみデフォルト、何個でもも選択可」のとおり、既定は 1 つだけ開く形にし、`multiple` で複数開けるようにしました
+- **headingLevel の既定**: 「h3 既定、変更可」のとおり、既定を `h3` にし、ページの見出しの並びに合わせて `headingLevel` で変えられるようにしました
+
+## 却下した案と理由
+
+- **現行版（一覧の上下にも線）**: 既定としては選ばれませんでした。見出しや本文とのあいだに線が増え、A より重く見えます。`appearance="divided"` に一覧の上下の線を足す形自体は廃止し、比較のストーリーでは現行版の行を `className` で線を描き戻して見た目を再現しています
+- **B（plain）・C（open-filled）・D（filled）**: 既定としては選ばれませんでした。どれも `appearance` の値として引き続き選べます
+
+## 影響
+
+- `src/components/accordion/Accordion.tsx`・`AccordionItem`: `appearance`（既定 `divided`）・`indicator`（既定 `end`）・`multiple`（既定 `false`）・`value`・`defaultValue`・`onValueChange`・`disabled`・`hiddenUntilFound`・`keepMounted`・`headingLevel`（既定 `3`）の props を持つ部品にしました。行・印・中身の見た目は Collapsible のクラス列（`src/internal/collapsible-styles.ts`。ADR-0117 で `src/components/collapsible/` から移しました）を共有します
+- 一覧の上下の線を切り替えるためだけのトークンは作らず、`divided` の項目の `first:border-t-0 last:border-b-0` で表しました
+- `src/index.ts` に `Accordion`・`AccordionItem`・`AccordionProps`・`AccordionItemProps`・`AccordionAppearance`・`AccordionIndicator` を足しました
+- backlog に足す未決事項: 入れ子の Accordion（Accordion の中に Accordion）は確かめていません。フォームを送っているあいだ、開閉を止める仕組み（`useFormSubmittingLock` 相当）はまだありません
+
+## 原則への反映
+
+反映なし。見た目そのものは [ADR-0117](./0117-collapsible.md) の範囲内で、既定の選び方だけを決めたものです。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![Accordion の既定の見た目の比較。現行版・A・B・C・D を並べたもの。A に採用の印](./assets/0122-accordion.png)
diff --git a/design/adr/0123-alert-dialog.md b/design/adr/0123-alert-dialog.md
new file mode 100644
index 0000000..727c7d4
--- /dev/null
+++ b/design/adr/0123-alert-dialog.md
@@ -0,0 +1,56 @@
+# 0123. AlertDialog の実行する側の色
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸97
+
+## 背景
+
+取り消せない操作の前に、続けるかを確かめる面（AlertDialog）を作ります。[ADR-0102](./0102-overlay-components.md) では「部品として持たず、`dismissible`・`closeOnEscape`・`closeButton` の組み合わせで作る」としていましたが、組み合わせを間違えないことと、読み上げの役割（`alertdialog`）を確実に切り替えるために、部品として作ることにしました。この ADR では、閉じ方（後ろの画面・Esc・× のどれでも閉じない、下の 2 つのボタンだけで閉じる）は決定済みの前提とし、実行する側のボタン（「削除する」など）の色を決めます。取り消す側（「キャンセル」）はどの案もグレーの枠線で、開いた直後のフォーカスは取り消す側に置きます。
+
+## 候補
+
+| 案     | 内容                                                                  |
+| ------ | --------------------------------------------------------------------- |
+| 現行版 | 実行する側を危険の色で塗る（既定）。`tone="primary"` で主な色も選べる |
+| A      | 実行する側を主な色で塗る（既定）。`tone="danger"` で危険の色も選べる  |
+| B      | 実行する側も枠線にし、どちらのボタンも塗らない                        |
+
+## 決定
+
+**現行版を採用します。** 実行する側のボタンは `tone="danger"`（塗り・危険の色）を既定にし、`tone="primary"`（塗り・主な色）も選べます。消す・外すなど失うものがある操作が多いため、既定を危険の色にしました。ボタンは部品が下に 2 つ描く固定の形（`actionLabel`・`cancelLabel`・`onAction`）で、3 つ以上のボタンが要る確かめは AlertDialog の対象外とし、使う側が別の形（ダイアログではない形）で作ります。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 97: 現行版でお願いします
+
+> 3: 3つ以上はないと思います。その場合はダイアログではない形で
+
+- **既定は危険の色**: 原則6 の「危険は、ピンクと並んでも見分けられるよう…」のとおり、消す・外すなど失うものがある操作の既定に合う色は危険の色でした。原則7（画面で最も進めたい操作は塗り）のとおり、実行する側は塗りにします
+- **主な色も選べる**: 送信・公開のように、失うものはないが取り消せない操作もあるため、`tone="primary"` で主な色も選べるようにしました
+- **ボタンは 2 つ固定**: 「3つ以上はないと思います」との返事のとおり、AlertDialog は実行・取り消しの 2 つのボタンだけを描く形のままにしました。3 つ以上の選択肢が要る確かめは、AlertDialog ではなく Dialog を自分で組む形にします
+
+## 却下した案と理由
+
+- **A（主な色を既定にする）**: 選ばれませんでした。「現行版でお願いします」との返事のとおりです
+- **B（実行する側も枠線にする）**: 選ばれませんでした。塗りのボタンのほうが、画面で最も進めたい操作という原則7 の考え方に合います
+
+## 影響
+
+- `src/components/alert-dialog/AlertDialog.tsx`: `title`・`description`・`children`・`actionLabel`・`cancelLabel`（既定「キャンセル」）・`onAction`・`tone`（`danger`・`primary`、既定 `danger`）・`trigger`・`open`・`defaultOpen`・`onOpenChange`・`presentation`・`actionsLayout`・`container`・`className` の props を持つ部品にしました。`onAction` が Promise を返すと、終わるまで実行する側のボタンを送信中にし、失敗（reject）したときは閉じずに残します
+- Dialog を包み、`dismissible={false}`・`closeOnEscape={false}`・`closeButton={false}` を固定で渡します。開いた直後のフォーカスは取り消す側のボタンに `autoFocus` で置き、うっかり Enter で実行しないようにしています
+- 読み上げの役割を `alertdialog` にするため、`src/internal/overlay/overlay-role-context.ts`（`OverlayRoleContext`）と `src/internal/overlay/popup-role.tsx`（`PopupRole`）を新しく置きました。`PopupRole` は、画面の下から出すシートの面が role を props で受け取らないため、面の中身に置いた見えない要素からいちばん近い `role="dialog"` を探して書き換えるハックです。Dialog 側で `overlay-role-context.ts` を読み、面の役割を配ります
+- `src/index.ts` に `AlertDialog`・`AlertDialogProps`・`AlertDialogTone` を足しました
+- backlog に足す未決事項: `PopupRole` の DOM 書き換えは本筋ではなく、Base UI の `SheetPopup` に role を渡せるようにするのが本来の直し方です
+
+## 原則への反映
+
+反映なし。色の選び方は原則6・7 の範囲内です。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![AlertDialog の実行する側の色の比較。現行版・A・B を、中央に浮かべた形とシートで並べたもの。現行版に採用の印](./assets/0123-alert-dialog.png)
diff --git a/design/adr/0124-textarea.md b/design/adr/0124-textarea.md
new file mode 100644
index 0000000..5f79500
--- /dev/null
+++ b/design/adr/0124-textarea.md
@@ -0,0 +1,82 @@
+# 0124. 複数行の入力欄（Textarea）の高さ・余白と、文字数
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸98
+
+## 背景
+
+複数行のテキスト入力（Textarea）を作ります。見た目・状態・ラベルとキャプションの並びは TextField と同じです（原則8）。決めるのは、入力に合わせて高さをどう伸ばすか、行の高さと上下の余白を TextField とそろえるか、文字数の見せ方の 3 つです。
+
+## 候補（高さ）
+
+| 案     | 内容                                                                       |
+| ------ | -------------------------------------------------------------------------- |
+| 現行版 | 入力に合わせて 3〜8 行で伸びる。右下のつまみなし                           |
+| B      | 1 行から伸びる（空のときは TextField と同じ高さ）。右下のつまみなし        |
+| C      | 3 行の高さから、右下のつまみで利用者が縦に広げる・縮める。自動では伸びない |
+| D      | 3 行の高さで固定。はみ出した分は欄の中でスクロールする                     |
+
+## 候補（行の高さと上下の余白）
+
+| 案     | 内容                                                                                                                  |
+| ------ | --------------------------------------------------------------------------------------------------------------------- |
+| 現行版 | 行の高さは 1 行の入力欄と同じ 24px。上下の余白は、1 行ぶんの高さが TextField と同じ 44px になる値（10px）             |
+| B      | 行の高さを読む文（マウス用の本文）と同じ 28px にする。1 行ぶんの高さは TextField と同じ 44px のまま（上下の余白 8px） |
+| C      | 行の高さは現行版のまま、上下の余白を左右の余白と同じ 16px にする                                                      |
+
+## 決定
+
+**高さは現行版（入力に合わせて 3〜8 行で伸びる）を既定にします。** 右下のつまみ（`resizable`）はあり・なしを選べ、既定はあります。最小・最大の行数は `minRows`（既定 3）・`maxRows`（既定 8）で指定します。上限を超えたときは欄の中でスクロールし、そのつまみは ScrollArea（[ADR-0119](./0119-scroll-area.md)）と同じ見た目にします。右下のつまみで利用者が一度高さを変えたあとは、その高さを優先し、入力に合わせて伸びる動きと `maxRows` の上限は止めます。
+
+**行の高さと上下の余白は現行版（TextField とそろえる）を採用します。** 行の高さは 1 行の入力欄と同じ 24px、上下の余白は 1 行ぶんの高さが TextField と同じ 44px になる値です。
+
+**文字数は、既定では出さず、`showCount` で出せるようにします。** 柔らかい上限（`maxCount`）を新しく作り、超えても入力は止めません（貼り付けたあとで削れるようにするためです）。`maxCount` を超えているあいだは、`showCount` の指定にかかわらず文字数を必ず出し、数字を赤にします。欄の枠線と塗りもエラーの見た目にする（`overCountInvalid`、既定 `true`）か、数字だけを赤くする（`false`）かを選べます。超えたことと、上限内に戻ったことは、どちらも読み上げで知らせます。送信を止めるかどうかは使う側が決め、超えているときに `error` を渡します。打てなくする固定の上限は、ブラウザの `maxLength` のままです。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 98高さ: 現行版デフォルト、つまみありなし選択可デフォルトあり、最小最大行数指定可能、スクロールバーは ScrollArea と同じで。
+
+> 98余白: TextField とそろえる。
+
+> 4: デフォルト非表示、表示も選択可、上限を超えたら強制表示、超えたら数字は赤字で
+
+> 枠はエラーになって欲しいですが、オフにもできるようにしたいです。
+
+> おそらくバリデーションなどをユーザーが準備する可能性が高いので、使う側が error を渡すのがよさそうです。
+
+> 3 もお願いします
+
+- **高さは現行版＋選べる props に**: 返事のとおり、伸びる高さを既定にしつつ、B・C・D で比べた「1 行から」「つまみだけ」「固定」を、`minRows`・`maxRows`・`resizable` の props に置き換えて選べるようにしました。行数を props にしたので、比べていたときの `rows`・`resize` の切り替えは、決めたあとの部品にはありません
+- **余白は現行版のまま**: 「TextField とそろえる」との返事のとおり、B・C は採らず、比べるためのトークン（`--textarea-leading`・`--textarea-padding-y`）は部品に畳んで消しました。比較のストーリーの B・C の行は、いまは現行版と同じ見た目です
+- **文字数の既定は非表示**: 「デフォルト非表示、表示も選択可」との返事のとおり、`showCount` を新設しました。「上限を超えたら強制表示、超えたら数字は赤字で」のとおり、`maxCount` を超えているあいだは `showCount` の値にかかわらず出し、数字を赤にします
+- **枠のエラーは選べる**: 「枠はエラーになって欲しいですが、オフにもできるようにしたい」との返事のとおり、`overCountInvalid`（既定 `true`）で欄の枠線と塗りをエラーの見た目にするかを選べるようにしました。見た目のためだけの `invalid` 状態（エラーの行をともなわない）を `Field` に足しました
+- **送信を止めるのは使う側**: 「バリデーションなどをユーザーが準備する可能性が高いので、使う側が error を渡すのがよさそう」との返事のとおり、Textarea 自体は送信を止めず、超えているときに使う側が `error` を渡す前提にしました
+- **戻ったことも知らせる**: 「3 もお願いします」（超えた・戻ったのどちらも読み上げで知らせる、の返事）のとおり、`maxCount` を超えたときだけでなく、上限内に戻ったときも読み上げの箱（`aria-live="polite"`）で知らせます
+
+## 却下した案と理由
+
+- **B（1 行から伸びる）・C（つまみだけで変える）・D（行数で固定）**: 既定としては選ばれませんでした。どれも `minRows`・`maxRows`・`resizable` の組み合わせで作れます
+- **行の高さ・余白の B（本文と同じ行の高さ）・C（上下も左右と同じ余白）**: 選ばれませんでした。「TextField とそろえる」との返事のとおりです
+
+## 影響
+
+- `src/components/textarea/Textarea.tsx`: `label`・`caption`・`captionPlacement`・`error`・`warning`・`success`・`info`・`minRows`（既定 3）・`maxRows`（既定 8）・`resizable`（既定 `true`）・`maxCount`・`overCountInvalid`（既定 `true`）・`showCount`（既定 `false`）の props を持つ部品にしました
+- textarea は `field-sizing: content` で中身の高さに伸ばし（対応していないブラウザは `src/components/textarea/use-auto-height.ts`）、外側を Base UI の ScrollArea で包んで `minRows`〜`maxRows` の高さにします。つまみの見た目は `src/internal/scroll-area-styles.ts`（ScrollArea から移した tv）を共有します
+- `src/internal/field/Field.tsx`: 見た目だけの `invalid`（行のない、欄だけのエラー状態）を足しました
+- `src/index.ts` に `Textarea`・`TextareaProps`・`TextareaResize` を足しました
+- backlog に足す未決事項: `loading`・`prefix`・`suffix` はまだありません。上限に近づいたことを予告する見た目は作っていません（超えたときだけ知らせます）。文字数は `String.length` で数えるので、絵文字などは実際に見える文字数と違うことがあります。右下のつまみで一度高さを変えたあと、入力に合わせて伸びる動きへ戻す手段がありません。iOS で右下のつまみがどう見える・操作できるかは実機で確認していません。高さの計算（`--textarea-min-height` など）は欄の要素で密度のトークンを読むので、開いたあとに祖先の密度が変わっても再計算されるかは確認していません
+
+## 原則への反映
+
+原則4 の文を書き換えました。「エラーは丸の「!」と赤、警告は三角とオリーブ色です。色だけでなく形でも見分けます。警告は送信を止めないので、欄の見た目は変えません」の直後に、「文字数のように、数そのものが超えたことを示しているときは、エラーの行を出さずに欄だけをエラーの見た目にする形も選べます。行を出すかどうかは使う側が決めます」を足しました。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![Textarea の高さの決め方の比較。現行版・B・C・D を並べたもの。現行版に採用の印](./assets/0124-textarea-height.png)
+
+![Textarea の行の高さと上下の余白の比較。現行版・B・C を並べたもの。現行版に採用の印](./assets/0124-textarea-spacing.png)
diff --git a/design/adr/0125-skip-link.md b/design/adr/0125-skip-link.md
new file mode 100644
index 0000000..6661185
--- /dev/null
+++ b/design/adr/0125-skip-link.md
@@ -0,0 +1,55 @@
+# 0125. 本文へ移るリンク（SkipLink）の出る位置と面
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸99
+
+## 背景
+
+Tab を押したときだけ現れる「本文へ移動」のリンク（SkipLink）を作ります。ページの最初（ヘッダーより前）に置き、本文の要素に同じ id を付けて使います。ふだんは読み上げにだけ届き、キーボードでフォーカスしたときだけ画面に重ねて出ます。出る位置（左上に浮かぶ・上端の帯）と、面（白い面と影・Primary の塗り）を決めます。
+
+## 候補
+
+| 案     | 内容                                                                    |
+| ------ | ----------------------------------------------------------------------- |
+| 現行版 | 左上に浮かぶ。白い面・細い輪郭・浮かぶ面の影。文字は Primary の青と下線 |
+| A      | 左上に浮かぶ。Primary の塗り。文字は白                                  |
+| B      | 上端に幅いっぱいの帯。白い面。フォーカスの線は内側                      |
+| C      | 上端に幅いっぱいの帯。Primary の塗り。文字は白                          |
+
+## 決定
+
+**現行版を採用します。** 左上に浮かぶ形で、面はページの上に重なる別のレイヤーとして、浮かぶ面と同じ白・細い輪郭・やわらかい影にします（原則1）。文字はリンクの Primary の青と淡い下線で、hover で下線だけが濃くなります（原則3）。角は pill です（原則5）。リンクの文言は「本文へ移動」です。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 99: 現行版
+
+> 9: OK
+
+- **現行版を選んだ理由**: 「現行版」との返事のとおりです。SkipLink はページの上に重なる別のレイヤーなので、原則1 の「重なるレイヤー」の見た目（白・細い輪郭・やわらかい影）にそろえ、浮かぶ面（Popover など）と同じ扱いにしました
+- **文言**: 「9: OK」（「本文へ移動」の文言の確認）のとおり、既定の文言を「本文へ移動」にしました
+
+## 却下した案と理由
+
+- **A（左上に浮かぶ・Primary の塗り）**: 選ばれませんでした。白い地の上では、Primary の塗りにしなくても現行版で十分目立ちます
+- **B（上端の帯・白い面）・C（上端の帯・Primary の塗り）**: 選ばれませんでした。上端いっぱいの帯は、ヘッダーに重なって見えづらくなる懸念がありました
+
+## 影響
+
+- `src/components/skip-link/SkipLink.tsx`: `href`（既定 `#main`）・`children`（既定「本文へ移動」）・`render` の props を持つ部品にしました
+- ふだんは `sr-only`（VisuallyHidden と同じ隠し方）にし、`focus:` で位置・面・文字を上書きして画面に重ねます。`:not(:focus)` の形にしていないのは、`storybook-addon-pseudo-states` が `:not()` の中を書き換えてしまい、フォーカスしても隠れたままになるためです（[`.storybook/visual-testing.md`](../../.storybook/visual-testing.md) に追記しました）
+- 位置・角・面の色は `--skip-link-*`（`design/tokens.css`）に出しました
+- `src/index.ts` に `SkipLink`・`SkipLinkProps` を足しました
+
+## 原則への反映
+
+原則1 の文を書き換えました。「別のレイヤーは、ページの上に重なっています。選択肢、ボトムシート、画面の横から出すパネル、メニュー、ダイアログ、押して開く吹き出し、マウスを載せて出る補足です。」を、「別のレイヤーは、ページの上に重なっています。選択肢、ボトムシート、画面の横から出すパネル、メニュー、ダイアログ、押して開く吹き出し、マウスを載せて出る補足、キーボードで操作したときだけ現れる本文へ移るリンクです。」に書き換えました。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![SkipLink の出る位置と面の比較。現行版・A・B・C を、デスクトップとスマートフォンで並べたもの。現行版に採用の印](./assets/0125-skip-link.png)
diff --git a/design/adr/0126-bleed.md b/design/adr/0126-bleed.md
new file mode 100644
index 0000000..2304472
--- /dev/null
+++ b/design/adr/0126-bleed.md
@@ -0,0 +1,48 @@
+# 0126. 本文の幅の外へ出す枠（Bleed）の広げ方
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半（ループ外）
+
+## 背景
+
+画像やコードを、本文の幅（Container の中身の幅）の外、Container の左右の余白まで広げる枠（Bleed）を作ります。[ADR-0120](./0120-container.md) で backlog に残していたものです。見た目の比較ではなく、どこまで広げるかという 1 つの分かれ目だけの判断なので、比較のストーリーは作っていません。
+
+## 候補
+
+比較ではなく、ユーザーへの問いと答えです。
+
+| 問い                     | 答え               |
+| ------------------------ | ------------------ |
+| どこまで広げるか（既定） | 左右の余白いっぱい |
+
+## 決定
+
+**既定は、Container の左右の余白いっぱいまで、左右に同じだけ広げます。** Container が画面いっぱいのとき（スマートフォンなど）は、画面の端まで広がります。Container が幅の上限で止まっているとき（広い画面）は、実際の余白ではなく本文の幅の 1/18 だけ広げます（`--container-gutter-size` が置いた場所の幅の 5% なので、本文の幅はその 90%、余白は本文の幅の 1/18 にあたります）。見た目（色・線・角）は持たず、中の画像やコードの見た目はそのままです。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 10: 余白いっぱいでOKです。
+
+- **余白いっぱいを既定に**: 返事のとおり、Container の余白と同じだけ広げる形にしました。Container の `--container-gutter` は `%` を含み、読む要素（Bleed の親）の幅を基準に解決されるため、本文の中（Prose の中など）でそのまま使うと Container の余白と合いません。代わりに、本文の幅（Bleed の親の幅）から余白を逆算する値（`--bleed-gutter`）にしました
+
+## 却下した案と理由
+
+比較ではなく設計の判断なので、却下した案はありません。
+
+## 影響
+
+- `src/components/bleed/Bleed.tsx`: `render` の props を持つ、見た目を持たない部品にしました。Container の直下、Prose の直下など、本文の幅いっぱいの要素の直下に置く前提です
+- `design/tokens.css`: `--bleed-gutter`（`clamp(16px, 100%/18, 48px)`）を足しました
+- `src/index.ts` に `Bleed`・`BleedProps` を足しました
+- backlog の「土台の部品」から、Bleed が未着手であることの記述を消しました
+
+## 原則への反映
+
+反映なし。ページを囲む左右の余白の決め方は [ADR-0120](./0120-container.md) で原則11 に反映済みで、Bleed はその余白を画像やコードのために逆に使う仕組みです。
+
+## 比較画像
+
+比較のストーリーを作っていないので、画像はありません。
diff --git a/design/adr/0127-icon-only-button-shape.md b/design/adr/0127-icon-only-button-shape.md
new file mode 100644
index 0000000..8952e5a
--- /dev/null
+++ b/design/adr/0127-icon-only-button-shape.md
@@ -0,0 +1,50 @@
+# 0127. アイコンだけのボタンの形
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸101
+
+## 背景
+
+Button に、アイコンだけのボタンの形（`iconOnly`）を足します（[ADR-0114](./0114-icon.md) の backlog にあった未着手項目です）。大きさは部品の高さの正方形で、押せる範囲は見た目の範囲のままです（原則7・11）。決めるのは角の形だけです。
+
+## 候補
+
+| 案     | 内容                                                            |
+| ------ | --------------------------------------------------------------- |
+| 現行版 | 角丸の四角。文字のボタンと同じ部品の角（お知らせの × と同じ形） |
+| A      | 丸。小物（pill）の仲間                                          |
+
+## 決定
+
+**現行版（部品の角の正方形）を既定にし、A（丸）も `shape="round"` で選べるようにします。** 文字が加わったとき（CopyButton の「コピーしました」など）は、現行版は同じ角のまま横に伸び、A は pill（両端が丸い）に伸びます。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 101: 現行版デフォルト、丸も選択可
+
+- **既定は部品の角**: 返事のとおり、文字のボタンと同じ角を既定にしました。文字のボタンと並べたときに角がそろいます
+- **丸も選べる**: 返事のとおり、小物（pill）の仲間として見分けたい場面のために、`shape="round"` を選べるようにしました
+
+## 却下した案と理由
+
+この軸には、却下した見た目はありません。現行版・A のどちらも `shape` の値として選べます。
+
+## 影響
+
+- `src/components/button/Button.tsx`: `iconOnly`（既定 `false`）・`shape`（`square`・`round`、既定 `square`。`iconOnly` のときだけ選べます）の props を足しました。比べていたときのトークン（`--button-icon-only-radius`）は、決めたので部品に畳んで消しました
+- `src/index.ts` に `ButtonShape` を足しました
+- CopyButton（[ADR-0128](./0128-copy-button.md)）にも `shape` を通しています
+- backlog に足す未決事項: 枠線のアイコンだけのリンク（Link）の形は、この軸では変えていません。`shape` と合わせるかは決めていません
+
+## 原則への反映
+
+原則5 の文を書き換えました。「ボタン、入力欄、お知らせは同じ角です。お知らせは部品なので、カードの角にはしません」の直後に、「アイコンだけのボタンは部品の角が既定です。小物のように丸も選べます」を足しました。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![アイコンだけのボタンの形の比較。現行版・A を、枠線・塗り・文字のボタンと並べたとき・CopyButton・お知らせの × と並べたときで並べたもの。現行版に採用の印](./assets/0127-icon-only-button.png)
diff --git a/design/adr/0128-copy-button.md b/design/adr/0128-copy-button.md
new file mode 100644
index 0000000..0c6b9b3
--- /dev/null
+++ b/design/adr/0128-copy-button.md
@@ -0,0 +1,56 @@
+# 0128. CopyButton で写せたことをどう見せるか
+
+- ステータス: Accepted
+- 日付: 2026-09-19
+- ラウンド: 後半 軸102
+
+## 背景
+
+文字列をクリップボードに写すボタン（CopyButton）を作ります。見た目は Button で、コピーできたことの見せ方は CodeBlock のコピーのボタン（[ADR-0092](./0092-code-block-frame.md)）に倣い、印がチェックに変わって読み上げでも知らせます。決めるのは、目に見える「コピーしました」の文をどこに出すかです。
+
+## 候補
+
+| 案     | 内容                                                                                                           |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 現行版 | 文字も出す（CodeBlock と同じ）。「コピー」が「コピーしました」に変わり、文字の分だけボタンが横に伸びる         |
+| A      | 印だけ変える。文字は「コピー」のまま、幅は変わらない                                                           |
+| B      | Tooltip で出す。印はチェックに変わり、ボタンのそばに吹き出しで「コピーしました」を出す。ボタンの幅は変わらない |
+
+## 決定
+
+**B（Tooltip で出す）を既定にし、現行版（文字も出す）も `feedback="label"` で選べるようにします。A（印だけ変える）は採りません。** どちらの案も、印はチェックに変わり、読み上げでは「コピーしました」を知らせます。アイコンだけのボタンの Tooltip では、マウスを載せたとき・キーボードでフォーカスしたときにも名前（「コピー」）を出します。CopyButton の見た目の既定は、グレーの枠線（`appearance="outline"`）です。
+
+## 理由
+
+ユーザーの返事の原文です。
+
+> 102: Bデフォルト、現行版も選択可
+
+> 11: OK
+
+- **既定は Tooltip**: 返事のとおり B を既定にしました。ボタンの幅が変わらないので、右に並ぶものを押し出しません
+- **現行版も選べる**: 返事のとおり、確かに伝わる形として `feedback="label"` を残しました
+- **A は不採用**: 「Bデフォルト、現行版も選択可」に A は含まれておらず、印だけの変化はいちばん見落としやすい案でした。部品の props からは外し、比較のストーリーでは Button と共有の印を使って再現しています
+- **既定の見た目**: 「11: OK」（CopyButton の既定の見た目の確認）のとおり、グレーの枠線を既定にしました
+
+## 却下した案と理由
+
+- **A（印だけ変える）**: 選ばれませんでした。いちばん静かで見落としやすく、`feedback` の値としても残していません
+
+## 影響
+
+- `src/components/copy-button/CopyButton.tsx`: `text`・`label`（既定「コピー」）・`copiedLabel`（既定「コピーしました」）・`iconOnly`（既定 `false`）・`shape`（[ADR-0127](./0127-icon-only-button-shape.md)）・`feedback`（`tooltip`・`label`、既定 `tooltip`）・`appearance`（既定 `outline`）・`onCopied`・`onCopyError` の props を持つ部品にしました
+- 印と読み上げの箱（`CopiedStatus`・`CopyGlyph`）は `src/internal/copy/copy-parts.tsx` に、コピーの処理（`use-copy.ts`）は CodeBlock から `src/internal/copy/` へ移し、CodeBlock と共有しました
+- 押すと写せたあいだ（2 秒）だけ、コピーしたあとの見た目になります。写せなかったとき（権限がない・安全でない接続）は見た目を変えず、`onCopyError` で使う側が知らせる前提です
+- `src/index.ts` に `CopyButton`・`CopyButtonProps`・`CopyButtonFeedback` を足しました
+- backlog に足す未決事項: 写せなかったときの見た目は作っていません。Tooltip を長押しで出したあと、指を離さずに動かしたときの見え方は、[ADR-0102](./0102-overlay-components.md) の backlog と同じく実機で確かめていません
+
+## 原則への反映
+
+反映なし。既定の見た目（グレーの枠線）は原則7 の範囲内で、コピーの見せ方に新しい色や形は持ち込んでいません。
+
+## 比較画像
+
+比較のストーリーは、決めた時点のコミット `2f37f7f` にあります（`git checkout 2f37f7f && pnpm storybook`）。
+
+![CopyButton の見せ方の比較。現行版・A・B を、文字のボタン・アイコンだけ・コマンドの横・押してみるで並べたもの。B に採用の印](./assets/0128-copy-button.png)
diff --git a/design/adr/README.md b/design/adr/README.md
index 7288d6d..fb038f4 100644
--- a/design/adr/README.md
+++ b/design/adr/README.md
@@ -66,125 +66,133 @@
 
 ## 一覧
 
-| 番号                                                     | タイトル                                                               | ステータス         |
-| -------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------ |
-| [0001](./0001-judgement-criteria.md)                     | 判断の基準                                                             | Accepted           |
-| [0002](./0002-contrast-and-foreground-tokens.md)         | コントラスト基準と面用／前景用の2段                                    | Accepted           |
-| [0003](./0003-token-layers.md)                           | トークンを値の層と役割の層に分ける                                     | Accepted           |
-| [0004](./0004-density-and-structure-switching.md)        | 密度は入力方式、構造は画面幅で切り替える                               | Accepted           |
-| [0005](./0005-neutral-and-background.md)                 | 中立色と地                                                             | Accepted           |
-| [0006](./0006-button-shadow.md)                          | ボタンの影                                                             | Accepted           |
-| [0007](./0007-tag-color.md)                              | タグの色                                                               | Accepted           |
-| [0008](./0008-control-radius.md)                         | ボタンと入力欄の角丸                                                   | Accepted           |
-| [0009](./0009-press-motion.md)                           | 押下の動き                                                             | Accepted           |
-| [0010](./0010-section-label.md)                          | セクションラベルの書式                                                 | Accepted           |
-| [0011](./0011-switch-off-track.md)                       | スイッチ OFF のトラック                                                | Accepted           |
-| [0012](./0012-primary-blue.md)                           | Primary の青                                                           | Accepted           |
-| [0013](./0013-secondary-color.md)                        | ピンクは用途を限定しない Secondary                                     | Accepted           |
-| [0014](./0014-nested-card-inset.md)                      | 入れ子の型のカードの余白                                               | Accepted           |
-| [0015](./0015-icon-weight.md)                            | アイコンの太さ                                                         | Superseded by 0018 |
-| [0016](./0016-card-radius.md)                            | カードの角丸                                                           | Accepted           |
-| [0017](./0017-card-media-aspect.md)                      | カードの画像の比率                                                     | Accepted           |
-| [0018](./0018-icon-weight-by-context.md)                 | アイコンの太さを文脈で分ける                                           | Accepted           |
-| [0019](./0019-field-focus-change.md)                     | 入力欄のフォーカス時の変化量                                           | Accepted           |
-| [0020](./0020-control-size-fine.md)                      | マウス用の寸法                                                         | Superseded by 0079 |
-| [0021](./0021-field-error-fill.md)                       | エラー時の入力欄の塗り                                                 | Accepted           |
-| [0022](./0022-field-hover.md)                            | 入力欄の hover                                                         | Accepted           |
-| [0023](./0023-danger-color.md)                           | Danger と Secondary の区別                                             | Accepted           |
-| [0024](./0024-neutral-button.md)                         | グレーのボタンの塗り                                                   | Accepted           |
-| [0025](./0025-surface-button-line.md)                    | 白いボタンの輪郭                                                       | Accepted           |
-| [0026](./0026-disabled.md)                               | Disabled の表し方                                                      | Accepted           |
-| [0027](./0027-flat-press.md)                             | 平らなボタン・リンクの hover と押下                                    | Accepted           |
-| [0028](./0028-default-color.md)                          | 各部品の既定の色                                                       | Accepted           |
-| [0029](./0029-disabled-refine.md)                        | Disabled の詰め（トグルとグレーの枠線のボタン）                        | Accepted           |
-| [0030](./0030-text-link.md)                              | 文字のリンクの下線と hover                                             | Accepted           |
-| [0031](./0031-focus-visible.md)                          | キーボード操作時のフォーカス                                           | Accepted           |
-| [0032](./0032-text-offset.md)                            | 和文の縦位置の補正                                                     | Accepted           |
-| [0033](./0033-press-edge.md)                             | 塗りのボタンを押したときの縁                                           | Accepted           |
-| [0034](./0034-loading.md)                                | ボタンの送信中（loading）                                              | Accepted           |
-| [0035](./0035-field-addon.md)                            | 入力欄の prefix・suffix                                                | Accepted           |
-| [0036](./0036-select-popup.md)                           | Select の浮かぶ選択肢の見た目                                          | Accepted           |
-| [0037](./0037-select-sheet.md)                           | Select のボトムシートと、長い選択肢の見せ方                            | Accepted           |
-| [0038](./0038-warning.md)                                | Warning の扱い                                                         | Accepted           |
-| [0039](./0039-link-size.md)                              | リンクの大きさ                                                         | Accepted           |
-| [0040](./0040-field-addon-rest.md)                       | prefix・suffix の残り（ボタンのフォーカスと、文字の読み上げ）          | Accepted           |
-| [0041](./0041-caption-and-message.md)                    | ヘルプテキストとエラー・警告を同時に出す                               | Accepted           |
-| [0042](./0042-field-loading.md)                          | 入力欄と Select の待っているあいだ（loading）と、動きを減らす設定      | Accepted           |
-| [0043](./0043-notice.md)                                 | お知らせと状態の色                                                     | Accepted           |
-| [0044](./0044-message-announce.md)                       | エラー・警告の知らせ方（読み上げ、下の内容の動き、シートと選択肢の文） | Accepted           |
-| [0045](./0045-coarse-size.md)                            | 指用の高さ                                                             | Accepted           |
-| [0046](./0046-link-rest.md)                              | リンクの残り（幅いっぱいの枠線のリンクと、ボタンの見た目のリンク）     | Accepted           |
-| [0047](./0047-principles-probe.md)                       | 原則の読まれ方の検証と、一覧の項目・チェックボックスの決まり           | Accepted           |
-| [0048](./0048-hit-area.md)                               | 押せる範囲は見た目の範囲と一致させる                                   | Accepted           |
-| [0049](./0049-toggle-layout.md)                          | トグルの並びと置き場所                                                 | Accepted           |
-| [0050](./0050-notice-close.md)                           | お知らせの閉じるボタンの形                                             | Accepted           |
-| [0051](./0051-prop-names.md)                             | 色と送信中の印の props の名前                                          | Accepted           |
-| [0052](./0052-button-caption.md)                         | ボタンのキャプション                                                   | Accepted           |
-| [0053](./0053-select-selected-item.md)                   | Select の選んだ項目の見た目                                            | Accepted           |
-| [0054](./0054-select-popup-motion.md)                    | 浮かぶ選択肢の開閉の動き                                               | Accepted           |
-| [0055](./0055-sheet-loading-row.md)                      | ボトムシートの読み込み中の行と、読み込みの読み上げ                     | Accepted           |
-| [0056](./0056-link-lead-icon.md)                         | 幅いっぱいの枠線のリンクの前のアイコン                                 | Accepted           |
-| [0057](./0057-notice-warning-filled.md)                  | 黄色の塗りのお知らせ                                                   | Accepted           |
-| [0058](./0058-field-success.md)                          | 入力欄の下の成功・情報の行                                             | Accepted           |
-| [0059](./0059-form-submitting.md)                        | フォーム全体を送っているあいだ                                         | Accepted           |
-| [0060](./0060-server-error-focus.md)                     | 送信のあとのサーバーのエラーとフォーカス                               | Accepted           |
-| [0061](./0061-badge.md)                                  | Badge（数と小さな状態の点）                                            | Accepted           |
-| [0062](./0062-checkbox-radio.md)                         | チェックボックスとラジオ                                               | Accepted           |
-| [0063](./0063-choice-press.md)                           | チェックボックス・ラジオを押したときの動き                             | Accepted           |
-| [0064](./0064-choice-group-frame.md)                     | 「すべて選ぶ」のグループの枠                                           | Accepted           |
-| [0065](./0065-switch-coarse-size.md)                     | 指用と大きい指用のトグルの大きさ                                       | Accepted           |
-| [0066](./0066-switch-row-frame.md)                       | トグルの行の形と押せる範囲                                             | Accepted           |
-| [0067](./0067-switch-row-press.md)                       | トグルの行を押したときの塗りと、OFF・箱の色                            | Accepted           |
-| [0068](./0068-switch-caption.md)                         | トグルとキャプションの置き方                                           | Accepted           |
-| [0069](./0069-switch-disabled-knob.md)                   | 押せない OFF のノブ                                                    | Accepted           |
-| [0070](./0070-choice-error-box.md)                       | チェックボックス・ラジオのエラーの箱                                   | Accepted           |
-| [0071](./0071-focus-color.md)                            | フォーカスの色と部品の色                                               | Accepted           |
-| [0072](./0072-disabled-over-error.md)                    | エラーかつ押せないときは、押せない見た目を優先する                     | Accepted           |
-| [0073](./0073-link-or-button.md)                         | リンクの作り分け（移動は Link、実行は Button）と押せないリンク         | Accepted           |
-| [0074](./0074-a11y-review-deferred.md)                   | 2026-09-14 の a11y レビューのうち、据え置き・backlog にしたもの        | Accepted           |
-| [0075](./0075-notice-region.md)                          | あとから出すお知らせの領域と、閉じるボタンの名前                       | Accepted           |
-| [0076](./0076-token-structure.md)                        | トークンを尺度・役割・部品に分け、Tailwind の名前空間で公開する        | Accepted           |
-| [0077](./0077-tailwind-merge-config.md)                  | tailwind-merge にライブラリのクラスの名前を知らせる                    | Accepted           |
-| [0078](./0078-reading-type.md)                           | 読む文字の大きさ                                                       | Accepted           |
-| [0079](./0079-control-type-and-height.md)                | 部品の文字と高さ・余白（入力方式で文字だけを変える）                   | Accepted           |
-| [0080](./0080-icon-size.md)                              | アイコンの大きさ                                                       | Accepted           |
-| [0081](./0081-inline-code.md)                            | 文中のコード                                                           | Accepted           |
-| [0082](./0082-kbd.md)                                    | キー                                                                   | Accepted           |
-| [0083](./0083-blockquote.md)                             | 引用                                                                   | Accepted           |
-| [0084](./0084-callout.md)                                | 記事の中の囲みと、Callout・Notice の分け方                             | Accepted           |
-| [0085](./0085-inline-emphasis.md)                        | 文字の飾り（strong・em・del・mark）                                    | Accepted           |
-| [0086](./0086-divider.md)                                | 区切り線                                                               | Accepted           |
-| [0087](./0087-figure.md)                                 | 画像                                                                   | Accepted           |
-| [0088](./0088-list.md)                                   | リスト                                                                 | Accepted           |
-| [0089](./0089-footnote.md)                               | 脚注                                                                   | Accepted           |
-| [0090](./0090-table.md)                                  | 表                                                                     | Accepted           |
-| [0091](./0091-mark.md)                                   | 目立たせたい言葉（mark）                                               | Accepted           |
-| [0092](./0092-code-block-frame.md)                       | コードの外枠と題                                                       | Accepted           |
-| [0093](./0093-code-block-line-decoration.md)             | コードの行の飾り                                                       | Accepted           |
-| [0094](./0094-code-block-syntax-palette.md)              | 色分けの色とコードの色のパレット                                       | Accepted           |
-| [0095](./0095-code-block-line-numbers.md)                | 行番号の濃さ                                                           | Accepted           |
-| [0096](./0096-prose.md)                                  | Prose の作り                                                           | Accepted           |
-| [0097](./0097-prose-spacing.md)                          | Prose の余白                                                           | Accepted           |
-| [0098](./0098-link-size-outside-prose.md)                | 本文の外の文字のリンクの大きさ                                         | Accepted           |
-| [0099](./0099-reading-round-deferred.md)                 | 後半ラウンド（本文の部品）で据え置きにしたこと                         | Accepted           |
-| [0100](./0100-prose-after-heading.md)                    | Prose の見出しのすぐ後ろの余白                                         | Accepted           |
-| [0101](./0101-choice-message-gap.md)                     | 選択肢とエラーの行のあいだ                                             | Accepted           |
-| [0102](./0102-overlay-components.md)                     | 重なる面の作り（Dialog・Drawer・Popover・Tooltip）                     | Accepted           |
-| [0103](./0103-overlay-title.md)                          | 重なる面の題と説明の大きさ                                             | Accepted           |
-| [0104](./0104-dialog-shape.md)                           | Dialog の角と大きさ                                                    | Accepted           |
-| [0105](./0105-overlay-actions.md)                        | 重なる面の下の操作の並べ方                                             | Accepted           |
-| [0106](./0106-tooltip-surface.md)                        | Tooltip の面と、出るまでの時間                                         | Accepted           |
-| [0107](./0107-popover-close-arrow.md)                    | Popover の × と矢印                                                    | Accepted           |
-| [0108](./0108-drawer-side.md)                            | 横から出す Drawer の幅と影                                             | Accepted           |
-| [0109](./0109-overlay-initial-focus.md)                  | 重なる面を開いた直後のフォーカス                                       | Accepted           |
-| [0110](./0110-sheet-handle-and-long-press-side.md)       | シートのつまみは引ける印、Tooltip は長押しで上に出す                   | Accepted           |
-| [0111](./0111-sheet-swipe-lock-and-close-fixes.md)       | シートの引く操作を止める仕組みと、閉じるときの影・× の場所             | Accepted           |
-| [0112](./0112-fill-transition-by-registered-property.md) | 塗りの移り変わりは、登録した変数で動かす                               | Accepted           |
-| [0113](./0113-foundation-components.md)                  | 土台の部品（ThemeProvider・Portal・VisuallyHidden・AspectRatio）       | Accepted           |
-| [0114](./0114-icon.md)                                   | Icon の大きさと線の太さ                                                | Accepted           |
-| [0115](./0115-skeleton.md)                               | 読み込み中の面（Skeleton）                                             | Accepted           |
-| [0116](./0116-image.md)                                  | 画像の読み込み中と失敗（Image）                                        | Accepted           |
-| [0117](./0117-collapsible.md)                            | 開閉（Collapsible）の見た目                                            | Accepted           |
-| [0118](./0118-transition.md)                             | 出入りの動き（Transition）                                             | Accepted           |
-| [0119](./0119-scroll-area.md)                            | スクロールする枠（ScrollArea）                                         | Accepted           |
-| [0120](./0120-container.md)                              | ページの幅と左右の余白（Container）                                    | Accepted           |
+| 番号                                                     | タイトル                                                                 | ステータス         |
+| -------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------ |
+| [0001](./0001-judgement-criteria.md)                     | 判断の基準                                                               | Accepted           |
+| [0002](./0002-contrast-and-foreground-tokens.md)         | コントラスト基準と面用／前景用の2段                                      | Accepted           |
+| [0003](./0003-token-layers.md)                           | トークンを値の層と役割の層に分ける                                       | Accepted           |
+| [0004](./0004-density-and-structure-switching.md)        | 密度は入力方式、構造は画面幅で切り替える                                 | Accepted           |
+| [0005](./0005-neutral-and-background.md)                 | 中立色と地                                                               | Accepted           |
+| [0006](./0006-button-shadow.md)                          | ボタンの影                                                               | Accepted           |
+| [0007](./0007-tag-color.md)                              | タグの色                                                                 | Accepted           |
+| [0008](./0008-control-radius.md)                         | ボタンと入力欄の角丸                                                     | Accepted           |
+| [0009](./0009-press-motion.md)                           | 押下の動き                                                               | Accepted           |
+| [0010](./0010-section-label.md)                          | セクションラベルの書式                                                   | Accepted           |
+| [0011](./0011-switch-off-track.md)                       | スイッチ OFF のトラック                                                  | Accepted           |
+| [0012](./0012-primary-blue.md)                           | Primary の青                                                             | Accepted           |
+| [0013](./0013-secondary-color.md)                        | ピンクは用途を限定しない Secondary                                       | Accepted           |
+| [0014](./0014-nested-card-inset.md)                      | 入れ子の型のカードの余白                                                 | Accepted           |
+| [0015](./0015-icon-weight.md)                            | アイコンの太さ                                                           | Superseded by 0018 |
+| [0016](./0016-card-radius.md)                            | カードの角丸                                                             | Accepted           |
+| [0017](./0017-card-media-aspect.md)                      | カードの画像の比率                                                       | Accepted           |
+| [0018](./0018-icon-weight-by-context.md)                 | アイコンの太さを文脈で分ける                                             | Accepted           |
+| [0019](./0019-field-focus-change.md)                     | 入力欄のフォーカス時の変化量                                             | Accepted           |
+| [0020](./0020-control-size-fine.md)                      | マウス用の寸法                                                           | Superseded by 0079 |
+| [0021](./0021-field-error-fill.md)                       | エラー時の入力欄の塗り                                                   | Accepted           |
+| [0022](./0022-field-hover.md)                            | 入力欄の hover                                                           | Accepted           |
+| [0023](./0023-danger-color.md)                           | Danger と Secondary の区別                                               | Accepted           |
+| [0024](./0024-neutral-button.md)                         | グレーのボタンの塗り                                                     | Accepted           |
+| [0025](./0025-surface-button-line.md)                    | 白いボタンの輪郭                                                         | Accepted           |
+| [0026](./0026-disabled.md)                               | Disabled の表し方                                                        | Accepted           |
+| [0027](./0027-flat-press.md)                             | 平らなボタン・リンクの hover と押下                                      | Accepted           |
+| [0028](./0028-default-color.md)                          | 各部品の既定の色                                                         | Accepted           |
+| [0029](./0029-disabled-refine.md)                        | Disabled の詰め（トグルとグレーの枠線のボタン）                          | Accepted           |
+| [0030](./0030-text-link.md)                              | 文字のリンクの下線と hover                                               | Accepted           |
+| [0031](./0031-focus-visible.md)                          | キーボード操作時のフォーカス                                             | Accepted           |
+| [0032](./0032-text-offset.md)                            | 和文の縦位置の補正                                                       | Accepted           |
+| [0033](./0033-press-edge.md)                             | 塗りのボタンを押したときの縁                                             | Accepted           |
+| [0034](./0034-loading.md)                                | ボタンの送信中（loading）                                                | Accepted           |
+| [0035](./0035-field-addon.md)                            | 入力欄の prefix・suffix                                                  | Accepted           |
+| [0036](./0036-select-popup.md)                           | Select の浮かぶ選択肢の見た目                                            | Accepted           |
+| [0037](./0037-select-sheet.md)                           | Select のボトムシートと、長い選択肢の見せ方                              | Accepted           |
+| [0038](./0038-warning.md)                                | Warning の扱い                                                           | Accepted           |
+| [0039](./0039-link-size.md)                              | リンクの大きさ                                                           | Accepted           |
+| [0040](./0040-field-addon-rest.md)                       | prefix・suffix の残り（ボタンのフォーカスと、文字の読み上げ）            | Accepted           |
+| [0041](./0041-caption-and-message.md)                    | ヘルプテキストとエラー・警告を同時に出す                                 | Accepted           |
+| [0042](./0042-field-loading.md)                          | 入力欄と Select の待っているあいだ（loading）と、動きを減らす設定        | Accepted           |
+| [0043](./0043-notice.md)                                 | お知らせと状態の色                                                       | Accepted           |
+| [0044](./0044-message-announce.md)                       | エラー・警告の知らせ方（読み上げ、下の内容の動き、シートと選択肢の文）   | Accepted           |
+| [0045](./0045-coarse-size.md)                            | 指用の高さ                                                               | Accepted           |
+| [0046](./0046-link-rest.md)                              | リンクの残り（幅いっぱいの枠線のリンクと、ボタンの見た目のリンク）       | Accepted           |
+| [0047](./0047-principles-probe.md)                       | 原則の読まれ方の検証と、一覧の項目・チェックボックスの決まり             | Accepted           |
+| [0048](./0048-hit-area.md)                               | 押せる範囲は見た目の範囲と一致させる                                     | Accepted           |
+| [0049](./0049-toggle-layout.md)                          | トグルの並びと置き場所                                                   | Accepted           |
+| [0050](./0050-notice-close.md)                           | お知らせの閉じるボタンの形                                               | Accepted           |
+| [0051](./0051-prop-names.md)                             | 色と送信中の印の props の名前                                            | Accepted           |
+| [0052](./0052-button-caption.md)                         | ボタンのキャプション                                                     | Accepted           |
+| [0053](./0053-select-selected-item.md)                   | Select の選んだ項目の見た目                                              | Accepted           |
+| [0054](./0054-select-popup-motion.md)                    | 浮かぶ選択肢の開閉の動き                                                 | Accepted           |
+| [0055](./0055-sheet-loading-row.md)                      | ボトムシートの読み込み中の行と、読み込みの読み上げ                       | Accepted           |
+| [0056](./0056-link-lead-icon.md)                         | 幅いっぱいの枠線のリンクの前のアイコン                                   | Accepted           |
+| [0057](./0057-notice-warning-filled.md)                  | 黄色の塗りのお知らせ                                                     | Accepted           |
+| [0058](./0058-field-success.md)                          | 入力欄の下の成功・情報の行                                               | Accepted           |
+| [0059](./0059-form-submitting.md)                        | フォーム全体を送っているあいだ                                           | Accepted           |
+| [0060](./0060-server-error-focus.md)                     | 送信のあとのサーバーのエラーとフォーカス                                 | Accepted           |
+| [0061](./0061-badge.md)                                  | Badge（数と小さな状態の点）                                              | Accepted           |
+| [0062](./0062-checkbox-radio.md)                         | チェックボックスとラジオ                                                 | Accepted           |
+| [0063](./0063-choice-press.md)                           | チェックボックス・ラジオを押したときの動き                               | Accepted           |
+| [0064](./0064-choice-group-frame.md)                     | 「すべて選ぶ」のグループの枠                                             | Accepted           |
+| [0065](./0065-switch-coarse-size.md)                     | 指用と大きい指用のトグルの大きさ                                         | Accepted           |
+| [0066](./0066-switch-row-frame.md)                       | トグルの行の形と押せる範囲                                               | Accepted           |
+| [0067](./0067-switch-row-press.md)                       | トグルの行を押したときの塗りと、OFF・箱の色                              | Accepted           |
+| [0068](./0068-switch-caption.md)                         | トグルとキャプションの置き方                                             | Accepted           |
+| [0069](./0069-switch-disabled-knob.md)                   | 押せない OFF のノブ                                                      | Accepted           |
+| [0070](./0070-choice-error-box.md)                       | チェックボックス・ラジオのエラーの箱                                     | Accepted           |
+| [0071](./0071-focus-color.md)                            | フォーカスの色と部品の色                                                 | Accepted           |
+| [0072](./0072-disabled-over-error.md)                    | エラーかつ押せないときは、押せない見た目を優先する                       | Accepted           |
+| [0073](./0073-link-or-button.md)                         | リンクの作り分け（移動は Link、実行は Button）と押せないリンク           | Accepted           |
+| [0074](./0074-a11y-review-deferred.md)                   | 2026-09-14 の a11y レビューのうち、据え置き・backlog にしたもの          | Accepted           |
+| [0075](./0075-notice-region.md)                          | あとから出すお知らせの領域と、閉じるボタンの名前                         | Accepted           |
+| [0076](./0076-token-structure.md)                        | トークンを尺度・役割・部品に分け、Tailwind の名前空間で公開する          | Accepted           |
+| [0077](./0077-tailwind-merge-config.md)                  | tailwind-merge にライブラリのクラスの名前を知らせる                      | Accepted           |
+| [0078](./0078-reading-type.md)                           | 読む文字の大きさ                                                         | Accepted           |
+| [0079](./0079-control-type-and-height.md)                | 部品の文字と高さ・余白（入力方式で文字だけを変える）                     | Accepted           |
+| [0080](./0080-icon-size.md)                              | アイコンの大きさ                                                         | Accepted           |
+| [0081](./0081-inline-code.md)                            | 文中のコード                                                             | Accepted           |
+| [0082](./0082-kbd.md)                                    | キー                                                                     | Accepted           |
+| [0083](./0083-blockquote.md)                             | 引用                                                                     | Accepted           |
+| [0084](./0084-callout.md)                                | 記事の中の囲みと、Callout・Notice の分け方                               | Accepted           |
+| [0085](./0085-inline-emphasis.md)                        | 文字の飾り（strong・em・del・mark）                                      | Accepted           |
+| [0086](./0086-divider.md)                                | 区切り線                                                                 | Accepted           |
+| [0087](./0087-figure.md)                                 | 画像                                                                     | Accepted           |
+| [0088](./0088-list.md)                                   | リスト                                                                   | Accepted           |
+| [0089](./0089-footnote.md)                               | 脚注                                                                     | Accepted           |
+| [0090](./0090-table.md)                                  | 表                                                                       | Accepted           |
+| [0091](./0091-mark.md)                                   | 目立たせたい言葉（mark）                                                 | Accepted           |
+| [0092](./0092-code-block-frame.md)                       | コードの外枠と題                                                         | Accepted           |
+| [0093](./0093-code-block-line-decoration.md)             | コードの行の飾り                                                         | Accepted           |
+| [0094](./0094-code-block-syntax-palette.md)              | 色分けの色とコードの色のパレット                                         | Accepted           |
+| [0095](./0095-code-block-line-numbers.md)                | 行番号の濃さ                                                             | Accepted           |
+| [0096](./0096-prose.md)                                  | Prose の作り                                                             | Accepted           |
+| [0097](./0097-prose-spacing.md)                          | Prose の余白                                                             | Accepted           |
+| [0098](./0098-link-size-outside-prose.md)                | 本文の外の文字のリンクの大きさ                                           | Accepted           |
+| [0099](./0099-reading-round-deferred.md)                 | 後半ラウンド（本文の部品）で据え置きにしたこと                           | Accepted           |
+| [0100](./0100-prose-after-heading.md)                    | Prose の見出しのすぐ後ろの余白                                           | Accepted           |
+| [0101](./0101-choice-message-gap.md)                     | 選択肢とエラーの行のあいだ                                               | Accepted           |
+| [0102](./0102-overlay-components.md)                     | 重なる面の作り（Dialog・Drawer・Popover・Tooltip）                       | Accepted           |
+| [0103](./0103-overlay-title.md)                          | 重なる面の題と説明の大きさ                                               | Accepted           |
+| [0104](./0104-dialog-shape.md)                           | Dialog の角と大きさ                                                      | Accepted           |
+| [0105](./0105-overlay-actions.md)                        | 重なる面の下の操作の並べ方                                               | Accepted           |
+| [0106](./0106-tooltip-surface.md)                        | Tooltip の面と、出るまでの時間                                           | Accepted           |
+| [0107](./0107-popover-close-arrow.md)                    | Popover の × と矢印                                                      | Accepted           |
+| [0108](./0108-drawer-side.md)                            | 横から出す Drawer の幅と影                                               | Accepted           |
+| [0109](./0109-overlay-initial-focus.md)                  | 重なる面を開いた直後のフォーカス                                         | Accepted           |
+| [0110](./0110-sheet-handle-and-long-press-side.md)       | シートのつまみは引ける印、Tooltip は長押しで上に出す                     | Accepted           |
+| [0111](./0111-sheet-swipe-lock-and-close-fixes.md)       | シートの引く操作を止める仕組みと、閉じるときの影・× の場所               | Accepted           |
+| [0112](./0112-fill-transition-by-registered-property.md) | 塗りの移り変わりは、登録した変数で動かす                                 | Accepted           |
+| [0113](./0113-foundation-components.md)                  | 土台の部品（ThemeProvider・Portal・VisuallyHidden・AspectRatio）         | Accepted           |
+| [0114](./0114-icon.md)                                   | Icon の大きさと線の太さ                                                  | Accepted           |
+| [0115](./0115-skeleton.md)                               | 読み込み中の面（Skeleton）                                               | Accepted           |
+| [0116](./0116-image.md)                                  | 画像の読み込み中と失敗（Image）                                          | Accepted           |
+| [0117](./0117-collapsible.md)                            | 開閉（Collapsible）の見た目                                              | Accepted           |
+| [0118](./0118-transition.md)                             | 出入りの動き（Transition）                                               | Accepted           |
+| [0119](./0119-scroll-area.md)                            | スクロールする枠（ScrollArea）                                           | Accepted           |
+| [0120](./0120-container.md)                              | ページの幅と左右の余白（Container）                                      | Accepted           |
+| [0121](./0121-reading-datetime-number.md)                | 文字の部品（Mark・Time・RelativeTime・NumberFormat）と言語・タイムゾーン | Accepted           |
+| [0122](./0122-accordion.md)                              | Accordion の既定の見た目と、項目のあいだ・一覧の上下の区切り             | Accepted           |
+| [0123](./0123-alert-dialog.md)                           | AlertDialog の実行する側の色                                             | Accepted           |
+| [0124](./0124-textarea.md)                               | 複数行の入力欄（Textarea）の高さ・余白と、文字数                         | Accepted           |
+| [0125](./0125-skip-link.md)                              | 本文へ移るリンク（SkipLink）の出る位置と面                               | Accepted           |
+| [0126](./0126-bleed.md)                                  | 本文の幅の外へ出す枠（Bleed）の広げ方                                    | Accepted           |
+| [0127](./0127-icon-only-button-shape.md)                 | アイコンだけのボタンの形                                                 | Accepted           |
+| [0128](./0128-copy-button.md)                            | CopyButton で写せたことをどう見せるか                                    | Accepted           |
diff --git a/design/adr/assets/0122-accordion.png b/design/adr/assets/0122-accordion.png
new file mode 100644
index 0000000..4609064
Binary files /dev/null and b/design/adr/assets/0122-accordion.png differ
diff --git a/design/adr/assets/0123-alert-dialog.png b/design/adr/assets/0123-alert-dialog.png
new file mode 100644
index 0000000..5ba0c5a
Binary files /dev/null and b/design/adr/assets/0123-alert-dialog.png differ
diff --git a/design/adr/assets/0124-textarea-height.png b/design/adr/assets/0124-textarea-height.png
new file mode 100644
index 0000000..618943f
Binary files /dev/null and b/design/adr/assets/0124-textarea-height.png differ
diff --git a/design/adr/assets/0124-textarea-spacing.png b/design/adr/assets/0124-textarea-spacing.png
new file mode 100644
index 0000000..eff2d4a
Binary files /dev/null and b/design/adr/assets/0124-textarea-spacing.png differ
diff --git a/design/adr/assets/0125-skip-link.png b/design/adr/assets/0125-skip-link.png
new file mode 100644
index 0000000..d641c89
Binary files /dev/null and b/design/adr/assets/0125-skip-link.png differ
diff --git a/design/adr/assets/0127-icon-only-button.png b/design/adr/assets/0127-icon-only-button.png
new file mode 100644
index 0000000..842b257
Binary files /dev/null and b/design/adr/assets/0127-icon-only-button.png differ
diff --git a/design/adr/assets/0128-copy-button.png b/design/adr/assets/0128-copy-button.png
new file mode 100644
index 0000000..b3d289b
Binary files /dev/null and b/design/adr/assets/0128-copy-button.png differ
diff --git a/design/backlog.md b/design/backlog.md
index 5a6d331..feb7b6b 100644
--- a/design/backlog.md
+++ b/design/backlog.md
@@ -15,15 +15,54 @@
 - 押せない理由（キャプション）を Tab で移る人にも届けるには、押せないときもフォーカスできるボタン（aria-disabled。Base UI の `focusableWhenDisabled` に当たるもの）が要ります。いまの押せないボタンは Tab で止まりません
 - キャプションがボタンより長いときは、ボタンの幅で折り返します。和文が語の途中で折れる（「残/ります」）ので、文節で折る（`word-break: auto-phrase`。いまは Chrome だけ）かは決めていません
 - キャプションのあるボタンとないボタンを横に並べるとき、`items-center` の並びでは、キャプションのないボタンが中央に寄ります。上端でそろえる決まりを使い方に書くかは決めていません
+- 塗りも枠線もない、いちばん軽いボタンの見た目（ghost）はありません（[ADR-0128](./adr/0128-copy-button.md)）
 
 ## Link
 
-- アイコンだけの枠線のリンクは、左右の余白が今のままなので、指用では 54×44px の横長になります。正方形（丸）にして、アイコンだけのボタンと合わせるかは決めていません
+- アイコンだけの枠線のリンクは、左右の余白が今のままなので、指用では 54×44px の横長になります。Button のアイコンだけのボタンは角（`shape`）を選べるようになりました（[ADR-0127](./adr/0127-icon-only-button-shape.md)）。Link をそろえるかは決めていません
 - Chrome は、名前を付けていないリンクや aria-labelledby のリンクで、「リポジトリ （新しいタブで開きます）」のように文の前に空白を入れます（読み上げの文が絶対配置で、ブロック扱いになるため）。二重には読まれません
 
 ## TextField
 
-- 読み取り専用（readOnly）の TextField が、通常の欄と同じ見た目です。原則8 の「読み取り専用の欄は下線だけ」の形をまだ作っていません。「4 あとでにします。」（押せない状態の一覧の 7）
+- 読み取り専用（readOnly）の TextField が、通常の欄と同じ見た目です。原則8 の「読み取り専用の欄は下線だけ」の形をまだ作っていません。「4 あとでにします。」（押せない状態の一覧の 7）。Textarea も同じです（[ADR-0124](./adr/0124-textarea.md)）
+
+## Textarea
+
+2026-09-19 に作りました。決定は [ADR-0124](./adr/0124-textarea.md) です。
+
+- `loading`・`prefix`・`suffix` はまだありません
+- 上限（`maxCount`）に近づいたことを予告する見た目は作っていません。超えたときだけ知らせます
+- 文字数は `String.length` で数えます。絵文字などは、実際に見える文字数と数え方が違うことがあります
+- 右下のつまみで一度高さを変えたあと、入力に合わせて伸びる動きへ戻す手段がありません
+- iOS で右下のつまみがどう見える・操作できるかは実機で確認していません
+- 高さの計算（`--textarea-min-height`・`--textarea-max-height` など）は欄の要素で密度のトークンを読むので、開いたあとに祖先の密度が変わっても再計算されるかは確認していません
+
+## Accordion
+
+2026-09-19 に作りました。決定は [ADR-0122](./adr/0122-accordion.md) です。
+
+- 入れ子の Accordion（Accordion の中に Accordion）は確かめていません
+- フォームを送っているあいだ、開閉を止める仕組み（`useFormSubmittingLock` 相当）はまだありません
+
+## AlertDialog
+
+2026-09-19 に作りました。決定は [ADR-0123](./adr/0123-alert-dialog.md) です。
+
+- シートの面の読み上げの役割（`alertdialog`）は、`PopupRole` が DOM の `role` 属性を layout effect で書き換えるハックで付けています。Base UI の `SheetPopup` が role を props で受け取らないためで、`SheetPopup` に role を渡せるようにするのが本筋です
+
+## CopyButton
+
+2026-09-19 に作りました。決定は [ADR-0128](./adr/0128-copy-button.md) です。
+
+- 写せなかったとき（権限がない・安全でない接続）の見た目はありません。`onCopyError` で使う側が知らせる前提です
+
+## Mark・Time・RelativeTime・NumberFormat
+
+2026-09-19 に作りました。決定は [ADR-0121](./adr/0121-reading-datetime-number.md) です。
+
+- RelativeTime の「昨日」などの境界は UTC の 0 時で計算します。端末のタイムゾーンでの体感の「今日」とずれることがあります
+- `Intl.RelativeTimeFormat`・`Intl.NumberFormat` の言い回しは、ICU のバージョンでブラウザによって変わることがあります
+- 数字の幅をそろえるか（tabular-nums 相当）は比べていません。欧文フォント（Mulish）の数字がもとから等幅で、見た目の差が出なかったためです
 
 ## Select
 
@@ -44,9 +83,6 @@
 - はじいて閉じるときは、半分の段から閉じる動きだけキーフレームで書いています（Base UI が引く操作の transition を外すのと同じ瞬間に閉じた位置へ動かすため）。Base UI を上げたら要らなくなるかを見ます
 - 横から出すパネルの幅と影の向きの違いは小さく、見た目の回帰テストでは差になりません（画素の比較のしきい値の中）。影の向きを変えるときは、目で確かめます
 - 開いた Popover が、横スクロールする親の外に隠れると置き場所を探し続けます。Popover 側の問題です（[ADR-0119](./adr/0119-scroll-area.md)）
-- AlertDialog（取り消せない操作の確かめ専用の形）を作っていません
-  - イメージ: 外を押しても Esc でも閉じず、× も置かない Dialog。閉じるのは下のボタンだけ。読み上げでは `alertdialog` として扱い、開いた直後のフォーカスは取り消しの側に置く
-  - いまの Dialog でも `dismissible={false}`・`closeOnEscape={false}`・`closeButton={false}` と `autoFocus` で同じ形にできる。部品にする値打ちは、組み合わせを間違えないことと、読み上げの役割が変わること
 - Tooltip を長押しで出したあと、指を離さずに動かすと、Base UI の位置の追従で向きが変わることがあります。実機で見ます
 - 半分の段のときに面へ足している下の余白は、Base UI が測る面の高さを増やし、中身が画面の 50〜85% のとき、面の高さが上限に達するまで数回往復します。上端の位置は保たれるので目には出にくいはずですが、開く途中で面の動きと高さの変化がずれないかを実機で見ます（[ADR-0111](./adr/0111-sheet-swipe-lock-and-close-fixes.md)）
 - 段があり、はじいて閉じない設定のシートは、いちばん低い段から下へ引く動きだけ止められません（Base UI は上端の行き過ぎしか減衰しない）。離すと段に戻ります。Base UI を上げたら止められるかを見ます
@@ -133,12 +169,10 @@
 
 2026-09-18 に作りました。決定は [ADR-0113](./adr/0113-foundation-components.md)〜[ADR-0120](./adr/0120-container.md) です。
 
-- Bleed（画像を Container の余白の外へ出す）は作っていません。Container は中の要素に `--container-gutter`・`--container-width` を渡しますが、`--container-gutter` は `%` を含むので、読む要素の親の幅を基準に解決される点に注意します（[ADR-0120](./adr/0120-container.md)）
 - ScrollArea の左右の影の計算（`use-inline-cues` の CUE_RAMP）が、上下の `useMoreCues` と重複しています。横にも広げて internal にまとめるかを決めます。対象は ScrollArea・Select・シート・表・CodeBlock のスクロールです（[ADR-0119](./adr/0119-scroll-area.md)）
 - Image の寸法のない画像は、読み込めたときに高さが変わって下の内容が動きます（[ADR-0116](./adr/0116-image.md)）
 - Skeleton の `sweep-viewport` は、transform の付いた要素の中と iOS の Safari では面ごとの光になります（[ADR-0115](./adr/0115-skeleton.md)）
 - 見た目のテスト（pixelmatch の既定のしきい値）は、背景に近い薄いグレーの変化を見落とします。Skeleton の色の変更のときに分かりました（[ADR-0115](./adr/0115-skeleton.md)）
-- Button にアイコンだけのボタンの形がありません。Icon のストーリーでは className で四角にしています（[ADR-0114](./adr/0114-icon.md)）
 - `pnpm test -u <パス>` が範囲を絞らず全体の基準画像を書き換えることがあります。`pnpm vitest run --project=storybook <パス>` なら絞れます
 - `capture-story.mjs --pick A,B` のように採用の案を「,」区切りで渡すと、Storybook が URL の引数を安全でないとみなして捨て、採用の印が付きません。ストーリーの `pick` の既定値に書けば付きます
 - ScrollArea のつまみ（ふだんは細い）がマウスで狙いにくくないか、実機で見ます（[ADR-0119](./adr/0119-scroll-area.md)）
diff --git a/design/principles.md b/design/principles.md
index fd8b62c..18c8a46 100644
--- a/design/principles.md
+++ b/design/principles.md
@@ -65,7 +65,7 @@
 - hover で影が減り、押すと沈みます（[原則 3](#3-hover-は手応え押すと沈む)）。沈んでも縁の線は残します。縁まで消すと、縮んで見えるためです
 - 白いものを白い地に浮かせるときは、影だけでは縁が分かりません。細い輪郭を足します
 
-別のレイヤーは、ページの上に重なっています。選択肢、ボトムシート、画面の横から出すパネル、メニュー、ダイアログ、押して開く吹き出し、マウスを載せて出る補足です。下の内容と切り分けるには、面の明るさの差だけでは足りません。
+別のレイヤーは、ページの上に重なっています。選択肢、ボトムシート、画面の横から出すパネル、メニュー、ダイアログ、押して開く吹き出し、マウスを載せて出る補足、キーボードで操作したときだけ現れる本文へ移るリンクです。下の内容と切り分けるには、面の明るさの差だけでは足りません。
 
 - 重なるレイヤーには、やわらかく広い影を付けます。押せるものより高く見えます。輪郭は、白いものと同じ細い線です
 - 画面の端から出る面の影は、出てくる向きへ向けます。画面の外に落ちる影は見えないためです
@@ -93,7 +93,7 @@
 - 押して反応する文字（チェックボックスの横の文字）は、本体の一部です。本体と一緒に薄くします
 - 送信中も押せない見た目にします。ただし、動いている印は薄くしません。薄くすると、止まっているのか進んでいるのか分からなくなるためです
 
-経緯: ADR-0006、0024、0025、0026、0029、0033、0034、0036、0037、0042、0043、0047、0067、0069、0072、0082、0102、0106、0108、0119
+経緯: ADR-0006、0024、0025、0026、0029、0033、0034、0036、0037、0042、0043、0047、0067、0069、0072、0082、0102、0106、0108、0119、0125
 
 ---
 
@@ -169,6 +169,7 @@ hover は状態ではなく、マウスを載せたことへの反応です。
 - エラーと警告は、入力した結果です。本体の下に、アイコン付きの行として足します
 - エラーや警告が出ても、ヘルプテキストは消しません。入力の決まりを読みながら直せるためです
 - エラーは丸の「!」と赤、警告は三角とオリーブ色です。色だけでなく形でも見分けます。警告は送信を止めないので、欄の見た目は変えません
+- 文字数のように、数そのものが超えたことを示しているときは、エラーの行を出さずに欄だけをエラーの見た目にする形も選べます。行を出すかどうかは使う側が決めます
 - うまくいったことや補足も、同じ形の行で出せます。成功は丸のチェックと緑、情報は丸の「i」と青です。並びはエラー、警告、成功、情報の順で、欄の見た目を変えるのはエラーだけです。成功のときは、欄の右端にも小さなチェックを置けます
 - 両方あるときは、両方出します。エラーが上です
 - 行が出ても、本体とヘルプテキストは動きません。下の内容は、跳ばずに滑ります
@@ -185,7 +186,7 @@ hover は状態ではなく、マウスを載せたことへの反応です。
 - ボトムシートの見出しも、ラベル、ヘルプテキスト、エラー・警告の順です
 - どの文を出すかは使う側が決めます。部品は渡された文をそのまま出し、組み立てません
 
-経緯: ADR-0041、0044、0052、0058、0060、0068
+経緯: ADR-0041、0044、0052、0058、0060、0068、0124
 
 ---
 
@@ -194,6 +195,7 @@ hover は状態ではなく、マウスを載せたことへの反応です。
 角丸は、何であるかを表します。部品は部品の角、部品を包むものは一段大きい角、小物は pill です。高さに比例させる規則は採りません。密度を切り替えると見た目が変わり、そろえたいときに困るためです。
 
 - ボタン、入力欄、お知らせは同じ角です。お知らせは部品なので、カードの角にはしません
+- アイコンだけのボタンは部品の角が既定です。小物のように丸も選べます
 - カード、ボトムシート、画面の横から出すパネル、ダイアログは、部品より大きい角です。どれも部品を包むためです
 - 浮かぶ面（選択肢、メニュー、押して開く吹き出し、マウスを載せて出る補足）は、包むものではないので部品の角です
 - 画像はカードの角です。記事の中でも外でも変わりません。コードの枠と、外枠を付けた表は、部品の角です
@@ -204,7 +206,7 @@ hover は状態ではなく、マウスを載せたことへの反応です。
 
 カードは 2 つの型を用意します。画像を端まで届かせる標準の型と、画像を内側に収める入れ子の型です。入れ子の型の角を控えめにする案も比べましたが、どちらも同じ角にしました。画像の比率はどちらも同じです。
 
-経緯: ADR-0008、0014、0016、0017、0031、0035、0037、0043、0046、0047、0087、0090、0092、0102、0104、0116
+経緯: ADR-0008、0014、0016、0017、0031、0035、0037、0043、0046、0047、0087、0090、0092、0102、0104、0116、0127
 
 ---
 
diff --git a/design/tokens.css b/design/tokens.css
index b166cc9..e943b94 100644
--- a/design/tokens.css
+++ b/design/tokens.css
@@ -936,6 +936,31 @@
   --container-width-wide: calc(var(--spacing) * 320); /* 1280px */
   --container-gutter-size: clamp(calc(var(--spacing) * 4), 5%, calc(var(--spacing) * 12));
   /* ── END container */
+
+  /* ── SkipLink — 軸 99 ── BEGIN skip-link */
+  /* 「本文へ移動」のリンク。ふだんは読み上げにだけ届け、フォーカスしたときだけ画面の上に重ねる。src/components/skip-link
+     ページの上に重なる面なので、面・輪郭・影は浮かぶ面と同じ（原則1）。リンクなので角は pill（原則5）、文字はリンクの Primary と下線
+     top・left・right: 画面の端からの位置（right が auto なら文字の幅、0 なら上端の帯）。radius: 角
+     bg・fg・line・shadow: 面・文字・輪郭・影。focus-ring-offset・focus-ring-color: フォーカスの線の離れと色（帯では内側に引く） */
+  --skip-link-top: calc(var(--spacing) * 3);
+  --skip-link-left: calc(var(--spacing) * 3);
+  --skip-link-right: auto;
+  --skip-link-radius: var(--radius-pill);
+  --skip-link-bg: var(--color-surface);
+  --skip-link-fg: var(--color-primary);
+  --skip-link-line: var(--color-surface-line);
+  --skip-link-shadow: var(--shadow-overlay);
+  --skip-link-focus-ring-offset: var(--focus-ring-offset);
+  --skip-link-focus-ring-color: var(--color-primary);
+  /* ── END skip-link */
+
+  /* ── Bleed — 軸 100 ── BEGIN bleed */
+  /* 画像やコードを Container の本文の幅の外へ、左右の余白いっぱいまで出す。src/components/bleed
+     gutter: 出す幅（片側）。Container の左右の余白（--container-gutter-size: 置いた場所の幅の 5%、16〜48px）を、本文の幅から逆算したもの
+       余白が幅 P の 5% なら、本文の幅は P の 90% なので、余白は本文の幅の 1/18。% は Bleed の親（本文の幅）を基準に解決する
+       Container の幅の上限で止まっているとき（広い画面）は、本文の幅の 1/18 のまま（prose で約 37px）。実際の余白（最大 48px）までは届かない */
+  --bleed-gutter: clamp(calc(var(--spacing) * 4), calc(100% / 18), calc(var(--spacing) * 12));
+  /* ── END bleed */
 }
 
 /* ── skeleton keyframes */
diff --git a/src/components/accordion/Accordion.stories.tsx b/src/components/accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..4822ba1
--- /dev/null
+++ b/src/components/accordion/Accordion.stories.tsx
@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
+
+import {
+  Accordion,
+  AccordionItem,
+  type AccordionAppearance,
+  type AccordionProps,
+} from './Accordion';
+import { DensityPair, Matrix } from '../../stories/story-parts';
+import { type MatrixColumn, sourceCode, statePseudo } from '../../stories/story-states';
+
+const faq = [
+  {
+    value: 'password',
+    title: 'パスワードを忘れたときは？',
+    answer:
+      '届いたメールのリンクを開くと、新しいパスワードを決める画面に移ります。リンクは 24 時間で切れます。',
+  },
+  {
+    value: 'mail',
+    title: 'メールが届かないときは？',
+    answer: '迷惑メールのフォルダを確かめてください。',
+  },
+  {
+    value: 'leave',
+    title: '退会するには？',
+    answer: '設定の「アカウント」から手続きできます。',
+  },
+];
+
+function FaqItems() {
+  return faq.map((item) => (
+    <AccordionItem key={item.value} value={item.value} title={item.title}>
+      {item.answer}
+    </AccordionItem>
+  ));
+}
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  subcomponents: { AccordionItem },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '押して中身を開閉する項目を、続けて並べた一覧です。FAQ や、記事の中の補足のように、いくつもの中身を題だけ並べて見せるときに使います。1 つだけのときは Collapsible を使います。',
+          '',
+          '- `Accordion` の中に `AccordionItem` を間をあけずに並べます。項目ごとに `title`（題）と中身を渡します。',
+          '- 既定では 1 つ開くとほかは閉じます。いくつも同時に開けるようにするときは `multiple` を付けます。',
+          '- 見た目は `appearance` で選びます。既定は区切り線で区切る `divided` で、ほかに塗りなしの `plain`、開いている項目を塗る `open-filled`、いつも塗る `filled` があります。行と中身の見た目は Collapsible と同じです。',
+          '- 開閉の印は、`indicator` で題の右（`end`）か左（`start`）に置きます。',
+          '- はじめに開いておく項目は、`AccordionItem` の `value` を `defaultValue` に並べて指します。使う側で持つときは `value` と `onValueChange` を使います。',
+          '- 題は見出し（既定は h3）で包みます。ページの見出しの並びに合わせて `headingLevel` を変えます。',
+          '- 閉じた答えもページ内検索で見つけてほしいときは `hiddenUntilFound` を付けます。見つかると開きます。',
+          '- 動きを減らす設定では、中身を動かさずにすぐ出します。',
+        ].join('\n'),
+      },
+      source: sourceCode(`
+        <Accordion defaultValue={['password']}>
+          <AccordionItem value="password" title="パスワードを忘れたときは？">…</AccordionItem>
+          <AccordionItem value="mail" title="メールが届かないときは？">…</AccordionItem>
+        </Accordion>
+      `),
+    },
+  },
+  args: { appearance: 'divided', indicator: 'end', multiple: false },
+  argTypes: {
+    appearance: {
+      control: 'inline-radio',
+      options: ['divided', 'plain', 'open-filled', 'filled'],
+      table: { defaultValue: { summary: 'divided' } },
+    },
+    indicator: {
+      control: 'inline-radio',
+      options: ['end', 'start'],
+      table: { defaultValue: { summary: 'end' } },
+    },
+    multiple: { table: { defaultValue: { summary: 'false' } } },
+    disabled: { table: { defaultValue: { summary: 'false' } } },
+    hiddenUntilFound: { table: { defaultValue: { summary: 'false' } } },
+    keepMounted: { table: { defaultValue: { summary: 'false' } } },
+    headingLevel: {
+      control: 'inline-radio',
+      options: [2, 3, 4, 5, 6],
+      table: { defaultValue: { summary: '3' } },
+    },
+  },
+  render: (args) => (
+    <div className="w-[360px] max-w-full">
+      <Accordion {...args}>
+        <FaqItems />
+      </Accordion>
+    </div>
+  ),
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+type Row = 'closed' | 'open' | 'disabled';
+const rows: Row[] = ['closed', 'open', 'disabled'];
+const rowLabels: Record<Row, string> = {
+  closed: '閉じている',
+  open: '開いている',
+  disabled: '押せない',
+};
+const stateColumns: MatrixColumn[] = [
+  { label: '通常' },
+  { label: 'hover', state: 'hover' },
+  { label: '押下', state: 'active' },
+  { label: 'フォーカス（キーボード）', state: 'focus' },
+];
+const triggerPseudo = statePseudo({
+  hover: '[data-slot="accordion-trigger"]',
+  active: '[data-slot="accordion-trigger"]',
+  focusVisible: '[data-slot="accordion-trigger"]',
+});
+
+export const States: Story = {
+  tags: ['visual'],
+  name: '状態',
+  parameters: { pseudo: triggerPseudo },
+  render: (args) => (
+    <Matrix
+      rows={rows}
+      columns={stateColumns}
+      columnWidth="14rem"
+      rowLabel={(row) => rowLabels[row]}
+      renderCell={(row) => (
+        <Accordion {...args} defaultValue={row === 'open' ? ['a'] : []}>
+          <AccordionItem value="a" title="パスワードを忘れたら" disabled={row === 'disabled'}>
+            {faq[0].answer}
+          </AccordionItem>
+        </Accordion>
+      )}
+    />
+  ),
+};
+
+const appearances: AccordionAppearance[] = ['divided', 'plain', 'open-filled', 'filled'];
+
+function AppearanceGrid({ indicator }: Pick<AccordionProps, 'indicator'>) {
+  return (
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-8">
+      {appearances.map((appearance) => (
+        <div key={appearance} className="flex flex-col gap-2">
+          <p className="text-xs text-fg-subtle">{appearance}</p>
+          <Accordion appearance={appearance} indicator={indicator} defaultValue={['password']}>
+            <FaqItems />
+          </Accordion>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const Appearances: Story = {
+  tags: ['visual'],
+  name: '見た目',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`appearance` の 4 つの見た目です。`divided` は項目のあいだの線を 1 本にし、`filled` は面がつながらないよう項目のあいだを少し離します。',
+      },
+    },
+  },
+  render: () => <AppearanceGrid indicator="end" />,
+};
+
+export const AppearancesStart: Story = {
+  tags: ['visual'],
+  name: '見た目（印は左）',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`indicator="start"` にすると、印は題の左に移り、中身は題の頭にそろえて字下げします。',
+      },
+    },
+  },
+  render: () => <AppearanceGrid indicator="start" />,
+};
+
+export const Densities: Story = {
+  tags: ['visual'],
+  name: '密度',
+  render: () => (
+    <DensityPair>
+      <div className="w-[320px]">
+        <Accordion defaultValue={['password']}>
+          <FaqItems />
+        </Accordion>
+      </div>
+    </DensityPair>
+  ),
+};
+
+export const Multiple: Story = {
+  name: 'いくつも開く',
+  args: { multiple: true },
+  parameters: {
+    docs: {
+      description: {
+        story: '`multiple` を付けると、ほかの項目を閉じずに、いくつも同時に開けます。',
+      },
+    },
+  },
+};
+
+function ControlledExample() {
+  const [value, setValue] = useState<unknown[]>(['password']);
+  return (
+    <div className="flex w-[360px] max-w-full flex-col gap-3">
+      <p className="text-sm">開いている項目: {value.length ? value.join('、') : 'なし'}</p>
+      <Accordion value={value} onValueChange={setValue}>
+        <FaqItems />
+      </Accordion>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  name: '開閉を使う側で持つ',
+  parameters: {
+    docs: {
+      source: sourceCode(`
+        const [value, setValue] = useState<unknown[]>(['password']);
+        <Accordion value={value} onValueChange={setValue}>…</Accordion>
+      `),
+    },
+  },
+  render: () => <ControlledExample />,
+};
+
+export const HiddenUntilFound: Story = {
+  name: 'ページ内検索で開く',
+  args: { hiddenUntilFound: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ブラウザのページ内検索（Ctrl+F）で「24 時間」を探すと、閉じた項目が開いて見つかります。',
+      },
+    },
+  },
+};
+
+export const Accessibility: Story = {
+  name: '読み上げ',
+  play: async ({ canvas }) => {
+    // 題は見出し（既定は h3）の中のボタン
+    const first = canvas.getByRole('button', { name: faq[0].title });
+    const second = canvas.getByRole('button', { name: faq[1].title });
+    await expect(first.closest('h3')).not.toBeNull();
+    await expect(first).toHaveAttribute('aria-expanded', 'false');
+    // 押すと開き、中身が trigger の aria-controls で結ばれる
+    await userEvent.click(first);
+    await expect(first).toHaveAttribute('aria-expanded', 'true');
+    const panel = canvas.getByText(faq[0].answer).closest('[data-slot="accordion-panel"]');
+    await expect(first.getAttribute('aria-controls')).toBe(panel?.id);
+    // 既定では 1 つだけ開く。2 つ目を開くと 1 つ目は閉じる
+    await userEvent.click(second);
+    await expect(second).toHaveAttribute('aria-expanded', 'true');
+    await expect(first).toHaveAttribute('aria-expanded', 'false');
+    await waitFor(() => expect(canvas.queryByText(faq[0].answer)).toBeNull());
+  },
+};
+
+export const MultipleCheck: Story = {
+  name: 'いくつも開く（確かめ）',
+  tags: ['!autodocs'],
+  args: { multiple: true, headingLevel: 2 },
+  play: async ({ canvas }) => {
+    const first = canvas.getByRole('button', { name: faq[0].title });
+    const second = canvas.getByRole('button', { name: faq[1].title });
+    await expect(first.closest('h2')).not.toBeNull();
+    await userEvent.click(first);
+    await userEvent.click(second);
+    await expect(first).toHaveAttribute('aria-expanded', 'true');
+    await expect(second).toHaveAttribute('aria-expanded', 'true');
+  },
+};
+
+export const HiddenUntilFoundCheck: Story = {
+  name: 'ページ内検索で開く（確かめ）',
+  tags: ['!autodocs'],
+  args: { hiddenUntilFound: true },
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole('button', { name: faq[0].title });
+    const panel = canvas.getByText(faq[0].answer).closest('[data-slot="accordion-panel"]');
+    await expect(panel?.getAttribute('hidden')).toBe('until-found');
+    panel?.dispatchEvent(new Event('beforematch', { bubbles: true }));
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'));
+  },
+};
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
new file mode 100644
index 0000000..ae7afba
--- /dev/null
+++ b/src/components/accordion/Accordion.tsx
@@ -0,0 +1,213 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { type ComponentProps, createContext, type ReactNode, useContext } from 'react';
+
+import { collapsibleStyles } from '../../internal/collapsible-styles';
+import { CaretDownIcon } from '../../internal/icons';
+import { tv } from '../../internal/tv';
+import type { CollapsibleAppearance, CollapsibleIndicator } from '../collapsible/Collapsible';
+
+// 開閉の行を束ねた一覧。行・印・中身の見た目は Collapsible と同じ（internal/collapsible-styles。ADR-0117）
+// Accordion だけが持つのは、項目のあいだの扱い
+//   filled: 塗りの面がつながらないよう、項目のあいだを少し離す（Collapsible と同じ --collapsible-row-gap）
+//   divided: あいだの線は 1 本に重ねる。一覧の上端と下端には引かない（軸 96 の A）。見出しや本文とのあいだに線を増やさない
+// 中身の高さは Base UI が --accordion-panel-height に測るので、Collapsible の変数に渡して同じ動きにする
+const accordionStyles = tv({
+  slots: {
+    root: 'flex flex-col',
+    item: '',
+    panel: '[--collapsible-panel-height:var(--accordion-panel-height)]',
+  },
+  variants: {
+    appearance: {
+      plain: {},
+      'open-filled': {},
+      filled: { root: 'gap-(--collapsible-row-gap)' },
+      divided: {
+        item: [
+          '[[data-slot=accordion-item]+&]:-mt-(--border-width-thin)',
+          'first:border-t-0 last:border-b-0',
+        ],
+      },
+    },
+  },
+});
+
+export type AccordionAppearance = CollapsibleAppearance;
+export type AccordionIndicator = CollapsibleIndicator;
+
+interface AccordionContextValue {
+  appearance: AccordionAppearance;
+  indicator: AccordionIndicator;
+  headingLevel: 2 | 3 | 4 | 5 | 6;
+}
+
+const AccordionContext = createContext<AccordionContextValue>({
+  appearance: 'divided',
+  indicator: 'end',
+  headingLevel: 3,
+});
+
+export interface AccordionProps extends Omit<
+  ComponentProps<'div'>,
+  'className' | 'defaultValue' | 'onChange' | 'dir'
+> {
+  /** 並べる項目。AccordionItem を間をあけずに続けて置きます */
+  children?: ReactNode;
+  /**
+   * 項目の見た目。Collapsible と同じ 4 つです。どれも行全体を押せます
+   * - divided: 項目のあいだと一覧の上下に区切り線を引きます。FAQ のように、問いを続けて並べる一覧の形です
+   * - plain: 塗りも線もなし。マウスを載せたときだけ淡いグレーを敷きます。項目が 2〜3 個で、周りに見出しや余白があるときに使います
+   * - open-filled: 開いている項目をグレーで塗ります。どれが開いているかを見せたいときに使います
+   * - filled: いつもグレーで塗り、項目のあいだを少し離します。周りに線や囲みが少なく、押せると気づきにくい場所で使います
+   * @default 'divided'
+   */
+  appearance?: AccordionAppearance;
+  /**
+   * 開閉の印の位置。見た目（appearance）とは別に選べます
+   * - end: 題の右。閉じているときは下向きで、開くと上を向きます
+   * - start: 題の左。閉じているときは右向きで、開くと下を向きます。中身は題の頭にそろえて字下げします
+   * @default 'end'
+   */
+  indicator?: AccordionIndicator;
+  /**
+   * 同時にいくつも開けるか。false のときは、1 つ開くとほかは閉じます
+   * @default false
+   */
+  multiple?: boolean;
+  /** 開いている項目の value（使う側で持つとき）。onValueChange と組にします */
+  value?: unknown[];
+  /** はじめに開いておく項目の value */
+  defaultValue?: unknown[];
+  /** 開いている項目が変わったときに、開いている項目の value を受け取ります */
+  onValueChange?: (value: unknown[]) => void;
+  /**
+   * すべての項目を押せなくします
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 閉じているあいだも中身をページに残し、ブラウザのページ内検索で見つかるようにします。見つかると開きます
+   * FAQ のように、閉じた答えも探されるときに使います。keepMounted より優先します
+   * @default false
+   */
+  hiddenUntilFound?: boolean;
+  /**
+   * 閉じているあいだも中身を DOM に残します（見えず、読み上げにも届きません）。中の入力の値を保ちたいときに使います
+   * @default false
+   */
+  keepMounted?: boolean;
+  /**
+   * 題を包む見出しの段（h2〜h6）。ページの見出しの並びに合わせます。見た目は変わりません
+   * @default 3
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /** 外側の要素に足すクラス */
+  className?: string;
+}
+
+/**
+ * 押して中身を開閉する項目を束ねた一覧。FAQ や、記事の中の補足のように、いくつもの中身を題だけ並べて見せるときに使います。
+ * 既定では 1 つ開くとほかは閉じます。見た目は Collapsible と同じです
+ */
+export function Accordion({
+  children,
+  appearance = 'divided',
+  indicator = 'end',
+  multiple = false,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  hiddenUntilFound = false,
+  keepMounted = false,
+  headingLevel = 3,
+  className,
+  ...props
+}: AccordionProps) {
+  const styles = accordionStyles({ appearance });
+  return (
+    <AccordionContext.Provider value={{ appearance, indicator, headingLevel }}>
+      <BaseAccordion.Root
+        {...props}
+        data-slot="accordion"
+        multiple={multiple}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange ? (next) => onValueChange(next) : undefined}
+        disabled={disabled}
+        hiddenUntilFound={hiddenUntilFound}
+        keepMounted={keepMounted}
+        className={styles.root({ className })}
+      >
+        {children}
+      </BaseAccordion.Root>
+    </AccordionContext.Provider>
+  );
+}
+
+export interface AccordionItemProps extends Omit<
+  ComponentProps<'div'>,
+  'title' | 'children' | 'className' | 'onChange'
+> {
+  /** 行に出す題。押すと中身を開閉します */
+  title: ReactNode;
+  /** 開いたときに出す中身 */
+  children?: ReactNode;
+  /** 項目を見分ける値。Accordion の defaultValue・value で、この値を指して開きます。渡さないときは自動で付きます */
+  value?: unknown;
+  /** この項目が開閉したときに呼ばれます */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * この項目だけ押せなくします。題は押せない文字の色になります
+   * @default false
+   */
+  disabled?: boolean;
+  /** 外側の要素に足すクラス */
+  className?: string;
+  /** 中身（開閉する部分）の内側に足すクラス。余白を変えるときに使います */
+  panelClassName?: string;
+}
+
+/**
+ * Accordion の中の 1 項目。題の行を押すと中身を開閉します
+ */
+export function AccordionItem({
+  title,
+  children,
+  value,
+  onOpenChange,
+  disabled,
+  className,
+  panelClassName,
+  ...props
+}: AccordionItemProps) {
+  const { appearance, indicator, headingLevel } = useContext(AccordionContext);
+  const styles = collapsibleStyles({ appearance, indicator });
+  const own = accordionStyles({ appearance });
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <BaseAccordion.Item
+      {...props}
+      data-slot="accordion-item"
+      value={value}
+      onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}
+      disabled={disabled}
+      className={styles.root({ className: own.item({ className }) })}
+    >
+      <BaseAccordion.Header render={<Heading />} className="m-0">
+        <BaseAccordion.Trigger data-slot="accordion-trigger" className={styles.trigger()}>
+          <span className={styles.title()}>{title}</span>
+          <span data-slot="accordion-indicator" className={styles.indicator()}>
+            <CaretDownIcon />
+          </span>
+        </BaseAccordion.Trigger>
+      </BaseAccordion.Header>
+      <BaseAccordion.Panel
+        data-slot="accordion-panel"
+        className={styles.panel({ className: own.panel() })}
+      >
+        <div className={styles.content({ className: panelClassName })}>{children}</div>
+      </BaseAccordion.Panel>
+    </BaseAccordion.Item>
+  );
+}
diff --git a/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-chromium-linux.png b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-chromium-linux.png
new file mode 100644
index 0000000..398edbf
Binary files /dev/null and b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-chromium-linux.png differ
diff --git a/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-start-chromium-linux.png b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-start-chromium-linux.png
new file mode 100644
index 0000000..4d72401
Binary files /dev/null and b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-appearances-start-chromium-linux.png differ
diff --git a/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-densities-chromium-linux.png b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-densities-chromium-linux.png
new file mode 100644
index 0000000..c63dd88
Binary files /dev/null and b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-densities-chromium-linux.png differ
diff --git a/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-states-chromium-linux.png b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-states-chromium-linux.png
new file mode 100644
index 0000000..813e6f0
Binary files /dev/null and b/src/components/accordion/__screenshots__/Accordion.stories.tsx/components-accordion-states-chromium-linux.png differ
diff --git a/src/components/alert-dialog/AlertDialog.stories.tsx b/src/components/alert-dialog/AlertDialog.stories.tsx
new file mode 100644
index 0000000..21f599f
--- /dev/null
+++ b/src/components/alert-dialog/AlertDialog.stories.tsx
@@ -0,0 +1,291 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+// userEvent は play の引数ではなく storybook/test から読む
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+
+import { AlertDialog } from './AlertDialog';
+import { PhoneFrame, ScreenFrame } from '../../stories/story-parts';
+import { sourceCode } from '../../stories/story-states';
+import { Button } from '../button/Button';
+
+// 開いた状態のストーリーも、ドキュメントのページでは閉じて描く（開くとフォーカスが移り、ページが流れるため）
+const openOnLoad = (viewMode: string) => viewMode !== 'docs';
+
+const meta = {
+  title: 'Components/AlertDialog',
+  component: AlertDialog,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '取り消せない操作（削除・送信など）の前に、続けるかを確かめる面です。見た目は Dialog と同じで、閉じるのは下の 2 つのボタンだけです。後ろの画面を押しても、Esc でも、下へはじいても閉じず、右上の × もありません。',
+          '',
+          '- `title` は問いの形で書きます（「下書きを削除しますか？」）。何が起きるか、元に戻せないことは `description` に書きます。',
+          '- 実行する側のボタンの文言は `actionLabel` に、何が起きるかを動詞で書きます（「削除する」）。「OK」「はい」は使いません。取り消す側は `cancelLabel`（既定は「キャンセル」）です。',
+          '- 押したときの処理は `onAction` に渡します。Promise を返すと、終わるまでボタンを送信中にして、終わってから閉じます。失敗したときは閉じずに残すので、失敗の知らせは `onAction` の中で出します。',
+          '- 実行する側のボタンの色は `tone` で選びます。既定の `danger` は危険の色で、消す・外すなど失うものがある操作に使います。失うものはないが取り消せない操作（送信・公開など）は `primary` にします。',
+          '- 開いた直後のフォーカスは、取り消す側のボタンに置きます。うっかり Enter を押しても実行しません。',
+          '- 出し方（`presentation`）は Dialog と同じです。シートで出すときも、下へはじいて閉じることはできず、つまみも出ません。',
+          '- 入力を求めるとき、閉じる手段を複数残したいときは、Dialog を使います。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: {
+    title: '下書きを削除しますか？',
+    description: '削除した下書きは元に戻せません。',
+    actionLabel: '削除する',
+    cancelLabel: 'キャンセル',
+    tone: 'danger',
+    presentation: 'auto',
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    actionLabel: { control: 'text' },
+    cancelLabel: { control: 'text' },
+    tone: {
+      control: 'inline-radio',
+      options: ['danger', 'primary'],
+      table: { defaultValue: { summary: "'danger'" } },
+    },
+    presentation: {
+      control: 'inline-radio',
+      options: ['auto', 'popover', 'sheet'],
+      table: { defaultValue: { summary: "'auto'" } },
+    },
+    trigger: { control: false },
+    children: { control: false },
+    container: { control: false },
+    onAction: { control: false },
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+  parameters: {
+    docs: {
+      source: sourceCode(`
+        <AlertDialog
+          title="下書きを削除しますか？"
+          description="削除した下書きは元に戻せません。"
+          actionLabel="削除する"
+          onAction={() => deleteDraft()}
+          trigger={<Button>下書きを削除</Button>}
+        />
+      `),
+    },
+  },
+  render: (args) => <AlertDialog {...args} trigger={<Button>下書きを削除</Button>} />,
+};
+
+export const Open: Story = {
+  tags: ['visual'],
+  name: '開いた状態',
+  parameters: {
+    controls: { include: ['title', 'description', 'actionLabel', 'tone'] },
+    docs: {
+      description: {
+        story:
+          '中央に浮かべた形です。取り消す側のボタンにフォーカスがあります。ここでは画面の代わりの枠の中に描いています。',
+      },
+    },
+  },
+  render: (args, { viewMode }) => (
+    <ScreenFrame height="h-[360px]">
+      {(frame) => (
+        <AlertDialog
+          {...args}
+          presentation="popover"
+          trigger={<Button>下書きを削除</Button>}
+          defaultOpen={openOnLoad(viewMode)}
+          container={frame}
+        />
+      )}
+    </ScreenFrame>
+  ),
+};
+
+export const Primary: Story = {
+  tags: ['visual'],
+  name: '失うものがない操作（primary）',
+  args: {
+    title: '記事を公開しますか？',
+    description: '公開すると、読者に通知が届きます。通知は取り消せません。',
+    actionLabel: '公開する',
+    tone: 'primary',
+  },
+  parameters: {
+    controls: { include: ['title', 'description', 'actionLabel', 'tone'] },
+    docs: {
+      description: {
+        story:
+          '消えるものはないが取り消せない操作では、`tone="primary"` で実行する側を主な色にします。',
+      },
+    },
+  },
+  render: (args, { viewMode }) => (
+    <ScreenFrame height="h-[360px]">
+      {(frame) => (
+        <AlertDialog
+          {...args}
+          presentation="popover"
+          trigger={<Button>公開</Button>}
+          defaultOpen={openOnLoad(viewMode)}
+          container={frame}
+        />
+      )}
+    </ScreenFrame>
+  ),
+};
+
+export const WithContent: Story = {
+  tags: ['visual'],
+  name: '中身つき',
+  args: {
+    title: '3 件の下書きを削除しますか？',
+    description: '次の下書きを削除します。削除した下書きは元に戻せません。',
+    actionLabel: '3 件を削除する',
+  },
+  parameters: {
+    controls: { include: ['title', 'description', 'actionLabel'] },
+    docs: {
+      description: {
+        story: '消えるものを一覧で見せるときは、中身（children）に渡します。',
+      },
+    },
+  },
+  render: (args, { viewMode }) => (
+    <ScreenFrame height="h-[420px]">
+      {(frame) => (
+        <AlertDialog
+          {...args}
+          presentation="popover"
+          trigger={<Button>選んだ下書きを削除</Button>}
+          defaultOpen={openOnLoad(viewMode)}
+          container={frame}
+        >
+          <ul className="list-disc pl-5 text-fg-muted">
+            <li>週末の買い物メモ</li>
+            <li>デザインの原則について</li>
+            <li>新しい部品の案</li>
+          </ul>
+        </AlertDialog>
+      )}
+    </ScreenFrame>
+  ),
+};
+
+export const Sheet: Story = {
+  tags: ['visual'],
+  name: 'シート',
+  parameters: {
+    controls: { include: ['title', 'description', 'actionLabel', 'tone'] },
+    docs: {
+      description: {
+        story:
+          '`presentation="sheet"` のとき、または `auto` で指で操作していて画面が狭いときは、画面の下から出るシートにします。下へはじいても閉じないので、つまみは出しません。ボタンは幅いっぱいで縦に積み、実行する側を上にします。',
+      },
+    },
+  },
+  render: (args, { viewMode }) => (
+    <PhoneFrame>
+      {(frame) => (
+        <AlertDialog
+          {...args}
+          presentation="sheet"
+          trigger={<Button>下書きを削除</Button>}
+          defaultOpen={openOnLoad(viewMode)}
+          container={frame}
+        />
+      )}
+    </PhoneFrame>
+  ),
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    const dialog = await body.findByRole('alertdialog', { name: '下書きを削除しますか？' });
+    await expect(within(dialog).queryByRole('button', { name: '閉じる' })).toBeNull();
+    await waitFor(() =>
+      expect(within(dialog).getByRole('button', { name: 'キャンセル' })).toHaveFocus()
+    );
+  },
+};
+
+export const Accessibility: Story = {
+  name: '読み上げとキーボード',
+  args: { onAction: fn() },
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <AlertDialog {...args} presentation="popover" trigger={<Button>下書きを削除</Button>} />
+  ),
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(canvasElement.ownerDocument.body);
+    const trigger = canvas.getByRole('button', { name: '下書きを削除' });
+    await userEvent.click(trigger);
+    const dialog = await body.findByRole('alertdialog', { name: '下書きを削除しますか？' });
+    await expect(dialog).toHaveAccessibleDescription('削除した下書きは元に戻せません。');
+    await expect(within(dialog).queryByRole('button', { name: '閉じる' })).toBeNull();
+    // 開いた直後のフォーカスは取り消す側
+    await waitFor(() =>
+      expect(within(dialog).getByRole('button', { name: 'キャンセル' })).toHaveFocus()
+    );
+    // Esc では閉じない
+    await userEvent.keyboard('{Escape}');
+    await expect(body.getByRole('alertdialog')).toBeInTheDocument();
+    // 取り消すと、実行せずに閉じて、開いたボタンにフォーカスが戻る
+    await userEvent.click(within(dialog).getByRole('button', { name: 'キャンセル' }));
+    await waitFor(() => expect(body.queryByRole('alertdialog')).toBeNull());
+    await waitFor(() => expect(trigger).toHaveFocus());
+    await expect(args.onAction).not.toHaveBeenCalled();
+    // 実行すると、onAction を呼んで閉じる
+    await userEvent.click(trigger);
+    await userEvent.click(await body.findByRole('button', { name: '削除する' }));
+    await waitFor(() => expect(body.queryByRole('alertdialog')).toBeNull());
+    await expect(args.onAction).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const Pending: Story = {
+  name: '終わるまで待つ',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '`onAction` が Promise を返すと、終わるまで実行する側のボタンを送信中にし、取り消す側を押せなくします。終わってから閉じます。',
+      },
+      source: sourceCode(`
+        <AlertDialog
+          title="下書きを削除しますか？"
+          actionLabel="削除する"
+          onAction={async () => {
+            await deleteDraft();
+          }}
+          trigger={<Button>下書きを削除</Button>}
+        />
+      `),
+    },
+  },
+  render: (args) => (
+    <AlertDialog
+      {...args}
+      presentation="popover"
+      onAction={() => new Promise((resolve) => setTimeout(resolve, 1000))}
+      trigger={<Button>下書きを削除</Button>}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(within(canvasElement).getByRole('button', { name: '下書きを削除' }));
+    const dialog = await body.findByRole('alertdialog');
+    const action = within(dialog).getByRole('button', { name: '削除する' });
+    await userEvent.click(action);
+    await waitFor(() => expect(action).toHaveAttribute('aria-busy', 'true'));
+    await expect(within(dialog).getByRole('button', { name: 'キャンセル' })).toBeDisabled();
+    await waitFor(() => expect(body.queryByRole('alertdialog')).toBeNull(), { timeout: 3000 });
+  },
+};
diff --git a/src/components/alert-dialog/AlertDialog.tsx b/src/components/alert-dialog/AlertDialog.tsx
new file mode 100644
index 0000000..f5b06e6
--- /dev/null
+++ b/src/components/alert-dialog/AlertDialog.tsx
@@ -0,0 +1,138 @@
+import { type ReactElement, type ReactNode, useState } from 'react';
+
+import { OverlayRoleContext } from '../../internal/overlay/overlay-role-context';
+import { Button } from '../button/Button';
+import { Dialog, type DialogPresentation } from '../dialog/Dialog';
+import type { OverlayActionsLayout } from '../drawer/Drawer';
+
+/** 実行する側のボタンの色。danger は危険の色、primary は主な色 */
+export type AlertDialogTone = 'danger' | 'primary';
+
+export interface AlertDialogProps {
+  /** 見出しの題。何をするかを問いの形で書く。読み上げでは、開いた面の名前になる */
+  title: ReactNode;
+  /** 題の下の説明。何が起き、元に戻せないことを書く。読み上げでは、開いた面の説明になる */
+  description?: ReactNode;
+  /** 中身（消えるものの一覧など）。題と説明で足りるときは渡さない */
+  children?: ReactNode;
+  /** 実行する側のボタンの文言。何が起きるかを動詞で書く（「削除する」など） */
+  actionLabel: ReactNode;
+  /**
+   * 取り消す側のボタンの文言
+   * @default 'キャンセル'
+   */
+  cancelLabel?: ReactNode;
+  /**
+   * 実行する側のボタンを押したときの処理。Promise を返すと、終わるまでボタンを送信中にし、終わってから閉じます。
+   * 失敗した（Promise が reject された）ときは閉じずに残します。失敗の知らせは onAction の中で出します
+   */
+  onAction?: () => unknown;
+  /**
+   * 実行する側のボタンの色。消す・外すなど失うものがある操作は danger、失うものはないが取り消せない操作（送信・公開など）は primary にします
+   * @default 'danger'
+   */
+  tone?: AlertDialogTone;
+  /** 開くボタン。Button などの要素を渡す。開閉を外から決めるときは省ける */
+  trigger?: ReactElement;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * 出し方。auto は指で操作していて画面が狭いときだけ、画面の下から出すシートにします。popover はいつも中央に浮かべ、sheet はいつもシートにします
+   * 書かないときは ThemeProvider の presentation に従います
+   * @default 'auto'
+   */
+  presentation?: DialogPresentation;
+  /**
+   * 画面の下から出すシートで出すときの、2 つのボタンの並べ方。既定の auto は、幅いっぱいで縦に積み、実行する側を上にします。
+   * 中央に浮かべるときは、いつも右に寄せ、実行する側を右端にします
+   * @default 'auto'
+   */
+  actionsLayout?: OverlayActionsLayout;
+  /**
+   * 描く場所
+   * @default document.body
+   */
+  container?: HTMLElement | null;
+  /** 面（Popup）に足すクラス */
+  className?: string;
+}
+
+/**
+ * 取り消せない操作の前に、続けるかを確かめる面。閉じるのは下の 2 つのボタンだけで、後ろの画面・Esc・下へはじく操作では閉じません
+ */
+export function AlertDialog({
+  title,
+  description,
+  children,
+  actionLabel,
+  cancelLabel = 'キャンセル',
+  onAction,
+  tone = 'danger',
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}: AlertDialogProps) {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const open = openProp ?? openState;
+  const [pending, setPending] = useState(false);
+  const changeOpen = (next: boolean) => {
+    setOpenState(next);
+    onOpenChange?.(next);
+  };
+  const run = async () => {
+    const result = onAction?.();
+    if (result instanceof Promise) {
+      setPending(true);
+      try {
+        await result;
+      } catch {
+        // 失敗したときは閉じずに残す（知らせは onAction の中で出す）
+        return;
+      } finally {
+        setPending(false);
+      }
+    }
+    changeOpen(false);
+  };
+  return (
+    <OverlayRoleContext value="alertdialog">
+      <Dialog
+        {...props}
+        title={title}
+        description={description}
+        open={open}
+        onOpenChange={changeOpen}
+        // 閉じるのは下のボタンだけ（後ろの画面・下へはじく操作・Esc・× では閉じない）
+        dismissible={false}
+        closeOnEscape={false}
+        closeButton={false}
+        actions={
+          <>
+            {/* 開いた直後のフォーカスは取り消す側に置く（うっかり Enter で実行しないため） */}
+            <Button
+              appearance="outline"
+              autoFocus
+              disabled={pending}
+              data-slot="alert-dialog-cancel"
+              onClick={() => changeOpen(false)}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              color={tone}
+              loading={pending}
+              data-slot="alert-dialog-action"
+              onClick={() => void run()}
+            >
+              {actionLabel}
+            </Button>
+          </>
+        }
+      >
+        {children}
+      </Dialog>
+    </OverlayRoleContext>
+  );
+}
diff --git a/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-open-chromium-linux.png b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-open-chromium-linux.png
new file mode 100644
index 0000000..a4244c3
Binary files /dev/null and b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-open-chromium-linux.png differ
diff --git a/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-primary-chromium-linux.png b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-primary-chromium-linux.png
new file mode 100644
index 0000000..9bee5a0
Binary files /dev/null and b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-primary-chromium-linux.png differ
diff --git a/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-sheet-chromium-linux.png b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-sheet-chromium-linux.png
new file mode 100644
index 0000000..00019b4
Binary files /dev/null and b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-sheet-chromium-linux.png differ
diff --git a/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-with-content-chromium-linux.png b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-with-content-chromium-linux.png
new file mode 100644
index 0000000..c775525
Binary files /dev/null and b/src/components/alert-dialog/__screenshots__/AlertDialog.stories.tsx/components-alertdialog-with-content-chromium-linux.png differ
diff --git a/src/components/bleed/Bleed.stories.tsx b/src/components/bleed/Bleed.stories.tsx
new file mode 100644
index 0000000..5245460
--- /dev/null
+++ b/src/components/bleed/Bleed.stories.tsx
@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, waitFor } from 'storybook/test';
+
+import { Bleed } from './Bleed';
+import { Container } from '../container/Container';
+import { ScreenOf } from '../container/story-page';
+import { Figure } from '../figure/Figure';
+import { Prose } from '../prose/Prose';
+import { sourceCode } from '../../stories/story-states';
+
+// 見本の画像（外に取りに行かない）
+const landscape = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><defs><linearGradient id="s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7cc4f8"/><stop offset="1" stop-color="#cfeafc"/></linearGradient></defs><rect width="640" height="360" fill="url(#s)"/><circle cx="520" cy="90" r="36" fill="#fff4cc"/><path d="M0 250 L130 140 L230 230 L360 110 L480 220 L580 150 L640 200 L640 360 L0 360Z" fill="#9fb3cf"/><path d="M0 300 L120 250 L240 300 L380 240 L520 310 L640 270 L640 360 L0 360Z" fill="#2f6b58"/></svg>'
+)}`;
+
+const meta = {
+  title: 'Components/Bleed',
+  component: Bleed,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: [
+          '画像やコードを、本文の幅の外へ広げる枠です。Container の左右の余白いっぱいまで、左右に同じだけ広がります。記事の中で、大きく見せたい画像に使います。',
+          '',
+          '- Container の中の本文に置きます。Prose の中では、段落と同じ並びに置きます（Prose の直下）。',
+          '- 本文の幅いっぱいの要素の直下に置きます。リストの中や、左右に余白のある要素の中では、広がる幅が合いません。',
+          '- 画面が Container の幅の上限より狭いとき（スマートフォンなど）は、Container の左右の余白いっぱい、つまり画面の端まで広がります。広い画面では、本文の幅の 1/18（`prose` で約 37px）ずつ左右に広がります。',
+          '- 見た目（色・線・角）は持たず、中の画像やコードの見た目はそのままです。`render` で描く要素を変えられます（既定は `div`）。',
+        ].join('\n'),
+      },
+    },
+  },
+} satisfies Meta<typeof Bleed>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** 記事の見本。グレーが Container の左右の余白 */
+function Article() {
+  return (
+    <div className="py-6">
+      <Container size="prose" className="bg-neutral">
+        <Prose className="bg-bg">
+          <p>
+            記事の本文は、1
+            行の字数を抑えて読みやすくします。画像を大きく見せたいときは、本文の幅の外へ広げます。
+          </p>
+          <Bleed>
+            <Figure
+              src={landscape}
+              alt="空と山の絵"
+              caption="図 1. 左右の余白いっぱいまで広げた画像"
+            />
+          </Bleed>
+          <p>本文の幅のままの画像と比べると、広げた分だけ大きく見えます。</p>
+          <Figure src={landscape} alt="空と山の絵" caption="図 2. 本文の幅の画像" />
+        </Prose>
+      </Container>
+    </div>
+  );
+}
+
+export const Playground: Story = {
+  name: '基本',
+  parameters: {
+    docs: {
+      source: sourceCode(`
+        <Container size="prose" render={<main />}>
+          <Prose>
+            <p>…</p>
+            <Bleed>
+              <Figure src="/photo.jpg" alt="…" caption="…" />
+            </Bleed>
+          </Prose>
+        </Container>
+      `),
+    },
+  },
+  render: () => <Article />,
+};
+
+// 画面の幅ごと。縮めて並べる。グレーが Container の左右の余白
+// 狭い画面では余白いっぱい（画面の端まで）。広い画面では本文の幅の 1/18 だけ広がり、余白の端までは届かない
+export const Screens: Story = {
+  tags: ['visual'],
+  name: '画面の幅',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-start gap-6 p-6">
+      <div data-density="coarse">
+        <ScreenOf width={390} height={760} scale={0.6}>
+          <Article />
+        </ScreenOf>
+      </div>
+      <div data-density="fine">
+        <ScreenOf width={1280} height={760} scale={0.45}>
+          <Article />
+        </ScreenOf>
+      </div>
+    </div>
+  ),
+};
+
+// props の確かめ: Prose の中で、Container の余白の端まで広がる（Container が幅の上限より狭いとき）
+export const FillsGutter: Story = {
+  name: '余白の端まで広がる',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {[320, 390, 600, 1000].map((width) => (
+        <div key={width} style={{ width }} data-width={width}>
+          <Container size={width === 1000 ? 'full' : 'prose'} className="bg-neutral">
+            <Prose className="bg-bg">
+              <p>本文</p>
+              <Bleed>
+                <div className="h-4 bg-primary" />
+              </Bleed>
+            </Prose>
+          </Container>
+        </div>
+      ))}
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const cases = canvasElement.querySelectorAll<HTMLElement>('[data-width]');
+    await waitFor(() => expect(cases.length).toBe(4));
+    for (const box of cases) {
+      const container = box
+        .querySelector<HTMLElement>('[data-slot="container"]')!
+        .getBoundingClientRect();
+      const bleed = box.querySelector<HTMLElement>('[data-slot="bleed"]')!.getBoundingClientRect();
+      await expect(Math.abs(bleed.left - container.left)).toBeLessThan(0.5);
+      await expect(Math.abs(bleed.right - container.right)).toBeLessThan(0.5);
+    }
+  },
+};
+
+// render で要素を変えられる
+export const Render: Story = {
+  name: '描く要素',
+  render: () => (
+    <Container size="prose">
+      <Bleed render={<section />}>本文の外へ広げる</Bleed>
+    </Container>
+  ),
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="bleed"]');
+    await expect(el?.tagName).toBe('SECTION');
+  },
+};
diff --git a/src/components/bleed/Bleed.tsx b/src/components/bleed/Bleed.tsx
new file mode 100644
index 0000000..dba7f37
--- /dev/null
+++ b/src/components/bleed/Bleed.tsx
@@ -0,0 +1,33 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps, ReactElement } from 'react';
+
+import { tv } from '../../internal/tv';
+
+// 本文の幅の外へ出す枠 — 軸 100
+//   Container の左右の余白いっぱいまで、左右に同じだけ広げる。Container が画面いっぱいのとき（スマートフォンなど）は、画面の端まで広がる
+//   Container が幅の上限で止まっているとき（広い画面）は、実際の余白ではなく本文の幅の 1/18 だけ広げる（prose で約 37px。余白は最大 48px）
+//   出す幅は --bleed-gutter（design/tokens.css）。Container の --container-gutter は % を含み、読む要素の親の幅で解決されるので、
+//     本文の中（Prose の中など）で読むと Container の余白と合わない。代わりに、本文の幅（Bleed の親の幅）から余白を逆算する
+//   Bleed の親が本文の幅いっぱいにあることを前提にする（Container の直下、Prose の直下、Prose の中の div の直下）
+//   見た目（色・線・角）を持たない。中の画像やコードの見た目はそのまま
+const bleed = tv({
+  base: '-mx-(--bleed-gutter)',
+});
+
+export interface BleedProps extends ComponentProps<'div'> {
+  /** 描く要素（Base UI の render と同じ）。figure などにするときは `render={<figure />}` を渡します */
+  render?: ReactElement;
+}
+
+/**
+ * 画像やコードを、本文の幅の外（Container の左右の余白）まで広げる枠
+ *
+ * Container の中の本文（Prose の中など）に置きます。本文の幅いっぱいの要素の直下に置いてください。
+ */
+export function Bleed({ className, render, ...props }: BleedProps) {
+  return useRender({
+    render,
+    defaultTagName: 'div',
+    props: { ...props, 'data-slot': 'bleed', className: bleed({ className }) },
+  });
+}
diff --git a/src/components/bleed/__screenshots__/Bleed.stories.tsx/components-bleed-screens-chromium-linux.png b/src/components/bleed/__screenshots__/Bleed.stories.tsx/components-bleed-screens-chromium-linux.png
new file mode 100644
index 0000000..9d0de96
Binary files /dev/null and b/src/components/bleed/__screenshots__/Bleed.stories.tsx/components-bleed-screens-chromium-linux.png differ
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 6f2e640..2bae398 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent } from 'storybook/test';
 
 import { Button, type ButtonProps } from './Button';
-import { CheckIcon } from '../../internal/icons';
+import { CheckIcon, CopyIcon, XIcon } from '../../internal/icons';
 import type { LoadingIndicator } from '../loading/Loading';
 import { DensityPair, Matrix } from '../../stories/story-parts';
 import { pressColumns, sourceCode, statePseudo } from '../../stories/story-states';
@@ -32,6 +32,7 @@ const meta = {
           '',
           '- 画面の中で最も進めたい操作を `appearance="filled"`（塗り）にし、それ以外は `outline`（枠線）にします。',
           '- 色は `color` で選びます。`primary` は進めたい操作、`secondary` は用途を限らない色、`danger` は削除などの危険な操作に使います。`white` は白いボタンで、お知らせの操作のように色の付いた面の上にも置けます。指定しないときはグレー（`neutral`）です。',
+          '- アイコンだけのボタンは `iconOnly` を付け、`aria-label` で読み上げの名前を必ず付けます。部品の高さの正方形になります。`shape="round"` で丸にできます。',
           '- 送信中は `loading` を付けます。押せないボタンと同じ見た目になり、押しても `onClick` を呼びません。`disabled` と違い、フォーカスは外れません。',
           '- 別の場所へ移るものは、ボタンではなくリンクで作ります。ボタンと同じ見た目が要るときは `<Link appearance="button">` を使います（Components/Link の「ボタンの見た目」）。',
         ].join('\n'),
@@ -257,6 +258,77 @@ export const WithIcon: Story = {
   ),
 };
 
+// Show code: 表（Matrix）の中身は出ないので、代表の使い方を source.code に手で書く
+export const IconOnly: Story = {
+  name: 'アイコンだけ',
+  tags: ['visual'],
+  parameters: {
+    pseudo: statePseudo({ hover: 'button', active: 'button', focusVisible: 'button' }),
+    controls: { exclude: ['appearance', 'color', 'disabled', 'children'] },
+    docs: {
+      description: {
+        story:
+          '`iconOnly` を付けると、部品の高さの正方形になります。各セルの左が `shape="square"`（既定。文字のボタンと同じ角）、右が `shape="round"`（丸）です。文字がないので、`aria-label` で読み上げの名前を必ず付けます（付けないと型で止まります）。アイコンは単体の太い線（`standalone`）で置きます。',
+      },
+      source: sourceCode(`
+        <Button iconOnly appearance="outline" aria-label="閉じる">
+          <Icon icon={XIcon} standalone />
+        </Button>
+        <Button iconOnly shape="round" appearance="outline" aria-label="コピー">
+          <Icon icon={CopyIcon} standalone />
+        </Button>
+      `),
+    },
+  },
+  render: (args) => (
+    <Matrix
+      rows={appearances.flatMap((appearance) =>
+        (['primary', 'neutral'] as const).map((color) => ({ appearance, color }))
+      )}
+      rowLabel={({ appearance, color }) => `${appearance} / ${color}`}
+      columns={pressColumns}
+      columnWidth="5rem"
+      renderCell={({ appearance, color }, { disabled }) => (
+        <div className="flex gap-3">
+          <Button
+            {...args}
+            iconOnly
+            aria-label="閉じる"
+            appearance={appearance}
+            color={color}
+            disabled={disabled}
+          >
+            <XIcon standalone />
+          </Button>
+          <Button
+            {...args}
+            iconOnly
+            shape="round"
+            aria-label="コピー"
+            appearance={appearance}
+            color={color}
+            disabled={disabled}
+          >
+            <CopyIcon standalone />
+          </Button>
+        </div>
+      )}
+    />
+  ),
+  play: async ({ canvas }) => {
+    // 名前は aria-label。幅と高さは同じ（正方形）
+    const button = canvas.getAllByRole('button', { name: '閉じる' })[0];
+    const { width, height } = button.getBoundingClientRect();
+    await expect(width).toBe(height);
+    // shape="round" は丸
+    const round = canvas.getAllByRole('button', { name: 'コピー' })[0];
+    await expect(round).toHaveAttribute('data-icon-only', 'round');
+    await expect(getComputedStyle(round).borderTopLeftRadius).not.toBe(
+      getComputedStyle(button).borderTopLeftRadius
+    );
+  },
+};
+
 export const Densities: Story = {
   name: '密度',
   tags: ['visual'],
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 3293a99..4c0dc8e 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -161,6 +161,18 @@ const button = tv({
   defaultVariants: { appearance: 'filled', color: 'neutral' },
 });
 
+// アイコンだけのボタン（iconOnly）: 部品の高さの正方形（幅の下限を高さと同じにし、左右の余白をなくす）
+//   形（shape）: square（既定）は文字のボタンと同じ部品の角、round は丸（pill）— 軸 101
+//   中に文字が加わったとき（CopyButton の「コピーしました」）は、使う側が左右の余白を足して横に伸ばす
+//   アイコンは単体なので太い線（design/adr/0018）。読み上げの名前（aria-label）は型で必須にする
+const iconOnlyClass = {
+  square: 'min-w-(--spacing-control) px-0 rounded-control',
+  round: 'min-w-(--spacing-control) px-0 rounded-pill',
+} as const;
+
+/** アイコンだけのボタンの形 */
+export type ButtonShape = keyof typeof iconOnlyClass;
+
 // キャプション（原則4）: ボタンの下に中央寄せで、小さくグレーの文字。間・大きさ・色は比べている途中（後半の軸 31）
 // ボタンとキャプションを包み（root）、className は包みに付ける（Switch・TextField と同じく、いちばん外の要素に付く）
 //   ボタンは包みの幅いっぱいに伸ばす（items-stretch）。包みに w-full を付けると、幅いっぱいのボタンになる
@@ -233,6 +245,15 @@ interface ButtonCaptionProps {
 export interface ButtonProps extends ButtonBaseProps, ButtonCaptionProps {
   /** @default 'button' */
   type?: ComponentProps<'button'>['type'];
+  /**
+   * アイコンだけのボタンにします。部品の高さの正方形になります。
+   * 文字がないので、読み上げの名前を aria-label で必ず付けます（ButtonIconOnlyProps）。
+   * アイコンは単体の太い線（Icon の standalone）で置きます
+   * @default false
+   */
+  iconOnly?: false;
+  /** 形はアイコンだけのボタン（iconOnly）でだけ選べる */
+  shape?: never;
   /**
    * 送信中。押せないボタンと同じ見た目になり、押しても onClick を呼ばない（フォームも送信しない）。
    * disabled と違い、フォーカスは外れない（aria-disabled・aria-busy）。
@@ -267,6 +288,23 @@ export interface ButtonProps extends ButtonBaseProps, ButtonCaptionProps {
   render?: undefined;
 }
 
+/** アイコンだけのボタン（iconOnly）の props。読み上げの名前（aria-label）が要ります */
+export interface ButtonIconOnlyProps extends Omit<
+  ButtonProps,
+  'iconOnly' | 'shape' | 'aria-label'
+> {
+  /** アイコンだけのボタンにします。部品の高さの正方形になります */
+  iconOnly: true;
+  /**
+   * 形。square は文字のボタンと同じ角の正方形、round は丸です。
+   * 中に文字が加わって横に伸びたときは、square は同じ角のまま、round は両端の丸い形になります
+   * @default 'square'
+   */
+  shape?: ButtonShape;
+  /** 読み上げの名前。文字がないので必ず付けます（例: 「削除」「コピー」） */
+  'aria-label': string;
+}
+
 /** ボタンの見た目のリンク（render を渡す）の props */
 export interface ButtonLinkProps extends ButtonLinkBaseProps, ButtonCaptionProps {
   /**
@@ -289,6 +327,9 @@ export interface ButtonLinkProps extends ButtonLinkBaseProps, ButtonCaptionProps
   inlineSpinner?: never;
   /** リンクには付けない */
   type?: never;
+  /** リンクのアイコンだけの形は Link で作る */
+  iconOnly?: never;
+  shape?: never;
   /**
    * 見た目。filled は塗り、outline は枠線です。画面内で最も進めたい操作は filled、それ以外は outline にします（原則7）。
    * ボタンの見た目のリンクでも角丸は 12px のままで、リンクは pill という規則の例外にはなりません（design/adr/0046）。
@@ -329,6 +370,8 @@ function ButtonLink({
   caption,
   children,
   ref,
+  iconOnly: _iconOnly,
+  shape: _shape,
   ...props
 }: ButtonLinkProps) {
   if (loading !== undefined || loadingIndicator !== undefined || inlineSpinner !== undefined)
@@ -381,9 +424,10 @@ function ButtonLink({
  * 型はボタンとリンクの2つの形で重ねる（overload）。props を union 1つにすると、render に要素（JSX）を渡したときに
  * どちらの形か決まらず、onClick={(e) => …} の e が any になる（JSX の要素は union を見分ける値にならない）
  */
+export function Button(props: ButtonIconOnlyProps): ReactElement;
 export function Button(props: ButtonProps): ReactElement;
 export function Button(props: ButtonLinkProps): ReactElement;
-export function Button(allProps: ButtonProps | ButtonLinkProps) {
+export function Button(allProps: ButtonProps | ButtonIconOnlyProps | ButtonLinkProps) {
   // リンクのときは別の部品で描く。ボタンのときは、キャプションがなければ <button> をそのまま返す（比較のストーリーが class を読むため）
   if (allProps.render) return <ButtonLink {...allProps} />;
   return <NativeButton {...allProps} />;
@@ -405,13 +449,17 @@ function NativeButton({
   loadingIndicator = 'spinner',
   inlineSpinner = false,
   caption,
+  iconOnly = false,
+  shape = 'square',
   onClick,
   children,
   ref,
   render: _render,
   'aria-describedby': ariaDescribedBy,
   ...props
-}: ButtonProps) {
+}: ButtonProps | ButtonIconOnlyProps) {
+  if (iconOnly && !props['aria-label'] && !props['aria-labelledby'])
+    warnOnce('Button: アイコンだけのボタン（iconOnly）には aria-label で読み上げの名前を付けます');
   const captionId = useId();
   const form = use(FormSubmitContext);
   const submit = form !== null && type === 'submit';
@@ -449,7 +497,12 @@ function NativeButton({
         onClick?.(event);
       }}
       // キャプションがあるときは、className は包みに付ける
-      className={button({ appearance, color, className: caption ? undefined : className })}
+      data-icon-only={iconOnly ? shape : undefined}
+      className={button({
+        appearance,
+        color,
+        className: [iconOnly && iconOnlyClass[shape], caption ? undefined : className],
+      })}
     >
       {inline && <Spinner className="text-(color:--button-ink)" />}
       {/* loading を使うボタン（Form の中の送信のボタンも）は、ラベルを包んで薄くできるようにする（包みは送信中でも変えない） */}
diff --git a/src/components/button/__screenshots__/Button.stories.tsx/components-button-icon-only-chromium-linux.png b/src/components/button/__screenshots__/Button.stories.tsx/components-button-icon-only-chromium-linux.png
new file mode 100644
index 0000000..947dd0d
Binary files /dev/null and b/src/components/button/__screenshots__/Button.stories.tsx/components-button-icon-only-chromium-linux.png differ
diff --git a/src/components/code-block/CodeBlock.tsx b/src/components/code-block/CodeBlock.tsx
index 90d4892..5f8f4d9 100644
--- a/src/components/code-block/CodeBlock.tsx
+++ b/src/components/code-block/CodeBlock.tsx
@@ -1,11 +1,11 @@
 import { type ComponentProps, type ReactNode, useEffect, useId, useRef } from 'react';
 
 import { focusRing } from '../../internal/focus-styles';
-import { CheckMarkIcon, CopyIcon } from '../../internal/icons';
+import { CopiedStatus, CopyGlyph } from '../../internal/copy/copy-parts';
+import { useCopy } from '../../internal/copy/use-copy';
 import { codeBlockStyles } from '../../internal/reading/code-block';
 import { tv } from '../../internal/tv';
 import { codeTextOf } from './code-text';
-import { useCopy } from './use-copy';
 
 // 複数行のコード（軸 64・66・67・68・69）
 // 色分けはブログ側がビルド時に Shiki で行い、この部品は色分けしたあとの HTML に見た目を付ける
@@ -240,13 +240,11 @@ export function CodeBlock({
             </span>
           ) : null}
           {/* アイコン単体なので Bold（design/adr/0018） */}
-          {copied ? <CheckMarkIcon standalone /> : <CopyIcon standalone />}
+          <CopyGlyph copied={copied} standalone />
         </button>
       ) : null}
       {/* コピーしたことを読み上げる。箱は先に置いておき、中身だけを入れる */}
-      <span role="status" className="sr-only">
-        {copied ? copiedLabel : ''}
-      </span>
+      <CopiedStatus copied={copied} label={copiedLabel} />
     </figure>
   );
 }
diff --git a/src/components/collapsible/Collapsible.tsx b/src/components/collapsible/Collapsible.tsx
index 8d07484..dad0ad6 100644
--- a/src/components/collapsible/Collapsible.tsx
+++ b/src/components/collapsible/Collapsible.tsx
@@ -2,7 +2,7 @@ import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 
 import { CaretDownIcon } from '../../internal/icons';
-import { collapsibleStyles } from './collapsible-styles';
+import { collapsibleStyles } from '../../internal/collapsible-styles';
 
 export type CollapsibleAppearance = 'plain' | 'open-filled' | 'filled' | 'divided';
 export type CollapsibleIndicator = 'end' | 'start';
diff --git a/src/components/copy-button/CopyButton.stories.tsx b/src/components/copy-button/CopyButton.stories.tsx
new file mode 100644
index 0000000..e249de0
--- /dev/null
+++ b/src/components/copy-button/CopyButton.stories.tsx
@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+// userEvent は play の引数ではなく storybook/test から読む
+// 引数の userEvent は、LAN の IP で開いたとき（clipboard のない環境）は空になり、click などが呼べない
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+
+import { CopyButton, type CopyButtonFeedback, type CopyButtonProps } from './CopyButton';
+import { CopiedPreviewContext } from '../../internal/copy/use-copy';
+import { DensityPair, Matrix } from '../../stories/story-parts';
+import { type StateColumn, sourceCode, statePseudo } from '../../stories/story-states';
+
+const feedbacks: CopyButtonFeedback[] = ['tooltip', 'label'];
+const forms = [
+  { label: '文字', iconOnly: false, shape: undefined },
+  { label: 'アイコンだけ（square）', iconOnly: true, shape: 'square' },
+  { label: 'アイコンだけ（round）', iconOnly: true, shape: 'round' },
+] as const;
+type Column = StateColumn & { copied?: boolean };
+const stateColumns: Column[] = [
+  { label: '通常' },
+  { label: 'hover', state: 'hover' },
+  { label: 'フォーカス（キーボード）', state: 'focus' },
+  { label: '押せない', disabled: true },
+];
+
+/** クリップボードの代わりを置いて、fn を返す。戻すときは restore を呼ぶ */
+function stubClipboard(writeText = fn(async (_text: string) => {})) {
+  const original = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+  const restore = () => {
+    if (original) Object.defineProperty(navigator, 'clipboard', original);
+    else Reflect.deleteProperty(navigator, 'clipboard');
+  };
+  return { writeText, restore };
+}
+
+const meta = {
+  title: 'Components/CopyButton',
+  component: CopyButton,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '文字列をクリップボードに写すボタンです。写せると印がチェックに変わり、読み上げでも「コピーしました」と知らせます。',
+          '',
+          '- 写す文字列は `text` に渡します。関数を渡すと、押したときに呼んで、返した文字列を写します。',
+          '- 既定は「コピー」の文字の付いた枠線のボタンです。並びが詰まっているところでは `iconOnly` でアイコンだけにします。アイコンだけのときは `label` が読み上げの名前になり、マウスを載せたときやキーボードでフォーカスしたときに吹き出しでも出ます。',
+          '- アイコンだけのボタンの形は `shape` で選びます。`square`（既定）は文字のボタンと同じ角の正方形、`round` は丸です。',
+          '- 何を写すのかが周りから分からないときは、`label="URL をコピー"` のように書きます。',
+          '- 写せたことの見せ方は `feedback` で選びます。`tooltip`（既定）は吹き出しで「コピーしました」を出し、ボタンの幅は変わりません。`label` はボタンの中の文字を「コピーしました」に変え、文字の分だけボタンが横に伸びます。',
+          '- 写せなかったとき（権限がない・安全でない接続）は見た目が変わりません。知らせるときは `onCopyError` を使います。',
+        ].join('\n'),
+      },
+    },
+  },
+  // Controls で既定の値を選んだ状態から始める（部品の既定と同じ値）
+  args: {
+    text: 'pnpm add @kazuemon/ui',
+    label: 'コピー',
+    copiedLabel: 'コピーしました',
+    iconOnly: false,
+    shape: 'square',
+    feedback: 'tooltip',
+    appearance: 'outline',
+    color: 'neutral',
+    disabled: false,
+    onCopied: fn(),
+    onCopyError: fn(),
+  },
+  argTypes: {
+    text: { control: 'text' },
+    label: { control: 'text', table: { defaultValue: { summary: "'コピー'" } } },
+    copiedLabel: { control: 'text', table: { defaultValue: { summary: "'コピーしました'" } } },
+    iconOnly: { control: 'boolean', table: { defaultValue: { summary: 'false' } } },
+    shape: {
+      control: 'inline-radio',
+      options: ['square', 'round'],
+      table: { defaultValue: { summary: "'square'" } },
+    },
+    feedback: {
+      control: 'inline-radio',
+      options: feedbacks,
+      table: { defaultValue: { summary: "'tooltip'" } },
+    },
+    appearance: {
+      control: 'inline-radio',
+      options: ['filled', 'outline'],
+      table: { defaultValue: { summary: "'outline'" } },
+    },
+    color: {
+      control: 'inline-radio',
+      options: ['primary', 'secondary', 'danger', 'neutral', 'white'],
+      table: { defaultValue: { summary: "'neutral'" } },
+    },
+  },
+} satisfies Meta<CopyButtonProps>;
+
+export default meta;
+type Story = StoryObj<Meta<CopyButtonProps>>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+export const States: Story = {
+  name: '形と状態',
+  tags: ['visual'],
+  parameters: {
+    controls: { exclude: ['iconOnly', 'shape', 'disabled'] },
+    pseudo: statePseudo({
+      hover: '[data-slot="copy-button"]',
+      focusVisible: '[data-slot="copy-button"]',
+    }),
+    docs: {
+      description: {
+        story: '行が形、列が状態です。押して写せたあとの見た目は「写せたことの見せ方」にあります。',
+      },
+      source: sourceCode(`
+        <CopyButton text="pnpm add @kazuemon/ui" />
+        <CopyButton text="pnpm add @kazuemon/ui" iconOnly />
+        <CopyButton text="pnpm add @kazuemon/ui" iconOnly shape="round" />
+      `),
+    },
+  },
+  render: (args) => (
+    <Matrix
+      rows={forms}
+      rowLabel={(form) => form.label}
+      columns={stateColumns}
+      columnWidth="10rem"
+      renderCell={(form, { disabled }) => (
+        <CopyButton {...args} iconOnly={form.iconOnly} shape={form.shape} disabled={disabled} />
+      )}
+    />
+  ),
+};
+
+export const Feedback: Story = {
+  name: '写せたことの見せ方',
+  tags: ['visual'],
+  parameters: {
+    controls: { exclude: ['iconOnly', 'shape', 'feedback'] },
+    docs: {
+      description: {
+        story:
+          '行が `feedback`、列が形です。どれも押して写せたあと（2 秒のあいだ）の見た目に止めています。',
+      },
+      source: sourceCode(`
+        {/* 既定: 吹き出しで「コピーしました」 */}
+        <CopyButton text="…" />
+        {/* ボタンの中の文字を「コピーしました」に変える */}
+        <CopyButton text="…" feedback="label" />
+      `),
+    },
+  },
+  render: (args) => (
+    <Matrix
+      rows={feedbacks}
+      rowLabel={(feedback) => feedback}
+      columns={forms}
+      columnWidth="12rem"
+      renderCell={(feedback, form) => (
+        // 吹き出しは下に出るので、その分を空けておく
+        <div className="pb-12">
+          <CopiedPreviewContext value>
+            <CopyButton {...args} feedback={feedback} iconOnly={form.iconOnly} shape={form.shape} />
+          </CopiedPreviewContext>
+        </div>
+      )}
+    />
+  ),
+};
+
+export const Densities: Story = {
+  name: '密度',
+  tags: ['visual'],
+  render: (args) => (
+    <DensityPair>
+      <div className="flex flex-wrap items-center gap-3">
+        <CopyButton {...args} />
+        <CopyButton {...args} iconOnly />
+        <CopyButton {...args} iconOnly shape="round" />
+      </div>
+    </DensityPair>
+  ),
+};
+
+// play: 読み上げと、写す文字列の確かめ
+export const Accessibility: Story = {
+  name: '読み上げ',
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <CopyButton {...args} />
+      <CopyButton {...args} iconOnly label="URL をコピー" text={() => 'https://k6n.jp/'} />
+    </div>
+  ),
+  play: async ({ args, canvas }) => {
+    const { writeText, restore } = stubClipboard();
+    try {
+      // 文字のボタン: 名前は「コピー」のまま。写せたら読み上げで知らせる
+      const button = canvas.getByRole('button', { name: 'コピー' });
+      await userEvent.click(button);
+      await waitFor(() => expect(writeText).toHaveBeenCalledWith('pnpm add @kazuemon/ui'));
+      await expect(args.onCopied).toHaveBeenCalledWith('pnpm add @kazuemon/ui');
+      await waitFor(() =>
+        expect(canvas.getAllByRole('status')[0]).toHaveTextContent('コピーしました')
+      );
+      await expect(button).toHaveAccessibleName('コピー');
+      await expect(button).toHaveAttribute('data-copied');
+      // 既定（tooltip）では、吹き出しで「コピーしました」を出す
+      const body = within(document.body);
+      await waitFor(() =>
+        expect(
+          body.getByText('コピーしました', { selector: '[data-slot="tooltip"]' })
+        ).toBeVisible()
+      );
+      // アイコンだけのボタン: label が名前。関数を渡すと、押したときに呼ぶ
+      await userEvent.click(canvas.getByRole('button', { name: 'URL をコピー' }));
+      await waitFor(() => expect(writeText).toHaveBeenLastCalledWith('https://k6n.jp/'));
+    } finally {
+      restore();
+    }
+  },
+};
+
+export const CopyError: Story = {
+  name: '写せなかったとき',
+  play: async ({ args, canvas }) => {
+    const { restore } = stubClipboard(
+      fn(async (_text: string) => {
+        throw new Error('denied');
+      })
+    );
+    try {
+      const button = canvas.getByRole('button', { name: 'コピー' });
+      await userEvent.click(button);
+      await waitFor(() => expect(args.onCopyError).toHaveBeenCalledTimes(1));
+      await expect(button).not.toHaveAttribute('data-copied');
+      await expect(canvas.getByRole('status')).toHaveTextContent('');
+    } finally {
+      restore();
+    }
+  },
+};
diff --git a/src/components/copy-button/CopyButton.tsx b/src/components/copy-button/CopyButton.tsx
new file mode 100644
index 0000000..186cff8
--- /dev/null
+++ b/src/components/copy-button/CopyButton.tsx
@@ -0,0 +1,166 @@
+import { useState } from 'react';
+
+import { CopiedStatus, CopyGlyph } from '../../internal/copy/copy-parts';
+import { useCopy } from '../../internal/copy/use-copy';
+import { Button, type ButtonProps, type ButtonShape } from '../button/Button';
+import { Tooltip } from '../tooltip/Tooltip';
+
+// 文字列をクリップボードに写すボタン。見た目は Button（枠線のグレーが既定。原則7: 画面で最も進めたい操作ではないため）
+// コピーできたことの見せ方は CodeBlock のコピーのボタンに倣う（design/adr/0092）: 印がチェックに変わり、読み上げで知らせる
+//   印と読み上げの箱は CodeBlock と共有する（internal/copy）
+// feedback（軸 102）: tooltip（既定）は Tooltip で「コピーしました」を出す。ボタンの幅は変わらない
+//   アイコンだけのボタンの tooltip では、マウスを載せたとき・キーボードでフォーカスしたときにも名前（「コピー」）を出す
+//   label は「コピーしました」の文字をボタンの中に出す（CodeBlock と同じ）。文字の分だけ横に伸びる
+//   どちらも印はチェックに変わる。読み上げの名前はいつも label（aria-label）。「コピーしました」は読み上げの箱（CopiedStatus）で知らせる
+// 形（shape、軸 101）: アイコンだけのボタンの形。square（既定）は部品の角、round は丸
+// 押すと写せたあいだ（2 秒）だけ、コピーしたあとの見た目になる。写せなかったとき（権限がない・安全でない接続）は変わらない
+
+const COPIED_DURATION = 2000;
+
+/** コピーできたことの見せ方 */
+export type CopyButtonFeedback = 'tooltip' | 'label';
+
+export interface CopyButtonProps extends Omit<
+  ButtonProps,
+  | 'children'
+  | 'iconOnly'
+  | 'loading'
+  | 'loadingIndicator'
+  | 'inlineSpinner'
+  | 'type'
+  | 'render'
+  | 'appearance'
+  | 'shape'
+> {
+  /** 写す文字列。関数を渡すと、押したときに呼んで、返した文字列を写します */
+  text: string | (() => string);
+  /**
+   * ボタンの文字と読み上げの名前。アイコンだけのボタンでは、読み上げの名前になります。
+   * 何を写すのかが周りから分からないときは、「URL をコピー」のように書きます
+   * @default 'コピー'
+   */
+  label?: string;
+  /**
+   * 写せたあとに出して読み上げる文
+   * @default 'コピーしました'
+   */
+  copiedLabel?: string;
+  /**
+   * アイコンだけのボタンにします。部品の高さの正方形になり、label は読み上げの名前になります
+   * @default false
+   */
+  iconOnly?: boolean;
+  /**
+   * アイコンだけのボタン（iconOnly）の形。square は文字のボタンと同じ角の正方形、round は丸です
+   * @default 'square'
+   */
+  shape?: ButtonShape;
+  /**
+   * 写せたことの見せ方。どちらも印がチェックに変わり、読み上げでは copiedLabel を知らせます。
+   * tooltip は吹き出しで「コピーしました」を出し、ボタンの幅は変わりません（アイコンだけのボタンでは、
+   * マウスを載せたとき・キーボードでフォーカスしたときにも label を出します）。
+   * label は「コピーしました」の文字をボタンの中に出し、文字の分だけボタンが横に伸びます
+   * @default 'tooltip'
+   */
+  feedback?: CopyButtonFeedback;
+  /**
+   * 見た目。filled は塗り、outline は枠線です。
+   * @default 'outline'
+   */
+  appearance?: ButtonProps['appearance'];
+  /** 写せたときに、写した文字列を受け取ります */
+  onCopied?: (text: string) => void;
+  /** 写せなかったとき（権限がない・安全でない接続）に呼びます。見た目は変わらないので、必要なら使う側で知らせます */
+  onCopyError?: () => void;
+}
+
+/**
+ * 文字列をクリップボードに写すボタン。写せると印がチェックに変わり、読み上げでも知らせます
+ */
+export function CopyButton({
+  text,
+  label = 'コピー',
+  copiedLabel = 'コピーしました',
+  iconOnly = false,
+  feedback = 'tooltip',
+  shape,
+  appearance = 'outline',
+  onCopied,
+  onCopyError,
+  onClick,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: CopyButtonProps) {
+  const { copied, copy } = useCopy(COPIED_DURATION);
+  // アイコンだけのボタンの tooltip で、マウスを載せて名前を出しているか
+  const [hovered, setHovered] = useState(false);
+
+  const handleClick: ButtonProps['onClick'] = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    const value = typeof text === 'function' ? text() : text;
+    void copy(value).then((ok) => (ok ? onCopied?.(value) : onCopyError?.()));
+  };
+
+  const showLabel = feedback === 'label';
+  const glyph = <CopyGlyph copied={copied} standalone={iconOnly} />;
+  const common = {
+    ...props,
+    appearance,
+    onClick: handleClick,
+    'data-slot': 'copy-button',
+    'data-copied': copied ? '' : undefined,
+  };
+
+  let button;
+  if (iconOnly) {
+    // 文字が加わるときは、CodeBlock のボタンと同じく、印の左右の余白を (高さ − 印) / 2 にして横に伸ばす
+    const grown = showLabel && copied;
+    button = (
+      <Button
+        {...common}
+        iconOnly
+        shape={shape}
+        aria-label={ariaLabel ?? label}
+        className={[
+          grown && 'gap-1.5 px-[calc((var(--spacing-control)-var(--spacing-icon))/2)]',
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {glyph}
+        {grown ? <span aria-hidden="true">{copiedLabel}</span> : null}
+      </Button>
+    );
+  } else {
+    // 名前はいつも label（「コピーしました」は読み上げの箱で知らせるので、名前には入れない）
+    button = (
+      <Button {...common} aria-label={ariaLabel ?? label} className={className}>
+        {glyph}
+        {showLabel && copied ? <span aria-hidden="true">{copiedLabel}</span> : label}
+      </Button>
+    );
+  }
+
+  if (feedback !== 'label') {
+    button = (
+      <Tooltip
+        content={copied ? copiedLabel : label}
+        open={copied || (iconOnly && hovered)}
+        onOpenChange={setHovered}
+        disabled={props.disabled}
+      >
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return (
+    <>
+      {button}
+      <CopiedStatus copied={copied} label={copiedLabel} />
+    </>
+  );
+}
diff --git a/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-densities-chromium-linux.png b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-densities-chromium-linux.png
new file mode 100644
index 0000000..646279e
Binary files /dev/null and b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-densities-chromium-linux.png differ
diff --git a/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-feedback-chromium-linux.png b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-feedback-chromium-linux.png
new file mode 100644
index 0000000..c1baf82
Binary files /dev/null and b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-feedback-chromium-linux.png differ
diff --git a/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-states-chromium-linux.png b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-states-chromium-linux.png
new file mode 100644
index 0000000..1616986
Binary files /dev/null and b/src/components/copy-button/__screenshots__/CopyButton.stories.tsx/components-copybutton-states-chromium-linux.png differ
diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
index 4b9a0cd..124162e 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/src/components/dialog/Dialog.tsx
@@ -1,10 +1,12 @@
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
-import { type ReactElement, type ReactNode, useId, useState } from 'react';
+import { type ReactElement, type ReactNode, use, useId, useState } from 'react';
 
 import { useDensityScope } from '../../internal/density-scope';
 import { ESCAPE_REASONS } from '../../internal/overlay/close-reasons';
 import { initialFocusOf } from '../../internal/overlay/initial-focus';
 import { OverlayCloseContext } from '../../internal/overlay/overlay-close-context';
+import { type OverlayRole, OverlayRoleContext } from '../../internal/overlay/overlay-role-context';
+import { PopupRole } from '../../internal/overlay/popup-role';
 import { SheetCloseButton, SheetHeader } from '../../internal/sheet/SheetHeader';
 import {
   overlayTitleLeading,
@@ -92,8 +94,19 @@ export function Dialog({
   open: openProp,
   defaultOpen = false,
   onOpenChange,
+  children,
+  actions,
   ...props
 }: DialogProps) {
+  // 読み上げの役割。AlertDialog が包んだときだけ alertdialog になる
+  const role = use(OverlayRoleContext);
+  // 中身と下の操作には dialog を配り直す（中に置いた Dialog に alertdialog が写らないようにする）
+  const inner = (node: ReactNode) =>
+    node == null || role === 'dialog' ? (
+      node
+    ) : (
+      <OverlayRoleContext value="dialog">{node}</OverlayRoleContext>
+    );
   // 開閉はここで持つ。出し方（シート・中央）が開いたまま切り替わっても（画面を回すなど）、閉じないようにするため
   const [openState, setOpenState] = useState(defaultOpen);
   const open = openProp ?? openState;
@@ -109,18 +122,32 @@ export function Dialog({
     return (
       <Drawer
         {...props}
+        actions={inner(actions)}
         open={open}
         onOpenChange={changeOpen}
         dismissible={dismissible}
         closeOnSwipe={dismissible}
         detent="full"
-      />
+      >
+        {/* シートの面は役割を props で受け取らないので、中身から書き換える */}
+        {role !== 'dialog' && <PopupRole role={role} />}
+        {inner(children)}
+      </Drawer>
     );
   }
   // 中央に浮かべるときは、下の操作をいつも右に寄せる（actionsLayout はシートのときだけ）
   const { actionsLayout: _actionsLayout, ...centered } = props;
   return (
-    <CenteredDialog {...centered} open={open} onOpenChange={changeOpen} dismissible={dismissible} />
+    <CenteredDialog
+      {...centered}
+      role={role}
+      actions={inner(actions)}
+      open={open}
+      onOpenChange={changeOpen}
+      dismissible={dismissible}
+    >
+      {inner(children)}
+    </CenteredDialog>
   );
 }
 
@@ -131,6 +158,7 @@ export function Dialog({
 //   開閉は浮かぶ面と同じ動き（下に --popup-shift 寄った位置から、濃さと一緒に滑る）。動きを減らす設定では動かさない
 //   中身が画面より高いときは、面ごと画面の中でスクロールする
 function CenteredDialog({
+  role,
   title,
   description,
   children,
@@ -146,6 +174,7 @@ function CenteredDialog({
   container,
   className,
 }: Omit<DialogProps, 'presentation' | 'defaultOpen' | 'open' | 'onOpenChange'> & {
+  role: OverlayRole;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }) {
@@ -174,6 +203,8 @@ function CenteredDialog({
             <BaseDialog.Popup
               data-overlay-id={overlayId}
               initialFocus={initialFocusOf(overlayId, 'dialog')}
+              // 読み上げの役割（Base UI の既定は dialog。AlertDialog が包んだときは alertdialog）
+              role={role}
               data-slot="dialog"
               data-density={scope.density}
               className={[
diff --git a/src/components/mark/Mark.stories.tsx b/src/components/mark/Mark.stories.tsx
new file mode 100644
index 0000000..d03ce06
--- /dev/null
+++ b/src/components/mark/Mark.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+
+import { Mark } from './Mark';
+import { Blockquote } from '../blockquote/Blockquote';
+import { Heading } from '../heading/Heading';
+import { Link } from '../link/Link';
+import { Text } from '../text/Text';
+import { Gallery, Specimen } from '../../stories/story-parts';
+
+const meta = {
+  title: 'Components/Mark',
+  component: Mark,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '文の中で目立たせたい言葉です。検索で当たった語や、読み手に拾ってほしい一句に使います。',
+          '',
+          '- 黄色を薄く敷きます。文字の色は周りの文字のままです。',
+          '- 黄色は Primary の青の反対の色なので、青い文字のリンクと並んでも紛れません。',
+          '- 強く言いたいだけなら `strong` を使います。Mark は、読み手の目を止めたいところに使います。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: { children: '密度は入力方式で切り替えます' },
+  argTypes: {
+    children: { control: 'text' },
+  },
+  render: (args) => (
+    <Text>
+      この UI では、
+      <Mark {...args} />
+      。画面の幅では切り替えません。
+    </Text>
+  ),
+} satisfies Meta<typeof Mark>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+export const Grounds: Story = {
+  tags: ['visual'],
+  name: '置く場所',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: { story: '見出し・本文・注記・グレーの面と、行をまたいで折り返したときです。' },
+    },
+  },
+  render: () => (
+    <Gallery columnWidth="18rem">
+      <Specimen label="見出し・本文・注記">
+        <div className="flex flex-col gap-2">
+          <Heading level={3}>
+            <Mark>密度</Mark>の切り替え
+          </Heading>
+          <Text>
+            <Mark>指で操作しているとき</Mark>は、部品を大きくします。
+            <Link href="#density">密度について</Link>
+          </Text>
+          <Text size="sm" tone="subtle">
+            注記の中の <Mark>Mark</Mark>
+          </Text>
+        </div>
+      </Specimen>
+      <Specimen label="グレーの面">
+        <Blockquote appearance="surface">
+          色は<Mark>役割で持ちます</Mark>。
+        </Blockquote>
+      </Specimen>
+      <Specimen label="折り返し">
+        <Text className="w-[14rem]">
+          部品の大きさは、<Mark>画面の幅ではなく、マウスか指かで切り替えます</Mark>。
+        </Text>
+      </Specimen>
+    </Gallery>
+  ),
+};
+
+export const Accessibility: Story = {
+  name: '要素',
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('密度は入力方式で切り替えます').tagName).toBe('MARK');
+  },
+};
diff --git a/src/components/mark/Mark.tsx b/src/components/mark/Mark.tsx
new file mode 100644
index 0000000..4579972
--- /dev/null
+++ b/src/components/mark/Mark.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+
+import { markStyles } from '../../internal/reading/mark';
+import { tv } from '../../internal/tv';
+
+// 目立たせたい言葉。見た目のクラス列は src/internal/reading/mark.ts（Prose も同じものを使う）
+const mark = tv({ base: markStyles });
+
+export type MarkProps = ComponentProps<'mark'>;
+
+/**
+ * 文の中で目立たせたい言葉。黄色を薄く敷きます
+ */
+export function Mark({ className, ...props }: MarkProps) {
+  return <mark className={mark({ className })} {...props} />;
+}
diff --git a/src/components/mark/__screenshots__/Mark.stories.tsx/components-mark-grounds-chromium-linux.png b/src/components/mark/__screenshots__/Mark.stories.tsx/components-mark-grounds-chromium-linux.png
new file mode 100644
index 0000000..d3c3a93
Binary files /dev/null and b/src/components/mark/__screenshots__/Mark.stories.tsx/components-mark-grounds-chromium-linux.png differ
diff --git a/src/components/number-format/NumberFormat.stories.tsx b/src/components/number-format/NumberFormat.stories.tsx
new file mode 100644
index 0000000..c9b0ac6
--- /dev/null
+++ b/src/components/number-format/NumberFormat.stories.tsx
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+
+import { NumberFormat } from './NumberFormat';
+import { Text } from '../text/Text';
+import { Gallery, Specimen } from '../../stories/story-parts';
+
+const meta = {
+  title: 'Components/NumberFormat',
+  component: NumberFormat,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '数・通貨・割合・単位です。`<data value>` を出し、読む文字は `Intl.NumberFormat` で書きます。',
+          '',
+          '- 何も指定しなければ、3 桁ごとに区切った数です。',
+          '- `currency`（JPY・USD など）で通貨、`percent` で割合（1 を 100% として渡します）、`unit`（kilometer・megabyte など）で単位を付けます。',
+          '- JPY は既定で「￥1,280」です。`currencyDisplay="name"` で「1,280円」になります。',
+          '- 数字は等幅なので、右にそろえて縦に並べると桁がそろいます。',
+          '- 細かく決めるときは `format` に Intl の指定を渡します。',
+          '- 大きさと濃さは周りの文字のままです。`size`・`tone` で Text と同じ大きさ・濃さにできます。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: { value: 1280, locale: 'ja-JP' },
+  argTypes: {
+    value: { control: 'number' },
+    currency: { control: 'text' },
+    currencyDisplay: {
+      control: 'inline-radio',
+      options: ['symbol', 'narrowSymbol', 'code', 'name'],
+    },
+    percent: { control: 'boolean' },
+    unit: { control: 'text' },
+    unitDisplay: { control: 'inline-radio', options: ['short', 'long', 'narrow'] },
+    size: { control: 'inline-radio', options: ['md', 'sm'] },
+    tone: { control: 'inline-radio', options: ['default', 'muted', 'subtle'] },
+    locale: { control: 'text' },
+  },
+  render: (args) => (
+    <Text>
+      <NumberFormat {...args} />
+    </Text>
+  ),
+} satisfies Meta<typeof NumberFormat>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+export const Kinds: Story = {
+  tags: ['visual'],
+  name: '数・通貨・割合・単位',
+  parameters: {
+    controls: { disable: true },
+    docs: { description: { story: '同じ部品で、書き方を変えて並べたものです。' } },
+  },
+  render: () => (
+    <Gallery columnWidth="14rem">
+      <Specimen label="数">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <NumberFormat value={1280} />
+          </Text>
+          <Text>
+            <NumberFormat value={1.23456} maximumFractionDigits={2} />
+          </Text>
+          <Text>
+            <NumberFormat value={12800000} format={{ notation: 'compact' }} />
+          </Text>
+        </div>
+      </Specimen>
+      <Specimen label="通貨">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <NumberFormat value={1280} currency="JPY" />
+          </Text>
+          <Text>
+            <NumberFormat value={1280} currency="JPY" currencyDisplay="name" />
+          </Text>
+          <Text>
+            <NumberFormat value={12.5} currency="USD" />
+          </Text>
+        </div>
+      </Specimen>
+      <Specimen label="割合・単位">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <NumberFormat value={0.125} percent maximumFractionDigits={1} />
+          </Text>
+          <Text>
+            <NumberFormat value={42.195} unit="kilometer" />
+          </Text>
+          <Text>
+            <NumberFormat value={512} unit="megabyte" unitDisplay="narrow" />
+          </Text>
+        </div>
+      </Specimen>
+    </Gallery>
+  ),
+};
+
+export const Aligned: Story = {
+  tags: ['visual'],
+  name: '縦に並べる',
+  parameters: {
+    controls: { disable: true },
+    docs: { description: { story: '右にそろえて縦に並べると、桁がそろいます。' } },
+  },
+  render: () => (
+    <div className="flex w-[12rem] flex-col items-end gap-1">
+      {[1111, 980, 12800, 4096, 71].map((n) => (
+        <Text key={n}>
+          <NumberFormat value={n} currency="JPY" currencyDisplay="name" />
+        </Text>
+      ))}
+    </div>
+  ),
+};
+
+export const Accessibility: Story = {
+  name: '要素',
+  args: { value: 1280, currency: 'JPY' },
+  play: async ({ canvas }) => {
+    const el = canvas.getByText('￥1,280');
+    await expect(el.tagName).toBe('DATA');
+    await expect(el).toHaveAttribute('value', '1280');
+  },
+};
diff --git a/src/components/number-format/NumberFormat.tsx b/src/components/number-format/NumberFormat.tsx
new file mode 100644
index 0000000..b1fcb71
--- /dev/null
+++ b/src/components/number-format/NumberFormat.tsx
@@ -0,0 +1,114 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+import { useLocale } from '../../internal/date/use-locale';
+import { textStyles } from '../../internal/reading/text';
+import { tv } from '../../internal/tv';
+
+// 数・通貨・割合・単位。見た目は Text と同じ役割（src/internal/reading/text.ts）で、大きさと濃さは指定しなければ周りの文字のまま
+// 数字の幅は変えない（欧文フォント Mulish の数字は、はじめから等幅）
+const numberFormat = tv({
+  variants: {
+    size: textStyles.size,
+    tone: textStyles.tone,
+  },
+});
+
+export interface NumberFormatProps
+  extends Omit<ComponentProps<'data'>, 'value'>, VariantProps<typeof numberFormat> {
+  /**
+   * 数。`percent` のときは 1 を 100% として渡します（0.12 は 12%）
+   */
+  value: number | bigint;
+  /**
+   * 通貨として書きます。ISO 4217 の通貨コード（JPY・USD など）
+   */
+  currency?: string;
+  /**
+   * 通貨の書き方。ja-JP の JPY では、symbol は「￥1,280」、name は「1,280円」です
+   * @default 'symbol'
+   */
+  currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
+  /**
+   * 割合として書きます（0.12 は「12%」）
+   * @default false
+   */
+  percent?: boolean;
+  /**
+   * 単位を付けて書きます。Intl の単位名（kilometer・megabyte・kilometer-per-hour など）
+   */
+  unit?: string;
+  /**
+   * 単位の書き方。short は「12 km」、long は「12 キロメートル」、narrow は「12km」です
+   * @default 'short'
+   */
+  unitDisplay?: Intl.NumberFormatOptions['unitDisplay'];
+  /**
+   * 小数の桁数の上限。指定しなければ、数は 3 桁、通貨は通貨の桁（JPY は 0、USD は 2）、割合は 0 桁です
+   */
+  maximumFractionDigits?: number;
+  /**
+   * Intl.NumberFormat の指定をそのまま渡します。ほかの指定より優先します
+   */
+  format?: Intl.NumberFormatOptions;
+  /**
+   * 言語と地域。書かなければ ThemeProvider の locale、それもなければ ja-JP です
+   */
+  locale?: string;
+  /**
+   * 大きさ。指定しなければ周りの文字のままです。md は本文、sm は注記です
+   */
+  size?: VariantProps<typeof numberFormat>['size'];
+  /**
+   * 濃さ。指定しなければ周りの文字のままです
+   */
+  tone?: VariantProps<typeof numberFormat>['tone'];
+  /**
+   * 書く文字を自分で決めるときに渡します。value 属性は value から作ります
+   */
+  children?: ReactNode;
+}
+
+/**
+ * 数・通貨・割合・単位。`<data value>` を出し、読む文字は Intl.NumberFormat で書きます
+ */
+export function NumberFormat({
+  value,
+  currency,
+  currencyDisplay,
+  percent = false,
+  unit,
+  unitDisplay,
+  maximumFractionDigits,
+  format,
+  locale: localeProp,
+  size,
+  tone,
+  className,
+  children,
+  ...props
+}: NumberFormatProps) {
+  const { locale } = useLocale(localeProp);
+  const style: Intl.NumberFormatOptions['style'] = currency
+    ? 'currency'
+    : percent
+      ? 'percent'
+      : unit
+        ? 'unit'
+        : 'decimal';
+  const text = new Intl.NumberFormat(locale, {
+    style,
+    currency,
+    currencyDisplay,
+    unit,
+    unitDisplay,
+    maximumFractionDigits,
+    ...format,
+  }).format(value);
+
+  return (
+    <data value={String(value)} className={numberFormat({ size, tone, className })} {...props}>
+      {children ?? text}
+    </data>
+  );
+}
diff --git a/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-aligned-chromium-linux.png b/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-aligned-chromium-linux.png
new file mode 100644
index 0000000..7b784b7
Binary files /dev/null and b/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-aligned-chromium-linux.png differ
diff --git a/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-kinds-chromium-linux.png b/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-kinds-chromium-linux.png
new file mode 100644
index 0000000..b96b5e3
Binary files /dev/null and b/src/components/number-format/__screenshots__/NumberFormat.stories.tsx/components-numberformat-kinds-chromium-linux.png differ
diff --git a/src/components/prose/inline-styles.ts b/src/components/prose/inline-styles.ts
index 265f444..fb148b8 100644
--- a/src/components/prose/inline-styles.ts
+++ b/src/components/prose/inline-styles.ts
@@ -1,6 +1,8 @@
+import { markStyles } from '../../internal/reading/mark';
 import { tv } from '../../internal/tv';
 
 // 文字の飾り（軸 57）。Prose が、素の HTML の strong・em・del・mark に当てる見た目
+// mark は Mark 部品と同じクラス列（src/internal/reading/mark.ts）
 // 要素に付けても、Prose の根に付けても効く形で書く（src/internal/reading/heading.ts の先頭）
 // strong と em はブラウザの既定のまま（太さ 700、斜体。和文は傾けて描かれる）
 // del は、打ち消した文を目立たせない文として、文字も線も --color-fg-subtle にする（軸 57 の A）
@@ -10,7 +12,6 @@ export const inlineStyles = tv({
     strong: '[:where(&:not([data-prose]),&_strong)]:font-bold',
     em: '[:where(&:not([data-prose]),&_em)]:italic',
     del: '[:where(&:not([data-prose]),&_del)]:text-fg-subtle [:where(&:not([data-prose]),&_del)]:line-through [:where(&:not([data-prose]),&_del)]:decoration-fg-subtle',
-    // 目立たせたい言葉（軸 63 の C）。警告の黄色（面用）を 45% に薄めて全面に敷く蛍光ペンの形。Primary の青の補色で、青いリンクと紛れない
-    mark: '[:where(&:not([data-prose]),&_mark)]:rounded-xs [:where(&:not([data-prose]),&_mark)]:bg-[color-mix(in_oklab,var(--color-warning)_45%,transparent)] [:where(&:not([data-prose]),&_mark)]:box-decoration-clone [:where(&:not([data-prose]),&_mark)]:px-[0.1em] [:where(&:not([data-prose]),&_mark)]:text-inherit',
+    mark: markStyles,
   },
 });
diff --git a/src/components/relative-time/RelativeTime.stories.tsx b/src/components/relative-time/RelativeTime.stories.tsx
new file mode 100644
index 0000000..71331bf
--- /dev/null
+++ b/src/components/relative-time/RelativeTime.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+
+import { RelativeTime } from './RelativeTime';
+import { Text } from '../text/Text';
+import { Gallery, Specimen } from '../../stories/story-parts';
+
+// 見本の「今」。見た目の比較で日がずれないよう固定する
+const now = new Date('2026-09-18T12:00:00+09:00');
+
+const meta = {
+  title: 'Components/RelativeTime',
+  component: RelativeTime,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '「3 日前」「昨日」のように、今からの隔たりで書く日時です。`<time datetime>` を出し、ふつうの日付（Time と同じ書き方）を `title` に残します。',
+          '',
+          '- 今の時刻はブラウザで読み、1 分ごとに書き直します。サーバーで描いた HTML と、最初の描画（hydration）ではふつうの日付を書き、そのあとで相対に書き直します。サーバーとブラウザで時刻がずれても、食い違いは起きません。',
+          '- `now` を渡すと、その時刻を基準にして、サーバーでも最初から相対で書きます。書き直しはしません。',
+          '- 静的に書き出すページでは、HTML に書いた相対の文字がすぐ古くなります。記事の日付のように変わらない日付には Time を使います。',
+          '- 45 秒に満たない隔たりは「今」、そのあとは分・時間・日・か月・年で書きます。',
+          '- 言語とタイムゾーン（`title` のふつうの日付に使います）は Time と同じく、ThemeProvider でまとめて変えられます。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: { dateTime: '2026-09-15' },
+  argTypes: {
+    dateTime: { control: 'text' },
+    withTime: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['md', 'sm'] },
+    tone: { control: 'inline-radio', options: ['default', 'muted', 'subtle'] },
+    locale: { control: 'text' },
+    timeZone: { control: 'text' },
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+export const Distances: Story = {
+  tags: ['visual'],
+  name: '隔たり',
+  parameters: {
+    controls: { disable: true },
+    docs: { description: { story: '今を 2026/09/18 12:00 に固定して並べたものです。' } },
+  },
+  render: () => (
+    <Gallery columnWidth="12rem">
+      <Specimen label="過去">
+        <div className="flex flex-col gap-1">
+          {[
+            '2026-09-18T11:59:40+09:00',
+            '2026-09-18T11:50:00+09:00',
+            '2026-09-18T09:00:00+09:00',
+            '2026-09-17T10:00:00+09:00',
+            '2026-09-15',
+            '2026-06-01',
+            '2024-09-01',
+          ].map((d) => (
+            <Text key={d}>
+              <RelativeTime dateTime={d} now={now} />
+            </Text>
+          ))}
+        </div>
+      </Specimen>
+      <Specimen label="未来">
+        <div className="flex flex-col gap-1">
+          {['2026-09-18T15:00:00+09:00', '2026-09-19T12:00:00+09:00', '2026-12-01'].map((d) => (
+            <Text key={d}>
+              <RelativeTime dateTime={d} now={now} />
+            </Text>
+          ))}
+        </div>
+      </Specimen>
+    </Gallery>
+  ),
+};
+
+export const WithNow: Story = {
+  name: '要素（now を渡す）',
+  args: { dateTime: '2026-09-15', now },
+  play: async ({ canvas }) => {
+    const el = canvas.getByText('3 日前');
+    await expect(el.tagName).toBe('TIME');
+    await expect(el).toHaveAttribute('datetime', '2026-09-15');
+    await expect(el).toHaveAttribute('title', '2026/09/15');
+  },
+};
+
+export const AfterMount: Story = {
+  name: '描いたあとに相対に書き直す',
+  args: { dateTime: '2020-01-01' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ブラウザで描いたあとに、今の時刻から相対で書きます。ふつうの日付は title に残ります。',
+      },
+    },
+  },
+  play: async ({ canvas }) => {
+    const el = await canvas.findByText(/年前/);
+    await expect(el).toHaveAttribute('datetime', '2020-01-01');
+    await expect(el).toHaveAttribute('title', '2020/01/01');
+  },
+};
diff --git a/src/components/relative-time/RelativeTime.tsx b/src/components/relative-time/RelativeTime.tsx
new file mode 100644
index 0000000..14f21fa
--- /dev/null
+++ b/src/components/relative-time/RelativeTime.tsx
@@ -0,0 +1,100 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+import {
+  dateTimeOptions,
+  formatAbsolute,
+  formatRelative,
+  parseDate,
+} from '../../internal/date/format-date';
+import { timeText } from '../../internal/date/time-text';
+import { useLocale } from '../../internal/date/use-locale';
+import { useNow } from '../../internal/date/use-now';
+
+// 「3 日前」のように、今からの隔たりで書く日時。見た目は Time と同じ（大きさと濃さは指定しなければ周りの文字のまま）
+// 今の時刻はブラウザでだけ読む（src/internal/date/use-now.ts）。サーバーの HTML と hydration の最初の描画は
+//   Time と同じふつうの日付で、そのあと相対に描き直す。ふつうの日付は title に残す
+
+export interface RelativeTimeProps
+  extends Omit<ComponentProps<'time'>, 'dateTime'>, VariantProps<typeof timeText> {
+  /**
+   * 日時。`YYYY-MM-DD` の文字列は、その日の 0 時（UTC）として隔たりを数えます
+   */
+  dateTime: Date | string | number;
+  /**
+   * 基準にする今の時刻。渡すと、サーバーでも最初から相対で書き、時間がたっても書き直しません（ビルドした時刻を渡すなど）。
+   * 渡さなければブラウザの今の時刻を読み、1 分ごとに書き直します
+   */
+  now?: Date | number;
+  /**
+   * ふつうの日付（サーバーの HTML・最初の描画・title）の書き方。Time の withTime と同じです
+   * @default false
+   */
+  withTime?: boolean;
+  /**
+   * ふつうの日付の書き方。Time の format と同じです
+   */
+  format?: Intl.DateTimeFormatOptions;
+  /**
+   * 言語と地域。書かなければ ThemeProvider の locale、それもなければ ja-JP です
+   */
+  locale?: string;
+  /**
+   * ふつうの日付を書くタイムゾーン。書かなければ ThemeProvider の timeZone、それもなければ Asia/Tokyo です
+   */
+  timeZone?: string;
+  /**
+   * 大きさ。指定しなければ周りの文字のままです
+   */
+  size?: VariantProps<typeof timeText>['size'];
+  /**
+   * 濃さ。指定しなければ周りの文字のままです
+   */
+  tone?: VariantProps<typeof timeText>['tone'];
+  children?: ReactNode;
+}
+
+/**
+ * 「3 日前」「昨日」のように、今からの隔たりで書く日時。`<time datetime>` を出し、ふつうの日付を title に残します
+ */
+export function RelativeTime({
+  dateTime,
+  now: nowProp,
+  withTime = false,
+  format,
+  locale: localeProp,
+  timeZone: timeZoneProp,
+  size,
+  tone,
+  className,
+  title,
+  children,
+  ...props
+}: RelativeTimeProps) {
+  const { locale, timeZone } = useLocale(localeProp, timeZoneProp);
+  // サーバーと hydration の最初の描画では null（ふつうの日付を書く）にして、食い違いを避ける
+  const mountedNow = useNow(nowProp === undefined);
+  const parsed = parseDate(dateTime);
+  if (!parsed) {
+    return (
+      <time className={timeText({ size, tone, className })} title={title} {...props}>
+        {children ?? String(dateTime)}
+      </time>
+    );
+  }
+
+  const absolute = formatAbsolute(parsed, dateTimeOptions({ withTime, format }), locale, timeZone);
+  const now = nowProp !== undefined ? new Date(nowProp).getTime() : mountedNow;
+  const text = now === null ? absolute : formatRelative(parsed.date, now, locale);
+
+  return (
+    <time
+      dateTime={parsed.machine}
+      title={title ?? absolute}
+      className={timeText({ size, tone, className })}
+      {...props}
+    >
+      {children ?? text}
+    </time>
+  );
+}
diff --git a/src/components/relative-time/__screenshots__/RelativeTime.stories.tsx/components-relativetime-distances-chromium-linux.png b/src/components/relative-time/__screenshots__/RelativeTime.stories.tsx/components-relativetime-distances-chromium-linux.png
new file mode 100644
index 0000000..c547e01
Binary files /dev/null and b/src/components/relative-time/__screenshots__/RelativeTime.stories.tsx/components-relativetime-distances-chromium-linux.png differ
diff --git a/src/components/scroll-area/ScrollArea.tsx b/src/components/scroll-area/ScrollArea.tsx
index e2ef06e..76cc516 100644
--- a/src/components/scroll-area/ScrollArea.tsx
+++ b/src/components/scroll-area/ScrollArea.tsx
@@ -1,76 +1,12 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { type ReactNode, type Ref, useCallback, useImperativeHandle, useState } from 'react';
 
-import { focusRing } from '../../internal/focus-styles';
 import { SheetMoreCue } from '../../internal/sheet/SheetMoreCue';
 import { useMoreCues } from '../../internal/sheet/use-more-cues';
-import { tv } from '../../internal/tv';
+import { scrollAreaStyles } from '../../internal/scroll-area-styles';
 import { useInlineCues } from './use-inline-cues';
 
-// スクロールする枠 — 軸 93
-//   続きがあることは、端に落とす内側の影で見せる（原則1）。文字やぼかしでは知らせない
-//   影は Select の浮かぶ選択肢・シートと同じ見た目と計算（SheetMoreCue・useMoreCues）。濃さはスクロールした量に合わせる
-//   横にスクロールするときは、左右の端にも同じ影を落とす（useInlineCues）
-//   つまみは中身の上に重ねる細い棒（3:1 の輪郭のグレー）。影があるときは、枠に載せたとき・スクロールしているあいだ・
-//   キーボードで止まったときに出す（scrollbar="always" でいつも出す）。影がないときは、続きを伝えるためにいつも出す
-//   つまみは見えている形がそのまま押せる範囲。帯（Scrollbar）は押せず、帯の上を押すと下の中身に届く
-//   つまみそのものに載せると、枠の内側へ太くなる（膨らんだ姿がそのままつかめる範囲）。つかんで動かすあいだも太いまま
-//   キーボードでは、スクロールできるときだけ枠（Viewport）に Tab で止まり、矢印キーでスクロールする。フォーカスの線は focusRing
-const scrollArea = tv({
-  slots: {
-    root: [
-      'group/scroll-area relative flex min-h-0 flex-col rounded-[inherit]',
-      // 外（Select の浮かぶ選択肢など）の影の位置と濃さを受け継がない。濃さはスクロールする要素が書き直す
-      '[--cue-bottom:0] [--cue-left:0px] [--cue-right:0px] [--cue-top:0] [--cue-x-end:0] [--cue-x-start:0]',
-    ],
-    viewport: [
-      // ブラウザのスクロールバーは Base UI が隠す。スクロールできない向きに溝を出さないよう、overflow は auto にする
-      'min-h-0 flex-auto [overflow:auto]! rounded-[inherit] outline-none',
-      ...focusRing,
-      'transition-[outline-color,outline-offset] duration-(--focus-ring-duration)',
-    ],
-    // 影を描く層。枠の角丸で切る（カードの端まで届かせたときに、角から影がはみ出さない）
-    edges: 'pointer-events-none absolute inset-0 z-1 overflow-hidden rounded-[inherit]',
-    edgeX: ['absolute top-0 bottom-0 w-3 from-(color:--color-sheet-edge-shadow) to-transparent'],
-    scrollbar: [
-      // 帯は膨らんだつまみの太さにし、端から --scroll-area-thumb-inset 離す（margin。押せる範囲に入れない）
-      // 帯そのものは押せない（pointer-events-none）。押せるのはつまみだけ
-      'group/bar pointer-events-none z-2 m-(--scroll-area-thumb-inset) flex transition-opacity duration-(--duration-normal)',
-      'data-[orientation=vertical]:w-(--scroll-area-thumb-size-hover)',
-      'data-[orientation=horizontal]:h-(--scroll-area-thumb-size-hover)',
-    ],
-    // つまみは帯の外側の辺に寄せ、太くなるときは枠の内側へ伸ばす
-    //   載せたとき（hover）とつかんでいるあいだ（active。ポインタを捕まえているので、つまみの外へ出ても続く）に太くする
-    //   カーソルは、載せたときにつかめる手、つかんでいるあいだは握った手にする
-    thumb: [
-      'pointer-events-auto cursor-grab rounded-pill bg-(--scroll-area-thumb-color) active:cursor-grabbing',
-      '[--thumb-size:var(--scroll-area-thumb-size)] hover:[--thumb-size:var(--scroll-area-thumb-size-hover)] active:[--thumb-size:var(--scroll-area-thumb-size-hover)]',
-      'data-[orientation=vertical]:ms-auto data-[orientation=vertical]:w-(--thumb-size)',
-      'data-[orientation=vertical]:transition-[width] data-[orientation=vertical]:duration-(--duration-fast)',
-      'data-[orientation=horizontal]:mt-auto data-[orientation=horizontal]:h-(--thumb-size)',
-      'data-[orientation=horizontal]:transition-[height] data-[orientation=horizontal]:duration-(--duration-fast)',
-      'motion-reduce:transition-none',
-    ],
-  },
-  variants: {
-    scrollbar: {
-      // ふだんは隠す。枠に載せたとき・スクロール中・キーボードで止まったときに出す
-      // 隠れているあいだは、つまみも押せない（指で端を触ってもつまみをつかまず、中身がスクロールする）
-      scroll: {
-        scrollbar: [
-          'opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100 data-scrolling:duration-0',
-          'group-has-[[data-slot=scroll-area-viewport]:focus-visible]/scroll-area:opacity-100',
-          // ストーリーの hover の固定（pseudo-states）でも出す
-          'group-hover/scroll-area:opacity-100',
-        ],
-        thumb:
-          'pointer-events-none group-data-hovering/bar:pointer-events-auto group-data-scrolling/bar:pointer-events-auto',
-      },
-      always: { scrollbar: 'opacity-100' },
-    },
-  },
-  defaultVariants: { scrollbar: 'scroll' },
-});
+// スクロールする枠 — 軸 93。見た目の考えと値は internal/scroll-area-styles.ts（Textarea と共有する）
 
 export type ScrollAreaScrollbar = 'scroll' | 'always';
 
@@ -116,7 +52,7 @@ export function ScrollArea({
   viewportRef,
 }: ScrollAreaProps) {
   // 影がないときは、つまみで続きを伝える
-  const styles = scrollArea({ scrollbar: edgeShadow ? scrollbar : 'always' });
+  const styles = scrollAreaStyles({ scrollbar: edgeShadow ? scrollbar : 'always' });
   const moreCues = useMoreCues();
   const inlineCues = useInlineCues();
   // スクロールする要素を、影の計算と利用者の viewportRef に渡す
diff --git a/src/components/skip-link/SkipLink.stories.tsx b/src/components/skip-link/SkipLink.stories.tsx
new file mode 100644
index 0000000..e60c62c
--- /dev/null
+++ b/src/components/skip-link/SkipLink.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { SkipLink } from './SkipLink';
+import { SkipLinkPage } from './story-page';
+import { DensityPair } from '../../stories/story-parts';
+import { sourceCode } from '../../stories/story-states';
+
+// フォーカスした見た目に固定する。出るのは :focus、線は :focus-visible
+const focusPseudo = {
+  rootSelector: 'body',
+  focus: ['[data-preview="focus"] [data-slot="skip-link"]'],
+  focusVisible: ['[data-preview="focus"] [data-slot="skip-link"]'],
+};
+
+const meta = {
+  title: 'Components/SkipLink',
+  component: SkipLink,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '本文へ移るリンクです。ふだんは見えず、Tab でフォーカスしたときだけ画面の左上に出ます。キーボードで操作する人が、ヘッダーのナビを飛ばして本文へ移れます。',
+          '',
+          '- ページの最初（ヘッダーより前）に 1 つ置きます。',
+          '- `href`（既定は `#main`）は移り先の id です。本文の要素に同じ id を付けます（`<main id="main">`）。移り先に `tabIndex` は要りません。',
+          '- 文字（children）の既定は「本文へ移動」です。',
+          '- 画面に固定して出るので、置く場所の見た目には影響しません。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: { href: '#main', children: '本文へ移動' },
+  argTypes: {
+    href: { control: 'text', table: { defaultValue: { summary: "'#main'" } } },
+    children: { control: 'text', table: { defaultValue: { summary: "'本文へ移動'" } } },
+  },
+} satisfies Meta<typeof SkipLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+  parameters: {
+    controls: { exclude: ['href'] },
+    docs: {
+      description: { story: 'Tab でフォーカスを進めると、見本のページの最初で左上に出ます。' },
+      source: sourceCode(`
+        <body>
+          <SkipLink />
+          <header>…</header>
+          <Container size="prose" render={<main id="main" />}>…</Container>
+        </body>
+      `),
+    },
+  },
+  render: (args) => <SkipLinkPage idPrefix="playground" label={args.children} />,
+};
+
+// フォーカスしたときの見た目。画面の幅と密度ごと
+export const Focused: Story = {
+  tags: ['visual'],
+  name: 'フォーカスしたとき',
+  parameters: { controls: { disable: true }, pseudo: focusPseudo },
+  render: () => (
+    <div data-preview="focus">
+      <DensityPair>
+        <SkipLinkPage width={360} idPrefix="focused" />
+      </DensityPair>
+    </div>
+  ),
+};
+
+// 読み上げと props の確かめ: ふだんは隠れ、Tab で最初に止まって見える。href の既定は #main
+export const Accessibility: Story = {
+  name: '読み上げ',
+  render: () => <SkipLinkPage idPrefix="a11y" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole('link', { name: '本文へ移動' });
+    await expect(link).toHaveAttribute('href', '#a11y-main');
+    await expect(link.getBoundingClientRect().width).toBeLessThanOrEqual(1);
+    await userEvent.tab();
+    await expect(link).toHaveFocus();
+    await expect(link.getBoundingClientRect().width).toBeGreaterThan(40);
+    await userEvent.tab();
+    await expect(link.getBoundingClientRect().width).toBeLessThanOrEqual(1);
+  },
+};
+
+// href の既定
+export const DefaultHref: Story = {
+  name: '既定の移り先',
+  render: () => <SkipLink />,
+  play: async ({ canvasElement }) => {
+    const link = within(canvasElement).getByRole('link', { name: '本文へ移動' });
+    await expect(link).toHaveAttribute('href', '#main');
+  },
+};
diff --git a/src/components/skip-link/SkipLink.tsx b/src/components/skip-link/SkipLink.tsx
new file mode 100644
index 0000000..dacb4c8
--- /dev/null
+++ b/src/components/skip-link/SkipLink.tsx
@@ -0,0 +1,65 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps, ReactElement } from 'react';
+
+import { focusRing } from '../../internal/focus-styles';
+import { tv } from '../../internal/tv';
+
+// 「本文へ移動」のリンク — 軸 99
+//   ふだんは読み上げにだけ届け（VisuallyHidden と同じ sr-only）、フォーカスしたときだけ画面の上に重ねる
+//   フォーカスしたときに、sr-only が付けた寸法・位置・切り抜きを focus: で上書きする。not-sr-only は位置を static にし、余白も 0 にするので使わない
+//   not-focus:sr-only（:not(:focus)）にしないのは、storybook-addon-pseudo-states が :not の中を「:not(:focus), :not(.pseudo-focus)」に書き換え、
+//     フォーカスしても隠れたままになるため
+//   ページの上に重なる面なので、面・輪郭・影は浮かぶ面と同じ（原則1）。リンクの小物なので角は pill（原則5）
+//   文字はリンクと同じ Primary の青と淡い下線。hover で下線だけ濃くする（design/adr/0030）
+//   フォーカスの線は focusRing（design/adr/0031）。線の色は既定で Primary（--skip-link-focus-ring-color）
+//   位置・角・面の色は --skip-link-*（design/tokens.css）
+const skipLink = tv({
+  base: [
+    'sr-only',
+    'focus:fixed focus:top-(--skip-link-top) focus:right-(--skip-link-right) focus:left-(--skip-link-left) focus:z-50',
+    'focus:m-0 focus:h-auto focus:w-auto focus:overflow-visible focus:whitespace-normal focus:[clip-path:none]',
+    'focus:flex focus:min-h-(--spacing-control) focus:items-center focus:border-(length:--border-width-thin) focus:px-(--spacing-control-x) focus:py-1',
+    'rounded-(--skip-link-radius) border-(color:--skip-link-line) bg-(color:--skip-link-bg) shadow-(--skip-link-shadow)',
+    'text-(length:--text-control) leading-(--leading-control) font-bold text-(color:--skip-link-fg)',
+    'underline [text-decoration-color:var(--color-link-underline)] decoration-1 underline-offset-4 hover:[text-decoration-color:var(--color-link-underline-hover)]',
+    '[--color-own-focus:var(--skip-link-focus-ring-color)] [--focus-ring-offset:var(--skip-link-focus-ring-offset)]',
+    ...focusRing,
+    '[transition:text-decoration-color_var(--link-underline-duration)_var(--link-underline-ease),outline-color_var(--focus-ring-duration)_var(--ease-press),outline-offset_var(--focus-ring-duration)_var(--ease-press)]',
+    'motion-reduce:[transition:none]',
+  ],
+});
+
+export interface SkipLinkProps extends ComponentProps<'a'> {
+  /**
+   * 移り先。本文の要素（`<main id="main">` など）の id を `#` 付きで渡します
+   * @default '#main'
+   */
+  href?: string;
+  /** 描く要素（Base UI の render と同じ）。ルーターのリンクを渡すときに使います */
+  render?: ReactElement;
+}
+
+/**
+ * 本文へ移るリンク。ふだんは見えず、Tab でフォーカスしたときだけ画面の左上に出ます
+ *
+ * ページの最初（ヘッダーより前）に置き、移り先の要素に同じ id を付けます。
+ */
+export function SkipLink({
+  href = '#main',
+  children = '本文へ移動',
+  className,
+  render,
+  ...props
+}: SkipLinkProps) {
+  return useRender({
+    render,
+    defaultTagName: 'a',
+    props: {
+      ...props,
+      href,
+      children,
+      'data-slot': 'skip-link',
+      className: skipLink({ className }),
+    },
+  });
+}
diff --git a/src/components/skip-link/__screenshots__/SkipLink.stories.tsx/components-skiplink-focused-chromium-linux.png b/src/components/skip-link/__screenshots__/SkipLink.stories.tsx/components-skiplink-focused-chromium-linux.png
new file mode 100644
index 0000000..6907c6f
Binary files /dev/null and b/src/components/skip-link/__screenshots__/SkipLink.stories.tsx/components-skiplink-focused-chromium-linux.png differ
diff --git a/src/components/skip-link/story-page.tsx b/src/components/skip-link/story-page.tsx
new file mode 100644
index 0000000..2e407af
--- /dev/null
+++ b/src/components/skip-link/story-page.tsx
@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+
+import { Container } from '../container/Container';
+import { Heading } from '../heading/Heading';
+import { Link } from '../link/Link';
+import { Text } from '../text/Text';
+import { SkipLink } from './SkipLink';
+
+// ストーリーで使う見本のページ（部品ではない）。SkipLink の Docs と、比較のストーリーで共有する
+// SkipLink は画面に固定して出るので、枠を位置の基準にする（transform）
+
+/** 見本のページ。先頭に SkipLink、ヘッダー（ロゴとナビ）、本文。main の id は idPrefix で変える（1 画面に何枚も並べるため） */
+export function SkipLinkPage({
+  width = 560,
+  idPrefix = 'page',
+  density,
+  label,
+}: {
+  width?: number;
+  idPrefix?: string;
+  density?: 'fine' | 'coarse';
+  /** SkipLink の文字。渡さないときは部品の既定 */
+  label?: ReactNode;
+}) {
+  const main = `${idPrefix}-main`;
+  return (
+    <div
+      data-density={density}
+      className="relative h-[220px] max-w-full [transform:translateZ(0)] overflow-clip rounded-card border border-line bg-bg text-fg"
+      style={{ width }}
+    >
+      <SkipLink href={`#${main}`}>{label}</SkipLink>
+      <header className="border-b border-line">
+        <Container className="flex items-center justify-between gap-4 py-3">
+          <Text as="span" className="font-heading text-fg-brand">
+            kazuemon
+          </Text>
+          <nav className="flex gap-4">
+            <Link href="#works">Works</Link>
+            <Link href="#blog">Blog</Link>
+          </nav>
+        </Container>
+      </header>
+      <Container size="prose" render={<main id={main} />} className="py-6">
+        <div className="flex flex-col gap-2">
+          <Heading level={2}>部品の幅と余白を決める</Heading>
+          <Text>
+            本文です。キーボードで操作する人は、ヘッダーのリンクを飛ばしてここへ移れます。
+          </Text>
+        </div>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/components/textarea/Textarea.stories.tsx b/src/components/textarea/Textarea.stories.tsx
new file mode 100644
index 0000000..0aae3d3
--- /dev/null
+++ b/src/components/textarea/Textarea.stories.tsx
@@ -0,0 +1,381 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+// userEvent は play の引数ではなく storybook/test から読む
+// 引数の userEvent は、LAN の IP で開いたとき（clipboard のない環境）は空になり、click などが呼べない
+import { expect, userEvent } from 'storybook/test';
+
+import { TextField } from '../text-field/TextField';
+import { Textarea, type TextareaProps } from './Textarea';
+import { DensityPair, Gallery, Matrix, Specimen } from '../../stories/story-parts';
+import { type MatrixColumn, sourceCode, statePseudo } from '../../stories/story-states';
+
+type Sample = MatrixColumn & { props: Partial<TextareaProps> };
+
+const longText = [
+  'はじめまして、かずえもんです。',
+  'ふだんは Web のフロントエンドを書いています。',
+  'この部品は、問い合わせのフォームやブログのコメント欄で使う想定です。',
+  '長い文を書くと、欄が下に伸びていきます。',
+  '上限の行数を超えると、欄の中でスクロールします。',
+  '行の高さと上下の余白は、1 行の入力欄とそろえています。',
+  'ここまでで 6 行です。',
+  '7 行目です。',
+  '8 行目です。',
+  '9 行目です。ここから先はスクロールします。',
+].join('\n');
+
+const stateRows: Sample[] = [
+  { label: '空', props: {} },
+  { label: '値あり', props: { defaultValue: 'はじめまして。\nかずえもんです。' } },
+  { label: 'エラー', props: { error: '本文を入力してください' } },
+  {
+    label: '警告',
+    props: {
+      defaultValue: 'はじめまして。',
+      warning: '短い文は、一覧では前後の文とつながって見えます',
+    },
+  },
+  { label: '押せない', props: { defaultValue: 'はじめまして。', disabled: true } },
+];
+
+const stateColumns: MatrixColumn[] = [
+  { label: '通常' },
+  { label: 'hover', state: 'hover' },
+  { label: 'フォーカス', state: 'focus' },
+];
+
+const heightRows: { label: string; props: Partial<TextareaProps> }[] = [
+  { label: '既定（3〜8 行・つまみあり）', props: {} },
+  { label: 'つまみなし', props: { resizable: false } },
+  { label: '1 行から伸ばす', props: { minRows: 1 } },
+  { label: '高さを固定（4 行）', props: { minRows: 4, maxRows: 4, resizable: false } },
+];
+
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '複数行のテキストを入力する欄です。ラベル・キャプション・本体・エラーの並びと見た目は TextField と同じです。',
+          '',
+          '- 高さは入力に合わせて `minRows`（既定 3）から `maxRows`（既定 8）まで伸び、超えると欄の中でスクロールします。スクロールのつまみは ScrollArea と同じです。',
+          '- 右下のつまみで、利用者が高さを変えられます（`resizable`、既定であり）。一度変えると、その高さのままになります。',
+          '- `minRows` と `maxRows` を同じにすると、高さが変わらない欄になります。',
+          '- 1 行ぶんの高さと 1 行目の文字の位置は、TextField と同じです。',
+          '- `showCount` を渡すと、本体の右下の下に「12 / 200」の形で文字数を出します。上限は `maxCount`（超えても打てる）か `maxLength`（ブラウザが打つのを止める）です。',
+          '- `maxCount` を超えると、`showCount` がなくても文字数を出し、数を赤にします。超えているあいだは欄もエラーの見た目（赤い枠線・`aria-invalid`）にし、読み上げでも知らせます。欄を変えたくないときは `overCountInvalid={false}` を渡します。送信を止めるときは、超えていたら `error` を渡します。',
+          '- そのほかの props（`name`・`defaultValue`・`onChange` など）は `<textarea>` に渡ります。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: {
+    label: '本文',
+    placeholder: 'ご用件をお書きください',
+    captionPlacement: 'top',
+    minRows: 3,
+    maxRows: 8,
+    resizable: true,
+    showCount: false,
+    disabled: false,
+    readOnly: false,
+  },
+  argTypes: {
+    label: { control: 'text' },
+    caption: { control: 'text' },
+    captionPlacement: {
+      control: 'inline-radio',
+      options: ['top', 'bottom'],
+      table: { defaultValue: { summary: "'top'" } },
+    },
+    placeholder: { control: 'text' },
+    error: { control: 'text' },
+    warning: { control: 'text' },
+    minRows: { control: { type: 'number', min: 1 } },
+    resizable: { control: 'boolean' },
+    maxRows: { control: { type: 'number', min: 1 } },
+    maxCount: { control: { type: 'number', min: 1 } },
+    overCountInvalid: { control: 'boolean' },
+    maxLength: { control: { type: 'number', min: 1 } },
+    showCount: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+  args: { caption: '返事はメールで送ります' },
+  decorators: [
+    (Story) => (
+      <div className="max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Show code: 表（Matrix）の中身は出ないので、行ごとの使い方を source.code に手で書く
+export const States: Story = {
+  tags: ['visual'],
+  name: '状態',
+  parameters: {
+    pseudo: statePseudo({ hover: '[data-slot="control"]', focusWithin: '[data-slot="control"]' }),
+    docs: {
+      description: {
+        story:
+          '通常はグレーの塗りで枠線がなく、フォーカスで青い枠線が付きます。エラーのあいだは赤い枠線のまま、hover でも塗りを変えません。TextField と同じです。',
+      },
+      source: sourceCode(`
+        <Textarea label="本文" placeholder="ご用件をお書きください" />
+        <Textarea label="本文" error="本文を入力してください" />
+        <Textarea label="本文" defaultValue="はじめまして。" disabled />
+      `),
+    },
+  },
+  render: (args) => (
+    <Matrix
+      rows={stateRows}
+      rowLabel={(row) => row.label}
+      columns={stateColumns}
+      columnWidth="16rem"
+      renderCell={(row) => <Textarea {...args} {...row.props} />}
+    />
+  ),
+};
+
+// Show code: 表（Matrix）の中身は出ないので、行ごとの使い方を source.code に手で書く
+export const Heights: Story = {
+  tags: ['visual'],
+  name: '高さ',
+  parameters: {
+    controls: { exclude: ['minRows', 'maxRows', 'resizable'] },
+    docs: {
+      description: {
+        story: [
+          '行が高さの指定、列が中身の長さです。入力に合わせて `minRows` から `maxRows` まで伸び、超えると欄の中でスクロールします。',
+          '',
+          '- `resizable={false}`: 右下のつまみを出しません。',
+          '- `minRows={1}`: 空のときは 1 行（TextField と同じ高さ）。コメントの欄のように、短く書くことが多い場所に使います。',
+          '- `minRows` と `maxRows` を同じにすると、高さが変わりません。',
+        ].join('\n'),
+      },
+      source: sourceCode(`
+        <Textarea label="本文" />
+        <Textarea label="本文" resizable={false} />
+        <Textarea label="本文" minRows={1} />
+        <Textarea label="本文" minRows={4} maxRows={4} resizable={false} />
+      `),
+    },
+  },
+  render: (args) => (
+    <Matrix
+      rows={heightRows}
+      rowLabel={(row) => row.label}
+      columns={[
+        { label: '空', value: undefined },
+        { label: '短い文', value: 'はじめまして。\nかずえもんです。' },
+        { label: '長い文', value: longText },
+      ]}
+      columnWidth="16rem"
+      renderCell={(row, column) => (
+        <Textarea {...args} {...row.props} defaultValue={(column as { value?: string }).value} />
+      )}
+    />
+  ),
+};
+
+export const Messages: Story = {
+  tags: ['visual'],
+  name: 'キャプション・エラー・文字数',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '並びは ラベル → キャプション → 本体 → 文字数 → エラー → 警告 です。文字数は `showCount` を渡したときと、`maxCount` を超えたときに出ます。',
+      },
+    },
+  },
+  render: (args) => (
+    <Gallery>
+      <Specimen label="caption">
+        <Textarea {...args} caption="返事はメールで送ります" />
+      </Specimen>
+      <Specimen label="文字数">
+        <Textarea
+          {...args}
+          caption="返事はメールで送ります"
+          defaultValue="はじめまして。かずえもんです。"
+          maxCount={200}
+          showCount
+        />
+      </Specimen>
+      <Specimen label="上限を超えた（showCount なし）">
+        <Textarea
+          {...args}
+          caption="30文字まで"
+          defaultValue="はじめまして。かずえもんです。ポートフォリオを見て連絡しました。"
+          maxCount={30}
+        />
+      </Specimen>
+      <Specimen label="上限を超えた（overCountInvalid={false}）">
+        <Textarea
+          {...args}
+          caption="30文字まで"
+          defaultValue="はじめまして。かずえもんです。ポートフォリオを見て連絡しました。"
+          maxCount={30}
+          overCountInvalid={false}
+        />
+      </Specimen>
+      <Specimen label="文字数と error">
+        <Textarea
+          {...args}
+          defaultValue="よろしく"
+          maxCount={200}
+          showCount
+          error="10文字以上で入力してください"
+        />
+      </Specimen>
+      <Specimen label="1 行の TextField と並べる">
+        <div className="flex flex-col gap-4">
+          <TextField label="件名" defaultValue="はじめまして" />
+          <Textarea {...args} minRows={1} defaultValue="よろしくお願いします" />
+        </div>
+      </Specimen>
+    </Gallery>
+  ),
+};
+
+export const Count: Story = {
+  name: '文字数を数える',
+  args: { maxCount: 10, showCount: true },
+  decorators: [
+    (Story) => (
+      <div className="max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvas, canvasElement }) => {
+    const textarea = canvas.getByLabelText('本文');
+    await expect(textarea.tagName).toBe('TEXTAREA');
+    // maxCount は打つのを止めない（ブラウザの maxlength は付けない）
+    await expect(textarea).not.toHaveAttribute('maxlength');
+    await expect(textarea).toHaveAccessibleDescription('10文字まで。いま0文字');
+    await userEvent.type(textarea, 'かずえもん');
+    // 見えている数（読み上げでは、下の説明の文で読む）
+    await expect(canvasElement.querySelector('[id$="count"] > [aria-hidden]')).toHaveTextContent(
+      '5 / 10'
+    );
+    await expect(textarea).toHaveAccessibleDescription('10文字まで。いま5文字');
+    await expect(textarea).not.toHaveAttribute('aria-invalid', 'true');
+    // 超えても打てる。数を赤にし、説明と知らせの文で超えたことを伝え、aria-invalid を付ける
+    await userEvent.type(textarea, 'です。よろしく');
+    await expect(textarea).toHaveValue('かずえもんです。よろしく');
+    await expect(canvas.getByText('12')).toHaveClass('text-fg-danger');
+    await expect(textarea).toHaveAccessibleDescription('10文字を超えています。いま12文字');
+    await expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    const live = canvasElement.querySelector('[aria-live="polite"].sr-only');
+    await expect(live).toHaveTextContent('10文字を超えています');
+    // 戻ったときも知らせる
+    await userEvent.type(textarea, '{backspace}{backspace}{backspace}');
+    await expect(live).toHaveTextContent('10文字以内に戻りました');
+    await expect(textarea).not.toHaveAttribute('aria-invalid', 'true');
+  },
+};
+
+export const CountForced: Story = {
+  name: '上限を超えたら文字数を出す',
+  args: { maxCount: 10 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`showCount` がなくても、`maxCount` を超えているあいだは文字数を出します。戻ると消えます。',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByLabelText('本文');
+    await userEvent.type(textarea, 'かずえもんです。');
+    await expect(canvas.queryByText('/ 10', { exact: false })).toBeNull();
+    await userEvent.type(textarea, 'よろしく');
+    await expect(canvas.getByText('12')).toBeVisible();
+    // 超えているあいだは欄をエラーの状態にする（エラーの行は出さない）
+    await expect(textarea.closest('[data-invalid]')).not.toBeNull();
+    await expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    await userEvent.type(textarea, '{backspace}{backspace}{backspace}');
+    await expect(canvas.queryByText('/ 10', { exact: false })).toBeNull();
+    await expect(textarea.closest('[data-invalid]')).toBeNull();
+  },
+};
+
+export const Scroll: Story = {
+  name: '行数の上限を超えたとき',
+  args: { maxRows: 4, caption: '4 行を超えると、欄の中でスクロールします' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`maxRows` を超えると欄の中でスクロールし、ScrollArea と同じつまみが出ます。打っているあいだは、キャレットのある行が上下の余白ごと見える位置に保たれます。Tab で止まるのは欄だけです。',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvas, canvasElement }) => {
+    const textarea = canvas.getByLabelText('本文');
+    await userEvent.click(textarea);
+    await userEvent.type(
+      textarea,
+      '1 行目{enter}2 行目{enter}3 行目{enter}4 行目{enter}5 行目{enter}6 行目'
+    );
+    const viewport = canvasElement.querySelector<HTMLElement>(
+      '[data-slot="textarea-scroll"] > [role="presentation"]'
+    );
+    // 上限の高さで止まり、中でスクロールする。つまみは ScrollArea と同じもの
+    // （キャレットを見える位置に保つのはブラウザの動きで、userEvent の入力では起きないので、ここでは確かめない）
+    await expect(viewport).not.toBeNull();
+    await expect(viewport!.scrollHeight).toBeGreaterThan(viewport!.clientHeight);
+    await expect(canvasElement.querySelector('[data-slot="scroll-area-thumb"]')).not.toBeNull();
+    // スクロールする枠は Tab で止まらない（止まるのは欄だけ）
+    await expect(viewport).toHaveAttribute('tabindex', '-1');
+  },
+};
+
+export const Densities: Story = {
+  tags: ['visual'],
+  name: '密度',
+  args: { caption: '返事はメールで送ります' },
+  parameters: {
+    docs: {
+      description: {
+        story: '余白は入力方式で切り替わります。文字の大きさは、指でもマウスでも同じです。',
+      },
+    },
+  },
+  render: (args) => (
+    <DensityPair>
+      <div className="w-72">
+        <Textarea {...args} />
+      </div>
+    </DensityPair>
+  ),
+};
diff --git a/src/components/textarea/Textarea.tsx b/src/components/textarea/Textarea.tsx
new file mode 100644
index 0000000..a368099
--- /dev/null
+++ b/src/components/textarea/Textarea.tsx
@@ -0,0 +1,308 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type PointerEvent,
+  type ReactNode,
+  useCallback,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+
+import { type CaptionPlacement, Field } from '../../internal/field/Field';
+import { controlBox } from '../../internal/field/field-styles';
+import { useFormSubmittingLock } from '../../internal/form-context';
+import { scrollAreaStyles } from '../../internal/scroll-area-styles';
+import { tv } from '../../internal/tv';
+import { useAutoHeight } from './use-auto-height';
+
+// 本体は TextField と同じ（原則8: 編集できる欄はグレーの塗り。フォーカス・エラー・押せない・止めているあいだも controlBox）
+// 高さ（軸 98）: textarea は中身の高さに伸ばし（field-sizing: content。対応していないブラウザは use-auto-height）、
+//   外側のスクロールする枠（Base UI の ScrollArea）を minRows〜maxRows の高さにする。maxRows を超えたら枠の中でスクロールし、
+//   つまみは ScrollArea と同じ見た目（scrollAreaStyles）。端の影はないので、ScrollArea の影なしと同じく、つまみはいつも出す
+// 右下のつまみ（resizable）は枠に付ける。利用者が一度動かしたら、その高さを優先する（maxRows の上限を外し、伸びるのも止まる）
+// 行の高さと上下の余白は TextField とそろえる（軸 98）: 行は文字を打つ欄の行の高さ、上下の余白は 1 行ぶんの高さが
+//   TextField（--spacing-control）と同じになる値。密度で変わる値を読むので、欄の要素で計算する（--textarea-lh・--textarea-py）
+const textarea = tv({
+  slots: {
+    box: 'relative h-auto items-stretch gap-0 px-0',
+    // 枠。角は本体の枠線の内側に合わせる
+    root: 'w-full rounded-[calc(var(--radius-control)-var(--field-border-width))]',
+    viewport: [
+      'max-h-(--textarea-max-height) min-h-(--textarea-min-height) [overflow:auto]! rounded-[inherit] outline-none',
+      // キャレットを見える位置に送るとき（打つ・矢印・Ctrl+Home など）、上下の余白ごと見せる
+      // キャレットの矩形は字の高さで、行の高さより上下に少し小さいので、その差も足す
+      'scroll-py-[calc(var(--textarea-py)+(var(--textarea-lh)-var(--text-input))/2)]',
+    ],
+    input: [
+      'block [field-sizing:content] w-full min-w-0 resize-none overflow-hidden bg-transparent outline-none',
+      'placeholder:text-fg-subtle disabled:cursor-not-allowed',
+      'px-[calc(var(--spacing-control-x)-var(--field-border-width))] py-(--textarea-py) leading-(--textarea-lh)',
+      'min-h-(--textarea-min-height)',
+    ],
+    count:
+      'self-end text-(length:--text-caption) leading-(--leading-caption) text-fg-subtle tabular-nums',
+    // 上限を超えた数（文字数の表示の左の数）。エラーの文字と同じ赤
+    countOver: 'text-fg-danger',
+  },
+  variants: {
+    resizable: {
+      // 右下のつまみ。枠のつまみ（スクロール）とは、下の端で重ならないようにする
+      true: { viewport: 'resize-y', root: '[&>[data-orientation=vertical]]:mb-4' },
+      false: { viewport: 'resize-none' },
+    },
+    // 利用者がつまみで高さを変えたあとは、上限の行数で止めない
+    manual: { true: { viewport: 'max-h-none' } },
+  },
+});
+
+// 行の高さと上下の余白（欄の要素と枠の要素で、それぞれ計算する）と、行数からの高さ
+const heightVars = (
+  minRows: number,
+  maxRows: number
+): CSSProperties & Record<`--${string}`, string> => ({
+  '--textarea-lh': 'var(--leading-input)',
+  '--textarea-py':
+    'calc((var(--spacing-control) - var(--textarea-lh)) / 2 - var(--field-border-width))',
+  '--textarea-min-height': `calc(${minRows} * var(--textarea-lh) + 2 * var(--textarea-py))`,
+  '--textarea-max-height': `calc(${maxRows} * var(--textarea-lh) + 2 * var(--textarea-py))`,
+});
+
+export interface TextareaProps extends Omit<
+  ComponentProps<'textarea'>,
+  'className' | 'children' | 'rows'
+> {
+  label: ReactNode;
+  /** 補足（ヘルプテキスト）。エラー・警告のあいだも消えない */
+  caption?: ReactNode;
+  /**
+   * キャプションの場所。top はラベルと本体のあいだ、bottom は本体の下
+   * @default 'top'
+   */
+  captionPlacement?: CaptionPlacement;
+  /** エラーの内容。本体の下に丸の「!」と赤い文字で出し、欄をエラーの状態にする */
+  error?: ReactNode;
+  /** 警告の内容。本体の下に三角とオリーブ色の文字で出す。欄の見た目は変えない */
+  warning?: ReactNode;
+  /** 成功の内容。本体の下に丸のチェックと緑の文字で出す。欄の見た目は変えない */
+  success?: ReactNode;
+  /** 情報の内容。本体の下に丸の「i」と青い文字で出す。欄の見た目は変えない */
+  info?: ReactNode;
+  className?: string;
+  /**
+   * いちばん低いときの行数。空のときもこの高さです
+   * @default 3
+   */
+  minRows?: number;
+  /**
+   * 入力に合わせて伸ばす上限の行数。超えたら欄の中でスクロールします。minRows と同じにすると、高さが変わらない欄になります
+   * @default 8
+   */
+  maxRows?: number;
+  /**
+   * 右下のつまみで、利用者が高さを変えられるか。一度変えたら、その高さのまま（入力に合わせて伸びるのは止まり、maxRows を超えても広げられます）
+   * @default true
+   */
+  resizable?: boolean;
+  /**
+   * 文字数の上限。超えても打つのは止めず（貼り付けたあとで削れるように）、超えているあいだは文字数を必ず出して、数を赤にします。
+   * 超えたとき・戻ったときは読み上げでも知らせます。欄の見た目は overCountInvalid で決めます。送信を止めるのは使う側です（超えていたら error を渡す）。
+   * 打てなくする上限は、ブラウザの maxLength を使います
+   */
+  maxCount?: number;
+  /**
+   * maxCount を超えているあいだ、欄をエラーの状態（赤い枠線・aria-invalid）にするか。エラーの行は出しません。
+   * false のときは、数を赤にするだけで、欄は変えません
+   * @default true
+   */
+  overCountInvalid?: boolean;
+  /**
+   * 文字数を本体の右下の下に「12 / 200」の形で出すか。上限（maxCount か maxLength）があるときだけ出します。
+   * maxCount を超えているあいだは、false でも出します
+   * @default false
+   */
+  showCount?: boolean;
+}
+
+/**
+ * 複数行のテキスト入力。見た目・状態・ラベルとキャプションの並びは TextField と同じです
+ */
+export function Textarea({
+  label,
+  caption,
+  captionPlacement,
+  error,
+  warning,
+  success,
+  info,
+  disabled,
+  className,
+  minRows = 3,
+  maxRows = 8,
+  resizable = true,
+  maxCount,
+  overCountInvalid = true,
+  showCount = false,
+  readOnly,
+  style,
+  value,
+  defaultValue,
+  maxLength,
+  onChange,
+  ref,
+  'aria-describedby': ariaDescribedBy,
+  'aria-disabled': ariaDisabled,
+  'aria-invalid': ariaInvalid,
+  ...props
+}: TextareaProps) {
+  const id = useId();
+  // Form の送信中（ADR-0059）。押せない欄と同じ見た目にし、書き換えを止める。フォーカスは外さない
+  const blocking = useFormSubmittingLock().blocking;
+  const [manual, setManual] = useState(false);
+  // 押せないとき・止めているあいだは、つまみも使えない
+  const canResize = resizable && !disabled && !blocking;
+  const styles = textarea({ resizable: canResize, manual: canResize && manual });
+  const scrollStyles = scrollAreaStyles({ scrollbar: 'always' });
+  const low = Math.max(1, minRows);
+  const high = Math.max(low, maxRows);
+
+  const { ref: autoHeightRef, fit } = useAutoHeight();
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const setInput = useCallback(
+    (element: HTMLTextAreaElement | null) => {
+      inputRef.current = element;
+      autoHeightRef(element);
+      if (typeof ref === 'function') ref(element);
+      else if (ref) ref.current = element;
+    },
+    [autoHeightRef, ref]
+  );
+
+  // 枠の上を押したとき。右下のつまみなら、利用者が高さを決めたとみなす。
+  // それ以外（つまみで広げて、中身の下に空いたところ）は、欄にフォーカスを移す
+  const onViewportPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const corner = 20;
+    if (canResize && event.clientX > rect.right - corner && event.clientY > rect.bottom - corner) {
+      setManual(true);
+      return;
+    }
+    event.preventDefault();
+    inputRef.current?.focus();
+  };
+
+  // 文字数。値を渡されたときはその長さ、渡されないときは打った長さを数える
+  const [typed, setTyped] = useState(() => String(defaultValue ?? '').length);
+  const length = value != null ? String(value).length : typed;
+  // 上限は、柔らかい上限（maxCount）を先に使う。maxLength はブラウザが打つのを止めるので、超えない
+  const limit = maxCount ?? maxLength;
+  const over = maxCount != null && length > maxCount;
+  const counted = (showCount && limit != null) || over;
+  const countId = `${id}count`;
+  // 超えたとき・戻ったときに、1 回だけ読み上げで知らせる（打つたびには知らせない — ADR-0044 と同じく polite）
+  // 初めから超えているとき（値を入れて描いたとき）は知らせず、フォーカスしたときの説明で伝える
+  const [overState, setOverState] = useState({ over, notice: '' });
+  if (overState.over !== over) {
+    setOverState({
+      over,
+      notice: over ? `${maxCount}文字を超えています` : `${maxCount}文字以内に戻りました`,
+    });
+  }
+  const describe = (messageIds: string | undefined) =>
+    [ariaDescribedBy, counted ? countId : undefined, messageIds].filter(Boolean).join(' ') ||
+    undefined;
+  return (
+    <Field
+      label={label}
+      caption={caption}
+      captionPlacement={captionPlacement}
+      error={error}
+      invalid={over && overCountInvalid}
+      warning={warning}
+      success={success}
+      info={info}
+      disabled={disabled}
+      className={className}
+    >
+      {(messageIds) => (
+        <>
+          <div
+            data-slot="control"
+            className={controlBox({ className: styles.box() })}
+            style={heightVars(low, high)}
+          >
+            <BaseScrollArea.Root
+              data-slot="textarea-scroll"
+              className={scrollStyles.root({ className: styles.root() })}
+            >
+              <BaseScrollArea.Viewport
+                // 枠には Tab で止めない（止まるのは欄だけ）。キーボードでは、欄の中でキャレットを動かしてスクロールする
+                tabIndex={-1}
+                className={styles.viewport()}
+                onPointerDown={onViewportPointerDown}
+              >
+                <BaseScrollArea.Content style={{ minWidth: 0 }}>
+                  <BaseField.Control
+                    // Base UI の Field.Control を textarea で描く。値・検証・ラベルとのつなぎは Field.Control が受け持つ
+                    // textarea の props（onChange・ref など）は描く要素に渡し、Base UI が自分の props と合わせる（ハンドラーは両方呼ぶ）
+                    render={
+                      <textarea
+                        {...props}
+                        ref={setInput}
+                        rows={low}
+                        maxLength={maxLength}
+                        onChange={(event) => {
+                          setTyped(event.currentTarget.value.length);
+                          fit();
+                          onChange?.(event);
+                        }}
+                      />
+                    }
+                    className={styles.input({ className: blocking && 'cursor-progress' })}
+                    style={style}
+                    disabled={disabled}
+                    readOnly={blocking || readOnly}
+                    aria-disabled={blocking || ariaDisabled}
+                    aria-invalid={(over && overCountInvalid) || ariaInvalid}
+                    aria-describedby={describe(messageIds)}
+                    value={value}
+                    defaultValue={defaultValue}
+                  />
+                </BaseScrollArea.Content>
+              </BaseScrollArea.Viewport>
+              <BaseScrollArea.Scrollbar orientation="vertical" className={scrollStyles.scrollbar()}>
+                <BaseScrollArea.Thumb
+                  data-slot="scroll-area-thumb"
+                  className={scrollStyles.thumb()}
+                />
+              </BaseScrollArea.Scrollbar>
+            </BaseScrollArea.Root>
+          </div>
+          {counted && (
+            // 読み上げは欄の説明として、フォーカスしたときに 1 回読む（打つたびには知らせない）
+            // 超えたことは、数の赤だけでなく文でも伝える
+            <div id={countId} className={styles.count()}>
+              <span aria-hidden>
+                <span className={over ? styles.countOver() : undefined}>{length}</span> / {limit}
+              </span>
+              <span className="sr-only">
+                {over
+                  ? `${limit}文字を超えています。いま${length}文字`
+                  : `${limit}文字まで。いま${length}文字`}
+              </span>
+            </div>
+          )}
+          {maxCount != null && (
+            // 超えた・戻ったの知らせ。いつも置いた live region に文を入れる（ADR-0044 と同じ）
+            <div aria-live="polite" className="sr-only">
+              {overState.notice}
+            </div>
+          )}
+        </>
+      )}
+    </Field>
+  );
+}
diff --git a/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-densities-chromium-linux.png b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-densities-chromium-linux.png
new file mode 100644
index 0000000..fa0774a
Binary files /dev/null and b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-densities-chromium-linux.png differ
diff --git a/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-heights-chromium-linux.png b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-heights-chromium-linux.png
new file mode 100644
index 0000000..e4fcd2c
Binary files /dev/null and b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-heights-chromium-linux.png differ
diff --git a/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-messages-chromium-linux.png b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-messages-chromium-linux.png
new file mode 100644
index 0000000..b88918e
Binary files /dev/null and b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-messages-chromium-linux.png differ
diff --git a/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-states-chromium-linux.png b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-states-chromium-linux.png
new file mode 100644
index 0000000..cbae7c4
Binary files /dev/null and b/src/components/textarea/__screenshots__/Textarea.stories.tsx/components-textarea-states-chromium-linux.png differ
diff --git a/src/components/textarea/use-auto-height.ts b/src/components/textarea/use-auto-height.ts
new file mode 100644
index 0000000..66c7910
--- /dev/null
+++ b/src/components/textarea/use-auto-height.ts
@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+// CSS の field-sizing: content（中身の高さに合わせる）に対応していないか。描いたあと（ブラウザの中）でだけ呼ぶ
+function needsFallback() {
+  return typeof CSS !== 'undefined' && !CSS.supports('field-sizing', 'content');
+}
+
+/**
+ * textarea を中身の高さに合わせる。field-sizing: content に対応したブラウザでは CSS に任せ、何もしない
+ * 対応していないブラウザでは、打ったとき・値が変わったとき・幅が変わったときに、高さを scrollHeight に合わせる
+ * 返すのは、textarea に渡す ref と、打ったときに呼ぶ関数
+ */
+export function useAutoHeight() {
+  const elementRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const fit = useCallback(() => {
+    const element = elementRef.current;
+    if (!element || !needsFallback()) return;
+    element.style.height = 'auto';
+    element.style.height = `${element.scrollHeight}px`;
+  }, []);
+
+  // 値（value）が外から変わったときも合わせる。描くたびに合わせる（対応しているブラウザでは何もしない）
+  useLayoutEffect(fit);
+
+  // 幅が変わると折り返しが変わるので、合わせ直す
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !needsFallback()) return undefined;
+    let width = element.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (element.clientWidth === width) return;
+      width = element.clientWidth;
+      fit();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [fit]);
+
+  const ref = useCallback((element: HTMLTextAreaElement | null) => {
+    elementRef.current = element;
+  }, []);
+
+  return { ref, fit };
+}
diff --git a/src/components/theme-provider/ThemeProvider.stories.tsx b/src/components/theme-provider/ThemeProvider.stories.tsx
index 49a00db..f0c7497 100644
--- a/src/components/theme-provider/ThemeProvider.stories.tsx
+++ b/src/components/theme-provider/ThemeProvider.stories.tsx
@@ -4,10 +4,12 @@ import { expect, userEvent, within } from 'storybook/test';
 
 import { ThemeProvider } from './ThemeProvider';
 import { Button } from '../button/Button';
+import { NumberFormat } from '../number-format/NumberFormat';
 import { Popover } from '../popover/Popover';
 import { Select } from '../select/Select';
 import { Switch } from '../switch/Switch';
 import { TextField } from '../text-field/TextField';
+import { Time } from '../time/Time';
 import { labelClass } from '../../stories/story-states';
 
 const wards = ['千代田区', '中央区', '港区', '新宿区', '文京区'].map((label, i) => ({
@@ -44,12 +46,13 @@ const meta = {
     docs: {
       description: {
         component: [
-          '中の部品に、密度・浮かぶ UI の出し方・描く場所の既定をまとめて渡す入口です。アプリの根か、画面の一部を包みます。',
+          '中の部品に、密度・浮かぶ UI の出し方・描く場所・言語とタイムゾーンの既定をまとめて渡す入口です。アプリの根か、画面の一部を包みます。',
           '',
           '- `density`（既定は `auto`）: `auto` は入力方式（マウスか指か）に合わせます。`fine`・`coarse` は、入力方式にかかわらずその密度に固定します。包みの箱は作らないので、並べ方は変わりません。',
           '- `presentation`（既定は `auto`）: Select・Dialog・Popover の出し方の既定です。`auto` は指で操作していて画面が狭いときだけ、画面の下から出すシートにします。`popover` はいつも浮かべ、`sheet` はいつもシートにします。',
           '- `portalContainer`（既定は `document.body`）: 浮かぶ部分（選択肢・Dialog・Popover・Tooltip・Drawer）と `Portal` を描く場所です。',
-          '- 部品に `presentation`・`container` を書いたときは、部品の値が勝ちます。ThemeProvider を入れ子にすると、内側で書いた値だけが外側より勝ちます。',
+          '- `locale`（既定は `ja-JP`）・`timeZone`（既定は `Asia/Tokyo`）: 日付と数を書く言語と、時刻を書くタイムゾーンです。Time・RelativeTime・NumberFormat が読みます（NumberFormat は `locale` だけ）。',
+          '- 部品に `presentation`・`container`・`locale`・`timeZone` を書いたときは、部品の値が勝ちます。ThemeProvider を入れ子にすると、内側で書いた値だけが外側より勝ちます。',
         ].join('\n'),
       },
     },
@@ -140,3 +143,34 @@ export const PresentationAndContainer: Story = {
     await userEvent.keyboard('{Escape}');
   },
 };
+
+export const LocaleAndTimeZone: Story = {
+  name: '言語とタイムゾーン',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '外側で en-US・UTC にし、内側で timeZone だけを America/New_York にしたものです。内側は、書いた timeZone だけが外側より勝ちます。',
+      },
+    },
+  },
+  render: () => (
+    <ThemeProvider locale="en-US" timeZone="UTC">
+      <p className="flex gap-4">
+        <Time dateTime="2026-09-18T00:30:00Z" withTime data-testid="outer" />
+        <NumberFormat value={1280} currency="JPY" data-testid="price" />
+      </p>
+      <ThemeProvider timeZone="America/New_York">
+        <p>
+          <Time dateTime="2026-09-18T00:30:00Z" withTime data-testid="inner" />
+        </p>
+      </ThemeProvider>
+    </ThemeProvider>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId('outer')).toHaveTextContent('09/18/2026, 00:30');
+    await expect(canvas.getByTestId('price')).toHaveTextContent('¥1,280');
+    await expect(canvas.getByTestId('inner')).toHaveTextContent('09/17/2026, 20:30');
+  },
+};
diff --git a/src/components/theme-provider/ThemeProvider.tsx b/src/components/theme-provider/ThemeProvider.tsx
index 421501f..ee16e64 100644
--- a/src/components/theme-provider/ThemeProvider.tsx
+++ b/src/components/theme-provider/ThemeProvider.tsx
@@ -23,11 +23,21 @@ export interface ThemeProviderProps {
    * Transition の preset を書かないときの出方。書かないときは、浮かぶ面と同じ出方（下から上へ）です
    */
   transitionPreset?: TransitionPreset;
+  /**
+   * 日付と数を書く言語（Time・RelativeTime・NumberFormat）。部品の locale を書いたときは、そちらが勝ちます
+   * @default 'ja-JP'
+   */
+  locale?: string;
+  /**
+   * 時刻を書くタイムゾーン（Time・RelativeTime）。部品の timeZone を書いたときは、そちらが勝ちます
+   * @default 'Asia/Tokyo'
+   */
+  timeZone?: string;
   children?: ReactNode;
 }
 
 /**
- * 中の部品に、密度・浮かぶ UI の出し方・描く場所の既定をまとめて渡す入口
+ * 中の部品に、密度・浮かぶ UI の出し方・描く場所・言語とタイムゾーンの既定をまとめて渡す入口
  *
  * 入れ子にでき、内側の ThemeProvider が書いた値だけが外側より勝ちます。
  */
@@ -36,6 +46,8 @@ export function ThemeProvider({
   presentation,
   portalContainer,
   transitionPreset,
+  locale,
+  timeZone,
   children,
 }: ThemeProviderProps) {
   const outer = useContext(UIConfigContext);
@@ -44,8 +56,10 @@ export function ThemeProvider({
       presentation: presentation ?? outer.presentation,
       portalContainer: portalContainer !== undefined ? portalContainer : outer.portalContainer,
       transitionPreset: transitionPreset ?? outer.transitionPreset,
+      locale: locale ?? outer.locale,
+      timeZone: timeZone ?? outer.timeZone,
     }),
-    [presentation, portalContainer, transitionPreset, outer]
+    [presentation, portalContainer, transitionPreset, locale, timeZone, outer]
   );
   const content = <UIConfigContext value={value}>{children}</UIConfigContext>;
   if (density === 'auto') return content;
diff --git a/src/components/time/Time.stories.tsx b/src/components/time/Time.stories.tsx
new file mode 100644
index 0000000..c83a51a
--- /dev/null
+++ b/src/components/time/Time.stories.tsx
@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+
+import { Time } from './Time';
+import { Heading } from '../heading/Heading';
+import { Text } from '../text/Text';
+import { ThemeProvider } from '../theme-provider/ThemeProvider';
+import { Gallery, Specimen } from '../../stories/story-parts';
+
+const meta = {
+  title: 'Components/Time',
+  component: Time,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          '日付と時刻です。`<time datetime>` を出し、読む文字は `Intl.DateTimeFormat` で書きます。「3 日前」のように書くときは RelativeTime を使います。',
+          '',
+          '- `dateTime` には Date・ISO 8601 の文字列・ミリ秒を渡します。`2026-09-18` のような日付だけの文字列は、時刻を持たない日付として扱い、どのタイムゾーンで描いても同じ日になります。記事の日付に向いています。',
+          '- 既定は「2026/09/18」です。`withTime` を付けると「2026/09/18 09:30」になります。',
+          '- ほかの書き方は `dateStyle`（`full`・`long`・`medium`・`short`）と `timeStyle` で選びます。細かく決めるときは `format` に Intl の指定を渡します。',
+          '- 言語は `locale`（既定は `ja-JP`）、時刻は `timeZone`（既定は `Asia/Tokyo`）で書きます。サーバーと閲覧者のタイムゾーンが違っても、同じ文字になります。どちらも ThemeProvider でまとめて変えられ、部品に書いた値が勝ちます。',
+          '- 大きさと濃さは周りの文字のままです。`size`・`tone` で Text と同じ大きさ・濃さにできます。',
+        ].join('\n'),
+      },
+    },
+  },
+  args: { dateTime: '2026-09-18', withTime: false },
+  argTypes: {
+    dateTime: { control: 'text' },
+    withTime: { control: 'boolean' },
+    dateStyle: { control: 'inline-radio', options: ['full', 'long', 'medium', 'short'] },
+    timeStyle: { control: 'inline-radio', options: ['full', 'long', 'medium', 'short'] },
+    size: { control: 'inline-radio', options: ['md', 'sm'] },
+    tone: { control: 'inline-radio', options: ['default', 'muted', 'subtle'] },
+    locale: { control: 'text' },
+    timeZone: { control: 'text' },
+  },
+} satisfies Meta<typeof Time>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  name: '基本',
+};
+
+export const Formats: Story = {
+  tags: ['visual'],
+  name: '書き方',
+  parameters: {
+    controls: { disable: true },
+    docs: { description: { story: '同じ日時を、書き方を変えて並べたものです。' } },
+  },
+  render: () => (
+    <Gallery columnWidth="16rem">
+      <Specimen label="既定・withTime">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <Time dateTime="2026-09-18" />
+          </Text>
+          <Text>
+            <Time dateTime="2026-09-18T00:30:00Z" withTime />
+          </Text>
+        </div>
+      </Specimen>
+      <Specimen label="dateStyle・timeStyle">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <Time dateTime="2026-09-18" dateStyle="full" />
+          </Text>
+          <Text>
+            <Time dateTime="2026-09-18" dateStyle="long" />
+          </Text>
+          <Text>
+            <Time dateTime="2026-09-18T00:30:00Z" timeStyle="short" />
+          </Text>
+        </div>
+      </Specimen>
+      <Specimen label="format・言語">
+        <div className="flex flex-col gap-1">
+          <Text>
+            <Time dateTime="2026-09-18" format={{ month: 'long', day: 'numeric' }} />
+          </Text>
+          <ThemeProvider locale="en-US" timeZone="America/New_York">
+            <Text>
+              <Time dateTime="2026-09-18T00:30:00Z" withTime />
+            </Text>
+          </ThemeProvider>
+        </div>
+      </Specimen>
+    </Gallery>
+  ),
+};
+
+export const InArticle: Story = {
+  tags: ['visual'],
+  name: '記事の日付',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '記事の見出しの下に置く日付です。`size="sm"`・`tone="subtle"` の Text の中に置くと、周りの大きさと濃さになります。',
+      },
+    },
+  },
+  render: () => (
+    <div data-reading className="flex w-[24rem] flex-col gap-2">
+      <Heading level={1}>サイトを作り直しました</Heading>
+      <Text size="sm" tone="subtle">
+        <Time dateTime="2026-09-18" />
+        ・Design
+      </Text>
+    </div>
+  ),
+};
+
+export const Accessibility: Story = {
+  name: '要素',
+  args: { dateTime: '2026-09-18' },
+  play: async ({ canvas }) => {
+    const el = canvas.getByText('2026/09/18');
+    await expect(el.tagName).toBe('TIME');
+    await expect(el).toHaveAttribute('datetime', '2026-09-18');
+  },
+};
+
+export const Provider: Story = {
+  name: '言語とタイムゾーンを ThemeProvider で変える',
+  parameters: {
+    docs: {
+      description: {
+        story: 'ThemeProvider の locale・timeZone が既定になります。部品に書いた値が勝ちます。',
+      },
+    },
+  },
+  render: () => (
+    <ThemeProvider locale="en-US" timeZone="UTC">
+      <Text>
+        <Time dateTime="2026-09-18T00:30:00Z" withTime data-testid="provider" />
+      </Text>
+      <Text>
+        <Time
+          dateTime="2026-09-18T00:30:00Z"
+          withTime
+          locale="ja-JP"
+          timeZone="Asia/Tokyo"
+          data-testid="own"
+        />
+      </Text>
+    </ThemeProvider>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId('provider')).toHaveTextContent('09/18/2026, 00:30');
+    await expect(canvas.getByTestId('own')).toHaveTextContent('2026/09/18 09:30');
+  },
+};
diff --git a/src/components/time/Time.tsx b/src/components/time/Time.tsx
new file mode 100644
index 0000000..3ffa82f
--- /dev/null
+++ b/src/components/time/Time.tsx
@@ -0,0 +1,93 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+import { dateTimeOptions, formatAbsolute, parseDate } from '../../internal/date/format-date';
+import { timeText } from '../../internal/date/time-text';
+import { useLocale } from '../../internal/date/use-locale';
+
+// 日付・時刻。見た目は Text と同じ役割で、大きさと濃さは指定しなければ周りの文字のまま（src/internal/date/time-text.ts。RelativeTime と共有）
+// 日時の解釈と書き方は src/internal/date/format-date.ts
+
+export interface TimeProps
+  extends Omit<ComponentProps<'time'>, 'dateTime'>, VariantProps<typeof timeText> {
+  /**
+   * 日時。`YYYY-MM-DD` の文字列は、時刻を持たない暦の日付として扱い、どのタイムゾーンでも同じ日を書きます。
+   * それ以外（Date・ISO 8601 の文字列・ミリ秒）は、`timeZone` の時刻で書きます
+   */
+  dateTime: Date | string | number;
+  /**
+   * 時刻も書きます。ja-JP では「2026/09/18 09:30」です
+   * @default false
+   */
+  withTime?: boolean;
+  /**
+   * Intl の日付の書き方。指定すると既定の「2026/09/18」の代わりに使います。
+   * ja-JP では、full は「2026年9月18日金曜日」、long は「2026年9月18日」、medium と short は「2026/09/18」です
+   */
+  dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+  /**
+   * Intl の時刻の書き方。ja-JP では、short は「9:30」、medium は「9:30:00」です。
+   * dateStyle を書かずにこれだけを書くと、時刻だけを書きます
+   */
+  timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];
+  /**
+   * Intl.DateTimeFormat の指定をそのまま渡します。指定すると withTime・dateStyle・timeStyle は使いません
+   */
+  format?: Intl.DateTimeFormatOptions;
+  /**
+   * 言語と地域。書かなければ ThemeProvider の locale、それもなければ ja-JP です
+   */
+  locale?: string;
+  /**
+   * 時刻を書くときのタイムゾーン。`YYYY-MM-DD` の日付には使いません。
+   * 書かなければ ThemeProvider の timeZone、それもなければ Asia/Tokyo です（サーバーと閲覧者で文字が変わらないよう固定しています）
+   */
+  timeZone?: string;
+  /**
+   * 大きさ。指定しなければ周りの文字のままです。md は本文、sm は日付や注記です
+   */
+  size?: VariantProps<typeof timeText>['size'];
+  /**
+   * 濃さ。指定しなければ周りの文字のままです
+   */
+  tone?: VariantProps<typeof timeText>['tone'];
+  /**
+   * 書く文字を自分で決めるときに渡します。datetime 属性は dateTime から作ります
+   */
+  children?: ReactNode;
+}
+
+/**
+ * 日付・時刻。`<time datetime>` を出し、読む文字は Intl.DateTimeFormat で書きます
+ */
+export function Time({
+  dateTime,
+  withTime = false,
+  dateStyle,
+  timeStyle,
+  format,
+  locale: localeProp,
+  timeZone: timeZoneProp,
+  size,
+  tone,
+  className,
+  children,
+  ...props
+}: TimeProps) {
+  const { locale, timeZone } = useLocale(localeProp, timeZoneProp);
+  const parsed = parseDate(dateTime);
+  const text = parsed
+    ? formatAbsolute(
+        parsed,
+        dateTimeOptions({ withTime, dateStyle, timeStyle, format }),
+        locale,
+        timeZone
+      )
+    : String(dateTime);
+
+  return (
+    <time dateTime={parsed?.machine} className={timeText({ size, tone, className })} {...props}>
+      {children ?? text}
+    </time>
+  );
+}
diff --git a/src/components/time/__screenshots__/Time.stories.tsx/components-time-formats-chromium-linux.png b/src/components/time/__screenshots__/Time.stories.tsx/components-time-formats-chromium-linux.png
new file mode 100644
index 0000000..ff0e265
Binary files /dev/null and b/src/components/time/__screenshots__/Time.stories.tsx/components-time-formats-chromium-linux.png differ
diff --git a/src/components/time/__screenshots__/Time.stories.tsx/components-time-in-article-chromium-linux.png b/src/components/time/__screenshots__/Time.stories.tsx/components-time-in-article-chromium-linux.png
new file mode 100644
index 0000000..3d69161
Binary files /dev/null and b/src/components/time/__screenshots__/Time.stories.tsx/components-time-in-article-chromium-linux.png differ
diff --git a/src/index.ts b/src/index.ts
index ace2d81..64f56c4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,30 @@
 // @kazuemon/ui の公開の入口。ここに並べたものだけを利用者に渡す
 // CSS は別の入口（package.json の exports の ./styles.css → src/styles/index.css）
 
+export {
+  Accordion,
+  type AccordionAppearance,
+  type AccordionIndicator,
+  AccordionItem,
+  type AccordionItemProps,
+  type AccordionProps,
+} from './components/accordion/Accordion';
+export {
+  AlertDialog,
+  type AlertDialogProps,
+  type AlertDialogTone,
+} from './components/alert-dialog/AlertDialog';
 export { AspectRatio, type AspectRatioProps } from './components/aspect-ratio/AspectRatio';
 export { Badge, type BadgeProps } from './components/badge/Badge';
 export { Blockquote, type BlockquoteProps } from './components/blockquote/Blockquote';
-export { Button, type ButtonLinkProps, type ButtonProps } from './components/button/Button';
+export { Bleed, type BleedProps } from './components/bleed/Bleed';
+export {
+  Button,
+  type ButtonIconOnlyProps,
+  type ButtonShape,
+  type ButtonLinkProps,
+  type ButtonProps,
+} from './components/button/Button';
 export {
   Callout,
   type CalloutAppearance,
@@ -30,6 +50,11 @@ export {
   type ContainerProps,
   type ContainerSize,
 } from './components/container/Container';
+export {
+  CopyButton,
+  type CopyButtonFeedback,
+  type CopyButtonProps,
+} from './components/copy-button/CopyButton';
 export { Dialog, type DialogPresentation, type DialogProps } from './components/dialog/Dialog';
 export { Divider, type DividerProps } from './components/divider/Divider';
 export {
@@ -62,6 +87,7 @@ export { Image, type ImageProps } from './components/image/Image';
 export { Kbd, type KbdProps } from './components/kbd/Kbd';
 export { List, ListItem, type ListItemProps, type ListProps } from './components/list/List';
 export { Link, type LinkContentAlign, type LinkProps } from './components/link/Link';
+export { Mark, type MarkProps } from './components/mark/Mark';
 export { LoadingBar, type LoadingIndicator, Spinner } from './components/loading/Loading';
 export {
   Notice,
@@ -70,6 +96,7 @@ export {
   type NoticeProps,
 } from './components/notice/Notice';
 export { NoticeRegion, type NoticeRegionProps } from './components/notice/NoticeRegion';
+export { NumberFormat, type NumberFormatProps } from './components/number-format/NumberFormat';
 export { OverlayClose, type OverlayCloseProps } from './internal/overlay/overlay-close';
 export {
   Popover,
@@ -80,6 +107,7 @@ export {
 } from './components/popover/Popover';
 export { Portal, type PortalProps } from './components/portal/Portal';
 export { ThemeProvider, type ThemeProviderProps } from './components/theme-provider/ThemeProvider';
+export { RelativeTime, type RelativeTimeProps } from './components/relative-time/RelativeTime';
 export { Prose, type ProseProps } from './components/prose/Prose';
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio/Radio';
 export {
@@ -116,8 +144,10 @@ export {
   TableRow,
 } from './components/table/Table';
 export { Skeleton, type SkeletonProps } from './components/skeleton/Skeleton';
+export { SkipLink, type SkipLinkProps } from './components/skip-link/SkipLink';
 export { Tag, type TagProps } from './components/tag/Tag';
 export { Text, type TextProps } from './components/text/Text';
+export { Time, type TimeProps } from './components/time/Time';
 export {
   Transition,
   type TransitionPreset,
@@ -125,6 +155,7 @@ export {
 } from './components/transition/Transition';
 export { Tooltip, type TooltipProps, type TooltipSide } from './components/tooltip/Tooltip';
 export { TextField, type TextFieldProps } from './components/text-field/TextField';
+export { Textarea, type TextareaProps } from './components/textarea/Textarea';
 export {
   VisuallyHidden,
   type VisuallyHiddenProps,
diff --git a/src/components/collapsible/collapsible-styles.ts b/src/internal/collapsible-styles.ts
similarity index 98%
rename from src/components/collapsible/collapsible-styles.ts
rename to src/internal/collapsible-styles.ts
index ceac3da..52b1a72 100644
--- a/src/components/collapsible/collapsible-styles.ts
+++ b/src/internal/collapsible-styles.ts
@@ -1,5 +1,5 @@
-import { focusRing } from '../../internal/focus-styles';
-import { tv } from '../../internal/tv';
+import { focusRing } from './focus-styles';
+import { tv } from './tv';
 
 // 開閉の行と中身の見た目。Accordion・FileTree など、開閉を土台にする部品もこれを使う
 // 値は design/tokens.css の --collapsible-*
diff --git a/src/internal/copy/copy-parts.tsx b/src/internal/copy/copy-parts.tsx
new file mode 100644
index 0000000..0f4d6a6
--- /dev/null
+++ b/src/internal/copy/copy-parts.tsx
@@ -0,0 +1,20 @@
+import { CheckMarkIcon, CopyIcon } from '../icons';
+
+// コピーのボタンの中身で、CodeBlock と CopyButton が共有するもの
+
+/** コピーの印。コピーしたあとはチェックに変わる。飾りなので読み上げない（アイコンは aria-hidden） */
+export function CopyGlyph({ copied, standalone }: { copied: boolean; standalone?: boolean }) {
+  return copied ? <CheckMarkIcon standalone={standalone} /> : <CopyIcon standalone={standalone} />;
+}
+
+/**
+ * コピーしたことを読み上げる。箱は先に置いておき、中身だけを入れる（role="status" は、あとから置いた箱では読まれないことがある）
+ * ボタンの外に置く。中に置くと、文字のボタンの名前に混ざる
+ */
+export function CopiedStatus({ copied, label }: { copied: boolean; label: string }) {
+  return (
+    <span role="status" className="sr-only">
+      {copied ? label : ''}
+    </span>
+  );
+}
diff --git a/src/components/code-block/use-copy.ts b/src/internal/copy/use-copy.ts
similarity index 61%
rename from src/components/code-block/use-copy.ts
rename to src/internal/copy/use-copy.ts
index 2437347..1145c0d 100644
--- a/src/components/code-block/use-copy.ts
+++ b/src/internal/copy/use-copy.ts
@@ -1,10 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * コピーしたあとの見た目に固定する（ストーリーと比較の見本用。公開しない）
+ * true を配った範囲の中では、useCopy の copied がいつも true になる
+ */
+export const CopiedPreviewContext = createContext(false);
 
 /**
  * 文字列をクリップボードに写し、写せたら duration のあいだ copied を true にする
  * 写せなかったとき（権限がない・安全でない接続）は copied を変えず、false を返す
+ * CodeBlock のコピーのボタンと CopyButton が使う
  */
 export function useCopy(duration: number) {
+  const preview = use(CopiedPreviewContext);
   const [copied, setCopied] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   useEffect(() => () => clearTimeout(timer.current), []);
@@ -22,5 +30,5 @@ export function useCopy(duration: number) {
     },
     [duration]
   );
-  return { copied, copy };
+  return { copied: copied || preview, copy };
 }
diff --git a/src/internal/date/format-date.ts b/src/internal/date/format-date.ts
new file mode 100644
index 0000000..61dde43
--- /dev/null
+++ b/src/internal/date/format-date.ts
@@ -0,0 +1,96 @@
+// 日付・時刻を文字にする計算（Time・RelativeTime）。DOM も React も使わない
+
+/** 言語の既定。ThemeProvider の locale・部品の locale が勝つ */
+export const DEFAULT_LOCALE = 'ja-JP';
+/** 時刻を書くタイムゾーンの既定。サーバーと閲覧者で文字が変わらないよう固定する。ThemeProvider の timeZone・部品の timeZone が勝つ */
+export const DEFAULT_TIME_ZONE = 'Asia/Tokyo';
+
+/** 既定の書き方。ja-JP で「2026/09/18」（ゼロ埋めの年/月/日） */
+export const DEFAULT_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+};
+/** 時刻を付けるときの既定。ja-JP で「2026/09/18 09:30」（日付に合わせて時もゼロ埋め、24 時間） */
+export const DEFAULT_DATE_TIME_FORMAT: Intl.DateTimeFormatOptions = {
+  ...DEFAULT_DATE_FORMAT,
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+};
+
+/** 日付だけの文字列（YYYY-MM-DD）。時刻もタイムゾーンも持たない暦の日付として扱う */
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+
+export interface ParsedDate {
+  date: Date;
+  /** <time datetime> に書く機械向けの値 */
+  machine: string;
+  /** 日付だけの文字列で渡されたか。そのときは UTC で書き、どの環境でも同じ日になる */
+  dateOnly: boolean;
+}
+
+export function parseDate(value: Date | string | number): ParsedDate | null {
+  if (typeof value === 'string' && DATE_ONLY.test(value)) {
+    const date = new Date(`${value}T00:00:00Z`);
+    return Number.isNaN(date.getTime()) ? null : { date, machine: value, dateOnly: true };
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return { date, machine: date.toISOString(), dateOnly: false };
+}
+
+// 相対の書き方の単位。短い順に、この秒数に満たなければこの単位で書く
+const RELATIVE_UNITS: [unit: Intl.RelativeTimeFormatUnit, seconds: number, limit: number][] = [
+  ['second', 1, 45],
+  ['minute', 60, 60 * 45],
+  ['hour', 60 * 60, 60 * 60 * 22],
+  ['day', 60 * 60 * 24, 60 * 60 * 24 * 26],
+  ['month', 60 * 60 * 24 * 30, 60 * 60 * 24 * 320],
+  ['year', 60 * 60 * 24 * 365, Number.POSITIVE_INFINITY],
+];
+
+/** 「3 日前」「昨日」「今」のように、now からの隔たりを書く */
+export function formatRelative(date: Date, now: number, locale: string): string {
+  const diff = (date.getTime() - now) / 1000;
+  const abs = Math.abs(diff);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  for (const [unit, seconds, limit] of RELATIVE_UNITS) {
+    if (abs < limit) {
+      // 45 秒に満たないときは「今」にする
+      if (unit === 'second') return rtf.format(0, 'second');
+      return rtf.format(Math.round(diff / seconds), unit);
+    }
+  }
+  return rtf.format(Math.round(diff / (60 * 60 * 24 * 365)), 'year');
+}
+
+/** 日付だけの値は UTC で、それ以外は timeZone で書く */
+export function formatAbsolute(
+  parsed: ParsedDate,
+  options: Intl.DateTimeFormatOptions,
+  locale: string,
+  timeZone: string
+): string {
+  return new Intl.DateTimeFormat(locale, {
+    ...options,
+    timeZone: parsed.dateOnly ? 'UTC' : timeZone,
+  }).format(parsed.date);
+}
+
+/** Time・RelativeTime の書き方の props から、Intl の指定を決める。format > dateStyle・timeStyle > 既定（withTime で時刻も） */
+export function dateTimeOptions({
+  withTime,
+  dateStyle,
+  timeStyle,
+  format,
+}: {
+  withTime?: boolean;
+  dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+  timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];
+  format?: Intl.DateTimeFormatOptions;
+}): Intl.DateTimeFormatOptions {
+  if (format) return format;
+  if (dateStyle || timeStyle) return { dateStyle, timeStyle };
+  return withTime ? DEFAULT_DATE_TIME_FORMAT : DEFAULT_DATE_FORMAT;
+}
diff --git a/src/internal/date/time-text.ts b/src/internal/date/time-text.ts
new file mode 100644
index 0000000..d08d039
--- /dev/null
+++ b/src/internal/date/time-text.ts
@@ -0,0 +1,11 @@
+import { textStyles } from '../reading/text';
+import { tv } from '../tv';
+
+// 日時（Time・RelativeTime）の見た目。Text と同じ役割（src/internal/reading/text.ts）の大きさと濃さを、既定なしで持つ
+// 指定しなければ周りの文字のまま。数字の幅は変えない（欧文フォント Mulish の数字は、はじめから等幅）
+export const timeText = tv({
+  variants: {
+    size: textStyles.size,
+    tone: textStyles.tone,
+  },
+});
diff --git a/src/internal/date/use-locale.ts b/src/internal/date/use-locale.ts
new file mode 100644
index 0000000..9a67dc1
--- /dev/null
+++ b/src/internal/date/use-locale.ts
@@ -0,0 +1,11 @@
+import { useUIConfig } from '../ui-config';
+import { DEFAULT_LOCALE, DEFAULT_TIME_ZONE } from './format-date';
+
+/** 言語とタイムゾーン。部品の props → ThemeProvider → 既定（ja-JP・Asia/Tokyo）の順に勝つ */
+export function useLocale(locale?: string, timeZone?: string) {
+  const config = useUIConfig();
+  return {
+    locale: locale ?? config.locale ?? DEFAULT_LOCALE,
+    timeZone: timeZone ?? config.timeZone ?? DEFAULT_TIME_ZONE,
+  };
+}
diff --git a/src/internal/date/use-now.ts b/src/internal/date/use-now.ts
new file mode 100644
index 0000000..73cc087
--- /dev/null
+++ b/src/internal/date/use-now.ts
@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from 'react';
+
+// 相対の書き方（RelativeTime）の「今」。ブラウザでだけ読み、1 分ごとに進める
+// サーバーと hydration の最初の描画では null を返し、サーバーの HTML と同じ文字（ふつうの日付）を描く
+// hydration のあとに React が今の時刻で描き直すので、食い違いの警告は出ない
+
+const TICK = 60_000;
+
+let current: number | null = null;
+let timer: ReturnType<typeof setInterval> | undefined;
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  if (timer === undefined) {
+    current = Date.now();
+    timer = setInterval(() => {
+      current = Date.now();
+      for (const l of listeners) l();
+    }, TICK);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && timer !== undefined) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  };
+}
+
+function getSnapshot() {
+  current ??= Date.now();
+  return current;
+}
+
+const getServerSnapshot = () => null;
+const subscribeNone = () => () => {};
+const getNone = () => null;
+
+/** enabled のときだけ、ブラウザの今の時刻（ミリ秒）を返す。サーバーと hydration の最初の描画では null */
+export function useNow(enabled: boolean): number | null {
+  return useSyncExternalStore(
+    enabled ? subscribe : subscribeNone,
+    enabled ? getSnapshot : getNone,
+    getServerSnapshot
+  );
+}
diff --git a/src/internal/field/Field.tsx b/src/internal/field/Field.tsx
index 0a06734..63b55a0 100644
--- a/src/internal/field/Field.tsx
+++ b/src/internal/field/Field.tsx
@@ -170,6 +170,8 @@ export interface FieldProps {
   captionPlacement?: CaptionPlacement;
   /** エラーの内容。渡すとエラーの状態になり、本体の下に丸の「!」と赤い文字で出す */
   error?: ReactNode;
+  /** error がなくても、欄をエラーの状態（赤い枠線・aria-invalid）にする。エラーの行は出さない。Textarea の文字数の上限を超えたときに使う */
+  invalid?: boolean;
   /**
    * 警告の内容。本体の下に三角とオリーブ色の文字で出す。欄の見た目は変えず、エラーの状態にもしない
    * error と両方あるときは両方出す。エラーの行が上、警告の行がその下（design/adr/0041 の追記）
@@ -209,6 +211,7 @@ export function Field({
   caption,
   captionPlacement = 'top',
   error,
+  invalid,
   warning,
   success,
   info,
@@ -245,7 +248,7 @@ export function Field({
   const loadingState = formLock.blocking ? 'blocking' : loading ? loadingBehavior : undefined;
   return (
     <BaseField.Root
-      invalid={error ? true : undefined}
+      invalid={error || invalid ? true : undefined}
       disabled={disabled || undefined}
       data-loading={loadingState}
       // 成功の見た目（後半の軸 37）。エラーのときはエラーを優先する
diff --git a/src/internal/overlay/overlay-role-context.ts b/src/internal/overlay/overlay-role-context.ts
new file mode 100644
index 0000000..a32f1e3
--- /dev/null
+++ b/src/internal/overlay/overlay-role-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/** 重なる面の読み上げの役割。alertdialog は、取り消せない操作の確かめ（AlertDialog） */
+export type OverlayRole = 'dialog' | 'alertdialog';
+
+// AlertDialog が Dialog を包んで、面の役割を alertdialog にする。Dialog は面を描いたあと、中身と下の操作には dialog を配り直す
+// （中に置いた Dialog に alertdialog が写らないようにするため）
+export const OverlayRoleContext = createContext<OverlayRole>('dialog');
diff --git a/src/internal/overlay/popup-role.tsx b/src/internal/overlay/popup-role.tsx
new file mode 100644
index 0000000..ed306af
--- /dev/null
+++ b/src/internal/overlay/popup-role.tsx
@@ -0,0 +1,16 @@
+import { useLayoutEffect, useRef } from 'react';
+
+import type { OverlayRole } from './overlay-role-context';
+
+/**
+ * 画面の下から出すシート（Base UI の Drawer）の面の役割を書き換える。シートの面は役割を props で受け取らないため、
+ * 面の中身に置いた見えない要素から、いちばん近い面（role="dialog"）を探して書き換える
+ * Base UI は面の role を毎回同じ値（dialog）で描くので、React が書き戻すことはない。面は閉じるたびに外され、開くたびにここも描き直す
+ */
+export function PopupRole({ role }: { role: OverlayRole }) {
+  const ref = useRef<HTMLSpanElement>(null);
+  useLayoutEffect(() => {
+    ref.current?.closest('[role="dialog"],[role="alertdialog"]')?.setAttribute('role', role);
+  }, [role]);
+  return <span ref={ref} hidden />;
+}
diff --git a/src/internal/reading/mark.ts b/src/internal/reading/mark.ts
new file mode 100644
index 0000000..ece1eeb
--- /dev/null
+++ b/src/internal/reading/mark.ts
@@ -0,0 +1,7 @@
+// 目立たせたい言葉（Mark）の見た目。部品と Prose が同じクラス列を使う（書き方は heading.ts の先頭）
+// 警告の黄色（面用）を 45% に薄めて全面に敷く蛍光ペンの形（軸 63 の C）。Primary の青の補色で、青いリンクと紛れない
+// 文字の色は周りの文字のまま。折り返した行ごとに角と余白を付ける
+// 文の中にあるので影は付けない（原則1）
+export const markStyles = [
+  '[:where(&:not([data-prose]),&_mark)]:rounded-xs [:where(&:not([data-prose]),&_mark)]:bg-[color-mix(in_oklab,var(--color-warning)_45%,transparent)] [:where(&:not([data-prose]),&_mark)]:box-decoration-clone [:where(&:not([data-prose]),&_mark)]:px-[0.1em] [:where(&:not([data-prose]),&_mark)]:text-inherit',
+];
diff --git a/src/internal/scroll-area-styles.ts b/src/internal/scroll-area-styles.ts
new file mode 100644
index 0000000..d0abdc7
--- /dev/null
+++ b/src/internal/scroll-area-styles.ts
@@ -0,0 +1,68 @@
+import { focusRing } from './focus-styles';
+import { tv } from './tv';
+
+// ScrollArea と、中身を上限の高さでスクロールさせる Textarea が共有する見た目（つまみ・帯・影の層）
+// スクロールする枠 — 軸 93
+//   続きがあることは、端に落とす内側の影で見せる（原則1）。文字やぼかしでは知らせない
+//   影は Select の浮かぶ選択肢・シートと同じ見た目と計算（SheetMoreCue・useMoreCues）。濃さはスクロールした量に合わせる
+//   横にスクロールするときは、左右の端にも同じ影を落とす（useInlineCues）
+//   つまみは中身の上に重ねる細い棒（3:1 の輪郭のグレー）。影があるときは、枠に載せたとき・スクロールしているあいだ・
+//   キーボードで止まったときに出す（scrollbar="always" でいつも出す）。影がないときは、続きを伝えるためにいつも出す
+//   つまみは見えている形がそのまま押せる範囲。帯（Scrollbar）は押せず、帯の上を押すと下の中身に届く
+//   つまみそのものに載せると、枠の内側へ太くなる（膨らんだ姿がそのままつかめる範囲）。つかんで動かすあいだも太いまま
+//   キーボードでは、スクロールできるときだけ枠（Viewport）に Tab で止まり、矢印キーでスクロールする。フォーカスの線は focusRing
+export const scrollAreaStyles = tv({
+  slots: {
+    root: [
+      'group/scroll-area relative flex min-h-0 flex-col rounded-[inherit]',
+      // 外（Select の浮かぶ選択肢など）の影の位置と濃さを受け継がない。濃さはスクロールする要素が書き直す
+      '[--cue-bottom:0] [--cue-left:0px] [--cue-right:0px] [--cue-top:0] [--cue-x-end:0] [--cue-x-start:0]',
+    ],
+    viewport: [
+      // ブラウザのスクロールバーは Base UI が隠す。スクロールできない向きに溝を出さないよう、overflow は auto にする
+      'min-h-0 flex-auto [overflow:auto]! rounded-[inherit] outline-none',
+      ...focusRing,
+      'transition-[outline-color,outline-offset] duration-(--focus-ring-duration)',
+    ],
+    // 影を描く層。枠の角丸で切る（カードの端まで届かせたときに、角から影がはみ出さない）
+    edges: 'pointer-events-none absolute inset-0 z-1 overflow-hidden rounded-[inherit]',
+    edgeX: ['absolute top-0 bottom-0 w-3 from-(color:--color-sheet-edge-shadow) to-transparent'],
+    scrollbar: [
+      // 帯は膨らんだつまみの太さにし、端から --scroll-area-thumb-inset 離す（margin。押せる範囲に入れない）
+      // 帯そのものは押せない（pointer-events-none）。押せるのはつまみだけ
+      'group/bar pointer-events-none z-2 m-(--scroll-area-thumb-inset) flex transition-opacity duration-(--duration-normal)',
+      'data-[orientation=vertical]:w-(--scroll-area-thumb-size-hover)',
+      'data-[orientation=horizontal]:h-(--scroll-area-thumb-size-hover)',
+    ],
+    // つまみは帯の外側の辺に寄せ、太くなるときは枠の内側へ伸ばす
+    //   載せたとき（hover）とつかんでいるあいだ（active。ポインタを捕まえているので、つまみの外へ出ても続く）に太くする
+    //   カーソルは、載せたときにつかめる手、つかんでいるあいだは握った手にする
+    thumb: [
+      'pointer-events-auto cursor-grab rounded-pill bg-(--scroll-area-thumb-color) active:cursor-grabbing',
+      '[--thumb-size:var(--scroll-area-thumb-size)] hover:[--thumb-size:var(--scroll-area-thumb-size-hover)] active:[--thumb-size:var(--scroll-area-thumb-size-hover)]',
+      'data-[orientation=vertical]:ms-auto data-[orientation=vertical]:w-(--thumb-size)',
+      'data-[orientation=vertical]:transition-[width] data-[orientation=vertical]:duration-(--duration-fast)',
+      'data-[orientation=horizontal]:mt-auto data-[orientation=horizontal]:h-(--thumb-size)',
+      'data-[orientation=horizontal]:transition-[height] data-[orientation=horizontal]:duration-(--duration-fast)',
+      'motion-reduce:transition-none',
+    ],
+  },
+  variants: {
+    scrollbar: {
+      // ふだんは隠す。枠に載せたとき・スクロール中・キーボードで止まったときに出す
+      // 隠れているあいだは、つまみも押せない（指で端を触ってもつまみをつかまず、中身がスクロールする）
+      scroll: {
+        scrollbar: [
+          'opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100 data-scrolling:duration-0',
+          'group-has-[[data-slot=scroll-area-viewport]:focus-visible]/scroll-area:opacity-100',
+          // ストーリーの hover の固定（pseudo-states）でも出す
+          'group-hover/scroll-area:opacity-100',
+        ],
+        thumb:
+          'pointer-events-none group-data-hovering/bar:pointer-events-auto group-data-scrolling/bar:pointer-events-auto',
+      },
+      always: { scrollbar: 'opacity-100' },
+    },
+  },
+  defaultVariants: { scrollbar: 'scroll' },
+});
diff --git a/src/internal/ui-config.ts b/src/internal/ui-config.ts
index b98fb3a..7805bf6 100644
--- a/src/internal/ui-config.ts
+++ b/src/internal/ui-config.ts
@@ -13,6 +13,10 @@ export interface UIConfig {
   portalContainer?: HTMLElement | null;
   /** Transition の preset を書かないときの出方 */
   transitionPreset?: TransitionPreset;
+  /** 日付・数を書く言語（Time・RelativeTime・NumberFormat） */
+  locale?: string;
+  /** 時刻を書くタイムゾーン（Time・RelativeTime） */
+  timeZone?: string;
 }
 
 export const UIConfigContext = createContext<UIConfig>({});