@cakejp/design-system 0.17.0 → 0.19.0

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

@@ -1,4 +1,9 @@
 import * as React from "react";
+/**
+ * ヘッダー内側の最大幅。`Container` の同名 size と同じ値を使う（値の正本は Container）。
+ * 本文を `Container size="page"` で中央寄せしているサイトで、ロゴ・ナビの左端を本文に揃える。
+ */
+export type HeaderContainerSize = "page" | "wide" | "fluid";
 export interface HeaderAction {
     /** アイコン要素 */
     icon: React.ReactNode;
@@ -14,6 +19,12 @@ export interface HeaderAction {
     href?: string;
     /** バッジ数（通知やカート件数） */
     badge?: React.ReactNode;
+    /**
+     * `label` をアイコンの右に可視テキストとして出す（既定 false = アイコンのみ）。
+     * 「ログイン」等、文字が無いと意味が伝わりにくい導線に使う。
+     * true のときは正方形のアイコンボタンではなく、枠線付きのピル型で描画する。
+     */
+    showLabel?: boolean;
 }
 export interface HeaderNavItem {
     /** 表示ラベル */
@@ -56,7 +67,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * インラインナビ（navItems / searchSlot 行）を出し始めるコンテナ幅。
      * - `md`（既定）: `@[768px]`+
-     * - `lg` : `@[1024px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
+     * - `lg` : `@[960px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
      * 未満の幅では SP 行（ロゴ + actions）になる。
      */
     navBreakpoint?: "md" | "lg";
@@ -70,6 +81,16 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * navItems が無く searchSlot だけを渡した場合も PC 行を描画する。
      */
     searchSlot?: React.ReactNode;
+    /**
+     * `searchSlot` を出し始めるコンテナ幅（既定はインラインナビ行と同じ）。
+     * tokens.json の切替段に一致する `md`（768px）/ `lg`（960px）のみ。
+     * `xl`(1280) はコンテンツ上限段でレイアウトの切替段ではないため受け付けない。
+     *
+     * 中身を consumer 側の CSS で隠しても、このスロットの器は `flex-1` の幅を
+     * 確保し続けてインラインナビを潰す（#243）。狭い帯で検索を出さない場合は
+     * CSS ではなくこの prop で器ごと畳むこと。
+     */
+    searchBreakpoint?: "md" | "lg";
     /** 右側に配置するカスタム要素（variant="back"で使用） */
     rightSlot?: React.ReactNode;
     /** 検索バーなど中央に配置するカスタム要素（variant="back-search"で使用） */
@@ -82,6 +103,13 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     bottomSlot?: React.ReactNode;
     /** sticky 配置を無効化 */
     disableSticky?: boolean;
+    /**
+     * ヘッダー内側の最大幅（`Container` と同じ段）。
+     * 指定すると背景・border・sticky は全幅のまま、**中身だけ**を中央寄せする。
+     * 本文を `Container size="page"` で組んでいるサイトで、ロゴ・ナビの左端が本文と揃う。
+     * 未指定なら従来どおり全幅（DOM も従来どおりで内側ラッパーを足さない）。
+     */
+    containerSize?: HeaderContainerSize;
 }
 /**
  * ページヘッダー
@@ -89,5 +117,5 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  * アプリ全体で使われるヘッダーの3パターンを1コンポーネントで提供。
  * ロゴ＋アクション、戻るボタン＋タイトル、戻るボタン＋検索の3バリエーション。
  */
-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;
+declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, navBreakpoint, navOverflowLabel, searchSlot, searchBreakpoint, rightSlot, centerSlot, bottomSlot, disableSticky, containerSize, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/types/components/primitives/image-input.d.ts

@@ -93,7 +93,7 @@ export interface ImageInputProps extends VariantProps<typeof imageInputPreviewVa
  *
  * ### インポート
  * ```tsx
- * import { ImageInput } from "../../../components/primitives/image-input"
+ * import { ImageInput } from "../../components/primitives/image-input"
  * ```
  *
  * ### 表示サイズ

package/dist/types/components/primitives/kebab-menu.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { KebabMenu } from '../../../components/primitives/kebab-menu'
+ * import { KebabMenu } from '../../components/primitives/kebab-menu'
  * ```
  *
  * ### Props

package/dist/types/components/primitives/menu-drawer.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
 export interface MenuSection {
     /** セクションタイトル */
     title?: string;
@@ -38,6 +39,11 @@ export interface MenuBanner {
     href?: string;
 }
 export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
     /** ユーザー名（ログイン時） */
     userName?: string;
     /** ログイン状態 */
@@ -55,5 +61,5 @@ export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
     /** ログインリンクのhref（デフォルト: /security/login_link/） */
     loginHref?: string;
 }
-declare function MenuDrawer({ userName, isLoggedIn, hideLoginLink, sections, banners, onClose, onLogin, loginHref, className, ...props }: MenuDrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function MenuDrawer({ userName, isLoggedIn, hideLoginLink, sections, banners, onClose, onLogin, loginHref, className, linkComponent, ...props }: MenuDrawerProps): import("react/jsx-runtime").JSX.Element;
 export { MenuDrawer };

package/dist/types/components/primitives/notification-list.d.ts

@@ -5,7 +5,7 @@
  *
  * ### インポート
  * ```tsx
- * import { NotificationList } from '../../../components/primitives/notification-list'
+ * import { NotificationList } from '../../components/primitives/notification-list'
  * ```
  *
  * ### Props（主要なもの）

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+export interface ProseProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * CMS（microCMS 等）のリッチテキスト HTML。
+     *
+     * **サニタイズ済みの HTML だけを渡すこと。** この部品は体裁を当てるだけで、
+     * 中身の無害化は行わない（`dangerouslySetInnerHTML` に素通しする）。
+     * 未指定なら `children` をそのまま包む。
+     */
+    html?: string;
+    /** ラップする要素（既定 `div`。記事本文なら `article`） */
+    as?: "div" | "article" | "section";
+}
+/**
+ * 記事本文の体裁（見出し・段落・リスト・引用・表・画像・リンク）をトークンで揃える。
+ *
+ * 各要素の余白・サイズ・線・色を 1 箇所に集約し、記事メディアごとに CSS Modules を
+ * 書き分けて見た目がばらつくのを防ぐ。`Container size="narrow"`（760px）と
+ * 組み合わせて使う前提の行長になっている。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - CMS のリッチテキストを描くときは、consumer 側で `h2` / `p` / `ul` の CSS を書かず
+ *   これを使う（`ArticleBody.module.css` のような独自 CSS を作らない）
+ * - `html` に渡す HTML は **利用側でサニタイズ済み**であること
+ * - 記事幅は `Container size="narrow"` で決める。この部品は幅を持たない
+ * - 見出しレベルは CMS の出力に従う（この部品は体裁だけを当て、階層は変えない）
+ *
+ * @example
+ * <Container size="narrow">
+ *   <Prose as="article" html={sanitizedHtml} />
+ * </Container>
+ */
+declare function Prose({ className, html, as: Comp, children, ...props }: ProseProps): import("react/jsx-runtime").JSX.Element;
+export { Prose };

package/dist/types/components/primitives/search-bar.d.ts

@@ -6,6 +6,17 @@ export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInput
     size?: "sm" | "md";
     /** 検索リンクURL（{query} はクエリに置換） */
     searchHref?: string;
+    /**
+     * 指定すると `<form method="get" action={action}>` として描画し、素のフォーム送信で遷移する。
+     * JS を必要としないので、スクリプト無効環境やクローラでも検索が成立する（SEO 重視のサイト向け）。
+     * 送信するクエリのキーは `name`（既定 `"q"`）。`searchHref` とは併用しない（`action` が優先）。
+     */
+    action?: string;
+    /**
+     * 送信するクエリのキー（`action` 指定時の既定 `"q"`）。
+     * そのまま input の `name` 属性になる。
+     */
+    name?: string;
 }
 /**
  * 検索バーコンポーネント
@@ -25,7 +36,9 @@ export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInput
  * - `size="sm"` はコンパクトなヘッダー向け
  * - `size="md"` は検索専用ページ向け
  * - `onSearch` で検索クエリを受け取る
- * - `searchHref` で検索結果ページへの遷移リンクを生成
+ * - `searchHref` で検索結果ページへの遷移リンクを生成（JS が必要）
+ * - **JS 無効環境・SEO を考慮するサイトは `action` を使う**。`<form method="get">` として
+ *   描画され、素のフォーム送信で遷移する（`Input` + `Button` で `<form>` を手組みしない）
  */
 declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLInputElement>>;
 export { SearchBar };

package/dist/types/components/primitives/search-panel.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { SearchPanel } from '../../../components/primitives/search-panel'
+ * import { SearchPanel } from '../../components/primitives/search-panel'
  * ```
  *
  * ### Props

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

@@ -58,7 +58,8 @@ export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * - セクション見出し（ランキング等）: `size="xl"` or `size="lg"`（デフォルト）
  * - 小見出し・グループラベル: `size="md"` or `size="sm"`
  * - `as` で見出しレベルを上書き可能（同一ページに h1 が複数必要な場合など）
- * - `moreHref` 指定時はタイトル+サブタイトル全体がリンクになる（クリック領域拡大）
+ * - `moreHref` 指定時はタイトル行がリンクになる（クリック領域拡大）。`subtitle` は
+ *   右側アクションの下も含めた全幅で折り返すため、リンクの外に置く（issue #232）
  * - `action` に任意の ReactNode（Button 等）を渡して右側にアクションを配置可能
  * - `align="center"` でランディング/ガイド系の中央寄せ大見出しに切替（`eyebrow` に Badge 等を載せられる）
  */

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

@@ -43,7 +43,7 @@ export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SectionNav } from '../../../components/primitives/section-nav'
+ * import { SectionNav } from '../../components/primitives/section-nav'
  * ```
  *
  * ### 使い方（vertical＝既定）

package/dist/types/components/primitives/share-buttons.d.ts

@@ -1,9 +1,29 @@
 import * as React from "react";
+/** 組み込みの共有先 */
+export type ShareService = "line" | "x" | "facebook" | "hatena" | "copy";
+/** 組み込みに無い共有先を足すための指定 */
+export interface ShareCustomService {
+    /** 一意なキー（React の key に使う） */
+    key: string;
+    /** ボタンの可視ラベル */
+    label: string;
+    /** 共有先 URL。`{url}` / `{text}` は共有対象に置換される（どちらも URL エンコード済み） */
+    href: string;
+    /** ラベル左のアイコン */
+    icon?: React.ReactNode;
+    /** 読み上げ名（未指定ならラベルをそのまま使う） */
+    ariaLabel?: string;
+}
 export interface ShareButtonsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy"> {
     /** シェアURL */
     url?: string;
     /** シェアテキスト */
     text?: string;
+    /**
+     * 表示する共有先と並び順（既定 `["line", "x", "copy"]`）。
+     * 組み込みに無い共有先は `ShareCustomService` を混ぜて足す。
+     */
+    services?: Array<ShareService | ShareCustomService>;
     /** コピーボタンのラベル */
     copyLabel?: string;
     /** コピー成功時に一時表示するラベル（約2秒） */
@@ -16,14 +36,16 @@ export interface ShareButtonsProps extends Omit<React.HTMLAttributes<HTMLDivElem
 /**
  * シェアボタンコンポーネント
  *
- * 商品をSNSやURLでシェアするためのボタン群。
- * LINE、X（Twitter）、URLコピーに対応。
+ * 記事や商品を SNS・URL コピーで共有するためのボタン群。
  *
  * ### AI 向け使用ルール
  *
- * - 商品詳細ページの共有セクションに使用
+ * - 商品詳細ページ・記事ページの共有セクションに使用
  * - `url` と `text` でシェア内容を指定
+ * - 共有先は `services` で選ぶ（既定は LINE / X / コピー）。
+ *   **同じ意匠を `Button asChild` で組み直さない**
+ * - 組み込みに無い共有先は `services` に `{ key, label, href, icon }` を混ぜて足す
  * - ボタンは横並び、等幅表示
  */
-declare function ShareButtons({ className, url, text, copyLabel, copiedLabel, copyErrorLabel, onCopy, ...props }: ShareButtonsProps): import("react/jsx-runtime").JSX.Element;
+declare function ShareButtons({ className, url, text, services, copyLabel, copiedLabel, copyErrorLabel, onCopy, ...props }: ShareButtonsProps): import("react/jsx-runtime").JSX.Element;
 export { ShareButtons };

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

@@ -51,7 +51,7 @@ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SideNav } from '../../../components/primitives/side-nav'
+ * import { SideNav } from '../../components/primitives/side-nav'
  * ```
  *
  * ### 使い方

package/dist/types/components/primitives/social-login-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type SocialPlatform } from "../../../components/foundations/social-icon";
+import { type SocialPlatform } from "../../components/foundations/social-icon";
 export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">;
 export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** ソーシャルプロバイダー */

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
 export interface SubNavItem {
     /** 表示ラベル */
     label: string;
@@ -10,10 +11,22 @@ export interface SubNavItem {
     isActive?: boolean;
 }
 export interface SubNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
     /** ナビゲーション項目 */
     items: SubNavItem[];
     /** スタイルバリアント */
     variant?: "text" | "chip";
+    /**
+     * ナビ内側の最大幅（`Container` と同じ段）。
+     * 指定すると下線（border）は全幅のまま、**中身だけ**を中央寄せする。
+     * 本文を `Container size="page"` で組んでいるサイトで、項目の左端が本文と揃う。
+     * 未指定なら従来どおり全幅（DOM も従来どおりで内側ラッパーを足さない）。
+     */
+    containerSize?: "page" | "wide" | "fluid";
 }
 /**
  * ナビゲーションリボンコンポーネント
@@ -29,6 +42,8 @@ export interface SubNavProps extends React.HTMLAttributes<HTMLDivElement> {
  * - アクティブ項目は `isActive: true` で下線を強調
  * - テキスト色: アクティブ = 黒（High-Emphasis）、非アクティブ = グレー（Medium-Emphasis）
  * - 必ず `overflow-x-auto` + `scrollbar-hide` で横スクロール対応
+ * - 左右の余白は `Container` と同じ（SP 16 / PC 24）。本文を `Container` で中央寄せしている
+ *   サイトでは `containerSize="page"` を指定すると項目の左端が本文と揃う
  */
