base-ui-vue 0.1.0 → 0.3.0

package/src/scroll-area/root/ScrollAreaRoot.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { Coords, HiddenState, OverflowEdges, ScrollAreaRootContext, ScrollAreaRootState, Size } from './ScrollAreaRootContext'
+import { computed, onMounted, provide, ref, shallowRef, useAttrs } from 'vue'
+import { useCSPContext } from '../../csp-provider/CSPContext'
+import { contains } from '../../floating-ui-vue/utils/shadowDom'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { styleDisableScrollbar } from '../../utils/styles'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { SCROLL_TIMEOUT } from '../constants'
+import { ScrollAreaScrollbarDataAttributes } from '../scrollbar/ScrollAreaScrollbarDataAttributes'
+import { getOffset } from '../utils/getOffset'
+import { scrollAreaRootContextKey } from './ScrollAreaRootContext'
+import { ScrollAreaRootCssVars } from './ScrollAreaRootCssVars'
+import { scrollAreaStateAttributesMapping } from './stateAttributes'
+
+defineOptions({
+  name: 'ScrollAreaRoot',
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps<ScrollAreaRootProps>(), {
+  as: 'div',
+})
+const DEFAULT_SIZE: Size = { width: 0, height: 0 }
+const DEFAULT_OVERFLOW_EDGES: OverflowEdges = { xStart: false, xEnd: false, yStart: false, yEnd: false }
+const DEFAULT_HIDDEN_STATE: HiddenState = { x: true, y: true, corner: true }
+const DEFAULT_COORDS: Coords = { x: 0, y: 0 }
+
+export interface ScrollAreaRootProps extends BaseUIComponentProps<ScrollAreaRootState> {
+  overflowEdgeThreshold?:
+    | number
+    | Partial<{
+      xStart: number
+      xEnd: number
+      yStart: number
+      yEnd: number
+    }>
+}
+
+const attrs = useAttrs()
+
+const overflowEdgeThreshold = computed(() => normalizeOverflowEdgeThreshold(props.overflowEdgeThreshold))
+
+const rootId = useBaseUiId()
+const { nonce, disableStyleElements } = useCSPContext()
+
+const hovering = ref(false)
+const scrollingX = ref(false)
+const scrollingY = ref(false)
+const touchModality = ref(false)
+const hasMeasuredScrollbar = ref(false)
+const cornerSize = ref<Size>({ ...DEFAULT_SIZE })
+const thumbSize = ref<Size>({ ...DEFAULT_SIZE })
+const overflowEdges = ref<OverflowEdges>({ ...DEFAULT_OVERFLOW_EDGES })
+const hiddenState = ref<HiddenState>({ ...DEFAULT_HIDDEN_STATE })
+
+const rootRef = shallowRef<HTMLDivElement | null>(null)
+const viewportRef = shallowRef<HTMLDivElement | null>(null)
+const scrollbarYRef = shallowRef<HTMLDivElement | null>(null)
+const scrollbarXRef = shallowRef<HTMLDivElement | null>(null)
+const thumbYRef = shallowRef<HTMLDivElement | null>(null)
+const thumbXRef = shallowRef<HTMLDivElement | null>(null)
+const cornerRef = shallowRef<HTMLDivElement | null>(null)
+
+let scrollYTimeoutId: ReturnType<typeof setTimeout> | undefined
+let scrollXTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+// Pointer drag baselines are mutable so move events don't trigger Vue renders.
+const thumbDragging = { current: false }
+const startY = { current: 0 }
+const startX = { current: 0 }
+const startScrollTop = { current: 0 }
+const startScrollLeft = { current: 0 }
+const currentOrientation = { current: 'vertical' as 'vertical' | 'horizontal' }
+const scrollPosition = { current: { ...DEFAULT_COORDS } }
+
+function handleScroll(pos: Coords) {
+  const offsetX = pos.x - scrollPosition.current.x
+  const offsetY = pos.y - scrollPosition.current.y
+  scrollPosition.current = pos
+
+  if (offsetY !== 0) {
+    scrollingY.value = true
+    clearTimeout(scrollYTimeoutId)
+    scrollYTimeoutId = setTimeout(() => {
+      scrollingY.value = false
+    }, SCROLL_TIMEOUT)
+  }
+
+  if (offsetX !== 0) {
+    scrollingX.value = true
+    clearTimeout(scrollXTimeoutId)
+    scrollXTimeoutId = setTimeout(() => {
+      scrollingX.value = false
+    }, SCROLL_TIMEOUT)
+  }
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (event.button !== 0)
+    return
+
+  thumbDragging.current = true
+  startY.current = event.clientY
+  startX.current = event.clientX
+  currentOrientation.current = (event.currentTarget as Element).getAttribute(
+    ScrollAreaScrollbarDataAttributes.orientation,
+  ) as 'vertical' | 'horizontal'
+
+  if (viewportRef.value) {
+    startScrollTop.current = viewportRef.value.scrollTop
+    startScrollLeft.current = viewportRef.value.scrollLeft
+  }
+  if (thumbYRef.value && currentOrientation.current === 'vertical') {
+    thumbYRef.value.setPointerCapture(event.pointerId)
+  }
+  if (thumbXRef.value && currentOrientation.current === 'horizontal') {
+    thumbXRef.value.setPointerCapture(event.pointerId)
+  }
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!thumbDragging.current)
+    return
+
+  const deltaY = event.clientY - startY.current
+  const deltaX = event.clientX - startX.current
+
+  if (viewportRef.value) {
+    const scrollableContentHeight = viewportRef.value.scrollHeight
+    const viewportHeight = viewportRef.value.clientHeight
+    const scrollableContentWidth = viewportRef.value.scrollWidth
+    const viewportWidth = viewportRef.value.clientWidth
+
+    if (thumbYRef.value && scrollbarYRef.value && currentOrientation.current === 'vertical') {
+      const scrollbarYOffset = getOffset(scrollbarYRef.value, 'padding', 'y')
+      const thumbYOffset = getOffset(thumbYRef.value, 'margin', 'y')
+      const thumbHeight = thumbYRef.value.offsetHeight
+      const maxThumbOffsetY = scrollbarYRef.value.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset
+      const scrollRatioY = deltaY / maxThumbOffsetY
+      viewportRef.value.scrollTop = startScrollTop.current + scrollRatioY * (scrollableContentHeight - viewportHeight)
+      event.preventDefault()
+      scrollingY.value = true
+      clearTimeout(scrollYTimeoutId)
+      scrollYTimeoutId = setTimeout(() => {
+        scrollingY.value = false
+      }, SCROLL_TIMEOUT)
+    }
+
+    if (thumbXRef.value && scrollbarXRef.value && currentOrientation.current === 'horizontal') {
+      const scrollbarXOffset = getOffset(scrollbarXRef.value, 'padding', 'x')
+      const thumbXOffset = getOffset(thumbXRef.value, 'margin', 'x')
+      const thumbWidth = thumbXRef.value.offsetWidth
+      const maxThumbOffsetX = scrollbarXRef.value.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset
+      const scrollRatioX = deltaX / maxThumbOffsetX
+      viewportRef.value.scrollLeft = startScrollLeft.current + scrollRatioX * (scrollableContentWidth - viewportWidth)
+      event.preventDefault()
+      scrollingX.value = true
+      clearTimeout(scrollXTimeoutId)
+      scrollXTimeoutId = setTimeout(() => {
+        scrollingX.value = false
+      }, SCROLL_TIMEOUT)
+    }
+  }
+}
+
+function handlePointerUp(event: PointerEvent) {
+  thumbDragging.current = false
+  if (thumbYRef.value && currentOrientation.current === 'vertical') {
+    thumbYRef.value.releasePointerCapture(event.pointerId)
+  }
+  if (thumbXRef.value && currentOrientation.current === 'horizontal') {
+    thumbXRef.value.releasePointerCapture(event.pointerId)
+  }
+}
+
+function handleTouchModalityChange(event: PointerEvent) {
+  touchModality.value = event.pointerType === 'touch'
+}
+
+function handlePointerEnterOrMove(event: PointerEvent) {
+  handleTouchModalityChange(event)
+  if (event.pointerType !== 'touch') {
+    const isTargetRootChild = contains(rootRef.value, event.target as Element)
+    hovering.value = isTargetRootChild
+  }
+}
+
+const state = computed<ScrollAreaRootState>(() => ({
+  scrolling: scrollingX.value || scrollingY.value,
+  hasOverflowX: !hiddenState.value.x,
+  hasOverflowY: !hiddenState.value.y,
+  overflowXStart: overflowEdges.value.xStart,
+  overflowXEnd: overflowEdges.value.xEnd,
+  overflowYStart: overflowEdges.value.yStart,
+  overflowYEnd: overflowEdges.value.yEnd,
+  cornerHidden: hiddenState.value.corner,
+}))
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    role: 'presentation',
+    onPointerenter: handlePointerEnterOrMove,
+    onPointermove: handlePointerEnterOrMove,
+    onPointerdown: handleTouchModalityChange,
+    onPointerleave: () => { hovering.value = false },
+    style: {
+      position: 'relative',
+      [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.value.height}px`,
+      [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.value.width}px`,
+    },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: rootRef,
+})
+
+onMounted(() => {
+  styleDisableScrollbar.inject(nonce.value, disableStyleElements.value)
+})
+
+const contextValue: ScrollAreaRootContext = {
+  cornerSize,
+  setCornerSize: (size: Size) => { cornerSize.value = size },
+  thumbSize,
+  setThumbSize: (size: Size) => { thumbSize.value = size },
+  hasMeasuredScrollbar,
+  setHasMeasuredScrollbar: (value: boolean) => { hasMeasuredScrollbar.value = value },
+  touchModality,
+  hovering,
+  setHovering: (value: boolean) => { hovering.value = value },
+  scrollingX,
+  setScrollingX: (value: boolean) => { scrollingX.value = value },
+  scrollingY,
+  setScrollingY: (value: boolean) => { scrollingY.value = value },
+  viewportRef,
+  rootRef,
+  scrollbarYRef,
+  scrollbarXRef,
+  thumbYRef,
+  thumbXRef,
+  cornerRef,
+  handlePointerDown,
+  handlePointerMove,
+  handlePointerUp,
+  handleScroll,
+  rootId,
+  hiddenState,
+  setHiddenState: (s: HiddenState) => { hiddenState.value = s },
+  overflowEdges,
+  setOverflowEdges: (e: OverflowEdges) => { overflowEdges.value = e },
+  viewportState: state,
+  overflowEdgeThreshold,
+}
+
+provide(scrollAreaRootContextKey, contextValue)
+
+function normalizeOverflowEdgeThreshold(
+  threshold: ScrollAreaRootProps['overflowEdgeThreshold'],
+) {
+  if (typeof threshold === 'number') {
+    const value = Math.max(0, threshold)
+    return { xStart: value, xEnd: value, yStart: value, yEnd: value }
+  }
+  return {
+    xStart: Math.max(0, threshold?.xStart || 0),
+    xEnd: Math.max(0, threshold?.xEnd || 0),
+    yStart: Math.max(0, threshold?.yStart || 0),
+    yEnd: Math.max(0, threshold?.yEnd || 0),
+  }
+}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  >
+    <slot />
+  </component>
+</template>

