ksk-design-system 1.66.2 → 1.67.0

package/DESIGN.md

@@ -165,6 +165,10 @@ KSK の必須正本・publish 依存にせず、KSK 固有の multi-theme / nati
 - **タッチターゲット**（モバイル）: WCAG 2.5.5 / Apple HIG に従い主要操作（ボタン/アイコンボタン/入力/ナビ）の
   **min は 44px** 以上、推奨 48px。44 未満が避けられない **チップ（min 32px）は hitSlop**（不可視の拡張タップ領域）で
   実効 44px を確保する。値の正本は `tokens.json` の `touchTargets`。
+- **タップ領域はコンポーネント所有**。見た目の寸法が 44px 未満のコントロール（Chip / pill TabsTrigger /
+  RadioGroupItem の 20px 円など）は、透明な `::before` 擬似要素で当たり判定だけを 44px に広げる。
+  消費側で `[role="radio"] { min-height: 44px }` のようなロール単位のグローバル上書きを足してはいけない
+  （円が縦長に潰れ、ChipSelector など同じロールを使う他コントロールも巻き添えで壊れる。issue #470）。
 
 ## Elevation & Depth
 

package/MIGRATION.md

@@ -53,6 +53,78 @@ npx ksk-ds check-migration ./src
 
 ## v1 系内の minor 変更（参考）
 
