@cakejp/design-system 0.20.1 → 0.21.0

package/src/components/COMPONENT_LOOKUP.md

@@ -18,21 +18,22 @@
 | Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount | `@/components/foundations/avatar` | — | Default, フォールバック, サイズ比較, バッジ付き, グループ表示, レビュー表示例 |
 | Badge | `@/components/foundations/badge` | **variant**: `default`, `destructive`, `success`, `info-subtle`, `success-subtle`, `accent-subtle`, `caution-subtle`, `warning-subtle`, `muted-subtle`, `secondary`, `outline`, `ghost` | Default（商品ハイライト）, Secondary（カテゴリ）, Success（成功・完了）, Warning（注意）, Destructive（エラー）, Outline（枠線）, WithIcon, 注文ステータス例, 全バリアント一覧 |
 | Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis | `@/components/foundations/breadcrumb` | — | Default, 省略表示, 長いパス, 商品ページ例 |
-| Button | `@/components/foundations/button` | **variant**: `default`, `secondary`, `tertiary`, `destructive`, `ghost` | Default（CTA）, Secondary（副次的）, Secondary（追加済み）, Tertiary（低優先度）, Ghost（透明）, Destructive（破壊的）, Link（リンク）, Inverse（暗背景用 primary）, Ghost Inverse（暗背景用 secondary）, Inverse + Ghost Inverse（dark CTA 帯）, Overlay（画像上）, サイズ比較, XL（56px / rounded-18px）, Hero（56px / pill）, Large, FullWidth, Disabled（無効）, Loading（読込中）, WithIcon, IconOnly |
+| Button | `@/components/foundations/button` | **variant**: `default`, `secondary`, `tertiary`, `destructive`, `ghost` | Default（CTA）, Secondary（副次的）, Secondary（追加済み）, Tertiary（低優先度）, Outline（枠線）, Ghost（透明）, Destructive（破壊的）, Link（リンク）, Inverse（暗背景用 primary）, Ghost Inverse（暗背景用 secondary）, Inverse + Ghost Inverse（dark CTA 帯）, Overlay（画像上）, サイズ比較, XL（56px / rounded-18px）, Hero（56px / pill）, Large, FullWidth, Disabled（無効）, Loading（処理中）, interaction: loading の幅・フォーカス・送信抑止, WithIcon, IconOnly |
 | Calendar, CalendarDayButton | `@/components/foundations/calendar` | — | Default, お届け日選択, 日付範囲選択 |
 | Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent | `@/components/foundations/card` | **surface**: `default`, `primary` | Default, アクション付き, surface=, サーフェス文脈の伝播, 注文サマリー例 |
-| CheckboxCardGroup, CheckboxCardItem | `@/components/foundations/checkbox-card` | — | Default, 説明付き, 無効状態, 展開コンテンツ付き, ギフトオプション選択例, アレルギー情報例, バッジ付き, エラー状態 |
+| CheckboxCardGroup, CheckboxCardItem | `@/components/foundations/checkbox-card` | — | Default, 説明付き, 無効状態, 展開コンテンツ付き, ギフトオプション選択例, アレルギー情報例, バッジ付き, エラー状態, interaction: 読み上げ名と説明の分離 |
 | CheckboxGroup, CheckboxGroupItem | `@/components/foundations/checkbox-group` | — | Default, 選択済み, エラー, 非活性, ヘルプテキスト付き, 1カラム, 説明付き |
 | Checkbox | `@/components/foundations/checkbox` | — | Default, チェック済み, 件数バッジ付き, 説明テキスト付き, 非活性, HoverState, filter sidebar 実用例, 素の Checkbox（label なし）, エラーパターン, グループ例 |
 | Collapsible, CollapsibleTrigger, CollapsibleContent | `@/components/foundations/collapsible` | — | Default, CouponCodeInput, OrderOptions |
 | Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator | `@/components/foundations/command` | — | Default, ProductSearch, DeliveryOptions |
