ksk-design-system 2.6.2 → 2.6.3

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

@@ -75,9 +75,11 @@ interface FilterPillProps {
  *   タップ領域は sm でも 32px 高 + 44px 幅相当の padding を確保する。
  *
  * @example
+ * ```tsx
  * <FilterPill label="エリア" value={area ?? undefined} onClear={() => setArea(null)}>
  *   <CheckboxGroup ... />
  * </FilterPill>
+ * ```
  */
 declare function FilterPill({ label, value, onClear, clearLabel, children, open, onOpenChange, defaultOpen, panelLabel, align, contentClassName, icon, size, disabled, className, }: FilterPillProps): React.JSX.Element;
 export { FilterPill };

package/dist/types/components/patterns/settings-section.d.ts

@@ -9,6 +9,7 @@ interface SettingsSectionProps extends Omit<React.ComponentProps<"section">, "ti
 interface SettingsListRowProps extends Omit<React.ComponentProps<"div">, "title" | "onClick"> {
     title: React.ReactNode;
     description?: React.ReactNode;
+    /** 行頭のアイコンやアバター。寸法は渡した要素を保ち、装飾用の余白を追加しない。 */
     leading?: React.ReactNode;
     rightSlot?: React.ReactNode;
     interactive?: boolean;

package/dist/types/native/components/ListItem.d.ts

@@ -25,10 +25,20 @@ export type ListItemAlign = "start" | "center";
  *                   確認すること。
  */
 export type ListItemDensity = "comfortable" | "compact";
+export type ListItemTone = "default" | "accent" | "caution";
+export type ListItemDivider = "none" | "inset" | "full";
 export interface ListItemProps extends AccessibilityProps {
     leading?: React.ReactNode;
+    /** 文字列にはDSタイポを適用。ReactNodeはレイアウト互換のためそのまま描画する。 */
     title: React.ReactNode;
+    /** 文字列にはDSタイポを適用。ReactNodeのスタイルは呼び出し側が管理する。 */
     description?: React.ReactNode;
+    /** 文字列の見出しの色。ReactNodeには適用しない。 */
+    titleTone?: ListItemTone;
+    /** 文字列の説明の色。ReactNodeには適用しない。 */
+    descriptionTone?: ListItemTone;
+    /** 下端の区切り線。insetは左右の行余白に追随（leadingの幅は含まない）。既定none。 */
+    divider?: ListItemDivider;
     trailing?: React.ReactNode;
     /**
      * title / description と同じ列に置く下段スロットではなく、
@@ -42,4 +52,4 @@ export interface ListItemProps extends AccessibilityProps {
     align?: ListItemAlign;
     density?: ListItemDensity;
 }
-export declare function ListItem({ leading, title, description, trailing, footerSlot, showChevron, onPress, disabled, align, density, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, ...accessibilityProps }: ListItemProps): React.JSX.Element;
+export declare function ListItem({ leading, title, titleTone, descriptionTone, divider, description, trailing, footerSlot, showChevron, onPress, disabled, align, density, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, ...accessibilityProps }: ListItemProps): React.JSX.Element;

package/dist/types/native/components/Radio.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { type AccessibilityProps } from "react-native";
+export interface RadioProps extends AccessibilityProps {
+    selected?: boolean;
+    /** ラジオは再押下で解除しない。親で単一選択の値を管理する。 */
+    onChange?: (selected: boolean) => void;
+    disabled?: boolean;
+    /** 丸印の直径。操作領域は最低44ptを確保する。 */
+    size?: number;
+    /** 親の radio に意味と操作を委ねる装飾。読み上げ・フォーカス・押下を持たない。 */
+    decorative?: boolean;
+}
+export declare function Radio({ selected, onChange, disabled, size, decorative, accessibilityRole, accessibilityState, ...accessibilityProps }: RadioProps): React.JSX.Element;

package/dist/types/native/components/index.d.ts

@@ -35,6 +35,7 @@ export { Checkbox, type CheckboxProps } from "./Checkbox";
 export { CheckboxField, type CheckboxFieldProps } from "./CheckboxField";
 export { CheckboxCard, type CheckboxCardProps } from "./CheckboxCard";
 export { CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupOption } from "./CheckboxGroup";
+export { Radio, type RadioProps } from "./Radio";
 export { RadioGroup, type RadioGroupProps, type RadioOption } from "./RadioGroup";
 export { Slider, type SliderProps } from "./Slider";
 export { NumberInput, type NumberInputProps } from "./NumberInput";
@@ -87,7 +88,7 @@ export { StatusActionBadge, SyncStatusButton, type StatusActionBadgeProps, type
 export { Banner, type BannerProps } from "./Banner";
 export { BannerCarousel, type BannerCarouselProps } from "./BannerCarousel";
 export { SearchBar, type SearchBarProps } from "./SearchBar";
-export { ListItem, type ListItemProps, type ListItemAlign, type ListItemDensity, } from "./ListItem";
+export { ListItem, type ListItemProps, type ListItemAlign, type ListItemTone, type ListItemDivider, type ListItemDensity, } from "./ListItem";
 export { SettingsListRow, SettingsSection, type SettingsListRowProps, type SettingsSectionProps, type SettingsSectionVariant, } from "./SettingsSection";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export { ErrorState, type ErrorStateProps } from "./ErrorState";

package/package.json

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

package/src/components/COMPONENT_LOOKUP.md

@@ -145,7 +145,7 @@
 | PhotoHero | `@/components/patterns/photo-hero` | — | BottomAligned, CenterAligned, NoOverlay |
 | PresenceIndicator | `@/components/patterns/presence-indicator` | — | Default, WithBadge, Offline, NameOnly, 狭幅で非表示にする例（className） |
 | ProgressSteps | `@/components/patterns/progress-steps` | — | Step2Active, FirstStep, ThirdStep, AllComplete, ThreeSteps |
-| AUTO_PROMPT_SUPPRESSION_EVENT, AutoPrompt, PromptCoordinatorProvider | `@/components/patterns/prompt-coordinator` | — | Default |
+| AUTO_PROMPT_SUPPRESSION_EVENT, AutoPrompt, PromptCoordinatorProvider | `@/components/patterns/prompt-coordinator` | — | Default, 予約した案内を順番に表示する |
 | Prose | `@/components/patterns/prose` | — | PrivacyPolicy, SingleSection |
 | ActionTile, QuickActionGrid | `@/components/patterns/quick-action-grid` | — | EmojiOnly, IconAndLabel, WithMeta, IndicatorOverride, SelectedWithoutDescription, NarrowWithLongMeta, SingleSelection, MultipleSelection, LaunchersWithoutSelectionMode |
 | ResponsiveOverlayFrame, ResponsiveOverlayFooter | `@/components/patterns/responsive-overlay-frame` | — | Short form (mobile-form), Long keyboard-aware form (mobile-page), mobile-full preset, breakpoint=lg, breakpoint=product-theme, snapPoints は dialog に変換されない, float サイド（カード型）, float-glass サイド（ガラス素材）, plain preset（素の bottom シート） |

package/src/native/COMPONENT_LOOKUP.md

@@ -4,7 +4,7 @@
 
 React Native / Expo consumer は、新規 UI を作る前にこの一覧で既存コンポーネントを確認してください。すべて `ksk-design-system/native/ui` から import します。
 
-- Public native component exports: 151
+- Public native component exports: 152
 - Import: `import { Button, Screen } from "ksk-design-system/native/ui"`
 
 | Component | Source | Section |
@@ -50,6 +50,7 @@ React Native / Expo consumer は、新規 UI を作る前にこの一覧で既
 | `Input` | `src/native/components/Input.tsx` | Phase 2: Basic Form |
 | `Label` | `src/native/components/Label.tsx` | Phase 2: Basic Form |
 | `NumberInput` | `src/native/components/NumberInput.tsx` | Phase 2: Basic Form |
+| `Radio` | `src/native/components/Radio.tsx` | Phase 2: Basic Form |
 | `RadioGroup` | `src/native/components/RadioGroup.tsx` | Phase 2: Basic Form |
 | `Slider` | `src/native/components/Slider.tsx` | Phase 2: Basic Form |
 | `Switch` | `src/native/components/Switch.tsx` | Phase 2: Basic Form |

package/src/styles/glass.css

@@ -484,16 +484,12 @@
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
-  /* ⚠️ backdrop-filter はここには書かない。下の Chromium 専用 @supports ゲート内
-     でのみ適用する。理由（回帰: yokoku-app Safari で Liquid Glass シート内の
-     ボタン文字が全部ぼやける、2026-07）:
-     この ::after は z-index:2 でコンテンツ(z1)より上にあり、backdrop-filter は
-     「背後に描画済みの兄弟＝シート本文」をぼかす。Blink は mask(exclude) で
-     backdrop-filter の適用域も 1px リングに限定するが、WebKit は mask で
-     backdrop-filter のサンプリング域をクリップしないため、blur(4px) がシート
-     全面に乗り前景テキストを潰す。conic リム(背景)自体は WebKit でも mask で
-     正しく 1px に切り取られるので、非 Chromium では「リムだけ・blur なし」に
-     安全劣化させる（作者の当初意図どおり）。 */
+  /* ⚠️ 前景より上の装飾には、ブラウザーを問わず backdrop-filter を追加しない。
+     この ::after は z-index:2 でコンテンツ(z1)より上にあるため、ぼかす対象に
+     シート本文も含まれる。mask(exclude) で適用域が縁だけに制限される前提は
+     描画環境に依存し、文字やボタン全体をぼかす原因になる。
+     縁の光は conic リムとマスクだけで描き、背景のぼかし・屈折は本文より下の
+     素材クラス（.glass 等）の backdrop-filter に任せる。 */
   pointer-events: none;
   z-index: 2;
 }
@@ -605,20 +601,6 @@
  * 屈折を足すとかえって主張が強くなり「薄さ」の意図を壊すため対象外。
  */
 @supports (-webkit-app-region: none) {
-  /* .glass-specular リムの progressive blur は Chromium 限定。
-     WebKit では mask が backdrop-filter の適用域をクリップせずシート全面が
-     ぼやけて前景テキストを潰すため（上の ::after のコメント参照）、この
-     増光ブラーはここでのみ供給し、非対応環境は conic リムのみに劣化させる。 */
-  .glass-specular::after {
-    -webkit-backdrop-filter: blur(4px) saturate(1.8) brightness(1.35);
-    backdrop-filter: blur(4px) saturate(1.8) brightness(1.35);
-  }
-  .dark .glass-specular::after,
-  [data-glass-backdrop="dark"] .glass-specular::after {
-    -webkit-backdrop-filter: blur(4px) saturate(1.6) brightness(1.25);
-    backdrop-filter: blur(4px) saturate(1.6) brightness(1.25);
-  }
-
   .glass {
     -webkit-backdrop-filter: var(--glass-blur) var(--glass-refract);
     backdrop-filter: var(--glass-blur) var(--glass-refract);

package/src/styles/source-safelist.css

@@ -73,7 +73,9 @@
 @source inline("[--ksk-fab-bottom-offset:5rem]");
 @source inline("[--ksk-fab-bottom-offset:6rem]");
 @source inline("[-webkit-tap-highlight-color:transparent]");
+@source inline("[@media(any-pointer:coarse)]:min-w-11");
 @source inline("[@media(hover:hover)]:transition-colors");
+@source inline("[@media(hover:hover)_and_(pointer:fine)]:w-8");
 @source inline("[scrollbar-width:none]");
 @source inline("absolute");
 @source inline("active:bg-[var(--Active-Destructive-Button)]");