fix(Carousel): remove gap and peek props, measure layout from DOM

gap and peek are styling concerns that break the headless contract.
Consumers now control these via CSS (gap, padding utilities) and
slide sizing (flex/width classes). The viewport measures actual
slide offsets from the DOM for scroll-snap math instead of
calculating from prop values.

Author: johnleider

apps/docs/src/examples/components/carousel/basic.vue

@@ -9,7 +9,7 @@
         <Carousel.Item
           v-for="i in 5"
           :key="i"
-          class="flex items-center justify-center h-48 rounded-lg text-lg font-medium bg-surface-variant text-on-surface-variant"
+          class="flex items-center justify-center h-48 rounded-lg text-lg font-medium bg-surface-variant text-on-surface-variant w-full shrink-0"
           :value="i"
         >
           Slide {{ i }}

apps/docs/src/examples/components/carousel/multi-slide.vue

@@ -12,12 +12,12 @@
 </script>
 
 <template>
-  <Carousel.Root circular :gap="12" :per-view="3">
-    <Carousel.Viewport class="rounded-lg">
+  <Carousel.Root circular :per-view="3">
+    <Carousel.Viewport class="rounded-lg gap-3">
       <Carousel.Item
         v-for="item in items"
         :key="item.id"
-        class="flex items-center justify-center h-32 rounded-lg text-sm font-medium bg-surface-variant text-on-surface-variant"
+        class="flex items-center justify-center h-32 rounded-lg text-sm font-medium bg-surface-variant text-on-surface-variant flex-[0_0_calc((100%-1.5rem)/3)]"
         :value="item.id"
       >
         {{ item.label }}

apps/docs/src/examples/components/carousel/peek.vue

@@ -10,12 +10,12 @@
 </script>
 
 <template>
-  <Carousel.Root :gap="16" :peek="48" :per-view="1">
-    <Carousel.Viewport class="rounded-lg">
+  <Carousel.Root :per-view="1">
+    <Carousel.Viewport class="rounded-lg gap-4 px-12">
       <Carousel.Item
         v-for="slide in slides"
         :key="slide.id"
-        class="flex items-center justify-center h-40 rounded-lg text-lg font-medium"
+        class="flex items-center justify-center h-40 rounded-lg text-lg font-medium flex-[0_0_100%]"
         :class="slide.color"
         :value="slide.id"
       >

packages/0/src/components/Carousel/CarouselItem.vue

@@ -103,18 +103,9 @@
     return index >= selected && index < selected + perView
   })
 
-  const slideStyle = toRef(() => {
-    const pv = carousel.perView.value
-    const g = carousel.gap.value
-    const p = carousel.peek.value
-    // Each slide width accounts for gaps between visible slides and peek on both sides
-    const gapTotal = (pv - 1) * g
-    const peekTotal = 2 * p
-    return {
-      'scroll-snap-align': 'start',
-      'flex': `0 0 calc((100% - ${gapTotal}px - ${peekTotal}px) / ${pv})`,
-    }
-  })
+  const slideStyle = {
+    'scroll-snap-align': 'start' as const,
+  }
 
   const slotProps = toRef((): CarouselItemSlotProps => ({
     id: String(ticket.id),
@@ -134,7 +125,7 @@
       'data-active': isActive.value || undefined,
       'data-disabled': isDisabled.value || undefined,
       'data-index': ticket.index,
-      'style': slideStyle.value,
+      'style': slideStyle,
     },
   }))
 </script>

packages/0/src/components/Carousel/CarouselRoot.vue

@@ -46,10 +46,6 @@
     orientation?: CarouselOrientation
     /** Number of slides visible at once */
     perView?: number
-    /** Gap between slides in pixels */
-    gap?: number
-    /** Amount of adjacent slide visible in pixels (peek) */
-    peek?: number
     /** Autoplay interval in milliseconds. 0 disables autoplay. */
     autoplay?: number
   }
@@ -91,10 +87,6 @@
     orientation: Ref<CarouselOrientation>
     /** Number of slides visible at once */
     perView: Ref<number>
-    /** Gap between slides in pixels */
-    gap: Ref<number>
-    /** Amount of adjacent slide visible in pixels */
-    peek: Ref<number>
     /** Whether navigation wraps around */
     circular: Ref<boolean>
     /** Root ID for generating sub-component IDs */
@@ -132,8 +124,6 @@
     circular = false,
     orientation = 'horizontal',
     perView = 1,
-    gap = 0,
-    peek = 0,
     autoplay = 0,
   } = defineProps<CarouselRootProps>()
 
@@ -193,8 +183,6 @@
     resume,
     orientation: toRef(() => orientation),
     perView: toRef(() => perView),
-    gap: toRef(() => gap),
-    peek: toRef(() => peek),
     circular: toRef(() => circular),
     rootId,
     viewportEl,

packages/0/src/components/Carousel/CarouselViewport.vue

@@ -84,14 +84,15 @@
 
   const { width } = useElementSize(el)
 
-  // Compute the width of a single slide step (slide width + gap)
+  // Measure actual slide step from DOM layout (slide width + gap)
   const slideStep = toRef(() => {
-    if (width.value === 0) return 0
-    const pv = carousel.perView.value
-    const g = carousel.gap.value
-    const p = carousel.peek.value
-    const slideWidth = (width.value - (pv - 1) * g - 2 * p) / pv
-    return slideWidth + g
+    const viewport = el.value
+    if (!viewport || width.value === 0) return 0
+    const first = viewport.children[0] as HTMLElement | undefined
+    const second = viewport.children[1] as HTMLElement | undefined
+    if (!first) return 0
+    if (!second) return first.offsetWidth
+    return second.offsetLeft - first.offsetLeft
   })
 
   // Scroll → Selection sync: when user scrolls (drag/swipe), update step selection
@@ -217,8 +218,6 @@
 
   const viewportStyle = toRef(() => {
     const isVertical = carousel.orientation.value === 'vertical'
-    const g = carousel.gap.value
-    const p = carousel.peek.value
 
     return {
       'display': 'flex',
@@ -229,8 +228,6 @@
       'scrollbar-width': 'none',
       'cursor': snapDisabled.value ? 'grabbing' : 'grab',
       ...(snapDisabled.value ? { 'user-select': 'none' } : {}),
-      ...(g > 0 ? { gap: `${g}px` } : {}),
-      ...(p > 0 ? { [isVertical ? 'padding-block' : 'padding-inline']: `${p}px` } : {}),
     } as Record<string, string | number>
   })
 

packages/0/src/components/Carousel/index.test.ts

@@ -620,15 +620,10 @@ describe('carousel', () => {
         expect(slideProps.attrs.style['scroll-snap-align']).toBe('start')
       })
 
-      it('should compute flex basis from perView and gap', async () => {
+      it('should not include flex basis (consumer controls sizing)', async () => {
         let slideProps: any
 
         mount(Carousel.Root, {
-          props: {
-            perView: 3,
-            gap: 16,
-            peek: 20,
-          },
           slots: {
             default: () =>
               h(Carousel.Item as any, { value: 'a' }, {
@@ -642,8 +637,7 @@ describe('carousel', () => {
 
         await nextTick()
 
-        // (perView - 1) * gap = 2 * 16 = 32, 2 * peek = 40
-        expect(slideProps.attrs.style.flex).toBe('0 0 calc((100% - 32px - 40px) / 3)')
+        expect(slideProps.attrs.style.flex).toBeUndefined()
       })
     })
   })