ksk-design-system 2.6.3 → 2.6.4

package/contracts/component-docs-guidance.json

@@ -0,0 +1,73 @@
+{
+  "description": "迷いやすい部品の使い分け。基本用途とルールはcomponents.jsonを参照する。",
+  "groups": [
+    {
+      "names": [
+        "Sheet",
+        "ResponsiveOverlayFrame",
+        "ResponsiveDialog"
+      ],
+      "difference": "Sheetは幅に追従するシート。ResponsiveDialogとResponsiveOverlayFrameの組み合わせはモバイルのシートをPCでは中央ダイアログに切り替える。シートのままでよい場合はSheetを選ぶ。",
+      "avoid": "削除など取り消せない操作の確認にはAlertDialogを使う。"
+    },
+    {
+      "names": [
+        "ChipSelector",
+        "PillToggle",
+        "Select",
+        "FilterPill",
+        "FilterChip"
+      ],
+      "difference": "ChipSelectorは複数または単一の選択肢を並べる。PillToggleは少数の値を単一選択する。Selectは候補を開いて選ぶ。FilterPillは条件設定パネルを開く操作と解除、FilterChipは適用中の条件の表示に使う。",
+      "avoid": "選択と画面遷移を混ぜない。画面の切り替えにはTabs、ページ移動にはナビゲーションを使う。"
+    },
+    {
+      "names": [
+        "FormField",
+        "RhfFormField"
+      ],
+      "difference": "patterns/form-fieldのFormFieldはラベル・説明・エラーを入力に関連付ける。RhfFormFieldはreact-hook-formのController連携用。単純なフォームでは前者を使う。",
+      "avoid": "react-hook-formを使わないフォームにRhfFormFieldを導入しない。"
+    },
+    {
+      "names": [
+        "Button",
+        "IconButton",
+        "ActionTile",
+        "QuickActionGrid"
+      ],
+      "difference": "Buttonは文言で操作を示す。IconButtonは意味が明確な短い操作に使いアクセシブルな名前を付ける。ActionTileは説明や選択状態を持つタイル、QuickActionGridはその配置に使う。",
+      "avoid": "単なる説明を押せるボタンにしない。複数の値選択は専用の選択コンポーネントを使う。"
+    },
+    {
+      "names": [
+        "EmptyState",
+        "ErrorState",
+        "Skeleton",
+        "Spinner"
+      ],
+      "difference": "取得成功で0件ならEmptyState、取得失敗ならErrorStateと再試行。Skeletonは内容の形が分かる読み込み、Spinnerは処理の進行中を示す。",
+      "avoid": "取得に失敗した状態を「0件」と表示しない。"
+    },
+    {
+      "names": [
+        "Input",
+        "Textarea",
+        "AutoGrowTextarea",
+        "NumberInput",
+        "DateField"
+      ],
+      "difference": "Inputは短い自由入力、Textareaは複数行、AutoGrowTextareaは内容に応じて高さが伸びる複数行入力です。数値の増減にはNumberInput、日付にはDateFieldを使います。ラベル・説明・エラーはFormFieldで関連付けます。",
+      "avoid": "決まった候補から選ぶ場合はSelectやRadioGroupを使います。長い文章の入力を1行のInputに押し込めず、複数行の入力欄を使います。"
+    },
+    {
+      "names": [
+        "SubNav",
+        "SectionNav",
+        "Tabs"
+      ],
+      "difference": "TabsとSubNavは同じ画面内の表示内容を切り替えるための部品です。SubNavは横スクロールする項目列、Tabsは項目と対応する表示領域を組み合わせます。SectionNavは同じページ内の見出しへ移動する目次です。",
+      "avoid": "ページ内の見出しへスクロールするだけの操作をタブ切り替えとして実装しないでください。別ページへ移動する場合はリンクを使います。"
+    }
+  ]
+}

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "2.6.3",
+    "version": "2.6.4",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
-      "ui": 68,
+      "ui": 69,
       "patterns": 61,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 152
+      "total": 153
     },
     "exportNaming": {
       "_doc": "contracts の name が `import { name } from \"ksk-design-system\"` で解決できるかを示す。__tests__/contracts-export-integrity.test.ts が src/index.ts の実 export と突き合わせて固定する。",
@@ -1220,6 +1220,29 @@
         "最大幅・中央寄せ・左右 gutter は内側の Container に委ねる",
         "footer の全幅背景帯には as=\"footer\" を使える"
       ]
