ksk-design-system 2.8.0 → 2.9.0

package/AGENTS.md

@@ -179,6 +179,19 @@ afterEach フックが全ストーリー（tags フィルタなし）に対し
 （AA 未達トークンの darken と opacity 減衰の廃止により全ストーリー通過。
 トークンペアの正本チェックは `scripts/check-contrast.mjs`）。CI では常時実行される。
 
+**Button など、フォーカス表示の `outline-none` / `outline-hidden` 系クラスを触ったら `npm run test:forced-colors` も実行:**
+
+```bash
+npm run test:forced-colors
+```
+
+強制配色（forced-colors / Windows ハイコントラスト等）モードでのフォーカス表示を
+chromium 実機で検証する（issue #620）。axe-core はフォーカスリングの視認性を
+検証できないため、CDP で forced-colors を有効化し、`outline-hidden` を使う
+コンポーネント（対象例: Button）がキーボードフォーカス時に outline を出すことを
+`__tests__/browser/` の専用テストで確認する。設定は `vitest.forced-colors.config.ts`。
+CI では常時実行される。
+
 エラーが出た場合は修正してから次に進むこと。
 
 ---
@@ -309,6 +322,9 @@ npm run test:a11y
 
 # 旧 Radix 固定の回帰テスト（consumer が古い Radix を掴む条件を再現。issue #516）
 npm run test:legacy-radix
+
+# 強制配色モードのフォーカス表示検証（chromium の CDP で forced-colors を再現。issue #620）
+npm run test:forced-colors
 ```
 
 **`Closes #N` 誤リンク監査について（issue #486 が由来）:**
@@ -355,6 +371,23 @@ npm run test:legacy-radix
   `eslint/icon-button-aria-label.js`（`ksk-a11y/icon-button-aria-label`）で lint 時に検出する
   （`.stories.tsx` は対象外）。
 
+**forced-colors（強制配色）テストについて（issue #620）:**
+
+- axe-core はフォーカスリングが実際に見えるかまでは検証しない。DS のフォーカス表示は
+  `focus-visible:ring-*`（box-shadow）だが、box-shadow は forced-colors モードで
+  描画されないため、`focus-visible:outline-hidden` を併用し、forced-colors 時だけ
+  `outline: 2px solid transparent` を出して OS 側の枠に委ねる（`outline-none` では
+  このメディアクエリ自体が生成されず枠が消えたままになる）。
+- `__tests__/browser/` に置いた専用テストが CDP (`Emulation.setEmulatedMedia`) で
+  forced-colors を有効化し、Tab フォーカス後の `outlineStyle` が `none` でないことを
+  chromium 実機で確認する。設定は `vitest.forced-colors.config.ts`（`vitest.config.ts`
+  の既定テストからは `__tests__/browser/**` を除外し、`npm run test:forced-colors` で
+  個別に実行する）。
+- DS コンポーネント本体で `outline-none`（前置バリアント付き含む）の新規追加が
+  無いことは `__tests__/focus-ring-outline-pairing.test.ts` の機械検証（`npm test`）で
+  検出する。consumer 向けの `outline-none` 検出は `contracts/rules.json` P023（`bin/lint.js`）
+  と `scripts/lint-scratch.sh` W7 が担う。
+
 **旧 Radix 回帰テストについて（issue #516）:**
 
 - DS の node_modules は ref churn 修正済みの Radix を解決するため、`npm test` では

package/CLAUDE.md

@@ -159,6 +159,19 @@ afterEach フックが全ストーリー（tags フィルタなし）に対し
 （AA 未達トークンの darken と opacity 減衰の廃止により全ストーリー通過。
 トークンペアの正本チェックは `scripts/check-contrast.mjs`）。CI では常時実行される。
 
+**Button など、フォーカス表示の `outline-none` / `outline-hidden` 系クラスを触ったら `npm run test:forced-colors` も実行:**
+
+```bash
+npm run test:forced-colors
+```
+
+強制配色（forced-colors / Windows ハイコントラスト等）モードでのフォーカス表示を
+chromium 実機で検証する（issue #620）。axe-core はフォーカスリングの視認性を
+検証できないため、CDP で forced-colors を有効化し、`outline-hidden` を使う
+コンポーネント（対象例: Button）がキーボードフォーカス時に outline を出すことを
+`__tests__/browser/` の専用テストで確認する。設定は `vitest.forced-colors.config.ts`。
+CI では常時実行される。
+
 エラーが出た場合は修正してから次に進むこと。
 
 ---