+| ConfirmDialogProvider | `@/components/foundations/confirm-dialog` | — | Destructive, Default, Queue, interaction: 確定・キャンセル・Esc とフォーカス復帰, interaction: 待ち行列で 1 件ずつ表示, interaction: 閉じかけに次の確認が来てもフォーカスは呼び出し元へ, interaction: メニュー項目から呼ぶと閉じた後はメニューのトリガーへ |
 | ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup | `@/components/foundations/context-menu` | — | Default, WithCheckboxItems |
 | DataTable, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell, DataTableAvatarCell, DataTableImageCell, DataTableLinkCell, DataTableCheckboxCell, DataTableActionCell, DataTableInputCell, DataTableSelectCell, DataTableNumberCell, DataTableDragHandleCell, DataTableBulkActions, DataTableSectionRow, DataTableAddRow, DataTableEmptyState | `@/components/foundations/data-table` | **state**: `default`, `selected`<br>**width**: `auto`, `max`, `hug`<br>**align**: `left`, `right`, `center` | Default, チェックボックス選択, タイトル固定, セクション, 空状態, 新規追加行, セル型バリエーション, 実用例（注文管理）, 入力系セル一覧, ソートヘッダー, D&D並び替え, interaction: チェック欄の操作と選択通知 |
-| Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/foundations/dialog` | — | Default, 確認ダイアログ, フォーム入力, interaction: 開閉とフォーカストラップ |
+| Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/foundations/dialog` | — | Default, 確認ダイアログ, フォーム入力, サイズ（size）, サイズ（SP は画面幅に収まる）, interaction: 開閉とフォーカストラップ, NestedSelectKeyboard, NestedDatePickerKeyboard |
 | Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription | `@/components/foundations/drawer` | — | Default, カート追加クイックビュー |
 | DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | `@/components/foundations/dropdown-menu` | — | Default, グループ付き, 注文アクション例 |
 | Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator | `@/components/foundations/field` | — | フォーム一式, ラベル付き区切り, Field / FieldLabel（1フィールドの箱） |
-| FileInput | `@/components/foundations/file-input` | — | Default, 複数選択 + accept, 無効, maxSize 超過エラー, FormField 連携 |
+| FileInput | `@/components/foundations/file-input` | — | Default, 複数選択 + accept, 無効, maxSize 超過エラー, FormField 連携, interaction: native FormData と controlled value の同期 |
 | Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField | `@/components/foundations/form` | — | RHF register / reset 統合, DeliveryAddressForm, ReviewForm, ContactForm, RHF: register() + 保存済みの初期値, RHF: Controller + 保存済みの初期値 |
 | HoverCard, HoverCardTrigger, HoverCardContent | `@/components/foundations/hover-card` | — | Default, DeliveryInfo, RatingDetail |
 | IconBadge | `@/components/foundations/icon-badge` | **size**: `md`, `ml`, `lg` | md（44px）, ml（48px）, lg（72px）, サイズ比較, Card 内（間隔=Card の gap-4）, リスト見出し（md） |
@@ -44,22 +45,22 @@
 | Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription | `@/components/foundations/popover` | — | Default, DeliveryDatePicker, AllergyInfo |
 | Progress | `@/components/foundations/progress` | — | Default, 送料無料まで, 送料無料達成 |
 | RadioGroup, RadioGroupItem | `@/components/foundations/radio-group` | — | Default, 説明付き, 選択済み, 無効状態, エラーパターン, 補足説明なし, 配送方法選択例, チップ型（choice chip）, チップ型（制御・無効）, チップ型（エラー）, 支払い方法（クレカ入力済）, 支払い方法（クレカ未入力） |
-| ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, ResponsiveDialogClose | `@/components/foundations/responsive-dialog` | — | 確認ダイアログ, フォーム入力, お知らせ（閉じるのみ）, お届け日選択（選択リスト） |
+| ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, ResponsiveDialogClose | `@/components/foundations/responsive-dialog` | — | 確認ダイアログ, フォーム入力, 幅を広げる（size）, お知らせ（閉じるのみ）, お届け日選択（選択リスト） |
 | ScrollArea, ScrollBar | `@/components/foundations/scroll-area` | — | Default, HorizontalTagScroll, OrderHistoryList |
 | Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue | `@/components/foundations/select` | — | Default, ラベル付き, グループ分け, サイズ比較, 注文フォーム例, エラーパターン, 横並びパターン（氏名・住所）, Input と並置（高さが揃う） |
 | Separator | `@/components/foundations/separator` | — | Default（水平）, 垂直, 注文確認ページ例 |
-| Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription | `@/components/foundations/sheet` | — | Default, モバイルメニュー, 商品フィルター, スライド方向 |
+| Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription | `@/components/foundations/sheet` | — | Default, モバイルメニュー, 商品フィルター, スライド方向, サイズ（size）, サイズ（SP は画面の 3/4） |
 | Skeleton | `@/components/foundations/skeleton` | — | Default, 円形（アバター用）, 商品カードスケルトン, 商品グリッドスケルトン, レビュースケルトン, 商品詳細ページスケルトン |
 | SkipLink | `@/components/foundations/skip-link` | — | Default, CustomTarget |
-| Slider | `@/components/foundations/slider` | — | Default, PriceRangeFilter, ServingSizeSelector, RatingFilter |
+| Slider | `@/components/foundations/slider` | — | Default, PriceRangeFilter, ServingSizeSelector, RatingFilter, interaction: 範囲スライダーの Home / End, interaction: 値なしは 1 つまみ |
 | SocialIcon | `@/components/foundations/social-icon` | — | Brand, Mono |
 | Toaster | `@/components/foundations/sonner` | — | Default, AddToCart, FavoriteAdded, StockError, OrderProcessing |
 | Spinner | `@/components/foundations/spinner` | — | Default, Small, Large, InlineWithText, FullPage |
 | Switch | `@/components/foundations/switch` | — | Default, ON 状態, 無効, サイズ比較, ブロック型, 通知設定例（リスト型） |
 | Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption | `@/components/foundations/table` | — | Default, フッター付き, 商品比較例, カート注文サマリー |
-| Tabs, TabsList, TabsTrigger, TabsContent | `@/components/foundations/tabs` | **variant**: `underbar`, `segment`<br>**scrollable**: `true`<br>**size**: `md`, `sm` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択, 狭幅（サイドバー 266px）, interaction: クリックと矢印キーでの切り替え |
+| Tabs, TabsList, TabsTrigger, TabsContent | `@/components/foundations/tabs` | **variant**: `underbar`, `segment`<br>**scrollable**: `true`<br>**size**: `md`, `sm` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択, 狭幅（サイドバー 266px）, 縦向き（orientation=vertical）, interaction: 縦向きの並びと上下キー, interaction: クリックと矢印キーでの切り替え |
 | Textarea | `@/components/foundations/textarea` | — | Default, 無効, メッセージカード入力例, エラーパターン, レビュー投稿例, 文字数カウンタ |
-| ToggleGroup, ToggleGroupItem | `@/components/foundations/toggle-group` | **width**: `fit`, `full`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, 複数選択, サイズ, アイコン付き, アイコンのみ, 無効 |
+| ToggleGroup, ToggleGroupItem | `@/components/foundations/toggle-group` | **width**: `fit`, `full`<br>**variant**: `default`, `outline`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, 複数選択, サイズ, アイコン付き, アイコンのみ, 無効 |
 | Toggle | `@/components/foundations/toggle` | **variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, TextFormatting, FavoriteToggle, Outline, Sizes |
 | Tooltip, TooltipTrigger, TooltipContent, TooltipProvider | `@/components/foundations/tooltip` | — | Default, 表示位置, アイコンボタン例 |
 
@@ -77,13 +78,13 @@
 | CategoryScroll | `@/components/primitives/category-scroll` | — | Default, CircleThumbnails |
 | CategoryShortcuts | `@/components/primitives/category-shortcuts` | — | Default, 選択あり, インタラクティブ（onClick）, 商品一覧ページでの使用例 |
 | ChatComposer | `@/components/primitives/chat-composer` | — | 基本, 添付あり, ⌘Enter 送信, 送信中, 無効化, 文字数カウンタ |
-| Chip | `@/components/primitives/chip` | **variant**: `filled`, `accent`<br>**size**: `sm`, `md`, `lg`, `tile`<br>**shape**: `pill`, `square` | Default, 人気キーワード, 全バリアント, States（hover / disabled）, サイズ比較, サイズタイル（狭い横並び）, フィルター選択, 削除可能（選択済みフィルター）, 検索画面での使用例 |
+| Chip | `@/components/primitives/chip` | **variant**: `filled`, `accent`, `selected`<br>**size**: `sm`, `md`, `lg`, `tile`<br>**shape**: `pill`, `square` | Default, 人気キーワード, 全バリアント, States（hover / disabled）, サイズ比較, サイズタイル（狭い横並び）, フィルター選択, 削除可能（選択済みフィルター）, 検索画面での使用例 |
 | CoachMark | `@/components/primitives/coach-mark` | — | オンボーディング, 全方向, オンボーディング各方向 |
 | Combobox | `@/components/primitives/combobox` | — | Default |
 | Container | `@/components/primitives/container` | — | Default（page / default gutter）, サイズ比較, gutter 比較 |
 | ContentCard, ContentList | `@/components/primitives/content-card` | — | 縦（グリッド一覧）, 一覧での高さ揃え, 横（画像が左）, リスト（Medium 型）, 長いタグラベル |
