ksk-design-system 2.1.0 → 2.2.0

package/AGENTS.md

@@ -56,6 +56,16 @@ UI を書く前に必ず確認すること:
 
 ---
 
+## DS公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## このDSについて
 
 **KSK Design System** は、フリーランスデザイナー / エンジニア / PdM が **複数クライアント案件を1つのDSで高速に回す** ために設計された統合デザインシステムです。

package/CLAUDE.md

@@ -163,6 +163,16 @@ afterEach フックが全ストーリー（tags フィルタなし）に対し
 
 ---
 
+## DS公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## このDSについて
 
 **KSK Design System** は、フリーランスデザイナー / エンジニア / PdM が **複数クライアント案件を1つのDSで高速に回す** ために設計された統合デザインシステムです。

package/NATIVE_RECIPES.md

@@ -182,6 +182,8 @@ import { Button, PhotoHero, Screen } from "ksk-design-system/native/ui"
 
 Web では `CompactFilePicker` / `ImageAttachmentPicker` が hidden file input、trigger、preview、remove affordance を持ちます。Native では DocumentPicker / ImagePicker の起動だけ consumer が渡し、trigger と preview は DS が持ちます。
 
+`loadingLabel`（loading 中にボタンへ表示する文言）は web の既定が `"処理中"` なのに対し、native には既定値が無く、未指定時は native Button の spinner のみが表示されます（issue #539。web/native で意図的に非対称）。
+
 ```tsx
 <ImageAttachmentPicker
   multiple

package/PUBLISHING.md

@@ -244,6 +244,16 @@ publish.yml が失敗・スタックした場合の実行可能な手順は次
 それでも解消しない場合は、npm 側の障害か Trusted Publishing 設定（npmjs.com の
 Trusted Publisher 登録）を疑い、対応後に再度 workflow_dispatch で実行する。
 
+## 依頼元appへの公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## 関連
 
 - [UPDATING.md](./UPDATING.md) — 消費側（DS を npm 依存に持つプロジェクト）向けのアップデート手順

package/README.md

@@ -474,6 +474,16 @@ npm run metrics -- --range last-year
 
 > npm は匿名集計のため、CI やミラーの重複を含む **install 回数の目安** です（ユニークユーザー数ではありません）。
 
+## DS公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## 📄 ライセンス
 
 [MIT](./LICENSE) © 奥野圭祐 (Keisuke Okuno)

package/RELEASE.md

@@ -74,6 +74,10 @@ GitHub Release の作成をスキップしてしまう。そのため:
 ローカルから `npm publish` を直接叩く経路は廃止した（publish.yml への一本化。
 下記参照）。
 
+## 未公開の修正
+
+- [#529](https://github.com/ekusiek716/ksk-design-system/issues/529): native Dialog のダークモードで、中央・上寄せの確認面が背景と同化する問題を修正。パネルに `surface.secondary` を使い、余白と角丸を見分けられるようにする。light・fullscreen の背景、寸法、safe-area は維持。公開後に利用アプリへ取り込み、実機で確認する。
+
 ## ホットフィックス履歴
 
 | 日付 | バージョン | 内容 | 影響 |

package/bin/consumer-release-notices.js

@@ -0,0 +1,138 @@
+import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs"
+import { join, relative, resolve } from "node:path"
+import { spawnSync } from "node:child_process"
+import { parseConsumerIssue, validateContract } from "../templates/consumer-release-notices/check-ds-release.mjs"
+
+function positiveInt(value, name) {
+  if (!/^[1-9]\d*$/.test(String(value)) || !Number.isSafeInteger(Number(value))) {
+    throw new Error(`${name} must be a positive safe integer`)
+  }
+  return Number(value)
+}
+
+function issueUrl(value) {
+  if (typeof value !== "string" || /\s/.test(value)) throw new Error("consumer-issue must be a GitHub issue URL without whitespace")
+  const canonical = value.toLowerCase()
+  parseConsumerIssue(canonical)
+  return canonical
+}
+
+function statOrNull(path) {
+  try { return lstatSync(path) } catch (error) {
+    if (error.code === "ENOENT") return null
+    throw error
+  }
+}
+
+function safePath(root, path) {
+  let current = root
+  const parts = relative(root, path).split(/[\\/]/)
+  for (const [index, part] of parts.entries()) {
+    current = join(current, part)
+    const stat = statOrNull(current)
+    if (stat?.isSymbolicLink()) throw new Error(`Symlink is not allowed: ${current}`)
+    if (stat && index < parts.length - 1 && !stat.isDirectory()) throw new Error(`Not a directory: ${current}`)
+  }
+}
+
+export function validateConsumerRequests(registry) {
+  validateContract(registry)
+  for (const request of registry.requests) issueUrl(request.consumerIssue)
+  return registry
+}
+
+function github(runGh) {
+  return (endpoint, method = "GET", fields = {}, paginate = false) => {
+    const args = ["api", "--hostname", "github.com", endpoint, "--method", method]
+    if (paginate) args.push("--paginate", "--slurp")
+    for (const [key, value] of Object.entries(fields)) args.push("-f", `${key}=${value}`)
+    const result = runGh("gh", args, { encoding: "utf8", timeout: 30000, maxBuffer: 8 * 1024 * 1024 })
+    // Do not echo gh stderr: it may include credentials or private response details.
+    if (result.error || result.status !== 0) throw new Error(`GitHub ${method} failed: ${endpoint}. Check gh authentication/permissions and retry the same command.`)
+    try { return JSON.parse(result.stdout) } catch { throw new Error(`Invalid GitHub response: ${endpoint}`) }
+  }
+}
+
+function readIssue(api, repo, number) {
+  const issue = api(`repos/${repo}/issues/${number}`)
+  if (!issue || issue.pull_request || issue.number !== number ||
+      typeof issue.html_url !== "string" || issueUrl(issue.html_url) !== `https://github.com/${repo}/issues/${number}` ||
+      !["open", "closed"].includes(issue.state)) throw new Error(`Expected a regular issue: ${repo}#${number}`)
+  return issue
+}
+
+function ensureWaiting(api, repo, number) {
+  // Re-read after writing the registry so a retry cannot downgrade released/closed work.
+  const issue = readIssue(api, repo, number)
+  if (issue.state === "closed") return
+  const pages = api(`repos/${repo}/issues/${number}/labels?per_page=100`, "GET", {}, true)
+  if (!Array.isArray(pages) || pages.some((page) => !Array.isArray(page))) throw new Error("Invalid issue label response")
+  const labels = pages.flat()
+  if (labels.some((label) => typeof label?.name !== "string")) throw new Error("Invalid issue label response")
+  if (labels.some((label) => ["ds:released", "ds:waiting"].includes(label.name.toLowerCase()))) return
+  const endpoint = `repos/${repo}/labels/ds%3Awaiting`
+  try { api(endpoint) } catch {
+    try { api(`repos/${repo}/labels`, "POST", { name: "ds:waiting", color: "fbca04", description: "DS修正版の公開待ち" }) }
+    catch { api(endpoint) } // Another registration may have created the label concurrently.
+  }
+  api(`repos/${repo}/issues/${number}/labels`, "POST", { "labels[]": "ds:waiting" })
+  console.log(`Ensured ds:waiting on ${repo}#${number}`)
+}
+
+function register(args, cwd, runGh) {
+  const options = new Map()
+  for (let i = 0; i < args.length; i++) {
+    const key = args[i]
+    if (!["--ds-issue", "--consumer-issue", "--fix-pr", "--dry-run"].includes(key) || options.has(key)) throw new Error(`Unknown or duplicate option: ${key}`)
+    if (key === "--dry-run") options.set(key, true)
+    else {
+      const value = args[++i]
+      if (!value || value.startsWith("--")) throw new Error(`Missing value: ${key}`)
+      options.set(key, value)
+    }
+  }
+  const dsIssue = positiveInt(options.get("--ds-issue"), "ds-issue")
+  const consumerIssue = issueUrl(options.get("--consumer-issue"))
+  const fixPr = options.has("--fix-pr") ? positiveInt(options.get("--fix-pr"), "fix-pr") : undefined
+  const packagePath = join(cwd, "package.json")
+  const contracts = join(cwd, "contracts")
+  safePath(cwd, packagePath)
+  safePath(cwd, contracts)
+  if (!existsSync(join(cwd, ".git")) || !statOrNull(contracts)?.isDirectory() ||
+      !existsSync(packagePath) || JSON.parse(readFileSync(packagePath, "utf8")).name !== "ksk-design-system") {
+    throw new Error("Run registration at the DS source repo root (ksk-design-system + .git + contracts/), never in a consumer")
+  }
+  const path = join(contracts, "consumer-requests.json")
+  safePath(cwd, path)
+  const before = existsSync(path) ? readFileSync(path, "utf8") : null
+  const registry = before === null ? { schemaVersion: 1, requests: [] } : JSON.parse(before)
+  validateConsumerRequests(registry)
+  const existing = registry.requests.find((request) => request.dsIssue === dsIssue && issueUrl(request.consumerIssue) === consumerIssue)
+  if (existing) {
+    existing.consumerIssue = consumerIssue
+    if (fixPr !== undefined) existing.fixPr = fixPr
+  } else registry.requests.push({ dsIssue, consumerIssue, fixPr: fixPr ?? null })
+  const after = JSON.stringify(registry, null, 2) + "\n"
+  if (options.has("--dry-run")) { console.log(after.trimEnd()); return }
+  const api = github(runGh)
+  const target = parseConsumerIssue(consumerIssue)
+  readIssue(api, "ekusiek716/ksk-design-system", dsIssue)
+  readIssue(api, target.repo, target.number)
+  if (before === null || JSON.stringify(JSON.parse(before)) !== JSON.stringify(registry)) {
+    writeFileSync(path, after)
+    console.log(`Updated ${path}`)
+  } else console.log("Consumer request already registered (no-op)")
+  ensureWaiting(api, target.repo, target.number)
+}
+
+export function runConsumerReleaseNoticesCli(command, args, { cwd, runGh = spawnSync }) {
+  try {
+    if (command === "register-consumer-request") register(args, resolve(cwd), runGh)
+    else if (command === "init-release-notices") throw new Error("init-release-notices is retired: remove the consumer polling workflow/script. Release notices run only during the DS bulk bump (scripts/update-consumers.sh).")
+    else throw new Error(`Unknown command: ${command}`)
+    return 0
+  } catch (error) {
+    console.error(`[ksk-ds ${command}] ${error.message}`)
+    return 1
+  }
+}