-declare function SubNav({ className, items, variant, ...props }: SubNavProps): import("react/jsx-runtime").JSX.Element;
+declare function SubNav({ className, items, variant, linkComponent, containerSize, ...props }: SubNavProps): import("react/jsx-runtime").JSX.Element;
 export { SubNav };

package/dist/types/index.d.ts

@@ -91,6 +91,10 @@ export { ChatComposer } from "./components/primitives/chat-composer";
 export type { ChatComposerProps, ChatComposerAttachmentError } from "./components/primitives/chat-composer";
 export { Chip, chipVariants } from "./components/primitives/chip";
 export type { ChipProps } from "./components/primitives/chip";
+export { Prose } from "./components/primitives/prose";
+export type { ProseProps } from "./components/primitives/prose";
+export { ContentCard, ContentList } from "./components/primitives/content-card";
+export type { ContentCardProps, ContentCardOrientation, ContentCardAspect, } from "./components/primitives/content-card";
 export { StandardPageShell } from "./components/primitives/standard-page-shell";
 export type { StandardPageShellProps } from "./components/primitives/standard-page-shell";
 /**

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

@@ -0,0 +1,26 @@
+import type * as React from "react";
+/**
+ * リンクの描画に使うコンポーネント（#236）
+ *
+ * DS 内でリンクを複数描く部品（Footer / MenuDrawer / SubNav / Pagination）は
+ * 素の `<a>` を描くため、Next.js の `next/link` 等を差し込めずクライアント遷移に
+ * ならない。`asChild` は複数リンクを内部で描く部品には向かないため、
+ * 「リンク実装そのもの」を差し替える prop を共通の型で用意する。
+ *
+ * 例: `<Footer linkComponent={Link} … />`（next/link をそのまま渡せる）
+ */
+export type LinkComponent = React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}>;
+/**
+ * 実際に使うリンク実装を決める。
+ *
+ * 外部リンク（`target="_blank"` を付けるもの）は framework のリンク部品に通す
+ * 意味が無いため、常に素の `<a>` にフォールバックする。
+ *
+ * `isExternal` を渡せるのは、項目に `external` フラグを持つ `Footer` だけ。
+ * MenuDrawer / SubNav / Pagination の項目に `external` は無く、渡した href は
+ * すべて `linkComponent` で描かれる（外部 URL を出し分けたい場合は consumer 側で
+ * ラップする）。
+ */
+export declare function resolveLinkComponent(linkComponent: LinkComponent | undefined, isExternal?: boolean): React.ElementType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -28,7 +28,7 @@
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
   "bin": {
-    "cakejp-ds": "./bin/init.js"
+    "cakejp-ds": "bin/init.js"
   },
   "files": [
     "CHANGELOG.md",
@@ -96,10 +96,11 @@
     "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": "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",
+    "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 && bash scripts/check-agents-mirror.sh",
     "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"
+    "test:a11y": "vitest run --config vitest.a11y.config.ts",
+    "check:consumer-types": "node scripts/check-consumer-types.mjs"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
@@ -181,5 +182,9 @@
     "vite": "^7.3.1",
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
-  }
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "author": ""
 }

