ksk-design-system 1.65.0 → 1.66.1

package/README.md

@@ -229,6 +229,22 @@ consumer が shadcn 既定の `src/components/ui/` に部品を置いても中
 （v1.63.x までは単一の `excludes` をパスと行内容の両方に OR で当てていたため、
 このディレクトリ名だけで 13 ルールが同時に黙っていました）。
 
+`excludeLines` の各値は **literal 文字列**として `line.includes(value)` で判定されます
+（正規表現ではありません）。`shadow-\[` のように正規表現エスケープした値を書くと、実ソースの
+`shadow-[var(--shadow-md)]` と一致せず除外が一度も効きません（issue #463）。
+`scripts/check-rules-contract.mjs`（`npm run check` に組み込み済み）が `excludeLines` /
+`excludePaths` / `excludeDsPaths` 内のバックスラッシュ混入を検出します。
+
+#### P029: テンプレートリテラル className の許容範囲（issue #464）
+
+`className={\`...\${...}...\`}` の補間部（`${...}`）が**文字列リテラルのみで構成される式**
+（単純三項 `cond ? "a" : "b"` / `&&` / ネスト三項）なら、Tailwind の静的クラス抽出を壊さないため
+P029 の対象外です。CLAUDE.md の実装前セルフチェックにある「クラス名は完全な文字列で書く。分岐は
+三項演算子か cva variant で」という方針と一致させています。
+
+識別子・関数呼び出し・メンバーアクセスの補間（`` `bg-${color}` `` 等）や、テンプレートリテラルの
+入れ子は静的抽出できないため引き続き検出します。`cn()` / `clsx()` / CVA を使ってください。
+
 ### Jest（CommonJS）でコンポーネントをテストする
 
 このパッケージは **ESM-only** です。CJS との dual build は配布せず、Jest

package/bin/lint.js

@@ -789,6 +789,7 @@ function lintFile(file, cwd, rules, options = {}) {
       if (matchesRuleExclude(rule, { file: rel, line: rawLine, isDsFile })) continue
       const maskedLine = maskedLines[index] ?? ""
       if (!regex.test(maskedLine)) continue
+      if (rule.id === "P029" && isP029TemplateLiteralExempt(rawLine)) continue
       if (ignores.suppresses(rule.id ?? "UNKNOWN", index + 1)) continue
       findings.push(toFinding(rule, rel, index + 1, platform))
     }
@@ -1119,6 +1120,188 @@ function maskTemplateLiterals(source) {
   return maskStrings(source, TEMPLATE_DELIMITER_ONLY)
 }
 
