ksk-design-system 2.5.0 → 2.6.1

package/README.md

@@ -93,6 +93,15 @@ DS のルールが適用されません。既存ファイルはスキップさ
 `ksk-design-system/tokens/product-theme` に含まれます（issue #553）。
 product-theme を読まず Radius だけが欲しい場合は
 `@import "ksk-design-system/tokens/radius";` を使ってください。
+同様にセクション余白トークン（`--Space-Section-*`）も
+`ksk-design-system/tokens/product-theme` に含まれます（issue #560）。
+Section Spacing だけが欲しい場合は
+`@import "ksk-design-system/tokens/section-spacing";` を使ってください。
+同様に重なり順トークン（`--Z-*`）と影トークン（`--shadow-*`）も
+`ksk-design-system/tokens/product-theme` に含まれます（issue #563）。
+それぞれ単体が欲しい場合は
+`@import "ksk-design-system/tokens/z-index";` /
+`@import "ksk-design-system/tokens/shadow";` を使ってください。
 
 Tailwind CSS v4 は `node_modules` を既定では走査しません。`@source` がないと、
 DS 内部だけで使うレイアウト・サイズ・状態クラスが生成されず、コンポーネントの表示や操作が崩れます。

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.5.0",
+    "version": "2.6.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -625,7 +625,15 @@
     {
       "name": "ProgressRing",
       "path": "src/components/ui/progress-ring.tsx",
-      "description": "円形プログレス表示。SVGベース。0〜100の進捗を円弧で表示。中央にラベル（%またはカスタム）表示。サイズはプリセット4種に加えて px 数値、線の太さは strokeWidth、配色は color / trackColor（semantic トークンのみ）で上書きできる（issue #480）。",
+      "description": "円形プログレス表示。SVGベース。0〜100の進捗を円弧で表示。中央にラベル（%またはカスタム ReactNode）表示。サイズはプリセット4種に加えて px 数値、線の太さは strokeWidth、配色は tone（意味名）または color / trackColor（semantic トークンのみ）で上書きできる（issue #480 / #559）。",
+      "props": {
+        "tone": "\"accent\" | \"success\" | \"caution\" | \"warning\" | \"info\"（既定 \"accent\"）— リングの塗り色を意味名で指定する（issue #559）。Web/Native 共通の語彙で、Web は semantic トークン、Native は theme の同じ役割へ解決する",
+        "color": "ProgressRingColorToken（Web のみ）— semantic トークンを直接指定する逃げ道。指定時は tone より優先する",
+        "colors": "{ fill?: string; track?: string; center?: string }（Native のみ）— consumer 所有の brand palette や DS トークンに無い意味色を注入する逃げ道（Calendar.colors / Sheet.surfaceColor と同じ位置づけ）。fill は tone より優先する。center は react-native-svg が無い環境のフォールバック描画でのみ使う中央の塗り",
+        "lineCap": "\"butt\" | \"round\"（Web 既定 \"round\" / Native 既定 \"butt\"）— 円弧の線端。各プラットフォームの従来の見た目を保つため既定が異なる。Native のフォールバック描画では常に butt 相当",
+        "accessible / accessibilityLabel / accessibilityRole / accessibilityValue / accessibilityElementsHidden / importantForAccessibility / testID": "（Native のみ）ルート View へ渡す読み上げ系 props。既定は accessible=true / accessibilityRole=\"progressbar\" / accessibilityValue={ min: 0, max, now: クランプ後の value } / accessibilityLabel は文字列 label かフォールバックの「進捗」で、Web の role=\"progressbar\" と対称（issue #564）。指定した値は必ず優先される。周りのカードが説明文を持つ場合は accessible={false} を渡すと役割・値・名前の既定ごと外れる",
+        "label": "React.ReactNode — リング中央に置く要素。省略時はパーセント表示。showLabel={false} のときは描画しない"
+      },
       "sizes": [
         "sm",
         "md",
@@ -636,8 +644,12 @@
       "rules": [
         "Use for circular progress only. Use <Progress> for linear progress bar.",
         "size はまずプリセット（sm=32 / md=48 / lg=64 / xl=96px）から選ぶ。既存デザインの実寸に合わせる必要があるときだけ px の数値を渡す。",
-        "color / trackColor は semantic トークンの var(--...) 文字列のみ。生 hex と --Primitive-* は型で受け付けない（P015）。",
+        "色は原則 tone（意味名）で指定する。同じ画面に色違いのリングを並べる用途はこれで足りる（issue #559）。Native の colors（生値注入）は、必要な色が DS theme に無いとき（consumer の brand palette / DS トークンに無い意味色）だけに使う。",
+        "color / trackColor は Web のみで、semantic トークンの var(--...) 文字列だけを受け付ける。生 hex と --Primitive-* は型で受け付けない（P015）。Native は var() を解決できないため tone を使う。",
+        "リング中央へ任意の要素を置くときは label（ReactNode）を使う。中央領域はリングの内径で、はみ出しは切らない（収める責任は利用側）。",
+        "Native は SVG 描画時に中央を塗らない（面の色が透ける）。react-native-svg が無い環境のフォールバック描画だけ中央の円板が要るので、面の色と違う場合は colors.center を渡す（issue #559）。",
         "strokeWidth が径の半分以上でも描画は消えず、描ける最大幅へ丸められる。",
+        "読み上げは Web / Native とも既定で進捗として伝わる（Web は role=\"progressbar\" + aria-valuenow、Native は accessibilityRole=\"progressbar\" + accessibilityValue）。中央ラベルの文字は読み上げから隠して値と二重に読まれないようにしてある。装飾としてだけ使う・周りが説明文を持つ場合は Native では accessible={false}（issue #564）。",
         "線の太さは Web / Native とも strokeWidth。Native の thickness は非推奨エイリアスで 3.0.0 で削除される（issue #495。2.0.0 では削除していない）。両方渡した場合は strokeWidth が優先される。"
       ]
     },

package/contracts/token-hex-cache.json

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