@cakejp/design-system 0.22.1 → 0.24.0

package/dist/types/lib/ime.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 日本語入力（IME）の変換中に押されたキーを見分けるための判定。
+ *
+ * 判定は 2 段構え:
+ *  1. `isComposing` — 標準。Chrome / Firefox はこれで足りる
+ *  2. `keyCode === 229` — Safari（WebKit）は変換を終えるキーの keydown を compositionend の
+ *     後に出すため、その keydown では `isComposing` が false になる。代わりに keyCode が
+ *     229（"process" キー）になるので、それも変換中として扱う。一部の Android WebView も
+ *     `isComposing` を立てずに 229 だけを送る
+ */
+/** 判定に必要な最小限の形（React.KeyboardEvent と DOM の KeyboardEvent の両方を受ける）。 */
+export interface ImeKeyEventLike {
+    nativeEvent?: {
+        isComposing?: boolean;
+        keyCode?: number;
+    };
+    isComposing?: boolean;
+    keyCode?: number;
+}
+/** 変換中の keydown なら true。 */
+export declare function isImeComposing(event: ImeKeyEventLike): boolean;
+/**
+ * オーバーレイ（Dialog / Sheet / AlertDialog / Drawer / Popover）の `onEscapeKeyDown` で使う。
+ * 変換中の Esc（変換の取り消し）なら `preventDefault()` して true を返す。
+ *
+ * Radix の DismissableLayer は `key === "Escape"` だけを見て閉じるため、変換を取り消すつもりの
+ * Esc で入力中のダイアログやシートごと閉じ、入力した内容が消えていた。preventDefault すると
+ * Radix は閉じない。変換していないときの Esc は従来どおり閉じる。
+ * consumer の `onEscapeKeyDown` を先に呼んでから、このガードを呼ぶこと。
+ */
+export declare function guardEscapeDuringIme(event: Pick<Event, "preventDefault"> & ImeKeyEventLike): boolean;
+/**
+ * consumer の `onEscapeKeyDown` を先に呼び、そのあと変換中の Esc を止めるハンドラーを作る。
+ * Content 部品の `onEscapeKeyDown` にそのまま渡す。
+ */
+export declare function composeEscapeKeyDownWithImeGuard(handler: ((event: KeyboardEvent) => void) | undefined): (event: KeyboardEvent) => void;

