ksk-design-system 2.10.0 → 2.12.0

package/DESIGN.md

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

package/MIGRATION.md

@@ -39,6 +39,25 @@ npx ksk-ds check-migration ./src
 
 ---
 
+## v2.12.0
+
+追加のみで、APIの削除・改名はありません。propsを渡さなければ従来と同じ表示です。次の3点は取り込み時に確認してください。
+
+- ShareButtonsのLINEの塗りボタンは、文字が黒になります。白だと#06C755上で約2.2:1となりAAに届かないためです。
+- IconBadgeのsuccess / warningは、アイコン色がText-*に変わります。非テキストの3:1を満たすためで、見た目が少し濃くなります。
+- inline系のAlertが `title` / `description` / `icon` propを描画するようになりました。以前は空の枠になっていたため、該当箇所の表示を確認してください。
+
+---
+
+## v2.11.0
+
+追加のみで、APIの削除・改名はありません。propsを渡さなければ従来と同じ表示です。次の2点は取り込み時に確認してください。
+
+- Cardに `onClick` を渡していた場合、Card全体が押せる面（button）になります。従来のdiv向けハンドラもそのまま型が通ります。`href` / `disabled` も使えます。
+- 名前の無いChipSelector（単一選択）、押せるCard、CodeInputは、開発ビルドで1回 `console.warn` を出します。`aria-label` / `aria-labelledby` を渡すか、CardはCardTitle / CardDescriptionで名前を付けてください。
+
+---
+
 ## v2.10.0
 
 APIの削除・改名はありません。次の表示・操作の既定値変更は、取り込み時に利用画面で確認してください。

package/RELEASE.md

@@ -2,6 +2,35 @@
 
 `ksk-design-system` のリリーススケジュール・運用ルール。
 