-| ContentCarousel | `@/components/primitives/content-carousel` | — | ヒーローバナー, 自動再生（5秒）, peek表示, 多列カード（PC 3枚）, 1枚のみ |
-| DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目） |
+| ContentCarousel | `@/components/primitives/content-carousel` | — | ヒーローバナー, 自動再生（5秒）, peek表示, peek表示（Container の中）, 多列カード（PC 3枚）, 1枚のみ |
+| DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目）, interaction: クリア後のフォーカス, interaction: FormField のエラーと接続 |
 | EmptyState | `@/components/primitives/empty-state` | — | お気に入り商品（空）, カート（空）, ブックマーク（空）, 検索結果なし, 汎用（説明のみ） |
 | ErrorState, NotFoundIllustration | `@/components/primitives/error-state` | — | ネットワークエラー, サーバーエラー, ページが見つからない, タイムアウト, 404（notFound variant）, 404（文言上書き）, イラスト単体 |
 | FilterBar | `@/components/primitives/filter-bar` | — | SP, SP（選択済み）, PC, 地域フィルター, もっと絞り込む |
@@ -91,20 +92,21 @@
 | FormField | `@/components/primitives/form-field` | — | — |
 | FunnelShell | `@/components/primitives/funnel-shell` | — | 注文内容の確認（ご購入手続き） |
 | Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴ＋長いナビ（中幅で自動退避）, ロゴ＋ナビ（navBreakpoint=lg）, containerSize=page（本文と左端を揃える）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
-| ImageCarousel | `@/components/primitives/image-carousel` | — | バナーカルーセル, 横長バナー, 正方形（商品画像）, OGP比率, 自動再生（3秒）, PC幅（ビューポート切替で確認）, トップページ ヒーローバナー |
+| ImageCarousel | `@/components/primitives/image-carousel` | — | バナーカルーセル, peek表示（Container の中）, 横長バナー, 正方形（商品画像）, OGP比率, 自動再生（3秒）, PC幅（ビューポート切替で確認）, トップページ ヒーローバナー |
 | ImageGallery | `@/components/primitives/image-gallery` | — | ドット付き, サムネイル付き, バナー（16:9）, PC商品詳細, 単一画像 |
 | ImageInput | `@/components/primitives/image-input` | **aspect**: `square`, `landscape`<br>**size**: `sm`, `md`, `lg` | 基本, 保存済み画像あり, 表示サイズ, FormField 連携, 検証エラー, クリア不可, 無効化 |
 | ImageUploader | `@/components/primitives/image-uploader` | — | — |
 | KebabMenu | `@/components/primitives/kebab-menu` | — | — |
 | ListItem | `@/components/primitives/list-item` | — | デフォルト（矢印）, キャプション付き, アイコン付き, テキスト値, バッジ付き, トグル, 矢印なし, 選択状態, メニューリスト（複数行）, アイコン付きメニュー, インタラクティブ（hover / focus） |
 | MenuDrawer | `@/components/primitives/menu-drawer` | — | デフォルト（最小構成）, ログイン済 (ユーザー名表示), 未ログイン (ログインボタン表示), サムネイル付きカテゴリ, バナー付き, 全部入り (大規模アプリ向け), ログインリンク非表示 |
-| MultiSelect | `@/components/primitives/multi-select` | — | Default |
+| MultiSelect | `@/components/primitives/multi-select` | — | Default, interaction: Chip 削除後のフォーカス |
 | NotificationBadge | `@/components/primitives/notification-badge` | **color**: `red`, `green`<br>**size**: `sm`, `md` | Default, ドットバッジ, 数値バッジ, カラーバリエーション, ヘッダーでの使用例, 非表示状態 |
 | NotificationList | `@/components/primitives/notification-list` | — | デフォルト, 横並び（管理画面向け）, 空の状態 |