package/src/components/COMPONENT_LOOKUP.md

@@ -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択, interaction: クリックと矢印キーでの切り替え |
+| Tabs, TabsList, TabsTrigger, TabsContent | `@/components/foundations/tabs` | **variant**: `underbar`, `segment`<br>**scrollable**: `true`<br>**size**: `md`, `sm` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択, 狭幅（サイドバー 266px）, 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 |
@@ -81,6 +81,7 @@
 | CoachMark | `@/components/primitives/coach-mark` | — | オンボーディング, 全方向, オンボーディング各方向 |
 | Combobox | `@/components/primitives/combobox` | — | Default |
 | Container | `@/components/primitives/container` | — | Default（page / default gutter）, サイズ比較, gutter 比較 |
+| ContentCard, ContentList | `@/components/primitives/content-card` | — | 縦（グリッド一覧）, 一覧での高さ揃え, 横（画像が左）, リスト（Medium 型）, 長いタグラベル |
 | ContentCarousel | `@/components/primitives/content-carousel` | — | ヒーローバナー, 自動再生（5秒）, peek表示, 多列カード（PC 3枚）, 1枚のみ |
 | DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目） |
 | EmptyState | `@/components/primitives/empty-state` | — | お気に入り商品（空）, カート（空）, ブックマーク（空）, 検索結果なし, 汎用（説明のみ） |
