@charcoal-ui/react 6.0.0-rc.4 → 6.0.0-rc.6

package/src/components/Carousel/__snapshots__/index.css.snap

@@ -12,10 +12,19 @@
   position: relative;
 }
 
+/* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと
+     hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */
+
+.charcoal-carousel__viewport[data-focus-visible] {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。
+   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */
+
 .charcoal-carousel__scroller {
   position: relative;
   display: flex;
-  gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -28,14 +37,6 @@
   display: none;
 }
 
-.charcoal-carousel__scroller[data-focus-visible] {
-  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-}
-
-.charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {
-  gap: 0;
-}
-
 /* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
    align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。
    未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */
@@ -52,38 +53,39 @@
   scroll-snap-type: x mandatory;
 }
 
-/* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色（白）へ
-   フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを
-   ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */
+/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を
+   問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。
+   左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して
+   スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。
+   無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い
+   mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */
 
-.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__viewport::before, .charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__viewport::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 72px;
-  pointer-events: none;
-  opacity: 0;
-  transition: 0.2s opacity;
-  z-index: 1;
+.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {
+  mask-image: linear-gradient(to right, transparent, #000 72px),
+    linear-gradient(to left, transparent, #000 72px);
+  /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */
+  mask-size: calc(100% + 72px) 100%;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+  mask-position: -72px 0,
+    0 0;
+  /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */
+  transition: 0.2s ease-in mask-position;
 }
 
-.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__viewport::before {
-  left: 0;
-  background: linear-gradient(to right, #fff, transparent);
+.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'] .charcoal-carousel__scroller {
+  mask-position: 0 0,
+    0 0;
 }
 
-.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__viewport::after {
-  right: 0;
-  background: linear-gradient(to left, #fff, transparent);
+.charcoal-carousel[data-has-gradient='true'][data-can-next='true'] .charcoal-carousel__scroller {
+  mask-position: -72px 0,
+    -72px 0;
 }
 
-.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'] .charcoal-carousel__viewport::before {
-  opacity: 1;
-}
-
-.charcoal-carousel[data-has-gradient='true'][data-can-next='true'] .charcoal-carousel__viewport::after {
-  opacity: 1;
+.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true'] .charcoal-carousel__scroller {
+  mask-position: 0 0,
+    -72px 0;
 }
 
 .charcoal-carousel__item {
@@ -108,7 +110,7 @@
 
 /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
 
-/* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
+/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
 
 .charcoal-carousel__navigation {
   position: absolute;
@@ -117,8 +119,8 @@
   display: grid;
   grid-template-columns: 72px 1fr 72px;
   align-items: center;
-  /* 白フェード（z-index: 1）より上にボタンを表示する */
-  z-index: 2;
+  /* アイテム内のコンテンツより上にボタンを表示する */
+  z-index: 1;
   /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
   opacity: 0;
   transition: 0.4s opacity;
@@ -128,9 +130,11 @@
   display: none;
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 
-.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
@@ -138,16 +142,36 @@
   pointer-events: auto;
 }
 
+/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+
+.charcoal-carousel__navigation__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 72px;
+}
+
 .charcoal-carousel__navigation__item[data-direction='prev'] {
   grid-column: 1;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='prev']::after {
+  left: 0;
+}
+
 .charcoal-carousel__navigation__item[data-direction='next'] {
   grid-column: 3;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='next']::after {
+  right: 0;
+}
+
 /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
    高い詳細度で打ち消すため、ルートを前置する。 */
 

package/src/components/Carousel/index.browser.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * ナビゲーションボタンのヒットエリア検証（実ブラウザ）
+ *
+ * hasGradient の 72px フェード帯はページ送り操作の領域に見えるが、
+ * クリック可能域が中央の 32px 円形ボタンだけだと、帯の残り部分の
+ * クリックが背後のスライド（リンク等）に素通りしてしまう。
+ * 帯全体がナビゲーションボタンのヒットエリアであることを
+ * document.elementFromPoint のヒットテストで検証する。
+ * （pointer-events / 擬似要素のヒットテストは jsdom では再現できない）
+ */
+import { userEvent } from '@vitest/browser/context'
+import { render } from '@testing-library/react'
+import Carousel from '.'
+
+const EDGE_ZONE_WIDTH = 72
+
+const slides = Array.from({ length: 10 }, (_, i) => (
+  <div key={`slide-${i}`} style={{ width: 200, height: 160 }}>
+    Slide {i}
+  </div>
+))
+
+function renderCarousel() {
+  const { container } = render(
+    <div style={{ width: 400 }}>
+      <Carousel size="M" hasGradient>
+        {slides}
+      </Carousel>
+    </div>,
+  )
+  const viewport = container.querySelector(
+    '.charcoal-carousel__viewport',
+  ) as HTMLElement
+  return { container, viewport, rect: viewport.getBoundingClientRect() }
+}
+
+function hitNavigationItem(x: number, y: number) {
+  return document
+    .elementFromPoint(x, y)
+    ?.closest('.charcoal-carousel__navigation__item')
+}
+
+describe('navigation button hit area', () => {
+  it('右端 72px 帯のクリックはスライドではなく next ボタンに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    // ボタン円（32px、帯の中央）の外側かつ帯の内側の点
+    const nearEdge = hitNavigationItem(rect.right - 8, centerY)
+    expect(nearEdge?.getAttribute('data-direction')).toBe('next')
+
+    // ボタンの上下方向の外側（帯の上端付近）
+    const aboveButton = hitNavigationItem(
+      rect.right - EDGE_ZONE_WIDTH / 2,
+      rect.top + 8,
+    )
+    expect(aboveButton?.getAttribute('data-direction')).toBe('next')
+  })
+
+  it('スクロール不能な側（初期位置の prev）の帯はスライドへ素通りする', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + 8, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+
+  it('帯のボタン外の点をクリックすると next へページ送りされる', async () => {
+    const { container, viewport, rect } = renderCarousel()
+    const scroller = container.querySelector(
+      '.charcoal-carousel__scroller',
+    ) as HTMLElement
+    expect(scroller.scrollLeft).toBe(0)
+
+    // trusted click とその後の scroll イベントは React の act() 管理外で
+    // 発火するため、この区間だけ act 警告を無効化する。
+    const g = globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    g.IS_REACT_ACT_ENVIRONMENT = false
+    try {
+      // viewport 左上基準・帯の内側かつボタン円の外側の座標を実クリックする
+      await userEvent.click(viewport, {
+        position: { x: rect.width - 8, y: 8 },
+      })
+
+      await vi.waitFor(() => {
+        expect(scroller.scrollLeft).toBeGreaterThan(0)
+      })
+    } finally {
+      g.IS_REACT_ACT_ENVIRONMENT = true
+    }
+  })
+
+  it('帯の外側（中央領域）のクリックはスライドに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+})

package/src/components/Carousel/index.css

@@ -10,12 +10,19 @@
 
 .charcoal-carousel__viewport {
   position: relative;
+
+  /* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと
+     hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */
+  &[data-focus-visible] {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 }
 
+/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。
+   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */
 .charcoal-carousel__scroller {
   position: relative;
   display: flex;
-  gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -26,14 +33,6 @@
   &::-webkit-scrollbar {
     display: none;
   }
-
-  &[data-focus-visible] {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-}
-
-.charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {
-  gap: 0;
 }
 
 /* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
@@ -53,44 +52,46 @@
   scroll-snap-type: x mandatory;
 }
 
-/* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色（白）へ
-   フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを
-   ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::before,
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 72px;
-  pointer-events: none;
-  opacity: 0;
-  transition: 0.2s opacity;
-  z-index: 1;
-}
-
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::before {
-  left: 0;
-  background: linear-gradient(to right, #fff, transparent);
-}
-
-.charcoal-carousel[data-has-gradient='true']
-  .charcoal-carousel__viewport::after {
-  right: 0;
-  background: linear-gradient(to left, #fff, transparent);
+/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を
+   問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。
+   左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して
+   スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。
+   無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い
+   mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */
+.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {
+  mask-image:
+    linear-gradient(to right, transparent, #000 72px),
+    linear-gradient(to left, transparent, #000 72px);
+  /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */
+  mask-size: calc(100% + 72px) 100%;
+  mask-repeat: no-repeat;
+  mask-composite: intersect;
+  mask-position:
+    -72px 0,
+    0 0;
+  /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */
+  transition: 0.2s ease-in mask-position;
 }
 
 .charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
-  .charcoal-carousel__viewport::before {
-  opacity: 1;
+  .charcoal-carousel__scroller {
+  mask-position:
+    0 0,
+    0 0;
 }
 
 .charcoal-carousel[data-has-gradient='true'][data-can-next='true']
-  .charcoal-carousel__viewport::after {
-  opacity: 1;
+  .charcoal-carousel__scroller {
+  mask-position:
+    -72px 0,
+    -72px 0;
+}
+
+.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']
+  .charcoal-carousel__scroller {
+  mask-position:
+    0 0,
+    -72px 0;
 }
 
 .charcoal-carousel__item {
@@ -114,7 +115,7 @@
 
 /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
 
-/* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
+/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
 .charcoal-carousel__navigation {
   position: absolute;
   inset: 0;
@@ -122,8 +123,8 @@
   display: grid;
   grid-template-columns: 72px 1fr 72px;
   align-items: center;
-  /* 白フェード（z-index: 1）より上にボタンを表示する */
-  z-index: 2;
+  /* アイテム内のコンテンツより上にボタンを表示する */
+  z-index: 1;
   /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
   opacity: 0;
   transition: 0.4s opacity;
@@ -133,23 +134,44 @@
   }
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 .charcoal-carousel:hover .charcoal-carousel__navigation,
-.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
 .charcoal-carousel__navigation__item {
   pointer-events: auto;
 
+  /* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 72px;
+  }
+
   &[data-direction='prev'] {
     grid-column: 1;
     justify-self: center;
+
+    &::after {
+      left: 0;
+    }
   }
 
   &[data-direction='next'] {
     grid-column: 3;
     justify-self: center;
+
+    &::after {
+      right: 0;
+    }
   }
 }
 

package/src/components/Carousel/index.story.tsx

@@ -1,45 +1,52 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
-import Carousel, { type CarouselItem } from '.'
-
-const sampleImage = (
-  <img
-    src="/carousel-sample.png"
-    alt="サンプル画像"
-    style={{
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-      display: 'block',
-    }}
-  />
-)
-
-const items: CarouselItem[] = Array.from({ length: 6 }, (_, i) => ({
-  id: `item-${i + 1}`,
-  children: sampleImage,
-}))
-
-// 横幅が確定したスロット（defaultScroll の初期位置計算と 0.75 ページ送りを確認するため）
-const numberedItems: CarouselItem[] = Array.from({ length: 20 }, (_, i) => ({
-  id: `num-${i + 1}`,
-  children: (
-    <div
+import type { CSSProperties } from 'react'
+import Carousel from '.'
+
+const makeSampleImages = (style: CSSProperties) =>
+  Array.from({ length: 6 }, (_, i) => (
+    <img
+      key={`item-${i + 1}`}
+      src="/carousel-sample.png"
+      alt="サンプル画像"
       style={{
-        width: 200,
-        height: 120,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: i % 2 === 0 ? '#cfe3ff' : '#ffe3cf',
-        borderRadius: 8,
-        font: 'bold 32px sans-serif',
-        color: '#333',
+        objectFit: 'cover',
+        display: 'block',
+        ...style,
       }}
-    >
-      {i + 1}
-    </div>
-  ),
-}))
+    />
+  ))
+
+// M 用: スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
+// width: 100% と margin の併用はラッパーとの循環サイズ解決で間隔が潰れるため、明示サイズにする。
+const spacedImages = makeSampleImages({
+  width: 280,
+  height: 210,
+  marginInlineEnd: 24,
+})
+// S 用: 1 枚全幅ページングのため間隔なし
+const fullWidthImages = makeSampleImages({ width: '100%', height: '100%' })
+
+// 横幅が確定したスロット（defaultScroll の初期位置計算と 0.75 ページ送りを確認するため）。
+// スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
+const numberedSlides = Array.from({ length: 20 }, (_, i) => (
+  <div
+    key={`num-${i + 1}`}
+    style={{
+      width: 200,
+      height: 120,
+      marginInlineEnd: 24,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: i % 2 === 0 ? '#cfe3ff' : '#ffe3cf',
+      borderRadius: 8,
+      font: 'bold 32px sans-serif',
+      color: '#333',
+    }}
+  >
+    {i + 1}
+  </div>
+))
 
 export default {
   title: 'react/Carousel',
@@ -48,13 +55,14 @@ export default {
     layout: 'padded',
   },
   args: {
-    items,
+    children: spacedImages,
     size: 'M',
     hasGradient: false,
     fullWidth: false,
     scrollStep: 0.75,
   },
   argTypes: {
+    children: { control: false },
     size: {
       control: { type: 'radio' },
       options: ['S', 'M'],
@@ -80,7 +88,7 @@ export const SizeM: StoryObj<typeof Carousel> = {
 }
 
 export const SizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S' },
+  args: { size: 'S', children: fullWidthImages },
 }
 
 export const WithGradient: StoryObj<typeof Carousel> = {
@@ -92,7 +100,7 @@ export const FullWidth: StoryObj<typeof Carousel> = {
 }
 
 export const NavigationButtonsOnSizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S', navigationButtons: true },
+  args: { size: 'S', navigationButtons: true, children: fullWidthImages },
 }
 
 export const IndicatorOnSizeM: StoryObj<typeof Carousel> = {
@@ -101,42 +109,53 @@ export const IndicatorOnSizeM: StoryObj<typeof Carousel> = {
 
 // 横幅が確定したスロット（番号付き）
 export const DefaultScrollCenter: StoryObj<typeof Carousel> = {
-  args: { size: 'M', items: numberedItems, defaultScroll: { align: 'center' } },
+  args: {
+    size: 'M',
+    children: numberedSlides,
+    defaultScroll: { align: 'center' },
+  },
 }
 
 export const DefaultScrollRight: StoryObj<typeof Carousel> = {
-  args: { size: 'M', items: numberedItems, defaultScroll: { align: 'right' } },
+  args: {
+    size: 'M',
+    children: numberedSlides,
+    defaultScroll: { align: 'right' },
+  },
 }
 
 // 遅延読み込み画像（マウント時に幅が未確定）でも初期位置が効くことの確認
 export const DefaultScrollCenterAsyncImages: StoryObj<typeof Carousel> = {
-  args: { size: 'M', items, defaultScroll: { align: 'center' } },
+  args: {
+    size: 'M',
+    children: spacedImages,
+    defaultScroll: { align: 'center' },
+  },
 }
 
 // 白フェードが見えることの確認用（暗色コンテンツなら白フェードが明確に出る）
-const darkTiles: CarouselItem[] = Array.from({ length: 10 }, (_, i) => ({
-  id: `dark-${i + 1}`,
-  children: (
-    <div
-      style={{
-        width: 220,
-        height: 140,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: '#2a3b8f',
-        color: '#fff',
-        borderRadius: 4,
-        font: 'bold 28px sans-serif',
-      }}
-    >
-      {i + 1}
-    </div>
-  ),
-}))
+const darkTiles = Array.from({ length: 10 }, (_, i) => (
+  <div
+    key={`dark-${i + 1}`}
+    style={{
+      width: 220,
+      height: 140,
+      marginInlineEnd: 24,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#2a3b8f',
+      color: '#fff',
+      borderRadius: 4,
+      font: 'bold 28px sans-serif',
+    }}
+  >
+    {i + 1}
+  </div>
+))
 
 export const GradientOnDarkContent: StoryObj<typeof Carousel> = {
-  args: { size: 'M', hasGradient: true, items: darkTiles },
+  args: { size: 'M', hasGradient: true, children: darkTiles },
 }
 
 // scrollStep に関数を渡してフル制御する例（送り量を clientWidth - 48px に固定）。
@@ -144,7 +163,7 @@ export const GradientOnDarkContent: StoryObj<typeof Carousel> = {
 export const ScrollStepFunction: StoryObj<typeof Carousel> = {
   args: {
     size: 'M',
-    items: numberedItems,
+    children: numberedSlides,
     scrollStep: ({ clientWidth }) => clientWidth - 48,
   },
 }
@@ -153,7 +172,7 @@ export const ScrollStepFunction: StoryObj<typeof Carousel> = {
 export const ScrollSnapPerItem: StoryObj<typeof Carousel> = {
   args: {
     size: 'M',
-    items: numberedItems,
+    children: numberedSlides,
     scrollSnap: { type: 'mandatory', align: 'start' },
   },
 }