base-ui-vue 0.2.0 → 0.4.0

package/src/progress/value/ProgressValue.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressValueState extends ProgressRootState {}
+export interface ProgressValueProps extends BaseUIComponentProps<ProgressValueState> {}
+
+export interface ProgressValueSlotProps {
+  /**
+   * Formatted value. `"indeterminate"` when the root value is `null`.
+   */
+  formattedValue: string | 'indeterminate'
+  /**
+   * Raw numeric value, or `null` when indeterminate.
+   */
+  value: number | null
+}
+
+export interface ProgressValueRenderlessSlotProps extends ProgressValueSlotProps {
+  props: Record<string, unknown>
+  state: ProgressValueState
+}
+
+/**
+ * A text label displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressValue',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressValueProps>(), {
+  as: 'span',
+})
+
+defineSlots<{
+  default?: (props: ProgressValueSlotProps | ProgressValueRenderlessSlotProps) => unknown
+}>()
+
+const attrs = useAttrs()
+const { value, formattedValue, state } = useProgressRootContext()
+
+const slotFormattedValue = computed<string | 'indeterminate'>(() =>
+  value.value == null ? 'indeterminate' : formattedValue.value,
+)
+
+const defaultDisplay = computed(() =>
+  value.value == null ? '' : formattedValue.value,
+)
+
+const valueProps = computed(() => ({
+  'aria-hidden': true,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: valueProps,
+  defaultTagName: 'span',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot
+    v-if="renderless"
+    :props="mergedProps"
+    :state="state"
+    :formatted-value="slotFormattedValue"
+    :value="value"
+  />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot
+      :formatted-value="slotFormattedValue"
+      :value="value"
+    >
+      {{ defaultDisplay }}
+    </slot>
+  </component>
+</template>

package/src/scroll-area/constants.ts

@@ -0,0 +1,2 @@
+export const SCROLL_TIMEOUT = 500
+export const MIN_THUMB_SIZE = 16

package/src/scroll-area/content/ScrollAreaContent.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ScrollAreaRootState } from '../root/ScrollAreaRootContext'
+import { computed, onBeforeUnmount, onMounted, shallowRef, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { scrollAreaStateAttributesMapping } from '../root/stateAttributes'
+import { useScrollAreaViewportContext } from '../viewport/ScrollAreaViewportContext'
+
+export type ScrollAreaContentState = ScrollAreaRootState
+
+export interface ScrollAreaContentProps extends BaseUIComponentProps<ScrollAreaContentState> {}
+
+defineOptions({
+  name: 'ScrollAreaContent',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaContentProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const contentWrapperRef = shallowRef<HTMLDivElement | null>(null)
+const { computeThumbPosition } = useScrollAreaViewportContext()
+const { viewportState } = useScrollAreaRootContext()
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  if (typeof ResizeObserver === 'undefined')
+    return
+
+  let hasInitialized = false
+  resizeObserver = new ResizeObserver(() => {
+    if (!hasInitialized) {
+      hasInitialized = true
+      return
+    }
+    computeThumbPosition()
+  })
+
+  if (contentWrapperRef.value) {
+    resizeObserver.observe(contentWrapperRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    role: 'presentation',
+    style: { minWidth: 'fit-content' },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: viewportState,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: contentWrapperRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="viewportState" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  >
+    <slot />
+  </component>
+</template>

package/src/scroll-area/corner/ScrollAreaCorner.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+
+export interface ScrollAreaCornerState {}
+
+export interface ScrollAreaCornerProps extends BaseUIComponentProps<ScrollAreaCornerState> {}
+
+defineOptions({
+  name: 'ScrollAreaCorner',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaCornerProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const { cornerRef, cornerSize, hiddenState } = useScrollAreaRootContext()
+
+const state = computed<ScrollAreaCornerState>(() => ({}))
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      insetInlineEnd: 0,
+      width: cornerSize.value.width,
+      height: cornerSize.value.height,
+    },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: elementProps,
+  defaultTagName: 'div',
+  ref: cornerRef,
+})
+</script>
+
+<template>
+  <template v-if="!hiddenState.corner">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component
+      :is="tag"
+      v-else
+      :ref="renderRef"
+      v-bind="mergedProps"
+    />
+  </template>
+</template>

package/src/scroll-area/index.ts

@@ -0,0 +1,25 @@
+export { default as ScrollAreaContent } from './content/ScrollAreaContent.vue'
+export type { ScrollAreaContentProps, ScrollAreaContentState } from './content/ScrollAreaContent.vue'
+export { default as ScrollAreaCorner } from './corner/ScrollAreaCorner.vue'
+export type { ScrollAreaCornerProps, ScrollAreaCornerState } from './corner/ScrollAreaCorner.vue'
+export { default as ScrollAreaRoot } from './root/ScrollAreaRoot.vue'
+
+export type { ScrollAreaRootProps } from './root/ScrollAreaRoot.vue'
+export type { ScrollAreaRootState } from './root/ScrollAreaRootContext'
+export { ScrollAreaRootCssVars } from './root/ScrollAreaRootCssVars'
+export { ScrollAreaRootDataAttributes } from './root/ScrollAreaRootDataAttributes'
+
+export { default as ScrollAreaScrollbar } from './scrollbar/ScrollAreaScrollbar.vue'
+export type { ScrollAreaScrollbarProps, ScrollAreaScrollbarState } from './scrollbar/ScrollAreaScrollbar.vue'
+
+export { ScrollAreaScrollbarCssVars } from './scrollbar/ScrollAreaScrollbarCssVars'
+export { ScrollAreaScrollbarDataAttributes } from './scrollbar/ScrollAreaScrollbarDataAttributes'
+export { default as ScrollAreaThumb } from './thumb/ScrollAreaThumb.vue'
+export type { ScrollAreaThumbProps, ScrollAreaThumbState } from './thumb/ScrollAreaThumb.vue'
+
+export { ScrollAreaThumbDataAttributes } from './thumb/ScrollAreaThumbDataAttributes'
+export { default as ScrollAreaViewport } from './viewport/ScrollAreaViewport.vue'
+export type { ScrollAreaViewportProps, ScrollAreaViewportState } from './viewport/ScrollAreaViewport.vue'
+
+export { ScrollAreaViewportCssVars } from './viewport/ScrollAreaViewportCssVars'
+export { ScrollAreaViewportDataAttributes } from './viewport/ScrollAreaViewportDataAttributes'

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,
+}