package/bin/init.js

@@ -59,6 +59,9 @@ if (cmd === "help" || cmd === "--help" || cmd === "-h") {
 使い方:
   npx ksk-design-system init          AI ルールファイルを設置
   npx ksk-design-system init --force  既存ファイルを上書き
+  npx ksk-ds register-consumer-request --ds-issue N --consumer-issue URL [--fix-pr N] [--dry-run]
+                                     DS依頼を登録しapp issueへds:waitingを付与（gh認証使用）
+  npx ksk-ds init-release-notices     廃止済み。一括bump時の公開通知へ移行
   npx ksk-design-system demo [dir]    DS リポを clone + npm install（お試し）
                                       dir 省略時は ./ksk-ds-demo
   npx ksk-ds lint src                 DS-first ルール違反を検査
@@ -75,6 +78,11 @@ if (cmd === "help" || cmd === "--help" || cmd === "-h") {
   await exitWith(0)
 }
 
+if (cmd === "register-consumer-request" || cmd === "init-release-notices") {
+  const { runConsumerReleaseNoticesCli } = await import("./consumer-release-notices.js")
+  await exitWith(runConsumerReleaseNoticesCli(cmd, args.slice(1), { cwd: process.cwd(), pkgRoot }))
+}
+
 if (cmd === "lint") {
   const { runLintCli } = await import("./lint.js")
   const status = await runLintCli(args.slice(1), { cwd: process.cwd(), pkgRoot })

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -1657,10 +1657,14 @@
         "compactStatus",
         "actions"
       ],
+      "props": {
+        "verticalAlignment": "\"center\" | \"top\" (既定 \"center\") — ヘッダー行の縦位置。複数行 brand で status/actions が中央へ下がるのを防ぐ。top でも status/actions 内部は中央揃えのまま（native と同仕様。issue #536）"
+      },
       "rules": [
         "ブランド/ロゴは brand slot に置く",
         "長い同期状態は status と compactStatus の両方を渡す",
-        "右側 actions のために brand に flex-shrink をかけない"
+        "右側 actions のために brand に flex-shrink をかけない",
+        "複数行になり得る brand を使うときは verticalAlignment=\"top\" を検討する（既定は上下中央）"
       ]
     },
     {
@@ -2380,9 +2384,13 @@
         "grid",
         "list"
       ],
+      "props": {
+        "loadingLabel": "ReactNode (既定 \"処理中\") — loading 時にボタンへ表示する文言。i18n対応（issue #539）。native は既定値を持たず、未指定時は native Button の spinner のみを表示する（web/native で意図的に非対称。scripts/check-native-parity.mjs の INTENTIONAL_DEFAULT_GAPS 参照）"
+      },
       "accessibility": [
         "img alt",
-        "remove button aria-label"
+        "remove button aria-label",
+        "aria-busy on trigger button while loading（テスト/自動化向けの状態フック。loading 中はボタン自体が disabled になるため、スクリーンリーダーへの読み上げ効果は限定的）"
       ],
       "rules": [
         "consumer 側で hidden input + Button trigger を重複実装しない",

package/contracts/consumer-requests.json

@@ -0,0 +1,10 @@
+{
+  "schemaVersion": 1,
+  "requests": [
+    {
+      "dsIssue": 531,
+      "consumerIssue": "https://github.com/ekusiek716/trip-todo/issues/168",
+      "fixPr": 532
+    }
+  ]
+}

package/contracts/token-hex-cache.json

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

package/dist/index.js

@@ -8474,7 +8474,7 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 		let e = 0, n = 0, r = () => {
 			let t = Array.from(_.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]")).find((e) => e.tabIndex >= 0);
 			if (t) {
-				t.focus();
+				t.focus({ preventScroll: !0 });
 				return;
 			}
 			n++ < 5 && (e = requestAnimationFrame(r));
@@ -8538,7 +8538,7 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 			trapped: !0,
 			loop: !0,
 			onMountAutoFocus: (e) => {
-				c || (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.focus());
+				c || (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.focus({ preventScroll: !0 }));
 			},
 			onUnmountAutoFocus: (e) => {
 				l || e.preventDefault();
@@ -8579,9 +8579,9 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 							className: "fixed pointer-events-none",
 							style: D && h ? {
 								top: h.top,
-								left: h.left + h.width / 2,
-								width: 1,
-								height: 1
+								left: h.left,
+								width: h.width,
+								height: h.height
 							} : {
 								top: "50%",
 								left: "50%"
@@ -12983,13 +12983,13 @@ function xf({ className: e, label: t, icon: n, showLabel: r = !1, placement: i =
 }
 //#endregion
 //#region src/components/patterns/mobile-app-header.tsx
-function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, actions: a, sticky: o = !0, bordered: s = !0, landmark: c = !0, children: l, ...u }) {
+function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, actions: a, sticky: o = !0, bordered: s = !0, landmark: c = !0, verticalAlignment: l = "center", children: u, ...d }) {
 	return /* @__PURE__ */ V(c ? "header" : "div", {
 		"data-slot": "mobile-app-header",
 		className: G("bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)]", o && "sticky top-0 z-[var(--Z-Nav)]", s && "border-b border-[var(--Border-Low-Emphasis)]", e),
-		...u,
+		...d,
 		children: [/* @__PURE__ */ V("div", {
-			className: "flex min-h-14 items-center gap-2 px-4",
+			className: G("flex min-h-14 gap-2 px-4", l === "top" ? "items-start" : "items-center"),
 			children: [
 				n && /* @__PURE__ */ B("div", {
 					"data-slot": "mobile-app-header-leading",
@@ -13020,7 +13020,7 @@ function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, a
 					]
 				})
 			]
-		}), l]
+		}), u]
 	});
 }
 //#endregion