package/dist/types/lib/search-normalize.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ## 絞り込み検索の表記ゆれ吸収（Combobox 等）
+ *
+ * 日本語の候補を部分一致で絞り込むとき、次の違いを同じとみなす:
+ * - 大文字 / 小文字（`Tokyo` / `tokyo`）
+ * - 全角 / 半角（NFKC。`ＡＢＣ` / `ABC`、`ｼﾌﾞﾔ` / `シブヤ`）
+ * - ひらがな / カタカナ（`しぶや` / `シブヤ`）
+ * - 漢字に挟まれた「ヶ / ケ / ヵ / が」（`市ヶ谷` / `市ケ谷`、`霞が関` / `霞ケ関`）
+ *
+ * 「ヶ」系の同一視は漢字に挟まれたときだけに限る（`ケーキ` が `がーき` に当たらないように）。
+ * 姉妹 DS（KSK #853）の Combobox の既定の絞り込みを移植したもの。
+ */
+/** 文脈に依らない正規化: NFKC（全角半角）→ 小文字 → カタカナをひらがなへ */
+declare function normalizeSearchText(text: string): string;
+/**
+ * 表記ゆれ用の正規化。{@link normalizeSearchText} 済みの文字列について、漢字に挟まれた
+ * 「ヶ / ケ / ヵ / が」を同じ字にする。直後が文字列の終わりでも同一視する（「市ヶ」まで打った途中でも
+ * 当たるように）。`isQuery` のときは先頭の直前を漢字とみなす（「ヶ谷」と打っても候補の「漢字 + ケ」に当たるように）。
+ */
+declare function normalizeKeVariants(normalized: string, isQuery: boolean): string;
+/**
+ * 候補（ラベル・別名）のどれかが検索語を部分一致で含むか。
+ * 素の正規化での部分一致、または「ヶ」系もそろえた正規化での部分一致のどちらかで当てる
+ * （同一視は「追加で当てる」だけにし、`ケ谷` → `市ケ谷` のような素の一致を落とさない）。
+ * 検索語が空白だけのときは全件に当たる。
+ */
+declare function matchesSearch(candidates: ReadonlyArray<string | undefined>, query: string): boolean;
+export { normalizeSearchText, normalizeKeVariants, matchesSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.22.1",
+  "version": "0.24.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -96,6 +96,7 @@
     "generate:lint-rules": "node scripts/generate-lint-rules.mjs",
     "generate:lookup": "node scripts/generate-component-lookup.mjs",
     "lint:contrast": "node scripts/check-contrast.mjs",
+    "check:bundle": "node scripts/check-bundle-size.mjs",
     "lint:css-vars": "node scripts/check-css-vars.mjs",
     "lint:vrt-baselines": "node scripts/check-vrt-baselines.mjs",
     "check": "tsc --noEmit -p tsconfig.app.json && npm run typecheck:stories && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/check-docs-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs && node scripts/check-css-vars.mjs && npm run lint:contrast && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh && bash scripts/check-agents-mirror.sh && node scripts/check-vrt-baselines.mjs",
@@ -164,6 +165,7 @@
     "@xyflow/react": "^12.10.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "esbuild": "^0.27.4",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",

package/src/components/COMPONENT_LOOKUP.md

@@ -13,12 +13,12 @@
 |-----------|--------|----------|---------|
 | Accordion, AccordionItem, AccordionTrigger, AccordionContent | `@/components/foundations/accordion` | — | Default（単一展開）, 複数展開, 商品ページFAQ例, interaction: 単一展開の排他と折りたたみ |
 | AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger | `@/components/foundations/alert-dialog` | — | Default, 破壊的操作（アカウント削除）, コンパクトサイズ |
-| Alert, AlertTitle, AlertDescription | `@/components/foundations/alert` | **variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`<br>**variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`, `inline-warning` | Success（成功）, Info（お知らせ）, Error（エラー）, Warning（注意）, Inline Info（インライン情報）, Inline Caution（インラインエラー）, Inline Warning（インライン警告）, Prop-based Warning（旧 Banner 相当）, Prop-based Error（エラー）, Prop-based Info（お知らせ）, Prop-based Success（成功）, Prop-based with Action（アクション付き）, Prop-based Inline Info（インライン情報）, Prop-based Inline Caution（インラインエラー）, Prop-based Inline Warning（インライン警告）, Info + ボタン, Error（複数メッセージ）, 全 Bordered バリアント, 全 Inline バリアント |
+| Alert, AlertTitle, AlertDescription | `@/components/foundations/alert` | **variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`, `inline-warning`<br>**variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`, `inline-warning` | Success（成功）, Info（お知らせ）, Error（エラー）, Warning（注意）, Inline Info（インライン情報）, Inline Caution（インラインエラー）, Inline Warning（インライン警告）, Prop-based Warning（旧 Banner 相当）, Prop-based Error（エラー）, Prop-based Info（お知らせ）, Prop-based Success（成功）, Prop-based with Action（アクション付き）, Prop-based Inline Info（インライン情報）, Prop-based Inline Caution（インラインエラー）, Prop-based Inline Warning（インライン警告）, Info + ボタン, Error（複数メッセージ）, 全 Bordered バリアント, 全 Inline バリアント |
 | AspectRatio | `@/components/foundations/aspect-ratio` | — | Square, Banner16x9, ProductImage4x3, RatioComparison |
 | 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, 注文ステータス例, 全バリアント一覧 |
+| Badge | `@/components/foundations/badge` | **variant**: `default`, `destructive`, `success`, `info-subtle`, `success-subtle`, `accent-subtle`, `caution-subtle`, `warning-subtle`, `muted-subtle`, `secondary`, `outline`, `ghost`, `link` | 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（低優先度）, 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 |
+| Button | `@/components/foundations/button` | **variant**: `default`, `secondary`, `tertiary`, `destructive`, `ghost`, `outline`, `link`, `inverse`, `ghost-inverse`, `overlay`<br>**size**: `default`, `xs`, `sm`, `lg`, `xl`, `hero`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`, `icon-xl` | 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, 説明付き, 無効状態, 展開コンテンツ付き, ギフトオプション選択例, アレルギー情報例, バッジ付き, エラー状態, interaction: 読み上げ名と説明の分離 |
@@ -28,13 +28,13 @@
 | 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: チェック欄の操作と選択通知 |
+| 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: チェック欄の操作と選択通知, 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フィールドの箱） |
+| Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator | `@/components/foundations/field` | — | フォーム一式, ラベル付き区切り, Field / FieldLabel（1フィールドの箱）, 詰めた並び（gap=sm + 小見出し） |
 | 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 + 保存済みの初期値 |
+| Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField | `@/components/foundations/form` | — | RHF register / reset 統合, DeliveryAddressForm, ReviewForm, ContactForm, RHF: register() + 保存済みの初期値, RHF: Controller + 保存済みの初期値, RHF: NumberInput + 保存済みの初期値 |
 | 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） |
 | Input | `@/components/foundations/input` | — | Default, WithLabel, Email, Password, Tel, Search, WithIcon, Disabled, Invalid（エラー）, Textarea, フォーム例（配送先）, 文字数カウンタ |
@@ -43,7 +43,7 @@
 | NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport | `@/components/foundations/navigation-menu` | — | Default, WithoutViewport |
 | Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis | `@/components/foundations/pagination` | — | Default, 省略付き, 表示窓を自動計算, 最初のページ, 商品一覧ページ例 |
 | Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription | `@/components/foundations/popover` | — | Default, DeliveryDatePicker, AllergyInfo |
-| Progress | `@/components/foundations/progress` | — | Default, 送料無料まで, 送料無料達成 |
+| Progress | `@/components/foundations/progress` | — | Default, 送料無料まで, 送料無料達成, interaction: 値が読み上げに伝わる |
 | RadioGroup, RadioGroupItem | `@/components/foundations/radio-group` | — | Default, 説明付き, 選択済み, 無効状態, エラーパターン, 補足説明なし, 配送方法選択例, チップ型（choice chip）, チップ型（制御・無効）, チップ型（エラー）, 支払い方法（クレカ入力済）, 支払い方法（クレカ未入力） |
 | ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, ResponsiveDialogClose | `@/components/foundations/responsive-dialog` | — | 確認ダイアログ, フォーム入力, 幅を広げる（size）, お知らせ（閉じるのみ）, お届け日選択（選択リスト） |
 | ScrollArea, ScrollBar | `@/components/foundations/scroll-area` | — | Default, HorizontalTagScroll, OrderHistoryList |
@@ -60,7 +60,7 @@
 | 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）, 縦向き（orientation=vertical）, interaction: 縦向きの並びと上下キー, interaction: クリックと矢印キーでの切り替え |
 | Textarea | `@/components/foundations/textarea` | — | Default, 無効, メッセージカード入力例, エラーパターン, レビュー投稿例, 文字数カウンタ |
-| ToggleGroup, ToggleGroupItem | `@/components/foundations/toggle-group` | **width**: `fit`, `full`<br>**variant**: `default`, `outline`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, 複数選択, サイズ, アイコン付き, アイコンのみ, 無効 |
+| ToggleGroup, ToggleGroupItem | `@/components/foundations/toggle-group` | **width**: `fit`, `full`<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, 表示位置, アイコンボタン例 |
 
@@ -71,7 +71,7 @@
 | Component | Import | Variants | Stories |
 |-----------|--------|----------|---------|
 | AdminHeader | `@/components/primitives/admin-header` | — | — |
-| AdminSideNav | `@/components/primitives/admin-side-nav` | — | 下端寄り・多数項目・キーボード操作, interaction: flyout の開閉・フォーカス・viewport 境界 |
+| AdminSideNav | `@/components/primitives/admin-side-nav` | — | 下端寄り・多数項目・キーボード操作, interaction: flyout の開閉・フォーカス・viewport 境界, interaction: ドロワーのリンクを別タブで開くときは閉じない |
 | BannerCarousel | `@/components/primitives/banner-carousel` | — | Default, SmallBanners, LargeBanners |
 | BottomTabBar | `@/components/primitives/bottom-tab-bar` | — | Default（ホーム）, アクティブ状態, バッジ付き, バッジオーバーフロー（99+）, バナー付き, 記念日アクティブ |
 | BulkActionBar | `@/components/primitives/bulk-action-bar` | — | — |
@@ -80,11 +80,11 @@
 | ChatComposer | `@/components/primitives/chat-composer` | — | 基本, 添付あり, ⌘Enter 送信, 送信中, 無効化, 文字数カウンタ |
 | 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 |
+| Combobox | `@/components/primitives/combobox` | — | Default, interaction: 表記ゆれの絞り込みと読み上げ名, interaction: 連続した部分一致・元の並びのまま, 一覧を開いた状態（a11y 検査） |
 | Container | `@/components/primitives/container` | — | Default（page / default gutter）, サイズ比較, gutter 比較 |
 | ContentCard, ContentList | `@/components/primitives/content-card` | — | 縦（グリッド一覧）, 一覧での高さ揃え, 横（画像が左）, リスト（Medium 型）, 長いタグラベル |
 | ContentCarousel | `@/components/primitives/content-carousel` | — | ヒーローバナー, 自動再生（5秒）, peek表示, peek表示（Container の中）, 多列カード（PC 3枚）, 1枚のみ |
-| DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目）, interaction: クリア後のフォーカス, interaction: FormField のエラーと接続 |
+| DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目）, interaction: クリア後のフォーカス, interaction: 選択中の日の月を開く, 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, 地域フィルター, もっと絞り込む |
@@ -99,7 +99,7 @@
 | KebabMenu | `@/components/primitives/kebab-menu` | — | — |
 | ListItem | `@/components/primitives/list-item` | — | デフォルト（矢印）, キャプション付き, アイコン付き, テキスト値, バッジ付き, トグル, 矢印なし, 選択状態, メニューリスト（複数行）, アイコン付きメニュー, インタラクティブ（hover / focus） |
 | MenuDrawer | `@/components/primitives/menu-drawer` | — | デフォルト（最小構成）, ログイン済 (ユーザー名表示), 未ログイン (ログインボタン表示), サムネイル付きカテゴリ, バナー付き, 全部入り (大規模アプリ向け), ログインリンク非表示 |
-| MultiSelect | `@/components/primitives/multi-select` | — | Default, interaction: Chip 削除後のフォーカス |
+| MultiSelect | `@/components/primitives/multi-select` | — | Default, interaction: Chip 削除後のフォーカス, 一覧を開いた状態（a11y 検査） |
 | 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 のクランプ, interaction: 上限・下限でもフォーカスを保つ, interaction: error の aria-invalid, interaction: FormField と接続 |

package/src/preset-standalone.css

@@ -28,6 +28,10 @@
  * 以下の「Typography Helper」セクションで提供する。
  * ============================================ */
 
+/* レイヤーの順序を固定する（base < components。どちらも consumer の非レイヤー CSS より弱い）。
+   他の @layer ブロックより前に置く。 */
+@layer base, components;
+
 /* --- Layer 1: Primitive Colors ---
  *
  * 正本 src/styles/primitive.css のメインカラーファミリー（Orange/Gray/Forest/
@@ -116,6 +120,7 @@
   --Primitive-Sea-900: #0017B6FF;
 
   /* Wood */
+  --Primitive-Wood-25: #FCF9F2FF;
   --Primitive-Wood-50: #F8F1E0FF;
   --Primitive-Wood-100: #EFDBB1FF;
   --Primitive-Wood-200: #E5C47FFF;
@@ -178,7 +183,7 @@
  * （および tokens.json 未収録グループは primitive 実値）まで解決し、
  * 素の `:root` / `.dark` として展開したもの。
  *
- * 展開対象（全 76 semantic トークン名）: Surface-* / Text-* / Object-* / Hover-* /
+ * 展開対象（全 80 semantic トークン名）: Surface-* / Text-* / Object-* / Hover-* /
  * Active-* / Border-* / Brand-* / Overlay-* / Surface-Glass-* / Caution-* /
  * Focus-High-Emphasis / Third-Party-*。一覧・hex 整合は
  * __tests__/preset-standalone-coverage.test.ts でガードしている。
@@ -189,14 +194,17 @@
  */
 :root {
   --Surface-Primary: #FFFFFF;
-  --Surface-Secondary: #FBF9F8;
-  --Surface-Tertiary: #F4F2F1;
+  --Surface-Secondary: #FCF9F2;
+  --Surface-Tertiary: #FCF9F2;
+  --Surface-Neutral-Secondary: #FBF9F8;
+  --Surface-Neutral-Tertiary: #F4F2F1;
   --Surface-Elevated: #FFFFFF;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
   --Surface-Accent-Primary: #E5175C;
   --Surface-Accent-Primary-Light: #FBD4E0;
-  --Surface-Success: #259D63;
+  --Surface-Success: #317860;
+  --Surface-Success-Light: #F0FCF8;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
   --Surface-Info-Light: #E8F1FE;
@@ -207,7 +215,7 @@
   --Text-Accent-Primary: #B5175C;
   --Text-Accent-Secondary: #F491B2;
   --Text-on-Inverse: #FFFFFF;
-  --Text-Success: #259D63;
+  --Text-Success: #317860;
   --Text-Caution: #EC0000;
   --Text-Warning: #C16800;
   --Text-Info: #003EE5;
@@ -221,7 +229,7 @@
   --Object-High-Emphasis-on-Inverse: #FFFFFF;
   --Object-Caution: #EC0000;
   --Object-Warning: #C16800;
-  --Object-Success: #259D63;
+  --Object-Success: #3E987A;
   --Object-Info: #003EE5;
   --Hover-Primary-Button: #B5175C;
   --Hover-Secondary-Button: #F7B1C8;
@@ -239,6 +247,7 @@
   --Border-Accent-Primary: #E5175C;
   --Border-Favorite: #E5175C;
   --Border-Caution: #EC0000;
+  --Border-Success: #ACEED8;
   --Border-Info: #003EE5;
   --Brand-Cake-Orange: #E5175C;
   --Brand-Cake-Orange-Light: #F7B1C8;
@@ -274,12 +283,15 @@
   --Surface-Primary: #000000E5;
   --Surface-Secondary: #FFFFFF1A;
   --Surface-Tertiary: #FFFFFF33;
+  --Surface-Neutral-Secondary: #FFFFFF1A;
+  --Surface-Neutral-Tertiary: #FFFFFF33;
   --Surface-Elevated: #3A3736;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
   --Surface-Accent-Primary: #E5175C;
   --Surface-Accent-Primary-Light: #E5175C26;
   --Surface-Success: #259D63;
+  --Surface-Success-Light: #E6F5EC;
   --Surface-Warning: #F8F1E0;
   --Surface-Info: #003EE5;
   --Surface-Info-Light: #E8F1FE;
@@ -322,6 +334,7 @@
   --Border-Accent-Primary: #EA296A;
   --Border-Favorite: #EA296A;
   --Border-Caution: #EC0000;
+  --Border-Success: #9BD4B5;
   --Border-Info: #4979F5;
   --Brand-Cake-Orange: #E5175C;
   --Brand-Cake-Orange-Light: #F7B1C8;
@@ -406,11 +419,11 @@
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Secondary);
+  --secondary: var(--Surface-Neutral-Secondary);
   --secondary-foreground: var(--Text-Medium-Emphasis);
-  --muted: var(--Surface-Tertiary);
+  --muted: var(--Surface-Neutral-Tertiary);
   --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Secondary);
+  --accent: var(--Surface-Neutral-Secondary);
   --accent-foreground: var(--Text-High-Emphasis);
   --destructive: var(--Object-Caution);
   --border: var(--Border-Medium-Emphasis);
@@ -427,11 +440,11 @@
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Tertiary);
+  --secondary: var(--Surface-Neutral-Tertiary);
   --secondary-foreground: var(--Text-Medium-Emphasis);
-  --muted: var(--Surface-Tertiary);
+  --muted: var(--Surface-Neutral-Tertiary);
   --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Secondary);
+  --accent: var(--Surface-Neutral-Secondary);
   --accent-foreground: var(--Text-High-Emphasis);
   --destructive: var(--Object-Caution);
   --border: var(--Border-Medium-Emphasis);
@@ -484,6 +497,16 @@
   --Z-SkipLink: 50;
 }
 
+/* --- Scrollbar hide ---
+ * src/preset.css の `@utility scrollbar-hide` と同等（Tailwind 非使用 consumer 向け）。 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* --- Typography Helper Classes ---
  * Tailwindのtypo-*と同等のCSSクラス。
  * 本番CSSでこれらのクラスを使えば、DSと同じタイポグラフィが適用される。
@@ -512,18 +535,21 @@
 .typo-label-xs { font-size: 10px; line-height: 1.5;  font-weight: 500; }
 
 /* --- Touch target utility ---
- * Tailwind を使わない consumer でも preset と同じ44px操作領域を利用できる。 */
-.tap-target {
-  position: relative;
-}
-.tap-target::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: max(100%, 2.75rem);
-  height: max(100%, 2.75rem);
-  transform: translate(-50%, -50%);
+ * Tailwind を使わない consumer でも preset と同じ44px操作領域を利用できる。
+ * @layer components に入れているのは、consumer の className（utilities の `absolute` など）や非レイヤー CSS が常に勝つようにするため。 */
+@layer components {
+  .tap-target {
+    position: relative;
+  }
+  .tap-target::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, 2.75rem);
+    height: max(100%, 2.75rem);
+    transform: translate(-50%, -50%);
+  }
 }
 
 /* --- Base layer（ルート地色 / #208） ---

package/src/preset.css

@@ -249,11 +249,11 @@
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Secondary);
+  --secondary: var(--Surface-Neutral-Secondary);
   --secondary-foreground: var(--Text-Medium-Emphasis);
-  --muted: var(--Surface-Tertiary);
+  --muted: var(--Surface-Neutral-Tertiary);
   --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Secondary);
+  --accent: var(--Surface-Neutral-Secondary);
   --accent-foreground: var(--Text-High-Emphasis);
   --destructive: var(--Object-Caution);
   --border: var(--Border-Medium-Emphasis);
@@ -285,11 +285,11 @@
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Tertiary);
+  --secondary: var(--Surface-Neutral-Tertiary);
   --secondary-foreground: var(--Text-Medium-Emphasis);
-  --muted: var(--Surface-Tertiary);
+  --muted: var(--Surface-Neutral-Tertiary);
   --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Secondary);
+  --accent: var(--Surface-Neutral-Secondary);
   --accent-foreground: var(--Text-High-Emphasis);
   --destructive: var(--Object-Caution);
   --border: var(--Border-Medium-Emphasis);
@@ -372,20 +372,38 @@
   animation: slide-in-left var(--Motion-Duration-Base, 200ms) var(--Motion-Easing-Standard, cubic-bezier(0, 0, 0.58, 1));
 }
 
+/* --- Scrollbar hide utility ---
+ * 横スクロール部品（カルーセル・タブ列・カテゴリ列など）がスクロールバーを隠すために使う。
+ * Tailwind v4 本体に `scrollbar-hide` は無い。`scrollbar-none` も、この DS が使う tailwindcss 4.2.1 では
+ * クラスを書いても CSS が生成されなかった（実測: compile の build(["scrollbar-none"]) の出力が空）。
+ * 加えて Safari 18.2 未満では `scrollbar-width` が効かないため、DS が 1 本に定義する。
+ * Firefox / 標準 = scrollbar-width、旧 Edge = -ms-overflow-style、WebKit = ::-webkit-scrollbar。
+ * Tailwind を通さない経路（preset-standalone.css）にも同名の素の CSS を置いている。 */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 /* --- Touch target utility ---
  * 見た目が44px未満の小型操作部品に付け、透明な疑似要素で実効操作領域だけを拡張する。
- * 隣接ターゲットと重なる密度では使わず、親レイアウト側の gap も確保する。 */
-.tap-target {
-  position: relative;
-}
-.tap-target::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: max(100%, 2.75rem);
-  height: max(100%, 2.75rem);
-  transform: translate(-50%, -50%);
+ * 隣接ターゲットと重なる密度では使わず、親レイアウト側の gap も確保する。
+ * @layer components に入れているのは、consumer の className（utilities の `absolute` など）や非レイヤー CSS が常に勝つようにするため。 */
+@layer components {
+  .tap-target {
+    position: relative;
+  }
+  .tap-target::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, 2.75rem);
+    height: max(100%, 2.75rem);
+    transform: translate(-50%, -50%);
+  }
 }
 
 /* --- Base layer --- */

package/src/styles/primitive.css

@@ -78,6 +78,7 @@
   --Primitive-Sea-900: #0017B6FF;
 
   /* Wood */
+  --Primitive-Wood-25: #FCF9F2FF;
   --Primitive-Wood-50: #F8F1E0FF;
   --Primitive-Wood-100: #EFDBB1FF;
   --Primitive-Wood-200: #E5C47FFF;

package/src/styles/semantic.css

@@ -14,8 +14,16 @@
 
   /* Surface */
   --Surface-Primary: var(--Primitive-White-alpha-1000);
-  --Surface-Secondary: var(--Primitive-Gray-50);
-  --Surface-Tertiary: var(--Primitive-Gray-100);
+  /* 情報をまとめる押せない面（説明ボックス・フォームのまとまり・Section subtle・Card 既定・表の見出し行など）。
+     light はケーキ配色の「スポンジ」= Wood-25 のベージュ。押せる部品・状態の地・画面全体の地には使わず、
+     下の Surface-Neutral-* を使う。dark は従来どおり半透明白（値は変えていない）。 */
+  --Surface-Secondary: var(--Primitive-Wood-25);
+  --Surface-Tertiary: var(--Primitive-Wood-25);
+  /* グレーを保つ地。押せる部品（Button tertiary・Chip・Tag/Badge 等のラベル）、hover / active / selected / disabled の地、
+     溝・トラック、スケルトン・画像の仮の地、画面全体の地（AdminShell 等の min-h-screen）に使う。
+     light は旧 Surface-Secondary / Tertiary と同値、dark は Surface-Secondary / Tertiary と同値。 */
+  --Surface-Neutral-Secondary: var(--Primitive-Gray-50);
+  --Surface-Neutral-Tertiary: var(--Primitive-Gray-100);
   /* 浮遊レイヤー（メニュー・ポップオーバー・ダイアログ・シート）と、
      スクロール内容の上に重なるエッジ固定バー（Header / StickyActionBar /
      BottomTabBar / AdminHeader / AdminSideNav / OrderSummary fixed）の地。
@@ -26,7 +34,10 @@
   --Surface-Caution-Light: var(--Primitive-Sun-50);
   --Surface-Accent-Primary: var(--Primitive-Berry-700);
   --Surface-Accent-Primary-Light: var(--Primitive-Berry-50);
-  --Surface-Success: var(--Primitive-Forest-600);
+  /* 成功・良い状態（ケーキ配色の「ミント」）。塗り（白い文字を載せる）は Teal-800、淡い地は Surface-Success-Light。
+     押すもの（CTA）には使わない。dark は従来の Forest のまま。 */
+  --Surface-Success: var(--Primitive-Teal-800);
+  --Surface-Success-Light: var(--Primitive-Teal-50);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
   --Surface-Info-Light: var(--Primitive-Sea-50);
@@ -39,7 +50,7 @@
   --Text-Accent-Primary: var(--Primitive-Berry-800);
   --Text-Accent-Secondary: var(--Primitive-Berry-200);
   --Text-on-Inverse: var(--Primitive-White-alpha-1000);
-  --Text-Success: var(--Primitive-Forest-600);
+  --Text-Success: var(--Primitive-Teal-800);
   --Text-Caution: var(--Primitive-Sun-800);
   --Text-Warning: var(--Primitive-Wood-800);
   --Text-Info: var(--Primitive-Sea-600);
@@ -55,7 +66,7 @@
   --Object-High-Emphasis-on-Inverse: var(--Primitive-White-alpha-1000);
   --Object-Caution: var(--Primitive-Sun-800);
   --Object-Warning: var(--Primitive-Wood-800);
-  --Object-Success: var(--Primitive-Forest-600);
+  --Object-Success: var(--Primitive-Teal-700);
   --Object-Info: var(--Primitive-Sea-600);
 
   /* Hover / Active */
@@ -77,6 +88,7 @@
   --Border-Accent-Primary: var(--Brand-Cake-Orange);
   --Border-Favorite: var(--Brand-Cake-Orange);
   --Border-Caution: var(--Surface-Caution);
+  --Border-Success: var(--Primitive-Teal-200);
   --Border-Info: var(--Primitive-Sea-600);
 
   /* Brand
@@ -137,6 +149,8 @@
   --Surface-Primary: var(--Primitive-Gray-alpha-900);
   --Surface-Secondary: var(--Primitive-White-alpha-100);
   --Surface-Tertiary: var(--Primitive-White-alpha-200);
+  --Surface-Neutral-Secondary: var(--Primitive-White-alpha-100);
+  --Surface-Neutral-Tertiary: var(--Primitive-White-alpha-200);
   /* dark の Surface-Primary は #000000E5 でアルファ付き。ページ地としては
      下地に合成される前提なので妥当だが、浮遊レイヤーに使うと後ろが透ける。
      一段明るい不透明色を elevation として持つ（issue #262）。 */
@@ -146,6 +160,7 @@
   --Surface-Accent-Primary: var(--Primitive-Berry-700);
   --Surface-Accent-Primary-Light: #E5175C26; /* Brand(Berry) at ~15% alpha — ダーク背景で濁らないよう調整 */
   --Surface-Success: var(--Primitive-Forest-600);
+  --Surface-Success-Light: var(--Primitive-Forest-50);
   --Surface-Warning: var(--Primitive-Wood-50);
   --Surface-Info: var(--Primitive-Sea-600);
   --Surface-Info-Light: var(--Primitive-Sea-50);
@@ -196,6 +211,7 @@
   --Border-Accent-Primary: var(--Primitive-Berry-600);
   --Border-Favorite: var(--Primitive-Berry-600);
   --Border-Caution: var(--Surface-Caution);
+  --Border-Success: var(--Primitive-Forest-200);
   --Border-Info: var(--Primitive-Sea-400);
 
   /* Brand（ダークでも同じ） */