+    },
+    {
+      "name": "SemanticIcon",
+      "description": "用途から選ぶ装飾アイコン。情報i・警告!・枠なし選択tickを区別。NativeはSVG依存なしのView描画で同じ意味を提供。",
+      "variants": [
+        "selected",
+        "selectedSquare",
+        "success",
+        "close",
+        "info",
+        "warning"
+      ],
+      "rules": [
+        "装飾は既定で読み上げない。単独の情報画像にはaria-labelを指定する。",
+        "アイコンのみの操作はButton / native IconButtonに操作名を付ける。",
+        "Nativeの警告は円形の感嘆符、Webはiconsax Danger。意味は同一だが描画素材に合わせて器の形が異なる。"
+      ],
+      "path": "src/components/ui/semantic-icon.tsx",
+      "props": {
+        "name": "selected | selectedSquare | success | close | info | warning — 意味を必ず指定",
+        "size": "number | string (Web), number (Native) — 既定24",
+        "accessibilityLabel": "string — 単独の情報画像に付ける名前。Webはaria-labelを優先"
+      }
     }
   ],
   "patterns": [

package/contracts/native-device-verification.json

@@ -0,0 +1,29 @@
+{
+  "schemaVersion": 1,
+  "policy": "Record only observations actually performed on the exact revision and stated OS, including failed checks. Bundling, typechecks and React Native Web are not device verification.",
+  "checks": [
+    { "id": "safe-area", "components": ["Sheet", "Screen"], "procedure": "Open sheet at both snap points; rotate; confirm title and footer avoid notch and home indicator." },
+    { "id": "keyboard", "components": ["Input", "KeyboardAwareSheetFooter", "Sheet"], "procedure": "Focus first/last input, enter Japanese, scroll and dismiss keyboard; verify focused field and submit remain reachable, no double inset." },
+    { "id": "font-scale", "components": ["Text", "Button", "Input", "Sheet"], "procedure": "Set OS accessibility text size to largest, reopen app; verify full labels wrap and controls remain reachable." },
+    { "id": "sheet-gesture", "components": ["Sheet"], "procedure": "Drag handle between 0.5 and 0.9, scroll inner content, dismiss and reopen five times; ensure no invisible input-blocking modal." },
+    { "id": "screen-reader", "components": ["Button", "Input", "Sheet"], "procedure": "Enable VoiceOver/TalkBack; verify names, modal focus, field labels and close action." }
+  ],
+  "observations": [
+    {
+      "checkId": "keyboard",
+      "components": [
+        "Input",
+        "KeyboardAwareSheetFooter",
+        "Sheet"
+      ],
+      "platform": "ios",
+      "os": "26.5",
+      "device": "iPhone 17 Pro Simulator",
+      "revision": "906f830c278bcef8703bcc2f4179139eec9b58bb",
+      "checkedAt": "2026-09-25T05:12:00Z",
+      "status": "failed",
+      "evidence": "docs/native-review-2026-09-25.md",
+      "notes": "項目1への日本語入力後、ソフトキーボードで保存フッターが隠れた。"
+    }
+  ]
+}

package/contracts/product-theme-overrides.json

@@ -149,7 +149,8 @@
       "--Space-Section-2xl"
     ],
     "chip": [
-      "--Chip-Radius"
+      "--Chip-Radius",
+      "--Chip-Remove-Width"
     ],
     "productTypography": [
       "--Product-Type-Scale"
@@ -185,6 +186,12 @@
     ],
     "toast": [
       "--Toast-Viewport-Offset-Bottom"
+    ],
+    "settingsRow": [
+      "--Settings-Row-Min-Height",
+      "--Settings-Row-Gap",
+      "--Settings-Row-Padding-X",
+      "--Settings-Row-Padding-Y"
     ]
   },
   "dsVariableNamespaces": [
@@ -212,6 +219,7 @@
     "--Field-",
     "--Product-",
     "--Chip-",
+    "--Settings-",
     "--glass-",
     "--card-surface",
     "--Nav-",

package/contracts/token-hex-cache.json

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