ksk-design-system 2.3.0 → 2.5.0

package/DESIGN.md

@@ -34,9 +34,9 @@ typography:
   fontFamily: "system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif"
   display:  { fontSize: "48px", lineHeight: "1.25", fontWeight: 700 }   # typo-display-xl
   heading:  { fontSize: "18px", lineHeight: "1.5",  fontWeight: 700 }   # typo-heading-lg（基準）
-  body:     { fontSize: "14px", lineHeight: "1.75", fontWeight: 400 }   # typo-body-md（基準）
+  body:     { fontSize: "16px", lineHeight: "1.75", fontWeight: 400 }   # typo-body-md（基準）
   label:    { fontSize: "12px", lineHeight: "1.5",  fontWeight: 500 }   # typo-label-sm
-  caption:  { fontSize: "11px", lineHeight: "1.5",  fontWeight: 400 }   # typo-caption（注釈/法的表記専用。本文の下限は body=12px。10px の typo-body-xs は補助ラベル専用で本文禁止）
+  caption:  { fontSize: "11px", lineHeight: "1.5",  fontWeight: 400 }   # typo-caption（注釈/法的表記専用。本文の下限は body=14px。12px の typo-body-xs は補助ラベル専用で本文禁止）
 rounded:
   sm: "4px"
   surface: "14px"  # Card / Input / Popover  → var(--Radius-Surface)
@@ -153,7 +153,7 @@ KSK の必須正本・publish 依存にせず、KSK 固有の multi-theme / nati
 `typo-*` ユーティリティ1クラスに size/line-height/weight/tracking を集約。`text-sm`/`font-bold` 等の個別指定は禁止。
 
 - 見出し: `typo-heading-{sm..3xl}`（14→28px, line-height 1.5, 700）
-- 本文: `typo-body-{xs..lg}`（10→16px, line-height 1.75 系）
+- 本文: `typo-body-{xs..lg}`（12→18px, line-height 1.75 系）
 - ラベル: `typo-label-{xs..lg}`（10→16px, 500）/ 特大: `typo-display-xl`(48px)
 - 色は別指定: `className="typo-body-sm text-[var(--Text-Low-Emphasis)]"`
 

package/README.md

@@ -88,6 +88,12 @@ DS のルールが適用されません。既存ファイルはスキップさ
 
 独自ブランドのテーマを使う場合は、この後にテーマCSSをimportしてください。
 
+`preset` を使わずトークン CSS を個別 subpath で import する構成では、角丸トークン
+（`--Radius-Surface` / `--Radius-Modal` / `--Radius-Sheet`）は
+`ksk-design-system/tokens/product-theme` に含まれます（issue #553）。
+product-theme を読まず Radius だけが欲しい場合は
+`@import "ksk-design-system/tokens/radius";` を使ってください。
+
 Tailwind CSS v4 は `node_modules` を既定では走査しません。`@source` がないと、
 DS 内部だけで使うレイアウト・サイズ・状態クラスが生成されず、コンポーネントの表示や操作が崩れます。
 consumer 側の Tailwind と DS を同じビルドで処理するため、上記の設定をセットで使用してください。

package/contracts/components.json

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

package/contracts/token-hex-cache.json

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

