レスポンシブ
このライブラリはこれまでレスポンシブ対応を前提にしていませんでした。フォーム系部品や Dialog は画面幅に関わらず同じ幅・同じレイアウトで表示されます。Discussion #63 の決定に基づき、今後は sp（スマートフォン） / tablet（タブレット） / pc（PC）の3段階のブレークポイントを導入する計画です。
一覧（計画中のトークン）
Section titled “一覧（計画中のトークン）”| トークン | 想定範囲 | 備考 |
|---|---|---|
breakpoint.sp |
〜767px | スマートフォン。既定（モバイルファースト） |
breakpoint.tablet |
768px〜1023px | タブレット |
breakpoint.pc |
1024px〜 | PC |
mediaQuery.tablet / mediaQuery.pc は上記の min-width を使った @media 文字列を提供し、コンポーネント側は個別に px を書かずにこれを参照する想定です。
- モバイルファースト: 既定のスタイルを sp 向けに書き、
mediaQuery.tablet以上で上書きする方向を基本にします。 - どの部品がブレークポイントの影響を受けるか: Dialog / ConfirmDialog（幅の切り替え）、Table（横スクロール or カード化）、StepIndicator（横並び or 縦並び）などが候補です。現行実装ではこれらはすべて固定レイアウトです。
- ブレークポイントの境界値は
breakpointとmediaQueryで共有します。個別に px を書くと、判定のずれ（境界値付近で片方だけ切り替わる）が起きます。
やってはいけないこと
Section titled “やってはいけないこと”@media (min-width: 768px)のように px を直接書かない（実装後はtheme.mediaQuery.*を参照します）。- コンポーネントごとに異なる境界値を使わない（例: ある部品は768px、別の部品は800pxで切り替わる）。
- JS 側で
window.innerWidthを個別に判定しない。CSS のメディアクエリで完結させます。