+### 次のリリース — `ResponsiveOverlayFrame` 追加（`BottomSheetFrame` + 消費側デスクトップ CSS からの移行 / issue #472）
+
+`BottomSheetFrame` はモバイルの preset（`mobile-full` / `mobile-page` /
+`mobile-form`）を持つ一方でデスクトップでは中央モーダルにならず、消費側は
+global CSS で `position` / `transform` / `width` / `max-height` / `radius` を
+`!important` 上書きしてシートをデスクトップモーダルへ変換していた
+（belle-todo で 25 箇所 + 変換ルール1本）。この上書きは DS 内部の `data-slot` /
+`data-side` / class 名の substring に依存するため、Sheet の内部変更で静かに壊れる。
+
+`ResponsiveOverlayFrame` は同じ preset をモバイルで保ったまま、デスクトップでは
+`DialogContent`（中央モーダル）として描画する。上書き用の CSS は不要になる。
+
+**before**（`Sheet` + `BottomSheetFrame` + 消費側 global CSS）
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}>
+  <BottomSheetFrame preset="mobile-form">
+    <DetailSheetScaffold header={…} footer={<KeyboardAwareSheetFooter>…</KeyboardAwareSheetFooter>}>
+      …
+    </DetailSheetScaffold>
+  </BottomSheetFrame>
+</Sheet>
+```
+
+```css
+/* 消費側 global CSS — 削除する */
+@media (min-width: 768px) {
+  [data-slot="sheet-content"][data-side="bottom"]:not([data-snap]) {
+    position: fixed !important;
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: min(32rem, calc(100% - 3rem)) !important;
+    max-height: 85dvh !important;
+    border-radius: var(--Radius-Modal) !important;
+  }
+}
+```
+
+**after**
+
+```tsx
+<ResponsiveDialog open={open} onOpenChange={setOpen} breakpoint="md">
+  <ResponsiveOverlayFrame preset="mobile-form" description="タスクを編集します">
+    <DetailSheetScaffold header={…} footer={<ResponsiveOverlayFooter>…</ResponsiveOverlayFooter>}>
+      …
+    </DetailSheetScaffold>
+  </ResponsiveOverlayFrame>
+</ResponsiveDialog>
+```
+
+移行の手順:
+
+1. `<Sheet>` を `<ResponsiveDialog>` に、`<BottomSheetFrame>` を
+   `<ResponsiveOverlayFrame>` に置き換える（`preset` / `surface` はそのまま）。
+2. `<KeyboardAwareSheetFooter>` を `<ResponsiveOverlayFooter>` に置き換える
+   （モバイルでは従来どおりソフトキーボードに追従し、デスクトップでは静的フッタになる）。
+3. 消費側 global CSS のデスクトップ変換ルールを削除する。
+4. 切り替え境界が 768px でよければ指定不要。変えたい場合は
+   `breakpoint="lg"` などを指定するか、`breakpoint="product-theme"` にして
+   `:root { --Overlay-Desktop-Breakpoint: 1024px }` を product theme 側に置く。
+5. `<Sheet snapPoints={…}>` の snap シートは**変換しない**。`ResponsiveDialog` に
+   `snapPoints` を渡した場合は境界を越えてもシートのまま描画される。
+
+`description` / `autoFocus` / `restoreFocusOnClose` / `closeOnEsc` /
+`bodyScrollLock` / `zIndex` は両分岐へそのまま渡る。`container` /
+`overlayClassName` / `glassOverlay` / `swipeToClose` はシート固有なので
+デスクトップでは無視される。
+
+既存の `BottomSheetFrame` / `ResponsiveDialogContent` は非推奨ではない
+（モバイル専用面・preset 不要の面では引き続きそのまま使う）。
+
 ### 次のリリース — `typescript` が必須依存から optional peer dependency になった（issue #409）
 
 CLI の1ルール（P046）のためだけに typescript（24MB）が全 consumer の

package/README.md

@@ -245,6 +245,10 @@ P029 の対象外です。CLAUDE.md の実装前セルフチェックにある
 識別子・関数呼び出し・メンバーアクセスの補間（`` `bg-${color}` `` 等）や、テンプレートリテラルの
 入れ子は静的抽出できないため引き続き検出します。`cn()` / `clsx()` / CVA を使ってください。
 
+`&&` は左辺が条件で出力されないため右辺だけを見ますが、`||` は左辺が truthy ならその値が
+そのまま出力されるので両辺を見ます（issue #468）。したがって
+`` `base ${props.className || ""}` `` は `` `base ${props.className ?? ""}` `` と同じく検出対象です。
+
 ### Jest（CommonJS）でコンポーネントをテストする
 
 このパッケージは **ESM-only** です。CJS との dual build は配布せず、Jest

package/bin/lint.js

@@ -1202,7 +1202,11 @@ function splitTopLevelLogical(expr) {
     (candidate) => candidate.type === "&&" || candidate.type === "||",
   )
   if (!token) return null
-  return { rhs: expr.slice(token.index + token.type.length) }
+  return {
+    type: token.type,
+    lhs: expr.slice(0, token.index),
+    rhs: expr.slice(token.index + token.type.length),
+  }
 }
 
 function isStringLiteralExpr(expr) {
@@ -1237,7 +1241,14 @@ export function isLiteralOnlyInterpolation(expr) {
     return isLiteralOnlyInterpolation(ternary.whenTrue) && isLiteralOnlyInterpolation(ternary.whenFalse)
   }
   const logical = splitTopLevelLogical(trimmed)
-  if (logical) return isLiteralOnlyInterpolation(logical.rhs)
+  if (logical) {
+    // `&&` は左辺が条件で出力されないので右辺だけ見る。
+    // `||` は左辺が truthy ならそのまま出力されるため両辺を見る（issue #468）。
+    // `${props.className || ""}` は右辺だけならリテラルに見えてしまい、`??` 形と
+    // 判定が食い違っていた。
+    if (logical.type === "&&") return isLiteralOnlyInterpolation(logical.rhs)
+    return isLiteralOnlyInterpolation(logical.lhs) && isLiteralOnlyInterpolation(logical.rhs)
+  }
   return false
 }
 

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.66.2",
+    "version": "1.67.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
-      "patterns": 60,
+      "patterns": 61,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 151
+      "total": 152
     },
     "exportNaming": {
       "_doc": "contracts の name が `import { name } from \"ksk-design-system\"` で解決できるかを示す。__tests__/contracts-export-integrity.test.ts が src/index.ts の実 export と突き合わせて固定する。",
