ksk-design-system 2.6.3 → 2.7.0

package/MIGRATION.md

@@ -63,6 +63,22 @@ React 18 では `ref` が無言で無視されていた）。詳細は下の
 **v2.0.0 では削除していません**。削除は「全消費リポで `check-migration` の
 残件が 0」を条件に v3.0.0 で行います。
 
+## v2 系内の追加（参考）
+
+### v2.7.0 — CSS の入口 `preset-core` / `safelist` を追加（追加のみ・破壊的変更なし）
+
+`ksk-design-system/preset` から DS 部品用の safelist（`src/styles/source-safelist.css`）だけを
+除いた `ksk-design-system/preset-core` と、safelist 単体の `ksk-design-system/safelist` を
+exports に足した。
+
+- **既存 consumer: 対応不要**。`preset` は `preset-core` + `safelist` を読み込む形に組み替えたが、
+  生成される CSS は従来と同じ
+- DS 部品を 1 つも使わない consumer は `preset` を `preset-core` に置き換えると、
+  部品用の utility（safelist 約 1,150 クラス分）が出力から消える。部品を使うルートが 1 つでもある
+  ビルドでは `preset` のままにする（詳細は README の「DS 部品を使わない consumer は `preset-core`」節）
+- DS 本体の CSS を編集するときは、トークン・base layer 等は `src/preset-core.css` に書く
+  （`src/preset.css` は 2 つを読み込むだけの入口）
+
 ## v3.0 (未リリース)
 
 破壊変更を入れる際にはここに以下を書く:

package/README.md

@@ -112,6 +112,32 @@ consumer 側の Tailwind と DS を同じビルドで処理するため、上記
 DS のクラス CSS は生成されます（issue #258）。ただし consumer 自身のコードは
 consumer 側の走査対象なので、`@source` は引き続き推奨構成です。
 
+#### DS 部品を使わない consumer は `preset-core`
+
+safelist は DS 部品（`Button` 等）が内部で使う Tailwind クラスを、consumer が 1 つも
+部品を使っていなくても生成します（safelist は約 1,150 クラス。consumer のクラスが無い状態の
+実測で、出力 CSS が `preset` 179KB → `preset-core` 54KB、gzip 25.8KB → 9.8KB）。**DS 部品を import しない
+consumer**（`ksk-design-system/class-names` とトークンだけで UI を組む公開ページ等）は、
+safelist だけを除いた `preset-core` を使えます。トークン・shadcn 互換の変数・アニメーション・
+container 幅・`scrollbar-hide`・base layer のボーダー色の保険は `preset` と同じです。
+
+```css
+@import "tailwindcss";
+@import "ksk-design-system/preset-core";
+@import "ksk-design-system/themes/default";
+```
+
+| consumer | 使う入口 |
+|---|---|
+| DS 部品を 1 つでも使う（どこか 1 ルートでも） | `ksk-design-system/preset`（従来どおり。`preset-core` + `safelist` と同じ） |
+| DS 部品を使わない（トークン・`class-names` だけ） | `ksk-design-system/preset-core` |
+
+Tailwind は CSS を 1 本にまとめるため、DS 部品を使うルートが 1 つでもあるビルドでは
+`preset` を使ってください（`preset-core` を選ぶと、そのルートで部品の見た目が崩れます）。
+`preset-core` と safelist を分けて読みたい場合は
+`@import "ksk-design-system/preset-core"; @import "ksk-design-system/safelist";` が
+`preset` と同じ結果になります。
+
 <!-- consumer-example:tsx:start -->
 ```tsx
 import { Button, Input, Label } from "ksk-design-system"
@@ -334,7 +360,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     "\\.(css|less|sass|scss)$": "<rootDir>/test/style-mock.cjs",
-    "^ksk-design-system/(preset|styles(?:\\.css)?|glass|tokens/(?:primitive|semantic|typography|categorical|motion)|themes/(?:default|blue|orange|green|violet|cobalt))$":
+    "^ksk-design-system/(preset(?:-core)?|safelist|styles(?:\\.css)?|glass|tokens/(?:primitive|semantic|typography|categorical|motion)|themes/(?:default|blue|orange|green|violet|cobalt))$":
       "<rootDir>/test/style-mock.cjs",
   },
 }

package/UPDATING.md

@@ -103,6 +103,11 @@ consumer側Tailwindを重ねる二重ビルド方式にも切り替えないこ
 DS 内部だけで使われるクラス（`pointer-events-auto` 等）については、preset に safelist
 （`src/styles/source-safelist.css`・自動生成）が同梱されているため `@source` の有無に依存しない（issue #258）。
 
+DS 部品を 1 つも使わない consumer（トークンと `ksk-design-system/class-names` だけで UI を組む構成）は、
+`ksk-design-system/preset` の代わりに safelist だけを除いた `ksk-design-system/preset-core` を使える
+（追加のみ・破壊的変更なし。`preset` の中身は `preset-core` + `safelist` で従来と同じ）。
+使い分けは README の「DS 部品を使わない consumer は `preset-core`」節を参照。
+
 > **必要な Tailwind バージョン**: この safelist は Tailwind 4.1 で導入された `@source inline()` を使う。
 > このため次のリリース以降、peerDependencies は `tailwindcss@^4.1.0` となる。
 > 4.0.x を使っている場合は、DS を上げる前に `npm install -D tailwindcss@^4.1` で Tailwind を先に上げること。

package/bin/lint.js

@@ -103,7 +103,7 @@ export function isAutoGeneratedSource(source) {
  * トークンを**定義している側**の DS 自身の CSS に当ててはいけない。
  */
 const DS_CSS_DIRS = ["src/styles", "src/themes"]
-const DS_CSS_FILES = ["src/preset.css"]
+const DS_CSS_FILES = ["src/preset.css", "src/preset-core.css"]
 
 /** DS 配布物のヘッダコメントに必ず入る署名（ベンダリングされたコピーにも残る） */
 const DS_CSS_SIGNATURE = /KSK Design System/

package/bin/product-theme-override.js

@@ -30,7 +30,7 @@ const DECLARATION = /(^|[;{}\s])(--[A-Za-z0-9_-]+)\s*:/g
  * 生成ファイルを増やさずに実行時へ集めるので、DS 側の CSS を足してもドリフトしない。
  */
 const DS_CSS_DIRS = ["src/styles", "src/themes"]
-const DS_CSS_FILES = ["src/preset.css"]
+const DS_CSS_FILES = ["src/preset.css", "src/preset-core.css"]
 
 /** CSS コメントを、行数を保ったまま空白に置き換える */
 function stripCssComments(source) {

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.7.0",
     "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/consumer-requests.json

@@ -20,6 +20,26 @@
       "dsIssue": 573,
       "consumerIssue": "https://github.com/ekusiek716/exam-kit/issues/1089",
       "fixPr": 574
+    },
+    {
+      "dsIssue": 580,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/239",
+      "fixPr": 581
+    },
+    {
+      "dsIssue": 582,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/241",
+      "fixPr": 583
+    },
+    {
+      "dsIssue": 584,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/242",
+      "fixPr": 585
+    },
+    {
+      "dsIssue": 586,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/248",
+      "fixPr": 587
     }
   ]
 }

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.7.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",