@cakejp/design-system 0.17.1 → 0.20.0

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.17.1",
+    "version": "0.20.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -9,9 +9,9 @@
     "formBinding": "react-hook-form との繋ぎ方。formBinding:\"register\"=ネイティブ form control に props/ref を透過するので {...register(\"name\")} を直接 spread できる（Input / Textarea）。formBinding:\"controller\"=Radix ベースで ref が <button> 等に着地する、または値が Date/File など非文字列のため Controller の field.value / field.onChange に繋ぐ。formBinding:\"layout\"=値を持たないレイアウト部品でバインド対象ではない（Field / Form / FormField / ProductOption）。formBinding:\"none\"=値は扱うが単一フィールドのバインド対象ではない自己完結フォーム・複合ウィジェット（DataTable / SearchBar / ReviewForm）。この切り分けは __tests__/react-hook-form-integration.test.tsx が実挙動で固定する（issue #151 / #152）。",
     "counts": {
       "foundations": 51,
-      "primitives": 49,
+      "primitives": 51,
       "ec": 24,
-      "total": 124,
+      "total": 126,
       "note": "counts は各ティアの実装ファイル数（scripts/check-drift.sh が src/components/<tier>/*.tsx と突き合わせる）。subcomponents / deprecatedAliases は含まない。"
     }
   },
@@ -117,7 +117,12 @@
         "default",
         "lg",
         "xl",