@@ -286,7 +286,8 @@
       "description": "ラジオボタングループ。単一選択に使用。各RadioGroupItemにLabelが必要。",
       "variants": [],
       "accessibility": [
-        "Must pair with <Label> for each item"
+        "Must pair with <Label> for each item",
+        "RadioGroupItem は見た目 20px の円のまま ::before で 44x44px の当たり判定を内蔵する。消費側で [role=\"radio\"] のグローバル寸法上書きを追加しない（issue #470）"
       ]
     },
     {
@@ -566,7 +567,7 @@
     {
       "name": "ResponsiveDialog",
       "path": "src/components/ui/responsive-dialog.tsx",
-      "description": "レスポンシブダイアログ。PCではDialog、モバイルではSheetに自動切り替え。useMediaQueryフック使用。",
+      "description": "レスポンシブダイアログ。PCではDialog、モバイルではSheetに自動切り替え。切り替え境界は breakpoint(\"sm\"|\"md\"(既定・768px)|\"lg\"|\"xl\"|\"product-theme\") または breakpointQuery(生のメディアクエリ)で指定する(issue #472)。判定結果は context で全サブコンポーネントに共有されるため、単一の境界で揃う。snapPoints を渡した場合は境界を越えてもSheetのまま。BottomSheetFrame の preset をモバイルで保ちたい場合は ResponsiveOverlayFrame を content として使う。",
       "subcomponents": [
         "ResponsiveDialogTrigger",
         "ResponsiveDialogContent",
@@ -577,7 +578,11 @@
         "ResponsiveDialogClose"
       ],
       "rules": [
-        "Dialog on desktop, Sheet on mobile. Use useMediaQuery hook."
+        "Dialog on desktop, Sheet on mobile. Use useMediaQuery hook.",
+        "境界を 768px 以外にしたい場合は breakpoint / breakpointQuery を使う(消費側で自前の useMediaQuery 分岐を書かない)",
+        "breakpoint=\"product-theme\" は :root の --Overlay-Desktop-Breakpoint を読む(product theme の公開変数)",
+        "snap point 付きシートは中央モーダルへ変換しない(snap は掴んで高さを変える操作そのものが機能)",
+        "モバイルで BottomSheetFrame の preset(mobile-full / mobile-page / mobile-form)を保ちたい場合は ResponsiveDialogContent ではなく ResponsiveOverlayFrame を使う"
       ]
     },
     {
@@ -2213,6 +2218,31 @@
         "native (src/native/components/BottomSheetFrame.tsx): height=\"preset\"(既定・従来の固定高)|\"fitContent\"(min/max を外して内容量に追従)。maxHeight で上限だけ明示できる。safeArea(既定 false) で bottom inset 分の内側余白、handle(既定 false) で上端のつまみを表示（issue #448）"
       ]
     },