+## v2.12.0（2026-10-17）
+
+2.11.0以降に、consumer側の見た目の上書きをなくすためのAPI・部品を22件追加したminorリリース。追加のみで、propsを渡さなければ従来と同じ表示です。
+
+- 新部品を7つ追加しました。`EmojiIcon`（#676）、`AddTile`（#678）、`MonthCalendar` / `KanbanColumn`（#679）、`CodeDisplay`（#686）、`FeatureComparisonTable`（#687）、`Highlight`（#692）です。
+- Input / Textareaに枠なしでその場編集できる `variant="inline"` / `"inline-title"` を追加しました（#675）。
+- Cardに `selected` / `elevation`、StatCardに `elevation`、Avatarに `size` を追加しました（#677・#688・#689）。
+- SidebarNavに `tone="inverse"`、AdminShellに `sidebarTone` を追加し、暗色サイドバーにできるようにしました（#680）。
+- MobileTabBarに `keyboardBehavior` / `bottomOffsetExtra`、MobileAppShellに `bottomPaddingExtra`、nativeの上端safe-area用の `--Safe-Area-Inset-Top` を追加しました（#681・#682）。
+- Bannerに `density="compact"` / `layout="bar"`、IconBadgeに `tone`、SettingsSectionに `icon`、SettingsListRowに `showChevron` を追加しました（#683・#684・#690）。
+- ShareButtonsに `message` / `layout="block"` / `labels` とLINEのhover・押下・前景トークンを追加しました（#685）。
+- Toastの位置変数と `<Toaster position>`、`--Surface-Highlight` / `--Text-on-Highlight` トークン、TagInputのid / name / aria-*の内部input転送を追加しました（#691・#692・#693）。
+- DS部品のスクロールバー非表示を既存の `scrollbar-hide` に統一しました（#694）。
+- inline系Alertが `title` / `description` / `icon` propを描画するようにしました（#695）。
+
+導入時は [2.12.0の注意](./MIGRATION.md#v2120) を確認してください。npm公開・タグ・GitHub Releaseはversion変更のmainマージ後に `publish.yml` が実行します。consumerへの取り込みとアプリ配布は別工程で、今回のDS公開準備には含めません。
+
+## v2.11.0（2026-10-16）
+
+2.10.0以降に、consumer側の見た目の上書きをなくすためのAPIを9件追加したminorリリース。追加のみで、propsを渡さなければ従来と同じ表示です。
+
+- Buttonに `ghost-neutral` / `ghost-destructive` / `ghost-success` を追加しました（#664・#671）。hover面はAAを満たす色です。
+- Cardに `onClick` / `href` / `disabled` を追加し、全面の押せる面にできるようにしました（#665）。
+- ChipSelectorに `aria-label` / `aria-labelledby` / `aria-describedby` / `id`、ChipFilterBarに `gutter` / `contentClassName` を追加しました（#666・#667）。
+- ListItemにスロット用の `leftSlotClassName` / `rightSlotClassName` / `rightSlotWidth`、ActionTileに `media` / `mediaPosition` / `mediaSize`、CountdownHeroに `onClick` / `href` / `aria-label` / `disabled` を追加しました（#668・#670・#672）。
+- コード / OTP入力の新部品 `CodeInput` を追加しました（#669）。貼り付けで全桁入力、`one-time-code`、桁ごとの読み上げ名に対応します。
+
+導入時は [2.11.0の注意](./MIGRATION.md#v2110) を確認してください。npm公開・タグ・GitHub Releaseはversion変更のmainマージ後に `publish.yml` が実行します。consumerへの取り込みとアプリ配布は別工程で、今回のDS公開準備には含めません。
+
 ## v2.10.0（2026-10-16）
 
 2.9.0以降の未公開13コミットをまとめたminorリリース。既存APIの削除はなく、操作部品の見た目とフォーカスの既定動作を改善しています。

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.10.0",
+    "version": "2.12.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
-      "ui": 69,
-      "patterns": 62,
+      "ui": 72,
+      "patterns": 67,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 154
+      "total": 162
     },
     "exportNaming": {
       "_doc": "contracts の name が `import { name } from \"ksk-design-system\"` で解決できるかを示す。__tests__/contracts-export-integrity.test.ts が src/index.ts の実 export と突き合わせて固定する。",
@@ -40,6 +40,9 @@
         "secondary-switch",
         "tertiary",
         "ghost",
+        "ghost-neutral",
+        "ghost-destructive",
+        "ghost-success",
         "link",
         "destructive",
         "info",
@@ -85,6 +88,8 @@
         "Native Button supports loading/loadingLabel and leadingIcon/trailingIcon; do not wrap ActivityIndicator in Text",
         "Web Button も loading / loadingLabel を持つ（opt-in）。非同期処理中は自前で disabled + 文言差し替えをせず loading を使う。asChild 併用時はスピナーを出さず aria-busy と disabled 相当だけを子へ渡す",
         "Native Button supports spinnerColor to override the loading ActivityIndicator color; default unchanged (falls back to variant fg color, issue #450)",
+        "variant=ghost-neutral は背景も枠も無い灰色（Text-Medium-Emphasis）の文字ボタン。スキップ・あとで・閉じる・解約手続きなどの補助・離脱の操作に使う（issue #664）。ghost に className で灰色を被せない。native Button にも同名 variant",
+        "variant=ghost-destructive / ghost-success は文字だけの弱い赤（Text-Caution）/ 緑（Text-Success）ボタン（issue #671）。確認を挟む削除の 1 段目・取り消しは ghost-destructive、確認側の最終ボタンは destructive。ghost に className で Text-Caution / Object-Caution / Text-Success を被せない。native Button にも同名 variant",
         "variant=info / warning / success は状態色で種類や意味を伝えるボタン（issue #598）。背景色を className で上書きせず variant を使う。不可逆操作には warning ではなく destructive を使う",
         "variant=glass は背景がグラデーション/写真の場合のみ使用",
         "variant=glass-inverse は暗い写真・動画・濃色面上の Liquid Glass CTA 専用",
@@ -115,7 +120,9 @@
         "showCount + maxLength で controlled / uncontrolled / IME 対応の文字数カウンタを表示",
         "showCount 未指定時は wrapper / counter DOM を追加しない",
         "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（showCount / adornment / IME 追従は維持される）",
-        "Native Input supports style (outer container View) and inputStyle (inner TextInput) as RN-idiomatic style overrides, merged after DS defaults (issue #447)"
+        "Native Input supports style (outer container View) and inputStyle (inner TextInput) as RN-idiomatic style overrides, merged after DS defaults (issue #447)",
+        "その場で編集する欄（詳細シートのタイトル・メモ等）は variant=\"inline\"（本文 typo-body-md）/ \"inline-title\"（見出し typo-heading-xl）。枠・背景なし、hover で Surface-Secondary、focus-visible で Focus リング、aria-invalid で Caution のリング。unstyled + typo・余白・フォーカス下線の手書きで作らない（issue #675）",
+        "CommitInput / CommitTextarea / AutoGrowTextarea / CommitAutoGrowTextarea にも同じ variant を渡せる。native Input / Textarea / AutoGrowTextarea も同名（フォーカス・invalid は下線）"
       ]
     },
     {
@@ -248,7 +255,8 @@
         "Must use <Textarea> not <textarea>",
         "showCount + maxLength で controlled / uncontrolled / IME 対応の文字数カウンタを表示",
         "showCount 未指定時は wrapper / counter DOM を追加しない",
-        "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（autoGrow / showCount は維持される）"
+        "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（autoGrow / showCount は維持される）",
+        "variant=\"inline\" / \"inline-title\" は枠・背景・最小高さ・resize なしでその場編集する（issue #675。Input と同じ）"
       ]
     },
     {
@@ -335,7 +343,18 @@
       "rules": [
         "rounded-lg (8px)",
         "default variant は gap-6 が直下の子の縦間隔を所有する。直下の子に mt-* / mb-* / my-* / space-y-* を追加しない",
-        "variant=media は gap / padding を持たないため、内側コンテンツで明示的に余白を管理できる"
+        "variant=media は gap / padding を持たないため、内側コンテンツで明示的に余白を管理できる",
+        "カード全体を押せるようにするときは onClick（ボタン）/ href（リンク）を Card に渡す(issue #665)。全面を覆う不可視の button / a（stretched link）を重ね、Enter / Space・フォーカスリング・hover・押下表現を DS が持つ。名前は CardTitle・説明は CardDescription に自動で結ばれる（CardTitle が無いときは aria-label）。variant=media でも使える。disabled 対応",
+        "押せる Card の中の別操作（メニュー・削除等）は CardAction に置く。CardAction は押せる面より前面に出て入れ子 button にならない。それ以外の場所の操作子は押せる面に覆われる",
+        "押せる面（button / a）は Card の DOM 先頭に置き、Tab 順はカード本体 → 内側の CardAction（視覚順）。onClick の型は MouseEventHandler<HTMLElement> で、以前の div 前提のハンドラもそのまま渡せる",
+        "押せる Card の名前は aria-label → aria-labelledby → CardTitle（自前の id でも結ばれる）の順。どれも無いと開発ビルドで 1 回 console.warn。押せない入れ子の Card の CardTitle / CardDescription は外側の押せる Card に登録されない",
+        "<Button unstyled> に border / rounded / shadow / active:scale を被せて押せるカードを自作しない（P040）。native は onPress / disabled",
+        "parity（web と差がある点）: native の押せる Card は Pressable 1 つで、CardTitle / CardAction の登録・前面化の仕組みを持たない。入れ子の Card や Card 内の別操作は RN の Pressable の入れ子規則（内側の Pressable が先に反応）に従い、読み上げ名は accessibilityLabel を明示するか子の Text の連結になる",
+        "面の中に置くカード（入れ子・Section 内のグリッド）は elevation=\"none\"。`!shadow-none` / `shadow-none` の className で消さない（issue #689）",
+        "選ぶカード（配席の卓・プラン選択等）は selected。onClick の押せる面に aria-pressed（href では aria-current=\"true\"）が付き、押せない Card では見た目だけで開発ビルドで warn。Surface-Accent-Primary-Light の面 + Border-Accent-Primary の 2px 相当の枠になる。Button unstyled に選択色を被せて自作しない。座席のような円形は Card に形の className を足して組む（専用部品は持たない）。native Card も selected（accessibilityState.selected）（issue #677）"
+      ],
+      "variants": [
+        "elevation: none / sm / md(既定) / lg（issue #689。native と同じ語彙）"
       ]
     },
     {
@@ -368,7 +387,11 @@
       "rules": [
         "rounded-full only",
         "Use DiceBear shapes for placeholder, not pravatar.cc",
-        "native (src/native/components/Avatar.tsx): size はプリセット(sm/md/lg/xl)に加えて pt の数値も可。shape=\"circle\"(既定)|\"rounded\"、rounded の角丸は radius(lg/xl/2xl・既定 xl)。fallback は文字列に加えて ReactNode を受け、独自のフォールバック表示（決定論グラデ+絵文字等）を差し込める。source はリモート URL 文字列も受け取り {uri} に正規化する（issue #449）"
+        "native (src/native/components/Avatar.tsx): size はプリセット(sm/md/lg/xl)に加えて pt の数値も可。shape=\"circle\"(既定)|\"rounded\"、rounded の角丸は radius(lg/xl/2xl・既定 xl)。fallback は文字列に加えて ReactNode を受け、独自のフォールバック表示（決定論グラデ+絵文字等）を差し込める。source はリモート URL 文字列も受け取り {uri} に正規化する（issue #449）",
+        "寸法は size で指定する。className の size-* / w-* h-* で上書きしない（AvatarFallback の文字サイズが追随しなくなる）。native は xs=24 も持つ（issue #688）"
+      ],
+      "variants": [
+        "size: xs(24) / sm(32) / md(40・既定) / lg(56) / xl(80)。native と同じ語彙・値（issue #688）"
       ]
     },
     {
@@ -396,7 +419,8 @@
         "DialogTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する（値は contracts/composition.json の textHierarchy と1対1）。未指定時は position=\"fullscreen\" 配下で page 相当、それ以外は従来の typo-heading-lg",
         "native (src/native/components/Dialog.tsx): position=\"center\"(既定) / \"top\" / \"fullscreen\" を持ち、fullscreen は四辺・top は上端の safe-area を避ける。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0（従来どおり）",
         "modal な Dialog の content は aria-modal=\"true\" を出力する（modal={false} では出さない）。開いているモーダルの横断判定は useHasOpenModal() / useOpenModalCount() を使い、consumer 側で data-state 等の内部属性を直接読まない（#505）",
-        "size は sm(400px) / md(480px・既定) / lg(640px) / xl(800px) の幅の段（opt-in）。未指定は従来の 480px のまま。position=\"fullscreen\" では無視。size の段は sm: 付きなので、上書きは className に sm:max-w-* を渡す（接頭辞なしの max-w-* は size に勝たない）。Sheet の size と段の名前を揃えている。ResponsiveDialogContent の size は PC 側の Dialog にだけ渡る"
+        "size は sm(400px) / md(480px・既定) / lg(640px) / xl(800px) の幅の段（opt-in）。未指定は従来の 480px のまま。position=\"fullscreen\" では無視。size の段は sm: 付きなので、上書きは className に sm:max-w-* を渡す（接頭辞なしの max-w-* は size に勝たない）。Sheet の size と段の名前を揃えている。ResponsiveDialogContent の size は PC 側の Dialog にだけ渡る",
+        "position=\"top\" / \"fullscreen\" の上端 safe area は --Safe-Area-Inset-Top で読む（issue #682。Sheet と同じ）"
       ],
       "variants": {
         "position": [
@@ -445,7 +469,8 @@
         "native (src/native/components/Sheet.tsx): safeArea(既定 true) で side=\"top\" の上端 inset 退避と、画面いっぱいに近い side=\"bottom\" の食い込み分の退避を行う。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0（従来どおり）",
         "native (src/native/components/Sheet.tsx): surfaceColor でパネル（および snap モードの footer）の面色を上書きできる。未指定なら theme.surface.primary（従来どおり）。scrim の色は変えない（issue #448）",
         "modal な Sheet の content は aria-modal=\"true\" を出力する（modal={false} では出さない）。開いているモーダルの横断判定は useHasOpenModal() / useOpenModalCount() を使い、consumer 側で data-state 等の内部属性を直接読まない（#505）",
-        "size は sm(max-w-sm・既定) / md(max-w-xl) / lg(max-w-3xl) の幅の段（opt-in）。side=\"left\" / \"right\" のときだけ効き、top / bottom / float 系では無視。未指定は従来の max-w-sm のまま。className の max-w-* は size より優先。Dialog の size と段の名前を揃えている"
+        "size は sm(max-w-sm・既定) / md(max-w-xl) / lg(max-w-3xl) の幅の段（opt-in）。side=\"left\" / \"right\" のときだけ効き、top / bottom / float 系では無視。未指定は従来の max-w-sm のまま。className の max-w-* は size より優先。Dialog の size と段の名前を揃えている",
+        "上端の safe area は --Safe-Area-Inset-Top（= max(--Native-Safe-Area-Inset-Top, env(safe-area-inset-top))）で読む。WKWebView で env() が 0 に固着する場合、ネイティブの殻が --Native-Safe-Area-Inset-Top に実測値を書く。consumer で pt-[max(...native-safe-top...)] や [data-slot=sheet-content] の max-height を上書きしない（issue #682。Dialog top / fullscreen・BottomSheetFrame・ResponsiveOverlayFrame・MediaActionCluster・sheet-keyboard.css も同じ）"
       ],
       "variants": {
         "titleLevel": [
@@ -659,7 +684,8 @@
         "新規 action prop で右側に CTA ボタン (元に戻す / 再試行 等) を表示できる",
         "保存完了・接続復旧・同期開始など一時的な操作結果は Banner ではなく toast.* helper を使う",
         "connectionRestored / saveComplete / retryStarted / retryFailed helper を提供",
-        "viewport の下端 offset は product theme の公開変数 --Toast-Viewport-Offset-Bottom（既定 1rem = 従来の bottom-4）で調整する。下部タブバー / FAB と重なるプロダクトは :root で持ち上げる。[data-slot=\"toast-viewport\"] を消費側 CSS から直接狙わない（issue #503）"
+        "viewport の下端 offset は product theme の公開変数 --Toast-Viewport-Offset-Bottom（既定 1rem = 従来の bottom-4）で調整する。下部タブバー / FAB と重なるプロダクトは :root で持ち上げる。[data-slot=\"toast-viewport\"] を消費側 CSS から直接狙わない（issue #503）",
+        "viewport の左右の余白と最大幅は product theme 変数 --Toast-Viewport-Offset-X（既定 1rem）/ --Toast-Viewport-Max-Width（既定 24rem）、中央寄せは <Toaster position=\"bottom-center\"> / configureToast({ position: \"bottom-center\" })。[data-slot=\"toast-viewport\"] の left / right / max-width を !important で上書きしない（issue #691）"
       ],
       "props": {
         "Toaster.container": "Element | DocumentFragment | null — 明示先 > PortalContainerProvider > document.body。Shadow DOM 内では Toaster を明示配置する（issue #651）",
@@ -726,6 +752,42 @@
         "枠は var(--Border-Control, var(--Border-Medium-Emphasis))。通常 light/dark から3:1以上（light=Gray-500、dark=White-Alpha-500）。非操作区切りはMediumを維持し、prefers-contrast: more / data-contrast指定でも同じ専用値を使う（issue #636）"
       ]
     },
+    {
+      "name": "CodeInput",
+      "formBinding": "controller",
+      "path": "src/components/ui/code-input.tsx",
+      "description": "認証コード（OTP）・招待コードのような固定桁のコード入力（issue #669）。variant=cells は桁ごとのセル、variant=single は等幅・大きめ・字間広めの 1 入力（24 桁のような長いコード向け）。Input と同じ --Field-* / Border-Control トークンで枠・背景・フォーカス・エラーを表す。",
+      "variants": [
+        "cells",
+        "single"
+      ],
+      "props": {
+        "length": "number — 桁数",
+        "value / defaultValue / onChange": "string — 受け付けた文字だけを左詰めにした文字列",
+        "onComplete": "(value: string) => void — 全桁がそろった瞬間に 1 回",
+        "pattern": "\"numeric\"（既定）| \"alphanumeric\" | RegExp — 1 文字ずつ判定。受け付けない文字（空白・ハイフン等）は落とす",
+        "uppercase": "boolean — 英字を大文字にそろえる",
+        "variant": "\"cells\"（既定）| \"single\"",
+        "invalid": "boolean — aria-invalid と Caution の枠",
+        "cellLabel": "(index, length) => string — 各セルの読み上げ名（既定「n桁目（全m桁）」・i18n 用）",
+        "autoComplete": "string — 既定は cells の先頭セルが one-time-code、single は無し",
+        "name / id / aria-label / aria-labelledby / aria-describedby / autoFocus / disabled / placeholder / className": "フォーム・a11y 用。single は maxLength を付けず、ハイフン・空白入りの貼り付けも sanitize 後に length で切る"
+      },
+      "accessibility": [
+        "cells はグループ（role=group）に aria-label / aria-labelledby で名前を付け、各セルに「n桁目（全m桁）」の aria-label を持つ",
+        "autocomplete=\"one-time-code\" は cells の先頭セルの既定（autoComplete で上書き可）。single は既定で付けない（OTP を受けるなら autoComplete を渡す）。inputMode（numeric なら numeric）で数字キーボード",
+        "cells は roving tabindex（タブストップは次に入力すべきセル 1 つ）で、Tab / Shift+Tab でそのまま抜けられる（WCAG 2.1.2）。先の空セルへ寄せるのはクリック / タップ時だけで、キーボード / 支援技術のフォーカス移動は奪わない",
+        "cells でグループ名（aria-label / aria-labelledby）が無いと開発ビルドで 1 回 console.warn",
+        "invalid で各入力に aria-invalid",
+        "native は 1 つの TextInput をセルに重ねる方式（textContentType=oneTimeCode / autoComplete=sms-otp）で、accessibilityLabel と accessibilityValue（n / m 桁）を読む"
+      ],
+      "rules": [
+        "認証コード・招待コードは CodeInput を使う。Input に typo-heading-2xl / tracking-wider 等を被せてコード欄を自作しない",
+        "4〜8 桁の OTP は variant=cells、24 桁のような長いコードは variant=single",
+        "貼り付けで全桁が埋まる・Backspace で前の桁へ戻る・← → / Home / End で移動する挙動を consumer で再実装しない",
+        "見出しがある画面では aria-labelledby で結ぶ。cells の id は先頭セルに付くので <Label htmlFor> でも結べる"
+      ]
+    },
     {
       "name": "PillToggle",
       "path": "src/components/ui/pill-toggle.tsx",
@@ -907,7 +969,8 @@
       "description": "淡いアクセント背景の円に装飾アイコンを収めるバッジ。Card や Stack の gap と競合しないよう外側 margin を持たない。",
       "variants": [
         "size: md(44px) / ml(48px) / lg(72px)",
-        "appearance: accent / plain"
+        "appearance: accent / plain",
+        "tone: accent(既定) / info / success / warning / caution（issue #684）"
       ],
       "accessibility": [
         "装飾用途は既定で aria-hidden",
@@ -916,7 +979,8 @@
       "rules": [
         "外側 margin を追加せず、親の gap で配置間隔を管理する",
         "背景は Surface-Accent-Primary-Light、前景は Object-Accent-Primary と currentColor を使う",
-        "appearance=plain は既存パターン内部の視覚互換用途に限定する"
+        "appearance=plain は既存パターン内部の視覚互換用途に限定する",
+        "tone で情報・成功・注意・警告の色にする（面は Surface-*、アイコンは Object-*）。Surface-Info + Object-Info の円を自作しない。色だけで意味を伝えず、隣の見出し・本文で状態を言葉でも示す。native IconBadge も同名 tone（issue #684）"
       ]
     },
     {
@@ -938,7 +1002,9 @@
       "rules": [
         "bordered は白背景+カラー枠線",
         "inline は色付き背景・コンパクト",
-        "bordered variant (success/info/error/warning) は title/description prop で自動アイコン表示可"
+        "bordered variant (success/info/error/warning) は title/description prop で自動アイコン表示可",
+        "inline 系（inline-info / inline-caution / inline-warning）も title / description / icon / action の prop で書ける（issue #695。以前は children だけを描画し空の枠になった）。inline の既定アイコンは無し",
+        "children と title / description / icon / action を併用しない。併用時は children 優先で prop は描画されず、開発ビルドで警告する（issue #695）"
       ]
     },
     {
@@ -1322,6 +1388,41 @@
         "size": "number | string (Web), number (Native) — 既定24",
         "accessibilityLabel": "string — 単独の情報画像に付ける名前。Webはaria-labelを優先"
       }
+    },
+    {
+      "name": "EmojiIcon",
+      "path": "src/components/ui/emoji-icon.tsx",
+      "description": "絵文字をアイコンと同じ寸法の箱に収めて描く装飾（issue #676）。EmptyState / ErrorState / Alert / Banner の icon、ListItem の leftSlot、Toast など、アイコンを受けるスロットに絵文字を置くときに使う。",
+      "sizes": [
+        "sm(16)",
+        "md(24・既定)",
+        "lg(36)",
+        "xl(48)"
+      ],
+      "accessibility": [
+        "常に aria-hidden の装飾。意味は隣の見出し・本文で伝える",
+        "native (src/native/components/EmojiIcon.tsx): 同じ語彙・値。accessibilityElementsHidden / importantForAccessibility=no-hide-descendants"
+      ],
+      "rules": [
+        "アイコンスロットに絵文字を素の文字で渡して text-5xl 等の生サイズで拡大しない。EmojiIcon の size を使う",
+        "ActionTile は既存の emoji prop を使う"
+      ]
+    },
+    {
+      "name": "Highlight",
+      "path": "src/components/ui/highlight.tsx",
+      "description": "本文中の検索一致を <mark> で強調する（issue #692）。面は --Surface-Highlight、文字は --Text-on-Highlight（light / dark で AA）。",
+      "subcomponents": [
+        "splitHighlight"
+      ],
+      "accessibility": [
+        "<mark> は読み上げで強調として扱われる（SR により読み方は異なる）。本文の意味は変えない",
+        "native (src/native/components/Highlight.tsx): Text のネストで一致部分に面と文字色を重ねる"
+      ],
+      "rules": [
+        "検索一致の面に状態色（Surface-Warning / Object-Warning）を流用しない。--Surface-Highlight / --Text-on-Highlight を使う",
+        "検索語の正規表現の特殊文字は Highlight が文字としてエスケープする。consumer で RegExp を組まない"
+      ]
     }
   ],
   "patterns": [
@@ -1336,7 +1437,9 @@
         "caution"
       ],
       "rules": [
-        "Color + icon + text (never color alone)"
+        "Color + icon + text (never color alone)",
+        "density: default(gap-3 p-4) / compact(gap-2 px-3 py-2)。余白を詰めたいときは density=\"compact\"。`!p-2` 等の className で上書きしない（issue #683）",
+        "layout: card(既定・角丸の囲み) / bar(全幅・角丸なし・下線のみ)。画面上端の注意帯は layout=\"bar\" を使い、div で帯を自作しない（issue #683。native Banner は画像バナーで別 API のため Web のみ）"
       ]
     },
     {
@@ -1409,7 +1512,8 @@
       "description": "KPI / メトリクス表示カード。interactive prop で button 化、focus-ring / active:scale 自動付与。",
       "rules": [
         "interactive または onClick を渡せば role=button + キーボード操作対応",
-        "内側の label / value / unit / trend は stat-card-* data-slot を持つ（issue #650）"
+        "内側の label / value / unit / trend は stat-card-* data-slot を持つ（issue #650）",
+        "elevation: none / sm / md(既定)。Card・面の中に並べる StatCard は elevation=\"none\"。`!shadow-none` で消さない（issue #689。native StatCard は影を持たないため Web のみ）"
       ]
     },
     {
@@ -1445,6 +1549,7 @@
         "押せる行（href / onClick）の中に削除ボタン等の別操作を置く場合は secondaryAction を使う。rightSlot に button を入れると button の入れ子で不正な HTML になる",
         "secondaryAction 指定時はルートが div になり、行全体を覆う不可視の a/button（stretched link）+ 副アクションの兄弟配置に切り替わる",
         "バッジ・日時・シェブロンなど押せない表示は secondaryAction ではなく rightSlot",
+        "rightSlot に長い値（金額・件数）を置くときは rightSlotWidth（auto | narrow=1/3 | wide=1/2）で上限を付け、title 列を潰さない(issue #668)。任意の上限・調整は rightSlotClassName / leftSlotClassName。[&>div:last-child] 等の子孫セレクタで DS 内部の DOM に依存しない。native は trailingWidth / trailingStyle",
         "Native: titleTone / descriptionTone は default | accent | caution（既定 default）。文字列にのみ DS typography と semantic text 色を適用し、ReactNode は従来通り無加工。divider は none（既定）| inset | full。inset は density の左右 padding に追随し、leading 幅は含めない。footerSlot がある場合も行全体の下端。外置き Separator の full-bleed 既定は変更しない。"
       ]
     },