package/src/scroll-area/root/ScrollAreaRootContext.ts

@@ -0,0 +1,89 @@
+import type { ComputedRef, InjectionKey, Ref, ShallowRef } from 'vue'
+import { inject } from 'vue'
+
+export interface Coords {
+  x: number
+  y: number
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface HiddenState {
+  x: boolean
+  y: boolean
+  corner: boolean
+}
+
+export interface OverflowEdges {
+  xStart: boolean
+  xEnd: boolean
+  yStart: boolean
+  yEnd: boolean
+}
+
+export interface ScrollAreaRootContext {
+  cornerSize: Ref<Size>
+  setCornerSize: (size: Size) => void
+  thumbSize: Ref<Size>
+  setThumbSize: (size: Size) => void
+  hasMeasuredScrollbar: Ref<boolean>
+  setHasMeasuredScrollbar: (value: boolean) => void
+  touchModality: Ref<boolean>
+  hovering: Ref<boolean>
+  setHovering: (value: boolean) => void
+  scrollingX: Ref<boolean>
+  setScrollingX: (value: boolean) => void
+  scrollingY: Ref<boolean>
+  setScrollingY: (value: boolean) => void
+  viewportRef: ShallowRef<HTMLDivElement | null>
+  rootRef: ShallowRef<HTMLDivElement | null>
+  scrollbarYRef: ShallowRef<HTMLDivElement | null>
+  scrollbarXRef: ShallowRef<HTMLDivElement | null>
+  thumbYRef: ShallowRef<HTMLDivElement | null>
+  thumbXRef: ShallowRef<HTMLDivElement | null>
+  cornerRef: ShallowRef<HTMLDivElement | null>
+  handlePointerDown: (event: PointerEvent) => void
+  handlePointerMove: (event: PointerEvent) => void
+  handlePointerUp: (event: PointerEvent) => void
+  handleScroll: (scrollPosition: Coords) => void
+  rootId: string | undefined
+  hiddenState: Ref<HiddenState>
+  setHiddenState: (state: HiddenState) => void
+  overflowEdges: Ref<OverflowEdges>
+  setOverflowEdges: (edges: OverflowEdges) => void
+  viewportState: ComputedRef<ScrollAreaRootState>
+  overflowEdgeThreshold: ComputedRef<{
+    xStart: number
+    xEnd: number
+    yStart: number
+    yEnd: number
+  }>
+}
+
+export interface ScrollAreaRootState {
+  scrolling: boolean
+  hasOverflowX: boolean
+  hasOverflowY: boolean
+  overflowXStart: boolean
+  overflowXEnd: boolean
+  overflowYStart: boolean
+  overflowYEnd: boolean
+  cornerHidden: boolean
+}
+
+export const scrollAreaRootContextKey = Symbol(
+  'ScrollAreaRootContext',
+) as InjectionKey<ScrollAreaRootContext>
+
+export function useScrollAreaRootContext(): ScrollAreaRootContext {
+  const context = inject(scrollAreaRootContextKey)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollAreaRoot>.',
+    )
+  }
+  return context
+}