@@ -16172,35 +16172,35 @@ function Nm({ accept: e, maxSize: t, multiple: n = !1, maxFiles: r = 10, onUploa
 }
 //#endregion
 //#region src/components/patterns/compact-file-picker.tsx
-function Pm({ className: e, inputClassName: t, label: n = "ファイル", description: r, triggerLabel: i = "選択する", icon: a, loading: o = !1, disabled: s, id: c, multiple: l, onFilesChange: d, ...f }) {
-	let p = u.useId(), m = c ?? p, h = u.useRef(null), g = s || o;
+function Pm({ className: e, inputClassName: t, label: n = "ファイル", description: r, triggerLabel: i = "選択する", loadingLabel: a = "処理中", icon: o, loading: s = !1, disabled: c, id: l, multiple: d, onFilesChange: f, ...p }) {
+	let m = u.useId(), h = l ?? m, g = u.useRef(null), _ = c || s;
 	return /* @__PURE__ */ V("div", {
 		"data-slot": "compact-file-picker",
 		className: G("flex items-center gap-3", e),
 		children: [
 			/* @__PURE__ */ B("input", {
-				...f,
-				ref: h,
-				id: m,
+				...p,
+				ref: g,
+				id: h,
 				type: "file",
-				multiple: l,
-				disabled: g,
+				multiple: d,
+				disabled: _,
 				className: G("sr-only", t),
 				onChange: (e) => {
 					let t = Array.from(e.currentTarget.files ?? []);
-					d?.(t), e.currentTarget.value = "";
+					f?.(t), e.currentTarget.value = "";
 				}
 			}),
 			/* @__PURE__ */ V("div", {
 				className: "flex min-w-0 flex-1 items-center gap-3",
 				children: [/* @__PURE__ */ B("span", {
 					className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-[var(--Surface-Secondary)] text-[var(--Object-Medium-Emphasis)]",
-					children: a ?? /* @__PURE__ */ B(se, {
+					children: o ?? /* @__PURE__ */ B(se, {
 						size: 20,
 						"aria-hidden": !0
 					})
 				}), /* @__PURE__ */ V("label", {
-					htmlFor: m,
+					htmlFor: h,
 					className: "min-w-0 flex-1",
 					children: [/* @__PURE__ */ B("span", {
 						className: "typo-label-md block truncate text-[var(--Text-High-Emphasis)]",
@@ -16215,9 +16215,10 @@ function Pm({ className: e, inputClassName: t, label: n = "ファイル", descri
 				type: "button",
 				variant: "secondary",
 				size: "sm",
-				disabled: g,
-				onClick: () => h.current?.click(),
-				children: o ? "処理中" : i
+				disabled: _,
+				"aria-busy": s || void 0,
+				onClick: () => g.current?.click(),
+				children: s ? a : i
 			})
 		]
 	});

package/dist/native/ui.js

@@ -291,7 +291,7 @@ function X({ variant: e = "primary", elevation: t = "flat", containerStyle: n, p
 		secondary: {
 			bg: m.surface["accent-primary-light"],
 			bgActive: m.active["secondary-button"],
-			fg: m.text["accent-primary"],
+			fg: g === "dark" ? m.text["high-emphasis"] : m.text["accent-primary"],
 			border: m.border["accent-primary"],
 			bottomBorder: m.active["secondary-button"]
 		},
@@ -2736,34 +2736,34 @@ function _n({ tone: e = "info", title: t, description: n, children: r }) {
 //#endregion
 //#region src/native/components/Dialog.tsx
 function vn({ open: e, onClose: t, title: n, description: r, footer: i, children: a, dismissOnBackdrop: o = !0, position: s = "center", safeArea: c = !0 }) {
-	let { theme: l, scales: u } = G(), d = q(), f = s === "fullscreen", p = ue(u.spacing.scale[5], d, c);
+	let { theme: l, scales: u, mode: d } = G(), f = q(), p = s === "fullscreen", m = ue(u.spacing.scale[5], f, c);
 	return /* @__PURE__ */ E(I, {
 		visible: e,
-		transparent: !f,
+		transparent: !p,
 		animationType: "fade",
 		onRequestClose: t,
 		children: /* @__PURE__ */ E(R, {
-			onPress: () => o && !f && t(),
+			onPress: () => o && !p && t(),
 			style: {
 				flex: 1,
-				backgroundColor: f ? l.surface.primary : l.overlay.dark,
+				backgroundColor: p ? l.surface.primary : l.overlay.dark,
 				alignItems: "center",
 				justifyContent: s === "top" ? "flex-start" : "center",
-				...f ? { padding: 0 } : {
+				...p ? { padding: 0 } : {
 					padding: u.spacing.scale[4],
-					...s === "top" ? { paddingTop: u.spacing.scale[4] + J(d, "top", c) } : null
+					...s === "top" ? { paddingTop: u.spacing.scale[4] + J(f, "top", c) } : null
 				}
 			},
 			children: /* @__PURE__ */ D(R, {
 				onPress: () => {},
 				style: {
 					width: "100%",
-					backgroundColor: l.surface.primary,
+					backgroundColor: !p && d === "dark" ? l.surface.secondary : l.surface.primary,
 					gap: u.spacing.scale[3],
-					...f ? {
+					...p ? {
 						flex: 1,
 						borderRadius: 0,
-						...p
+						...m
 					} : {
 						maxWidth: 480,
 						borderRadius: u.borderRadius["2xl"],
@@ -5441,22 +5441,22 @@ function ai({ title: e, subtitle: t, leading: n, trailing: r, onBack: i, centere
 }
 //#endregion
 //#region src/native/components/MobileAppHeader.tsx
-function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, children: a, bordered: o = !0, style: s }) {
-	let { theme: c, scales: l } = G();
+function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, children: a, bordered: o = !0, verticalAlignment: s = "center", style: c }) {
+	let { theme: l, scales: u } = G();
 	return /* @__PURE__ */ D(H, {
 		style: [{
-			backgroundColor: c.surface.primary,
+			backgroundColor: l.surface.primary,
 			borderBottomWidth: +!!o,
-			borderBottomColor: c.border["low-emphasis"],
-			paddingTop: L.OS === "ios" ? 48 : l.spacing.scale[3]
-		}, s],
+			borderBottomColor: l.border["low-emphasis"],
+			paddingTop: L.OS === "ios" ? 48 : u.spacing.scale[3]
+		}, c],
 		children: [/* @__PURE__ */ D(H, {
 			style: {
 				minHeight: 56,
-				paddingHorizontal: l.spacing.scale[4],
+				paddingHorizontal: u.spacing.scale[4],
 				flexDirection: "row",
-				alignItems: "center",
-				gap: l.spacing.scale[2]
+				alignItems: s === "top" ? "flex-start" : "center",
+				gap: u.spacing.scale[2]
 			},
 			children: [
 				t,
@@ -5474,7 +5474,7 @@ function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, chi
 						flexDirection: "row",
 						justifyContent: "flex-end",
 						alignItems: "center",
-						gap: l.spacing.scale[2]
+						gap: u.spacing.scale[2]
 					},
 					children: [r ?? n, i]
 				})
@@ -6802,23 +6802,23 @@ function $i({ item: e, itemDirection: t, onReveal: n }) {
 }
 //#endregion
 //#region src/native/components/CompactFilePicker.tsx
-function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選択する", icon: r, loading: i = !1, disabled: a = !1, onPress: o, style: s }) {
-	let { theme: c, scales: l } = G(), u = a || i;
+function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選択する", loadingLabel: r, icon: i, loading: a = !1, disabled: o = !1, onPress: s, style: c }) {
+	let { theme: l, scales: u } = G(), d = o || a;
 	return /* @__PURE__ */ D(R, {
-		disabled: u,
-		onPress: o,
+		disabled: d,
+		onPress: s,
 		accessibilityRole: "button",
 		accessibilityState: {
-			disabled: u,
-			busy: i
+			disabled: d,
+			busy: a
 		},
 		style: [{
 			minHeight: 56,
 			flexDirection: "row",
 			alignItems: "center",
-			gap: l.spacing.scale[3],
-			opacity: u ? .5 : 1
-		}, s],
+			gap: u.spacing.scale[3],
+			opacity: d ? .5 : 1
+		}, c],
 		children: [
 			/* @__PURE__ */ E(H, {
 				style: {
@@ -6826,11 +6826,11 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 					height: 40,
 					alignItems: "center",
 					justifyContent: "center",
-					borderRadius: l.borderRadius.lg,
-					backgroundColor: c.surface.secondary
+					borderRadius: u.borderRadius.lg,
+					backgroundColor: l.surface.secondary
 				},
-				children: r ?? /* @__PURE__ */ E(B, {
-					style: [Y("heading.md"), { color: c.text["medium-emphasis"] }],
+				children: i ?? /* @__PURE__ */ E(B, {
+					style: [Y("heading.md"), { color: l.text["medium-emphasis"] }],
 					children: "＋"
 				})
 			}),
@@ -6841,11 +6841,11 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 				},
 				children: [typeof e == "string" ? /* @__PURE__ */ E(B, {
 					numberOfLines: 1,
-					style: [Y("label.md"), { color: c.text["high-emphasis"] }],
+					style: [Y("label.md"), { color: l.text["high-emphasis"] }],
 					children: e
 				}) : e, t && (typeof t == "string" ? /* @__PURE__ */ E(B, {
 					style: [Y("body.sm"), {
-						color: c.text["medium-emphasis"],
+						color: l.text["medium-emphasis"],
 						marginTop: 2
 					}],
 					children: t
@@ -6853,9 +6853,10 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 			}),
 			/* @__PURE__ */ E(X, {
 				variant: "secondary",
-				disabled: u,
-				loading: i,
-				onPress: o,
+				disabled: d,
+				loading: a,
+				loadingLabel: r,
+				onPress: s,
 				children: n
 			})
 		]

package/dist/types/components/patterns/compact-file-picker.d.ts

@@ -3,6 +3,12 @@ interface CompactFilePickerProps extends Omit<React.ComponentProps<"input">, "ch
     label?: React.ReactNode;
     description?: React.ReactNode;
     triggerLabel?: React.ReactNode;
+    /**
+     * loading 時にボタンへ表示する文言。
+     * i18n 対応: 英語では "Processing…" など任意文字列を渡す。
+     * @default "処理中"
+     */
+    loadingLabel?: React.ReactNode;
     icon?: React.ReactNode;
     loading?: boolean;
     onFilesChange?: (files: File[]) => void;
@@ -21,7 +27,7 @@ interface ImageAttachmentPickerProps extends Omit<CompactFilePickerProps, "accep
     removeLabel?: (image: ImageAttachment) => string;
     previewVariant?: "grid" | "list";
 }
-declare function CompactFilePicker({ className, inputClassName, label, description, triggerLabel, icon, loading, disabled, id, multiple, onFilesChange, ...inputProps }: CompactFilePickerProps): React.JSX.Element;
+declare function CompactFilePicker({ className, inputClassName, label, description, triggerLabel, loadingLabel, icon, loading, disabled, id, multiple, onFilesChange, ...inputProps }: CompactFilePickerProps): React.JSX.Element;
 declare function ImageAttachmentPicker({ className, images, accept, previewVariant, triggerLabel, label, description, onRemove, removeLabel, ...props }: ImageAttachmentPickerProps): React.JSX.Element;
 export { CompactFilePicker, ImageAttachmentPicker };
 export type { CompactFilePickerProps, ImageAttachment, ImageAttachmentPickerProps };

package/dist/types/components/patterns/mobile-app-header.d.ts

@@ -15,7 +15,15 @@ interface MobileAppHeaderProps extends Omit<React.ComponentProps<"header">, "ref
      * @default true
      */
     landmark?: boolean;
+    /**
+     * ヘッダー行の縦位置。複数行の brand（見出し+サブテキスト等）に対して
+     * status / actions が行全体の中央へ下がるのを避けたいときに `"top"` を指定する。
+     * `"top"` でも status / actions 内部（バッジとボタン同士）は中央揃えのまま
+     * （native の同名 prop と同じ仕様。issue #536）。
+     * @default "center"
+     */
+    verticalAlignment?: "center" | "top";
 }
-declare function MobileAppHeader({ className, brand, leading, status, compactStatus, actions, sticky, bordered, landmark, children, ...props }: MobileAppHeaderProps): React.JSX.Element;
+declare function MobileAppHeader({ className, brand, leading, status, compactStatus, actions, sticky, bordered, landmark, verticalAlignment, children, ...props }: MobileAppHeaderProps): React.JSX.Element;
 export { MobileAppHeader };
 export type { MobileAppHeaderProps };

package/dist/types/native/components/CompactFilePicker.d.ts

@@ -4,6 +4,11 @@ export interface CompactFilePickerProps {
     label?: React.ReactNode;
     description?: React.ReactNode;
     triggerLabel?: string;
+    /**
+     * loading 中に spinner と併せて表示する文言。未指定なら spinner のみ
+     * （Button.loadingLabel と同じ挙動・既定は変更しない）。i18n 対応（issue #539）。
+     */
+    loadingLabel?: string;
     icon?: React.ReactNode;
     loading?: boolean;
     disabled?: boolean;
@@ -23,5 +28,5 @@ export interface ImageAttachmentPickerProps extends Omit<CompactFilePickerProps,
     removeLabel?: (image: NativeImageAttachment) => string;
     previewVariant?: "grid" | "list";
 }
-export declare function CompactFilePicker({ label, description, triggerLabel, icon, loading, disabled, onPress, style, }: CompactFilePickerProps): React.JSX.Element;
+export declare function CompactFilePicker({ label, description, triggerLabel, loadingLabel, icon, loading, disabled, onPress, style, }: CompactFilePickerProps): React.JSX.Element;
 export declare function ImageAttachmentPicker({ images, onRemove, removeLabel, previewVariant, label, description, triggerLabel, ...props }: ImageAttachmentPickerProps): React.JSX.Element;

package/dist/types/native/components/MobileAppHeader.d.ts

@@ -8,6 +8,8 @@ export interface MobileAppHeaderProps {
     actions?: React.ReactNode;
     children?: React.ReactNode;
     bordered?: boolean;
+    /** Header row alignment. Right-side status and actions remain vertically centered. */
+    verticalAlignment?: "center" | "top";
     style?: StyleProp<ViewStyle>;
 }
-export declare function MobileAppHeader({ brand, leading, status, compactStatus, actions, children, bordered, style, }: MobileAppHeaderProps): React.JSX.Element;
+export declare function MobileAppHeader({ brand, leading, status, compactStatus, actions, children, bordered, verticalAlignment, style, }: MobileAppHeaderProps): React.JSX.Element;

package/docs/consumer-release-notices.md

@@ -0,0 +1,46 @@
+# ConsumerへのDS公開通知
+
+対象は `ekusiek716` 配下です。依頼登録でapp issueを公開待ちにし、DSの一括bump時だけ公開通知します。appの取り込み完了とは区別します。
+
+## 依頼を登録する
+
+1. DSの通常issueと、app側の取り込みを追跡する通常issueを作ります。PRのURL・番号は依頼issueとして使えません。
+2. DS正本repoの作業ブランチで、sourceのCLIを実行します。未publishのCLIではnpxが旧公開版を拾うため、次のコマンドを使います。
+
+```bash
+node bin/init.js register-consumer-request --ds-issue 531 --consumer-issue https://github.com/ekusiek716/trip-todo/issues/168
+```
+
+登録は既存の `gh` 認証を使います。両repoのissueを読めて、appのラベルを作成・付与できる権限が必要です。両方が通常issueであることを確認して台帳を保存し、app issueへ `ds:waiting` を自動で付けます。ラベルが無ければ作成します。closedまたは `ds:released` のissueには待機ラベルを付けません。既存ラベルを置き換えたりissueを再開したりしません。
+
+3. 修正PRの番号が決まったら同じ依頼に紐付け、台帳変更をDSのPRに含めます。
+
+```bash
+node bin/init.js register-consumer-request --ds-issue 531 --consumer-issue https://github.com/ekusiek716/trip-todo/issues/168 --fix-pr 532
+```
+
+CLI公開後は `npx ksk-ds register-consumer-request` に同じ引数を渡すこともできます。`--dry-run` は通信も書き込みも行わず、変更後のJSONだけ表示します。そのためissueの実在・通常issueかどうか・gh権限はdry-runでは未確認です。
+
+認証・API・ファイル操作の失敗は非zeroで終了します。ラベル付与だけ失敗した場合は保存済み台帳が残ります。ghの認証・権限を直して同じ登録コマンドを再実行すると、台帳を重複追加せずラベルを再試行できます。途中の成功を全体成功とは扱いません。
+
+## 台帳の契約
+
+`contracts/consumer-requests.json` は `{schemaVersion:1,requests:[{dsIssue,consumerIssue,fixPr}]}` の累積台帳です。新規の修正PR未定は `fixPr:null`、既存登録への `--fix-pr` 省略は値を維持します。同じDS issueとapp issueは更新し、複数appの登録を保持します。URLは小文字に正規化し、issue・PR番号は正の安全な整数だけを受け付けます。公開後も過去のentryを削除しません。実物の台帳もruntime共通validatorを通じて `npm test` で検証します。
+
+登録は `package.json` の名前が `ksk-design-system` で、`.git` と `contracts/` があるDS正本ルートでのみ可能です。consumerやnode_modulesの台帳は編集しません。
+
+## 一括bump時の公開通知
+
+通常のnpm公開後、DSの `scripts/update-consumers.sh VERSION` による一括bumpで通知します。指定versionの公開metadata・公開commitの台帳・修正PRの包含を確認し、該当app issueへbump PR付きの公開済みコメントと `ds:released` を付けます。同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残します。その間は `ds:released` と併存する場合があります。不正entryや処理失敗がある場合も待機ラベルを保持します。未公開fix・pending・未マージの修正は通知対象にしません。旧公開versionに台帳が無ければ待機します。
+
+通知runtimeの引数契約は `--repo owner/repo --version VERSION --bump-pr URL [--apply]` です。通知は一括bumpの処理に任せ、単独の実通知は運用手順にしません。登録CLIは公開済みコメントを投稿しません。appは依存更新・暫定回避策撤去・動作確認を終えてから追従issueを閉じます。
+
+通知にはrepo owner本人（`ekusiek716`）のPATによるgh認証を使用します。対象repoのissue書き込み権限が必要で、別ユーザーやGitHub Appのinstallation tokenは通知主体に使いません。
+
+通知に失敗した場合は作成済みbump PRを保持し、原因を解消して同じversion・対象repoの一括bumpを再実行します。既存PRを再利用して、未完了の通知・ラベル処理を修復します。runtime単独での実通知や、一括bumpとruntimeを並列実行する運用は禁止です。重複投稿を避けるため、同じ対象への一括bumpも直列で実行します。
+
+## 旧pollingからの移行
+
+app側の `.github/workflows/ds-release-notices.yml` と `.github/scripts/check-ds-release.mjs` は削除してください。6時間scheduleもworkflow_dispatchも使用しません。`init-release-notices` は廃止案内を出して非zero終了し、ファイルを配置しません。通常のinstall/postinstallでも配置しません。
+
+GitHub Actionsのrepo限定tokenを使うreceiver方式は廃止しました。登録・一括bumpには操作者の既存gh認証を使い、対象repoへの権限を確認します。この変更自体ではversion bump・publish・実通知は行いません。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "MIGRATION.md",
     "NATIVE_RECIPES.md",
     "PUBLISHING.md",
+    "docs/consumer-release-notices.md",
     "RELEASE.md",
     "UPDATING.md"
   ],
@@ -178,7 +179,7 @@
     "check:native": "tsc -p tsconfig.native.json --noEmit",
     "check:native-parity": "node scripts/check-native-parity.mjs",
     "check:native-lookup": "node scripts/generate-native-component-lookup.mjs --check",
-    "test": "vitest run",
+    "test": "node --test __tests__/consumer-release-notices.test.mjs __tests__/update-consumers-notices.test.mjs && vitest run",
     "test:legacy-radix": "node scripts/test-legacy-radix.mjs",
     "test:consumer:web": "npm run build:lib && node scripts/test-packed-web-consumer.mjs",
     "test:consumer:native": "npm run build:lib && node scripts/test-packed-native-consumer.mjs",

package/src/components/COMPONENT_LOOKUP.md

@@ -116,7 +116,7 @@
 | Chip | `@/components/patterns/chip` | **variant**: `filled`, `accent`, `outline`<br>**size**: `xs`, `sm`, `md`, `lg`, `tile`<br>**shape**: `pill`, `rounded`, `square` | Filled, Accent, Outline, AllVariants, AllSizes, Selected, Removable, SquareShape, WithCount, TileAndSoldOut, AsLink, Real UI — Filters & Status, Touch selection stable, TileTouchTargetNotShrunk, ExtraSmall, RoundedShape |
 | CoachMarkOverlay | `@/components/patterns/coach-mark-overlay` | — | MultiStepTour, Localized labels (EN), BrandVariant, MissingTarget, FocusTrap |
 | CollapsibleChipField | `@/components/patterns/collapsible-chip-field` | — | WithLabel, WithIcon, RequiredNoClear, CollapsedDisclosure, AlwaysExpanded, EscapeInsideDialog |
-| CompactFilePicker, ImageAttachmentPicker | `@/components/patterns/compact-file-picker` | — | SingleImageReplacement, MultiImageAttachments, ListPreview |
+| CompactFilePicker, ImageAttachmentPicker | `@/components/patterns/compact-file-picker` | — | SingleImageReplacement, MultiImageAttachments, ListPreview, LoadingWithCustomLabel |
 | ConfirmDialog | `@/components/patterns/confirm-dialog` | — | Default, Destructive, WithLoading |
 | ContentCarousel | `@/components/patterns/content-carousel` | — | Default, AutoPlay, WithoutControls |
 | CookieConsent | `@/components/patterns/cookie-consent` | — | Default, CustomLabels, OnDecideCallback |
@@ -138,7 +138,7 @@
 | ListSkeleton, GridSkeleton | `@/components/patterns/list-skeletons` | — | Default, WithoutFilter, FewRows |
 | MediaActionCluster | `@/components/patterns/media-action-cluster` | — | Vertical, Horizontal, Auto orientation, No auto-hide |
 | MenuDrawer | `@/components/patterns/menu-drawer` | — | Default, NoBanner |
-| MobileAppHeader | `@/components/patterns/mobile-app-header` | — | WithStatusSlot, WithPendingCount |
+| MobileAppHeader | `@/components/patterns/mobile-app-header` | — | WithStatusSlot, WithPendingCount, WithTopAlignment |
 | MobileAppShell | `@/components/patterns/mobile-app-shell` | — | FourTabPwaShell, DesktopSidebarHandoff |
 | MobileFloatingActionButton | `@/components/patterns/mobile-floating-action-button` | — | WithBottomNavOffset, WithLabel, Glass (Liquid Glass), Glass (with label), With pill BottomTabBar inline, Full width CTA, With ad banner offset (bottomOffsetExtra) |
 | NotificationBadge | `@/components/patterns/notification-badge` | — | SingleDigit, DoubleDigit, MaxOverflow, CustomMax, Zero, VariousCounts, WithIcon |

package/src/styles/bottom-nav.css

@@ -48,6 +48,19 @@
   box-shadow: var(--Nav-Pill-Shadow, var(--glass-highlight), var(--glass-shadow));
 }
 
+/* ── ダーク / 暗背景宣言区画での詳細度対策（issue #486 の実測バグ）──
+   glass.css の @supports ブロックが `.dark .glass` / `[data-glass-backdrop="dark"] .glass`
+   という **2 クラスセレクタ (0,2,0)** で backdrop-filter を上書きしている。
+   上の `[data-slot="bottom-nav-pill"]` は (0,1,0) なので、宣言順に関係なく
+   詳細度で負け、**ダークでだけ --Nav-Pill-Backdrop が無視される**（v2.1.0 で実測）。
+   同じ 2 クラス相当のセレクタで受け直す。フォールバックは glass.css の
+   ダーク側の値そのままなので、未宣言時のレンダリングは変わらない。 */
+.dark [data-slot="bottom-nav-pill"],
+[data-glass-backdrop="dark"] [data-slot="bottom-nav-pill"] {
+  -webkit-backdrop-filter: var(--Nav-Pill-Backdrop, var(--glass-blur) var(--glass-refract-dark));
+  backdrop-filter: var(--Nav-Pill-Backdrop, var(--glass-blur) var(--glass-refract-dark));
+}
+
 [data-slot="bottom-nav-pill"][data-tone="inverse"] {
   background: var(--Nav-Pill-Surface, var(--glass-bg-dark));
   -webkit-backdrop-filter: var(--Nav-Pill-Backdrop, var(--glass-blur-media-dark));

package/templates/AGENTS.md

@@ -73,6 +73,16 @@ DS に無いと思っても consumer 側に別台帳を作らないこと。最
 | ドロワー（モバイル） | `<Sheet side="bottom">` |
 | PC/モバイル自動切替モーダル | `<ResponsiveDialog>` |
 
+## DS公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## 使用方法
 
 ### CSS のセットアップ

package/templates/CLAUDE.md

@@ -73,6 +73,16 @@ DS に無いと思っても consumer 側に別台帳を作らないこと。最
 | ドロワー（モバイル） | `<Sheet side="bottom">` |
 | PC/モバイル自動切替モーダル | `<ResponsiveDialog>` |
 
+## DS公開通知
+
+DSへ依頼するときは、DSの通常issueとappの取り込み待ち通常issueを作成する。DS正本の作業ブランチで `node bin/init.js register-consumer-request --ds-issue N --consumer-issue URL` を実行し、台帳変更をPRに含める。未公開CLIで古いnpm版を起動しないようsourceのコマンドを使う。公開済みCLIでは `npx ksk-ds register-consumer-request` も同じ引数で使える。
+
+登録CLIは既存のgh認証で両issueを確認し、app issueへ `ds:waiting` を自動付与する。closedまたは `ds:released` のissueは降格させない。修正PR作成後は同じコマンドに `--fix-pr N` を付けて紐付ける。省略時は既存fixPrを維持し、累積台帳を削除しない。`--dry-run` は通信・書き込みなしのローカルプレビューで、issue実在や権限は確認しない。失敗は非zero。台帳保存後のラベル失敗は同じコマンドで再試行する。
+
+公開通知はDSの一括bump（`scripts/update-consumers.sh VERSION`）時だけ実行する。公開版に修正が含まれることを確認し、bump PR付きの通知と `ds:released` を付ける。6時間pollingとapp側workflow/scriptは廃止し、`init-release-notices` は移行案内を出して停止する。app側の取り込み・動作確認が完了するまで追従issueは閉じない。詳しくは [公開通知手順](https://github.com/ekusiek716/ksk-design-system/blob/main/docs/consumer-release-notices.md) を参照。
+
+同じapp issueに複数のDS依頼がある場合、公開台帳内の該当依頼がすべて公開・通知済みになるまで `ds:waiting` を残す（`ds:released` と併存する場合あり）。通知はrepo owner本人 `ekusiek716` のPAT認証が前提。通知失敗時は既存bump PRを保持して同じversion・対象repoの一括bumpを再実行し、通知runtime単独実行・並列実行はしない。
+
 ## 使用方法
 
 ### CSS のセットアップ

package/templates/consumer-release-notices/check-ds-release.mjs

@@ -0,0 +1,284 @@
+#!/usr/bin/env node
+import { pathToFileURL } from 'node:url';
+
+export const DS_REPO = 'ekusiek716/ksk-design-system';
+const REGISTRY = 'https://registry.npmjs.org/ksk-design-system/';
+const API = 'https://api.github.com';
+const SHA = /^[a-f0-9]{40}$/i;
+const ID = (value) => Number.isSafeInteger(value) && value > 0;
+class NoticeError extends Error {}
+const fail = (message) => { throw new NoticeError(message); };
+
+export function validateRepo(repo, githubRepository) {
+  if (typeof repo !== 'string' || !/^ekusiek716\/[a-zA-Z0-9_.-]+$/.test(repo)
+    || ['.', '..'].includes(repo.split('/')[1])) fail('対象repoはekusiek716配下で指定してください');
+  if (githubRepository && githubRepository.toLowerCase() !== repo.toLowerCase()) fail('GITHUB_REPOSITORYと--repoが一致しません');
+  return repo;
+}
+
+export function parseArgs(args) {
+  let repo;
+  let version;
+  let bumpPr;
+  let apply = false;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--repo' && repo === undefined && args[i + 1]) repo = args[++i];
+    else if (args[i] === '--version' && version === undefined && args[i + 1]) version = args[++i];
+    else if (args[i] === '--bump-pr' && bumpPr === undefined && args[i + 1]) bumpPr = args[++i];
+    else if (args[i] === '--apply' && !apply) apply = true;
+    else fail('使用法: --repo owner/repo --version VERSION --bump-pr URL [--apply]');
+  }
+  validateRepo(repo);
+  validateVersion(version);
+  parseBumpPr(bumpPr, repo);
+  return { repo, version, bumpPr, apply };
+}
+
+export function validateVersion(version) {
+  if (typeof version !== 'string' || !/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/.test(version)) fail('安定版versionを明示してください');
+  return version;
+}
+
+export function parseBumpPr(value, repo) {
+  const match = typeof value === 'string' && /^https:\/\/github\.com\/(ekusiek716\/[a-zA-Z0-9_.-]+)\/pull\/([1-9]\d*)$/.exec(value);
+  if (!match || !ID(Number(match[2])) || match[1].toLowerCase() !== repo.toLowerCase()) fail('bump PR URLは対象repoのPRで指定してください');
+  return Number(match[2]);
+}
+
+export function validateBumpPr(pr, repo, version) {
+  if (pr?.base?.repo?.full_name?.toLowerCase() !== repo.toLowerCase()
+    || pr?.head?.repo?.full_name?.toLowerCase() !== repo.toLowerCase()
+    || pr.base.ref !== 'main' || pr.head.ref !== `chore/bump-ds-${version}`
+    || !(pr.state === 'open' || pr.merged === true)) fail('bump PRのrepo・branch・baseまたは状態が不正です');
+  return pr;
+}
+
+export function parseConsumerIssue(value) {
+  const match = typeof value === 'string' && /^https:\/\/github\.com\/(ekusiek716\/[a-zA-Z0-9_.-]+)\/issues\/([1-9]\d*)$/.exec(value);
+  if (!match || !ID(Number(match[2]))) fail('consumerIssue URLが不正です');
+  validateRepo(match[1]);
+  return { repo: match[1], number: Number(match[2]) };
+}
+
+/** Validate the published JSON contract. Strict by default for contract/CLI checks.
+ * The runner uses partial mode to continue independent entries after an error.
+ */
+export function validateContract(contract, { partial = false } = {}) {
+  if (contract?.schemaVersion !== 1 || !Array.isArray(contract.requests)) fail('未対応のconsumer-requests schemaです');
+  const requests = [];
+  const errors = [];
+  const keys = new Set();
+  for (const [index, entry] of contract.requests.entries()) {
+    try {
+      if (!entry || !ID(entry.dsIssue) || !(entry.fixPr === null || ID(entry.fixPr))) fail('依頼entryが不正です');
+      const target = parseConsumerIssue(entry.consumerIssue);
+      const key = `${entry.dsIssue}:${target.repo.toLowerCase()}:${target.number}`;
+      if (keys.has(key)) fail('同一DS依頼・consumerIssueの重複entryです');
+      keys.add(key);
+      requests.push({ entry, index });
+    } catch (error) {
+      if (!partial) throw error;
+      errors.push({ entry: index, message: error instanceof NoticeError ? error.message : '依頼entryが不正です' });
+    }
+  }
+  return { requests, errors };
+}
+
+export function validateRelease(value) {
+  if (!value || typeof value.version !== 'string' || !/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/.test(value.version)
+    || typeof value.gitHead !== 'string' || !SHA.test(value.gitHead)
+    || typeof value.dist?.integrity !== 'string'
+    || !/^(sha256|sha384|sha512)-[A-Za-z0-9+/]+={0,2}$/.test(value.dist.integrity)) fail('npm公開metadataが不正です');
+  return { version: value.version, gitHead: value.gitHead, integrity: value.dist.integrity };
+}
+
+export const noticeMarker = (dsIssue, consumerIssue) => `<!-- ksk-ds-release-notice:${dsIssue}:${consumerIssue} -->`;
+export function noticeBody(entry, number, release, commit, bumpPr) {
+  return `${noticeMarker(entry.dsIssue, number)}\nDS側の修正がv${release.version}で公開済み。アプリ取り込み・動作確認待ちです。\n\n`
+    + `- DS依頼: https://github.com/${DS_REPO}/issues/${entry.dsIssue}\n`
+    + `- 修正PR: https://github.com/${DS_REPO}/pull/${entry.fixPr}\n`
+    + `- アプリ取り込みPR: ${bumpPr}\n`
+    + `- npm: [ksk-design-system@${release.version}](https://www.npmjs.com/package/ksk-design-system/v/${release.version})\n`
+    + `- 修正commit: ${commit}\n- 公開gitHead: ${release.gitHead}\n- dist.integrity: ${release.integrity}\n\n`
+    + 'アプリへの取り込みと動作確認が終わったら、この依頼issueで結果を確認してください。';
+}
+
+/** Network and environment are injectable. The caller sets process.exitCode from the result.
+ * GH_TOKEN may be a local gh PAT. /user verifies the current comment author;
+ * the repository owner and github-actions[bot] can satisfy deduplication.
+ * Local owner PAT execution is required (/user does not support installation tokens).
+ * Serialize updater runs: GitHub has no atomic create-if-marker-absent API.
+ */
+export async function run({ repo, version, bumpPr, apply = false, env = process.env, fetchImpl = globalThis.fetch, timeoutMs = 15000 } = {}) {
+  const results = [];
+  const errors = [];
+  const safeMessage = (error) => {
+    const message = error instanceof NoticeError ? error.message : '処理に失敗しました';
+    return env.GH_TOKEN ? message.split(env.GH_TOKEN).join('[REDACTED]') : message;
+  };
+  try {
+    validateRepo(repo, env.GITHUB_REPOSITORY === DS_REPO ? undefined : env.GITHUB_REPOSITORY);
+    validateVersion(version);
+    const bumpNumber = parseBumpPr(bumpPr, repo);
+    if (!env.GH_TOKEN) fail('GH_TOKENが必要です');
+    if (!Number.isSafeInteger(timeoutMs) || timeoutMs <= 0) fail('timeoutMsが不正です');
+    const own = `/repos/${repo}`;
+    async function request(path, { method = 'GET', body, allow404 = false, allow422 = false, registry = false } = {}) {
+      if (method !== 'GET' && (!apply || !(path === `${own}/labels` || path.startsWith(`${own}/issues/`)))) fail('書込対象が許可されていません');
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        const response = await fetchImpl(registry ? `${REGISTRY}${version}` : `${API}${path}`, {
+          method, redirect: 'error', signal: controller.signal,
+          headers: registry ? { Accept: 'application/json' } : {
+            Accept: 'application/vnd.github+json', Authorization: `Bearer ${env.GH_TOKEN}`,
+            'X-GitHub-Api-Version': '2022-11-28', 'Content-Type': 'application/json',
+          },
+          ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+        });
+        if ((allow404 && response.status === 404) || (allow422 && response.status === 422)) return { status: response.status };
+        if (!response.ok) fail(`API処理失敗 (HTTP ${response.status})`);
+        return { status: response.status, data: response.status === 204 ? null : await response.json(),
+          next: /rel="next"/.test(response.headers.get('link') || '') };
+      } catch (error) {
+        if (error instanceof NoticeError) throw error;
+        fail(controller.signal.aborted ? 'APIタイムアウト' : 'API通信またはJSON解析に失敗しました');
+      } finally { clearTimeout(timer); }
+    }
+    async function pages(path) {
+      const values = [];
+      for (let page = 1; ; page++) {
+        const response = await request(`${path}?per_page=100&page=${page}`);
+        if (!Array.isArray(response.data)) fail('API一覧形式が不正です');
+        values.push(...response.data);
+        if (!response.next && response.data.length < 100) return values;
+      }
+    }
+    const release = validateRelease((await request('', { registry: true })).data);
+    if (release.version !== version) fail('npm公開versionが指定versionと一致しません');
+    const manifest = await request(`/repos/${DS_REPO}/contents/contracts/consumer-requests.json?ref=${release.gitHead}`, { allow404: true });
+    if (manifest.status === 404) {
+      // Contents 404 can also hide an unknown commit or an inaccessible repository.
+      const commit = (await request(`/repos/${DS_REPO}/commits/${release.gitHead}`)).data;
+      if (typeof commit?.sha !== 'string' || commit.sha.toLowerCase() !== release.gitHead.toLowerCase()) fail('公開gitHeadの存在を確認できません');
+      return { exitCode: 0, results: [{ status: 'legacy-release' }], errors };
+    }
+    let contract;
+    try {
+      if (manifest.data?.encoding !== 'base64' || typeof manifest.data.content !== 'string') fail('公開contract形式が不正です');
+      contract = JSON.parse(Buffer.from(manifest.data.content, 'base64').toString('utf8'));
+    } catch { fail('公開contractを解析できません'); }
+    const validated = validateContract(contract, { partial: true });
+    errors.push(...validated.errors.map((error) => ({ ...error, message: safeMessage(new NoticeError(error.message)) })));
+    const applicable = validated.requests.filter(({ entry }) => parseConsumerIssue(entry.consumerIssue).repo.toLowerCase() === repo.toLowerCase());
+    // Apps with no actionable registered requests do not need PR/file inspection.
+    // Keep schema/entry failures visible even when there is nothing to notify.
+    if (!applicable.some(({ entry }) => entry.fixPr !== null)) {
+      for (const { entry } of applicable) results.push({ dsIssue: entry.dsIssue, consumerIssue: parseConsumerIssue(entry.consumerIssue).number, status: 'unfixed' });
+      return { exitCode: errors.length ? 1 : 0, results, errors };
+    }
+    const bump = validateBumpPr((await request(`${own}/pulls/${bumpNumber}`)).data, repo, version);
+    if (typeof bump.head.sha !== 'string' || !SHA.test(bump.head.sha)) fail('bump PRのHEAD SHAが不正です');
+    const files = await pages(`${own}/pulls/${bumpNumber}/files`);
+    let packageMatches = 0;
+    let lockMatches = 0;
+    // Read immutable PR HEAD, never latest main or the mutable branch name.
+    for (const file of files) {
+      if (file.status === 'removed' || typeof file.filename !== 'string'
+        || !/(^|\/)(package|package-lock)\.json$/.test(file.filename)) continue;
+      const encodedPath = file.filename.split('/').map(encodeURIComponent).join('/');
+      const contents = (await request(`${own}/contents/${encodedPath}?ref=${bump.head.sha}`)).data;
+      let pkg;
+      try {
+        if (contents?.encoding !== 'base64' || typeof contents.content !== 'string') fail('invalid contents');
+        pkg = JSON.parse(Buffer.from(contents.content, 'base64').toString('utf8'));
+      } catch { fail('bump PRのpackage/lockを解析できません'); }
+      if (file.filename.endsWith('package-lock.json')) {
+        const installs = Object.entries(pkg.packages ?? {}).filter(([key]) => /(^|\/)node_modules\/ksk-design-system$/.test(key)).map(([, value]) => value);
+        if (pkg.dependencies?.['ksk-design-system']) installs.push(pkg.dependencies['ksk-design-system']);
+        for (const install of installs) {
+          if (install?.version !== version || install.integrity !== release.integrity) fail('bump PRのlockfileが指定公開版と一致しません');
+          lockMatches++;
+        }
+      } else {
+        for (const field of ['dependencies', 'devDependencies', 'peerDependencies']) {
+          const dependency = pkg[field]?.['ksk-design-system'];
+          if (dependency === undefined || dependency === '*' || dependency.startsWith?.('workspace:')) continue;
+          if (dependency !== version && dependency !== `^${version}`) fail('bump PRのpackage.jsonが指定versionと一致しません');
+          packageMatches++;
+        }
+      }
+    }
+    if (!packageMatches || !lockMatches) fail('bump PRのpackage.jsonとlockfileに指定公開版の変更が必要です');
+    const author = (await request('/user')).data;
+    if (!ID(author?.id) || author.login !== 'ekusiek716' || author.type !== 'User') fail('通知にはrepo owner本人のGH_TOKENが必要です');
+    const seen = new Set();
+    const waitingIssues = new Set();
+    let labelReady = false;
+    for (const { index, entry } of applicable) {
+      try {
+        if (!entry || !ID(entry.dsIssue) || !(entry.fixPr === null || ID(entry.fixPr))) fail('依頼entryが不正です');
+        const target = parseConsumerIssue(entry.consumerIssue);
+        if (target.repo.toLowerCase() !== repo.toLowerCase()) continue;
+        const result = { dsIssue: entry.dsIssue, consumerIssue: target.number };
+        if (entry.fixPr === null) { results.push({ ...result, status: 'unfixed' }); continue; }
+        const pr = (await request(`/repos/${DS_REPO}/pulls/${entry.fixPr}`)).data;
+        if (pr?.merged !== true) { results.push({ ...result, status: 'unmerged' }); continue; }
+        if (typeof pr.merge_commit_sha !== 'string' || !SHA.test(pr.merge_commit_sha)) fail('修正PRのcommit SHAが不正です');
+        const comparison = (await request(`/repos/${DS_REPO}/compare/${pr.merge_commit_sha}...${release.gitHead}`)).data;
+        if (!['ahead', 'identical', 'behind', 'diverged'].includes(comparison?.status)) fail('commit比較結果が不正です');
+        if (!['ahead', 'identical'].includes(comparison.status)) { results.push({ ...result, status: 'unreleased' }); continue; }
+        const issuePath = `${own}/issues/${target.number}`;
+        const issue = (await request(issuePath)).data;
+        if (!issue || issue.pull_request) fail('通知先は通常のissueである必要があります');
+        if (issue.state === 'closed') { results.push({ ...result, status: 'closed' }); continue; }
+        if (issue.state !== 'open') fail('通知先issueの状態が不正です');
+        const marker = noticeMarker(entry.dsIssue, target.number);
+        const comments = await pages(`${issuePath}/comments`);
+        const trusted = comments.filter((comment) => ((comment.user?.login === 'github-actions[bot]' && comment.user?.type === 'Bot')
+          || (comment.user?.id === author.id && comment.user?.login === 'ekusiek716' && comment.user?.type === 'User'))
+          && typeof comment.body === 'string');
+        const exists = seen.has(marker) || trusted.some((comment) => comment.body.includes(marker));
+        const supplementMarker = `<!-- ksk-ds-bump-pr-notice:${entry.dsIssue}:${target.number} -->`;
+        const needsSupplement = exists && !seen.has(marker) && !trusted.some((comment) => comment.body.includes(supplementMarker)
+          || (comment.body.includes(marker) && comment.body.includes(`https://github.com/${repo}/pull/`)));
+        if (!apply) { results.push({ ...result, status: needsSupplement ? 'would-supplement-bump-pr' : exists ? 'would-repair-labels' : 'would-notify' }); continue; }
+        if (!exists) await request(`${issuePath}/comments`, { method: 'POST', body: { body: noticeBody(entry, target.number, release, pr.merge_commit_sha, bumpPr) } });
+        if (needsSupplement) await request(`${issuePath}/comments`, { method: 'POST', body: {
+          body: `${supplementMarker}\nDS依頼 https://github.com/${DS_REPO}/issues/${entry.dsIssue} の取り込みPRを補足します。\n\n- アプリ取り込みPR: ${bumpPr}\n- ksk-design-system@${version}\n\nアプリ取り込み・動作確認待ちです。`,
+        } });
+        seen.add(marker);
+        if (!labelReady) {
+          const labelPath = `${own}/labels/${encodeURIComponent('ds:released')}`;
+          if ((await request(labelPath, { allow404: true })).status === 404) {
+            const created = await request(`${own}/labels`, { method: 'POST', body: { name: 'ds:released', color: '0e8a16', description: 'DS修正版公開済み・アプリ取り込みと動作確認待ち' }, allow422: true });
+            if (created.status === 422) await request(labelPath); // Another run may have created it.
+          }
+          labelReady = true;
+        }
+        const labels = await pages(`${issuePath}/labels`);
+        if (!labels.some((label) => label.name === 'ds:released')) await request(`${issuePath}/labels`, { method: 'POST', body: { labels: ['ds:released'] } });
+        if (labels.some((label) => label.name === 'ds:waiting')) waitingIssues.add(target.number);
+        results.push({ ...result, status: exists ? 'labels-repaired' : 'notified' });
+      } catch (error) { errors.push({ entry: index, message: safeMessage(error) }); }
+    }
+    // A shared app issue can track several DS requests. Keep waiting until every
+    // matching request is notified; malformed entries or failures also keep it.
+    if (apply && errors.length === 0) for (const number of waitingIssues) {
+      if (results.filter((result) => result.consumerIssue === number)
+        .every((result) => ['notified', 'labels-repaired'].includes(result.status))) {
+        try { await request(`${own}/issues/${number}/labels/${encodeURIComponent('ds:waiting')}`, { method: 'DELETE', allow404: true }); }
+        catch (error) { errors.push({ consumerIssue: number, message: safeMessage(error) }); }
+      }
+    }
+  } catch (error) { errors.push({ message: safeMessage(error) }); }
+  return { exitCode: errors.length ? 1 : 0, results, errors };
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  try {
+    const result = await run(parseArgs(process.argv.slice(2)));
+    console.log(JSON.stringify(result, null, 2));
+    process.exitCode = result.exitCode;
+  } catch { console.error('引数が不正です。使用法: --repo owner/repo --version VERSION --bump-pr URL [--apply]'); process.exitCode = 1; }
+}