-| NumberInput, QuantitySelector | `@/components/primitives/number-input` | — | Default, コンパクト型（sm）, サイズ比較, 最小・最大値, 無効状態, エラー状態, ゴミ箱アイコン, ゴミ箱＋削除確認ダイアログ, 直接入力パターン, 商品詳細での使用例, カート内での使用例, 価格・在庫入力（管理画面）, interaction: 増減と min/max のクランプ |
+| NumberInput, QuantitySelector | `@/components/primitives/number-input` | — | Default, コンパクト型（sm）, サイズ比較, 最小・最大値, 無効状態, エラー状態, ゴミ箱アイコン, ゴミ箱＋削除確認ダイアログ, 直接入力パターン, 商品詳細での使用例, カート内での使用例, 価格・在庫入力（管理画面）, interaction: 増減と min/max のクランプ, interaction: 上限・下限でもフォーカスを保つ, interaction: error の aria-invalid, interaction: FormField と接続 |
 | PriceDisplay | `@/components/primitives/price-display` | — | Default, セール価格, サイズ比較, セール × サイズ, 税込ラベルなし, 高額商品, 価格レンジ |
 | ProgressSteps | `@/components/primitives/progress-steps` | — | ステップ1（カート）, ステップ2（注文内容）, ステップ3（確認）, ステップ4（完了）, 全ステップ一覧, 会員登録フロー |
 | Prose | `@/components/primitives/prose` | — | 記事本文（Container narrow と組み合わせ）, children を包む, 幅の広い表（ページを横に伸ばさない） |
+| ScrollRow | `@/components/primitives/scroll-row` | — | Container の中, スナップ, はみ出さない（bleed=false）, タグの列 |
 | SearchBar | `@/components/primitives/search-bar` | — | Default, Small（ヘッダー向け）, form モード（JS 不要・SEO 向け）, カスタムプレースホルダー |
 | SearchPanel | `@/components/primitives/search-panel` | — | — |
 | SectionHeader | `@/components/primitives/section-header` | — | Default, サブタイトル付き, リンクなし, カスタムラベル, カルーセルナビ付き, ナビのみ, ナビ（先頭位置）, アクションボタン付き, サブタイトル + アクション, 狭幅のサブタイトル + アクション, サイズ一覧, キャプション付きサイズ比較, align=, LPヒーロー（SP 3xl / PC 5xl）, align=, start / center 比較 |
@@ -117,7 +119,7 @@
 | StatusCountTabs | `@/components/primitives/status-count-tabs` | — | — |
 | StickyActionBar | `@/components/primitives/sticky-action-bar` | — | SingleButton, TwoButtons, WithPrice |
 | SubNav | `@/components/primitives/sub-nav` | — | テキスト（本番準拠）, チップ型, アクティブなし |
-| Tag | `@/components/primitives/tag` | **variant**: `default`, `caution`, `sale`, `warning`, `info`, `info-fill`, `success`, `accent`, `timesale`, `berry`, `coupon`<br>**size**: `sm`, `md` | Default, 全バリアント一覧, サイズ比較, アイコン付き, 配送方法タグ, 商品カード内の例 |
+| Tag | `@/components/primitives/tag` | **variant**: `default`, `image`, `caution`, `sale`, `warning`, `info`, `info-fill`, `success`, `accent`, `timesale`, `berry`, `coupon`<br>**size**: `sm`, `md` | Default, 全バリアント一覧, サイズ比較, アイコン付き, 配送方法タグ, 商品カード内の例 |
 | Timeline | `@/components/primitives/timeline` | — | Default, カスタムマーカー |
 | WorkspaceShell | `@/components/primitives/workspace-shell` | — | 集中編集ワークスペース, ヘッダー中央寄せ（headerLayout=center）, 1カラム集中編集 |
 

package/src/preset-standalone.css

@@ -338,6 +338,48 @@
   --Border-Brand-Subtle: rgba(224, 75, 0, 0.24);
 }
 