+/**
+ * P029（テンプレートリテラル className 禁止）の例外判定（issue #464）。
+ *
+ * `className={\`base ${cond ? "a" : "b"}\`}` のように、補間部（`${...}`）が
+ * 「文字列リテラルのみで構成される式」（三項・&&・ネスト三項を含む）なら
+ * Tailwind の静的クラス抽出を壊さないため対象外にする。`${color}` のような
+ * 識別子・関数呼び出し・メンバーアクセスの補間は従来どおり検出する。
+ *
+ * 文字列一致ベースの簡易パーサーであり、TypeScript の完全な式パーサーではない。
+ * 判定に迷うケース（バッククォートのネスト等）は安全側＝「例外にしない」を返す。
+ */
+
+/** 文字列/括弧の深さを見ながら、depth 0 の `?` `:` `&&` `||` の位置を集める */
+function scanTopLevelOperatorTokens(expr) {
+  const tokens = []
+  let depth = 0
+  let quote = null
+  for (let i = 0; i < expr.length; i++) {
+    const ch = expr[i]
+    if (quote) {
+      if (ch === "\\") {
+        i += 1
+        continue
+      }
+      if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch
+      continue
+    }
+    if (ch === "(" || ch === "[" || ch === "{") {
+      depth += 1
+      continue
+    }
+    if (ch === ")" || ch === "]" || ch === "}") {
+      depth -= 1
+      continue
+    }
+    if (depth !== 0) continue
+    if (ch === "?") tokens.push({ index: i, type: "?" })
+    else if (ch === ":") tokens.push({ index: i, type: ":" })
+    else if (ch === "&" && expr[i + 1] === "&") {
+      tokens.push({ index: i, type: "&&" })
+      i += 1
+    } else if (ch === "|" && expr[i + 1] === "|") {
+      tokens.push({ index: i, type: "||" })
+      i += 1
+    }
+  }
+  return tokens
+}
+
+/** `cond ? a : b` を depth 0 の `?`/`:` のバランスで分割する（ネスト三項対応） */
+function splitTopLevelTernary(expr) {
+  const tokens = scanTopLevelOperatorTokens(expr)
+  const questionIndex = tokens.findIndex((token) => token.type === "?")
+  if (questionIndex === -1) return null
+  let balance = 1
+  for (let i = questionIndex + 1; i < tokens.length; i++) {
+    if (tokens[i].type === "?") balance += 1
+    else if (tokens[i].type === ":") {
+      balance -= 1
+      if (balance === 0) {
+        const questionPos = tokens[questionIndex].index
+        const colonPos = tokens[i].index
+        return {
+          whenTrue: expr.slice(questionPos + 1, colonPos),
+          whenFalse: expr.slice(colonPos + 1),
+        }
+      }
+    }
+  }
+  return null
+}
+
+/** `lhs && rhs` / `lhs || rhs` を最初の depth 0 演算子で分割する */
+function splitTopLevelLogical(expr) {
+  const token = scanTopLevelOperatorTokens(expr).find(
+    (candidate) => candidate.type === "&&" || candidate.type === "||",
+  )
+  if (!token) return null
+  return { rhs: expr.slice(token.index + token.type.length) }
+}
+
+function isStringLiteralExpr(expr) {
+  const trimmed = expr.trim()
+  return /^"(?:[^"\\]|\\.)*"$/.test(trimmed) || /^'(?:[^'\\]|\\.)*'$/.test(trimmed)
+}
+
+/** `(expr)` のように括弧が式全体をちょうど一度だけ包んでいるか */
+function isFullyParenWrapped(expr) {
+  if (expr[0] !== "(" || expr[expr.length - 1] !== ")") return false
+  let depth = 0
+  for (let i = 0; i < expr.length; i++) {
+    if (expr[i] === "(") depth += 1
+    else if (expr[i] === ")") {
+      depth -= 1
+      if (depth === 0) return i === expr.length - 1
+    }
+  }
+  return false
+}
+
+/** 補間式が「文字列リテラルのみで構成される式」か（issue #464） */
+export function isLiteralOnlyInterpolation(expr) {
+  const trimmed = (expr ?? "").trim()
+  if (trimmed === "") return false
+  // ネストしたテンプレートリテラルは判定を諦めて安全側（=対象外にしない）に倒す
+  if (trimmed.includes("`")) return false
+  if (isStringLiteralExpr(trimmed)) return true
+  if (isFullyParenWrapped(trimmed)) return isLiteralOnlyInterpolation(trimmed.slice(1, -1))
+  const ternary = splitTopLevelTernary(trimmed)
+  if (ternary) {
+    return isLiteralOnlyInterpolation(ternary.whenTrue) && isLiteralOnlyInterpolation(ternary.whenFalse)
+  }
+  const logical = splitTopLevelLogical(trimmed)
+  if (logical) return isLiteralOnlyInterpolation(logical.rhs)
+  return false
+}
+
+/** テンプレートリテラル（バッククォート開始位置つき）の中身を取り出す。同一行内で閉じない場合は null */
+function extractTemplateLiteralBody(line, backtickIndex) {
+  let i = backtickIndex + 1
+  let braceDepth = 0
+  let content = ""
+  while (i < line.length) {
+    const ch = line[i]
+    if (ch === "\\") {
+      content += ch + (line[i + 1] ?? "")
+      i += 2
+      continue
+    }
+    if (braceDepth === 0 && ch === "`") return content
+    if (ch === "{") braceDepth += 1
+    else if (ch === "}" && braceDepth > 0) braceDepth -= 1
+    content += ch
+    i += 1
+  }
+  return null
+}
+
+/** テンプレートリテラルの中身から `${...}` の中身だけを depth バランスで取り出す */
+function extractInterpolationExprs(content) {
+  const exprs = []
+  let i = content.indexOf("${")
+  while (i !== -1) {
+    const start = i + 2
+    let depth = 1
+    let j = start
+    while (j < content.length && depth > 0) {
+      if (content[j] === "{") depth += 1
+      else if (content[j] === "}") depth -= 1
+      j += 1
+    }
+    if (depth === 0) {
+      exprs.push(content.slice(start, j - 1))
+      i = content.indexOf("${", j)
+    } else {
+      exprs.push(content.slice(start))
+      break
+    }
+  }
+  return exprs
+}
+
+/**
+ * P029 が fire した行が「className の template literal で、補間部が全て
+ * 文字列リテラルのみで構成される式」なら true（＝対象外にしてよい）を返す。
+ */
+export function isP029TemplateLiteralExempt(line) {
+  const classNameIndex = line.indexOf("className=")
+  if (classNameIndex === -1) return false
+  const backtickIndex = line.indexOf("`", classNameIndex)
+  if (backtickIndex === -1) return false
+  const content = extractTemplateLiteralBody(line, backtickIndex)
+  if (content === null) return false
+  const interpolations = extractInterpolationExprs(content)
+  if (interpolations.length === 0) return false
+  return interpolations.every((expr) => isLiteralOnlyInterpolation(expr))
+}
+
 function excludeList(value) {
   return Array.isArray(value) ? value : []
 }

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.65.0",
+    "version": "1.66.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,

