ksk-design-system 2.12.0 → 2.13.0

package/MIGRATION.md

@@ -3,6 +3,16 @@
 メジャーバージョン間の移行ガイド。
 patch / minor は原則破壊変更なし、自動アップグレード可（例外: **v1.34.0 で npm パッケージ名を変更**。import の置換が必要。下記参照）。
 
+## v2.13.0 の導入注意
+
+以下はv2.13.0でnpm公開する変更の導入注意です。consumerへの展開・アプリ配布は今回の対象に含まず、次回のまとめ展開で反映します。
+
+- **下部ナビ・FABの入力中表示（#700）**: `MobileTabBar` / `MobileFloatingActionButton` は既定の `keyboardBehavior="hide"` での非表示条件が増えます。`BottomTabBar` の既定stayは維持し、hideを明示した場合だけ同じ検知を使います。viewportの縮小に加え、タッチ主体の端末でテキスト入力にフォーカスした時点でも非表示になります。pointer/hover能力では物理キーボード接続を判別できないため、この先行非表示が不要なら `hideOnInputFocus={false}` でviewport検知だけにできます。従来どおり表示位置を変えたくない画面は `keyboardBehavior="stay"` を明示してください。
+- **下側Sheetの入力時高さ（#706）**: `safeArea={true}`（既定）の通常bottom Sheetは、キーボード表示時に上端のsafe-areaも差し引き、ステータスバー・ノッチへの侵入を避けます。独自の全画面配置でこの補正が不要なら `safeArea={false}` を指定してください。snap Sheetは今回の高さ変更の対象外です。
+- **画面・分類・配置編集（#701–#703）**: Screenへ上端safe-area、svh/fill、768px以上の中央カード、landmark省略を追加します。fillの中央カードは親の高さを尊重します。KanbanColumnの分類色指定と、選択・ドラッグ・矢印移動用SelectableTileも追加します。これらの追加APIは任意指定です。
+- **予定のモバイル表示（#704）**: MonthCalendarへ週表示、予定一覧AgendaListを追加します。週表示は選択日を優先し、月外の初期選択日や内部の月またぎ移動でも表示週・月見出しを揃えます。既定の月表示は維持します。
+- **管理画面のモバイルナビ（#705）**: AdminShellへ任意のモバイルドロワーを追加します。リンク選択時の自動closeは `closeMobileDrawerOnNavigate={true}` の明示指定で有効にし、既定falseでは既存の挙動を維持します。
+
 <!-- deprecations:start（自動生成・手で編集しない） -->
 
 ## 非推奨 API 一覧

package/NATIVE_RECIPES.md

