@cakejp/design-system 0.11.0 → 0.12.0

package/contracts/components.json

@@ -5,10 +5,10 @@
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "counts": {
-      "foundations": 47,
-      "primitives": 42,
+      "foundations": 50,
+      "primitives": 44,
       "ec": 24,
-      "total": 113
+      "total": 118
     }
   },
   "foundations": [
@@ -26,9 +26,22 @@
     {
       "name": "Alert",
       "path": "src/components/foundations/alert.tsx",
+      "subcomponents": [
+        "AlertTitle",
+        "AlertDescription"
+      ],
       "variants": [
-        "default",
-        "destructive"
+        "success",
+        "info",
+        "error",
+        "warning",
+        "inline-info",
+        "inline-caution",
+        "inline-warning"
+      ],
+      "rules": [
+        "bordered variant（success/info/error/warning）は title/description/icon/action の prop-based API に対応（旧 Banner 相当）",
+        "inline variant（inline-info/inline-caution/inline-warning）も同じ prop-based API に対応（#109）。フォーム内・セクション内の軽量な補足情報用。アイコンは20pxで自動選択"
       ]
     },
     {
@@ -75,7 +88,8 @@
         "ghost",
         "link",
         "inverse",
-        "ghost-inverse"
+        "ghost-inverse",
+        "overlay"
       ],
       "sizes": [
         "xs",
@@ -89,7 +103,8 @@
         "aria-label必須（アイコンのみの場合）"
       ],
       "rules": [
-        "<button>を直接使わない。必ずButtonコンポーネントを使う"
+        "<button>を直接使わない。必ずButtonコンポーネントを使う",
+        "variant='overlay'は画像・メディアの上に載せる操作ボタン専用（半透過白のSurface-Overlay-Light下地+shadow-md+backdrop-blur-sm）。ImageCarousel矢印と同系の意匠。size='icon'+className='rounded-full'で円形にできる"
       ]
     },
     {
@@ -109,9 +124,16 @@
         "CardContent",
         "CardFooter"
       ],
+      "variants": {
+        "surface": [
+          "default",
+          "primary"
+        ]
+      },
       "rules": [
         "paddingはCard本体のp-4で一括管理。全幅コンテンツは-mx-4で突き破る",
-        "子要素の縦間隔はCard本体のflex-col gap-4(16px)で一括管理。直下の子にmargin-top/bottom/space-yを足さない（gapと二重がけになり間延びする）。丸アイコンはIconBadgeを使う（外側marginを持たない）"
+        "子要素の縦間隔はCard本体のflex-col gap-4(16px)で一括管理。直下の子にmargin-top/bottom/space-yを足さない（gapと二重がけになり間延びする）。丸アイコンはIconBadgeを使う（外側marginを持たない）",
+        "surface='default'(既定)はbg-card(Surface-Secondary)。Surface-Tertiary系(グレーSection)の地の上ではコントラスト不足になるためsurface='primary'(白=Surface-Primary)を使う"
       ]
     },
     {
@@ -177,6 +199,23 @@
       "name": "DropdownMenu",
       "path": "src/components/foundations/dropdown-menu.tsx"
     },
