# 変形するタブ — Style Reference
> 白にセージの霞。タブの下線が隣まで伸びてから縮んで移る。

**Theme:** light  **Series:** PARTS 090  **World:** 観葉植物の定期便の案内ページ。

## Concept
細い 1 本の下線がタブの切り替えで動く。元のタブと次のタブを覆うまで伸び、それから次のタブの幅に縮む。移動の途中だけ少し太くなる。パネルは高さを補間しながら左右に入れ替わる。
色はセージ 1 色。見出しは細いウェイトで大きく。

## Signature Technique
- 計測: 各タブの `getBoundingClientRect()` からタブ列に対する `left` と `width` を取る(横スクロール分を足す)。
- 二段階 FLIP: Web Animations API で `.ind` に 3 キーフレーム。(1) 元の left/width、(2) `min(left)` 〜 `max(right)` を覆う幅、高さ 4px、offset = 190/(190+320)、(3) 次の left/width、高さ 2px。所要 510ms、`cubic-bezier(.2,.7,.2,1)`。終了後に `fill:forwards` を外して style で固定。進行中の再クリックは前のアニメーションを cancel。
- パネル: 切り替え前にコンテナの高さ h0、新パネルを表示して h1 を測り、`height: h0 → h1` を 380ms で補間。旧パネルは `position:absolute` にして −14px へ 220ms でフェードアウト、新パネルは +18px から 420ms(80ms 遅れ)でフェードイン。向きは移動方向で反転。
- a11y: `role="tablist" / "tab" / "tabpanel"`、`aria-selected`、非選択タブは `tabindex=-1`。← → Home End で移動。選択タブは `scrollIntoView({inline:'nearest'})` で列の中に収める。
- `prefers-reduced-motion`: 下線は即座に配置、パネルは切り替えのみ。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --canvas | #FFFFFF | 地 |
| --sage | #778643 | 下線、選択タブ、小見出し、丸薬ボタンの縁、表記 |
| --sage-soft | rgba(119,134,67,.12) | 予備(薄い面) |
| sage wash | radial-gradient(.22 → .06 → 白) | 上端の霞 |
| --ink | #141414 | 見出し、hover のタブ |
| --graphite | #4E4E4E | 本文、非選択タブ |
| --mist | #DCDCD6 | 罫線、表のグリッド線 |

## Typography
- Inter / Noto Sans JP。見出し 300、`clamp(38px,6vw,84px)`、字間 −.02em、行間 1.05。
- タブ 400(選択時 500)、`clamp(14px,1.2vw,17px)`。
- パネル見出し 300、`clamp(20px,2.2vw,30px)`。本文 300、`clamp(14px,1.1vw,16px)`、行間 1.75、最大 36 字。
- 小見出しと表のラベル 11px、字間 .14〜.2em、大文字。

## Spacing & Layout
- 最大幅 960px、横余白 `clamp(20px,6vw,88px)`。
- タブ列: 間隔 `clamp(4px,1vw,12px)`、各タブ `12px clamp(10px,1.4vw,18px) 16px`、下に 1px の罫線。狭い幅では横スクロール(スクロールバー非表示)。
- 下線: 高さ 2px、罫線の上に重ねる(`bottom:-1px`)。
- パネル上余白 `clamp(22px,3vw,36px)`。表は角丸 15px、1px のグリッド線、`repeat(auto-fit, minmax(180px, 1fr))`。
- 640px 以下: 下部の表記を縦積み。

## Motion
- 下線 510ms(伸び 190 + 縮み 320)。パネル高さ 380ms、出 220ms、入 420ms。
- イージング: 下線・パネル高さ・入りは `cubic-bezier(.2,.7,.2,1)`、出だけ `ease-out`。
- hover でタブの文字色が濃くなる .25s。
- `prefers-reduced-motion`: アニメーションなし。

## Components
- タブ: 文字だけ。角丸 10px 10px 0 0、focus-visible はセージ 2px の内側 outline。
- 下線: `.ind` 1 要素。
- パネル: 見出し + 一文 + 表 か 丸薬ボタン。
- 表記: 下部に `VALE / PARTS 090 / 変形するタブ` と操作説明 1 行。

## Do / Don't
Do
- タブは 3〜6 個、文字は 2〜5 字。
- 下線の色は 1 色。選択タブの文字も同じ色。
- パネルの高さ差は補間する。跳ねると下線の動きが台無しになる。
Don't
- 下線を塗りの丸薬にしない。線だから伸び縮みが読める。
- 伸びの段階を省かない。単純な移動なら別のパーツで足りる。
- 影やカードの塗りを足さない。罫線と余白で足りる。

## Usage
1. `.tabs`(`.list` と `.ind`)と `.panels`、`<script>` を切り出す。
2. タブは `button.tab[role=tab][aria-controls=パネルid]`、パネルは `section.panel[role=tabpanel][aria-labelledby=タブid]`。初期表示のパネルに `.on`、他に `hidden`。
3. パラメータは `P`:

| パラメータ | 既定 | 意味 |
|---|---|---|
| stretch | 190 | 伸びる段階の長さ(ms) |
| settle | 320 | 縮んで収まる段階の長さ(ms) |
| ease | cubic-bezier(.2,.7,.2,1) | 緩急 |
| bump | 4 | 移動中の下線の太さ(px) |

4. 色は `:root` のトークン。下線の太さは `.ind` の `height`。
5. パネルの入れ替えが不要なら `select()` の後半(高さ補間とフェード)を消し、`hidden` の切り替えだけ残す。

## References
- Oevra: 白にセージの放射状の霞、300 ウェイトの巨大な見出し、角丸 15px の罫線だけの部品、という静かな構成を抽象化した。彩度はセージ 1 色のまま、主役を下線の動きに置いた。
- Bluesky Social: 近白の地、罫線だけの区切り、丸薬形の操作、彩度 1 色の句読点、という読みやすさ優先の骨格を借りた。青はセージに替えた。