@@ -17,6 +17,21 @@ RN 側の公開 export 一覧は `src/native/COMPONENT_LOOKUP.md` で確認で
 import { Button, Screen, PhotoHero } from "ksk-design-system/native/ui"
 ```
 
+## OS のモーション設定
+
+```tsx
+import { useReduceMotion } from "ksk-design-system/native/ui"
+
+const { reduceMotion, resolved } = useReduceMotion()
+const suppressMotion = !resolved || reduceMotion
+```
+
+`resolved` は OS 設定の初回取得または設定変更イベントで `true` になります。
+取得前・取得失敗時は `false` のため、`suppressMotion` の間は演出を開始せず、
+実行中の演出は停止して元の表示へ戻してください。設定変更は即時反映され、
+遅れて届いた初回取得結果では上書きしません。アンマウント時には購読を解除します。
+この hook は `native/ui` の公開 API です。トークン専用の `native` エントリには含みません。
+
 ## Expo Router / React Navigation bottom tabs
 
 Expo Router の `<Tabs>` では `createExpoRouterTabBar` を渡します。アイコンは各 screen の `tabBarIcon` をそのまま使えるため、consumer 側で floating tab bar を組み直す必要はありません。

package/README.md

@@ -540,6 +540,21 @@ import { BottomTabBar } from "ksk-design-system"
 
 React Native は **0.78 以上**（React 19 を同梱する最初の RN）が必要です。
 
+### OS のモーション設定
+
+```tsx
+import { useReduceMotion } from "ksk-design-system/native/ui"
+
+const { reduceMotion, resolved } = useReduceMotion()
+const suppressMotion = !resolved || reduceMotion
+```
+
+`resolved` は OS 設定の初回取得または設定変更イベントで `true` になります。
+取得前・取得失敗時は `false` のため、`suppressMotion` の間は演出を開始せず、
+実行中の演出は停止して元の表示へ戻してください。設定変更は即時反映され、
+遅れて届いた初回取得結果では上書きしません。アンマウント時には購読を解除します。
+この hook は `native/ui` の公開 API です。トークン専用の `native` エントリには含みません。
+
 `ksk-design-system/native/ui` から直接 RN 用コンポーネント export（134 個）を import できます。iOS 26 の **Liquid Glass** にも対応:
 
 ```tsx

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.12.0",
+    "version": "2.13.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 72,
-      "patterns": 67,
+      "patterns": 69,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 162
+      "total": 164
     },
     "exportNaming": {
       "_doc": "contracts の name が `import { name } from \"ksk-design-system\"` で解決できるかを示す。__tests__/contracts-export-integrity.test.ts が src/index.ts の実 export と突き合わせて固定する。",
@@ -1889,8 +1889,12 @@
         "keyboard 表示中に入力を邪魔する場合は keyboardBehavior=hide を使う",
         "variant=glass に shadow-* を重ねない（glass-accent が inset 3層 + drop shadow を内包するため二重になる）",
         "下部固定の全幅 CTA は fullWidth を使い、fixed inset-x + Button を手組みしない。fullWidth 時は placement が無視されラベルが常に表示される",
-        "広告バナー等で動的に持ち上げる必要があるときは、内部変数 --ksk-fab-bottom-offset を直接上書きせず bottomOffsetExtra を使う（issue #453）"
-      ]
+        "広告バナー等で動的に持ち上げる必要があるときは、内部変数 --ksk-fab-bottom-offset を直接上書きせず bottomOffsetExtra を使う（issue #453）",
+        "既定挙動の変更（issue #700・次のリリースで告知）: keyboardBehavior=\"hide\"（既定）は、キーボード検知に加え、タッチ主体の端末（(pointer: coarse) and (hover: none)）でテキスト入力欄にフォーカスがある間も隠れる。隠れている間は invisible でフォーカスも受けない。従来どおり常に出したいときは keyboardBehavior=\"stay\" でオプトアウトする。物理キーボード接続はpointer/hover能力から判別できないため、フォーカスによる先行非表示だけを止めるときは hideOnInputFocus=false（viewport検知は維持）。consumer の html:has(input:focus) で隠す CSS は不要"
+      ],
+      "props": {
+        "hideOnInputFocus": "boolean（既定 true）— keyboardBehavior=\"hide\" のとき、タッチ主体端末の入力フォーカスでも隠す。false なら viewport のキーボード検知だけを使う。pointer/hover能力から物理キーボード接続は判別できない"
+      }
     },
     {
       "name": "MobileAppHeader",
@@ -2202,6 +2206,10 @@
         "写真ヒーローなど 1 画面固定では scroll=false と padding=none を組み合わせる",
         "mainId で本文 landmark の id を調整でき、skipLink=false で内蔵 SkipLink を無効化できる",
         "footer には主要 CTA を置き、safe-area 余白を消費側で再実装しない",
+        "上端のステータスバー / ダイナミックアイランドは safeAreaTop で避ける（header の上、header が無ければ画面上端に --Safe-Area-Inset-Top の余白。issue #701）。header 側で pt-[max(1rem,var(--Safe-Area-Inset-Top))] を自作しない",
+        "アドレスバーの出入りで高さを揺らしたくない画面は height=\"svh\"、高さの決まった親の中では height=\"fill\"（既定 dvh）",
+        "オンボーディング・ログイン等の 1 画面フローを PC で中央カードにするときは desktopLayout=\"card\"（md = 768px 以上で Surface-Secondary の背景の中央に枠・角丸のカード。cardMaxWidth 既定 30rem / cardMaxHeight 既定 47.5rem）。md:w-[480px] md:rounded-2xl 等を className で自作しない",
+        "他の <main> の中に置くときは landmark=\"none\"（本文を div にし、id とスキップリンクを既定で出さない）",
         "React Native consumer は ksk-design-system/native/ui の Screen を使い、header/body/footer shell をローカル再実装しない"
       ]
     },
@@ -2799,10 +2807,27 @@
         "日のセル・予定チップを Button unstyled で自作しない",
         "あふれは maxEventsPerDay（既定 2）超を「+n件」にまとめ、onShowMore（既定 onSelectDay）でその日の詳細へ",
         "md（768px）未満はチップの代わりに色ドット（最大 3）を出す。操作は日の選択に一本化する",
+        "スマホの週の帯は view=\"week\"（フォーカス中の日を含む 1 週だけ。矢印キーで週が移る。issue #704）、日ごとの予定の中身は AgendaList を下に置く。週ストリップ・アジェンダを Button unstyled で自作しない",
         "土日の色は weekendTone（既定 true。日曜 Text-Caution / 土曜 Text-Accent-Primary・Calendar と同じ語彙）",
         "native は未提供（INTENTIONAL_NATIVE_GAPS）"
       ]
     },