-        "hero"
+        "hero",
+        "icon-xs",
+        "icon-sm",
+        "icon",
+        "icon-lg",
+        "icon-xl"
       ],
       "accessibility": [
         "aria-label必須（アイコンのみの場合）"
@@ -125,6 +130,7 @@
       "rules": [
         "<button>を直接使わない。必ずButtonコンポーネントを使う",
         "高さは size='default'=44px（h-11） / xs=24px / sm=32px / lg=48px / xl=56px / hero=min 56px。default はフォーム入力コントロール（Input / SelectTrigger default / DatePicker trigger）と同じ 44px なので、入力行にボタンを並置しても揃う",
+        "アイコンのみは icon-xs=24px / icon-sm=32px / icon=36px / icon-lg=40px / icon-xl=44px。入力コントロール（Input / SearchBar / SelectTrigger）の横に並べるときは icon-xl を使う（他は高さが揃わず、44px のタップ領域も満たさない）",
         "⚠️ variant='secondary' はブランドアクセント意匠（Surface-Accent-Primary-Light地+Brand-Cake-Orange文字）。Material/Bootstrap/shadcn の secondary（グレー・控えめ）とは別物なので、他DSの感覚で選ばない",
         "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」等の後退・中立アクションは variant='tertiary'（Surface-Tertiary地+Text-High-Emphasis文字のニュートラルなグレー）を使う。主CTAの隣に置く2番目のボタンでも、役割が後退なら secondary ではなく tertiary",
         "variant='secondary' を使うのは、主CTAと別方向の“前進”を促す副CTAのとき（例: 主='購入する' に対し 副='サンプルを見る'）",
@@ -208,9 +214,35 @@
       "name": "DataTable",
       "path": "src/components/foundations/data-table.tsx",
       "formBinding": "none",
+      "subcomponents": [
+        "DataTableTable",
+        "DataTableHeader",
+        "DataTableBody",
+        "DataTableRow",
+        "DataTableHead",
+        "DataTableCell",
+        "DataTableAvatarCell",
+        "DataTableImageCell",
+        "DataTableLinkCell",
+        "DataTableCheckboxCell",
+        "DataTableActionCell",
+        "DataTableInputCell",
+        "DataTableSelectCell",
+        "DataTableNumberCell",
+        "DataTableDragHandleCell",
+        "DataTableBulkActions",
+        "DataTableSectionRow",
+        "DataTableAddRow",
+        "DataTableEmptyState"
+      ],
       "rules": [
         "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応",
-        "ActionCellのメニュー操作は行のonClickへ伝播しない（本体でstopPropagation済み）。行クリック選択との併用時も利用側ガードは不要"
+        "ActionCellのメニュー操作は行のonClickへ伝播しない（本体でstopPropagation済み）。行クリック選択との併用時も利用側ガードは不要",
+        "見出し文字を出さない列（選択・操作・並び替えハンドル）は DataTableHead の srLabel で読み上げ用ラベルを付ける。空の <th> は列の意味が支援技術に伝わらない（axe: empty-table-header）"
+      ],
+      "accessibility": [
+        "sortable な列の押下は <button> が担い、Tab / Enter / Space で操作できる。並び替え状態は <th aria-sort>（none / ascending / descending）で伝わる。th に onClick を直接書かない",
+        "方向アイコンは装飾なので aria-hidden。列名は button の中に置き、読み上げ名にする"
       ]
     },
     {
@@ -344,7 +376,11 @@
     },
     {
       "name": "Pagination",
-      "path": "src/components/foundations/pagination.tsx"
+      "path": "src/components/foundations/pagination.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
     },
     {
       "name": "Popover",
@@ -420,6 +456,15 @@
         "SheetDescription",
         "SheetFooter",
         "SheetClose"
+      ],
+      "props": [
+        "SheetContent: side?: top | right | bottom | left",
+        "SheetContent: showCloseButton?: boolean",
+        "SheetContent: autoFocus?: boolean"
+      ],
+      "accessibility": [
+        "SheetTitle は必須（ダイアログの読み上げ名）",
+        "フォーカスは既定で自動移動する（開く=Sheet の中へ / 閉じる=トリガーへ戻る）。WCAG 2.4.3。autoFocus={false} は止める必要がある特別な場合だけ使う（issue #233）"
       ]
     },
     {
@@ -460,7 +505,7 @@
       "name": "SocialIcon",
       "path": "src/components/foundations/social-icon.tsx",
       "props": [
-        "platform",
+        "platform: line | x | facebook | hatena | amazon | google | apple",
         "tone?: brand | mono",
         "size?: number"
       ],
@@ -497,6 +542,15 @@
         "TabsList",
         "TabsTrigger",
         "TabsContent"
+      ],
+      "variants": [
+        "TabsList variant: underbar | segment",
+        "TabsList scrollable: boolean",
+        "TabsList size: md | sm"
+      ],
+      "rules": [
+        "サイドバー等の狭い場所に segment を置くときは TabsList size=\"sm\" を使う。既定は 1 項目 100px の最小幅を持ち、3 つ並べると 266px 幅ではみ出す（issue #235）",
+        "underbar のトリガーは左右 8px の padding を持つ。className=\"px-2\" を利用側で足さない"
       ]
     },
     {
@@ -565,7 +619,9 @@
         "サイドバーは 1 枚のパネルとして読ませる。ヘッダー行に border-bottom、フッター（ユーザーブロック・ヘルプ導線等）に border-top を引かない。内部を横線で区切ると分割されて見えるため、分離は余白で担う",
         "画面に見える線は①サイドバー右端の縦線②コンテンツヘッダー下の横線の 2 本に絞る。サイドバー内で横線を引くと 2 本が十字に交差して見える（正しくは T 字で突き当たる）",
         "折りたたみ（開閉）を持たせる場合、トリガーはサイドバー内ヘッダー行の右端に置く。コンテンツヘッダーの左端に置かない。動かす対象と操作する場所が離れると、そのボタンが何に属するか読めなくなる",
-        "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）"
+        "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）",
+        "PC のサブメニューは DropdownMenu の Portal / collision handling を使い、side=right / align=start / collisionPadding=8 で viewport 内に収める。絶対配置の flyout を手組みしない",
+        "PC のサブメニューは hover とクリックに加え、Enter / Space / ArrowDown で開き Escape で閉じてトリガーへフォーカスを戻す。hover 起動時はメニューへフォーカスを移さず、トリガーと Portal 間は短い close delay で橋渡しする"
       ]
     },
     {
@@ -646,6 +702,36 @@
       "name": "CoachMark",
       "path": "src/components/primitives/coach-mark.tsx"
     },