@@ -89,7 +90,7 @@
 | Footer | `@/components/primitives/footer` | — | Default, 最小構成, SNSリンク付き, 決済方法付き |
 | FormField | `@/components/primitives/form-field` | — | — |
 | FunnelShell | `@/components/primitives/funnel-shell` | — | 注文内容の確認（ご購入手続き） |
-| Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴ＋長いナビ（中幅で自動退避）, ロゴ＋ナビ（navBreakpoint=lg）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
+| Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴ＋長いナビ（中幅で自動退避）, ロゴ＋ナビ（navBreakpoint=lg）, containerSize=page（本文と左端を揃える）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
 | 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 連携, 検証エラー, クリア不可, 無効化 |
@@ -103,12 +104,13 @@
 | 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（ヘッダー向け）, カスタムプレースホルダー |
+| Prose | `@/components/primitives/prose` | — | 記事本文（Container narrow と組み合わせ）, children を包む, 幅の広い表（ページを横に伸ばさない） |
+| SearchBar | `@/components/primitives/search-bar` | — | Default, Small（ヘッダー向け）, form モード（JS 不要・SEO 向け）, カスタムプレースホルダー |
 | SearchPanel | `@/components/primitives/search-panel` | — | — |
-| SectionHeader | `@/components/primitives/section-header` | — | Default, サブタイトル付き, リンクなし, カスタムラベル, カルーセルナビ付き, ナビのみ, ナビ（先頭位置）, アクションボタン付き, サブタイトル + アクション, サイズ一覧, キャプション付きサイズ比較, align=, LPヒーロー（SP 3xl / PC 5xl）, align=, start / center 比較 |
+| SectionHeader | `@/components/primitives/section-header` | — | Default, サブタイトル付き, リンクなし, カスタムラベル, カルーセルナビ付き, ナビのみ, ナビ（先頭位置）, アクションボタン付き, サブタイトル + アクション, 狭幅のサブタイトル + アクション, サイズ一覧, キャプション付きサイズ比較, align=, LPヒーロー（SP 3xl / PC 5xl）, align=, start / center 比較 |
 | SectionNav | `@/components/primitives/section-nav` | — | Vertical, Horizontal |
 | Section | `@/components/primitives/section` | — | 推奨: Section + Container, 背景画像 + scrim, 背景バリアント, 縦 spacing バリアント, 配下 Card のサーフェス伝播, ランディング見出し |