+    {
+      "name": "AgendaList",
+      "path": "src/components/patterns/agenda-list.tsx",
+      "description": "予定がある日を時系列に並べる一覧（issue #704）。スマホのカレンダーで MonthCalendar（view=\"week\" の週の帯や月グリッド）の下に置き、日付列（日・曜日）+ その日の予定の行で中身を見せる。予定は MonthCalendarEvent と同じ形。",
+      "accessibility": [
+        "日ごとの li に読み上げ用の見出し（既定 h3。置き場所に合わせて headingLevel で変える・「10月3日（土）、今日」）。今日の行は aria-current=\"date\"。日付列の見た目は aria-hidden",
+        "onSelectEvent を渡すと予定の行が button（44px 以上・focus-visible リング）。渡さなければ読むだけの行"
+      ],
+      "rules": [
+        "予定の行の面は tone（MonthCalendar のチップと同じ色）。今日・選択日・土日（weekendTone）の見た目は DS が持つ",
+        "既定は予定がある日だけを昇順に並べる。予定の無い日も出すときは dates（emptyDayLabel 既定「予定なし」）",
+        "スクロール連動・「今日へ」のジャンプ先は dayId で id を付ける（行には常に data-date）",
+        "並べる日が無いときは empty（EmptyState 等）",
+        "native は未提供（INTENTIONAL_NATIVE_GAPS）"
+      ]
+    },
     {
       "name": "KanbanColumn",
       "path": "src/components/patterns/kanban-column.tsx",
@@ -2812,10 +2837,34 @@
       ],
       "rules": [
         "列の上辺に太い色帯を付けない。状態は tone の色ドットと見出しの言葉で示す",
+        "分類の識別色（カテゴリ別ボード等）は accentColor に var(--Categorical-N) を渡す（tone より優先。issue #702）。title の中に色の点を自作しない",
         "中のカードは Card elevation=\"none\"（面の中の面は影なし）",
         "ドラッグ＆ドロップは持たない。consumer のライブラリで包む",
         "native は未提供（INTENTIONAL_NATIVE_GAPS）"
       ]
