ksk-design-system 1.63.0 → 1.63.1

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.63.0",
+    "version": "1.63.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -2107,7 +2107,10 @@
         "単純な on/off トグルは FilterChip、単一選択リストは DropdownFilter、任意パネル + 明示クリアは FilterPill",
         "適用中かどうかの正本は value（active フラグを別に持たない）",
         "value の整形（複数選択の \"渋谷 他2件\" 等）は呼び出し側の責務"
-      ]
+      ],
+      "props": {
+        "icon": "ReactNode — ラベル左のアイコン（装飾・aria-hidden。iconsax size=16 相当）"
+      }
     },
     {
       "name": "ImageOverlayAction",

package/contracts/token-hex-cache.json

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

package/dist/index.js

@@ -18293,12 +18293,12 @@ var Hh = {
 	sm: "h-[var(--Control-Height-Sm)] typo-label-xs",
 	md: "h-[var(--Control-Height-Sm)] sm:h-[var(--Control-Height-Md)] typo-label-sm"
 };
-function Uh({ label: e, value: t, onClear: n, clearLabel: r, children: i, open: a, onOpenChange: o, defaultOpen: s, panelLabel: c, align: l = "start", contentClassName: u, size: d = "md", disabled: f = !1, className: p }) {
-	let m = t != null && t !== "", h = m && !!n;
+function Uh({ label: e, value: t, onClear: n, clearLabel: r, children: i, open: a, onOpenChange: o, defaultOpen: s, panelLabel: c, align: l = "start", contentClassName: u, icon: d, size: f = "md", disabled: p = !1, className: m }) {
+	let h = t != null && t !== "", g = h && !!n;
 	return /* @__PURE__ */ V("div", {
 		"data-slot": "filter-pill",
-		"data-active": m || void 0,
-		className: G("inline-flex shrink-0 items-center rounded-full border border-[var(--Border-Low-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)]", m ? "border-[var(--Brand-Primary)] bg-[var(--Brand-Primary)] text-[var(--Text-on-Inverse)]" : "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]", f && "cursor-not-allowed opacity-50", Hh[d], p),
+		"data-active": h || void 0,
+		className: G("inline-flex shrink-0 items-center rounded-full border border-[var(--Border-Low-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)]", h ? "border-[var(--Brand-Primary)] bg-[var(--Brand-Primary)] text-[var(--Text-on-Inverse)]" : "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]", p && "cursor-not-allowed opacity-50", Hh[f], m),
 		children: [/* @__PURE__ */ V(zs, {
 			open: a,
 			defaultOpen: s,
@@ -18307,13 +18307,21 @@ function Uh({ label: e, value: t, onClear: n, clearLabel: r, children: i, open:
 				asChild: !0,
 				children: /* @__PURE__ */ V("button", {
 					type: "button",
-					disabled: f,
+					disabled: p,
 					"aria-haspopup": "dialog",
-					className: G("flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-full pl-4", m ? "text-[var(--Text-on-Inverse)]" : "text-[var(--Text-Medium-Emphasis)]", h ? "pr-1.5" : "pr-4", "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", "disabled:cursor-not-allowed disabled:pointer-events-none"),
-					children: [/* @__PURE__ */ B("span", {
-						className: "truncate",
-						children: m ? `${e}: ${t}` : e
-					}), /* @__PURE__ */ B(Wh, {})]
+					className: G("flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-full pl-4", h ? "text-[var(--Text-on-Inverse)]" : "text-[var(--Text-Medium-Emphasis)]", g ? "pr-1.5" : "pr-4", "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", "disabled:cursor-not-allowed disabled:pointer-events-none"),
+					children: [
+						d && /* @__PURE__ */ B("span", {
+							"aria-hidden": "true",
+							className: "shrink-0 inline-flex",
+							children: d
+						}),
+						/* @__PURE__ */ B("span", {
+							className: "truncate",
+							children: h ? `${e}: ${t}` : e
+						}),
+						/* @__PURE__ */ B(Wh, {})
+					]
 				})
 			}), /* @__PURE__ */ B(Vs, {
 				align: l,
@@ -18321,9 +18329,9 @@ function Uh({ label: e, value: t, onClear: n, clearLabel: r, children: i, open:
 				className: G("w-72", u),
 				children: i
 			})]
-		}), h && /* @__PURE__ */ B("button", {
+		}), g && /* @__PURE__ */ B("button", {
 			type: "button",
-			disabled: f,
+			disabled: p,
 			"aria-label": r ?? `${e}をクリア`,
 			onClick: (e) => {
 				e.stopPropagation(), n?.();

package/dist/types/components/patterns/filter-pill.d.ts

@@ -45,6 +45,11 @@ interface FilterPillProps {
     align?: "start" | "center" | "end";
     /** Popover パネルに渡す className（幅の上書き等）。 */
     contentClassName?: string;
+    /**
+     * ラベルの左に出すアイコン（iconsax の size=16 相当を想定）。
+     * 装飾なので aria-hidden で描画される。
+     */
+    icon?: React.ReactNode;
     size?: FilterPillSize;
     disabled?: boolean;
     className?: string;
@@ -74,6 +79,6 @@ interface FilterPillProps {
  *   <CheckboxGroup ... />
  * </FilterPill>
  */
-declare function FilterPill({ label, value, onClear, clearLabel, children, open, onOpenChange, defaultOpen, panelLabel, align, contentClassName, size, disabled, className, }: FilterPillProps): React.JSX.Element;
+declare function FilterPill({ label, value, onClear, clearLabel, children, open, onOpenChange, defaultOpen, panelLabel, align, contentClassName, icon, size, disabled, className, }: FilterPillProps): React.JSX.Element;
 export { FilterPill };
 export type { FilterPillProps, FilterPillSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "1.63.0",
+  "version": "1.63.1",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",

package/src/components/COMPONENT_LOOKUP.md

@@ -128,7 +128,7 @@
 | FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator | `@/components/patterns/field` | — | 3セクションの長いフォーム, SeparatorWithLabel |
 | FileUpload | `@/components/patterns/file-upload` | — | Default, Multiple |
 | FilterChip | `@/components/patterns/filter-chip` | — | Inactive, ActiveWithValue, Toggle, Group |
-| FilterPill | `@/components/patterns/filter-pill` | — | Default, Active, ActiveWithoutClear, Bar, OpensPanelAndClears |
+| FilterPill | `@/components/patterns/filter-pill` | — | Default, Active, ActiveWithoutClear, Bar, OpensPanelAndClears, WithIcon |
 | Footer | `@/components/patterns/footer` | — | Default, Minimal, WithRenderSlot, WithExtra, WithPaymentIcons |
 | FormField | `@/components/patterns/form-field` | — | WithInput, Required, WithError, WithDescription, WithTextarea, WithCharacterCountAndError, WithSelect, CompleteForm |
 | FormRoot, FormSection, FormActions | `@/components/patterns/form` | — | Default |