ksk-design-system 1.69.0 → 1.70.0

package/MIGRATION.md

@@ -53,6 +53,52 @@ npx ksk-ds check-migration ./src
 
 ## v1 系内の minor 変更（参考）
 
+### 次のリリース — `ResponsiveOverlayFrame` に `preset="plain"` を追加（issue #486）
+
+`side="bottom"` の経路は必ず `BottomSheetFrame` の preset を通るため、
+`sm:`（640px 以上）でフロートカード化し、内側 padding も落ちる（`p-0`）。
+「タブレット幅でも全幅の下部シートのままでよい」面——素の
+`<SheetContent side="bottom">` で組んである確認シート等——には強すぎて、
+移行すると 640〜1023px の見た目が変わってしまう。
+
+`preset="plain"` はその橋渡し。モバイルは素の `<SheetContent side="bottom">`
+そのまま（全幅・下端固定・`p-6`・`max-h-[90dvh]`）で、デスクトップだけ
+中央モーダル（32rem × `min(90dvh, 46rem)`）になる。
+
+**before**
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}>
+  <SheetContent side="bottom" className="max-w-md mx-auto pb-8">
+    …
+  </SheetContent>
+</Sheet>
+```
+
+**after**
+
+```tsx
+<ResponsiveDialog open={open} onOpenChange={setOpen} breakpoint="lg">
+  <ResponsiveOverlayFrame preset="plain" className="max-w-md mx-auto pb-8">
+    …
+  </ResponsiveOverlayFrame>
+</ResponsiveDialog>
+```
+
+注意点:
+
+- `preset="plain"` では `padding`（既定 `true` = `p-6`）が使える。他の preset は
+  preset 自身が余白を持つため `padding` は型エラーになる。
+- デスクトップの角丸は `--Radius-Modal`（1.5rem）。消費側 CSS で 1rem 等に
+  していた場合は `desktopClassName` で明示する。
+- 高さは `min(90dvh, 46rem)`。モバイルの `max-h-[90dvh]` を引き継いだ値で、
+  縦 866px 以上の画面では 46rem が効く。
+- 幅の 32rem は `sm:`（640px 以上）で効く。`breakpoint` を 640px 未満に解決する
+  設定では DialogContent 既定の `max-w-[calc(100%_-_3rem)]` が残る。
+  `breakpoint="md"` / `"lg"` 運用なら影響しない。
+- `desktopPosition` は `"center"` / `"top"` のみ。`"fullscreen"` は plain の
+  幅指定と噛み合わないため型で禁止している。
+
 ### 次のリリース — `ResponsiveOverlayFrame` が float / float-glass シートを受けられるようになった（issue #479）
 
 #472 で入った `ResponsiveOverlayFrame` は内部で `BottomSheetFrame`（`side="bottom"` 固定）を

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.69.0",
+    "version": "1.70.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -2233,13 +2233,14 @@
       "description": "モバイルではシートの見た目(ボトムシート preset / float カード)をそのまま保ち、デスクトップでは DialogContent(中央モーダル)として出すレスポンシブ overlay frame(issue #472 / #479)。消費側が global CSS で position / transform / width / max-height / radius を !important 上書きしてシートをデスクトップモーダルへ変換する回避策を不要にする。切り替え境界は親の <ResponsiveDialog breakpoint> が決め、snapPoints 付きのシートは境界を越えてもシートのまま。",
       "variants": [
         "side: bottom(既定) / float / float-glass",
-        "preset: mobile-full / mobile-page / mobile-form / desktop-floating（side=bottom のときだけ有効）",
+        "preset: mobile-full / mobile-page / mobile-form / desktop-floating / plain（side=bottom のときだけ有効）",
         "surface: default / glass",
         "desktopPosition: center / top / fullscreen"
       ],
       "features": [
         "preset ごとのデスクトップ寸法写像(幅・max-height・角丸)",
         "side=float / float-glass のデスクトップ写像(32rem / min(85dvh,46rem))。float 系は preset ではなく padding が効く",
+        "preset=\"plain\" は BottomSheetFrame を通さない素の bottom シート(全幅・下端固定・p-6・max-h-90dvh のまま)で、デスクトップだけ中央モーダル(32rem / min(90dvh,46rem))になる。padding が効く(issue #486)",
         "description / autoFocus / restoreFocusOnClose / closeOnEsc / zIndex を両分岐へ透過",
         "snap sheet はデスクトップでもシートのまま",
         "ResponsiveOverlayFooter がモバイルのみキーボード追従になる"
@@ -2250,7 +2251,7 @@
         "中身は DetailSheetScaffold + ResponsiveOverlayFooter で組む",
         "デスクトップ側にだけ効かせたい className は desktopClassName、モバイル側は mobileClassName を使う",
         "左右・下に余白を持つカード型のシートは side=\"float\"(Liquid Glass なら \"float-glass\")を使う。surface=\"glass\"(glass-strong)とは素材が別物で、float-glass との併用は型エラー(ガラスの二重適用防止)",
-        "side ごとに効く prop が判別ユニオンで分かれている: bottom は preset / surface / desktopPosition、float 系は padding。効かない組み合わせは黙って無視されずコンパイルエラーになる(型テスト test/types/responsive-overlay-frame.tsx)",
+        "side / preset ごとに効く prop が判別ユニオンで分かれている: preset 経路は preset / surface / desktopPosition、float 系と preset=\"plain\" は padding。効かない組み合わせは黙って無視されずコンパイルエラーになる(型テスト test/types/responsive-overlay-frame.tsx)",
         "float-glass の実スクロールは src/styles/sheet-keyboard.css の :is(sheet-content, dialog-content)[data-side=\"float-glass\"] が担う。.glass-specular の overflow:hidden が非レイヤー CSS で className を踏み潰すため、className だけでは効かない(#337 / #479)"
       ],
       "subcomponents": [

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.69.0",
+    "version": "1.70.0",
     "description": "semantic / semanticDark トークン（var(--Primitive-*) 参照）を実 hex に解決したサイドカー生成物。hex はデフォルト（Blue）テーマでの解決値であり、Brand 系（meta.themeDependentKeys に列挙）はテーマ差し替え（orange/green/violet 等）で実色が変わる。テーマ別の完全解決値は `ksk-design-system/native` エクスポート（バンドル済み native トークンモジュール）の themes を参照。tokens.json 本体のスキーマは変更せず、AI がこのファイルだけで実色を把握できるようにし、primitive 値の変更による semantic 実色のドリフトを --check で機械検出する。",
     "generatedBy": "scripts/generate-token-hex-cache.mjs",
     "theme": "default",