+/* --- Layer 2b: High Contrast（コントラストを上げる）---
+ *
+ * 正本 src/styles/semantic.css 末尾の「High Contrast」節の hex 展開。
+ * 新ロール（--Border-Control / --Surface-Control-Track / --Focus-Ring-Control）は
+ * **高コントラストのときだけ**宣言する（:root / .dark では宣言しない）。部品側が
+ * var(--Border-Control, var(--Border-Medium-Emphasis)) のフォールバック付きで参照するので、
+ * 未宣言（既定）のときは従来の見た目のまま、要素単位の上書きにも追従する。
+ *   - OS の「コントラストを上げる」: @media (prefers-contrast: more)
+ *   - アプリが <html> へ付ける data-contrast="more"（任意の祖先も可だが、body 直下へ Portal される内容には届かない）
+ * 値: light = Gray-600 #787675（白に 4.52:1）/ dark = White-alpha-500 #FFFFFF80（黒に 5.32:1）/
+ *     フォーカスリング = #0C9E66（白に 3.44:1・黒に 6.10:1。既定の 50% リングを不透明にする）。
+ * semantic.css を変更したら、ここも合わせて直す（__tests__/contrast-more-tokens.test.ts が一致を検査する）。
+ * ソース順は semantic.css と同じ（属性 light → 属性 dark → @media light → dark）。
+ */
+[data-contrast="more"] {
+  --Border-Control: #787675;
+  --Surface-Control-Track: #787675;
+  --Focus-Ring-Control: #0C9E66;
+}
+
+.dark[data-contrast="more"],
+.dark [data-contrast="more"],
+[data-contrast="more"] .dark {
+  --Border-Control: #FFFFFF80;
+  --Surface-Control-Track: #FFFFFF80;
+  --Focus-Ring-Control: #0C9E66;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --Border-Control: #787675;
+    --Surface-Control-Track: #787675;
+    --Focus-Ring-Control: #0C9E66;
+  }
+
+  .dark {
+    --Border-Control: #FFFFFF80;
+    --Surface-Control-Track: #FFFFFF80;
+    --Focus-Ring-Control: #0C9E66;
+  }
+}
+
 /* --- Bridge: Semantic → shadcn tokens --- */
 :root {
   --spacing-1: 0.25rem;   /* 4px - scale 1 */

package/src/preset.css

@@ -42,7 +42,8 @@
    Tailwind 本体ではなく tw-animate-css のユーティリティ。preset が配らないと、
    自分で tw-animate-css を入れた consumer だけアニメーションが動く暗黙依存になる
    （実例: cakejp-biz-mag のモバイルメニューが無言で無アニメーションだった）。
-   パッケージ解決で consumer の node_modules から読む（DS の dependency）。 */
+   パッケージ解決で consumer の node_modules から読む（DS の dependency）。
+   prefers-reduced-motion では再生時間を 0.01ms に落とす（末尾の @layer base を参照）。 */
 @import "tw-animate-css";
 
 /* --- Dark mode variant --- */
@@ -409,4 +410,22 @@
   body {
     color: var(--foreground);
   }
+
+  /* prefers-reduced-motion: tw-animate-css の開閉アニメーション
+   * animate-in / animate-out（Popover / DropdownMenu / Select / Tooltip / HoverCard / ContextMenu /
+   * Menubar など）の再生時間は --tw-animation-duration → --tw-duration → 0.15s の順で決まる。
+   * duration-[var(--Motion-Duration-*)] を付けていない部品は reduced-motion でも 150ms 再生されていた。
+   * --tw-animation-duration を duration トークン（reduced-motion では 0.01ms）に向け、
+   * motion.css の --Motion-Duration-* と同じく一括で実質停止させる。
+   * - 0 ではなく 0.01ms: animationend を待つ Radix の閉じ処理（Presence）が止まらないようにする
+   * - base 層に置く: 利用側が animation-duration-* を明示した要素は、その指定を優先する
+   * - --tw-animation-duration は継承しない @property（tw-animate-css が登録）なので全要素に宣言する
+   * 通常の設定では何も変わらない。 */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      --tw-animation-duration: var(--Motion-Duration-Fast, 0.01ms);
+    }
+  }
 }

package/src/styles/semantic.css

@@ -219,3 +219,60 @@
 
   /* Third-Party（ダークでも同じ） */
 }