-| ShareButtons | `@/components/primitives/share-buttons` | — | Default, コピーフィードバック |
+| ShareButtons | `@/components/primitives/share-buttons` | — | Default, コピーフィードバック, 共有先を指定（Facebook / はてブ）, 組み込みに無い共有先を足す |
 | SideNav | `@/components/primitives/side-nav` | — | Default, WithGroupLabels, MypageExample, PrefixMatch |
 | SocialLoginButton | `@/components/primitives/social-login-button` | — | LINE, フルサイズ一覧, アイコンのみ |
 | StandardPageShell | `@/components/primitives/standard-page-shell` | — | 検索結果ページ |

package/src/preset-standalone.css

@@ -266,6 +266,7 @@
   --Third-Party-LINE: #06C755;
   --Third-Party-Apple: #000000;
   --Third-Party-X: #000000;
+  --Third-Party-Hatena: #00A4DE;
 }
 
 .dark {

package/src/preset.css

@@ -52,6 +52,14 @@
   --container-md: 48rem; /* 768px — SP/PC 境界（切替段。本番と一致） */
   --container-lg: 60rem; /* 960px — PC 中段（切替段。本番と一致） */
   --container-xl: 80rem; /* 1280px — コンテンツ上限段（DS 定義。本番の切替段ではない） */
+
+  /* ビューポート用（consumer の md: / lg: / xl:）。コンテナクエリ段と同じ値に揃える。
+     Tailwind v4 既定の --breakpoint-lg は 64rem(1024px) で、DS の PC 中段 960px と
+     64px ずれる。preset が配らないと全 consumer が @theme で書き直す必要があり、
+     書き忘れたプロダクトだけ切替位置がずれる（issue #242）。 */
+  --breakpoint-md: 48rem; /* 768px — SP/PC 境界 */
+  --breakpoint-lg: 60rem; /* 960px — PC 中段 */
+  --breakpoint-xl: 80rem; /* 1280px — コンテンツ上限段 */
 }
 
 /* --- Theme: Tailwind integration --- */