+    {
+      "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 付きのシートは境界を越えてもシートのまま。",
+      "variants": [
+        "preset: mobile-full / mobile-page / mobile-form / desktop-floating",
+        "surface: default / glass",
+        "desktopPosition: center / top / fullscreen"
+      ],
+      "features": [
+        "preset ごとのデスクトップ寸法写像(幅・max-height・角丸)",
+        "description / autoFocus / restoreFocusOnClose / closeOnEsc / zIndex を両分岐へ透過",
+        "snap sheet はデスクトップでもシートのまま",
+        "ResponsiveOverlayFooter がモバイルのみキーボード追従になる"
+      ],
+      "rules": [
+        "必ず <ResponsiveDialog> の子として使う(境界の判定は ResponsiveDialog の context が持つ)",
+        "consumer 側の global CSS でシートをデスクトップモーダルへ変換しない — この frame に置き換える",
+        "中身は DetailSheetScaffold + ResponsiveOverlayFooter で組む",
+        "デスクトップ側にだけ効かせたい className は desktopClassName、モバイル側は mobileClassName を使う"
+      ],
+      "subcomponents": [
+        "ResponsiveOverlayFooter"
+      ]
+    },
     {
       "name": "SideDrawerFrame",
       "path": "src/components/patterns/side-drawer-frame.tsx",
@@ -2479,7 +2509,8 @@
         "sliding-selection-platter",
         "scrollEdge",
         "native Expo Router tabBar adapter",
-        "native hidden routes"
+        "native hidden routes",
+        "product theme customization (--Nav-*)"
       ],
       "rules": [
         "Mobile only. Use safe-area-inset-bottom.",
@@ -2491,11 +2522,32 @@
         "Use pillPosition='absolute' only inside controlled shells or Storybook demos; fixed is the app default.",
         "Set maxWidth to the mobile web shell width when the app is centered in a desktop viewport.",
         "Use floatingPosition='left'|'right' (variant='pill' only) when a FAB is placed on the opposite side; default 'center' keeps the existing centered float.",
-        "Native Expo Router / React Navigation consumers should use createExpoRouterTabBar instead of local floating tab bars."
+        "Native Expo Router / React Navigation consumers should use createExpoRouterTabBar instead of local floating tab bars.",
+        "寸法・面のプロダクト差分は公開 CSS 変数 --Nav-*（--Nav-Pill-* / --Nav-Item-* / --Nav-Center-Action-* / --Nav-Selected-*）で表現する。contracts/product-theme-overrides.json の nav グループが正本（issue #471）。",
+        "消費側は DS の内部マークアップ（[data-slot=\"bottom-nav-pill\"] > :is(a, button)、span:first-child / span:last-child、[data-global-nav-add-icon]）を !important や :has() で叩かない。DOM を狙う場合も公開 data-slot だけを使う。",
+        "--Nav-Item-Min-Height / --Nav-Center-Action-Size は max(44px, var(...)) で参照するため、44px（HIG のタップ領域下限）より縮まない。",
+        "--Nav-Center-Action-Surface / -Border / -Shadow と --Nav-Selected-Surface / -Shadow は宣言したときだけ DS 既定（.glass-accent / ガラスの選択プラッター）を置き換える。未宣言なら tone / dark の出し分けは DS 側が持つ。",
+        "--Nav-Pill-* の寸法が効くのは prominent レイアウト（showLabels か centerAction がある pill）。アイコンのみの compact pill は契約外で固定。"
       ],
       "props": {
         "navLabel": "string (既定 \"メインナビゲーション\") — nav 要素の aria-label（issue #428）"
-      }
+      },
+      "slots": [
+        "bottom-nav-pill",
+        "bottom-nav-item",
+        "bottom-nav-item-icon",
+        "bottom-nav-item-label",
+        "bottom-nav-center-action",
+        "bottom-nav-center-action-icon",
+        "bottom-nav-center-action-label",
+        "bottom-nav-selected-surface"
+      ],
+      "productTheme": [
+        "--Nav-Pill-*",
+        "--Nav-Item-*",
+        "--Nav-Center-Action-*",
+        "--Nav-Selected-*"
+      ]
     },
     {
       "name": "MobileTabBar",
@@ -2511,7 +2563,15 @@
       "rules": [
         "tabs は BottomTabBarItem を手組みせず MobileTabItem<T>[]（key/label/Icon）で渡す",
         "addAction 指定時はブランド色丸背景 + Add アイコンが自動で centerAction になる",
-        "floatingPosition='left'|'right' を使う場合は FAB を反対側に併置する"
+        "floatingPosition='left'|'right' を使う場合は FAB を反対側に併置する",
+        "寸法・面の上書きは BottomTabBar と同じ --Nav-* を使う（MobileTabBar は薄いラッパーなので変数はそのまま効く。issue #471）",
+        "[data-global-nav-add-icon] は belle-todo 互換の後方互換フックで公開契約ではない。中央アクションのアイコンは data-slot=\"bottom-nav-center-action-icon\" で狙う（issue #471）"
+      ],
+      "productTheme": [
+        "--Nav-Pill-*",
+        "--Nav-Item-*",
+        "--Nav-Center-Action-*",
+        "--Nav-Selected-*"
       ]
     },
     {

package/contracts/composition.json

@@ -95,7 +95,8 @@
       "viewport の sm:/md:/lg: はレイアウト切替段として使う",
       "viewport xl=1280px はコンテンツ幅の上限段。ここで新しいレイアウト変形を追加しない",
       "@md: など @ prefix は container query であり、同名の viewport breakpoint と値も用途も異なる",
-      "container query の値を変える場合は tokens.json と preset の --container-* を同時に更新する"
+      "container query の値を変える場合は tokens.json と preset の --container-* を同時に更新する",
+  "overlay（Sheet↔Dialog）の切替段は ResponsiveDialog の breakpoint prop で宣言する（既定 md=768px）。消費側 CSS のメディアクエリでシートを中央モーダルへ変換しない（issue #472）"
     ]
   },
   "formHierarchy": {

package/contracts/product-theme-overrides.json

@@ -22,7 +22,8 @@
     "lintRule": "P049（npx ksk-ds lint が消費側 CSS を検査する）",
     "statusPaletteNote": "statusPalette は「消費側が DS の primitive を自分の Tailwind alias（--color-sun-800 等）の実体として使っている」ケース向けの公開段（issue #384）。@theme inline の alias は生成ユーティリティに var(--Primitive-*) が直接展開されるため、alias 側を dark で差し替えても効かず、primitive を上書きする以外の経路が無い。公開しているのは status の tint 段（-50 × 4色）と、依頼のあったアクセント段（Red-600 / Green-700）だけ。-50 は DS の .dark ブロックが一切参照していない（dark の Surface-Caution/Success/Warning/Info は -900 と実値）ので、dark 内での上書きは DS コンポーネントに対して無害。light では --Surface-Caution / --Surface-Success / --Surface-Warning / --Surface-Info を駆動するので上書きは効く。アクセント段は light / dark の両方で DS semantic を駆動するため、パレット全段ではなく依頼ベースで1段ずつ開ける。",
     "statusPaletteSideEffects": "--Primitive-Red-600 は --Caution-Base（light / dark 共通）と、dark の --Active-Destructive-Button を駆動する。dark で Red-600 を Red-500(#EF4444) より明るい値に差し替えると、destructive ボタンの active が hover より明るくなり押下の階調が反転する。差し替えるなら --Hover-Destructive-Button との明度関係を実測すること。--Primitive-Green-700 は light の --Text-Success / --Success-Base のみを駆動する（dark は Green-400 なので影響なし）。",
-    "contrastResponsibility": "neutralPalette（--Primitive-Gray-* / White / Black）を差し替えたら、本文×背景のコントラストは消費プロダクト側の責任になる。Gray は --Text-High-Emphasis（本文色）・--Text-Medium-Emphasis・--Surface-Secondary・--Border-Low-Emphasis など semantic.css の 33 箇所を駆動しているため、差し替え後に本文テキスト×各 Surface が WCAG AA（4.5:1、大きい文字は 3:1）を満たすか必ず実測すること。DS 側の scripts/check-contrast.mjs は DS 既定パレット向けの検査で、消費側の差し替えは見ていない。light / dark の両方を確認する。"
+    "contrastResponsibility": "neutralPalette（--Primitive-Gray-* / White / Black）を差し替えたら、本文×背景のコントラストは消費プロダクト側の責任になる。Gray は --Text-High-Emphasis（本文色）・--Text-Medium-Emphasis・--Surface-Secondary・--Border-Low-Emphasis など semantic.css の 33 箇所を駆動しているため、差し替え後に本文テキスト×各 Surface が WCAG AA（4.5:1、大きい文字は 3:1）を満たすか必ず実測すること。DS 側の scripts/check-contrast.mjs は DS 既定パレット向けの検査で、消費側の差し替えは見ていない。light / dark の両方を確認する。",
+    "navSurfaceNote": "--Nav-Center-Action-Surface / -Border / -Shadow と --Nav-Selected-Surface / -Shadow は例外的に :root へ既定値を置いていない（issue #471）。DS 既定は tone=\"inverse\" / dark で出し分ける素材（.glass-accent・ガラスの選択プラッター）で、単一の :root 値に畳めないため。src/styles/bottom-nav.css が var(--Nav-*, <DS 既定>) の形で持ち、消費側が宣言したときだけ上書きされる。宣言しなければレンダリングは 1px も変わらない。"
   },
   "allowedVariables": {
     "brandColor": [
@@ -158,6 +159,24 @@
       "--Motion-Duration-Base",
       "--Motion-Duration-Slow",
       "--Motion-Duration-Slower"
+    ],
+    "nav": [
+      "--Nav-Pill-Min-Height",
+      "--Nav-Pill-Padding-X",
+      "--Nav-Pill-Padding-Y",
+      "--Nav-Pill-Gap",
+      "--Nav-Item-Min-Height",
+      "--Nav-Item-Gap",
+      "--Nav-Center-Action-Size",
+      "--Nav-Center-Action-Radius",
+      "--Nav-Center-Action-Surface",
+      "--Nav-Center-Action-Border",
+      "--Nav-Center-Action-Shadow",
+      "--Nav-Selected-Surface",
+      "--Nav-Selected-Shadow"
+    ],
+    "overlay": [
+      "--Overlay-Desktop-Breakpoint"
     ]
   },
   "dsVariableNamespaces": [
@@ -186,7 +205,8 @@
     "--Product-",
     "--Chip-",
     "--glass-",
-    "--card-surface"
+    "--card-surface",
+    "--Nav-"
   ],
   "namespaceNote": "P049 が「DS の変数を上書きしている」と判定する接頭辞。ここに該当し、かつ DS 自身の CSS（src/preset.css / src/styles/*.css / src/themes/*.css）に実在し、allowedVariables に無い変数を消費側 CSS が宣言していたら契約違反。接頭辞は一致するが DS に実在しない名前（消費側が DS の命名に寄せて作った独自変数。例: --Surface-Inverse-Hover）は上書きではないので対象外（issue #377）。DS の CSS が読めない環境では接頭辞一致だけで判定する。shadcn 互換の小文字ブリッジ（--primary / --border 等）は消費側アプリが同名変数を持つことがあるため対象外。",
   "wiredComponents": {
@@ -196,15 +216,28 @@
       "--Control-Gap",
       "--Control-Radius"
     ],
