ksk-design-system 1.49.0 → 1.49.2

package/AGENTS.md

@@ -35,6 +35,7 @@ UI を書く前に必ず確認すること:
 - [ ] アイコンは `iconsax-reactjs` か（`lucide-react` / `heroicons` は使わない）
 - [ ] 生タグ（`<button>` / `<input>` / `<a href>`）でなく DS コンポーネントを使ったか
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
+- [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）
 - [ ] クラス名は**完全な文字列**で書いたか（`` `bg-${color}` `` のような動的合成は静的抽出できず消費側で CSS が生成されない。分岐は三項演算子か cva variant で。`scripts/generate-source-safelist.mjs` が検出）
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）

package/CLAUDE.md

@@ -35,6 +35,7 @@ UI を書く前に必ず確認すること:
 - [ ] アイコンは `iconsax-reactjs` か（`lucide-react` / `heroicons` は使わない）
 - [ ] 生タグ（`<button>` / `<input>` / `<a href>`）でなく DS コンポーネントを使ったか
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
+- [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）
 - [ ] クラス名は**完全な文字列**で書いたか（`` `bg-${color}` `` のような動的合成は静的抽出できず消費側で CSS が生成されない。分岐は三項演算子か cva variant で。`scripts/generate-source-safelist.mjs` が検出）
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）

package/NATIVE_RECIPES.md

@@ -2,6 +2,13 @@
 
 Native / Expo consumer は、新規 UI を作る前に `ksk-design-system/native/ui` の既存コンポーネントを確認してください。ローカル `ds/` に独自 wrapper を増やす前に、`src/native/COMPONENT_LOOKUP.md` とこのファイルの recipe を使います。
 
+## Tailwind バージョンの前提
+
+`tailwindcss` の peer 範囲は `^3.4.17 || ^4.1.0` です（issue #296）。
+
+- **Web consumer**: `preset.css` が Tailwind v4 構文（`@import "tailwindcss"`）前提のため **v4 系が必須**。3 系はインストールできても preset が機能しません。
+- **Expo / NativeWind consumer**: NativeWind のコンパイラ都合で `^3.4.x` に固定して構いません。`native/ui` entrypoint は Tailwind 4 の機能を要求しないため、この組み合わせが公式サポート範囲です。peer 範囲から 3 系を落とすと consumer の `npm install` が壊れるので、範囲は `__tests__/native-package-contract.test.ts` で契約として固定しています。
+
 ## Component lookup
 
 RN 側の公開 export 一覧は `src/native/COMPONENT_LOOKUP.md` で確認できます。Web 側の `src/components/COMPONENT_LOOKUP.md` と同じく、consumer 実装前の DS-first チェックに使います。

package/contracts/components.json

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

package/contracts/token-hex-cache.json

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

@@ -14937,7 +14937,7 @@ function cp({ selectedCount: e, onClear: t, children: n, className: r, ...i }) {
 			}),
 			/* @__PURE__ */ V("div", { className: "h-5 w-px bg-[var(--Text-on-Inverse)]/20 shrink-0" }),
 			/* @__PURE__ */ V("div", {
-				className: "flex items-center gap-2 min-w-0 overflow-x-auto [&>*]:shrink-0",
+				className: "flex items-center gap-2 min-w-0 flex-1 overflow-x-auto [&>*]:shrink-0",
 				children: n
 			}),
 			t && /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", { className: "h-5 w-px bg-[var(--Text-on-Inverse)]/20 shrink-0" }), /* @__PURE__ */ V("button", {
@@ -15391,12 +15391,12 @@ function yp({ className: e, icon: t, emoji: n, label: r, description: i, meta: a
 				label: "処理中"
 			})]
 		}), (i || a) && /* @__PURE__ */ H("span", {
-			className: "flex w-full items-end justify-between gap-2",
+			className: "flex w-full flex-wrap items-end justify-between gap-x-2 gap-y-1",
 			children: [i && /* @__PURE__ */ V("span", {
-				className: "typo-body-sm min-w-0 text-[var(--Text-Medium-Emphasis)]",
+				className: "typo-body-sm min-w-[60%] flex-1 text-[var(--Text-Medium-Emphasis)]",
 				children: i
 			}), a && /* @__PURE__ */ V("span", {
-				className: "typo-label-sm shrink-0 text-[var(--Text-Low-Emphasis)]",
+				className: "typo-label-sm ml-auto shrink-0 text-[var(--Text-Low-Emphasis)]",
 				children: a
 			})]
 		})]