@@ -7619,7 +7619,16 @@ function Yl({ value: e, onChange: t, placeholder: n, minRows: r = 3, density: i
 		d();
 	}, [e, d]), u.useEffect(() => {
 		let e = () => d();
-		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+		window.addEventListener("resize", e);
+		let t = l.current, n = t?.getBoundingClientRect().width, r = null, i = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+			let e = t?.getBoundingClientRect().width;
+			e !== n && (n = e, r !== null && cancelAnimationFrame(r), r = requestAnimationFrame(() => {
+				r = null, d();
+			}));
+		});
+		return t && i?.observe(t), () => {
+			window.removeEventListener("resize", e), i?.disconnect(), r !== null && cancelAnimationFrame(r);
+		};
 	}, [d]);
 	let f = a != null && a > 0 ? e.length / a : 0, p = a == null ? "" : e.length >= a ? "text-[var(--Text-Caution)]" : f >= .7 ? "text-[var(--Text-Warning)]" : "text-[var(--Text-Low-Emphasis)]", m = o === void 0 ? a != null : o;
 	return /* @__PURE__ */ V("div", {
@@ -14231,12 +14240,24 @@ function sp({ className: e, steps: t, currentStep: n, ...r }) {
 }
 //#endregion
 //#region src/components/patterns/search-bar.tsx
-function cp({ className: e, onSearch: t, asForm: n = !1, ...r }) {
-	let i = (e) => {
-		n || e.key === "Enter" && !su(e) && t && t(e.currentTarget.value);
-	}, a = (e) => {
-		e.preventDefault(), t && t(e.currentTarget.elements.namedItem("search")?.value ?? "");
-	}, o = /* @__PURE__ */ V("svg", {
+function cp({ className: e, onSearch: t, asForm: n = !1, onKeyDown: r, onCompositionStart: i, onCompositionEnd: a, ...o }) {
+	let s = u.useRef(!1), c = u.useRef(!1), l = u.useRef(null);
+	u.useEffect(() => () => {
+		l.current !== null && clearTimeout(l.current);
+	}, []);
+	let d = (e) => {
+		if (r?.(e), !(e.defaultPrevented || e.key !== "Enter")) {
+			if (s.current || su(e)) {
+				c.current = !0, l.current !== null && clearTimeout(l.current), l.current = setTimeout(() => {
+					c.current = !1, l.current = null;
+				}, 0);
+				return;
+			}
+			c.current = !1, l.current !== null && (clearTimeout(l.current), l.current = null), n || t?.(e.currentTarget.value);
+		}
+	}, f = (e) => {
+		e.preventDefault(), !s.current && !c.current && t && t(e.currentTarget.elements.namedItem("search")?.value ?? "");
+	}, p = /* @__PURE__ */ V("svg", {
 		width: "20",
 		height: "20",
 		viewBox: "0 0 20 20",
@@ -14255,25 +14276,31 @@ function cp({ className: e, onSearch: t, asForm: n = !1, ...r }) {
 			strokeWidth: "2",
 			strokeLinecap: "round"
 		})]
-	}), s = /* @__PURE__ */ B("input", {
+	}), m = /* @__PURE__ */ B("input", {
 		type: "search",
 		name: "search",
 		"data-slot": "input",
 		enterKeyHint: "search",
 		className: G("flex h-12 w-full rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] pl-10 pr-4 typo-body-md text-[var(--Text-High-Emphasis)]", "placeholder:text-[var(--Text-Low-Emphasis)]", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:border-[var(--Border-Accent-Primary)]", "disabled:cursor-not-allowed disabled:opacity-50"),
-		onKeyDown: i,
-		...r
+		onKeyDown: d,
+		onCompositionStart: (e) => {
+			s.current = !0, i?.(e);
+		},
+		onCompositionEnd: (e) => {
+			s.current = !1, a?.(e);
+		},
+		...o
 	});
 	return n ? /* @__PURE__ */ V("form", {
 		"data-slot": "search-bar",
 		role: "search",
 		className: G("relative w-full", e),
-		onSubmit: a,
-		children: [o, s]
+		onSubmit: f,
+		children: [p, m]
 	}) : /* @__PURE__ */ V("div", {
 		"data-slot": "search-bar",
 		className: G("relative w-full", e),
-		children: [o, s]
+		children: [p, m]
 	});
 }
 //#endregion
@@ -18191,27 +18218,29 @@ var _g = {
 	}
 };
 function vg({ url: e, title: t, providers: n, region: r = "global", layout: i = "circle", className: a, onShare: o, onCopy: s, copiedLabel: c = "コピーしました", copyErrorLabel: l = "コピーできませんでした", feedbackDuration: d = 2e3, groupLabel: f = "シェア" }) {
-	let [p, m] = u.useState(null), h = u.useRef(null), g = n ?? hg[r];
+	let [p, m] = u.useState(null), h = u.useRef(null), g = u.useRef(0), _ = n ?? hg[r];
 	u.useEffect(() => () => {
-		h.current && clearTimeout(h.current);
+		g.current += 1, h.current && clearTimeout(h.current);
 	}, []);
-	let _ = (e, t) => {
+	let v = (e, t) => {
 		h.current && clearTimeout(h.current), m({
 			provider: e,
 			result: t
-		}), s?.(t), h.current = setTimeout(() => {
+		}), h.current = setTimeout(() => {
 			m(null), h.current = null;
 		}, d);
-	}, v = async (t) => {
+	}, y = async (t) => {
+		let n = ++g.current, r = "success";
 		try {
 			if (typeof navigator > "u" || !navigator.clipboard?.writeText) throw Error("Clipboard API is unavailable");
-			await navigator.clipboard.writeText(e), _(t, "success");
+			await navigator.clipboard.writeText(e);
 		} catch {
-			_(t, "error");
+			r = "error";
 		}
-	}, y = async (n) => {
+		n === g.current && v(t, r), s?.(r);
+	}, b = async (n) => {
 		if (o?.(n), n === "copy") {
-			await v(n);
+			await y(n);
 			return;
 		}
 		let r = _g[n];
@@ -18225,7 +18254,7 @@ function vg({ url: e, title: t, providers: n, region: r = "global", layout: i =
 			return;
 		}
 		if (r.webShare) {
-			await v(n);
+			await y(n);
 			return;
 		}
 		r.buildUrl && window.open(r.buildUrl(e, t), "_blank", "noopener,noreferrer,width=600,height=500");
@@ -18237,11 +18266,11 @@ function vg({ url: e, title: t, providers: n, region: r = "global", layout: i =
 		role: "group",
 		"aria-label": f,
 		"data-region": r,
-		children: g.map((e) => {
+		children: _.map((e) => {
 			let t = _g[e], n = p?.provider === e ? p.result : null, r = n === "success" ? c : n === "error" ? l : t.label;
 			return /* @__PURE__ */ V("button", {
 				type: "button",
-				onClick: () => void y(e),
+				onClick: () => void b(e),
 				"aria-label": t.label,
 				className: "flex min-h-11 shrink-0 flex-col items-center gap-2 rounded-lg cursor-pointer focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
 				children: [/* @__PURE__ */ V("span", {
@@ -18272,11 +18301,11 @@ function vg({ url: e, title: t, providers: n, region: r = "global", layout: i =
 		role: "group",
 		"aria-label": f,
 		"data-region": r,
-		children: g.map((e) => {
+		children: _.map((e) => {
 			let t = _g[e], n = p?.provider === e ? p.result : null, r = n === "success" ? c : n === "error" ? l : t.label;
 			return /* @__PURE__ */ V("button", {
 				type: "button",
-				onClick: () => void y(e),
+				onClick: () => void b(e),
 				"aria-label": t.label,
 				className: G("inline-flex min-h-11 items-center gap-2 px-3 py-2 rounded-full border border-[var(--Border-Medium-Emphasis)] typo-label-xs transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", t.inlineClass),
 				children: [/* @__PURE__ */ V("span", {