package/src/scroll-area/root/ScrollAreaRootCssVars.ts

@@ -0,0 +1,4 @@
+export enum ScrollAreaRootCssVars {
+  scrollAreaCornerHeight = '--scroll-area-corner-height',
+  scrollAreaCornerWidth = '--scroll-area-corner-width',
+}

package/src/scroll-area/root/ScrollAreaRootDataAttributes.ts

@@ -0,0 +1,9 @@
+export enum ScrollAreaRootDataAttributes {
+  scrolling = 'data-scrolling',
+  hasOverflowX = 'data-has-overflow-x',
+  hasOverflowY = 'data-has-overflow-y',
+  overflowXStart = 'data-overflow-x-start',
+  overflowXEnd = 'data-overflow-x-end',
+  overflowYStart = 'data-overflow-y-start',
+  overflowYEnd = 'data-overflow-y-end',
+}

package/src/scroll-area/root/stateAttributes.ts

@@ -0,0 +1,14 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { ScrollAreaRootState } from './ScrollAreaRootContext'
+import { ScrollAreaRootDataAttributes } from './ScrollAreaRootDataAttributes'
+
+export const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState> = {
+  scrolling: value => (value ? { [ScrollAreaRootDataAttributes.scrolling]: '' } : null),
+  hasOverflowX: value => (value ? { [ScrollAreaRootDataAttributes.hasOverflowX]: '' } : null),
+  hasOverflowY: value => (value ? { [ScrollAreaRootDataAttributes.hasOverflowY]: '' } : null),
+  overflowXStart: value => (value ? { [ScrollAreaRootDataAttributes.overflowXStart]: '' } : null),
+  overflowXEnd: value => (value ? { [ScrollAreaRootDataAttributes.overflowXEnd]: '' } : null),
+  overflowYStart: value => (value ? { [ScrollAreaRootDataAttributes.overflowYStart]: '' } : null),
+  overflowYEnd: value => (value ? { [ScrollAreaRootDataAttributes.overflowYEnd]: '' } : null),
+  cornerHidden: () => null,
+}