@@ -309,6 +322,9 @@ npm run test:a11y
 
 # 旧 Radix 固定の回帰テスト（consumer が古い Radix を掴む条件を再現。issue #516）
 npm run test:legacy-radix
+
+# 強制配色モードのフォーカス表示検証（chromium の CDP で forced-colors を再現。issue #620）
+npm run test:forced-colors
 ```
 
 **`Closes #N` 誤リンク監査について（issue #486 が由来）:**
@@ -355,6 +371,23 @@ npm run test:legacy-radix
   `eslint/icon-button-aria-label.js`（`ksk-a11y/icon-button-aria-label`）で lint 時に検出する
   （`.stories.tsx` は対象外）。
 
+**forced-colors（強制配色）テストについて（issue #620）:**
+
+- axe-core はフォーカスリングが実際に見えるかまでは検証しない。DS のフォーカス表示は
+  `focus-visible:ring-*`（box-shadow）だが、box-shadow は forced-colors モードで
+  描画されないため、`focus-visible:outline-hidden` を併用し、forced-colors 時だけ
+  `outline: 2px solid transparent` を出して OS 側の枠に委ねる（`outline-none` では
+  このメディアクエリ自体が生成されず枠が消えたままになる）。
+- `__tests__/browser/` に置いた専用テストが CDP (`Emulation.setEmulatedMedia`) で
+  forced-colors を有効化し、Tab フォーカス後の `outlineStyle` が `none` でないことを
+  chromium 実機で確認する。設定は `vitest.forced-colors.config.ts`（`vitest.config.ts`
+  の既定テストからは `__tests__/browser/**` を除外し、`npm run test:forced-colors` で
+  個別に実行する）。
+- DS コンポーネント本体で `outline-none`（前置バリアント付き含む）の新規追加が
+  無いことは `__tests__/focus-ring-outline-pairing.test.ts` の機械検証（`npm test`）で
+  検出する。consumer 向けの `outline-none` 検出は `contracts/rules.json` P023（`bin/lint.js`）
+  と `scripts/lint-scratch.sh` W7 が担う。
+
 **旧 Radix 回帰テストについて（issue #516）:**
 
 - DS の node_modules は ref churn 修正済みの Radix を解決するため、`npm test` では

package/DESIGN.md

@@ -335,7 +335,7 @@ Portal に載る要素（Dialog / Sheet / Popover / Toast 等）は DOM 上の
 
 代表例（トークン参照で構成）。
 
-- **Button**: bg `{colors.primary}` / text 白 / `rounded-full` / 高さ 48px。variant: default·secondary·tertiary·ghost·destructive·link。
+- **Button**: bg `{colors.primary}` / text 白 / `rounded-full` / 高さ 48px。variant: default·secondary·tertiary·ghost·destructive·info·warning·success·link（info・warning・success は状態色。不可逆操作は destructive）。
 - **Card**: bg `{colors.surface}` ＋ 1px `{colors.border}` ＋ `{elevation.md}` ＋ `{rounded.surface}`。
 - **Dialog（中央モーダル）**= タスク面（フォーム/絞り込み）。`role="dialog"`、`{rounded.modal}`。
 - **AlertDialog / ConfirmDialog（割り込み確認）**= 削除等の"止める"操作。`role="alertdialog"`、背景タップで閉じない・中央表示。

package/PUBLISHING.md

@@ -7,7 +7,9 @@
 > 一本化しており、`main` への version 変更 push が公開の唯一のトリガー。
 > 各消費リポジトリの `package.json` は `ksk-design-system@X.Y.Z` を参照する。
 > 対象の消費リポ一覧は `scripts/update-consumers.sh` の `DEFAULT_REPOS` が正本
-> （単体リポ・monorepo が混在し、`~/LocalDev/` と `~/LocalDev/Examination/` 配下にまたがる）。
+> （単体リポ・monorepo が混在する。ExamKit 本体と資格アプリは含めず、ExamKit で
+> `npm i ksk-design-system@X.Y.Z --save-exact` → `kit:bump` → `kit:rollout` の順で届ける。
+> 資格アプリは DS を ExamKit と同じ版に完全固定しているため、`^X.Y.Z` を書く一括 bump を流すと版がずれる）。
 
 ## 前提
 

package/README.md