@@ -1611,10 +1716,12 @@
         "duplicates-control"
       ],
       "rules": [
-        "Use for multi-value text input (tags, emails, keywords)"
+        "Use for multi-value text input (tags, emails, keywords)",
+        "FormField と使うときは id を渡して htmlFor で結ぶ。inputLabel を label の代わりに使わない（lint P026 の例外が要らなくなる）"
       ],
       "accessibility": [
-        "枠は var(--Border-Control, var(--Border-Medium-Emphasis))。通常 light/dark から3:1以上（light=Gray-500、dark=White-Alpha-500）。非操作区切りはMediumを維持し、prefers-contrast: more / data-contrast指定でも同じ専用値を使う（issue #636）"
+        "枠は var(--Border-Control, var(--Border-Medium-Emphasis))。通常 light/dark から3:1以上（light=Gray-500、dark=White-Alpha-500）。非操作区切りはMediumを維持し、prefers-contrast: more / data-contrast指定でも同じ専用値を使う（issue #636）",
+        "id / name / aria-labelledby / aria-describedby / aria-invalid を内部 input へ転送する。`<FormField htmlFor={id}>` の子に置くと label が名前になり、説明・エラーが自動で結ばれる。id か aria-labelledby があり inputLabel を明示しないときは aria-label を付けない（issue #693）"
       ]
     },
     {
@@ -1731,7 +1838,8 @@
       "rules": [
         "SheetContent 内で使い、Sheet の autoFocus=false と組み合わせる",
         "KebabMenu は DetailSheetHeader trailing に置く",
-        "editable title は titleEditor slot に置く"
+        "editable title は titleEditor slot に置く",
+        "DetailSheetHeader の titleEditor には <CommitInput variant=\"inline-title\" aria-label=… /> を渡す（issue #675）"
       ]
     },
     {
@@ -1825,7 +1933,8 @@
         "単一選択で選択中の値が 2 つ以上あると開発ビルドで console.warn する(issue #39 の footgun 検出)",
         "Use selectionMode=\"single\" for single-select (multiple=false は非推奨). Use max to limit selection count.",
         "Do not patch selected flicker in consumer CSS; Chip handles Android tap highlight and touch transition behavior.",
-        "PillToggle は 2〜4 択の segmented control 専用。5択以上・折り返しが要る単一選択はこの selectionMode=\"single\" を使う(issue #418)。"
+        "PillToggle は 2〜4 択の segmented control 専用。5択以上・折り返しが要る単一選択はこの selectionMode=\"single\" を使う(issue #418)。",
+        "グループ名は aria-labelledby（見出しの id）か aria-label で渡す(issue #666)。単一選択の radiogroup は名前が必須で、どちらも無いと開発ビルドで console.warn する。id / aria-describedby もルートへ渡せる。native は accessibilityLabel / accessibilityLabelledBy"
       ]
     },
     {
@@ -1864,7 +1973,8 @@
         "commerce/FilterBar（filters/sortOptions 統合型）とは別コンポーネント。children に任意の Chip 群を渡すシンプルなラッパー。",
         "sticky 時の top オフセットは stickyOffset prop で指定する（固定ヘッダー高さの相殺用）。",
         "resultCountLabel 未指定時は \"{n}件\" を表示。i18n が必要な場合は関数 props で差し替える。",
-        "bare=true 時は overflow/padding ラッパーを付けない。外側スクロールコンテナと共有する場合に使う。"
+        "bare=true 時は overflow/padding ラッパーを付けない。外側スクロールコンテナと共有する場合に使う。",
+        "チップ列と件数の左右余白は gutter（none | tight=16px | default=24px・Container と同じ語彙）か contentClassName で付ける(issue #667)。sticky の背景は全幅のまま。外側 className に px-* を付けたり [&>div]: 等の子孫セレクタで DS 内部の DOM に依存したりしない。native も gutter を持つ"
       ]
     },
     {
@@ -1902,13 +2012,15 @@
         "illustration-slot",
         "iso-string-or-date-target",
         "date-label-slot",
-        "today-value-override"
+        "today-value-override",
+        "pressable"
       ],
       "rules": [
         "既存の CountdownTimer（残日数ピル表示）とは別コンポーネント。装飾ヒーロー表示専用で置き換えない。",
         "日付編集フォームは持ち込まない。表示専用コンポーネント。",
         "illustration スロットに wedding 画像等のドメイン固有アセットを直接埋め込まない。呼び出し側が用意する。",
-        "serif フォントは --font-display-serif トークン未定義環境向けに Georgia / Noto Serif JP / serif へフォールバックする。"
+        "serif フォントは --font-display-serif トークン未定義環境向けに Georgia / Noto Serif JP / serif へフォールバックする。",
+        "押せるヒーローは onClick（ボタン）/ href（リンク）を渡す(issue #672)。全面を覆う不可視の button / a を重ねる stretched link 構造で、Enter / Space・フォーカスリング・押下表現（押している間 opacity-70）を DS が持つ。名前は既定で表示中の文言、操作の意味を足すなら aria-label。呼び出し側で <Button unstyled> に包んだり active:opacity-* を足したりしない。native は onPress / accessibilityLabel / disabled"
       ]
     },
     {
@@ -2029,7 +2141,10 @@
         "providers を渡すと明示順で表示",
         "region=jp は line/x/copy、region=us は whatsapp/x/copy を既定にする",
         "provider 別の計測には onShare(provider) を使う。コピー結果の計測には onCopy(result) を使う",
-        "Clipboard API が利用不可または拒否された場合も copyErrorLabel を通知する"
+        "Clipboard API が利用不可または拒否された場合も copyErrorLabel を通知する",
+        "任意の本文（招待コード入りの案内文など）は message（native と同名）。LINE は line.me/R/share?text= に「message + url」、X / Telegram は text に message、WhatsApp / メールは「message + url」を渡す。copy は url のまま（issue #685）",
+        "共有が画面の主操作のとき（招待シート等）は layout=\"block\"（全幅・Control-Height-Lg の主ボタンを縦に積む）。LINE は --Brand-Line の塗り + --Brand-on-Line（黒。白文字は約 2.2:1 で AA 未達）、hover / 押下は --Brand-Line-Hover / --Brand-Line-Pressed。LINE ボタンや --External-LINE* を consumer で自作しない（issue #685）",
+        "表示ラベル・アクセシブルネームの上書きは labels（例: { line: \"LINE で招待を送る\" }）"
       ],
       "props": {
         "groupLabel": "string (既定 \"シェア\") — role=\"group\" 全体ラッパーの aria-label（issue #428）"
@@ -2479,7 +2594,9 @@
         "設定画面で SectionHeader + Card + ListItem の wrapper を consumer 側に作らない",
         "設定一覧で ad-hoc flex row を作らず SettingsListRow を使う",
         "switch / badge / button は rightSlot に置く",
-        "danger variant は削除・ログアウトなど不可逆操作のグループに限定する"
+        "danger variant は削除・ログアウトなど不可逆操作のグループに限定する",
+        "見出しアイコンは SettingsSection の icon（見出しの左・aria-hidden・20px・Object-Medium-Emphasis）。title を span で包んでアイコンを並べない（issue #690）",
+        "次の画面へ進む行は SettingsListRow の showChevron（右端・ArrowRight2 16px・Object-Low-Emphasis・aria-hidden）。矢印を手書きしない。トグル等その場で完結する行には付けない。native も同名（issue #690）"
       ],
       "subcomponents": [
         "SettingsSection",
@@ -2505,7 +2622,8 @@
       ],
       "rules": [
         "BottomTabBar + MobileFloatingActionButton の geometry を consumer CSS で手組みしない",
-        "既に fixed な nav を渡す場合は bottomNavMode=external を使う"
+        "既に fixed な nav を渡す場合は bottomNavMode=external を使う",
+        "bottomPaddingExtra（CSS の長さ）は bottomPadding の既定余白（bottom-nav=5rem / bottom-nav-fab=7rem / none=0）に加算する。広告バナー等の常設要素の高さを渡し、main の下余白を mainClassName で自前計算しない（issue #681）"
       ]
     },
     {
@@ -2527,7 +2645,8 @@
         "モバイルの BottomTabBar と同じ items 配列を渡す",
         "ページ内アンカーの目次は SectionNav、ビュー状態の切替は SubNav を使う",
         "ロゴ行・フッターは部品に含めず slot 側で並べる",
-        "next/link 等のルーターで描画するときは項目ごとの render（Footer・AppHeader と同じレンダースロット）を使う。渡された props（className・aria-current・data-*・children・onClick）をそのまま転送すること。未指定は従来どおり <a>（href あり）/ <button>"
+        "next/link 等のルーターで描画するときは項目ごとの render（Footer・AppHeader と同じレンダースロット）を使う。渡された props（className・aria-current・data-*・children・onClick）をそのまま転送すること。未指定は従来どおり <a>（href あり）/ <button>",
+        "暗い面（Surface-Inverse）のサイドバーでは tone=\"inverse\"。文字は Text-on-Inverse-Secondary、hover / 選択中は Object-on-Inverse の淡い面 + Text-on-Inverse。暗色ナビを Button unstyled で自作しない（issue #680）"
       ]
     },
     {
@@ -2571,7 +2690,7 @@
       "name": "QuickActionGrid / ActionTile",
       "exported": false,
       "path": "src/components/patterns/quick-action-grid.tsx",
-      "description": "ショートカット/絵文字 action の button tile と grid。icon/emoji、label、description、meta、indicator、selected/disabled/loading state、2/3/4 column または auto-fit を持つ。",
+      "description": "ショートカット/絵文字 action の button tile と grid。icon/emoji、media（大きな画像・イラスト・色見本）、label、description、meta、indicator、selected/disabled/loading state、2/3/4 column または auto-fit を持つ。",
       "variants": [
         "neutral",
         "selected",
@@ -2601,12 +2720,102 @@
         "meta はカード下段右端の補足情報専用。選択インジケータには indicator prop を使う(issue #309)",
         "indicator はラベル行右端(loading 時 Spinner の位置)に表示。省略時は選択状態でDS標準チェックが既定表示される。null/undefined/falseはいずれも「指定なし」として扱われ、選択中なら既定チェックへフォールバックする",
         "loading は indicator / 既定チェックより優先して表示される",
-        "native では indicator に文字列・数値を渡してもよい(DS 側が Text にラップする)。それ以外の ReactNode はそのまま描画されるため、consumer が Text 相当で包む"
+        "native では indicator に文字列・数値を渡してもよい(DS 側が Text にラップする)。それ以外の ReactNode はそのまま描画されるため、consumer が Text 相当で包む",
+        "大きな画像・イラスト・色見本は media に渡す(issue #670)。mediaPosition: top(既定・ラベル行の上中央) / start(ラベル行の左) / end(タイル右側)、mediaSize: sm=40px / md=64px(既定) / lg=128px。正方形のまま狭いタイル(columns=auto)に収まり、選択チェックと重ならない。media は装飾扱い(aria-hidden)で意味はラベルで伝える。icon に大きな div を渡して 24px 枠を崩したり、Button unstyled でタイルを自作したりしない。native も同名 props"
       ],
       "subcomponents": [
         "QuickActionGrid",
         "ActionTile"
       ]
+    },
+    {
+      "name": "AddTile",
+      "path": "src/components/patterns/add-tile.tsx",
+      "description": "一覧の末尾・空のカラム・グリッドの空き枠に置く「＋追加」の点線タイル（issue #678）。押すと新しい項目を作る入口。",
+      "sizes": [
+        "sm(44px・一覧の末尾)",
+        "md(64px・既定・空カラム / グリッドの空き枠)"
+      ],
+      "accessibility": [
+        "type=button の実 button。label がアクセシブルネーム、アイコンは aria-hidden",
+        "高さ 44px 以上・focus-visible リング",
+        "native (src/native/components/AddTile.tsx): accessibilityRole=button / accessibilityLabel=label / accessibilityState.disabled"
+      ],
+      "rules": [
+        "Button に border-dashed や形を上書きして「追加」タイルを自作しない",
+        "画面の主操作（ヘッダーの作成・FAB）の代わりにしない。「この場所に足す」入口に限る",
+        "点線は Border-Medium-Emphasis、hover は Border-Accent-Primary + Surface-Accent-Primary-Light + Text-Accent-Primary"
+      ]
+    },
+    {
+      "name": "CodeDisplay",
+      "path": "src/components/patterns/code-display.tsx",
+      "description": "招待コード・ログインコード・クーポン等の英数字コードを等幅・広めの字間で見せ、ワンタップでコピーする（issue #686）。入力させる側は CodeInput。",
+      "sizes": [
+        "md(typo-heading-lg・既定)",
+        "lg(typo-heading-2xl)"
+      ],
+      "variants": [
+        "tone: neutral(Surface-Secondary・既定) / accent(Surface-Accent-Primary-Light)"
+      ],
+      "accessibility": [
+        "コピー結果はボタンの文言とアイコンで示し、aria-live=polite で読み上げる（色だけで伝えない）",
+        "native (src/native/components/CodeDisplay.tsx): コードは selectable。RN コアにクリップボードが無いため onCopy（expo-clipboard 等）を渡したときだけコピーボタンを出す"
+      ],
+      "rules": [
+        "font-mono / tracking-* を consumer で指定してコード表示を自作しない",
+        "長いコードは break-all で折り返す。横スクロールさせない",
+        "コピーの成否はトーストではなくボタン上で即時に示す（onCopy で計測・トーストを足すのは可）"
+      ]
+    },
+    {
+      "name": "FeatureComparisonTable",
+      "path": "src/components/patterns/feature-comparison-table.tsx",
+      "description": "プラン（Free / Plus 等）の機能比較表（issue #687）。列ごとの可否（✓ / —）や値を <table> と th scope で意味付きで出す。",
+      "accessibility": [
+        "<table> + sr-only の caption + 列見出し th[scope=col] + 行見出し th[scope=row]",
+        "✓ / — は aria-hidden の装飾で、availableLabel / unavailableLabel（既定「利用できる」「利用できない」）を sr-only で持つ",
+        "native (src/native/components/FeatureComparisonTable.tsx): 表のセマンティクスが無いため各行を 1 つの読み上げ要素（「機能名、Free 利用できない、Plus 利用できる」）にまとめる"
+      ],
+      "rules": [
+        "div grid + アイコンだけで比較表を自作しない（読み上げで可否が分からない）",
+        "列は 2〜3 を想定。推奨プランは highlight（Surface-Accent-Primary-Light + Text-Accent-Primary の見出し）",
+        "値が無いセル（undefined）は false（利用できない）として扱う"
+      ]
+    },
+    {
+      "name": "MonthCalendar",
+      "path": "src/components/patterns/month-calendar.tsx",
+      "description": "予定付きの月カレンダー（issue #679）。日ごとの予定を一覧する予定表（日付を選ぶ入力は Calendar / DatePicker）。今日・選択日・土日・月外セル・予定チップ・「+n件」の見た目を DS が持つ。",
+      "subcomponents": [
+        "buildMonthWeeks"
+      ],
+      "accessibility": [
+        "WAI-ARIA grid パターン: role=grid / row / columnheader / gridcell、タブストップは 1 つ（roving tabindex。選択日 → 今日 → 1 日）",
+        "← → ↑ ↓ で 1 日 / 1 週、Home / End で週の端、PageUp / PageDown で前後の月（onMonthChange 指定時）、Enter / Space で onSelectDay",
+        "セルの読み上げ名に日付・今日・予定件数と予定名を含める。予定チップと「+n件」はポインタ用の近道（tabIndex=-1）で、キーボードは日の選択から詳細へ辿る"
+      ],
+      "rules": [
+        "日のセル・予定チップを Button unstyled で自作しない",
+        "あふれは maxEventsPerDay（既定 2）超を「+n件」にまとめ、onShowMore（既定 onSelectDay）でその日の詳細へ",
+        "md（768px）未満はチップの代わりに色ドット（最大 3）を出す。操作は日の選択に一本化する",
+        "土日の色は weekendTone（既定 true。日曜 Text-Caution / 土曜 Text-Accent-Primary・Calendar と同じ語彙）",
+        "native は未提供（INTENTIONAL_NATIVE_GAPS）"
+      ]
+    },
+    {
+      "name": "KanbanColumn",
+      "path": "src/components/patterns/kanban-column.tsx",
+      "description": "カンバンの列の入れ物（issue #679）。見出し（色ドット + title + 件数 + action）・カードを縦に積む本体・footer（AddTile 等）。",
+      "accessibility": [
+        "見出し（h3）で名前の付いた section。件数は見出しの読み上げに「（n件）」で含め、見た目の件数バッジは aria-hidden"
+      ],
+      "rules": [
+        "列の上辺に太い色帯を付けない。状態は tone の色ドットと見出しの言葉で示す",
+        "中のカードは Card elevation=\"none\"（面の中の面は影なし）",
+        "ドラッグ＆ドロップは持たない。consumer のライブラリで包む",
+        "native は未提供（INTENTIONAL_NATIVE_GAPS）"
+      ]
     }
   ],
   "commerce": [
@@ -2745,7 +2954,8 @@
         "消費側は 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 は契約外で固定。"
+        "--Nav-Pill-* の寸法が効くのは prominent レイアウト（showLabels か centerAction がある pill）。アイコンのみの compact pill は契約外で固定。",
+        "bottomOffsetExtra（CSS の長さ）は safe-area・pill の 12px・lift の持ち上げ量に加算される。className の bottom-* で位置を上書きしない（issue #681）"
       ],
       "props": {
         "navLabel": "string (既定 \"メインナビゲーション\") — nav 要素の aria-label（issue #428）"
@@ -2783,7 +2993,9 @@
         "addAction 指定時はブランド色丸背景 + Add アイコンが自動で centerAction になる",
         "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）"
+        "[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）"
       ],
       "productTheme": [
         "--Nav-Pill-*",
@@ -2980,7 +3192,8 @@
       "rules": [
         "For admin/dashboard pages",
         "mainId は同一ページ内で一意にする。skipLink=false で内蔵 SkipLink を無効化できる",
-        "header と main の既定 gutter は内蔵 Container が担うためページ側で外周 padding を重ねない"
+        "header と main の既定 gutter は内蔵 Container が担うためページ側で外周 padding を重ねない",
+        "暗色サイドバーは sidebarTone=\"inverse\"（aside を Surface-Inverse にする）。中のナビは SidebarNav tone=\"inverse\"、ロゴ・フッターの文字も Text-on-Inverse 系にする（issue #680）"
       ]
     },
     {