+
+/* ============================================
+ * High Contrast（コントラストを上げる）
+ *
+ * 入力・選択の操作部品の枠、スライダーの溝、リングだけのフォーカスは、既定では面の区切りと
+ * 同じ淡い色で、WCAG 1.4.11（非テキスト）の 3:1 に届かない（issue #301。既定の見た目の
+ * 変更は別判断のため据え置き）。次のどちらかのときだけ、3:1 以上の色に切り替える。
+ *   - OS の「コントラストを上げる」（@media (prefers-contrast: more)）
+ *   - アプリが <html> へ付ける data-contrast="more"（常時 opt-in。任意の祖先も可だが、body 直下へ Portal される
+ *     Dialog / Sheet / Popover 等の内容には届かない）
+ *
+ * 新ロール（--Border-Control / --Surface-Control-Track / --Focus-Ring-Control）は
+ * **ここ以外では宣言しない**（:root / .dark / @theme では宣言しない）。部品側は
+ * var(--Border-Control, var(--Border-Medium-Emphasis)) のようにフォールバック付きで参照するため、
+ * 未宣言のとき（= 既定）は従来と同じ変数をその要素で解決する。:root で宣言すると :root で
+ * 解決済みの値を子孫が継承し、消費側がラッパー要素単位で --Border-Medium-Emphasis 等を
+ * 上書きしても追従しなくなる（姉妹 DS ksk の #645 で見つかった後退）。
+ *
+ * 値は Surface-Primary（light = 白 / dark = 黒に合成）に対する実測。
+ *   --Border-Control / --Surface-Control-Track
+ *     light: Gray-600 #787675 = 4.52:1 / dark: White-alpha-500 を黒へ合成した #808080 = 5.32:1
+ *   --Focus-Ring-Control（既定の 50% リングの代わりに不透明で描く）
+ *     light: Focus-High-Emphasis #0C9E66 = 3.44:1 / dark: 6.10:1
+ * scripts/check-contrast.mjs が高コントラストの 2 モード（属性 / @media）を**例外なし**で 3:1 検査し、
+ * __tests__/contrast-more-tokens.test.ts が下の値と tokens.json の semanticContrastMore の一致を固定する。
+ *
+ * ソース順は検査と対応している（同じ詳細度では後に書いたものが勝つ）:
+ *   .dark（上の通常ブロック）→ 属性（light）→ 属性（dark）→ @media（light → dark）。
+ *   順を変えると scripts/check-contrast.mjs が失敗する。
+ * ============================================ */
+[data-contrast="more"] {
+  --Border-Control: var(--Primitive-Gray-600);
+  --Surface-Control-Track: var(--Primitive-Gray-600);
+  --Focus-Ring-Control: var(--Focus-High-Emphasis);
+}
+
+.dark[data-contrast="more"],
+.dark [data-contrast="more"],
+[data-contrast="more"] .dark {
+  --Border-Control: var(--Primitive-White-alpha-500);
+  --Surface-Control-Track: var(--Primitive-White-alpha-500);
+  --Focus-Ring-Control: var(--Focus-High-Emphasis);
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --Border-Control: var(--Primitive-Gray-600);
+    --Surface-Control-Track: var(--Primitive-Gray-600);
+    --Focus-Ring-Control: var(--Focus-High-Emphasis);
+  }
+
+  .dark {
+    --Border-Control: var(--Primitive-White-alpha-500);
+    --Surface-Control-Track: var(--Primitive-White-alpha-500);
+    --Focus-Ring-Control: var(--Focus-High-Emphasis);
+  }
+}

package/templates/AGENTS.md

@@ -15,7 +15,9 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 |---------|------|
 | `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
-| `node_modules/@cakejp/design-system/src/components/COMPONENT_LOOKUP.md` | 125コンポーネントの軽量な早見表 |
+| `node_modules/@cakejp/design-system/src/components/COMPONENT_LOOKUP.md` | 全コンポーネントの軽量な早見表（自動生成。件数は `contracts/components.json` の `meta.counts`） |
+| `node_modules/@cakejp/design-system/contracts/screen-patterns.json` | 画面パターン判断基準（CRUD・編集/作成/削除UIの選択） |
+| `node_modules/@cakejp/design-system/contracts/composition.json` | ページ骨格・余白リズム・視覚階層の組み方 |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
 | `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
 
@@ -33,6 +35,8 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 | カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
 | `::before` / `::after` で装飾 | DS の `SectionHeader`, `Chip`, `Badge` 等の variants |
 | 新しい `<div>` ラッパーでレイアウト | `Card`, `Section`, `Stack` 等のコンポーネント |
+| `window.confirm()` で確認 | `useConfirm`（アプリのルートに `ConfirmDialogProvider` を 1 つ置き、`const ok = await confirm({ title, description })`） |
+| 処理中のボタンを `disabled` + 自作スピナー（`Spinner` / `Loader2`）で組む | `Button` の `loading`（`<Button loading>保存</Button>`。幅とフォーカスを保ったまま押せなくする） |
 
 DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
 

