ksk-design-system 1.55.0 → 1.56.0

package/AGENTS.md

@@ -33,6 +33,7 @@ UI を書く前に必ず確認すること:
 - [ ] アニメーションは `duration-[var(--Motion-Duration-*)]` / `ease-[var(--Motion-Easing-*)]` か（`duration-200` や生 `cubic-bezier` の直書きは禁止。トークン参照でないと `prefers-reduced-motion` の一括制御から漏れる）
 - [ ] 重なり順は `z-[var(--Z-*)]` か（`z-50` 一律だと Portal のマウント順で勝敗が決まる。`z-10` / `z-20` のコンポーネント内部の重なりは対象外。順序は DESIGN.md の Layering 節）
 - [ ] アイコンは `iconsax-reactjs` か（`lucide-react` / `heroicons` は使わない）
+- [ ] **選んだアイコンの「絵」を実際に見たか**。iconsax は名前と絵が一致しないものがある。`Check` は小切手（checkbook）でチェックマークではない（PR #349 で出荷直前まで残った）。チェックマークは `TickSquare` / `TickCircle`。また **"i" のグリフは iconsax に存在せず**、`InfoCircle` / `Information` / `Danger` / `Warning2` はすべて感嘆符「!」の器違いなので、情報アイコンは DS 自前の `InfoCircleIcon` を使う。名前で選んだら描画結果を目視し、意味が変わると困る箇所は path で固定するテストを書く <!-- docs-drift-ignore: Check TickSquare TickCircle InfoCircle Information Danger Warning2 InfoCircleIcon -->
 - [ ] 生タグ（`<button>` / `<input>` / `<a href>`）でなく DS コンポーネントを使ったか
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
 - [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）

package/CLAUDE.md

@@ -33,6 +33,7 @@ UI を書く前に必ず確認すること:
 - [ ] アニメーションは `duration-[var(--Motion-Duration-*)]` / `ease-[var(--Motion-Easing-*)]` か（`duration-200` や生 `cubic-bezier` の直書きは禁止。トークン参照でないと `prefers-reduced-motion` の一括制御から漏れる）
 - [ ] 重なり順は `z-[var(--Z-*)]` か（`z-50` 一律だと Portal のマウント順で勝敗が決まる。`z-10` / `z-20` のコンポーネント内部の重なりは対象外。順序は DESIGN.md の Layering 節）
 - [ ] アイコンは `iconsax-reactjs` か（`lucide-react` / `heroicons` は使わない）
+- [ ] **選んだアイコンの「絵」を実際に見たか**。iconsax は名前と絵が一致しないものがある。`Check` は小切手（checkbook）でチェックマークではない（PR #349 で出荷直前まで残った）。チェックマークは `TickSquare` / `TickCircle`。また **"i" のグリフは iconsax に存在せず**、`InfoCircle` / `Information` / `Danger` / `Warning2` はすべて感嘆符「!」の器違いなので、情報アイコンは DS 自前の `InfoCircleIcon` を使う。名前で選んだら描画結果を目視し、意味が変わると困る箇所は path で固定するテストを書く <!-- docs-drift-ignore: Check TickSquare TickCircle InfoCircle Information Danger Warning2 InfoCircleIcon -->
 - [ ] 生タグ（`<button>` / `<input>` / `<a href>`）でなく DS コンポーネントを使ったか
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
 - [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.55.0",
+    "version": "1.56.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 67,
@@ -325,7 +325,7 @@
     {
       "name": "Dialog",
       "path": "src/components/ui/dialog.tsx",
-      "description": "タスク面用の中央モーダル(role=dialog)。フォーム入力・絞り込み等の「作業する」面に使う。削除/送信等の割り込み確認は ConfirmDialog / AlertDialog(role=alertdialog) を使い分ける。モバイルは ResponsiveDialog 推奨。position=\"top\" でモバイル向け上部寄せ。autoFocus / restoreFocusOnClose / closeOnEsc / bodyScrollLock でフォーカス・スクロール挙動を制御可能。",
+      "description": "タスク面用の中央モーダル(role=dialog)。フォーム入力・絞り込み等の「作業する」面に使う。削除/送信等の割り込み確認は ConfirmDialog / AlertDialog(role=alertdialog) を使い分ける。モバイルは ResponsiveDialog 推奨。position=\"top\" でモバイル向け上部寄せ、position=\"fullscreen\" で全画面(inset-0)。top/fullscreen は既定で safe-area(ノッチ・ステータスバー等)を回避し、safeArea=false でオプトアウト可能。autoFocus / restoreFocusOnClose / closeOnEsc / bodyScrollLock でフォーカス・スクロール挙動を制御可能。Sheet と同じ open 順スタックに参加し、多段モーダルでは後から開いた側の overlay/content の z-index が自動繰り上げされる（zIndex prop で上書き可能）。",
       "subcomponents": [
         "DialogTrigger",
         "DialogContent",
@@ -336,12 +336,27 @@
         "DialogClose"
       ],
       "rules": [
-        "rounded-2xl (16px)",
+        "rounded-2xl (16px)。position=\"fullscreen\" は rounded-none",
         "shadow-[var(--shadow-dialog)]",
         "p-6 padding",
+        "position は center(既定) / top / fullscreen",
+        "safeArea(既定 true) で top/fullscreen の safe-area 回避を制御。false でオプトアウト",
         "autoFocus は first-input / title / ref / false を指定可能",
-        "description prop は sr-only description を自動生成する"
-      ]
+        "description prop は sr-only description を自動生成する",
+        "DialogTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する（値は contracts/composition.json の textHierarchy と1対1）。未指定時は position=\"fullscreen\" 配下で page 相当、それ以外は従来の typo-heading-lg"
+      ],
+      "variants": {
+        "position": [
+          "center",
+          "top",
+          "fullscreen"
+        ],
+        "titleLevel": [
+          "page",
+          "section",
+          "card"
+        ]
+      }
     },
     {
       "name": "Sheet",
@@ -361,10 +376,19 @@
         "Side panel, not modal",
         "swipeToClose は side=bottom / bottom-glass のみ有効",
         "swipeToClose mode は max-h-[90dvh] を自動付与し、viewport 外にはみ出さない",
+        "side=\"top\" は既定(safeArea=true)で env(safe-area-inset-top) を padding-top に確保",
+        "side=\"float\"/\"float-glass\" は既定(safeArea=true)でキーボード非表示時も上端が抜けない max-height を確保",
+        "safeArea(既定 true) は上記2つの回避をまとめてオプトアウトする prop。他の side には効果なし",
         "autoFocus は first-input / title / ref / false を指定可能",
-        "description prop はRadix管理IDの sr-only description を自動生成する"
+        "description prop はRadix管理IDの sr-only description を自動生成する",
+        "SheetTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する（値は contracts/composition.json の textHierarchy と1対1）。未指定時は BottomSheetFrame preset=\"mobile-full\"|\"mobile-page\" 配下で page 相当、それ以外は従来の typo-heading-lg"
       ],
       "variants": {
+        "titleLevel": [
+          "page",
+          "section",
+          "card"
+        ],
         "side": [
           "top",
           "bottom",
@@ -754,7 +778,7 @@
     {
       "name": "AlertDialog",
       "path": "src/components/ui/alert-dialog.tsx",
-      "description": "「アクションを止める」割り込み確認の基盤(role=alertdialog)。破壊的アクションの二段階確認に使用。中央表示・オーバーレイ外クリックでは閉じない（明示的に選ばせる）。開く瞬間に既存Popoverを閉じ、AlertDialog内で後から開くPopoverは専用z-indexで前面に表示する。タスク面の中央モーダルは Dialog を使う。",
+      "description": "「アクションを止める」割り込み確認の基盤(role=alertdialog)。破壊的アクションの二段階確認に使用。中央表示・オーバーレイ外クリックでは閉じない（明示的に選ばせる）。開く瞬間に既存Popoverを閉じ、AlertDialog内で後から開くPopoverは専用z-indexで前面に表示する。タスク面の中央モーダルは Dialog を使う。Sheet / Dialog と同じ open 順スタックに参加し、基底は --Z-Alert-* のまま段数ぶんを加算するため、アラートは常に通常モーダルより上・アラート同士は開いた順に前面へ来る（zIndex prop で上書き可能）。",
       "variants": [
         "default",
         "sm"
@@ -1325,11 +1349,17 @@
     {
       "name": "SwipeRow",
       "path": "src/components/patterns/swipe-row.tsx",
-      "description": "スワイプアクション付きリスト行。左スワイプでアクションボタンを表示。タッチ/マウス両対応。",
+      "description": "スワイプアクション付きリスト行。左スワイプでアクションボタンを表示。タッチ/マウス両対応。actions グループはフォーカスで自動的に開き、Tab / スクリーンリーダーからも到達できる（issue #342）。native 版（src/native/components/SwipeRow.tsx）は rightActions から accessibilityActions を自動生成し VoiceOver/TalkBack からスワイプ操作を代替できる。",
       "features": [
         "swipe-to-reveal",
         "snap-behavior",
-        "multiple-actions"
+        "multiple-actions",
+        "keyboard-focus-reveal",
+        "native-accessibility-actions"
+      ],
+      "accessibility": [
+        "actions グループにフォーカスが入ると開き、外れると閉じる（inert で常時隠さない）",
+        "native: rightActions から accessibilityActions / onAccessibilityAction を既定で自動生成"
       ],
       "rules": [
         "Mobile list items with swipe actions (delete, archive, etc.)"
@@ -1338,7 +1368,7 @@
     {
       "name": "ConfirmDialog",
       "path": "src/components/patterns/confirm-dialog.tsx",
-      "description": "確認ダイアログ。AlertDialog(role=alertdialog)基盤の割り込み確認。削除・送信等の重要操作前に PC/SP とも中央アラートで確認。外クリックでは閉じない・非同期onConfirm対応・ローディング状態あり。",
+      "description": "確認ダイアログ。AlertDialog(role=alertdialog)基盤の割り込み確認。削除・送信等の重要操作前に PC/SP とも中央アラートで確認。外クリックでは閉じない・非同期onConfirm対応・ローディング状態あり。多段 Sheet / Dialog の上に開いても常に最前面（AlertDialog の open 順スタックに準拠）。",
       "variants": [
         "default",
         "destructive"
@@ -2062,11 +2092,14 @@
         "info",
         "caution",
         "columns: 2 / 3 / 4 / auto",
-        "gap: sm / md"
+        "gap: sm / md",
+        "selectionMode: 未指定 / single / multiple"
       ],
       "accessibility": [
         "button semantics",
         "aria-pressed when selected (selected prop または variant=\"selected\" のどちらでも true)",
+        "selectionMode=\"single\" のとき grid が role=\"radiogroup\"、tile が role=\"radio\" + aria-checked(web) / accessibilityRole=\"radiogroup\"|\"radio\" + accessibilityState.checked(native)。この場合 aria-pressed / selected は出さない(意味論の二重化を避ける)",
+        "selectionMode=\"single\" の web は roving tabindex(選択中のタイルのみ tabIndex=0、未選択なら先頭)と上下左右矢印での移動+選択を持つ(WAI-ARIA APG の radio group パターン。端で折り返し、disabled は移動対象外)",
         "選択状態は色だけでなく既定チェック(indicator省略時)でも伝える(WCAG 1.4.1)",
         "既定チェックは読み上げ対象外(aria-hidden / accessibilityElementsHidden)。選択状態の正本は aria-pressed(web) / accessibilityState.selected(native)"
       ],
@@ -2075,6 +2108,9 @@
         "shortcut row/grid の columns/gap を consumer 側で決め打ちしない",
         "children には ActionTile を使う",
         "選択状態は selected prop を使う",
+        "単一選択(アンケートの単一回答など)には selectionMode=\"single\" を指定する。複数選択と明示したい場合は \"multiple\"。未指定は「選択の集合ではない起動ボタン」の意味で、従来どおり grid に role を付けず tile は aria-pressed のみ(issue #318)",
+        "selectionMode=\"single\" で選択中の ActionTile が 2 つ以上あると開発ビルドで console.warn する(ChipSelector の既定モード問題と同じ静かな誤動作の検出)",
+        "ActionTile 側の selectionMode 明示は親 grid より優先される(grid 外の単体使用・混在時の逃げ道)",
         "meta はカード下段右端の補足情報専用。選択インジケータには indicator prop を使う(issue #309)",
         "indicator はラベル行右端(loading 時 Spinner の位置)に表示。省略時は選択状態でDS標準チェックが既定表示される。null/undefined/falseはいずれも「指定なし」として扱われ、選択中なら既定チェックへフォールバックする",
         "loading は indicator / 既定チェックより優先して表示される",

package/contracts/token-hex-cache.json

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