+    {
+      "name": "Field",
+      "path": "src/components/foundations/field.tsx",
+      "subcomponents": [
+        "FieldSet",
+        "FieldLegend",
+        "FieldGroup",
+        "FieldDescription",
+        "FieldError",
+        "FieldSeparator"
+      ],
+      "rules": [
+        "フォーム全体の骨格を組む補助群。個々の入力欄は FormField を使う",
+        "余白は縦リズムに従う（FieldSet=gap-6 / FieldGroup=gap-4）。手で mt-/mb- を足さない",
+        "見出しは FieldLegend、グループ横断の区切りは FieldSeparator を使う"
+      ]
+    },
     {
       "name": "Form",
       "path": "src/components/foundations/form.tsx",
@@ -193,13 +232,14 @@
       "path": "src/components/foundations/icon-badge.tsx",
       "variants": [
         "md",
+        "ml",
         "lg"
       ],
       "rules": [
-        "丸アイコンバッジ（md=44px/lg=72px）。アイコンを淡いアクセント背景の円で囲む装飾要素",
+        "丸アイコンバッジ（md=44px/ml=48px/lg=72px）。アイコンを淡いアクセント背景の円で囲む装飾要素",
         "外側marginを持たない。縦間隔は親Cardのflex-col gap-4(16px)に委ねる（二重がけ防止）",
         "アイコン色はcurrentColor(--Object-Accent-Primary)を継承。中のアイコンにcolorを渡さない",
-        "アイコンサイズはバッジが固定(md=20px/lg=38px)。アイコン側にsizeを渡さない"
+        "アイコンサイズはバッジが固定(md=20px/ml=24px/lg=38px)。アイコン側にsizeを渡さない"
       ]
     },
     {
@@ -209,7 +249,8 @@
         "必ずLabelと紐付ける"
       ],
       "rules": [
-        "<input>を直接使わない。type='email'/'tel'を適切に指定する"
+        "<input>を直接使わない。type='email'/'tel'を適切に指定する",
+        "文字数カウンタは showCount + maxLength で有効化（右下に {現在}/{max}、上限で Text-Caution）。制御/非制御両対応"
       ]
     },
     {
@@ -247,8 +288,31 @@
     {
       "name": "RadioGroup",
       "path": "src/components/foundations/radio-group.tsx",
+      "variants": [
+        "tile",
+        "chip"
+      ],
       "accessibility": [
         "各RadioGroupItemにLabel必須"
+      ],
+      "rules": [
+        "variant='tile'（既定）=ラジオ丸+ラベル+補足説明+展開コンテンツのタイル型",
+        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariantsを再利用して選択状態をaccent意匠（静止=薄オレンジ/hover=ベタ塗り）で示す。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持"
+      ]
+    },
+    {
+      "name": "FileInput",
+      "path": "src/components/foundations/file-input.tsx",
+      "accessibility": [
+        "idをLabel/FormFieldのhtmlForと揃えて紐付ける",
+        "ネイティブ<input type='file'>をvisually-hiddenで内包しキーボード・SR操作可能",
+        "エラー表示はaria-describedbyでFieldErrorと接続"
+      ],
+      "rules": [
+        "<input type='file'>を直接書かない。汎用の添付（PDF/CSV/画像混在）はFileInputを使う",
+        "プレビュー付きの画像管理（並び替え・複数サムネイル）はImageUploaderを使う",
+        "複数選択時（multiple）は選択済みを「n件選択」で集約表示",
+        "maxSize（バイト）超過ファイルは受理せずonErrorを呼ぶ"
       ]
     },
     {
@@ -293,6 +357,20 @@
         "アニメーションはpulseのみ許可"
       ]
     },
+    {
+      "name": "SkipLink",
+      "path": "src/components/foundations/skip-link.tsx",
+      "category": "navigation",
+      "accessibility": [
+        "WCAG 2.4.1（Bypass Blocks）対応。キーボード／SR ユーザーがヘッダーの反復リンクを飛ばして本文へ移動する",
+        "aria/文言は日本語（既定「コンテンツへ移動」）"
+      ],
+      "rules": [
+        "sr-only で常時視覚には出さず、フォーカス時のみ左上に可視化する（focus:not-sr-only）",
+        "スキップ先 <main id> は href（既定 #main-content）と一致させる",
+        "全シェル（StandardPageShell / FunnelShell / WorkspaceShell / AdminShell / MypageShell）が DOM 先頭に標準内蔵する。シェルを使う場合は個別に置かない（skipLink={false} で無効化）"
+      ]
+    },
     {
       "name": "Slider",
       "path": "src/components/foundations/slider.tsx"
@@ -336,6 +414,9 @@
       "path": "src/components/foundations/textarea.tsx",
       "accessibility": [
         "Label必須"
+      ],
+      "rules": [
+        "文字数カウンタは showCount + maxLength で有効化（右下に {現在}/{max}、上限で Text-Caution）。制御/非制御両対応"
       ]
     },
     {
@@ -366,6 +447,21 @@
       "name": "BannerCarousel",
       "path": "src/components/primitives/banner-carousel.tsx"
     },
