ksk-design-system 1.51.1 → 1.52.0

package/AGENTS.md

@@ -40,6 +40,17 @@ UI を書く前に必ず確認すること:
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）
 
+### 新規・変更するコンポーネントの API チェック（2026-08 の consumer 実機点検で3件連続した型）
+
+「DS 部品の既定値が consumer の想定とズレていた」不具合が同じ週に3件出た（#308 / #311 / exam-kit 側で発覚した ChipSelector の複数選択既定）。部品の props を設計・変更するときは次を確認する:
+
+- [ ] **押せる要素は、押せると見て分かる面を既定で持つか**。素の Pressable + テキストだけの操作子を作らない。面・タップ領域（44pt）は `IconButton` 等の既存部品に委ねる（#308: Calendar の月送り矢印が面を持たず、consumer から差し替え口も無かった）
+- [ ] **インタラクティブな部品は a11y 既定値を自分で持つか**。`accessibilityRole` と、状態（selected / disabled / checked）の `accessibilityState` 反映は**呼び出し側の義務にしない**。呼び出し側の明示値が優先される形で部品が既定を持つ（#311: Chip が role を持たず、スクリーンリーダーにただのテキストとして扱われた）
+- [ ] **モードを持つ部品（単一/複数選択・開閉など）の既定値は、間違えて使うと壊れる側にしていないか**。既定で済ませた呼び出しが静かに誤動作する組み合わせ（例: ChipSelector の既定 `multiple=true` を単一選択のつもりで使うと、押しても values[0] が現在値のまま切り替わらない）は、既定を安全側へ倒すか、必須 prop にして省略をコンパイルエラーにする
+- [ ] **名前付きスロット（meta / description 等）は「何を・どこに置くか」を JSDoc に書いたか**。書いていないスロットは consumer に流用され、想定外の位置崩れになる（#309: ActionTile の meta に選択チェックを入れられ、左下に浮いた）
+
+いずれも lint では拾えない設計判断なので、レビューではこの4点を明示的に見る。
+
 ---
 
 ## このDSについて

package/CLAUDE.md

@@ -40,6 +40,17 @@ UI を書く前に必ず確認すること:
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）
 
+### 新規・変更するコンポーネントの API チェック（2026-08 の consumer 実機点検で3件連続した型）
+
+「DS 部品の既定値が consumer の想定とズレていた」不具合が同じ週に3件出た（#308 / #311 / exam-kit 側で発覚した ChipSelector の複数選択既定）。部品の props を設計・変更するときは次を確認する:
+
+- [ ] **押せる要素は、押せると見て分かる面を既定で持つか**。素の Pressable + テキストだけの操作子を作らない。面・タップ領域（44pt）は `IconButton` 等の既存部品に委ねる（#308: Calendar の月送り矢印が面を持たず、consumer から差し替え口も無かった）
+- [ ] **インタラクティブな部品は a11y 既定値を自分で持つか**。`accessibilityRole` と、状態（selected / disabled / checked）の `accessibilityState` 反映は**呼び出し側の義務にしない**。呼び出し側の明示値が優先される形で部品が既定を持つ（#311: Chip が role を持たず、スクリーンリーダーにただのテキストとして扱われた）
+- [ ] **モードを持つ部品（単一/複数選択・開閉など）の既定値は、間違えて使うと壊れる側にしていないか**。既定で済ませた呼び出しが静かに誤動作する組み合わせ（例: ChipSelector の既定 `multiple=true` を単一選択のつもりで使うと、押しても values[0] が現在値のまま切り替わらない）は、既定を安全側へ倒すか、必須 prop にして省略をコンパイルエラーにする
+- [ ] **名前付きスロット（meta / description 等）は「何を・どこに置くか」を JSDoc に書いたか**。書いていないスロットは consumer に流用され、想定外の位置崩れになる（#309: ActionTile の meta に選択チェックを入れられ、左下に浮いた）
+
+いずれも lint では拾えない設計判断なので、レビューではこの4点を明示的に見る。
+
 ---
 
 ## 必須: セッション開始時に読み込むファイル

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.51.1",
+    "version": "1.52.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 67,
@@ -2052,7 +2052,7 @@
       "name": "QuickActionGrid / ActionTile",
       "exported": false,
       "path": "src/components/patterns/quick-action-grid.tsx",