-    "Input": ["--Field-Height-Md", "--Field-Padding-X-Md", "--Field-Radius"],
+    "Input": [
+      "--Field-Height-Md",
+      "--Field-Padding-X-Md",
+      "--Field-Radius"
+    ],
     "Textarea": [
       "--Field-Min-Height",
       "--Field-Padding-X-Md",
       "--Field-Padding-Y",
       "--Field-Radius"
     ],
-    "SelectTrigger": ["--Field-Height-*", "--Field-Padding-X-*", "--Field-Radius"],
-    "Card": ["--Product-Card-Padding", "--Product-Card-Gap", "--Radius-Surface", "--card-surface"],
+    "SelectTrigger": [
+      "--Field-Height-*",
+      "--Field-Padding-X-*",
+      "--Field-Radius"
+    ],
+    "Card": [
+      "--Product-Card-Padding",
+      "--Product-Card-Gap",
+      "--Radius-Surface",
+      "--card-surface"
+    ],
     "Tabs": [
       "--Control-Height-Md",
       "--Control-Padding-X-Sm",
@@ -212,8 +245,26 @@
       "--Control-Radius",
       "--Field-Radius"
     ],
-    "Chip": ["--Chip-Radius"],
-    "AdminShell": ["--Product-Page-Padding-Y"]
+    "Chip": [
+      "--Chip-Radius"
+    ],
+    "AdminShell": [
+      "--Product-Page-Padding-Y"
+    ],
+    "BottomTabBar": [
+      "--Nav-Pill-*",
+      "--Nav-Item-*",
+      "--Nav-Center-Action-*",
+      "--Nav-Selected-*"
+    ],
+    "MobileTabBar": [
+      "--Nav-Pill-*",
+      "--Nav-Item-*",
+      "--Nav-Center-Action-*",
+      "--Nav-Selected-*"
+    ],
+    "ResponsiveDialog": ["--Overlay-Desktop-Breakpoint"],
+    "ResponsiveOverlayFrame": ["--Overlay-Desktop-Breakpoint"]
   },
   "aiGuidance": [
     "プロダクト差分は、まずこの契約の CSS 変数上書きで表現する。className での個別上書きを何十箇所にも散らさない。",
@@ -227,6 +278,8 @@
     "Checkbox / RadioGroup / Switch（20px の size-5 トグル）は意図的にこの契約の対象外。「コントロールの高さ」という概念が当てはまらない固定サイズのため、Control 変数を当てると意味が壊れる。",
     "Chip は角丸（--Chip-Radius）だけを配線し、高さ・横 padding は配線しない。sm/md/lg の縦 margin（my-*）は「44px タッチターゲット - 本体高さ」ちょうどの手計算値で、height を変数化すると当たり判定の math が壊れる。",
     "AppShell / MarketingShell / MobileAppShell はページ本文の padding をシェル自身が持たない（Container の gutter か呼び出し側の contentClassName に委ねている）ため product theme の対象外。AdminShell の <main> だけが --Product-Page-Padding-Y を持つ。",
-    "--Product-Type-Scale は typo-* の font-size に一律で掛かる乗数（既定 1）。文字倍率を上げたら Control（Button）/ Field（Input 等）の高さ・padding も --Control-Height-* / --Field-Height-* 等で別途上げること。この変数はコントロールの寸法には自動連動しない（文字だけ大きくして枠が追従しないと窮屈になるため、意図的に分離してある）。Web のみが対象で React Native（native/scales.ts）には効かない。"
+    "--Product-Type-Scale は typo-* の font-size に一律で掛かる乗数（既定 1）。文字倍率を上げたら Control（Button）/ Field（Input 等）の高さ・padding も --Control-Height-* / --Field-Height-* 等で別途上げること。この変数はコントロールの寸法には自動連動しない（文字だけ大きくして枠が追従しないと窮屈になるため、意図的に分離してある）。Web のみが対象で React Native（native/scales.ts）には効かない。",
+    "BottomTabBar / MobileTabBar の寸法・面は --Nav-* で変える。DS の内部マークアップ（[data-slot=\"bottom-nav-pill\"] > :is(a, button) や span:first-child / span:last-child のような子孫順、[data-global-nav-add-icon]）を !important で叩かない。DOM を狙う必要が残る場合も、公開している data-slot（bottom-nav-item / -item-icon / -item-label / bottom-nav-center-action / -icon / -label / bottom-nav-selected-surface）だけを使う（issue #471）。",
+    "--Nav-Item-Min-Height / --Nav-Center-Action-Size は max(44px, var(...)) で参照しているため、44px（HIG のタップ領域下限）より小さくはならない。ナビを詰めたい場合も当たり判定は 44px を保つ。"
   ]
 }

