ksk-design-system 1.68.0 → 1.69.0

package/MIGRATION.md

@@ -53,6 +53,70 @@ npx ksk-ds check-migration ./src
 
 ## v1 系内の minor 変更（参考）
 
+### 次のリリース — `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.69.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -2230,14 +2230,16 @@
     {
       "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（side=bottom のときだけ有効）",
         "surface: default / glass",
         "desktopPosition: center / top / fullscreen"
       ],
       "features": [
         "preset ごとのデスクトップ寸法写像(幅・max-height・角丸)",
+        "side=float / float-glass のデスクトップ写像(32rem / min(85dvh,46rem))。float 系は preset ではなく padding が効く",
         "description / autoFocus / restoreFocusOnClose / closeOnEsc / zIndex を両分岐へ透過",
         "snap sheet はデスクトップでもシートのまま",
         "ResponsiveOverlayFooter がモバイルのみキーボード追従になる"
@@ -2246,7 +2248,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 ごとに効く prop が判別ユニオンで分かれている: bottom は preset / surface / desktopPosition、float 系は 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.69.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",