+    {
+      "name": "ContentCard",
+      "path": "src/components/primitives/content-card.tsx",
+      "subcomponents": [
+        "ContentList"
+      ],
+      "props": [
+        "title: string",
+        "href: string",
+        "imageSlot?: ReactNode",
+        "tag?: { label: string; variant?: TagProps[\"variant\"] }",
+        "meta?: ReactNode",
+        "orientation?: vertical | horizontal | list",
+        "aspect?: 16/10 | 16/9 | 1/1",
+        "linkComponent?: LinkComponent"
+      ],
+      "variants": [
+        "orientation: vertical | horizontal | list",
+        "aspect: 16/10 | 16/9 | 1/1"
+      ],
+      "rules": [
+        "記事・特集・お知らせなど「画像 + タイトル + メタ」のカード。ProductCard（商品）/ ShopCard（店舗）の兄弟。Card + CardContent で組まない（枠線・タイトル行数・カード高さが揃わない。実測で高さ 268 / 312 に割れた事例あり）（issue #241）",
+        "タイトルは 2 行で省略し常に 2 行ぶんの高さを取る。文字装飾を利用側で足さない（font-bold にしない。既定は font-medium）",
+        "meta は 1 行に収める。複数行にすると一覧でカード高さが割れる",
+        "画像は imageSlot に渡す（next/image・CMS・図版を吸収する）。縦横比とクリップはカード側が持つ",
+        "Medium 型の縦リストは orientation=\"list\" + ContentList（区切り線つき）を使う",
+        "カード全体がリンク。linkComponent で next/link 等を差し込める",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
+    },
     {
       "name": "Combobox",
       "path": "src/components/primitives/combobox.tsx",
@@ -745,7 +831,16 @@
     },
     {
       "name": "Footer",
-      "path": "src/components/primitives/footer.tsx"
+      "path": "src/components/primitives/footer.tsx",
+      "rules": [
+        "variant='brand-first' でロゴ・説明文を先頭カラムに置き、その右にリンク群を並べる。下部バーはコピーライト左・bottomRightSlot 右の左右振り分けになる。linkGroups が空でもロゴ・説明文は落ちず、逆に logo/description が無いときは nav を 2 カラムへ押し込まない。この構成をカスタムマークアップで自作しない（#246）",
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。external:true のリンクは framework のリンク部品へ通す意味が無いため常に素の <a target=_blank> にフォールバックする（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
+      ],
+      "variants": [
+        "default",
+        "brand-first"
+      ]
     },
     {
       "name": "FormField",
@@ -801,7 +896,10 @@
         "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）",
         "navItems は幅に入り切らない項目を自動で「その他」ドロップダウンへ退避する（#200）。consumer 側で項目数を手で slice して減らさない。ラベルを増やしても中幅でロゴ・actions と衝突しない",
         "navBreakpoint でインラインナビ行の開始コンテナ幅を選べる: md（既定 = @[768px]+）/ lg（@[1024px]+）。ロゴが多段で横幅を食うケースは lg にして中幅での同居自体を避ける",
-        "「その他」のラベルは navOverflowLabel で差し替えられる（既定 その他）。ハンバーガーを自前で組まない"
+        "「その他」のラベルは navOverflowLabel で差し替えられる（既定 その他）。ハンバーガーを自前で組まない",
+        "HeaderAction の showLabel=true でアイコン＋可視ラベルのピル型（h-10・枠線）になる。「ログイン」等アイコンだけでは伝わらない導線に使い、consumer 側でアイコンにテキストを差し込まない（#245）",
+        "searchBreakpoint で searchSlot の器を出し始めるコンテナ幅を選ぶ（md=768 / lg=960 の切替段のみ。xl=1280 は上限段でレイアウト切替に使わない）。狭い帯で検索を出さないときは consumer の CSS で中身を隠さずこの prop を使う。中身だけ隠しても器が flex-1 の幅を確保し、インラインナビを潰す（#243）",
+        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する（Container と同じ段: page / wide / fluid）。背景・border・sticky は全幅のまま中身だけ中央寄せされ、ロゴ・ナビの左端が本文と揃う。consumer 側で className に max-w を当てると背景と線まで中央幅になり両脇が抜けるので使わない（issue #234）"
       ]
     },
     {
@@ -890,7 +988,11 @@
     },
     {
       "name": "MenuDrawer",
-      "path": "src/components/primitives/menu-drawer.tsx"
+      "path": "src/components/primitives/menu-drawer.tsx",
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
+      ]
     },
     {
       "name": "MultiSelect",
@@ -942,6 +1044,21 @@
       "name": "ProgressSteps",
       "path": "src/components/primitives/progress-steps.tsx"
     },