package/contracts/rules.json

@@ -470,9 +470,9 @@
       "pattern": "SheetContent[^>]*className=[^>]*(max-h-\\[(88|90|100)dvh\\]|rounded-t|safe-area-inset-bottom)|max-h-\\[(88|90|100)dvh\\][^\"']*SheetContent",
       "excludePaths": [".stories."],
       "excludeDsPaths": ["components/patterns/", "src/native/components/"],
-      "excludeLines": ["BottomSheetFrame", "ksk-ds-allow-custom-ui"],
+      "excludeLines": ["BottomSheetFrame", "ResponsiveOverlayFrame", "ksk-ds-allow-custom-ui"],
       "message": "Bottom sheet outer frame class recipe のローカル再実装禁止",
-      "fix": "<BottomSheetFrame preset=\"mobile-full|mobile-form|desktop-floating\"> を使用"
+      "fix": "<BottomSheetFrame preset=\"mobile-full|mobile-page|mobile-form|desktop-floating\"> を使用。PC で中央モーダルにしたい場合は <ResponsiveDialog> + <ResponsiveOverlayFrame preset=...>（消費側 CSS で position / transform / width / radius を !important 上書きしない / issue #472）"
     },
     {
       "id": "P043",

package/contracts/screen-patterns.json

@@ -101,8 +101,8 @@
       "name": "レスポンシブダイアログ",
       "group": "overlay",
       "purpose": "現在の画面を維持したまま前面に重ねる軽量な作成/編集/詳細確認 UI。PC/モバイルでコンポーネントを出し分ける。",
-      "dsComponents": ["ResponsiveDialog", "Dialog", "Sheet", "BottomSheetForm", "DetailSheetScaffold", "FormField"],
-      "dsComponentsNote": "PC/モバイル自動切替が必要な場合は ResponsiveDialog を第一候補にする（PC=Dialog相当・モバイル=Sheet相当を内部で出し分ける）。フォーム系のボトムシートは BottomSheetForm、閲覧+編集の detail sheet は DetailSheetScaffold を使う。ResponsiveDialog を使わず自前で Dialog と Sheet を viewport 分岐する場合は、両方に同じ内容を実装し片方だけ更新して差分が出ないよう注意する。",
+      "dsComponents": ["ResponsiveDialog", "ResponsiveOverlayFrame", "Dialog", "Sheet", "BottomSheetFrame", "BottomSheetForm", "DetailSheetScaffold", "FormField"],
+      "dsComponentsNote": "PC/モバイル自動切替が必要な場合は ResponsiveDialog を第一候補にする（PC=Dialog相当・モバイル=Sheet相当を内部で出し分ける）。モバイル側で BottomSheetFrame の preset（mobile-full / mobile-page / mobile-form）を保ったまま PC で中央モーダルにしたい場合は、content に ResponsiveOverlayFrame を使う（issue #472。消費側 CSS で position / transform / width / radius を !important 上書きしない）。切り替え境界は ResponsiveDialog の breakpoint（既定 md=768px / lg / product-theme）で指定する。snapPoints 付きの snap シートは境界を越えてもシートのまま。フォーム系のボトムシートは BottomSheetForm、閲覧+編集の detail sheet は DetailSheetScaffold を使う。ResponsiveDialog を使わず自前で Dialog と Sheet を viewport 分岐する場合は、両方に同じ内容を実装し片方だけ更新して差分が出ないよう注意する。",
       "navigation": { "globalNav": false, "breadcrumb": false, "header": false },
       "crud": ["create", "read", "update"],
       "whenToUse": [

package/contracts/token-hex-cache.json

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