ksk-design-system 2.6.2 → 2.6.4

package/dist/{prompt-coordinator-DR5uqIaR.js → semantic-icons-CP9aRQ9C.js}

@@ -158,4 +158,38 @@ function b({ id: t, priority: n = 0, when: r, children: i }) {
 	});
 }
 //#endregion
-export { h as a, n as c, m as i, r as l, b as n, y as o, _ as r, v as s, i as t };
+//#region src/lib/semantic-icons.ts
+var x = {
+	selected: {
+		label: "選択済み",
+		glyph: "tick",
+		use: "選択対象が外枠を持つタイルや項目"
+	},
+	selectedSquare: {
+		label: "選択済み（四角）",
+		glyph: "TickSquare",
+		use: "独立した選択状態の表示"
+	},
+	success: {
+		label: "完了",
+		glyph: "TickCircle",
+		use: "処理の完了・成功"
+	},
+	close: {
+		label: "閉じる",
+		glyph: "Add rotated 45°",
+		use: "閉じる・選択解除（操作名はボタンへ指定）"
+	},
+	info: {
+		label: "情報",
+		glyph: "InfoCircleIcon",
+		use: "補足情報。警告とは区別する"
+	},
+	warning: {
+		label: "警告",
+		glyph: "Danger",
+		use: "注意が必要な状態。説明文を併記する"
+	}
+};
+//#endregion
+export { m as a, v as c, _ as i, n as l, i as n, h as o, b as r, y as s, x as t, r as u };

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/components/ui/semantic-icon.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type SemanticIconName } from "../../lib/semantic-icons";
+export { SEMANTIC_ICONS, type SemanticIconName } from "../../lib/semantic-icons";
+export interface SemanticIconProps extends React.ComponentProps<"svg"> {
+    name: SemanticIconName;
+    color?: string;
+    style?: React.CSSProperties;
+    /** Cross-platform alias for aria-label; aria-label wins when both are supplied. */
+    accessibilityLabel?: string;
+    size?: number | string;
+}
+/**
+ * 意味から選ぶ装飾アイコン。選択状態や操作名は親のコントロールで伝える。
+ * 単独の情報画像として使う場合は aria-label を指定する。
+ */
+export declare function SemanticIcon({ name, size, className, accessibilityLabel, color, style, ...props }: SemanticIconProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -279,3 +279,5 @@ export { weddingCategories, projectCategories, getCategoricalColor, getCategoric
 export type { CategoryPresetItem } from "./lib/category-presets";
 export { CATEGORICAL_SURFACE_CLASS, CATEGORICAL_DOT_CLASS, categoricalSurfaceClass, categoricalVar, } from "./lib/categorical";
 export type { CategoricalIndex } from "./lib/categorical";
+export { SemanticIcon, SEMANTIC_ICONS } from "./components/ui/semantic-icon";
+export type { SemanticIconProps, SemanticIconName } from "./components/ui/semantic-icon";

package/dist/types/lib/semantic-icons.d.ts

@@ -0,0 +1,34 @@
+/** Meaning first: Check is a checkbook; InfoCircle in iconsax is an exclamation mark. */
+export declare const SEMANTIC_ICONS: {
+    readonly selected: {
+        readonly label: "選択済み";
+        readonly glyph: "tick";
+        readonly use: "選択対象が外枠を持つタイルや項目";
+    };
+    readonly selectedSquare: {
+        readonly label: "選択済み（四角）";
+        readonly glyph: "TickSquare";
+        readonly use: "独立した選択状態の表示";
+    };
+    readonly success: {
+        readonly label: "完了";
+        readonly glyph: "TickCircle";
+        readonly use: "処理の完了・成功";
+    };
+    readonly close: {
+        readonly label: "閉じる";
+        readonly glyph: "Add rotated 45°";
+        readonly use: "閉じる・選択解除（操作名はボタンへ指定）";
+    };
+    readonly info: {
+        readonly label: "情報";
+        readonly glyph: "InfoCircleIcon";
+        readonly use: "補足情報。警告とは区別する";
+    };
+    readonly warning: {
+        readonly label: "警告";
+        readonly glyph: "Danger";
+        readonly use: "注意が必要な状態。説明文を併記する";
+    };
+};
+export type SemanticIconName = keyof typeof SEMANTIC_ICONS;

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/SemanticIcon.d.ts

@@ -0,0 +1,12 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { SemanticIconName } from "../../lib/semantic-icons";
+export { SEMANTIC_ICONS, type SemanticIconName } from "../../lib/semantic-icons";
+export interface SemanticIconProps {
+    name: SemanticIconName;
+    size?: number;
+    color?: string;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/** Meaning-compatible native glyphs. View geometry keeps SVG an optional dependency. */
+export declare function SemanticIcon({ name, size, color, accessibilityLabel, style }: SemanticIconProps): import("react").JSX.Element;

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

@@ -20,6 +20,8 @@ export interface SheetProps {
      * シート下端に固定で表示する要素（例：「つづける」ボタン）。
      * children の ScrollView と分離されるためコンテンツのスクロールに
      * 追従しない。snap mode（bottom + snapPoints）でのみ有効。
+     * ソフトキーボード表示中はその上に固定し、本文を一時拡張する。
+     * キーボード回避は Sheet が所有するため footer に追加 inset は不要。
      */
     footer?: React.ReactNode;
     /**

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";
@@ -132,3 +133,4 @@ export { ReviewCard, type ReviewCardProps } from "./ReviewCard";
 export { ReviewSummary, type ReviewSummaryProps } from "./ReviewSummary";
 export { AppShell, type AppShellProps } from "./AppShell";
 export { MarketingShell, type MarketingShellProps } from "./MarketingShell";
+export { SemanticIcon, SEMANTIC_ICONS, type SemanticIconProps, type SemanticIconName } from "./SemanticIcon";

package/dist/types/native/sheet-viewport-layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Receives the actual Modal working area after iOS keyboard avoidance or
+ * Android adjustResize. Never subtract keyboard height again here.
+ */
+export declare function resolveSheetViewportLayout(fullHeight: number, panelHeight: number, measuredHeight: number | null, keyboardOpen: boolean): {
+    availableHeight: number;
+    panelHeight: number;
+    expandToViewport: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -204,11 +204,16 @@
     "test:watch": "vitest",
     "test:interaction": "vitest run --config vitest.storybook.config.ts",
     "test:a11y": "vitest run --config vitest.a11y.config.ts",
-    "check": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.type-tests.json --noEmit && bash scripts/lint-scratch.sh && bash scripts/check-deps.sh && node scripts/check-published-deps.mjs && node scripts/check-radix-floor.mjs && node scripts/check-css-setup.mjs && bash scripts/check-drift.sh && node scripts/check-screen-contracts.mjs && node scripts/check-docs-drift.mjs && node scripts/check-agents-docs-sync.mjs && node scripts/check-contrast.mjs && node scripts/check-design-md.mjs && node scripts/check-tailwind-v4.mjs && node scripts/check-prefix-order.mjs && node scripts/check-flex-shrink.mjs && node scripts/check-deprecations.mjs && node scripts/check-rules-contract.mjs && node scripts/sync-version.mjs --check && node scripts/generate-migration-doc.mjs --check && bash scripts/check-responsive.sh && node scripts/generate-component-lookup.mjs --check && node scripts/generate-platform-tokens.mjs --check && node scripts/generate-token-hex-cache.mjs --check && node scripts/generate-source-safelist.mjs --check && tsc -p tsconfig.native.json --noEmit && node scripts/check-native-parity.mjs && node scripts/generate-native-component-lookup.mjs --check",
+    "check": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.type-tests.json --noEmit && bash scripts/lint-scratch.sh && bash scripts/check-deps.sh && node scripts/check-published-deps.mjs && node scripts/check-radix-floor.mjs && node scripts/check-css-setup.mjs && bash scripts/check-drift.sh && node scripts/check-screen-contracts.mjs && node scripts/check-docs-drift.mjs && node scripts/check-agents-docs-sync.mjs && node scripts/check-contrast.mjs && node scripts/check-design-md.mjs && node scripts/check-tailwind-v4.mjs && node scripts/check-prefix-order.mjs && node scripts/check-flex-shrink.mjs && node scripts/check-deprecations.mjs && node scripts/check-rules-contract.mjs && node scripts/sync-version.mjs --check && node scripts/generate-migration-doc.mjs --check && bash scripts/check-responsive.sh && node scripts/generate-component-lookup.mjs --check && node scripts/generate-platform-tokens.mjs --check && node scripts/generate-token-hex-cache.mjs --check && node scripts/generate-source-safelist.mjs --check && tsc -p tsconfig.native.json --noEmit && node scripts/check-native-parity.mjs && node scripts/generate-native-component-lookup.mjs --check && npm run check:native-support",
     "check:agent": "npm run lint && npm run check && npm test && npm run lint:story-reuse",
     "version": "node scripts/sync-version.mjs",
     "mcp:build": "cd mcp-server && npm install && npm run build",
-    "mcp:start": "node mcp-server/dist/index.js"
+    "mcp:start": "node mcp-server/dist/index.js",
+    "test:docs": "node scripts/check-storybook-docs.mjs",
+    "test:visual": "node scripts/check-visual.mjs",
+    "test:visual:guards": "node --test test/visual/*.test.mjs",
+    "generate:native-support": "node scripts/generate-native-support.mjs",
+    "check:native-support": "node scripts/generate-native-support.mjs --check"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.3.0",
@@ -279,6 +284,7 @@
     "iconsax-reactjs": "^0.0.8",
     "jsdom": "^25.0.1",
     "playwright": "^1.62.0",
+    "pngjs": "^7.0.0",
     "radix-ui": "^1.6.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/components/COMPONENT_LOOKUP.md

@@ -61,6 +61,7 @@
 | SectionNav | `@/components/ui/section-nav` | — | Vertical, Horizontal, StickyGuide |
 | Section | `@/components/ui/section` | **spacing**: `sm`, `md`, `lg`, `xl`<br>**background**: `none`, `subtle`, `accent-subtle` | FullBleedBandWithContainedContent |
 | Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue | `@/components/ui/select` | **size**: `sm`, `default`, `lg` | WithPlaceholder, WithGroups, WithDisabledItem, DisabledSelect, OpensAndSelectsOption, SelectsWithKeyboard |
+| SEMANTIC_ICONS, SemanticIcon | `@/components/ui/semantic-icon` | — | — |
 | Separator | `@/components/ui/separator` | — | Horizontal, Vertical |
 | Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetDragIndicator | `@/components/ui/sheet` | **side**: `top`, `bottom`, `left`, `right`, `float`, `float-glass`, `bottom-glass` | BottomSheet, FloatSheet, TopSheet, FloatSheetTallContent, RightSheet, A11yOptions, TitleAutoFocusAppearance, Float Glass (Liquid Glass), Bottom Glass (Liquid Glass), BottomSheet — swipeToClose, Float — 仮想キーボード追従, BottomSheet — swipeToClose (full height / scrollable), BottomSheet — Snap 0.4/0.9, BottomSheet — Snap (push-up layout), BottomSheet — nested (#158), OpensAndIsImmediatelyInteractive, ChildDescriptionIsLinked, ChildDescriptionIsLinkedWithSwipeToClose, NoDescriptionLeavesNoDescribedBy, ChildDescriptionIsLinkedWithSnapPoints, ChildDescriptionIsLinkedWithSwipeSideDrawer, DescriptionPropIsLinked, ExplicitDescribedByWins |
 | Skeleton, SkeletonText | `@/components/ui/skeleton` | — | CardSkeleton, TextSkeleton, SkeletonText (5 lines) |
@@ -145,7 +146,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 シート） |
@@ -153,7 +154,7 @@
 | Screen | `@/components/patterns/screen` | — | ScrollableWithFooter, WithHeader, FixedPhotoHero |
 | SearchBar | `@/components/patterns/search-bar` | — | Default, WithValue, Disabled, WithOnSearch, AsForm |
 | SectionHeader | `@/components/patterns/section-header` | — | WithAction, WithoutAction, TitleOnly, WithGhostButton |
-| SettingsSection, SettingsListRow | `@/components/patterns/settings-section` | — | Group, Card, Danger |
+| SettingsSection, SettingsListRow | `@/components/patterns/settings-section` | — | Group, Card, Danger, CompactSpacing |
 | ShareButtons | `@/components/patterns/share-buttons` | — | Circle, Inline, SelectiveProviders, JapanDefault, ExtendedProviders, With onShare tracking |
 | SideDrawerFrame | `@/components/patterns/side-drawer-frame` | — | RightDrawer, LeftDrawer, RightDrawer — swipeToClose, LeftDrawer — swipeToClose, Glass |
 | SimplePagination | `@/components/patterns/simple-pagination` | — | アイテム数指定 (items), ページ数指定 (pages), compact (モバイル省略表示), 境界での disabled, 0 件 |

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: 154
 - 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 |
@@ -160,3 +161,5 @@ React Native / Expo consumer は、新規 UI を作る前にこの一覧で既
 | `ReviewSummary` | `src/native/components/ReviewSummary.tsx` | Phase 7: Commerce |
 | `AppShell` | `src/native/components/AppShell.tsx` | Phase 8: Shells |
 | `MarketingShell` | `src/native/components/MarketingShell.tsx` | Phase 8: Shells |
+| `SEMANTIC_ICONS` | `src/native/components/SemanticIcon.tsx` | Phase 8: Shells |
+| `SemanticIcon` | `src/native/components/SemanticIcon.tsx` | Phase 8: Shells |

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/product-theme.css

@@ -61,6 +61,14 @@
 @import "./shadow.css";
 
 :root {
+  /* Settings rows: independent of button dimensions; 44px floor in the component. */
+  --Settings-Row-Min-Height: 3.5rem;
+  --Settings-Row-Gap: 0.75rem;
+  --Settings-Row-Padding-X: 1rem;
+  --Settings-Row-Padding-Y: 0.75rem;
+  /* Pointer-only chip removal. Coarse pointers retain a 44px target. */
+  --Chip-Remove-Width: 2rem;
+
   /* ─── Control: Button 系の内寸 ───
      5段スケール。Button の size バリアント xs / sm / default(=Md) / lg / xl と
      1対1で対応する。既定値は h-6/h-8/h-10/h-12/h-14・px-2/px-3/px-4/px-6/px-8。 */

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-[max(2rem,var(--Chip-Remove-Width))]");
 @source inline("[scrollbar-width:none]");
 @source inline("absolute");
 @source inline("active:bg-[var(--Active-Destructive-Button)]");
@@ -429,6 +431,7 @@
 @source inline("gap-[var(--Nav-Item-Gap)]");
 @source inline("gap-[var(--Nav-Pill-Gap)]");
 @source inline("gap-[var(--Product-Card-Gap)]");
+@source inline("gap-[var(--Settings-Row-Gap)]");
 @source inline("gap-x-2");
 @source inline("gap-x-4");
 @source inline("gap-y-1");
@@ -668,6 +671,7 @@
 @source inline("min-h-[80px]");
 @source inline("min-h-[inherit]");
 @source inline("min-h-[max(2.75rem,var(--Nav-Item-Min-Height))]");
+@source inline("min-h-[max(2.75rem,var(--Settings-Row-Min-Height))]");
 @source inline("min-h-[var(--Control-Height-Xl)]");
 @source inline("min-h-[var(--Field-Min-Height)]");
 @source inline("min-h-[var(--Nav-Pill-Min-Height)]");
@@ -826,6 +830,7 @@
 @source inline("px-[var(--Field-Padding-X-Md)]");
 @source inline("px-[var(--Field-Padding-X-Sm)]");
 @source inline("px-[var(--Nav-Pill-Padding-X)]");
+@source inline("px-[var(--Settings-Row-Padding-X)]");
 @source inline("py-0.5");
 @source inline("py-1");
 @source inline("py-1.5");
@@ -844,6 +849,7 @@
 @source inline("py-[var(--Field-Padding-Y)]");
 @source inline("py-[var(--Nav-Pill-Padding-Y)]");
 @source inline("py-[var(--Product-Page-Padding-Y)]");
+@source inline("py-[var(--Settings-Row-Padding-Y)]");
 @source inline("py-[var(--Space-Section-2xl)]");
 @source inline("py-[var(--Space-Section-md)]");
 @source inline("py-[var(--Space-Section-xl)]");