+    {
+      "name": "ContentCarousel",
+      "path": "src/components/primitives/content-carousel.tsx",
+      "features": [
+        "scroll-snap",
+        "dots",
+        "arrows",
+        "autoPlay"
+      ],
+      "rules": [
+        "ReactNode スライド対応（slides: ReactNode[]）。テキスト主体のヒーローバナー用",
+        "画像だけのバナーは ImageCarousel を使う",
+        "矢印・ドットの意匠は ImageCarousel と同一"
+      ]
+    },
     {
       "name": "StickyActionBar",
       "path": "src/components/primitives/sticky-action-bar.tsx",
@@ -411,6 +507,20 @@
         "Tagと違い押せる・削除できる"
       ]
     },
+    {
+      "name": "DatePicker",
+      "path": "src/components/primitives/date-picker.tsx",
+      "subcomponents": [
+        "DateTimePicker"
+      ],
+      "rules": [
+        "input type='date' 禁止ルールの実装済みの正解形。Popover+Calendar を毎回手組みしない",
+        "trigger の選択値は M月D日（曜日）表記、カレンダーは日本語ロケール",
+        "選択範囲は min/max、個別不可日は disabledDates で指定する",
+        "DateTimePicker は JST 前提で Date をそのまま扱う（TZ 変換しない）",
+        "FormField の children に置き、id を htmlFor と揃えて label/エラーと接続する"
+      ]
+    },
     {
       "name": "EmptyState",
       "path": "src/components/primitives/empty-state.tsx",
@@ -421,8 +531,19 @@
     {
       "name": "ErrorState",
       "path": "src/components/primitives/error-state.tsx",
+      "variants": {
+        "kind": [
+          "error",
+          "notFound"
+        ]
+      },
+      "subcomponents": [
+        "NotFoundIllustration"
+      ],
       "rules": [
-        "色+アイコン+テキスト必須。リトライアクションを含める"
+        "kind='error'（既定）は色+アイコン+テキスト必須。リトライアクションを含める",
+        "kind='notFound' は 404 向け。イラスト・見出し・説明が既定で入るため action（トップへ戻る等）だけ渡せばよい",
+        "NotFoundIllustration は単体 export。consumer が独自レイアウトで使う場合に流用する"
       ]
     },
     {
@@ -618,12 +739,19 @@
       "name": "SectionNav",
       "path": "src/components/primitives/section-nav.tsx",
       "category": "navigation",
+      "variants": [
+        "vertical",
+        "horizontal"
+      ],
       "rules": [
         "ページ内セクション移動（アンカー／目次）専用。href=\"#section-id\" のページ内スクロールに使う",
         "ページ間遷移に使わない → SideNav を使う",
         "チェブロン・矢印を足さない（遷移アフォーダンスを持たせない。同一画面内の位置移動に見せる）",
         "WorkspaceShell の sectionNav にはこれを使う（SideNav を流用しない）",
-        "固有幅・背景・境界を持たない（w-full）。パネル化・幅決定はシェル／利用側の責務"
+        "固有幅・背景・境界を持たない（w-full）。パネル化・幅決定はシェル／利用側の責務",
+        "orientation=\"vertical\"（既定）は縦積み目次。orientation=\"horizontal\" は Tabs アンダーバー式の横並び（ガイド・FAQ 等の長い静的ページのページ内ジャンプ、overflow-x-auto 対応）",
+        "sticky は内蔵しない。horizontal を貼り付ける場合は利用側が className=\"sticky top-14 …\" を付与し、ジャンプ先セクションに scroll-mt-* を付ける",
+        "IntersectionObserver は内包しない。activeKey は利用側が制御する（AnchorNav の新設は却下、本コンポーネントの variant で担う）"
       ]
     },
     {
@@ -637,20 +765,26 @@
         "あくまで枠。プロダクトのロゴ・タブ項目・ナビ項目・文言を焼き込まない。header / bottomTab は利用側（ec 層）が組み立てて渡す",
         "bottomTab を渡すと main の下余白（pb-20 相当）はシェルが管理する。ページ側で pb-20 を書かない（付け忘れ／二重がけの構造的防止）",
         "左右 padding は持たない（Container の責務）。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む",
-        "管理画面は AdminShell、複数情報をまたぐ集中編集は WorkspaceShell、マイページ配下は MypageShell を使う"
+        "管理画面は AdminShell、複数情報をまたぐ集中編集は WorkspaceShell、マイページ配下は MypageShell を使う",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content、SkipLink の飛び先と一致）。sr-only で視覚無影響。skipLink={false} で無効化。ページ側で手組みしない"
       ]
     },
     {
       "name": "WorkspaceShell",
       "path": "src/components/primitives/workspace-shell.tsx",
       "kind": "shell",
-      "variants": [],
+      "variants": [
+        "headerLayout=start",
+        "headerLayout=center"
+      ],
       "rules": [
         "Focused Workspace（全画面集中編集）のシェル。編集ヘッダー（Header variant=back）+ 任意のセクションナビ + 編集本体で構成",
+        "headerLayout（既定 start）: centerでヘッダーを左=戻る/中央=タイトル/右=primaryActionの3カラムgridに固定し、タイトルを真の中央に揃える（#112）。consumer 側の data-slot セレクタ上書きは不要",
         "グローバルナビ・パンくずを持たない（構造的に置けない）。集中を妨げる導線は出さない",
         "primaryActionはワークスペース全体の上位アクション（公開申請・承認依頼等）がある場合のみ。セクション／行単位の操作はコンテンツ内に置く",
         "標準の編集はAdminShellのStandard Page（Edit）（旧Form Page）。複雑・複数情報をまたぐ集中編集・没入執筆のみWorkspaceShellを使う",
-        "sectionNavは編集内ナビ（アンカー／ステップ）のみ。PCでサイド表示・SPで非表示"
+        "sectionNavは編集内ナビ（アンカー／ステップ）のみ。PCでサイド表示・SPで非表示",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
       ]
     },
     {
@@ -664,12 +798,25 @@
         "あくまで枠。ステップ定義（名前・数）・文言・商品データを焼き込まない。steps / activeStep は利用側（ドメイン）が渡す",
         "グローバルナビ・BottomTabBar・パンくずを持たない（構造的に置けない）。離脱を誘う導線を出さず購入に集中させる",
         "bottomAction（StickyActionBar 等）を渡すと本文の下余白はシェルが管理する。ページ側で pb を書かない（付け忘れ／二重がけの構造的防止）",
-        "左右 padding は持たない（Container の責務）。管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）"
+        "左右 padding は持たない（Container の責務）。管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
       ]
     },
     {
       "name": "Header",
-      "path": "src/components/primitives/header.tsx"
+      "path": "src/components/primitives/header.tsx",
+      "variants": [
+        "logo",
+        "logo-center",
+        "back",
+        "back-search"
+      ],
+      "rules": [
+        "variant=\"logo\" の PC 行（@[768px]+）では searchSlot で navItems と actions の間に常設検索を inline 配置できる（flex-1 max-w-[400px] で伸縮）。navItems 無し＋searchSlot だけでも PC 行を描画する",
+        "SP 行に searchSlot は出さない。SP の常設検索は従来どおり bottomSlot で運用する",
+        "bottomSlot はヘッダー下段の全幅スロット（ProductDetailBar 等）。PC 常設検索の置き場に使わない（PC 二段ヘッダーになる）",
+        "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）"
+      ]
     },
     {
       "name": "AdminSideNav",
@@ -703,7 +850,8 @@
         "navItems で既定メニューを差し替え可、headerActions でヘッダー右アクションを差し替え可",
         "戻る導線（onBack）はパンくずの上に置く。onBack を渡すとシェルが main 内・パンくずより上に戻るボタンを描画する（backLabel で文言変更・既定『戻る』）。子コンテンツ内に戻るリンクを手書きしない",
         "タイトル直下の上位アクション（AI商品作成・PDF出力等）は h1 と同じ左端に左寄せする。右端フロートにしない",
-        "既定値は props で差し替え可能で、骨格（Header + SideNav + Main）自体は他事業（ジョブボードの管理画面等）でも再利用できる"
+        "既定値は props で差し替え可能で、骨格（Header + SideNav + Main）自体は他事業（ジョブボードの管理画面等）でも再利用できる",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
       ]
     },
     {
@@ -724,7 +872,8 @@
         "サイドナビは既定で ec/_mypage-menu-data の mypageMenuGroups を使用。activeMenu で現在ページを強調する",
         "既定値は props で差し替え可能（menuGroups / breadcrumbs / bottomNavItems / headerActions）で、骨格（ヘッダー＋2カラム＋BottomTabBar）自体は他事業（ジョブボードのマイページ等）でも再利用できる",
         "breadcrumbs 省略時は「ホーム > {ユーザー}さまのマイページ > {title}」を自動生成する",
-        "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない"
+        "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
       ]
     },
     {
@@ -788,6 +937,9 @@
         "favorite",
         "discount-badge",
         "rating"
+      ],
+      "rules": [
+        "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物で代替不可"
       ]
     },
     {
@@ -884,7 +1036,9 @@
       "path": "src/components/ec/product-list-item.tsx",
       "category": "display",
       "rules": [
-        "カート/注文履歴/レビュー variant を持つ商品リスト行"
+        "カート/注文履歴/レビュー variant を持つ商品リスト行",
+        "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物",
+        "subtotal/subtotalLabel（既定\"小計\"）はcart variant専用。数量セレクタ行の右側（収まらなければ下に折り返し）に¥{カンマ区切り}で表示。BtoB/法人ECのロット購入等、商品ごとの単価×数量の内訳を明示したい場合に使う"
       ]
     }
   ]