-      "description": "ショートカット/絵文字 action の button tile と grid。icon/emoji、label、description、meta、selected/disabled/loading state、2/3/4 column または auto-fit を持つ。",
+      "description": "ショートカット/絵文字 action の button tile と grid。icon/emoji、label、description、meta、indicator、selected/disabled/loading state、2/3/4 column または auto-fit を持つ。",
       "variants": [
         "neutral",
         "selected",
@@ -2064,13 +2064,19 @@
       ],
       "accessibility": [
         "button semantics",
-        "aria-pressed when selected"
+        "aria-pressed when selected (selected prop または variant=\"selected\" のどちらでも true)",
+        "選択状態は色だけでなく既定チェック(indicator省略時)でも伝える(WCAG 1.4.1)",
+        "既定チェックは読み上げ対象外(aria-hidden / accessibilityElementsHidden)。選択状態の正本は aria-pressed(web) / accessibilityState.selected(native)"
       ],
       "rules": [
         "card + button の hybrid を consumer 側で手組みしない",
         "shortcut row/grid の columns/gap を consumer 側で決め打ちしない",
         "children には ActionTile を使う",
-        "選択状態は selected prop を使う"
+        "選択状態は selected prop を使う",
+        "meta はカード下段右端の補足情報専用。選択インジケータには indicator prop を使う(issue #309)",
+        "indicator はラベル行右端(loading 時 Spinner の位置)に表示。省略時は選択状態でDS標準チェックが既定表示される。null/undefined/falseはいずれも「指定なし」として扱われ、選択中なら既定チェックへフォールバックする",
+        "loading は indicator / 既定チェックより優先して表示される",
+        "native では indicator に文字列・数値を渡してもよい(DS 側が Text にラップする)。それ以外の ReactNode はそのまま描画されるため、consumer が Text 相当で包む"
       ],
       "subcomponents": [
         "QuickActionGrid",

package/contracts/token-hex-cache.json

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

@@ -15362,16 +15362,16 @@ var vp = {
 	4: "grid-cols-2 sm:grid-cols-4",
 	auto: "grid-cols-[repeat(auto-fit,minmax(8rem,1fr))]"
 };
-function bp({ className: e, icon: t, emoji: n, label: r, description: i, meta: a, selected: o = !1, loading: s = !1, variant: c = o ? "selected" : "neutral", disabled: l, type: u, ...d }) {
-	let f = l || s;
+function bp({ className: e, icon: t, emoji: n, label: r, description: i, meta: a, indicator: o, selected: s = !1, loading: c = !1, variant: l = s ? "selected" : "neutral", disabled: u, type: d, ...f }) {
+	let p = u || c, m = s || l === "selected", h = o != null && o !== !1;
 	return /* @__PURE__ */ H("button", {
 		"data-slot": "action-tile",
-		"data-variant": c,
-		"aria-pressed": o || void 0,
-		type: u ?? "button",
-		disabled: f,
-		className: W("relative flex min-h-24 flex-col items-start justify-between gap-3 rounded-xl border border-[var(--Border-Low-Emphasis)] p-3 text-left transition-colors", "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:outline-none", "hover:bg-[var(--Surface-Secondary)]", vp[c], f && "cursor-not-allowed opacity-50", e),
-		...d,
+		"data-variant": l,
+		"aria-pressed": m || void 0,
+		type: d ?? "button",
+		disabled: p,
+		className: W("relative flex min-h-24 flex-col items-start justify-between gap-3 rounded-xl border border-[var(--Border-Low-Emphasis)] p-3 text-left transition-colors", "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:outline-none", "hover:bg-[var(--Surface-Secondary)]", vp[l], p && "cursor-not-allowed opacity-50", e),
+		...f,
 		children: [/* @__PURE__ */ H("span", {
 			className: "flex w-full items-start justify-between gap-3",
 			children: [/* @__PURE__ */ H("span", {
@@ -15392,10 +15392,17 @@ function bp({ className: e, icon: t, emoji: n, label: r, description: i, meta: a
 						children: r
 					})
 				]
-			}), s && /* @__PURE__ */ V(pl, {
+			}), c ? /* @__PURE__ */ V(pl, {
 				size: "sm",
 				label: "処理中"
-			})]
+			}) : h ? /* @__PURE__ */ V("span", {
+				className: W("shrink-0", (typeof o == "string" || typeof o == "number") && "typo-label-md text-[var(--Text-High-Emphasis)]"),
+				children: o
+			}) : m ? /* @__PURE__ */ V("span", {
+				className: "typo-label-md shrink-0 text-[var(--Text-Accent-Primary)]",
+				"aria-hidden": !0,
+				children: "✓"
+			}) : null]
 		}), (i || a) && /* @__PURE__ */ H("span", {
 			className: "flex w-full flex-wrap items-end justify-between gap-x-2 gap-y-1",
 			children: [i && /* @__PURE__ */ V("span", {
@@ -17634,7 +17641,7 @@ function lh({ className: e, state: t = "idle", label: n, count: r, compact: i =
 			className: W("ml-0.5 rounded-full bg-[var(--Surface-Primary)] px-1.5 py-0.5 typo-label-xs", "text-[var(--Text-High-Emphasis)]"),
 			children: r > 99 ? "99+" : r
 		})
-	] }), m = W("inline-flex min-h-9 max-w-full items-center justify-center gap-1.5 rounded-full border border-[var(--Border-Low-Emphasis)] px-2.5 py-1", "typo-label-xs select-none", ah[t], f && "cursor-pointer transition-colors hover:bg-[var(--Surface-Tertiary)]", f && "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", u && "opacity-50", i && "min-w-9 px-2", e);
+	] }), m = W("inline-flex max-w-full items-center justify-center gap-1.5 rounded-full border border-[var(--Border-Low-Emphasis)] px-2.5 py-1", "typo-label-xs select-none", ah[t], f && "min-h-9", f && "cursor-pointer transition-colors hover:bg-[var(--Surface-Tertiary)]", f && "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", u && "opacity-50", i && f && "min-w-9 px-2", i && !f && "p-1", e);
 	if (!f) {
 		let e = sh(d);
 		return /* @__PURE__ */ V("span", {

package/dist/native/ui.js

@@ -701,24 +701,24 @@ var Ve = {
 	md: 12,
 	lg: 16
 };
-function Ue({ variant: e = "filled", size: t = "md", shape: n = "pill", selected: r = !1, disabled: i = !1, count: a, removable: o = !1, onRemove: s, children: c, ...l }) {
-	let { theme: u, scales: d } = K(), f = {
+function Ue({ variant: e = "filled", size: t = "md", shape: n = "pill", selected: r = !1, disabled: i = !1, count: a, removable: o = !1, onRemove: s, children: c, accessibilityRole: l, accessibilityState: u, ...d }) {
+	let { theme: f, scales: p } = K(), m = {
 		filled: {
-			bg: u.surface.secondary,
-			fg: u.text["high-emphasis"],
+			bg: f.surface.secondary,
+			fg: f.text["high-emphasis"],
 			border: "transparent"
 		},
 		accent: {
-			bg: u.surface["accent-primary-light"],
-			fg: u.text["accent-primary"],
+			bg: f.surface["accent-primary-light"],
+			fg: f.text["accent-primary"],
 			border: "transparent"
 		},
 		outline: {
 			bg: "transparent",
-			fg: u.text["high-emphasis"],
-			border: u.border["medium-emphasis"]
+			fg: f.text["high-emphasis"],
+			border: f.border["medium-emphasis"]
 		}
-	}[e], p = r ? u.brand.primary : f.bg, m = r ? u.text["on-inverse"] : i ? u.text.disable : f.fg, h = r ? u.brand.primary : f.border;
+	}[e], h = typeof c == "string" || typeof c == "number" ? `削除: ${c}` : "削除", g = r ? f.brand.primary : m.bg, _ = r ? f.text["on-inverse"] : i ? f.text.disable : m.fg, v = r ? f.brand.primary : m.border;
 	return /* @__PURE__ */ D(W, {
 		style: {
 			flexDirection: "row",
@@ -726,59 +726,68 @@ function Ue({ variant: e = "filled", size: t = "md", shape: n = "pill", selected
 		},
 		children: [/* @__PURE__ */ D(z, {
 			disabled: i,
+			accessibilityRole: l ?? "button",
+			accessibilityState: {
+				selected: r,
+				disabled: i,
+				...u
+			},
 			style: ({ pressed: a }) => [{
 				height: Ve[t],
 				paddingHorizontal: He[t],
 				flexDirection: "row",
 				alignItems: "center",
 				justifyContent: "center",
-				gap: d.spacing.scale[1],
-				borderRadius: n === "pill" ? d.borderRadius.full : d.borderRadius.sm,
+				gap: p.spacing.scale[1],
+				borderRadius: n === "pill" ? p.borderRadius.full : p.borderRadius.sm,
 				borderWidth: e === "outline" || r ? 1 : 0,
-				borderColor: h,
-				backgroundColor: a && !i ? u.active["secondary-button"] : p,
+				borderColor: v,
+				backgroundColor: a && !i ? f.active["secondary-button"] : g,
 				opacity: i ? .6 : 1
 			}, o && {
 				borderTopRightRadius: 0,
 				borderBottomRightRadius: 0
 			}],
-			...l,
+			...d,
 			children: [/* @__PURE__ */ E(H, {
-				style: [q("label.sm"), { color: m }],
+				style: [q("label.sm"), { color: _ }],
 				children: c
 			}), a !== void 0 && /* @__PURE__ */ E(W, {
 				style: {
 					minWidth: 20,
 					paddingHorizontal: 6,
-					borderRadius: d.borderRadius.full,
-					backgroundColor: r ? u.surface.primary : u.surface.tertiary,
+					borderRadius: p.borderRadius.full,
+					backgroundColor: r ? f.surface.primary : f.surface.tertiary,
 					alignItems: "center",
 					justifyContent: "center"
 				},
 				children: /* @__PURE__ */ E(H, {
-					style: [q("label.xs"), { color: r ? u.text["accent-primary"] : u.text["medium-emphasis"] }],
+					style: [q("label.xs"), { color: r ? f.text["accent-primary"] : f.text["medium-emphasis"] }],
 					children: a
 				})
 			})]
 		}), o && /* @__PURE__ */ E(z, {
 			onPress: s,
 			disabled: i,
+			accessibilityRole: "button",
+			accessibilityLabel: h,
+			accessibilityState: { disabled: i },
 			style: ({ pressed: a }) => ({
 				height: Ve[t],
 				paddingHorizontal: 10,
 				alignItems: "center",
 				justifyContent: "center",
-				backgroundColor: a ? u.active["tertiary-button"] : p,
-				borderTopRightRadius: n === "pill" ? d.borderRadius.full : d.borderRadius.sm,
-				borderBottomRightRadius: n === "pill" ? d.borderRadius.full : d.borderRadius.sm,
+				backgroundColor: a ? f.active["tertiary-button"] : g,
+				borderTopRightRadius: n === "pill" ? p.borderRadius.full : p.borderRadius.sm,
+				borderBottomRightRadius: n === "pill" ? p.borderRadius.full : p.borderRadius.sm,
 				borderWidth: e === "outline" || r ? 1 : 0,
 				borderLeftWidth: 0,
-				borderColor: h,
+				borderColor: v,
 				opacity: i ? .6 : 1
 			}),
 			children: /* @__PURE__ */ E(H, {
 				style: [q("label.md"), {
-					color: m,
+					color: _,
 					lineHeight: 14
 				}],
 				children: "×"
@@ -2247,7 +2256,7 @@ function Yt({ checked: e = !1, onChange: t, disabled: n = !1, label: r, descript
 		style: {
 			flexDirection: "row",
 			gap: c.spacing.scale[2],
-			alignItems: "flex-start",
+			alignItems: i ? "flex-start" : "center",
 			minHeight: c.touchTargets.buttonCTA.min,
 			opacity: n ? .6 : 1
 		},
@@ -2255,7 +2264,7 @@ function Yt({ checked: e = !1, onChange: t, disabled: n = !1, label: r, descript
 			pointerEvents: "none",
 			accessibilityElementsHidden: !0,
 			importantForAccessibility: "no-hide-descendants",
-			style: { paddingTop: 2 },
+			style: { paddingTop: i ? 2 : 0 },
 			children: /* @__PURE__ */ E(Jt, {
 				checked: e,
 				disabled: n
@@ -2322,7 +2331,7 @@ function Zt({ options: e, values: t = [], onChange: n, disabled: r = !1 }) {
 		t.includes(e) ? n?.(t.filter((t) => t !== e)) : n?.([...t, e]);
 	};
 	return /* @__PURE__ */ E(W, {
-		style: { gap: i.spacing.scale[3] },
+		style: { gap: i.spacing.scale[1] },
 		children: e.map((e) => /* @__PURE__ */ E(Yt, {
 			label: e.label,
 			description: e.description,
@@ -2337,7 +2346,7 @@ function Zt({ options: e, values: t = [], onChange: n, disabled: r = !1 }) {
 function Qt({ options: e, value: t, onChange: n, disabled: r = !1 }) {
 	let { theme: i, scales: a } = K();
 	return /* @__PURE__ */ E(W, {
-		style: { gap: a.spacing.scale[3] },
+		style: { gap: a.spacing.scale[1] },
 		children: e.map((e) => {
 			let o = t === e.value, s = r || e.disabled;
 			return /* @__PURE__ */ D(z, {
@@ -2346,7 +2355,8 @@ function Qt({ options: e, value: t, onChange: n, disabled: r = !1 }) {
 				style: {
 					flexDirection: "row",
 					gap: a.spacing.scale[2],
-					alignItems: "flex-start",
+					alignItems: e.description ? "flex-start" : "center",
+					minHeight: a.touchTargets.buttonCTA.min,
 					opacity: s ? .5 : 1
 				},
 				accessibilityRole: "radio",
@@ -2360,7 +2370,7 @@ function Qt({ options: e, value: t, onChange: n, disabled: r = !1 }) {
 						borderColor: o ? i.brand.primary : i.border["medium-emphasis"],
 						alignItems: "center",
 						justifyContent: "center",
-						marginTop: 2
+						marginTop: e.description ? 2 : 0
 					},
 					children: o && /* @__PURE__ */ E(W, { style: {
 						width: 10,
@@ -5541,10 +5551,10 @@ function ci({ state: e = "idle", label: t, count: n, compact: r = !1, loading: i
 			style: [q("label.xs"), { color: u.text["high-emphasis"] }],
 			children: n > 99 ? "99+" : n
 		})
-	] }), m = [{
-		minHeight: 36,
-		minWidth: r ? 36 : void 0,
-		paddingHorizontal: d.spacing.scale[2],
+	] }), m = !o && !!c, h = [{
+		minHeight: m ? 36 : void 0,
+		minWidth: r && m ? 36 : void 0,
+		paddingHorizontal: r && !m ? d.spacing.scale[1] : d.spacing.scale[2],
 		paddingVertical: d.spacing.scale[1],
 		borderRadius: d.borderRadius.full,
 		borderWidth: 1,
@@ -5556,19 +5566,19 @@ function ci({ state: e = "idle", label: t, count: n, compact: r = !1, loading: i
 		gap: d.spacing.scale[1],
 		maxWidth: "100%"
 	}, s];
-	return o || !c ? /* @__PURE__ */ E(W, {
-		accessibilityRole: "text",
-		accessibilityLabel: t,
-		style: m,
-		children: p
-	}) : /* @__PURE__ */ E(z, {
+	return m ? /* @__PURE__ */ E(z, {
 		accessibilityRole: "button",
 		accessibilityLabel: t,
 		accessibilityState: { busy: i || e === "syncing" },
 		onPress: c,
-		style: ({ pressed: e }) => [m, e && { opacity: .82 }],
+		style: ({ pressed: e }) => [h, e && { opacity: .82 }],
 		...l,
 		children: p
+	}) : /* @__PURE__ */ E(W, {
+		accessibilityRole: "text",
+		accessibilityLabel: t,
+		style: h,
+		children: p
 	});
 }
 var li = ci;
@@ -6735,36 +6745,36 @@ function Gi(e, t) {
 		};
 	}
 }
-function Ki({ icon: e, emoji: t, label: n, description: r, meta: i, selected: a = !1, loading: o = !1, disabled: s = !1, variant: c = a ? "selected" : "neutral", onPress: l, style: u, accessibilityRole: d, accessibilityState: f, ...p }) {
-	let { theme: m, scales: h } = K(), g = s || o, _ = Gi(c, m);
+function Ki({ icon: e, emoji: t, label: n, description: r, meta: i, indicator: a, selected: o = !1, loading: s = !1, disabled: c = !1, variant: l = o ? "selected" : "neutral", onPress: u, style: d, accessibilityRole: f, accessibilityState: p, ...m }) {
+	let { theme: h, scales: g } = K(), _ = c || s, v = o || l === "selected", y = a != null && a !== !1, b = Gi(l, h);
 	return /* @__PURE__ */ D(z, {
-		onPress: l,
-		disabled: g,
-		accessibilityRole: d ?? "button",
+		onPress: u,
+		disabled: _,
+		accessibilityRole: f ?? "button",
 		accessibilityState: {
-			disabled: g,
-			selected: a,
-			busy: o,
-			...f
+			disabled: _,
+			selected: v,
+			busy: s,
+			...p
 		},
-		...p,
+		...m,
 		style: ({ pressed: e }) => [{
 			minHeight: 96,
 			borderWidth: 1,
-			borderRadius: h.borderRadius.xl,
-			padding: h.spacing.scale[3],
-			gap: h.spacing.scale[3],
+			borderRadius: g.borderRadius.xl,
+			padding: g.spacing.scale[3],
+			gap: g.spacing.scale[3],
 			justifyContent: "space-between",
-			opacity: g ? .5 : 1,
-			..._,
-			backgroundColor: e ? m.surface.secondary : _.backgroundColor
-		}, u],
+			opacity: _ ? .5 : 1,
+			...b,
+			backgroundColor: e ? h.surface.secondary : b.backgroundColor
+		}, d],
 		children: [/* @__PURE__ */ D(W, {
 			style: {
 				flexDirection: "row",
 				alignItems: "flex-start",
 				justifyContent: "space-between",
-				gap: h.spacing.scale[2]
+				gap: g.spacing.scale[2]
 			},
 			children: [/* @__PURE__ */ D(W, {
 				style: {
@@ -6772,7 +6782,7 @@ function Ki({ icon: e, emoji: t, label: n, description: r, meta: i, selected: a
 					minWidth: 0,
 					flexDirection: "row",
 					alignItems: "center",
-					gap: h.spacing.scale[2]
+					gap: g.spacing.scale[2]
 				},
 				children: [
 					t && /* @__PURE__ */ E(H, {
@@ -6783,30 +6793,47 @@ function Ki({ icon: e, emoji: t, label: n, description: r, meta: i, selected: a
 					typeof n == "string" ? /* @__PURE__ */ E(H, {
 						numberOfLines: 1,
 						style: [q("label.md"), {
-							color: m.text["high-emphasis"],
+							color: h.text["high-emphasis"],
 							flex: 1
 						}],
 						children: n
 					}) : n
 				]
-			}), o && /* @__PURE__ */ E(Ge, { size: "sm" })]
+			}), s ? /* @__PURE__ */ E(Ge, { size: "sm" }) : y ? typeof a == "string" || typeof a == "number" ? /* @__PURE__ */ E(H, {
+				style: [q("label.md"), { color: h.text["high-emphasis"] }],
+				children: a
+			}) : a : v ? /* @__PURE__ */ E(W, {
+				pointerEvents: "none",
+				accessibilityElementsHidden: !0,
+				importantForAccessibility: "no-hide-descendants",
+				children: /* @__PURE__ */ E(H, {
+					style: [q("label.md"), { color: h.text["accent-primary"] }],
+					children: "✓"
+				})
+			}) : null]
 		}), (r || i) && /* @__PURE__ */ D(W, {
 			style: {
 				flexDirection: "row",
 				alignItems: "flex-end",
 				justifyContent: "space-between",
-				gap: h.spacing.scale[2]
+				gap: g.spacing.scale[2]
 			},
 			children: [typeof r == "string" ? /* @__PURE__ */ E(H, {
 				style: [q("body.sm"), {
-					color: m.text["medium-emphasis"],
+					color: h.text["medium-emphasis"],
 					flex: 1
 				}],
 				children: r
 			}) : r, typeof i == "string" ? /* @__PURE__ */ E(H, {
-				style: [q("label.sm"), { color: m.text["low-emphasis"] }],
+				style: [q("label.sm"), {
+					color: h.text["low-emphasis"],
+					marginLeft: "auto"
+				}],
+				children: i
+			}) : i && /* @__PURE__ */ E(W, {
+				style: { marginLeft: "auto" },
 				children: i
-			}) : i]
+			})]
 		})]
 	});
 }

package/dist/types/components/patterns/quick-action-grid.d.ts

@@ -7,7 +7,14 @@ interface ActionTileProps extends Omit<React.ComponentProps<"button">, "children
     emoji?: React.ReactNode;
     label: React.ReactNode;
     description?: React.ReactNode;
+    /** カード下段の右端に置く補足情報(例:「所要5分」「要解放」)。選択インジケータには使わない — `indicator` を使う。 */
     meta?: React.ReactNode;
+    /**
+     * 選択状態などを示す小さな表示。**ラベル行の右端**(loading 時に Spinner が入る位置)に置かれる。
+     * 省略時、選択状態なら DS 標準のチェックを表示する。表示自体を消したい場合の口は用意していない
+     * (選択を色だけで伝えると WCAG 1.4.1 に反するため)。
+     */
+    indicator?: React.ReactNode;
     selected?: boolean;
     loading?: boolean;
     variant?: ActionTileVariant;
@@ -16,7 +23,7 @@ interface QuickActionGridProps extends React.ComponentProps<"div"> {
     columns?: QuickActionGridColumns;
     gap?: QuickActionGridGap;
 }
-declare function ActionTile({ className, icon, emoji, label, description, meta, selected, loading, variant, disabled, type, ...props }: ActionTileProps): React.JSX.Element;
+declare function ActionTile({ className, icon, emoji, label, description, meta, indicator, selected, loading, variant, disabled, type, ...props }: ActionTileProps): React.JSX.Element;
 declare function QuickActionGrid({ className, columns, gap, ...props }: QuickActionGridProps): React.JSX.Element;
 export { ActionTile, QuickActionGrid };
 export type { ActionTileProps, ActionTileVariant, QuickActionGridColumns, QuickActionGridGap, QuickActionGridProps };

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

@@ -14,4 +14,4 @@ export interface ChipProps extends Omit<PressableProps, "children" | "style"> {
     onRemove?: () => void;
     children?: React.ReactNode;
 }
-export declare function Chip({ variant, size, shape, selected, disabled, count, removable, onRemove, children, ...rest }: ChipProps): React.JSX.Element;
+export declare function Chip({ variant, size, shape, selected, disabled, count, removable, onRemove, children, accessibilityRole, accessibilityState, ...rest }: ChipProps): React.JSX.Element;

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

@@ -11,7 +11,14 @@ export interface ActionTileProps extends AccessibilityProps {
     emoji?: React.ReactNode;
     label: React.ReactNode;
     description?: React.ReactNode;
+    /** カード下段の右端に置く補足情報(例:「所要5分」「要解放」)。選択インジケータには使わない — `indicator` を使う。 */
     meta?: React.ReactNode;
+    /**
+     * 選択状態などを示す小さな表示。**ラベル行の右端**(loading 時に Spinner が入る位置)に置かれる。
+     * 省略時、選択状態なら DS 標準のチェックを表示する。表示自体を消したい場合の口は用意していない
+     * (選択を色だけで伝えると WCAG 1.4.1 に反するため)。
+     */
+    indicator?: React.ReactNode;
     selected?: boolean;
     loading?: boolean;
     disabled?: boolean;
@@ -25,5 +32,5 @@ export interface QuickActionGridProps {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function ActionTile({ icon, emoji, label, description, meta, selected, loading, disabled, variant, onPress, style, accessibilityRole, accessibilityState, ...accessibilityProps }: ActionTileProps): React.JSX.Element;
+export declare function ActionTile({ icon, emoji, label, description, meta, indicator, selected, loading, disabled, variant, onPress, style, accessibilityRole, accessibilityState, ...accessibilityProps }: ActionTileProps): React.JSX.Element;
 export declare function QuickActionGrid({ columns, gap, children, style, }: QuickActionGridProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "1.51.1",
+  "version": "1.52.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",

package/src/components/COMPONENT_LOOKUP.md

@@ -144,7 +144,7 @@
 | ProgressSteps | `@/components/patterns/progress-steps` | — | Step2Active, FirstStep, ThirdStep, AllComplete, ThreeSteps |
 | AUTO_PROMPT_SUPPRESSION_EVENT, AutoPrompt, PromptCoordinatorProvider | `@/components/patterns/prompt-coordinator` | — | Default |
 | Prose | `@/components/patterns/prose` | — | PrivacyPolicy, SingleSection |
-| ActionTile, QuickActionGrid | `@/components/patterns/quick-action-grid` | — | EmojiOnly, IconAndLabel, WithMeta, NarrowWithLongMeta |
+| ActionTile, QuickActionGrid | `@/components/patterns/quick-action-grid` | — | EmojiOnly, IconAndLabel, WithMeta, IndicatorOverride, SelectedWithoutDescription, NarrowWithLongMeta |
 | ReviewOverlay | `@/components/patterns/review-overlay` | — | Default, WithPins |
 | Screen | `@/components/patterns/screen` | — | ScrollableWithFooter, WithHeader, FixedPhotoHero |
 | SearchBar | `@/components/patterns/search-bar` | — | Default, WithValue, Disabled, WithOnSearch |