ksk-design-system 2.17.0 → 2.18.0

package/MIGRATION.md

@@ -20,6 +20,14 @@ patch / minor は原則破壊変更なし、自動アップグレード可（例
 - **余白・項目行・ダイアログ・アプリ枠・予定の色（#711–#716）**: Container / ChipFilterBar の `gutter="fluid"`（`--Container-Gutter-Fluid`）、FormField の `orientation="horizontal"`・Input / Textarea の `targetSize="comfortable"`、Dialog の `centerFrom`・`height="fill"`・`size="2xl"`・`DialogHeader variant="bar"`、FieldSet の `gap`・FieldLegend の `size="sm"`、MobileAppShell の `viewport="fixed"`・`safeAreaTop`・`safeAreaBottom`・`bottomPadding="native-tab-bar"`（`--Native-Tab-Bar-Height`。ネイティブ側が書く任意フック <!-- docs-drift-ignore: --Native-Tab-Bar-Height -->）、MonthCalendar / AgendaList の予定の `accentColor` を追加します。すべて任意指定で、既定の見た目は変わりません。
 - **CollapsibleChipField の見出し（#717）**: `label` の既定の見た目が `typo-label-sm` + `Text-Medium-Emphasis`（12px）から、フォームの項目名と同じ `typo-label-md` + `Text-High-Emphasis`（14px 太字）に変わります（同じ詳細シートの `<Label>` / `FormField` と大きさをそろえるため）。従来の見た目が要る画面は `labelSize="sm"` を指定してください。展開中の選択肢のまとまりは見える見出しと `aria-labelledby` で結ばれます（`ariaLabel` を指定した場合は従来どおり `aria-label`）。`label` も `icon` も渡さない行は、先頭の 24px の空きが無くなります。native の CollapsibleChipField は変わりません。
 
+## v2.18.0 の導入注意
+
+以下はv2.18.0の導入注意です。consumerへの展開・アプリ配布は別工程で、次回のまとめ展開で反映します。
+
+- **FieldSet の見出しの下の間隔（#747・既定の見た目の変更）**: `gap` を省いた FieldSet でも、FieldLegend の下に子の間隔と同じ 24px（`mb-6`）が付きます（これまでは `gap` 指定時だけで、省くと見出しの直下が 0px でした）。見出しの下に `mb-*` / `pb-*` や空の要素を手で足していた場合は外してください。従来どおり見出しの直下を詰めたい画面は `<FieldLegend className="mb-0">` を指定してください（見出しの余白は詳細度 0 なので className が勝ちます）。子の間隔ごと詰めるなら `gap="sm"`（8px）/ `gap="md"`（16px）。FieldSet の className の `gap-*` では見出しの下は変わらないので、間隔は `gap` で指定してください。
+- **StarRating の読み上げ名（#746・既定の読み上げの変更）**: FormField `as="group"` の中で `label` / `aria-label` / `aria-labelledby` を省いた入力用の StarRating は、「評価」ではなくその FormField のラベルで読まれるようになります（radiogroup をラベルに `aria-labelledby` で結ぶ。ChipSelector 単一選択・PillToggle `semantics="radio"` と同じ）。見た目は変わりません。テストで `getByRole("radiogroup", { name: "評価" })` により group 内の StarRating を探している場合は、FormField のラベルで探してください。表示専用（`onChange` なし）は従来どおり値の要約（「4/5点」）で読まれます。native の StarRating は今回の対象外です（読み上げ文言・FormField との結び付けは変わりません）。
+- 追加のみ（Provider 無しの既定は不変）: StarRating の `aria-label` / `aria-labelledby`、KskLabels の `ratingGroup` / `ratingValue` / `ratingStar`（StarRating の既定文言。`{value}` / `{max}` を値に置き換える。`KskLabelsProvider locale="en"` で英語になる。型 `KskLabels` では optional なので、既存の完全な翻訳オブジェクトはそのまま型チェックを通る。全キー解決済みの型は `ResolvedKskLabels`。#746）。contracts の StarRating `sizes` に実装済みの `xl` を追加（#748）。
+
 ## v2.17.0 の導入注意
 
 以下はv2.17.0の導入注意です。consumerへの展開・アプリ配布は別工程で、次回のまとめ展開で反映します。

package/RELEASE.md

@@ -2,6 +2,19 @@
 
 `ksk-design-system` のリリーススケジュール・運用ルール。
 
