@cakejp/design-system 0.19.0 → 0.20.1

package/dist/types/components/primitives/admin-side-nav.d.ts

@@ -65,6 +65,9 @@ export interface AdminSideNavProps {
  *
  * メイン項目・サブメニュー項目とも 44px（WCAG 2.5.5 の最小ターゲット）以上にする。
  * 行高が小さいテキストで縦 padding だけに頼ると割り込むため、`min-h-11` で下限を固定する。
+ * PC のサブメニューは `DropdownMenu` の Portal / collision handling を利用し、
+ * viewport 端では位置と最大高を自動調整する。hover ではフォーカスを奪わず、
+ * Enter / Space / ArrowDown / Escape では標準のメニュー操作に従う。
  *
  * ### インポート
  * ```tsx

package/dist/types/index.d.ts

@@ -20,7 +20,8 @@ export type { CheckboxGroupProps } from "./components/foundations/checkbox-group
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/foundations/context-menu";
-export { DataTable } from "./components/foundations/data-table";
+export { DataTable, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell, DataTableAvatarCell, DataTableImageCell, DataTableLinkCell, DataTableCheckboxCell, DataTableActionCell, DataTableInputCell, DataTableSelectCell, DataTableNumberCell, DataTableDragHandleCell, DataTableBulkActions, DataTableSectionRow, DataTableAddRow, DataTableEmptyState, } from "./components/foundations/data-table";
+export type { SortDirection } from "./components/foundations/data-table";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/foundations/dialog";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu";
@@ -209,7 +210,7 @@ export { OrderSummary } from "./components/ec/order-summary";
 export type { OrderSummaryProps, OrderSummaryLineItem } from "./components/ec/order-summary";
 export { PaymentMethodDisplay, CreditCardIcon } from "./components/ec/payment-method";
 export type { PaymentMethodDisplayProps, CreditCardIconProps, CreditCardBrand } from "./components/ec/payment-method";
-export { ProductCard } from "./components/ec/product-card";
+export { ProductCard, BookmarkRibbonIcon } from "./components/ec/product-card";
 export type { ProductCardProps } from "./components/ec/product-card";
 export { ProductCarousel } from "./components/ec/product-carousel";
 export type { ProductCarouselProps } from "./components/ec/product-carousel";

package/dist/types/lib/link-component.d.ts

@@ -8,6 +8,15 @@ import type * as React from "react";
  * 「リンク実装そのもの」を差し替える prop を共通の型で用意する。
  *
  * 例: `<Footer linkComponent={Link} … />`（next/link をそのまま渡せる）
+ *
+ * ⚠️ `Footer` / `MenuDrawer` は Client Component。React Server Components では
+ * Server Component からこの prop を渡すと client 境界を越えて関数を渡すことに
+ * なり、`Functions cannot be passed directly to Client Components` で落ちる。
+ * Next.js App Router では、この prop を使う呼び出し側を `"use client"` にする
+ * （エラーメッセージは `"use server"` を示唆するが、正解は逆）。
+ *
+ * `Pagination` / `SubNav` / `ContentCard` は Server Component のまま使えるため、
+ * この prop を使うだけで呼び出し側を `"use client"` にする必要はない。
  */
 export type LinkComponent = React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -111,6 +111,7 @@
     "react-hook-form": "^7.0.0",
     "sonner": "^2.0.0",
     "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
     "vaul": "^1.0.0"
   },
   "peerDependencies": {
@@ -175,7 +176,6 @@
     "storybook": "^10.3.3",
     "tailwindcss": "^4.2.1",
     "tsc-alias": "^1.8.16",
-    "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vaul": "^1.1.2",

package/src/components/COMPONENT_LOOKUP.md

@@ -27,7 +27,7 @@
 | Collapsible, CollapsibleTrigger, CollapsibleContent | `@/components/foundations/collapsible` | — | Default, CouponCodeInput, OrderOptions |
 | 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並び替え |
+| 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: 開閉とフォーカストラップ |
 | 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, グループ付き, 注文アクション例 |
@@ -70,7 +70,7 @@
 | Component | Import | Variants | Stories |
 |-----------|--------|----------|---------|
 | AdminHeader | `@/components/primitives/admin-header` | — | — |
-| AdminSideNav | `@/components/primitives/admin-side-nav` | — | — |
+| AdminSideNav | `@/components/primitives/admin-side-nav` | — | 下端寄り・多数項目・キーボード操作, interaction: flyout の開閉・フォーカス・viewport 境界 |
 | BannerCarousel | `@/components/primitives/banner-carousel` | — | Default, SmallBanners, LargeBanners |
 | BottomTabBar | `@/components/primitives/bottom-tab-bar` | — | Default（ホーム）, アクティブ状態, バッジ付き, バッジオーバーフロー（99+）, バナー付き, 記念日アクティブ |
 | BulkActionBar | `@/components/primitives/bulk-action-bar` | — | — |

package/src/preset-standalone.css

@@ -191,6 +191,7 @@
   --Surface-Primary: #FFFFFF;
   --Surface-Secondary: #FBF9F8;
   --Surface-Tertiary: #F4F2F1;
+  --Surface-Elevated: #FFFFFF;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
   --Surface-Accent-Primary: #E04B00;
@@ -273,6 +274,7 @@
   --Surface-Primary: #000000E5;
   --Surface-Secondary: #FFFFFF1A;
   --Surface-Tertiary: #FFFFFF33;
+  --Surface-Elevated: #3A3736;
   --Surface-Caution: #EC0000;
   --Surface-Caution-Light: #FFE7E6;
   --Surface-Accent-Primary: #E04B00;

package/src/preset.css

@@ -19,7 +19,7 @@
  *   - シャドウ・角丸トークン
  *   - モーショントークン（--Motion-Duration-* / --Motion-Easing-*）
  *   - 重なり順トークン（--Z-*）
- *   - アニメーションユーティリティ
+ *   - アニメーションユーティリティ（tw-animate-css の animate-in 系 + 独自 keyframes）
  *   - 見た目を変えず44pxの操作領域を確保する tap-target ユーティリティ
  * ============================================ */
 
@@ -35,6 +35,16 @@
 /* --- Layer 4: Motion Tokens (duration / easing) --- */
 @import "./styles/motion.css";
 
+/* --- Layer 5: Animation Utilities (tw-animate-css) ---
+   foundations の 12 部品（Dialog / Sheet / Popover / DropdownMenu / Select /
+   Tooltip / Drawer / AlertDialog / HoverCard / ContextMenu / Menubar /
+   NavigationMenu）が使う animate-in / zoom-in-* / slide-in-from-* は
+   Tailwind 本体ではなく tw-animate-css のユーティリティ。preset が配らないと、
+   自分で tw-animate-css を入れた consumer だけアニメーションが動く暗黙依存になる
+   （実例: cakejp-biz-mag のモバイルメニューが無言で無アニメーションだった）。
+   パッケージ解決で consumer の node_modules から読む（DS の dependency）。 */
+@import "tw-animate-css";
+
 /* --- Dark mode variant --- */
 @custom-variant dark (&:is(.dark *));
 
@@ -234,7 +244,7 @@
   --foreground: var(--Text-High-Emphasis);
   --card: var(--Surface-Secondary);
   --card-foreground: var(--Text-High-Emphasis);
-  --popover: var(--Surface-Primary);
+  --popover: var(--Surface-Elevated);
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);
@@ -270,7 +280,7 @@
   --foreground: var(--Text-High-Emphasis);
   --card: var(--Surface-Secondary);
   --card-foreground: var(--Text-High-Emphasis);
-  --popover: var(--Surface-Primary);
+  --popover: var(--Surface-Elevated);
   --popover-foreground: var(--Text-High-Emphasis);
   --primary: var(--Brand-Cake-Orange);
   --primary-foreground: var(--Text-on-Inverse);

package/src/styles/semantic.css

@@ -16,6 +16,12 @@
   --Surface-Primary: var(--Primitive-White-alpha-1000);
   --Surface-Secondary: var(--Primitive-Gray-50);
   --Surface-Tertiary: var(--Primitive-Gray-100);
+  /* 浮遊レイヤー（メニュー・ポップオーバー・ダイアログ・シート）と、
+     スクロール内容の上に重なるエッジ固定バー（Header / StickyActionBar /
+     BottomTabBar / AdminHeader / AdminSideNav / OrderSummary fixed）の地。
+     任意のコンテンツの上に重なるので必ず不透明にする（issue #262）。
+     light は Surface-Primary と同値（元から不透明）。 */
+  --Surface-Elevated: var(--Primitive-White-alpha-1000);
   --Surface-Caution: var(--Primitive-Sun-800);
   --Surface-Caution-Light: var(--Primitive-Sun-50);
   --Surface-Accent-Primary: var(--Primitive-Orange-700);
@@ -129,6 +135,10 @@
   --Surface-Primary: var(--Primitive-Gray-alpha-900);
   --Surface-Secondary: var(--Primitive-White-alpha-100);
   --Surface-Tertiary: var(--Primitive-White-alpha-200);
+  /* dark の Surface-Primary は #000000E5 でアルファ付き。ページ地としては
+     下地に合成される前提なので妥当だが、浮遊レイヤーに使うと後ろが透ける。
+     一段明るい不透明色を elevation として持つ（issue #262）。 */
+  --Surface-Elevated: var(--Primitive-Gray-800);
   --Surface-Caution: var(--Primitive-Sun-800);
   --Surface-Caution-Light: var(--Primitive-Sun-50);
   --Surface-Accent-Primary: var(--Primitive-Orange-700);

package/templates/AGENTS.md

@@ -1,6 +1,8 @@
 <!--
-  このファイルは @cakejp/design-system の postinstall で自動設置されました。
-  最新ルールを取り込むには: npx cakejp-ds init --force
+  DS 共通ルールの正本。npm package に同梱され、consumer からは
+  node_modules/@cakejp/design-system/templates/ 配下を参照して読む。
+  consumer のリポジトリへ本文をコピーしないこと（写しは必ず古くなる）。
+  consumer ルートに置かれるのは、この正本を指すポインタ（*.stub.md）だけ。
 -->
 
 # このプロジェクトは @cakejp/design-system に準拠する

package/templates/AGENTS.stub.md

@@ -0,0 +1,25 @@
+<!--
+  このファイルは @cakejp/design-system の postinstall で自動設置されました。
+  DS 共通ルールは package 内の正本を参照します（このファイルへは複製しません）。
+  プロジェクト固有のルールは下の「プロジェクト固有ルール」以下へ自由に書けます。
+  DS 側の更新は npm install だけで反映されるため、書き写す必要はありません。
+-->
+
+# このプロジェクトは @cakejp/design-system に準拠する
+
+Codex（および他の AI エージェント）は UI を作成・変更・レビューする前に、
+**DS 共通ルールの正本を必ず読み込むこと**。
+
+## 📖 DS 共通ルール（正本・必読）
+
+- `node_modules/@cakejp/design-system/templates/AGENTS.md`
+
+このファイルへ内容を書き写さないこと。**手元の写しは必ず古くなる**（DS 側にルールが
+追加されても写しには反映されない）。正本は `npm install` のたびに最新へ更新される。
+
+正本から辿る必読ファイル（`CLAUDE.md` / `contracts/*.json` / `tokens.json` 等）も
+すべて `node_modules/@cakejp/design-system/` 配下にある。
+
+## プロジェクト固有ルール
+
+<!-- ここから下はプロジェクト固有。DS の更新で上書きされません。 -->

package/templates/CLAUDE.md

@@ -1,6 +1,8 @@
 <!--
-  このファイルは @cakejp/design-system の postinstall で自動設置されました。
-  最新ルールを取り込むには: npx cakejp-ds init --force
+  DS 共通ルールの正本。npm package に同梱され、consumer からは
+  node_modules/@cakejp/design-system/templates/ 配下を参照して読む。
+  consumer のリポジトリへ本文をコピーしないこと（写しは必ず古くなる）。
+  consumer ルートに置かれるのは、この正本を指すポインタ（*.stub.md）だけ。
 -->
 
 # このプロジェクトは @cakejp/design-system に準拠する

package/templates/CLAUDE.stub.md

@@ -0,0 +1,25 @@
+<!--
+  このファイルは @cakejp/design-system の postinstall で自動設置されました。
+  DS 共通ルールは package 内の正本を参照します（このファイルへは複製しません）。
+  プロジェクト固有のルールは下の「プロジェクト固有ルール」以下へ自由に書けます。
+  DS 側の更新は npm install だけで反映されるため、書き写す必要はありません。
+-->
+
+# このプロジェクトは @cakejp/design-system に準拠する
+
+Claude Code（および他の AI エージェント）は UI を作成・変更・レビューする前に、
+**DS 共通ルールの正本を必ず読み込むこと**。
+
+## 📖 DS 共通ルール（正本・必読）
+
+- `node_modules/@cakejp/design-system/templates/CLAUDE.md`
+
+このファイルへ内容を書き写さないこと。**手元の写しは必ず古くなる**（DS 側にルールが
+追加されても写しには反映されない）。正本は `npm install` のたびに最新へ更新される。
+
+正本から辿る必読ファイル（`CLAUDE.md` / `contracts/*.json` / `tokens.json` 等）も
+すべて `node_modules/@cakejp/design-system/` 配下にある。
+
+## プロジェクト固有ルール
+
+<!-- ここから下はプロジェクト固有。DS の更新で上書きされません。 -->

package/tokens.json

@@ -119,6 +119,11 @@
           "hex": "#F4F2F1",
           "usage": "ターシャリ背景"
         },
+        "elevated": {
+          "value": "Primitive-White-alpha-1000",
+          "hex": "#FFFFFF",
+          "usage": "浮遊レイヤー（メニュー・ポップオーバー・ダイアログ・シート）と、スクロール内容の上に重なるエッジ固定バー（Header / StickyActionBar / BottomTabBar 等）の地。必ず不透明にする"
+        },
         "caution": {
           "value": "Primitive-Sun-800",
           "hex": "#EC0000",
@@ -484,6 +489,10 @@
           "value": "var(--Primitive-White-alpha-200)",
           "usage": "Surface-Tertiary のCSS契約値"
         },
+        "elevated": {
+          "value": "var(--Primitive-Gray-800)",
+          "usage": "Surface-Elevated のCSS契約値"
+        },
         "caution": {
           "value": "var(--Primitive-Sun-800)",
           "usage": "Surface-Caution のCSS契約値"