package/templates/CLAUDE.md

@@ -15,7 +15,7 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 |---------|------|
 | `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
-| `node_modules/@cakejp/design-system/src/components/COMPONENT_LOOKUP.md` | 125コンポーネントの軽量な早見表 |
+| `node_modules/@cakejp/design-system/src/components/COMPONENT_LOOKUP.md` | 全コンポーネントの軽量な早見表（自動生成。件数は `contracts/components.json` の `meta.counts`） |
 | `node_modules/@cakejp/design-system/contracts/screen-patterns.json` | 画面パターン判断基準（CRUD・編集/作成/削除UIの選択） |
 | `node_modules/@cakejp/design-system/contracts/composition.json` | ページ骨格・余白リズム・視覚階層の組み方 |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
@@ -35,6 +35,8 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 | カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
 | `::before` / `::after` で装飾 | DS の `SectionHeader`, `Chip`, `Badge` 等の variants |
 | 新しい `<div>` ラッパーでレイアウト | `Card`, `Section`, `Stack` 等のコンポーネント |
+| `window.confirm()` で確認 | `useConfirm`（アプリのルートに `ConfirmDialogProvider` を 1 つ置き、`const ok = await confirm({ title, description })`） |
+| 処理中のボタンを `disabled` + 自作スピナー（`Spinner` / `Loader2`）で組む | `Button` の `loading`（`<Button loading>保存</Button>`。幅とフォーカスを保ったまま押せなくする） |
 
 DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
 

package/tokens.json

@@ -752,6 +752,55 @@
           "usage": "Overlay-Scrim のCSS契約値"
         }
       }
+    },
+    "semanticContrastMore": {
+      "description": "コントラストを上げる設定（OS の prefers-contrast: more、またはアプリが付ける data-contrast=\"more\"）のときだけ宣言される新ロール。:root / .dark では宣言しない。部品は var(--Border-Control, var(--Border-Medium-Emphasis)) のようにフォールバック付きで参照する。値の正本は src/styles/semantic.css 末尾の High Contrast 節で、__tests__/contrast-more-tokens.test.ts が一致を固定する",
+      "light": {
+        "border": {
+          "control": {
+            "value": "var(--Primitive-Gray-600)",
+            "hex": "#787675",
+            "usage": "Border-Control。入力・選択の操作部品の枠・輪郭（対象は CLAUDE_DEV.md の「高コントラスト」節）。Surface-Primary に対し 4.52:1"
+          }
+        },
+        "surface": {
+          "control-track": {
+            "value": "var(--Primitive-Gray-600)",
+            "hex": "#787675",
+            "usage": "Surface-Control-Track。Slider の溝。Surface-Primary に対し 4.52:1"
+          }
+        },
+        "focus": {
+          "ring-control": {
+            "value": "var(--Focus-High-Emphasis)",
+            "hex": "#0C9E66",
+            "usage": "Focus-Ring-Control。リングだけでフォーカスを示す部品（FOCUS_RING_ONLY / FOCUS_RING_INSET）の不透明なリング。既定は 50% 透過で 3:1 未満。Surface-Primary に対し 3.44:1"
+          }
+        }
+      },
+      "dark": {
+        "border": {
+          "control": {
+            "value": "var(--Primitive-White-alpha-500)",
+            "hex": "#FFFFFF80",
+            "usage": "Border-Control。dark の Surface-Primary（黒に合成）に対し 5.32:1"
+          }
+        },
+        "surface": {
+          "control-track": {
+            "value": "var(--Primitive-White-alpha-500)",
+            "hex": "#FFFFFF80",
+            "usage": "Surface-Control-Track。dark の Surface-Primary に対し 5.32:1"
+          }
+        },
+        "focus": {
+          "ring-control": {
+            "value": "var(--Focus-High-Emphasis)",
+            "hex": "#0C9E66",
+            "usage": "Focus-Ring-Control。dark の Surface-Primary に対し 6.10:1"
+          }
+        }
+      }
     }
   },
   "typography": {

package/dist/lib/link-component.js

@@ -1,6 +0,0 @@
-function n(r, e) {
-  return e || !r ? "a" : r;
-}
-export {
-  n as resolveLinkComponent
-};