+    {
+      "name": "Prose",
+      "path": "src/components/primitives/prose.tsx",
+      "props": [
+        "html?: string",
+        "as?: div | article | section"
+      ],
+      "rules": [
+        "CMS（microCMS 等）のリッチテキスト HTML を描くときは、consumer 側で h2 / p / ul の CSS を書かずこれを使う。ArticleBody.module.css のような独自 CSS を作らない（issue #239）",
+        "html に渡す HTML は利用側でサニタイズ済みであること。この部品は体裁を当てるだけで中身の無害化はしない",
+        "記事幅は Container size=\"narrow\"（760px）で決める。この部品は幅を持たない",
+        "見出しレベルは CMS の出力に従う（体裁だけを当て、階層は変えない）",
+        "幅の広い表は表自身が縮む／横スクロールするので、ページは横に伸びない"
+      ]
+    },
     {
       "name": "NumberInput",
       "path": "src/components/primitives/number-input.tsx",
@@ -987,7 +1104,20 @@
     {
       "name": "SearchBar",
       "path": "src/components/primitives/search-bar.tsx",
-      "formBinding": "none"
+      "formBinding": "none",
+      "props": [
+        "size?: sm | md",
+        "onSearch?: (query: string) => void",
+        "searchHref?: string",
+        "action?: string",
+        "name?: string"
+      ],
+      "rules": [
+        "JS 無効環境・クローラでも動かす必要がある画面（SEO 重視の記事メディア等）は action を指定する。<form method=\"get\" action> として描画され、Enter も検索ボタンも素のフォーム送信になる（issue #237）",
+        "action 指定時のクエリキーは name（既定 q）",
+        "Input + Button で <form method=get> を手組みしない",
+        "searchHref は window.location を書き換える JS 前提の導線。action と併用しない（action が優先）"
+      ]
     },
     {
       "name": "SearchPanel",
@@ -1027,7 +1157,8 @@
       "rules": [
         "タイトル+もっと見るボタンをCardTitle+Button手書き禁止。SectionHeaderを使う",
         "中央寄せ大見出し（ランディング/ガイド系）は align=\"center\" を使う。eyebrow プロップに Badge 等を載せられる。手書きの中央寄せ見出し禁止",
-        "3xl（28px）は通常ページの主見出しにも使う。4xl/5xlはLP・マーケティング系ヒーロー専用で、size=\"3xl\" に desktopSize=\"4xl\" または desktopSize=\"5xl\" を加えてPC時だけ拡大する"
+        "3xl（28px）は通常ページの主見出しにも使う。4xl/5xlはLP・マーケティング系ヒーロー専用で、size=\"3xl\" に desktopSize=\"4xl\" または desktopSize=\"5xl\" を加えてPC時だけ拡大する",
+        "align=\"start\" では subtitle はタイトル行の下に全幅で置かれ、右側 action の下の空きも使って折り返す。moreHref 併用時にリンクになるのはタイトル行だけで、subtitle はリンクの外（issue #232）"
       ]
     },
     {
@@ -1051,7 +1182,17 @@
     },
     {
       "name": "ShareButtons",
-      "path": "src/components/primitives/share-buttons.tsx"
+      "path": "src/components/primitives/share-buttons.tsx",
+      "props": [
+        "url?: string",
+        "text?: string",
+        "services?: Array<'line' | 'x' | 'facebook' | 'hatena' | 'copy' | ShareCustomService>"
+      ],
+      "rules": [
+        "共有先は services で選ぶ（既定 line / x / copy）。同じ意匠を Button asChild で組み直さない（issue #238）",
+        "組み込みに無い共有先は services に { key, label, href, icon } を混ぜて足す。href の {url} / {text} が URL エンコード済みの値に置換される",
+        "共有先のロゴは SocialIcon が持つ。SVG を手書きしない"
+      ]
     },
     {
       "name": "SideNav",
@@ -1101,7 +1242,17 @@
     },
     {
       "name": "SubNav",
-      "path": "src/components/primitives/sub-nav.tsx"
+      "path": "src/components/primitives/sub-nav.tsx",
+      "variants": [
+        "variant: text | chip",
+        "containerSize: page | wide | fluid"
+      ],
+      "rules": [
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
+        "左右の余白は Container と同じ SP 16 / PC 24。利用側で px-* を足さない",
+        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する。下線は全幅のまま中身だけ中央寄せされる（issue #234）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
+      ]
     },
     {
       "name": "Tag",
@@ -1251,6 +1402,9 @@
     {
       "name": "ProductCard",
       "path": "src/components/ec/product-card.tsx",
+      "subcomponents": [
+        "BookmarkRibbonIcon"
+      ],
       "layouts": [
         "vertical",
         "horizontal"
@@ -1263,8 +1417,10 @@
       "rules": [
         "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物で代替不可",
         "カード幅は列（親グリッド/flex）が決める。カード自身は min-w-0 で、固定の min-width を持たない。自前のカードを組む場合もテキスト列は grid-template-columns: minmax(0, 1fr) にし、auto にしない（nowrapのメタ行のmin-content幅が列を押し広げ、サムネイルが列からはみ出す）",
-        "商品名は line-clamp-2 + min-h-[2lh] で常に2行分の高さを確保する。1行の商品名でも下に続く価格の縦位置が一覧内で揃う"
-      ]
+        "商品名は line-clamp-2 + min-h-[2lh] で常に2行分の高さを確保する。1行の商品名でも下に続く価格の縦位置が一覧内で揃う",
+        "hoverEffect でホバー時の画像演出を選ぶ: zoom / fade（拡大せず明るく・暗テーマ対応のため brightness を使う）/ none。未指定時の既定は orientation ごと（vertical=zoom / horizontal=none）で従来の見た目を維持し、明示指定すれば horizontal でも効く。consumer 側の CSS で scale を打ち消さない。Tailwind v4 の scale-* は transform ではなく scale プロパティのため打ち消しは壊れやすい（#244）"
+      ],
+      "variants": {}
     },
     {
       "name": "ProductCarousel",
@@ -1343,6 +1499,9 @@
       "features": [
         "helpful-count",
         "like"
+      ],
+      "rules": [
+        "bordered={false} で枠線を外せる。商品詳細等ページ全体をフラットに統一する画面で consumer が border-0 を上書きしない（#247）"
       ]
     },
     {

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.17.1",
+    "version": "0.20.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.17.1",
+    "version": "0.20.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [
@@ -655,6 +655,10 @@
         "id": "A007",
         "rule": "全フォーム入力に <Label> または aria-label を紐付ける"
       },
+      {
+        "id": "A014",
+        "rule": "React Server Components 対応: client 専用 API（useState / useEffect / createContext 等）を使うモジュールは先頭に \"use client\" を宣言する。バレル（src/index.ts）には付けない — 付けるとパッケージ全体が client 扱いになり、cn / buttonVariants を Server Component から呼べなくなる。__tests__/client-boundary.test.ts が固定する"
+      },
       {
         "id": "A013",
         "rule": "Radix ベースのコントロール（Select / Switch / Checkbox / Combobox / Slider 等）は <button> や <span role=\"slider\"> として描画されるため、<Label htmlFor> や外側の <label> ラップでは名前が付かない。FormField でラップして aria-labelledby を自動付与させるか、単体利用なら日本語の aria-label をコントロール自身に書く（issue #202）"

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.17.1",
+    "version": "0.20.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/ec/admin-shell.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
 import * as d from "react";
 import { cn as k } from "../../lib/utils.js";
@@ -130,7 +131,7 @@ function ne({
   mainId: f = "main-content",
   skipLink: g
 }) {
-  const [y, h] = d.useState(!1), S = /* @__PURE__ */ r(N, { children: [
+  const [y, c] = d.useState(!1), S = /* @__PURE__ */ r(N, { children: [
     /* @__PURE__ */ r("button", { className: "relative flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)]", "aria-label": "通知", children: [
       /* @__PURE__ */ e(j, { size: 20, className: "text-[var(--Text-High-Emphasis)]" }),
       /* @__PURE__ */ e("span", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-[var(--Surface-Caution)]" })
@@ -154,7 +155,7 @@ function ne({
               activeKey: t,
               drawerTitle: p ?? s,
               open: y,
-              onOpenChange: h
+              onOpenChange: c
             }
           ),
           /* @__PURE__ */ r("div", { className: "@container/main flex flex-1 flex-col @md:pl-18", children: [
@@ -162,7 +163,7 @@ function ne({
               L,
               {
                 brand: b ?? `${s}管理`,
-                onMenuClick: () => h(!0),
+                onMenuClick: () => c(!0),
                 actions: v ?? S
               }
             ),
@@ -182,10 +183,10 @@ function ne({
                 }
               ),
               (n || l) && /* @__PURE__ */ r("div", { className: "mb-4 space-y-1", children: [
-                n && n.length > 0 && /* @__PURE__ */ e("nav", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-label": "パンくず", children: n.map((o, c) => /* @__PURE__ */ r(d.Fragment, { children: [
-                  c > 0 && /* @__PURE__ */ e(F, { size: 12 }),
+                n && n.length > 0 && /* @__PURE__ */ e("nav", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-label": "パンくず", children: n.map((o, h) => /* @__PURE__ */ r(d.Fragment, { children: [
+                  h > 0 && /* @__PURE__ */ e(F, { size: 12 }),
                   o.href ? /* @__PURE__ */ e("a", { href: o.href, className: "hover:text-[var(--Text-Accent-Primary)] transition-colors", children: o.label }) : /* @__PURE__ */ e("span", { className: "text-[var(--Text-High-Emphasis)]", children: o.label })
-                ] }, c)) }),
+                ] }, h)) }),
                 l && /* @__PURE__ */ e("h1", { className: "typo-heading-2xl text-[var(--Text-High-Emphasis)]", children: l })
               ] }),
               i

package/dist/components/ec/order-summary.js

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "react";
-import y from "iconsax-reactjs/dist/esm/ShieldTick.js";
+import v from "iconsax-reactjs/dist/esm/ShieldTick.js";
 import { cn as l } from "../../lib/utils.js";
 import { Button as u } from "../foundations/button.js";
-import { Separator as v } from "../foundations/separator.js";
+import { Separator as y } from "../foundations/separator.js";
 function T({
   className: t,
-  lineItems: r,
-  totalLabel: o = "合計（税込）",
-  totalValue: d,
+  lineItems: a,
+  totalLabel: d = "合計（税込）",
+  totalValue: o,
   ctaLabel: c,
   onCTAClick: n,
   showSecurityBadge: p = !1,
@@ -17,8 +17,8 @@ function T({
   ctaDisabled: f = !1,
   ...i
 }) {
-  const m = /* @__PURE__ */ a("div", { className: "space-y-2 px-4 py-3", children: [
-    r && r.map((s) => /* @__PURE__ */ a(
+  const m = /* @__PURE__ */ r("div", { className: "space-y-2 px-4 py-3", children: [
+    a && a.map((s) => /* @__PURE__ */ r(
       "div",
       {
         className: "flex items-center justify-between typo-body-md",
@@ -29,10 +29,10 @@ function T({
       },
       s.label
     )),
-    r && r.length > 0 && /* @__PURE__ */ e(v, {}),
-    /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: o }),
-      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: d })
+    a && a.length > 0 && /* @__PURE__ */ e(y, {}),
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: d }),
+      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: o })
     ] }),
     /* @__PURE__ */ e(
       u,
@@ -44,8 +44,8 @@ function T({
         children: c
       }
     ),
-    p && /* @__PURE__ */ a("p", { className: "flex items-center justify-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
-      /* @__PURE__ */ e(y, { size: 12 }),
+    p && /* @__PURE__ */ r("p", { className: "flex items-center justify-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+      /* @__PURE__ */ e(v, { size: 12 }),
       h
     ] })
   ] });
@@ -65,7 +65,8 @@ function T({
     {
       "data-slot": "order-summary",
       className: l(
-        "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]",
+        // fixed 表示はスクロール内容の上に重なるため地は Surface-Elevated（disableFixed 側はページ内フローなので Surface-Primary のまま）
+        "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
         t
       ),
       ...i,