@cakejp/design-system 0.14.1 → 0.15.0

package/dist/types/components/foundations/chip-variants.d.ts

@@ -10,7 +10,7 @@ import { type VariantProps } from "class-variance-authority";
  * Chip と RadioGroup の chip variant の両方へ自動追従する。
  */
 export declare const chipVariants: (props?: {
-    variant?: "filled" | "accent";
+    variant?: "accent" | "filled";
     size?: "sm" | "lg" | "md" | "tile";
     shape?: "pill" | "square";
 } & import("class-variance-authority/types").ClassProp) => string;

package/dist/types/components/foundations/data-table.d.ts

@@ -18,7 +18,7 @@ declare function DataTableHead({ className, sortable, sortDirection, onSort, wid
 }): import("react/jsx-runtime").JSX.Element;
 declare const dataTableCellVariants: (props?: {
     width?: "auto" | "max" | "hug";
-    align?: "center" | "left" | "right";
+    align?: "left" | "right" | "center";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function DataTableCell({ className, width, align, ...props }: Omit<React.ComponentProps<"td">, "width" | "align"> & VariantProps<typeof dataTableCellVariants>): import("react/jsx-runtime").JSX.Element;
 declare function DataTableAvatarCell({ className, src, fallback, title, caption, ...props }: Omit<React.ComponentProps<"td">, "width" | "align"> & {

package/dist/types/components/foundations/icon-badge.d.ts

@@ -12,7 +12,7 @@ import { type VariantProps } from "class-variance-authority";
  * - 内部 SVG のサイズはバッジが固定する（md=20px / ml=24px / lg=38px）。アイコン側の `size` は不要。
  */
 declare const iconBadgeVariants: (props?: {
-    size?: "lg" | "md" | "ml";
+    size?: "ml" | "lg" | "md";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function IconBadge({ className, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof iconBadgeVariants>): import("react/jsx-runtime").JSX.Element;
 export { IconBadge, iconBadgeVariants };

package/dist/types/components/primitives/admin-header.d.ts

@@ -10,9 +10,9 @@ export interface AdminHeaderProps {
 /**
  * 管理画面向け固定ヘッダー
  *
- * 上端に **全幅** で fixed 配置される横バー（z-40）。左に SP ハンバーガー＋ブランド、
+ * 上端に **全幅** で fixed 配置される横バー（--Z-Nav = 40）。左に SP ハンバーガー＋ブランド、
  * 右にアクション slot を持つ。PC ではこのヘッダーの下端（top-16）から `AdminSideNav`
- * のレール（z-30）が始まる＝ヘッダーが最前面・全幅で、レールはヘッダー帯に重ならない。
+ * のレール（--Z-Sticky = 30）が始まる＝ヘッダーが最前面・全幅で、レールはヘッダー帯に重ならない。
  * 「{shopName}管理」のような文言合成は行わない（利用側が `brand` に組み立てて渡す）。
  *
  * ### インポート

package/dist/types/components/primitives/header.d.ts

@@ -48,10 +48,20 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     /** 右側アクションボタン群（variant="logo"で使用） */
     actions?: HeaderAction[];
     /**
-     * PC（@[768px]+）でヘッダー内インライン表示するグローバルナビ項目。
+     * PC（既定 `@[768px]`+）でヘッダー内インライン表示するグローバルナビ項目。
      * SP では非表示。本番の "ケーキ / スイーツ / ランキング…" メニューに対応。
+     * 幅に入り切らない項目は自動で「その他」メニューへ退避する（ロゴ・actions と競合しない）。
      */
     navItems?: HeaderNavItem[];
+    /**
+     * インラインナビ（navItems / searchSlot 行）を出し始めるコンテナ幅。
+     * - `md`（既定）: `@[768px]`+
+     * - `lg` : `@[1024px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
+     * 未満の幅では SP 行（ロゴ + actions）になる。
+     */
+    navBreakpoint?: "md" | "lg";
+    /** 「その他」オーバーフローメニューのラベル（既定 "その他"） */
+    navOverflowLabel?: string;
     /**
      * PC（@[768px]+）のロゴ行で navItems と actions の間にインライン配置する検索スロット
      * （variant="logo" のみ）。`SearchBar` 等を渡す。`flex-1 max-w-[400px]` で伸縮し、
@@ -79,5 +89,5 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  * アプリ全体で使われるヘッダーの3パターンを1コンポーネントで提供。
  * ロゴ＋アクション、戻るボタン＋タイトル、戻るボタン＋検索の3バリエーション。
  */
-declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, searchSlot, rightSlot, centerSlot, bottomSlot, disableSticky, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, navBreakpoint, navOverflowLabel, searchSlot, rightSlot, centerSlot, bottomSlot, disableSticky, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/types/components/primitives/section-nav.d.ts

@@ -66,7 +66,7 @@ export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
  * <SectionNav
  *   orientation="horizontal"
  *   activeKey={active}
- *   className="sticky top-14 z-30 border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]"
+ *   className="sticky top-14 z-[var(--Z-Sticky)] border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]"
  *   items={items}
  * />
  * // ターゲット: ナビ高さぶん上に余白を確保（scroll-mt-28 ≒ header 56px + nav 48px）

package/dist/types/components/primitives/tag.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const tagVariants: (props?: {
-    variant?: "default" | "success" | "info" | "warning" | "accent" | "caution" | "sale" | "info-fill" | "timesale" | "berry" | "coupon";
+    variant?: "accent" | "default" | "success" | "info" | "warning" | "caution" | "sale" | "info-fill" | "timesale" | "berry" | "coupon";
     size?: "sm" | "md";
 } & import("class-variance-authority/types").ClassProp) => string;
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {

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

@@ -1,2 +1,25 @@
 import { type ClassValue } from "clsx";
+/**
+ * src/styles/typography.css の `@utility typo-*` のうち、
+ * font-size / line-height / font-weight（+letter-spacing）を定義する「プリセット系」クラス名。
+ *
+ * デフォルトの twMerge は `typo-*` を認識しないため、`cn("typo-label-sm", "typo-label-md")`
+ * のような上書きが「どちらも残す」扱いになり、CSS 宣言順（後発の定義が勝つ）に
+ * マージ結果が左右されてしまう（意図した方が静かに負けることがある）。
+ * ここではプリセット系 typo-* を単一の classGroup として登録し、同グループ内は
+ * 後勝ち（最後に渡したクラスのみ残る）で確実にマージされるようにする。
+ *
+ * 注意: typography.css に `@utility typo-*` を追加/削除したら、この配列も
+ * 同期して更新すること。__tests__/cn-typo-merge.test.ts がドリフトを検知する
+ * （typography.css を正規表現でパースし、font-size を持つプリセット系だけを抽出して
+ * この配列と突合し、不一致なら fail）。
+ */
+export declare const TYPO_PRESET_CLASS_NAMES: readonly ["typo-heading-5xl", "typo-heading-4xl", "typo-heading-3xl", "typo-heading-2xl", "typo-heading-xl", "typo-heading-lg", "typo-heading-md", "typo-heading-sm", "typo-body-lg", "typo-body-md", "typo-body-sm", "typo-body-xs", "typo-label-lg", "typo-label-md", "typo-label-sm", "typo-label-xs"];
+/**
+ * font-size を持たない「加算系」typo-*（text-shadow のみ付与する等）クラス名。
+ * 現在 cake の typography.css には存在しないため空。追加された場合は
+ * 排他 classGroup（TYPO_PRESET_CLASS_NAMES）ではなくこちらに列挙する
+ * — プリセット系と併用されるため、同一 classGroup に入れると一方が誤って消される。
+ */
+export declare const TYPO_ADDITIVE_CLASS_NAMES: readonly string[];
 export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -71,6 +71,7 @@
     "./tokens/primitive": "./src/styles/primitive.css",
     "./tokens/semantic": "./src/styles/semantic.css",
     "./tokens/typography": "./src/styles/typography.css",
+    "./tokens/motion": "./src/styles/motion.css",
     "./eslint/deprecated": "./eslint/deprecated.js"
   },
   "sideEffects": [
@@ -96,7 +97,9 @@
     "generate:lookup": "node scripts/generate-component-lookup.mjs",
     "lint:contrast": "node scripts/check-contrast.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 && npm run lint:contrast && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh",
-    "test": "vitest run --config vitest.config.ts"
+    "test": "vitest run --config vitest.config.ts",
+    "test:interaction": "vitest run --config vitest.storybook.config.ts",
+    "test:a11y": "vitest run --config vitest.a11y.config.ts"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",

package/src/components/COMPONENT_LOOKUP.md

@@ -11,7 +11,7 @@
 
 | Component | Import | Variants | Stories |
 |-----------|--------|----------|---------|
-| Accordion, AccordionItem, AccordionTrigger, AccordionContent | `@/components/foundations/accordion` | — | Default（単一展開）, 複数展開, 商品ページFAQ例 |
+| 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 バリアント |
 | AspectRatio | `@/components/foundations/aspect-ratio` | — | Square, Banner16x9, ProductImage4x3, RatioComparison |
@@ -28,8 +28,8 @@
 | Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator | `@/components/foundations/command` | — | Default, ProductSearch, DeliveryOptions |
 | 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並び替え |
-| Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/foundations/dialog` | — | Default, 確認ダイアログ, フォーム入力 |
-| Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription | `@/components/foundations/drawer` | — | Default, カート追加クイックビュー, お届け日選択 |
+| Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/foundations/dialog` | — | Default, 確認ダイアログ, フォーム入力, interaction: 開閉とフォーカストラップ |
+| 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 連携 |
@@ -44,7 +44,7 @@
 | 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` | — | 確認ダイアログ, フォーム入力, お知らせ（閉じるのみ）, お届け日選択（選択リスト） |
 | 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（水平）, 垂直, 注文確認ページ例 |
@@ -57,7 +57,7 @@
 | 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` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択 |
+| Tabs, TabsList, TabsTrigger, TabsContent | `@/components/foundations/tabs` | **variant**: `underbar`, `segment`<br>**scrollable**: `true` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択, 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, 複数選択, サイズ, アイコン付き, アイコンのみ, 無効 |
 | Toggle | `@/components/foundations/toggle` | **variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, TextFormatting, FavoriteToggle, Outline, Sizes |
@@ -77,7 +77,7 @@
 | 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`<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 比較 |
@@ -89,7 +89,7 @@
 | Footer | `@/components/primitives/footer` | — | Default, 最小構成, SNSリンク付き, 決済方法付き |
 | FormField | `@/components/primitives/form-field` | — | — |
 | FunnelShell | `@/components/primitives/funnel-shell` | — | 注文内容の確認（ご購入手続き） |
-| Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
+| Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴ＋長いナビ（中幅で自動退避）, ロゴ＋ナビ（navBreakpoint=lg）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
 | ImageCarousel | `@/components/primitives/image-carousel` | — | バナーカルーセル, 横長バナー, 正方形（商品画像）, 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 連携, 検証エラー, クリア不可, 無効化 |
@@ -100,7 +100,7 @@
 | MultiSelect | `@/components/primitives/multi-select` | — | Default |
 | 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）, サイズ比較, 最小・最大値, 無効状態, エラー状態, ゴミ箱アイコン, ゴミ箱＋削除確認ダイアログ, 直接入力パターン, 商品詳細での使用例, カート内での使用例, 価格・在庫入力（管理画面） |
+| NumberInput, QuantitySelector | `@/components/primitives/number-input` | — | Default, コンパクト型（sm）, サイズ比較, 最小・最大値, 無効状態, エラー状態, ゴミ箱アイコン, ゴミ箱＋削除確認ダイアログ, 直接入力パターン, 商品詳細での使用例, カート内での使用例, 価格・在庫入力（管理画面）, interaction: 増減と min/max のクランプ |
 | PriceDisplay | `@/components/primitives/price-display` | — | Default, セール価格, サイズ比較, セール × サイズ, 税込ラベルなし, 高額商品, 価格レンジ |
 | ProgressSteps | `@/components/primitives/progress-steps` | — | ステップ1（カート）, ステップ2（注文内容）, ステップ3（確認）, ステップ4（完了）, 全ステップ一覧, 会員登録フロー |
 | SearchBar | `@/components/primitives/search-bar` | — | Default, Small（ヘッダー向け）, カスタムプレースホルダー |

package/src/preset-standalone.css

@@ -20,6 +20,8 @@
  *   - shadcn bridge トークン（--primary, --foreground 等）
  *   - spacing / セクション余白トークン
  *   - シャドウ・角丸トークン
+ *   - モーショントークン（--Motion-Duration-* / --Motion-Easing-*）
+ *   - 重なり順トークン（--Z-*）
  *
  * タイポグラフィ（typo-*）は Tailwind v4 の @utility に依存するため、
  * このファイルには含まれない。代わりに typo-* と同等のクラス定義を
@@ -399,6 +401,44 @@
   --shadow-tooltip: 0px 8px 8px -4px rgba(24, 39, 75, 0.08), 0px 4px 6px -4px rgba(24, 39, 75, 0.12);
 }
 
+/* --- Motion tokens ---
+ * src/styles/motion.css と同値（Tailwind 非使用 consumer 向けに展開）。
+ * 値の正本は tokens.json の motion。両者の一致は
+ * __tests__/motion-zindex-token-contract.test.ts が検査する。 */
+:root {
+  --Motion-Duration-Fast: 150ms;
+  --Motion-Duration-Base: 200ms;
+  --Motion-Duration-Slow: 300ms;
+  --Motion-Duration-Slower: 500ms;
+  --Motion-Easing-Standard: cubic-bezier(0, 0, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --Motion-Duration-Fast: 0.01ms;
+    --Motion-Duration-Base: 0.01ms;
+    --Motion-Duration-Slow: 0.01ms;
+    --Motion-Duration-Slower: 0.01ms;
+  }
+}
+
+/* --- z-index スケール ---
+ * src/preset.css と同値（Tailwind 非使用 consumer 向けに展開）。
+ * 序列と「現状 50 が並ぶ理由」は preset.css のコメントを参照。 */
+:root {
+  --Z-Local-1: 1;
+  --Z-Local-2: 2;
+  --Z-Local-3: 3;
+  --Z-Local-4: 4;
+  --Z-Sticky: 30;
+  --Z-Nav: 40;
+  --Z-Floating: 50;
+  --Z-Overlay: 50;
+  --Z-Modal: 50;
+  --Z-Popover: 50;
+  --Z-Tooltip: 50;
+  --Z-SkipLink: 50;
+}
+
 /* --- Typography Helper Classes ---
  * Tailwindのtypo-*と同等のCSSクラス。
  * 本番CSSでこれらのクラスを使えば、DSと同じタイポグラフィが適用される。

package/src/preset.css

@@ -17,6 +17,8 @@
  *   - shadcn bridge トークン（--primary, --foreground 等）
  *   - Tailwind 標準色 → Cake.jp マッピング（bg-red-600 等）
  *   - シャドウ・角丸トークン
+ *   - モーショントークン（--Motion-Duration-* / --Motion-Easing-*）
+ *   - 重なり順トークン（--Z-*）
  *   - アニメーションユーティリティ
  *   - 見た目を変えず44pxの操作領域を確保する tap-target ユーティリティ
  * ============================================ */
@@ -30,6 +32,9 @@
 /* --- Layer 3: Typography Utilities --- */
 @import "./styles/typography.css";
 
+/* --- Layer 4: Motion Tokens (duration / easing) --- */
+@import "./styles/motion.css";
+
 /* --- Dark mode variant --- */
 @custom-variant dark (&:is(.dark *));
 
@@ -286,6 +291,47 @@
   --sidebar-ring: var(--Overlay-Medium);
 }
 
+/* --- z-index スケール ---
+ * 重なり順を「意味の段」で表す。Portal に載る要素（Dialog / Sheet / Popover /
+ * Tooltip 等）は素の z-50 だと差が付かず、勝敗が Portal のマウント順
+ * （＝開いた順）で決まってしまうため、段を名前で持つ。
+ *
+ * Tailwind からは z-[var(--Z-Modal)] の形で参照する。
+ *
+ * ┌ 序列（数値） ─────────────────────────────────────────
+ * │ Local-1..4 (1〜4) : カード内部の重なり（バッジ・グラデ・ラベル）
+ * │ Sticky     (30)   : スクロール追従（サブナビ・注文サマリ・レール）
+ * │ Nav        (40)   : シェルが敷く固定ヘッダ / 固定アクションバー
+ * │ Floating   (50)   : ナビの上に浮く固定操作面（ボトムタブ）
+ * │ Overlay    (50)   : Dialog / Sheet / Drawer の scrim
+ * │ Modal      (50)   : Dialog / Sheet / Drawer 本体
+ * │ Popover    (50)   : Select / Popover / DropdownMenu / Menubar / HoverCard
+ * │ Tooltip    (50)   : Tooltip
+ * │ SkipLink   (50)   : SkipLink（何にも隠されてはいけない）
+ * └────────────────────────────────────────────────────
+ *
+ * ⚠️ Floating 以降が全て 50 なのは **現状の実装値をそのまま保存した**結果
+ * （本トークン導入は視覚変化ゼロの等値置換）。段差を付けると重なり順が
+ * 実際に変わる＝視覚変化なので、値の見直しは別途 issue で扱う。名前で段を
+ * 分けておくことで、そのときは 1 箇所の数値変更だけで全体を持ち上げられる。
+ *
+ * z-0 / z-10 のようなコンポーネント内部の局所的な重なり（isolate 配下の
+ * 装飾レイヤー等）はこのグローバルスケールの対象外。 */
+:root {
+  --Z-Local-1:  1;
+  --Z-Local-2:  2;
+  --Z-Local-3:  3;
+  --Z-Local-4:  4;
+  --Z-Sticky:   30;
+  --Z-Nav:      40;
+  --Z-Floating: 50;
+  --Z-Overlay:  50;
+  --Z-Modal:    50;
+  --Z-Popover:  50;
+  --Z-Tooltip:  50;
+  --Z-SkipLink: 50;
+}
+
 /* --- Animations --- */
 @keyframes slide-in-right {
   from { transform: translateX(30%); opacity: 0; }
@@ -296,11 +342,15 @@
   to   { transform: translateX(0);    opacity: 1; }
 }
 
+/* duration / easing はモーショントークン参照（値は従来どおり 200ms・
+   CSS の ease-out = cubic-bezier(0, 0, 0.58, 1)）。
+   preset.css 単体ではなく motion.css を上で @import しているので必ず解決するが、
+   万一 motion.css 抜きで読まれても動きが消えないようフォールバックを置く。 */
 @utility animate-slide-in-right {
-  animation: slide-in-right 200ms ease-out;
+  animation: slide-in-right var(--Motion-Duration-Base, 200ms) var(--Motion-Easing-Standard, cubic-bezier(0, 0, 0.58, 1));
 }
 @utility animate-slide-in-left {
-  animation: slide-in-left 200ms ease-out;
+  animation: slide-in-left var(--Motion-Duration-Base, 200ms) var(--Motion-Easing-Standard, cubic-bezier(0, 0, 0.58, 1));
 }
 
 /* --- Touch target utility ---

package/src/styles/motion.css

@@ -0,0 +1,58 @@
+/* ============================================
+ * Cake.jp Design System — Motion Tokens
+ * ============================================
+ *
+ * 動きの「速さ」と「加減速カーブ」の semantic トークン。
+ * 色と同じく、コンポーネントは生の ms 値 / cubic-bezier を直書きせず
+ * このレイヤーを参照する。
+ *
+ * 使い方（Tailwind v4）:
+ *   duration-[var(--Motion-Duration-Base)]
+ *   ease-[var(--Motion-Easing-Standard)]
+ * Tailwind を使わない consumer は素の CSS から var() で参照できる。
+ *
+ * 定義しているのは **DS の実装に実在した値だけ**（150/200/300/500ms・
+ * CSS の ease-out カーブ）。使われない段は作らない（死にトークン禁止）。
+ * 正本の一覧は tokens.json の motion セクション。
+ * ============================================ */
+
+:root {
+  /* ─── Duration スケール ───
+     Fast   : マイクロ（hover の色変化・fade・下線）。
+     Base   : 標準。入場・退場・レイアウト変化の既定。
+     Slow   : 面積の大きい要素（画像ズーム・アコーディオン・カルーセル）。
+     Slower : ゆっくり見せたい退場（Sheet の閉じ）。 */
+  --Motion-Duration-Fast:   150ms;
+  --Motion-Duration-Base:   200ms;
+  --Motion-Duration-Slow:   300ms;
+  --Motion-Duration-Slower: 500ms;
+
+  /* ─── Easing ───
+     Standard : CSS の `ease-out` キーワードと同一曲線。UI 変化の既定。
+                DS の animate-slide-in-* が使っていた曲線をそのまま名前付けしたもの。
+
+     ⚠️ Tailwind の `ease-out` クラス（cubic-bezier(0, 0, 0.2, 1)）は
+        CSS キーワードの ease-out（cubic-bezier(0, 0, 0.58, 1)）と別の曲線。
+        Standard は後者。Tailwind のユーティリティクラスを使っている既存箇所は
+        体感が変わるため本トークンへ寄せていない（曲線を何本に整理するかは
+        視覚が変わる設計判断なので別途扱う）。 */
+  --Motion-Easing-Standard: cubic-bezier(0, 0, 0.58, 1);
+}
+
+/* ─── prefers-reduced-motion 一括制御 ───
+   duration トークンを 0 近傍に落とすことで、トークンを参照している
+   全コンポーネントのアニメーションを一箇所で無効化する。
+   0 ではなく 0.01ms にしているのは、transitionend / animationend を
+   待つ実装が発火しなくなるのを避けるため。
+
+   ※ 効くのはトークンを参照している箇所だけ。`duration-200` のような
+     直書きや Radix 内蔵アニメーションは対象外なので、コンポーネント側は
+     必ずトークン参照で書くこと。 */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --Motion-Duration-Fast:   0.01ms;
+    --Motion-Duration-Base:   0.01ms;
+    --Motion-Duration-Slow:   0.01ms;
+    --Motion-Duration-Slower: 0.01ms;
+  }
+}

package/tokens.json

@@ -1000,5 +1000,33 @@
     "modal": "var(--shadow-lg)",
     "overlay": "0 24px 80px rgba(24, 39, 75, 0.16)",
     "_comment": "preset.css の --shadow-* と同期（正）。md/lg は Tailwind 既定を DS 値に再定義済み。xl/2xl は使用禁止（rules.json R53）"
+  },
+  "motion": {
+    "duration": {
+      "fast": "150ms",
+      "base": "200ms",
+      "slow": "300ms",
+      "slower": "500ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0, 0, 0.58, 1)"
+    },
+    "_comment": "src/styles/motion.css の --Motion-Duration-* / --Motion-Easing-* と同期（正）。Tailwind からは duration-[var(--Motion-Duration-Base)] の形で参照する。定義しているのは DS 実装に実在した値だけ。prefers-reduced-motion では duration が 0.01ms に落ちる。standard は CSS キーワードの ease-out と同一曲線（Tailwind の ease-out クラス cubic-bezier(0,0,0.2,1) とは別物）"
+  },
+  "zIndex": {
+    "local-1": 1,
+    "local-2": 2,
+    "local-3": 3,
+    "local-4": 4,
+    "sticky": 30,
+    "nav": 40,
+    "floating": 50,
+    "overlay": 50,
+    "modal": 50,
+    "popover": 50,
+    "tooltip": 50,
+    "skip-link": 50,
+    "_order": "local-1 < local-2 < local-3 < local-4 < sticky < nav <= floating <= overlay <= modal <= popover <= tooltip <= skip-link",
+    "_comment": "preset.css の --Z-* と同期（正）。Tailwind からは z-[var(--Z-Modal)] の形で参照する。floating 以降が全て 50 なのは既存実装値をそのまま保存した結果（トークン導入は視覚変化ゼロの等値置換）。段差を付けると重なり順が変わる＝視覚変化なので値の見直しは別 issue。z-0/z-10 のコンポーネント内部の重なりはこのスケールの対象外"
   }
 }