@@ -285,6 +285,20 @@ DS 名前空間に属さないカスタムプロパティへ色値（`#hex` / `r
 ように DS トークンを参照しているだけのものはカウントしません。意図的な独立パレット
 （LINE 風チャット画面のライトなど）は `// ksk-ds-lint-ignore P050 -- 理由` で抑制できます。
 
+#### P051: ResponsiveOverlayFrame + Footer の `padding={false}` 付け忘れ（issue #619）
+
+`preset="plain"` / `side="float"` / `side="float-glass"` の `ResponsiveOverlayFrame` は、
+既定で `p-6` と safe-area 込みの下余白を持ちます。`ResponsiveOverlayFooter` も自前で
+safe-area 込みの下余白を持つため、併用するときは Frame に `padding={false}` が必要です。
+付け忘れると下の余白が二重になるので、P051 が warn します。
+
+誤検知を出さない方を優先し、`side` / `preset` が文字列リテラルで確定していて、Frame に
+spread props（`{...props}`）が無く、`padding` が未指定・値なし・`{true}` で、Footer が
+Frame の JSX の中に直接書かれているときだけ報告します。`padding={cond}` のような式、
+Footer を別コンポーネントに切り出した構成、preset 経路（`mobile-form` 等。余白を持たない）は
+対象外です。P046 と同じく TypeScript の構文解析を使うため、`typescript` が無いプロジェクトでは
+P051 だけ skip して案内を1行出します。
+
 #### ルールごとの除外（rules.json の excludes 系）
 
 `contracts/rules.json` の除外指定は、当てる対象ごとに 3 つに分かれています。

package/bin/lint.js

@@ -7,19 +7,39 @@ import {
   loadProductThemeContract,
 } from "./product-theme-override.js"
 
-// card-child-spacing.js は `import ts from "typescript"` している（P046 専用エンジン）。
-// typescript は 24MB 前後あり、59ルール中 P046 の1つにしか使わないため、
-// P046 が実際に有効なとき（rules.json に該当ルールがあり、対象ファイルも存在するとき）
+// card-child-spacing.js / overlay-footer-padding.js は `import ts from "typescript"` している
+// （P046 / P051 専用エンジン）。typescript は 24MB 前後あり、AST が要るのはこの2ルールだけなので、
+// 該当ルールが実際に有効なとき（rules.json に該当ルールがあり、対象ファイルも存在するとき）
 // だけ動的 import する（issue #409）。typescript が未インストールの consumer では