+## v2.18.0（2026-10-18）
+
+2.17.0以降に、FieldSet の見出し下の間隔と StarRating の読み上げ名を整えたminorリリース。次の2点は既定の見た目・読み上げが変わります。
+
+- `gap` を省いた FieldSet でも、FieldLegend の下に子の間隔と同じ24px（`mb-6`）が付きます。見出しの直下を詰めたい画面は `<FieldLegend className="mb-0">`、子の間隔ごと詰めるなら `gap="sm"` / `gap="md"` を指定します（#747）。
+- FormField `as="group"` の中で名前を省いた入力用の StarRating は、「評価」ではなくその FormField のラベルで読まれるようになります。見た目は変わりません。native の StarRating は対象外です（#746）。
+
+主な追加は次のとおりです。
+- StarRating に `aria-label` / `aria-labelledby`、KskLabels に `ratingGroup` / `ratingValue` / `ratingStar`（型では optional。#746）。
+- contracts の StarRating `sizes` に実装済みの `xl` を追加（#748）。
+
+導入時は [2.18.0の注意](./MIGRATION.md#v2180-の導入注意) を確認してください。npm公開・タグ・GitHub Releaseはversion変更のmainマージ後に `publish.yml` が実行します。consumerへの取り込みとアプリ配布は別工程で、今回のDS公開準備には含めません。
+
 ## v2.17.0（2026-10-18）
 
 2.16.0以降に、consumer側の上書きをなくすためのAPIを4件追加したminorリリース。追加のみのAPIが中心です。次の3点は既定の読み上げ・見た目が変わります。

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.17.0",
+    "version": "2.18.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 73,
@@ -534,7 +534,7 @@
     {
       "name": "KskLabelsProvider",
       "path": "src/components/ui/ksk-labels.tsx",
-      "description": "DS 部品の既定文言（スキップリンク・管理画面のメニュー・FormField の必須/任意・閉じるボタン・NavigationBar の戻る/閉じる/シェア・カレンダー見出し）と MonthCalendar / AgendaList の locale 既定をまとめて切り替える Provider（issue #723）。アプリの一番外側に 1 回置く。",
+      "description": "DS 部品の既定文言（スキップリンク・管理画面のメニュー・FormField の必須/任意・閉じるボタン・NavigationBar の戻る/閉じる/シェア・カレンダー見出し・StarRating の読み上げ名）と MonthCalendar / AgendaList の locale 既定をまとめて切り替える Provider（issue #723）。アプリの一番外側に 1 回置く。",
       "subcomponents": [
         "useKskLabels",
         "useKskLocale",
@@ -848,16 +848,20 @@
       "sizes": [
         "sm",
         "md",
-        "lg"
+        "lg",
+        "xl"
       ],
       "props": {
         "allowClear": "boolean (既定 false) — 有効時、現在値と同じ星の再クリックで onChange(0)",
-        "label": "string (既定 \"評価\") — interactive 時の radiogroup aria-label",
-        "valueLabel": "(value: number, max: number) => string (既定 `${value}/${max}点`) — read-only 時の aria-label",
-        "starLabel": "(value: number) => string (既定 `${value}点`) — interactive 時の各星（radio）の aria-label"
+        "label": "string — interactive 時の radiogroup aria-label。省略時は FormField as=\"group\" の中ならそのラベルを aria-labelledby で結び、それ以外は KskLabels の ratingGroup（既定「評価」）(issue #746)",
+        "aria-label": "string — label と同じ（両方あればこちらが優先）(issue #746)",
+        "aria-labelledby": "string — interactive 時の radiogroup を見える見出しで名付ける。aria-label より優先 (issue #746)",
+        "valueLabel": "(value: number, max: number) => string (既定 KskLabels の ratingValue「{value}/{max}点」) — read-only 時の aria-label",
+        "starLabel": "(value: number) => string (既定 KskLabels の ratingStar「{value}点」) — interactive 時の各星（radio）の aria-label"
       },
       "rules": [
-        "Omit onChange for read-only display. Pass onChange for interactive input."
+        "Omit onChange for read-only display. Pass onChange for interactive input.",
+        "フォームの評価欄は FormField as=\"group\" で包む（radiogroup 自身をそのラベルで名付けるので label / aria-label は不要）。英語の画面は KskLabelsProvider locale=\"en\" で既定文言が切り替わる。星ごとに starLabel を渡して回らない (issue #746)"
       ],
       "accessibility": [
         "入力用（radio）の選択前の星は var(--Border-Control, var(--Border-Medium-Emphasis))。prefers-contrast: more / root の data-contrast=\"more\" のときだけ 3:1 以上に切り替わり、表示専用（role=img）の星は据え置き（issue #636）"
@@ -1718,7 +1722,7 @@
         "FieldDescription はセクション・グループの補足、FieldError はグループ単位のエラーに使う",
         "グループ横断の区切りは FieldSeparator を使い、中央ラベルは children で渡す",
         "FormSection は title/description 一体の簡易 API、FieldSet は legend や複数 FieldGroup を明示構成する長いフォーム向け",
-        "詰めた並び（絞り込みシートの選択肢グループ等）は FieldSet gap（sm=8 / md=16 / lg=24px）+ FieldLegend size=\"sm\"（typo-label-md + Text-Medium-Emphasis）。className に space-y-* や typo-* を足して上書きしない。gap 指定時は legend の下にも同じ間隔が付く（未指定の既定は legend の直下 0px のまま）（issue #714）"
+        "詰めた並び（絞り込みシートの選択肢グループ等）は FieldSet gap（sm=8 / md=16 / lg=24px）+ FieldLegend size=\"sm\"（typo-label-md + Text-Medium-Emphasis）。className に space-y-* や typo-* を足して上書きしない。legend の下にも子と同じ間隔が付く（gap 未指定の既定も 24px。v2.17.0 までは未指定だと 0px だった）。legend の直下だけ詰めたいときは <FieldLegend className=\"mb-0\">（legend の余白は詳細度 0 なので className が勝つ）。className の gap-* では legend の下は変わらないので間隔は gap で指定する（issue #714 / #747）"
       ]
     },
     {

package/contracts/token-hex-cache.json

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