package/contracts/rules.json

@@ -527,7 +527,7 @@
       "category": "component",
       "pattern": "<input type=\"date\"|<input type='date'",
       "message": "input type='date' のネイティブ日付ピッカー禁止",
-      "fix": "<Popover> + <Calendar> でDS準拠の日付ピッカーを組む"
+      "fix": "実装済みの正解形 <DatePicker />（日付）/ <DateTimePicker />（日時）を使う（内部で Popover+Calendar を DS 意匠で組み済み・M月D日（曜日）表記・日本語カレンダー）。特殊要件で手組みが要る場合のみ <Popover> + <Calendar>"
     },
     {
       "id": "R51",
@@ -542,6 +542,21 @@
       "category": "component",
       "message": "管理画面のテーブルをui/tableで組まない",
       "fix": "<DataTable> を使う（ソート・選択行・アクションメニュー対応）"
+    },
+    {
+      "id": "R54",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<input type=\"file\"|<input type='file'",
+      "message": "ネイティブ <input type='file'> を直接使わない",
+      "fix": "汎用の添付（PDF/CSV/画像混在）は <FileInput />（foundations）を使う。プレビュー付きの画像管理（並び替え・複数サムネイル）は <ImageUploader />（primitives）を使う"
+    },
+    {
+      "id": "R55",
+      "severity": "warning",
+      "category": "component",
+      "message": "画像・メディアの上に載せる操作ボタンを rgba 直書きの半透過下地で手組みしない",
+      "fix": "<Button variant='overlay'>（半透過白 Surface-Overlay-Light + shadow-md + backdrop-blur-sm）を使う。ImageCarousel 矢印と同系の意匠。円形は size='icon' + className='rounded-full'"
     }
   ],
   "accessibility": {
@@ -569,6 +584,7 @@
   "typography": {
     "rule": "必ず typo-* クラスを使用。text-sm font-bold 等の個別指定禁止。",
     "classes": [
+      { "class": "typo-heading-4xl", "size": "32px", "weight": "bold" },
       { "class": "typo-heading-3xl", "size": "28px", "weight": "bold" },
       { "class": "typo-heading-2xl", "size": "24px", "weight": "bold" },
       { "class": "typo-heading-xl",  "size": "21px", "weight": "bold" },