-// ERR_MODULE_NOT_FOUND で落とさず、P046 だけを skip して案内を1行出す。
-let cardChildSpacingModulePromise = null
-async function loadCardChildSpacing() {
-  if (!cardChildSpacingModulePromise) {
-    cardChildSpacingModulePromise = import("./card-child-spacing.js").catch((error) => {
-      return { __unavailable: true, error }
-    })
+// ERR_MODULE_NOT_FOUND で落とさず、該当ルールだけを skip して案内を1行出す。
+const tsEngineModulePromises = new Map()
+function loadTsEngine(specifier) {
+  if (!tsEngineModulePromises.has(specifier)) {
+    tsEngineModulePromises.set(
+      specifier,
+      import(specifier).catch((error) => {
+        return { __unavailable: true, error }
+      }),
+    )
   }
-  return cardChildSpacingModulePromise
+  return tsEngineModulePromises.get(specifier)
+}
+
+/**
+ * TypeScript AST を使うエンジン。engine 名 → { module, export, label }。
+ * label は typescript 不在で skip するときの案内文に使う。
+ */
+const TS_ENGINES = {
+  "card-direct-child-spacing": {
+    module: "./card-child-spacing.js",
+    exportName: "inspectCardChildSpacing",
+    label: "P046（Card 直下の子要素スペーシング）",
+  },
+  "overlay-footer-padding": {
+    module: "./overlay-footer-padding.js",
+    exportName: "inspectOverlayFooterPadding",
+    label: "P051（ResponsiveOverlayFrame + Footer の padding={false} 付け忘れ）",
+  },
 }
 
 const DEFAULT_EXTENSIONS = new Set([".js", ".jsx", ".ts", ".tsx"])
@@ -369,20 +389,20 @@ export async function runLintCli(argv, { cwd = process.cwd(), pkgRoot = resolve(
   // DS 自身 / ベンダリングされた DS の CSS を P049 の対象から外すための材料（issue #407）
   const dsCssIdentity = cssRules.length > 0 ? collectDsCssIdentity(pkgRoot) : null
 
-  // P046（card-direct-child-spacing）が有効なときだけ typescript を動的 import する。
-  // 未インストール環境では ERR_MODULE_NOT_FOUND で落とさず、P046 だけ skip して1行案内する（issue #409）。
-  let inspectCardChildSpacing = null
-  const hasCardSpacingRule = sourceRules.some((rule) => rule.engine === "card-direct-child-spacing")
-  if (hasCardSpacingRule) {
-    const mod = await loadCardChildSpacing()
+  // TypeScript AST エンジン（P046 / P051）は有効なときだけ typescript を動的 import する。
+  // 未インストール環境では ERR_MODULE_NOT_FOUND で落とさず、該当ルールだけ skip して1行案内する（issue #409）。
+  const tsInspectors = {}
+  for (const [engine, spec] of Object.entries(TS_ENGINES)) {
+    if (!sourceRules.some((rule) => rule.engine === engine)) continue
+    const mod = await loadTsEngine(spec.module)
     if (mod.__unavailable) {
       console.log(
-        `[ksk-ds lint] typescript が見つからないため P046（Card 直下の子要素スペーシング）を skip します。` +
+        `[ksk-ds lint] typescript が見つからないため ${spec.label} を skip します。` +
           `devDependencies に typescript を追加すると検査対象になります。`,
       )
-      sourceRules = sourceRules.filter((rule) => rule.engine !== "card-direct-child-spacing")
+      sourceRules = sourceRules.filter((rule) => rule.engine !== engine)
     } else {
-      inspectCardChildSpacing = mod.inspectCardChildSpacing
+      tsInspectors[engine] = mod[spec.exportName]
     }
   }
 
@@ -422,7 +442,7 @@ export async function runLintCli(argv, { cwd = process.cwd(), pkgRoot = resolve(
         continue
       }
       findings.push(
-        ...lintFile(file, cwd, sourceRules, { ...options, inspectCardChildSpacing, pkgRoot }),
+        ...lintFile(file, cwd, sourceRules, { ...options, tsInspectors, pkgRoot }),
       )
     } catch (error) {
       if (error && error.code === "ENOENT") {
@@ -781,9 +801,10 @@ function lintFile(file, cwd, rules, options = {}) {
 
   for (const rule of rules) {
     if (!ruleAppliesTo(rule, { capabilities, filePath: rel })) continue
-    if (rule.engine === "card-direct-child-spacing") {
-      if (!options.inspectCardChildSpacing) continue
-      for (const finding of options.inspectCardChildSpacing(source, file)) {
+    if (rule.engine && Object.hasOwn(TS_ENGINES, rule.engine)) {
+      const inspect = options.tsInspectors?.[rule.engine]
+      if (!inspect) continue
+      for (const finding of inspect(source, file)) {
         const line = lines[finding.line - 1] ?? ""
         if (ignores.suppresses(rule.id ?? "UNKNOWN", finding.line)) continue
         if (!matchesRuleExclude(rule, { file: rel, line, isDsFile })) {

package/bin/overlay-footer-padding.js

@@ -0,0 +1,129 @@
+import ts from "typescript"
+
+/**
+ * P051: ResponsiveOverlayFrame + ResponsiveOverlayFooter の padding={false} 付け忘れ（issue #619）
+ *
+ * `preset="plain"` / `side="float" | "float-glass"` の ResponsiveOverlayFrame は
+ * 既定で `p-6` と safe-area 込みの下余白を持つ（#599 / #613）。
+ * ResponsiveOverlayFooter も自前で `pb-[max(1rem,env(safe-area-inset-bottom))]` を
+ * 持つため、Frame 側を `padding={false}` にしないと下余白が二重になる。
+ *
+ * 誤検知を出さない方を優先し、静的に確定できるときだけ報告する:
+ * - Frame の `side` / `preset` が文字列リテラルで、plain / float 系だと確定している
+ * - Frame に spread props（`{...props}`）が無い（padding が来うるため）
+ * - `padding` が未指定・値なし（`padding`）・`{true}` のいずれか（`{cond}` 等の式は対象外）
+ * - Footer が Frame の JSX 子孫に直接書かれている（別コンポーネントへの切り出しは追えない）
+ *
+ * preset 経路（mobile-form 等 / BottomSheetFrame 経由）は padding を受け付けず、
+ * 余白も持たないので対象外。
+ */
+
+const FRAME = "ResponsiveOverlayFrame"
+const FOOTER = "ResponsiveOverlayFooter"
+const FLOAT_SIDES = new Set(["float", "float-glass"])
+
+/** `Foo` / `ns.Foo` の末尾の名前 */
+function tagBaseName(tagName) {
+  if (ts.isIdentifier(tagName)) return tagName.text
+  if (ts.isPropertyAccessExpression(tagName)) return tagName.name.text
+  return ""
+}
+
+function openingOf(node) {
+  if (ts.isJsxElement(node)) return node.openingElement
+  if (ts.isJsxSelfClosingElement(node)) return node
+  return null
+}
+
+const UNKNOWN = Symbol("unknown")
+
+/**
+ * 属性値を静的に読む。
+ * - 属性なし → undefined
+ * - 値なし（`padding`）→ true
+ * - 文字列 / true / false リテラル → その値
+ * - それ以外の式 → UNKNOWN
+ */
+function readAttribute(opening, name) {
+  const attribute = opening.attributes.properties.find(
+    (property) => ts.isJsxAttribute(property) && property.name.getText() === name,
+  )
+  if (!attribute) return undefined
+  const init = attribute.initializer
+  if (!init) return true
+  if (ts.isStringLiteral(init)) return init.text
+  if (ts.isJsxExpression(init) && init.expression) {
+    const expression = init.expression
+    if (ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression)) {
+      return expression.text
+    }
+    if (expression.kind === ts.SyntaxKind.TrueKeyword) return true
+    if (expression.kind === ts.SyntaxKind.FalseKeyword) return false
+  }
+  return UNKNOWN
+}
+
+/** padding を持つ経路（plain / float 系）だと静的に確定しているか */
+function isPaddedVariant(opening) {
+  const side = readAttribute(opening, "side")
+  if (side === UNKNOWN) return false
+  if (typeof side === "string" && FLOAT_SIDES.has(side)) return true
+  if (side !== undefined && side !== "bottom") return false
+  return readAttribute(opening, "preset") === "plain"
+}
+
+function hasSpread(opening) {
+  return opening.attributes.properties.some((property) => ts.isJsxSpreadAttribute(property))
+}
+
+/** Frame の子孫に Footer が書かれているか（入れ子の Frame の中は数えない） */
+function containsFooter(frame) {
+  let found = false
+  function visit(node) {
+    if (found) return
+    const opening = openingOf(node)
+    if (opening) {
+      const name = tagBaseName(opening.tagName)
+      if (name === FOOTER) {
+        found = true
+        return
+      }
+      // 入れ子の Frame は自分自身として別途判定される
+      if (name === FRAME) return
+    }
+    ts.forEachChild(node, visit)
+  }
+  for (const child of frame.children) visit(child)
+  return found
+}
+
+export function inspectOverlayFooterPadding(source, filePath = "source.tsx") {
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  )
+  const findings = []
+
+  function walk(node) {
+    if (ts.isJsxElement(node) && tagBaseName(node.openingElement.tagName) === FRAME) {
+      const opening = node.openingElement
+      const padding = readAttribute(opening, "padding")
+      if (
+        isPaddedVariant(opening) &&
+        !hasSpread(opening) &&
+        (padding === undefined || padding === true) &&
+        containsFooter(node)
+      ) {
+        const position = sourceFile.getLineAndCharacterOfPosition(opening.getStart(sourceFile))
+        findings.push({ line: position.line + 1, tag: FRAME })
+      }
+    }
+    ts.forEachChild(node, walk)
+  }
+
+  walk(sourceFile)
+  return findings
+}

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.8.0",
+    "version": "2.9.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 69,
-      "patterns": 61,
+      "patterns": 62,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 153
+      "total": 154
     },
     "exportNaming": {
       "_doc": "contracts の name が `import { name } from \"ksk-design-system\"` で解決できるかを示す。__tests__/contracts-export-integrity.test.ts が src/index.ts の実 export と突き合わせて固定する。",
@@ -42,6 +42,9 @@
         "ghost",
         "link",
         "destructive",
+        "info",
+        "warning",
+        "success",
         "glass",
         "glass-inverse",
         "glass-accent",
@@ -78,10 +81,12 @@
         "Icon-only buttons require aria-label",
         "Native Button supports loading/loadingLabel and leadingIcon/trailingIcon; do not wrap ActivityIndicator in Text",
         "Native Button supports spinnerColor to override the loading ActivityIndicator color; default unchanged (falls back to variant fg color, issue #450)",
+        "variant=info / warning / success は状態色で種類や意味を伝えるボタン（issue #598）。背景色を className で上書きせず variant を使う。不可逆操作には warning ではなく destructive を使う",
         "variant=glass は背景がグラデーション/写真の場合のみ使用",
         "variant=glass-inverse は暗い写真・動画・濃色面上の Liquid Glass CTA 専用",
         "variant=inverse / ghost-inverse は暗背景・ヒーローセクション専用",
         "size=hero は hero / final-CTA 専用（ピル型 56px）",
+        "size=xs / sm / icon-sm は透明な before 擬似要素で当たり判定を 44×44px に広げる（見た目の寸法は不変・issue #601）。隣と重ねないには見た目の端同士を sm / icon-sm で gap-3、xs で gap-5 以上空ける。glass 系 variant と overflow-hidden を足したボタンでは拡張されない",
         "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（variant / size は無視され、focus ring 以外の視覚クラスを出さない）"
       ]
     },
@@ -494,12 +499,19 @@
     {
       "name": "Accordion",
       "path": "src/components/ui/accordion.tsx",
-      "description": "アコーディオン。FAQ・設定項目など折りたたみコンテンツに使用。",
+      "description": "アコーディオン。FAQ・設定項目など折りたたみコンテンツに使用。size=\"lg\" で LP の「よくある質問」のような大きめの見せ方にできる（issue #600）。",
       "subcomponents": [
         "AccordionItem",
         "AccordionTrigger",
         "AccordionContent"
-      ]
+      ],
+      "sizes": [
+        "default",
+        "lg"
+      ],
+      "props": {
+        "size": "\"default\" | \"lg\" — Accordion ルートで指定すると context 経由で Trigger/Content へ伝わる（既定 \"default\"）。Trigger/Content に直接渡すと個別上書きできる。lg は Trigger: typo-label-lg py-6 / Content: typo-body-lg"
+      }
     },
     {
       "name": "Separator",
@@ -2312,6 +2324,8 @@
         "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)",
+        "モバイル分岐の下余白に home indicator の safe-area を含める(issue #599)。plain は pb = 1.5rem + env(safe-area-inset-bottom)、float 系は面が下端から 12px 浮いているので pb = max(1.5rem, env(safe-area-inset-bottom))。padding={false} / safeArea={false} / キーボード表示中は足さない。デスクトップ分岐と preset 経路は変えない",
+        "モバイルの side=float / float-glass は既定で max-height: min(85dvh, 100dvh - 1.5rem - 上部safe-area)(lg 以上は min(85dvh,46rem))を持ち、超えた分は面の中でスクロールする(issue #599)。キーボード表示中は #337 の inline style が優先",
         "description / autoFocus / restoreFocusOnClose / closeOnEsc / zIndex を両分岐へ透過",
         "snap sheet はデスクトップでもシートのまま",
         "ResponsiveOverlayFooter がモバイルのみキーボード追従になる",
@@ -2326,7 +2340,8 @@
         "side / preset ごとに効く prop が判別ユニオンで分かれている: preset 経路は preset / surface / desktopPosition、float 系と preset=\"plain\" は padding。効かない組み合わせは黙って無視されずコンパイルエラーになる(型テスト test/types/responsive-overlay-frame.tsx)",
         "デスクトップ分岐のキーボード補正は max-height だけで lift(bottom)は当てない。DialogContent は top:50% + translate-y:-50% で位置決めしているため bottom を足すと両拘束になり高さが縦一杯へ伸びる。中央寄せのキャップは 100dvh - 2*kb(100dvh - kb では下端がキーボードへ潜り込む。desktopPosition=\"top\" / \"fullscreen\" は上端固定なのでキーボード 1 回分 / #487)",
         "3 つのデスクトップ分岐(preset / plain / float 系)はすべて data-frame=\"responsive-overlay-frame\" + data-side + data-position を出す。consumer が独自のキーボード補正を当てる場合もこの属性で絞る(#487)",
-        "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)"
+        "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)",
+        "モバイルの下余白(safe-area)や float の最大高さを consumer 側で pb-8 / max-h-[85dvh] overflow-y-auto と書き足さない(#599 で既定化)。値を変えたいときだけ className / mobileClassName の pb-* / max-h-* で上書きする(twMerge で既定と置き換わり二重にならない)。ResponsiveOverlayFooter を使う面は padding={false} にする(フッタ自身が safe-area を持つ。付け忘れは npx ksk-ds lint の P051 が warn)"
       ],
       "subcomponents": [
         "ResponsiveOverlayFooter"
@@ -2408,6 +2423,27 @@
         "既に fixed な nav を渡す場合は bottomNavMode=external を使う"
       ]
     },
+    {
+      "name": "SidebarNav",
+      "path": "src/components/patterns/sidebar-nav.tsx",
+      "description": "PC 表示の左サイドバーに縦に並べるナビ項目。行高 44px・角丸・選択中の面/文字色・アイコン位置・件数バッジを DS が持つ。items は BottomTabBarItem と同じ形で、モバイルの BottomTabBar と同じ配列を渡せる。collapsed でアイコンだけのレール表示。",
+      "variants": [
+        "collapsed: false / true"
+      ],
+      "accessibility": [
+        "nav に aria-label（既定 \"サイドナビゲーション\"）を付与",
+        "isActive の項目に aria-current=\"page\" を付与",
+        "role=tab / aria-selected は使わない",
+        "collapsed 時はラベルを aria-label と title に移す",
+        "行の高さは 44px 以上"
+      ],
+      "rules": [
+        "MobileAppShell の desktopSidebar / AdminShell の sidebar slot に置く。Button を行の形へ上書きして代用しない",
+        "モバイルの BottomTabBar と同じ items 配列を渡す",
+        "ページ内アンカーの目次は SectionNav、ビュー状態の切替は SubNav を使う",
+        "ロゴ行・フッターは部品に含めず slot 側で並べる"
+      ]
+    },
     {
       "name": "CompactFilePicker / ImageAttachmentPicker",
       "exported": false,

package/contracts/consumer-requests.json

@@ -45,6 +45,11 @@
       "dsIssue": 595,
       "consumerIssue": "https://github.com/ekusiek716/yokoku-app/issues/321",
       "fixPr": null
+    },
+    {
+      "dsIssue": 608,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/257",
+      "fixPr": null
     }
   ]
 }

package/contracts/product-theme-overrides.json

@@ -303,6 +303,11 @@
       "--Field-Height-Md",
       "--Field-Padding-X-Md",
       "--Field-Radius"
+    ],
+    "DateField": [
+      "--Field-Height-Md",
+      "--Field-Padding-X-Md",
+      "--Field-Radius"
     ]
   },
   "aiGuidance": [

package/contracts/rules.json

@@ -2,7 +2,7 @@
   "meta": {
     "name": "KSK Design System — Rules Contracts",
     "version": "1.2.0",
-    "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。禁止パターン50件・AIアンチパターン10件。"
+    "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。禁止パターン51件・AIアンチパターン10件。"
   },
   "prohibited": [
     {
@@ -260,9 +260,9 @@
       "pattern": "outline-none\\b",
       "excludePaths": [".stories."],
       "excludeDsPaths": ["components/ui/", "components/patterns/"],
-      "excludeLines": ["focus-visible"],
-      "message": "outline-none 禁止（フォーカスリング削除はアクセシビリティ違反）",
-      "fix": "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
+      "message": "outline-none 禁止（フォーカスリング削除はアクセシビリティ違反。強制配色モードでは outline-hidden でないと枠が消える）",
+      "fix": "focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+      "note": "issue #620。Tailwind v4 で outline-none は常に outline-style: none（強制配色モードでも非表示のまま）。outline-hidden は通常時 none だが forced-colors 時だけ outline: 2px solid transparent になり OS 色へ置換されるため、box-shadow の ring が描画されない強制配色モードでも枠が残る。以前は excludeLines: [\"focus-visible\"] で `focus-visible:outline-none` を含む行を丸ごと素通りさせていたため、まさに forced-colors で問題になるパターン（outline-none + ring の組み合わせ）を検出できていなかった（レビュー指摘）。前置バリアント（`md:` / `data-[...]:` / `group-focus-visible:` / `!` 等）付きでも `outline-none` 部分文字列があれば検出する。DS コンポーネント本体（components/ui・components/patterns）はこのルールの対象外で、__tests__/focus-ring-outline-pairing.test.ts が outline-hidden 必須を機械検証する"
     },
     {
       "id": "P024",
@@ -568,6 +568,18 @@
       "message": "DS を参照しない並行パレットの疑い（DS 名前空間に属さないカスタムプロパティに色値を5個以上定義）",
       "fix": "ksk-design-system/preset + テーマの導入、または既存変数の値を DS トークン参照へ置換",
       "note": "P049 は DS 名前空間（--Primitive- 等）に触れる CSS だけを違反にするため、DS を一切使わない独自パレット（--bg / --accent / --surface 等）を敷いた CSS には無言だった（issue #393）。:root / .dark / [data-theme=...] のようなルート的セレクタの中で、DS 名前空間（contracts/product-theme-overrides.json の dsVariableNamespaces）に属さないカスタムプロパティへ色値（hex / rgb() / hsl() / oklch()）を minColorVars 個以上定義していたら warn する。値が var(--Primitive-...) のように DS トークンを参照しているだけのものはカウントしない。意図的な独立パレット（チャット画面の LINE 風ライト等）は // ksk-ds-lint-ignore P050 -- 理由 で抑制できる。DS 自身 / ベンダリングされた DS の CSS は P049 と同じ判定（issue #407）で対象外"
+    },
+    {
+      "id": "P051",
+      "severity": "warning",
+      "category": "spacing",
+      "appliesTo": ["dom"],
+      "pattern": "overlay-footer-padding",
+      "engine": "overlay-footer-padding",
+      "excludeLines": [],
+      "message": "ResponsiveOverlayFrame（preset=\"plain\" / side=\"float\" 系）の中に ResponsiveOverlayFooter を置くのに padding={false} が無い（下余白が二重になる）",
+      "fix": "Frame に padding={false} を付ける。ResponsiveOverlayFooter が safe-area 込みの下余白を自前で持つため、Frame 側の p-6 と safe-area の下余白は不要",
+      "note": "issue #619。#599 / #613 で plain / float 系の Frame が既定で p-6 + safe-area 込みの下余白を持つようになったため、Footer と併用すると二重になる。公開 CLI と lint-scratch.sh は共通の TypeScript AST 検査（bin/overlay-footer-padding.js）。誤検知を出さない方を優先し、side / preset が文字列リテラルで plain / float 系と確定し、Frame に spread props が無く、padding が未指定・値なし・{true} で、Footer が Frame の JSX 子孫に直接書かれているときだけ報告する。padding={cond} のような式・{...props}・Footer を別コンポーネントに切り出した構成・preset 経路（mobile-form 等。padding を受け付けず余白も持たない）は対象外"
     }
   ],
   "aiPatterns": {

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "2.8.0",
+    "version": "2.9.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",
@@ -346,8 +346,14 @@
     "hover.tertiary-button": "#F4F4F5",
     "hover.ghost-button": "#F4F4F5",
     "hover.destructive-button": "#B91C1C",
+    "hover.info-button": "#1D4ED8",
+    "hover.warning-button": "#9A3412",
+    "hover.success-button": "#166534",
     "active.primary-button": "#1E40AF",
     "active.destructive-button": "#991B1B",
+    "active.info-button": "#1E40AF",
+    "active.warning-button": "#7C2D12",
+    "active.success-button": "#14532D",
     "active.secondary-button": "#DBEAFE",
     "active.tertiary-button": "#E4E4E7",
     "focus.high-emphasis": "#60A5FA",
@@ -452,9 +458,15 @@
     "brand.on-apple": "#000000",
     "hover.primary-button": "#3B82F6",
     "hover.secondary-button": "#1E3A8A",
-    "hover.destructive-button": "#EF4444",
+    "hover.destructive-button": "#FCA5A5",
+    "hover.info-button": "#93C5FD",
+    "hover.warning-button": "#FDBA74",
+    "hover.success-button": "#86EFAC",
     "active.primary-button": "#2563EB",
-    "active.destructive-button": "#DC2626",
+    "active.destructive-button": "#FECACA",
+    "active.info-button": "#BFDBFE",
+    "active.warning-button": "#FED7AA",
+    "active.success-button": "#BBF7D0",
     "active.secondary-button": "#1E40AF",
     "focus.high-emphasis": "#60A5FA",
     "caution.base": "#F87171",

package/dist/class-names.js

@@ -1,2 +1,2 @@
-import { n as e } from "./server-variants-DTpkG8A7.js";
+import { n as e } from "./server-variants-C7GNdOYi.js";
 export { e as buttonVariants };