ksk-design-system 1.65.0 → 1.66.0

package/contracts/components.json

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

package/contracts/rules.json

@@ -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.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

@@ -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.0",
   "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");