ksk-design-system 1.68.0 → 1.70.0

package/MIGRATION.md

@@ -53,6 +53,116 @@ 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"` 固定）を
+使うため、左右・下に余白を持つカード型のシート（`side="float"` / `"float-glass"`）を
+受けられなかった。消費側はその形のシートだけ、デスクトップ中央モーダル化の
+global CSS（`!important`）を残す必要があった。
+
+`side` prop を足したので、float 系も同じ 1 つの API で切り替えられる。
+
+**before**（`Sheet` + `SheetContent side="float"` + 消費側 global CSS）
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}>
+  <SheetContent side="float" className="w-full max-w-md mx-auto p-6">
+    …
+  </SheetContent>
+</Sheet>
+```
+
+```css
+/* 消費側 global CSS — 削除する */
+@media (min-width: 1024px) {
+  [data-slot="sheet-content"][data-side="float"]:not([data-snap-active]) {
+    left: 50% !important; top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: min(32rem, calc(100vw - 4rem)) !important;
+    max-height: min(85vh, 46rem) !important;
+    border-radius: var(--Radius-Modal) !important;
+  }
+}
+```
+
+**after**
+
+```tsx
+<ResponsiveDialog open={open} onOpenChange={setOpen} breakpoint="lg">
+  <ResponsiveOverlayFrame side="float" className="max-w-md">
+    …
+  </ResponsiveOverlayFrame>
+</ResponsiveDialog>
+```
+
+注意点:
+
+- `side` ごとに効く prop が違い、**効かない組み合わせは型エラーになる**（黙って無視されない）。
+  - `side="bottom"`（既定）: `preset` / `surface` / `desktopPosition` が使える。`padding` は不可
+    （preset が余白を持つため）。
+  - `side="float"` / `"float-glass"`: `padding`（既定 `true` = `p-6`）が使える。
+    `preset` / `surface` / `desktopPosition` は不可。
+- `"float-glass"` の素材は `side` 自身が決める（`glass` + `glass-specular`）。
+  `surface="glass"`（`glass-strong`）とは別物で、二重に重ねると glass.css の記述順でしか
+  勝敗が決まらないため型で禁止している。
+- デスクトップの寸法は幅 `32rem`（`sm:max-w-lg`）× 高さ `min(85dvh, 46rem)`。上の global CSS が
+  当てていた値と実質同じだが、厳密には次の差がある:
+  - 高さの単位が `dvh`（DS）と `vh`（旧 CSS）で、アドレスバーが伸縮する環境では一致しない。
+  - 幅の上限は `sm:`（640px 以上）で効く。`breakpoint` を 640px 未満に解決する設定
+    （`product-theme` で小さい値を入れた場合）では DialogContent 既定の
+    `max-w-[calc(100%_-_3rem)]` が残る。`breakpoint="md"` / `"lg"` 運用なら差は出ない。
+- デスクトップでは overlay（背景の暗転）がガラスにならない（`glassOverlay` はシート固有の
+  prop なので落ちる）。面だけガラス、背景は通常の暗転になる。
+- snap point 付きのシートは #472 と同じくシートのまま。ただし DS の snap は
+  `side="bottom"` 専用なので、`snapPoints` と float 系の併用は snap もデスクトップ変換も
+  効かない「何も起きない」組み合わせになる。どちらかに寄せること。
+
 ### 次のリリース — `ResponsiveOverlayFrame` 追加（`BottomSheetFrame` + 消費側デスクトップ CSS からの移行 / issue #472）
 
 `BottomSheetFrame` はモバイルの preset（`mobile-full` / `mobile-page` /

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.68.0",
+    "version": "1.70.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -2230,14 +2230,17 @@
     {
       "name": "ResponsiveOverlayFrame",
       "path": "src/components/patterns/responsive-overlay-frame.tsx",
-      "description": "モバイルでは BottomSheetFrame の preset をそのまま保ち、デスクトップでは DialogContent(中央モーダル)として出すレスポンシブ overlay frame(issue #472)。消費側が global CSS で position / transform / width / max-height / radius を !important 上書きしてシートをデスクトップモーダルへ変換する回避策を不要にする。切り替え境界は親の <ResponsiveDialog breakpoint> が決め、snapPoints 付きのシートは境界を越えてもシートのまま。",
+      "description": "モバイルではシートの見た目(ボトムシート preset / float カード)をそのまま保ち、デスクトップでは DialogContent(中央モーダル)として出すレスポンシブ overlay frame(issue #472 / #479)。消費側が global CSS で position / transform / width / max-height / radius を !important 上書きしてシートをデスクトップモーダルへ変換する回避策を不要にする。切り替え境界は親の <ResponsiveDialog breakpoint> が決め、snapPoints 付きのシートは境界を越えてもシートのまま。",
       "variants": [
-        "preset: mobile-full / mobile-page / mobile-form / desktop-floating",
+        "side: bottom(既定) / float / float-glass",
+        "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 がモバイルのみキーボード追従になる"
@@ -2246,7 +2249,10 @@
         "必ず <ResponsiveDialog> の子として使う(境界の判定は ResponsiveDialog の context が持つ)",
         "consumer 側の global CSS でシートをデスクトップモーダルへ変換しない — この frame に置き換える",
         "中身は DetailSheetScaffold + ResponsiveOverlayFooter で組む",
-        "デスクトップ側にだけ効かせたい className は desktopClassName、モバイル側は mobileClassName を使う"
+        "デスクトップ側にだけ効かせたい className は desktopClassName、モバイル側は mobileClassName を使う",
+        "左右・下に余白を持つカード型のシートは side=\"float\"(Liquid Glass なら \"float-glass\")を使う。surface=\"glass\"(glass-strong)とは素材が別物で、float-glass との併用は型エラー(ガラスの二重適用防止)",
+        "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": [
         "ResponsiveOverlayFooter"

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.68.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",