+    },
+    {
+      "name": "SelectableTile",
+      "path": "src/components/patterns/selectable-tile.tsx",
+      "description": "押すと選べて、編集中はドラッグ・矢印キーで動かせるタイル（issue #703）。配席表の卓・座席、レイアウト編集のブロック等。押せる面そのものが 1 つの button で、consumer の pointer / key ハンドラと aria-* が同じ要素に付く。",
+      "variants": {
+        "shape": [
+          "rounded",
+          "circle"
+        ]
+      },
+      "accessibility": [
+        "1 つの <button>。名前は中身か aria-label。selected 指定時は aria-pressed（未指定なら付けない）",
+        "movable の間は矢印キー（↑ ↓ ← →）で onMove を呼び preventDefault。consumer の onKeyDown が preventDefault したら呼ばない",
+        "moveInstructions は button の中に hidden で描画して aria-describedby で結ぶ（名前には入らない。consumer の aria-describedby と連結）。非推奨の aria-grabbed / aria-dropeffect は使わない",
+        "タップ領域は 44px 以上（min-h-11 / min-w-11）。focus-visible は 3px のリング"
+      ],
+      "rules": [
+        "選択・移動するタイルを Button unstyled / Card selected + className で自作しない（Card の押せる面は内側の button でハンドラ・aria-describedby が乗らない）",
+        "ドラッグ＆ドロップ自体（pointer capture・落とし先の判定）は consumer が onPointerDown 等で実装し、dragging で見た目だけ渡す",
+        "大きさは className で渡す（円形は size-12 等）。selected の面・枠は Card / ActionTile と同じトークンで、枠の太さは内側の outline（focus-visible の外側 ring と両立）",
+        "native は未提供（INTENTIONAL_NATIVE_GAPS）"
+      ]
     }
   ],
   "commerce": [
@@ -2955,10 +3004,12 @@
         "--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 は契約外で固定。",
-        "bottomOffsetExtra（CSS の長さ）は safe-area・pill の 12px・lift の持ち上げ量に加算される。className の bottom-* で位置を上書きしない（issue #681）"
+        "bottomOffsetExtra（CSS の長さ）は safe-area・pill の 12px・lift の持ち上げ量に加算される。className の bottom-* で位置を上書きしない（issue #681）",
+        "既定挙動の変更（issue #700・次のリリースで告知）: keyboardBehavior=\"hide\" を明示したとき（既定はstay）は、キーボード検知に加え、タッチ主体の端末（(pointer: coarse) and (hover: none)）でテキスト入力欄にフォーカスがある間も隠れる。隠れている間は invisible でフォーカスも受けない。従来どおり常に出したいときは keyboardBehavior=\"stay\" でオプトアウトする。物理キーボード接続はpointer/hover能力から判別できないため、フォーカスによる先行非表示だけを止めるときは hideOnInputFocus=false（viewport検知は維持）。consumer の html:has(input:focus) で隠す CSS は不要"
       ],
       "props": {
-        "navLabel": "string (既定 \"メインナビゲーション\") — nav 要素の aria-label（issue #428）"
+        "navLabel": "string (既定 \"メインナビゲーション\") — nav 要素の aria-label（issue #428）",
+        "hideOnInputFocus": "boolean（既定 true）— keyboardBehavior=\"hide\" のとき、タッチ主体端末の入力フォーカスでも隠す。false なら viewport のキーボード検知だけを使う。pointer/hover能力から物理キーボード接続は判別できない"
       },
       "slots": [
         "bottom-nav-pill",
@@ -2995,14 +3046,18 @@
         "寸法・面の上書きは BottomTabBar と同じ --Nav-* を使う（MobileTabBar は薄いラッパーなので変数はそのまま効く。issue #471）",
         "[data-global-nav-add-icon] は belle-todo 互換の後方互換フックで公開契約ではない。中央アクションのアイコンは data-slot=\"bottom-nav-center-action-icon\" で狙う（issue #471）",
         "keyboardBehavior（hide 既定 / lift / stay）を BottomTabBar へ素通しする。キーボード表示中にタブバーを隠す CSS を consumer に書かない（issue #681）",
-        "bottomOffsetExtra（CSS の長さ）で画面下の広告バナー等の高さぶん持ち上げる。MobileAppShell の bottomPaddingExtra・MobileFloatingActionButton の bottomOffsetExtra に同じ値を渡す（issue #681）"
+        "bottomOffsetExtra（CSS の長さ）で画面下の広告バナー等の高さぶん持ち上げる。MobileAppShell の bottomPaddingExtra・MobileFloatingActionButton の bottomOffsetExtra に同じ値を渡す（issue #681）",
+        "既定挙動の変更（issue #700・次のリリースで告知）: keyboardBehavior=\"hide\"（既定）は、キーボード検知に加え、タッチ主体の端末（(pointer: coarse) and (hover: none)）でテキスト入力欄にフォーカスがある間も隠れる。隠れている間は invisible でフォーカスも受けない。従来どおり常に出したいときは keyboardBehavior=\"stay\" でオプトアウトする。物理キーボード接続はpointer/hover能力から判別できないため、フォーカスによる先行非表示だけを止めるときは hideOnInputFocus=false（viewport検知は維持）。consumer の html:has(input:focus) で隠す CSS は不要"
       ],
       "productTheme": [
         "--Nav-Pill-*",
         "--Nav-Item-*",
         "--Nav-Center-Action-*",
         "--Nav-Selected-*"
-      ]
+      ],
+      "props": {
+        "hideOnInputFocus": "boolean（既定 true）— keyboardBehavior=\"hide\" のとき、タッチ主体端末の入力フォーカスでも隠す。false なら viewport のキーボード検知だけを使う。pointer/hover能力から物理キーボード接続は判別できない"
+      }
     },
     {
       "name": "FilterBar",
@@ -3193,7 +3248,9 @@
         "For admin/dashboard pages",
         "mainId は同一ページ内で一意にする。skipLink=false で内蔵 SkipLink を無効化できる",
         "header と main の既定 gutter は内蔵 Container が担うためページ側で外周 padding を重ねない",
-        "暗色サイドバーは sidebarTone=\"inverse\"（aside を Surface-Inverse にする）。中のナビは SidebarNav tone=\"inverse\"、ロゴ・フッターの文字も Text-on-Inverse 系にする（issue #680）"
+        "暗色サイドバーは sidebarTone=\"inverse\"（aside を Surface-Inverse にする）。中のナビは SidebarNav tone=\"inverse\"、ロゴ・フッターの文字も Text-on-Inverse 系にする（issue #680）",
+        "lg 未満でナビへ辿れるようにするときは mobileDrawer（issue #705）。ヘッダー左端のメニューボタン（44px・aria-expanded・aria-label 既定「メニューを開く」）から左の Sheet に同じ sidebar を開く。ハンバーガーと Sheet side=\"left\" を consumer で自作しない",
+        "ドロワー内のリンク（a[href]）と SidebarNav の項目を押すと閉じる（closeMobileDrawerOnNavigate 既定 false、明示 true で有効）。開閉の制御は mobileDrawerOpen / onMobileDrawerOpenChange"
       ]
     },
     {

package/contracts/product-theme-overrides.json

@@ -177,6 +177,8 @@
       "--Nav-Pill-Specular",
       "--Nav-Item-Min-Height",
       "--Nav-Item-Gap",
+      "--Nav-Item-Height",
+      "--Nav-Item-Label-Offset-Y",
       "--Nav-Center-Action-Size",
       "--Nav-Center-Action-Radius",
       "--Nav-Center-Action-Surface",

package/contracts/token-hex-cache.json

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