package/src/styles/semantic.css

@@ -116,6 +116,7 @@
   --Third-Party-LINE: #06C755FF;
   --Third-Party-Apple: #000000FF;
   --Third-Party-X: #000000FF;
+  --Third-Party-Hatena: #00A4DEFF;
 }
 
 /* ============================================

package/tokens.json

@@ -463,6 +463,10 @@
         "x": {
           "value": "#000000FF",
           "usage": "Third-Party-X のCSS契約値"
+        },
+        "hatena": {
+          "value": "#00A4DEFF",
+          "usage": "Third-Party-Hatena のCSS契約値（はてなブックマーク）"
         }
       }
     },
@@ -931,11 +935,12 @@
     }
   },
   "breakpoints": {
-    "comment": "役割は二層。(1) 切替段=md / lg の2つだけ（値は本番 cakejp.css の境界に一致させた正本。レイアウトの変形はこの2段でのみ行う）。(2) 上限段=xl（1280。「切替段」ではなく DS が定めるコンテンツ幅の上限段。本番に 1280 の切替段は無い＝1025/1441 はある）。DS 内部はコンテナクエリ @md: / @lg: / @xl:（preset.css の --container-md / --container-lg / --container-xl）で参照し、生 CSS ではこの px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため、値の配布は本トークンが担う）。独自のブレイクポイント値を発明しない",
+    "comment": "役割は二層。(1) 切替段=md / lg の2つだけ（値は本番 cakejp.css の境界に一致させた正本。レイアウトの変形はこの2段でのみ行う）。(2) 上限段=xl（1280。「切替段」ではなく DS が定めるコンテンツ幅の上限段。本番に 1280 の切替段は無い＝1025/1441 はある）。DS 内部はコンテナクエリ @md: / @lg: / @xl:（preset.css の --container-md / --container-lg / --container-xl）で参照し、生 CSS ではこの px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため、値の配布は本トークンが担う）。consumer が書くビューポートの md: / lg: / xl: も preset.css の --breakpoint-md / --breakpoint-lg / --breakpoint-xl が同じ段に揃える（Tailwind v4 既定の lg は 1024px で DS の 960px と 64px ずれるため）。値を変えるときは tokens.json と preset.css の --container-* / --breakpoint-* を必ず同時に更新する。独自のブレイクポイント値を発明しない",
     "md": {
       "px": 768,
       "rem": "48rem",
       "container": "--container-md",
+      "viewport": "--breakpoint-md",
       "role": "切替段",
       "usage": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致"
     },
@@ -943,6 +948,7 @@
       "px": 960,
       "rem": "60rem",
       "container": "--container-lg",
+      "viewport": "--breakpoint-lg",
       "role": "切替段",
       "usage": "PC 中段。本番 cakejp.css の min-width:960px 段と一致"
     },
@@ -950,6 +956,7 @@
       "px": 1280,
       "rem": "80rem",
       "container": "--container-xl",
+      "viewport": "--breakpoint-xl",
       "role": "上限段",
       "usage": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い（1025 / 1441 はある）——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]"
     }