fix(Carousel): auto-mirror viewport padding to scroll-padding

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

@@ -20,7 +20,7 @@
 
   // Composables
   import { useDocumentEventListener, useEventListener } from '#v0/composables/useEventListener'
-  import { useElementSize } from '#v0/composables/useResizeObserver'
+  import { useElementSize, useResizeObserver } from '#v0/composables/useResizeObserver'
   import { useToggleScope } from '#v0/composables/useToggleScope'
 
   // Utilities
@@ -82,6 +82,31 @@
 
   const { width, height } = useElementSize(el)
 
+  // Mirror the viewport's consumer-set padding onto scroll-padding so CSS
+  // scroll-snap targets align with the visible offset. Without this, a
+  // consumer adding padding (e.g. for a peek layout) would desync programmatic
+  // scroll math from snap positions.
+  // See https://github.com/vuetifyjs/0/issues/200.
+  const scrollPaddingStart = shallowRef<string | undefined>()
+  const scrollPaddingEnd = shallowRef<string | undefined>()
+
+  function syncScrollPadding () {
+    const element = el.value
+    if (!element) {
+      scrollPaddingStart.value = undefined
+      scrollPaddingEnd.value = undefined
+      return
+    }
+    const cs = getComputedStyle(element)
+    const start = isVertical.value ? cs.paddingBlockStart : cs.paddingInlineStart
+    const end = isVertical.value ? cs.paddingBlockEnd : cs.paddingInlineEnd
+    scrollPaddingStart.value = start && start !== '0px' ? start : undefined
+    scrollPaddingEnd.value = end && end !== '0px' ? end : undefined
+  }
+
+  useResizeObserver(el, syncScrollPadding, { immediate: true })
+  watch(isVertical, syncScrollPadding)
+
   const slideStep = toRef(() => {
     if (!el.value) return 0
     if ((isVertical.value ? height.value : width.value) === 0) return 0
@@ -223,13 +248,17 @@
   })
 
   const viewportStyle = toRef(() => {
+    const axis = isVertical.value ? 'block' : 'inline'
+
     return {
       'display': 'flex',
       'flex-direction': isVertical.value ? 'column' : 'row',
       [isVertical.value ? 'overflow-y' : 'overflow-x']: 'auto',
       [isVertical.value ? 'overflow-x' : 'overflow-y']: 'hidden',
       'scroll-snap-type': snapDisabled.value ? 'none' : `${isVertical.value ? 'y' : 'x'} mandatory`,
       'scrollbar-width': 'none',
+      ...(scrollPaddingStart.value ? { [`scroll-padding-${axis}-start`]: scrollPaddingStart.value } : {}),
+      ...(scrollPaddingEnd.value ? { [`scroll-padding-${axis}-end`]: scrollPaddingEnd.value } : {}),
       ...(snapDisabled.value ? { 'user-select': 'none' } : {}),
     } as Record<string, string | number>
   })