package/contracts/rules.json

@@ -228,7 +228,7 @@
       "pattern": "shadow-md\\b|shadow-lg\\b|shadow-xl\\b|shadow-2xl\\b",
       "excludePaths": [".stories."],
       "excludeDsPaths": ["components/ui/", "components/patterns/"],
-      "excludeLines": ["shadow-\\["],
+      "excludeLines": ["shadow-["],
       "message": "DS 定義外のシャドウ禁止",
       "fix": "shadow-[var(--shadow-sm/md/lg/dialog/tooltip)]"
     },
@@ -269,7 +269,7 @@
       "severity": "warning",
       "category": "accessibility",
       "appliesTo": ["dom"],
-      "pattern": "<div.*onClick|<span.*onClick",
+      "pattern": "<div\\b(?:(?!<|>)[\\s\\S])*?\\sonClick\\b|<span\\b(?:(?!<|>)[\\s\\S])*?\\sonClick\\b",
       "excludePaths": [".stories."],
       "excludeLines": [],
       "message": "<div onClick> 禁止（キーボード操作・スクリーンリーダー不可）",

package/contracts/token-hex-cache.json

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

@@ -11439,16 +11439,21 @@ function Fu({ images: e, indicatorType: t = "thumbnail", aspectRatio: n = "4/3",
 		className: G("flex flex-col gap-2", i),
 		children: [
 			/* @__PURE__ */ V("div", {
-				className: G("relative w-full overflow-hidden rounded-xl bg-[var(--Surface-Tertiary)] cursor-pointer", Pu[n] ?? "aspect-[4/3]"),
+				className: G("relative w-full overflow-hidden rounded-xl bg-[var(--Surface-Tertiary)]", r && "cursor-pointer", Pu[n] ?? "aspect-[4/3]"),
 				onTouchStart: m,
 				onTouchEnd: h,
-				onClick: () => r?.(c),
 				children: [
 					g && /* @__PURE__ */ B("img", {
 						src: g.src,
 						alt: g.alt ?? s(c),
 						className: "w-full h-full object-cover transition-opacity duration-[var(--Motion-Duration-Base)]"
 					}, c),
+					r && /* @__PURE__ */ B("button", {
+						type: "button",
+						className: "absolute inset-0 z-0 h-full w-full cursor-pointer appearance-none",
+						"aria-label": s(c),
+						onClick: () => r(c)
+					}),
 					e.length > 1 && /* @__PURE__ */ V("span", {
 						className: "absolute bottom-2 right-2 bg-[var(--Overlay-Medium)] text-[var(--Text-on-Media)] typo-label-xs px-2 py-0.5 rounded-full",
 						children: [
@@ -13727,18 +13732,14 @@ var df = {
 };
 function ff({ className: e, label: t, value: n, unit: r, trend: i, icon: a, variant: o = "default", interactive: s, onClick: c, ...l }) {
 	let u = df[o], d = s ?? !!c;
-	return /* @__PURE__ */ V("div", {
+	return /* @__PURE__ */ V(d ? "button" : "div", {
+		type: d ? "button" : void 0,
 		"data-slot": "stat-card",
 		"data-variant": o,
 		"data-interactive": d || void 0,
-		role: d ? "button" : void 0,
-		tabIndex: d ? 0 : void 0,
 		onClick: d ? c : void 0,
-		onKeyDown: d ? (e) => {
-			!d || !c || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c(e));
-		} : void 0,
-		className: G("flex flex-col gap-2 rounded-lg border border-[var(--Border-Low-Emphasis)] p-4 shadow-[var(--shadow-md)]", u.card, d && [
-			"cursor-pointer transition-all",
+		className: G("flex flex-col gap-2 rounded-lg border border-[var(--Border-Low-Emphasis)] p-4 text-left shadow-[var(--shadow-md)]", u.card, d && [
+			"w-full appearance-none cursor-pointer transition-all",
 			u.hoverBg,
 			"active:scale-[0.98]",
 			"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:ring-offset-2"

package/dist/native/ui.js

@@ -5839,21 +5839,21 @@ function xi({ banners: e, itemWidth: t, height: n = 160, showIndicator: r = !0 }
 }
 //#endregion
 //#region src/native/components/SearchBar.tsx
-function Si({ value: e, onChange: t, placeholder: n = "検索", onSubmit: r, onClear: i, autoFocus: a }) {
-	let { theme: o, scales: s } = G();
+function Si({ value: e, onChange: t, placeholder: n = "検索", onSubmit: r, onClear: i, autoFocus: a, accessibilityLabel: o, accessibilityHint: s, accessibilityRole: c, accessibilityState: l, ...u }) {
+	let { theme: d, scales: f } = G();
 	return /* @__PURE__ */ D(H, {
 		style: {
 			flexDirection: "row",
 			alignItems: "center",
-			gap: s.spacing.scale[2],
-			paddingHorizontal: s.spacing.scale[3],
+			gap: f.spacing.scale[2],
+			paddingHorizontal: f.spacing.scale[3],
 			height: 44,
-			backgroundColor: o.surface.secondary,
-			borderRadius: s.borderRadius.full
+			backgroundColor: d.surface.secondary,
+			borderRadius: f.borderRadius.full
 		},
 		children: [
 			/* @__PURE__ */ E(B, {
-				style: [Y("label.md"), { color: o.text["low-emphasis"] }],
+				style: [Y("label.md"), { color: d.text["low-emphasis"] }],
 				children: "🔍"
 			}),
 			/* @__PURE__ */ E(V, {
@@ -5861,12 +5861,17 @@ function Si({ value: e, onChange: t, placeholder: n = "検索", onSubmit: r, onC
 				onChangeText: t,
 				onSubmitEditing: r,
 				placeholder: n,
-				placeholderTextColor: o.text["low-emphasis"],
+				placeholderTextColor: d.text["low-emphasis"],
 				returnKeyType: "search",
 				autoFocus: a,
+				accessibilityLabel: o ?? n,
+				accessibilityHint: s,
+				accessibilityRole: c,
+				accessibilityState: l,
+				...u,
 				style: [Y("body.md"), {
 					flex: 1,
-					color: o.text["high-emphasis"],
+					color: d.text["high-emphasis"],
 					paddingVertical: 0
 				}]
 			}),
@@ -5880,12 +5885,12 @@ function Si({ value: e, onChange: t, placeholder: n = "検索", onSubmit: r, onC
 						width: 20,
 						height: 20,
 						borderRadius: 10,
-						backgroundColor: o.surface.tertiary,
+						backgroundColor: d.surface.tertiary,
 						alignItems: "center",
 						justifyContent: "center"
 					},
 					children: /* @__PURE__ */ E(B, {
-						style: [Y("label.xs"), { color: o.text["medium-emphasis"] }],
+						style: [Y("label.xs"), { color: d.text["medium-emphasis"] }],
 						children: "×"
 					})
 				})

package/dist/types/components/patterns/stat-card.d.ts

@@ -20,10 +20,9 @@ interface StatCardProps extends Omit<React.ComponentProps<"div">, "onClick"> {
      */
     variant?: StatCardVariant;
     /**
-     * Interactive モード: true にすると card が button のように振る舞う。
-     * - `role=button` / `tabIndex=0` / focus-visible ring / active:scale を自動付与
-     * - onClick / onKeyDown (Enter/Space) を有効化
-     * - hover で軽い陰り、cursor-pointer
+     * Interactive モード: true にすると card が実 `<button>` として描画される。
+     * - ネイティブ button のフォーカスリング・キーボード操作（Enter/Space）を自動付与
+     * - hover で軽い陰り、cursor-pointer、active:scale
      *
      * onClick だけ渡しても interactive=true 扱いする。
      */

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

@@ -1,5 +1,11 @@
 import React from "react";
-export interface SearchBarProps {
+import { type AccessibilityProps } from "react-native";
+/**
+ * `AccessibilityProps` を継承しているため、`accessibilityLabel` /
+ * `accessibilityHint` / `accessibilityState` / `accessibilityRole` を
+ * そのまま渡せる（issue #465）。内部の `TextInput` へそのまま転送する。
+ */
+export interface SearchBarProps extends AccessibilityProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -7,4 +13,4 @@ export interface SearchBarProps {
     onClear?: () => void;
     autoFocus?: boolean;
 }
-export declare function SearchBar({ value, onChange, placeholder, onSubmit, onClear, autoFocus, }: SearchBarProps): React.JSX.Element;
+export declare function SearchBar({ value, onChange, placeholder, onSubmit, onClear, autoFocus, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, ...accessibilityProps }: SearchBarProps): React.JSX.Element;

package/package.json

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

package/src/styles/source-safelist.css

@@ -100,6 +100,7 @@
 @source inline("animate-in");
 @source inline("animate-pulse");
 @source inline("animate-spin");
+@source inline("appearance-none");
 @source inline("aria-disabled:opacity-50");
 @source inline("aria-invalid:border-[var(--Border-Caution)]");
 @source inline("aria-invalid:ring-[var(--Caution-Base)]/20");