package/src/scroll-area/scrollbar/ScrollAreaScrollbar.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ScrollAreaRootState } from '../root/ScrollAreaRootContext'
+import { computed, onBeforeUnmount, provide, shallowRef, useAttrs, watch } from 'vue'
+import { useDirection } from '../../direction-provider/DirectionContext'
+import { contains, getTarget } from '../../floating-ui-vue/utils/shadowDom'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { ScrollAreaRootCssVars } from '../root/ScrollAreaRootCssVars'
+import { scrollAreaStateAttributesMapping } from '../root/stateAttributes'
+import { getOffset } from '../utils/getOffset'
+import { scrollAreaScrollbarContextKey } from './ScrollAreaScrollbarContext'
+import { ScrollAreaScrollbarCssVars } from './ScrollAreaScrollbarCssVars'
+
+export interface ScrollAreaScrollbarState extends ScrollAreaRootState {
+  hovering: boolean
+  scrolling: boolean
+  orientation: 'vertical' | 'horizontal'
+}
+
+export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<ScrollAreaScrollbarState> {
+  orientation?: 'vertical' | 'horizontal'
+  keepMounted?: boolean
+}
+
+defineOptions({
+  name: 'ScrollAreaScrollbar',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+  as: 'div',
+  orientation: 'vertical',
+  keepMounted: false,
+})
+
+const attrs = useAttrs()
+
+const {
+  hovering,
+  scrollingX,
+  scrollingY,
+  hiddenState,
+  overflowEdges,
+  scrollbarYRef,
+  scrollbarXRef,
+  viewportRef,
+  thumbYRef,
+  thumbXRef,
+  handlePointerDown,
+  handlePointerUp,
+  rootId,
+  thumbSize,
+  hasMeasuredScrollbar,
+} = useScrollAreaRootContext()
+
+const direction = useDirection()
+
+let wheelCleanup: (() => void) | undefined
+const scrollbarElementRef = shallowRef<HTMLDivElement | null>(null)
+
+watch(
+  [scrollbarElementRef, () => props.orientation],
+  ([element, orientation], [previousElement, previousOrientation]) => {
+    if (previousElement) {
+      const previousRef = previousOrientation === 'vertical' ? scrollbarYRef : scrollbarXRef
+
+      if (previousRef.value === previousElement) {
+        previousRef.value = null
+      }
+    }
+
+    if (!element) {
+      return
+    }
+
+    const nextRef = orientation === 'vertical' ? scrollbarYRef : scrollbarXRef
+    nextRef.value = element
+  },
+)
+
+watch(
+  [scrollbarElementRef, viewportRef, () => props.orientation],
+  () => {
+    wheelCleanup?.()
+    wheelCleanup = setupWheelHandler()
+  },
+  { flush: 'post' },
+)
+
+onBeforeUnmount(() => {
+  wheelCleanup?.()
+})
+
+function setupWheelHandler() {
+  const viewportEl = viewportRef.value
+  const scrollbarEl = scrollbarElementRef.value
+
+  if (!scrollbarEl)
+    return undefined
+
+  function handleWheel(event: WheelEvent) {
+    if (!viewportEl || !scrollbarEl || event.ctrlKey)
+      return
+
+    if (props.orientation === 'vertical') {
+      if (viewportEl.scrollTop === 0 && event.deltaY < 0)
+        return
+      if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0)
+        return
+      event.preventDefault()
+      viewportEl.scrollTop += event.deltaY
+    }
+    else {
+      if (viewportEl.scrollLeft === 0 && event.deltaX < 0)
+        return
+      if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0)
+        return
+      event.preventDefault()
+      viewportEl.scrollLeft += event.deltaX
+    }
+  }
+
+  scrollbarEl.addEventListener('wheel', handleWheel, { passive: false })
+  return () => scrollbarEl.removeEventListener('wheel', handleWheel)
+}
+
+function setScrollbarElement(element: Element | ComponentPublicInstance | null) {
+  scrollbarElementRef.value = element as HTMLDivElement | null
+}
+
+const state = computed<ScrollAreaScrollbarState>(() => ({
+  hovering: hovering.value,
+  scrolling: props.orientation === 'horizontal' ? scrollingX.value : scrollingY.value,
+  orientation: props.orientation,
+  hasOverflowX: !hiddenState.value.x,
+  hasOverflowY: !hiddenState.value.y,
+  overflowXStart: overflowEdges.value.xStart,
+  overflowXEnd: overflowEdges.value.xEnd,
+  overflowYStart: overflowEdges.value.yStart,
+  overflowYEnd: overflowEdges.value.yEnd,
+  cornerHidden: hiddenState.value.corner,
+}))
+
+const hideTrackUntilMeasured = computed(() => !hasMeasuredScrollbar.value && !props.keepMounted)
+
+function onPointerDown(event: PointerEvent) {
+  if (event.button !== 0)
+    return
+
+  const target = getTarget(event) as Element | null
+  const thumb = props.orientation === 'vertical' ? thumbYRef.value : thumbXRef.value
+
+  if (thumb && contains(thumb, target))
+    return
+  if (!viewportRef.value)
+    return
+
+  if (thumbYRef.value && scrollbarYRef.value && props.orientation === 'vertical') {
+    const thumbYOffset = getOffset(thumbYRef.value, 'margin', 'y')
+    const scrollbarYOffset = getOffset(scrollbarYRef.value, 'padding', 'y')
+    const thumbHeight = thumbYRef.value.offsetHeight
+    const trackRectY = scrollbarYRef.value.getBoundingClientRect()
+    const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2
+    const scrollableContentHeight = viewportRef.value.scrollHeight
+    const viewportHeight = viewportRef.value.clientHeight
+    const maxThumbOffsetY = scrollbarYRef.value.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset
+    const scrollRatioY = clickY / maxThumbOffsetY
+    viewportRef.value.scrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight)
+  }
+
+  if (thumbXRef.value && scrollbarXRef.value && props.orientation === 'horizontal') {
+    const thumbXOffset = getOffset(thumbXRef.value, 'margin', 'x')
+    const scrollbarXOffset = getOffset(scrollbarXRef.value, 'padding', 'x')
+    const thumbWidth = thumbXRef.value.offsetWidth
+    const trackRectX = scrollbarXRef.value.getBoundingClientRect()
+    const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2
+    const scrollableContentWidth = viewportRef.value.scrollWidth
+    const viewportWidth = viewportRef.value.clientWidth
+    const maxThumbOffsetX = scrollbarXRef.value.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset
+    const scrollRatioX = clickX / maxThumbOffsetX
+
+    let newScrollLeft: number
+    if (direction.value === 'rtl') {
+      newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth)
+      if (viewportRef.value.scrollLeft <= 0) {
+        newScrollLeft = -newScrollLeft
+      }
+    }
+    else {
+      newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth)
+    }
+    viewportRef.value.scrollLeft = newScrollLeft
+  }
+
+  handlePointerDown(event)
+}
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    ...(rootId ? { 'data-id': `${rootId}-scrollbar` } : {}),
+    onPointerdown: onPointerDown,
+    onPointerup: handlePointerUp,
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+      visibility: hideTrackUntilMeasured.value ? 'hidden' : undefined,
+      ...(props.orientation === 'vertical' && {
+        top: 0,
+        bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        insetInlineEnd: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.value.height}px`,
+      }),
+      ...(props.orientation === 'horizontal' && {
+        insetInlineStart: 0,
+        insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        bottom: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.value.width}px`,
+      }),
+    },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: setScrollbarElement,
+})
+
+const isHidden = computed(() => props.orientation === 'vertical' ? hiddenState.value.y : hiddenState.value.x)
+const shouldRender = computed(() => props.keepMounted || !isHidden.value)
+
+const orientation = computed(() => props.orientation)
+
+provide(scrollAreaScrollbarContextKey, { orientation })
+</script>
+
+<template>
+  <template v-if="shouldRender">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component
+      :is="tag"
+      v-else
+      :ref="renderRef"
+      v-bind="mergedProps"
+    >
+      <slot />
+    </component>
+  </template>
+</template>

package/src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+import { inject } from 'vue'
+
+export interface ScrollAreaScrollbarContext {
+  orientation: ComputedRef<'horizontal' | 'vertical'>
+}
+
+export const scrollAreaScrollbarContextKey: InjectionKey<ScrollAreaScrollbarContext> = Symbol(
+  'ScrollAreaScrollbarContext',
+)
+
+export function useScrollAreaScrollbarContext(): ScrollAreaScrollbarContext {
+  const context = inject(scrollAreaScrollbarContextKey)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: ScrollAreaScrollbarContext is missing. ScrollArea.Thumb must be placed within <ScrollAreaScrollbar>.',
+    )
+  }
+  return context
+}