@cakejp/design-system 0.21.0 → 0.21.1

package/CHANGELOG.md

@@ -11,6 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.21.1] - 2026-10-21
+
+### 🐛 Fixed
+
+- **`ContentCarousel` の矢印が、複数枚表示（`itemsPerView`）でも 1 枚ずつしか送らなかった**（[#325](https://github.com/flashpark/cake-design-system/pull/325)）: 見えている枚数を実際の幅から求め、その枚数ずつ送る（PC で 4 枚表示なら 4 枚ずつ）。SP・peek（1 枚表示）は従来どおり 1 枚ずつ。末尾から次へで先頭、先頭から前へで末尾に戻る動きは変えない
+  - `autoPlay` も同じく 1 画面ずつ送る。既存の `itemsPerView` 2 以上の利用箇所は、矢印の送り幅が表示枚数に変わる
+
+---
+
 ## [0.21.0] - 2026-10-15
 
 ### ✨ Added

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.21.0",
+    "version": "0.21.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.21.0",
+    "version": "0.21.1",
     "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.21.0",
+    "version": "0.21.1",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [

package/contracts/screen-patterns.json

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

package/dist/components/primitives/content-carousel.js

@@ -1,156 +1,165 @@
 "use client";
-import { jsxs as w, jsx as a, Fragment as k } from "react/jsx-runtime";
+import { jsxs as w, jsx as n, Fragment as j } from "react/jsx-runtime";
 import * as s from "react";
 import O from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
 import R from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as u } from "../../lib/utils.js";
+import { cn as f } from "../../lib/utils.js";
 import { usePrefersReducedMotion as F } from "../../lib/use-prefers-reduced-motion.js";
-const M = {
+const W = {
   1: "@[960px]:w-full",
   2: "@[960px]:w-[calc((100%-16px)/2)]",
   3: "@[960px]:w-[calc((100%-32px)/3)]",
   4: "@[960px]:w-[calc((100%-48px)/4)]"
 };
-function q({
+function _({
   slides: p,
   showDots: E = !0,
-  showArrows: C = !0,
-  autoPlay: f = 0,
-  peek: x = !1,
-  itemsPerView: v = 1,
-  ariaLabel: I = "コンテンツカルーセル",
-  className: N,
-  ...S
+  showArrows: I = !0,
+  autoPlay: m = 0,
+  peek: v = !1,
+  itemsPerView: b = 1,
+  ariaLabel: N = "コンテンツカルーセル",
+  className: S,
+  ...L
 }) {
-  const c = s.useRef(null), [n, z] = s.useState(0), i = F(), t = p.length;
+  const i = s.useRef(null), [c, z] = s.useState(0), l = F(), r = p.length;
   s.useEffect(() => {
-    const r = c.current;
-    if (!r) return;
-    let e = 0;
+    const e = i.current;
+    if (!e) return;
+    let t = 0;
     const o = () => {
-      cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-        const h = Array.from(
-          r.querySelectorAll("[data-slide]")
-        ), L = h[0]?.offsetLeft ?? 0;
-        let b = 0, g = Number.POSITIVE_INFINITY;
-        h.forEach((T, j) => {
-          const y = Math.abs(T.offsetLeft - L - r.scrollLeft);
-          y < g && (g = y, b = j);
-        }), z(b);
+      cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+        const u = Array.from(
+          e.querySelectorAll("[data-slide]")
+        ), M = u[0]?.offsetLeft ?? 0;
+        let g = 0, y = Number.POSITIVE_INFINITY;
+        u.forEach((k, T) => {
+          const C = Math.abs(k.offsetLeft - M - e.scrollLeft);
+          C < y && (y = C, g = T);
+        }), z(g);
       });
     };
-    o(), r.addEventListener("scroll", o, { passive: !0 });
-    const l = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(o);
-    return l?.observe(r), () => {
-      cancelAnimationFrame(e), r.removeEventListener("scroll", o), l?.disconnect();
+    o(), e.addEventListener("scroll", o, { passive: !0 });
+    const a = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(o);
+    return a?.observe(e), () => {
+      cancelAnimationFrame(t), e.removeEventListener("scroll", o), a?.disconnect();
     };
-  }, [t]);
+  }, [r]);
   const d = s.useCallback(
-    (r) => {
-      const e = c.current;
-      if (!e) return;
-      const o = e.children[r], l = e.children[0];
-      o && l && e.scrollTo({
-        left: o.offsetLeft - l.offsetLeft,
-        behavior: i ? "auto" : "smooth"
+    (e) => {
+      const t = i.current;
+      if (!t) return;
+      const o = t.children[e], a = t.children[0];
+      o && a && t.scrollTo({
+        left: o.offsetLeft - a.offsetLeft,
+        behavior: l ? "auto" : "smooth"
       });
     },
-    [i]
-  ), m = s.useCallback(() => {
-    const r = c.current, e = r ? r.scrollLeft >= r.scrollWidth - r.clientWidth - 1 : !1;
-    d(n >= t - 1 || e ? 0 : n + 1);
-  }, [n, t, d]);
+    [l]
+  ), h = s.useCallback(() => {
+    const e = i.current, t = e?.children[0], o = e?.children[1];
+    if (!e || !t || !o) return 1;
+    const a = o.offsetLeft - t.offsetLeft;
+    if (a <= 0) return 1;
+    const u = a - t.offsetWidth;
+    return Math.max(1, Math.floor((e.clientWidth + u + 1) / a));
+  }, []), x = s.useCallback(() => {
+    const e = i.current, t = e ? e.scrollLeft >= e.scrollWidth - e.clientWidth - 1 : !1;
+    d(
+      c >= r - 1 || t ? 0 : Math.min(c + h(), r - 1)
+    );
+  }, [c, r, d, h]);
   s.useEffect(() => {
-    if (i || f <= 0 || t <= 1) return;
-    const r = setInterval(m, f);
-    return () => clearInterval(r);
-  }, [f, t, i, m]);
+    if (l || m <= 0 || r <= 1) return;
+    const e = setInterval(x, m);
+    return () => clearInterval(e);
+  }, [m, r, l, x]);
   function A() {
-    d(n <= 0 ? t - 1 : n - 1);
+    d(c <= 0 ? r - 1 : Math.max(0, c - h()));
   }
-  return t === 0 ? null : /* @__PURE__ */ w(
+  return r === 0 ? null : /* @__PURE__ */ w(
     "div",
     {
       "data-slot": "content-carousel",
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": I,
-      className: u("@container group/carousel relative", N),
-      ...S,
+      "aria-label": N,
+      className: f("@container group/carousel relative", S),
+      ...L,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ n(
           "div",
           {
-            ref: c,
-            className: u(
+            ref: i,
+            className: f(
               "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
               // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
               // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
               // スナップ後も端の余白が消えないようにする。PC (@[960px]:) では peek しないので外す
-              x && "-mx-[var(--Container-Gutter,0px)] gap-3 px-[var(--Container-Gutter,16px)] scroll-px-[var(--Container-Gutter,16px)] @[960px]:mx-0 @[960px]:gap-0 @[960px]:px-0 @[960px]:scroll-px-0",
-              v > 1 && "@[960px]:gap-4"
+              v && "-mx-[var(--Container-Gutter,0px)] gap-3 px-[var(--Container-Gutter,16px)] scroll-px-[var(--Container-Gutter,16px)] @[960px]:mx-0 @[960px]:gap-0 @[960px]:px-0 @[960px]:scroll-px-0",
+              b > 1 && "@[960px]:gap-4"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-            children: p.map((r, e) => /* @__PURE__ */ a(
+            children: p.map((e, t) => /* @__PURE__ */ n(
               "div",
               {
                 "data-slide": !0,
-                "data-index": e,
+                "data-index": t,
                 role: "group",
                 "aria-roledescription": "スライド",
-                "aria-label": `${e + 1} / ${t}`,
-                className: u(
+                "aria-label": `${t + 1} / ${r}`,
+                className: f(
                   "shrink-0 snap-start",
                   // peek: 端の余白 16px のとき、カード幅は導入前（全幅に置いた場合）と同じ「全幅 - 76px」
-                  x ? "w-[calc(100%-44px)]" : "w-full",
-                  M[v]
+                  v ? "w-[calc(100%-44px)]" : "w-full",
+                  W[b]
                 ),
-                children: r
+                children: e
               },
-              e
+              t
             ))
           }
         ),
-        C && t > 1 && /* @__PURE__ */ w(k, { children: [
-          /* @__PURE__ */ a(
+        I && r > 1 && /* @__PURE__ */ w(j, { children: [
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               onClick: A,
               "aria-label": "前へ",
               className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ a(O, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              children: /* @__PURE__ */ n(O, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
-              onClick: m,
+              onClick: x,
               "aria-label": "次へ",
               className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ a(R, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              children: /* @__PURE__ */ n(R, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           )
         ] }),
-        E && t > 1 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: p.map((r, e) => /* @__PURE__ */ a(
+        E && r > 1 && /* @__PURE__ */ n("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: p.map((e, t) => /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            onClick: () => d(e),
-            "aria-label": `スライド ${e + 1}`,
-            className: u(
+            onClick: () => d(t),
+            "aria-label": `スライド ${t + 1}`,
+            className: f(
               // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
               "size-2 shrink-0 rounded-full transition-colors",
-              e === n ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+              t === c ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
             )
           },
-          e
+          t
         )) })
       ]
     }
   );
 }
 export {
-  q as ContentCarousel
+  _ as ContentCarousel
 };

package/dist/index.js

@@ -16700,6 +16700,7 @@ export {
 //   /**
 //    * PC（@[960px]:）で同時に見せるカード数。SP は従来どおり1枚表示。
 //    * 求人カード等、EC 商品以外の複数カードを横スクロールさせる用途に使う。
+//    * 矢印（と autoPlay）は見えている枚数ずつ送る（PC で 4 枚表示なら 4 枚ずつ）。
 //    */
 //   itemsPerView?: ContentCarouselItemsPerView
 //   /** カルーセル全体の aria-label（スクリーンリーダー向け説明） */
@@ -16811,6 +16812,19 @@ export {
 //     [reduceMotion]
 //   )
 // 
+//   // 見えているスライドの枚数（矢印はこの枚数ずつ送る）。PC の複数枚表示では itemsPerView 枚、
+//   // SP・peek では 1 枚。幅の切り替えは container query なので、props ではなく実際の幅から求める
+//   const visibleCount = React.useCallback(() => {
+//     const container = scrollRef.current
+//     const first = container?.children[0] as HTMLElement | undefined
+//     const second = container?.children[1] as HTMLElement | undefined
+//     if (!container || !first || !second) return 1
+//     const stride = second.offsetLeft - first.offsetLeft
+//     if (stride <= 0) return 1
+//     const gap = stride - first.offsetWidth
+//     return Math.max(1, Math.floor((container.clientWidth + gap + 1) / stride))
+//   }, [])
+// 
 //   // 次へ。末尾までスクロールしきっていたら先頭に戻る。複数枚表示・peek では最後のスライドを先頭に
 //   // そろえられない（スクロール量が足りない）ため、現在位置が最後でなくても末尾で止まり続けないようにする
 //   const next = React.useCallback(() => {
@@ -16818,8 +16832,12 @@ export {
 //     const atEnd = container
 //       ? container.scrollLeft >= container.scrollWidth - container.clientWidth - 1
 //       : false
-//     scrollTo(activeIndex >= totalSlides - 1 || atEnd ? 0 : activeIndex + 1)
-//   }, [activeIndex, totalSlides, scrollTo])
+//     scrollTo(
+//       activeIndex >= totalSlides - 1 || atEnd
+//         ? 0
+//         : Math.min(activeIndex + visibleCount(), totalSlides - 1)
+//     )
+//   }, [activeIndex, totalSlides, scrollTo, visibleCount])
 // 
 //   // Auto play（reduced-motion のときは始めない。停止ボタンは持たないため、勝手に動かさないことで配慮する）
 //   React.useEffect(() => {
@@ -16829,7 +16847,7 @@ export {
 //   }, [autoPlay, totalSlides, reduceMotion, next])
 // 
 //   function prev() {
-//     scrollTo(activeIndex <= 0 ? totalSlides - 1 : activeIndex - 1)
+//     scrollTo(activeIndex <= 0 ? totalSlides - 1 : Math.max(0, activeIndex - visibleCount()))
 //   }
 // 
 //   if (totalSlides === 0) return null

package/dist/types/components/primitives/content-carousel.d.ts

@@ -32,6 +32,7 @@ export interface ContentCarouselProps extends Omit<React.HTMLAttributes<HTMLDivE
     /**
      * PC（@[960px]:）で同時に見せるカード数。SP は従来どおり1枚表示。
      * 求人カード等、EC 商品以外の複数カードを横スクロールさせる用途に使う。
+     * 矢印（と autoPlay）は見えている枚数ずつ送る（PC で 4 枚表示なら 4 枚ずつ）。
      */
     itemsPerView?: ContentCarouselItemsPerView;
     /** カルーセル全体の aria-label（スクリーンリーダー向け説明） */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",