@cakejp/design-system 0.17.1 → 0.20.0

package/dist/lib/field-labelling.js

@@ -1,7 +1,8 @@
-import * as a from "react";
-const n = a.createContext(null);
-function t() {
-  return a.useContext(n);
+"use client";
+import * as n from "react";
+const t = n.createContext(null);
+function a() {
+  return n.useContext(t);
 }
 function d(r, e) {
   if (!e) return {};
@@ -22,8 +23,8 @@ function o(r, e) {
   };
 }
 export {
-  n as FieldLabellingContext,
+  t as FieldLabellingContext,
   d as resolveFieldAria,
   o as resolveNativeFieldAria,
-  t as useFieldLabelling
+  a as useFieldLabelling
 };

package/dist/lib/link-component.js

@@ -0,0 +1,6 @@
+function n(r, e) {
+  return e || !r ? "a" : r;
+}
+export {
+  n as resolveLinkComponent
+};

package/dist/lib/use-value-length.js

@@ -1,3 +1,4 @@
+"use client";
 import * as u from "react";
 function a(e, c) {
   if (typeof e == "function") {

package/dist/types/components/ec/product-card.d.ts

@@ -19,6 +19,17 @@ export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     reviewCount?: number;
     /** ショップ名 */
     shopName?: string;
+    /**
+     * ホバー時の画像演出。
+     * - `zoom` : 画像をわずかに拡大
+     * - `fade` : 拡大せず画像をわずかに明るくする（本番 EC 準拠）
+     * - `none` : 演出なし
+     *
+     * 未指定時の既定は orientation で変わる（従来の見た目を維持するため）:
+     * `vertical` = `zoom` / `horizontal` = `none`。明示指定すればどちらの
+     * orientation でも同じように効く。
+     */
+    hoverEffect?: "zoom" | "fade" | "none";
     /** ショップページURL（指定するとショップ名がリンク化、hover時アンダーライン） */
     shopHref?: string;
     /** タグリスト（配送方法・キャンペーンなど） */
@@ -57,23 +68,5 @@ export declare function BookmarkRibbonIcon({ size, filled }: {
     size?: number;
     filled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-/**
- * 商品カードコンポーネント — Figma DS 準拠
- *
- * Cake.jp の商品一覧・検索結果に使用するカードUI。
- * vertical（グリッド表示）と horizontal（リスト表示）の2レイアウト対応。
- *
- * ### Figma との対応
- * - 画像エリア: 正方形、rounded-lg (8px)、4px パディング
- * - ブックマーク: 画像右下に 36px 円形ボタン（本番 .m-bookmark-button--mid 準拠）
- * - タグ: 画像左下に配置（PR、セールバッジ等）
- * - 商品情報: gap-[2px]、商品名 → レビュー+最短日（同行） → 価格
- * - カートボタン: h-[36px]、rounded-[12px]、Brand-Cake-Orange
- *
- * ### 機能
- * - `shopHref` でショップ名リンク化（hover時アンダーライン付き）
- * - `showCartButton` で「カートに追加」ボタン表示（verticalのみ）
- * - ランキングバッジ、お気に入り、割引バッジなどEC必須要素を統合提供
- */
-declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, hoverEffect, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCard };

package/dist/types/components/ec/review-card.d.ts

@@ -2,6 +2,11 @@ import * as React from "react";
 export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** レビューバリアント */
     variant?: "list" | "card" | "pc";
+    /**
+     * 枠線を出すか（既定 true）。
+     * 商品詳細などページ全体をフラットに統一する画面では false にする。
+     */
+    bordered?: boolean;
     /** 星評価（1〜5） */
     rating: number;
     /** 投稿日 */
@@ -40,5 +45,5 @@ export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * - 既存の `RatingStars` の `SparkleIcon` を星表示に使用
  * - 「もっと見る」はオレンジテキスト
  */
-declare function ReviewCard({ className, variant, rating, date, text, imageUrl, productName, productImageUrl, helpfulCount, isLiked, onLikeClick, onMoreClick, maxLength, ...props }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ReviewCard({ className, variant, bordered, rating, date, text, imageUrl, productName, productImageUrl, helpfulCount, isLiked, onLikeClick, onMoreClick, maxLength, ...props }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
 export { ReviewCard };

package/dist/types/components/foundations/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: {
     variant?: "link" | "default" | "secondary" | "tertiary" | "destructive" | "ghost" | "inverse" | "ghost-inverse" | "overlay";
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "hero" | "icon-xs" | "icon-sm" | "icon-lg";
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "hero" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

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

@@ -12,6 +12,6 @@ import { type VariantProps } from "class-variance-authority";
 export declare const chipVariants: (props?: {
     variant?: "accent" | "filled";
     size?: "sm" | "lg" | "md" | "tile";
-    shape?: "pill" | "square";
+    shape?: "square" | "pill";
 } & import("class-variance-authority/types").ClassProp) => string;
 export type ChipVariantProps = VariantProps<typeof chipVariants>;

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

@@ -9,12 +9,20 @@ declare const dataTableRowVariants: (props?: {
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function DataTableRow({ className, state, ...props }: React.ComponentProps<"tr"> & VariantProps<typeof dataTableRowVariants>): import("react/jsx-runtime").JSX.Element;
 type SortDirection = "asc" | "desc" | null;
-declare function DataTableHead({ className, sortable, sortDirection, onSort, width, children, ...props }: React.ComponentProps<"th"> & {
+declare function DataTableHead({ className, sortable, sortDirection, onSort, width, srLabel, children, ...props }: React.ComponentProps<"th"> & {
     sortable?: boolean;
     sortDirection?: SortDirection;
     onSort?: () => void;
     /** セル幅バリアント: max=320-360px, hug=最小 */
     width?: "auto" | "max" | "hug";
+    /**
+     * 見出し文字を出さない列（チェックボックス選択列・操作列など）の読み上げ用ラベル。
+     * 画面には出さず、スクリーンリーダーにだけ列の意味を伝える。
+     *
+     * 空の `<th>` は「この列が何か」が支援技術に伝わらない（axe: empty-table-header）。
+     * 見出しを出したくない列には必ず指定する。
+     */
+    srLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare const dataTableCellVariants: (props?: {
     width?: "auto" | "max" | "hug";

package/dist/types/components/foundations/pagination.d.ts

@@ -1,12 +1,18 @@
 import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
 import { type Button } from "../../components/foundations/button";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
 } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationLink({ className, isActive, size, linkComponent, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/sheet.d.ts

@@ -3,9 +3,14 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
+    /**
+     * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。
+     * WCAG 2.4.3 を満たすため、止めたい特別な事情があるときだけ false にする。
+     */
+    autoFocus?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple";
+export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple" | "hatena";
 export interface SocialIconProps extends Omit<React.ComponentProps<"svg">, "children"> {
     platform: SocialPlatform;
     /**

package/dist/types/components/foundations/tabs.d.ts

@@ -5,8 +5,9 @@ declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsP
 declare const tabsListVariants: (props?: {
     variant?: "underbar" | "segment";
     scrollable?: boolean;
+    size?: "sm" | "md";
 } & import("class-variance-authority/types").ClassProp) => string;
-declare function TabsList({ className, variant, scrollable, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, variant, scrollable, size, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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/components/primitives/content-card.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
+import { type TagProps } from "../../components/primitives/tag";
+export type ContentCardOrientation = "vertical" | "horizontal" | "list";
+export type ContentCardAspect = "16/10" | "16/9" | "1/1";
+export interface ContentCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** 記事タイトル。一覧で高さが割れないよう常に 2 行ぶんの高さを取る */
+    title: string;
+    /** 遷移先。カード全体がリンクになる */
+    href: string;
+    /**
+     * 画像。`next/image` や CMS の img、図版をそのまま渡す。
+     * 縦横比とクリップはカード側が持つので、中身は `h-full w-full object-cover` を想定。
+     */
+    imageSlot?: React.ReactNode;
+    /** 画像左下に重ねるラベル（カテゴリ等）。長いラベルは省略記号で切る */
+    tag?: {
+        label: string;
+        variant?: TagProps["variant"];
+    };
+    /** 日付・著者などの補足。**必ず 1 行**に収まる内容にする（複数行だと一覧で高さが割れる） */
+    meta?: React.ReactNode;
+    /**
+     * カードの向き。
+     * - `vertical`（既定）: 画像が上、本文が下。グリッド一覧向け
+     * - `horizontal` : 画像が左、本文が右
+     * - `list` : 本文が左、サムネイルが右（記事一覧の Medium 型）
+     */
+    orientation?: ContentCardOrientation;
+    /** 画像の縦横比（既定 `16/10`。記事のアイキャッチは横長素材が前提） */
+    aspect?: ContentCardAspect;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
+}
+/**
+ * 記事・特集・お知らせなど「画像 + タイトル + メタ」のカード。
+ *
+ * `ProductCard`（商品）/ `ShopCard`（店舗）の兄弟で、記事メディア向け。
+ * 汎用の `Card` に載せて組むと、枠線・タイトル行数・カード高さが揃わない
+ * （実測で高さ 268 と 312 に割れる事例あり）ため、この部品を使う。
+ *
+ * ### 作法
+ *
+ * - 枠線なし・`rounded-lg`・サーフェスは親から伝播（`Section background="subtle"` 配下では白）
+ * - タイトルは 2 行で省略し、常に 2 行ぶんの高さを取る（一覧で下端が揃う）
+ * - `meta` は 1 行固定でカード下端へ寄る
+ * - 画像は `imageSlot` で consumer が用意する（`next/image` / CMS / 図版を吸収する）
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 記事一覧・関連記事・注目記事は `Card` + `CardContent` で組まずこれを使う
+ * - グリッド一覧は `orientation="vertical"`、Medium 型の縦リストは `orientation="list"` +
+ *   `ContentList`（区切り線つき）
+ * - タイトルの文字装飾を利用側で足さない（`font-bold` にしない。既定は `font-medium`）
+ */
+declare function ContentCard({ className, title, href, imageSlot, tag, meta, orientation, aspect, linkComponent, ...props }: ContentCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ContentCard` を区切り線つきで縦に並べるリスト（記事一覧の Medium 型）。
+ *
+ * 一覧ページで `orientation="list"` の `ContentCard` を並べるときに使う。
+ * 区切り線と項目間の余白だけを持ち、幅・背景は持たない。
+ */
+declare function ContentList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { ContentCard, ContentList };

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
 export interface FooterLink {
     label: string;
     href: string;
@@ -53,6 +54,25 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
     trustBadge?: FooterTrustBadge;
     /** フッター下部の補助リンク（特定商取引法、プライバシーポリシー等） */
     bottomLinks?: FooterLink[];
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `external: true` のリンクは常に素の `<a target="_blank">` で描く。
+     */
+    linkComponent?: LinkComponent;
+    /**
+     * レイアウト（既定 `default`）。
+     * - `default` : ロゴ・説明文を最下部に中央寄せ（本番 Cake.jp 準拠）
+     * - `brand-first` : ロゴ・説明文を先頭カラムに置き、その右にリンク群を並べる。
+     *   下部バーはコピーライト左・`bottomRightSlot` 右の左右振り分けになる
+     *   （求人ケーキ屋さん.jp / 仕入れケーキ屋さん.JP のフッター構成）
+     */
+    variant?: "default" | "brand-first";
+    /**
+     * 下部バーの右側に置く要素（`Powered by` 等）。
+     * `variant="brand-first"` でのみ配置され、既定レイアウトでは無視される。
+     */
+    bottomRightSlot?: React.ReactNode;
 }
 /**
  * フッターコンポーネント
@@ -77,5 +97,5 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
  * - `copyright` でコピーライト表示
  * - BottomTabBar と併用する場合は `pb-16` 等でマージン確保
  */
-declare function Footer({ className, linkGroups, copyright, logo, logoHref, socialLinks, description, paymentMethods, trustBadge, bottomLinks, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+declare function Footer({ className, linkGroups, copyright, logo, logoHref, socialLinks, description, paymentMethods, trustBadge, bottomLinks, variant, bottomRightSlot, linkComponent, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
 export { Footer };

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/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/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/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/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/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

@@ -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";
@@ -91,6 +92,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";
 /**
@@ -205,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";