base-ui-vue 0.1.0 → 0.3.0

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

@@ -0,0 +1,4 @@
+export enum ScrollAreaScrollbarCssVars {
+  scrollAreaThumbHeight = '--scroll-area-thumb-height',
+  scrollAreaThumbWidth = '--scroll-area-thumb-width',
+}

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

@@ -0,0 +1,11 @@
+export enum ScrollAreaScrollbarDataAttributes {
+  orientation = 'data-orientation',
+  hovering = 'data-hovering',
+  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/thumb/ScrollAreaThumb.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, shallowRef, useAttrs, watch } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { useScrollAreaScrollbarContext } from '../scrollbar/ScrollAreaScrollbarContext'
+import { ScrollAreaScrollbarCssVars } from '../scrollbar/ScrollAreaScrollbarCssVars'
+
+export interface ScrollAreaThumbState {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface ScrollAreaThumbProps extends BaseUIComponentProps<ScrollAreaThumbState> {}
+
+defineOptions({
+  name: 'ScrollAreaThumb',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaThumbProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const {
+  thumbYRef,
+  thumbXRef,
+  handlePointerDown,
+  handlePointerMove,
+  handlePointerUp,
+  setScrollingX,
+  setScrollingY,
+  hasMeasuredScrollbar,
+} = useScrollAreaRootContext()
+
+const { orientation } = useScrollAreaScrollbarContext()
+const thumbElementRef = shallowRef<HTMLDivElement | null>(null)
+
+watch(
+  [thumbElementRef, orientation],
+  ([element, currentOrientation], [previousElement, previousOrientation]) => {
+    if (previousElement) {
+      const previousRef = previousOrientation === 'vertical' ? thumbYRef : thumbXRef
+
+      if (previousRef.value === previousElement) {
+        previousRef.value = null
+      }
+    }
+
+    if (!element) {
+      return
+    }
+
+    const nextRef = currentOrientation === 'vertical' ? thumbYRef : thumbXRef
+    nextRef.value = element
+  },
+)
+
+const state = computed<ScrollAreaThumbState>(() => ({
+  orientation: orientation.value,
+}))
+
+function onPointerUp(event: PointerEvent) {
+  if (orientation.value === 'vertical') {
+    setScrollingY(false)
+  }
+  if (orientation.value === 'horizontal') {
+    setScrollingX(false)
+  }
+  handlePointerUp(event)
+}
+
+function setThumbElement(element: Element | ComponentPublicInstance | null) {
+  thumbElementRef.value = element as HTMLDivElement | null
+}
+
+const elementProps = computed(() => mergeProps(
+  attrs,
+  {
+    onPointerdown: handlePointerDown,
+    onPointermove: handlePointerMove,
+    onPointerup: onPointerUp,
+    style: {
+      visibility: hasMeasuredScrollbar.value ? undefined : 'hidden',
+      ...(orientation.value === 'vertical' && {
+        height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`,
+      }),
+      ...(orientation.value === 'horizontal' && {
+        width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`,
+      }),
+    },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: elementProps,
+  defaultTagName: 'div',
+  ref: setThumbElement,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  />
+</template>

package/src/scroll-area/thumb/ScrollAreaThumbDataAttributes.ts

@@ -0,0 +1,3 @@
+export enum ScrollAreaThumbDataAttributes {
+  orientation = 'data-orientation',
+}

package/src/scroll-area/utils/getOffset.ts

@@ -0,0 +1,34 @@
+export function getOffset(
+  element: Element | null,
+  prop: 'margin' | 'padding',
+  axis: 'x' | 'y',
+): number {
+  if (!element) {
+    return 0
+  }
+
+  const styles = getComputedStyle(element)
+  const propAxis = axis === 'x' ? 'Inline' : 'Block'
+  const start = getStyleNumber(styles, `${prop}${propAxis}Start`)
+  const end = getStyleNumber(styles, `${prop}${propAxis}End`)
+
+  // Safari misreports `marginInlineEnd` in RTL.
+  // We have to assume the start/end values are symmetrical, which is likely.
+  if (axis === 'x' && prop === 'margin' && styles.direction === 'rtl' && isSafari()) {
+    return start * 2
+  }
+
+  return start + end
+}
+
+function getStyleNumber(styles: CSSStyleDeclaration, prop: string) {
+  return Number.parseFloat(styles[prop as any]) || 0
+}
+
+function isSafari() {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  return /AppleWebKit/.test(navigator.userAgent) && !/Chrome|Chromium|Edg\//.test(navigator.userAgent)
+}

package/src/scroll-area/viewport/ScrollAreaViewport.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { HiddenState, ScrollAreaRootState } from '../root/ScrollAreaRootContext'
+import { computed, onBeforeUnmount, onMounted, provide, useAttrs, watch } from 'vue'
+import { useDirection } from '../../direction-provider/DirectionContext'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { clamp } from '../../utils/clamp'
+import { normalizeScrollOffset } from '../../utils/scrollEdges'
+import { styleDisableScrollbar } from '../../utils/styles'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { MIN_THUMB_SIZE } from '../constants'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { scrollAreaStateAttributesMapping } from '../root/stateAttributes'
+import { getOffset } from '../utils/getOffset'
+import { scrollAreaViewportContextKey } from './ScrollAreaViewportContext'
+import { ScrollAreaViewportCssVars } from './ScrollAreaViewportCssVars'
+
+export type ScrollAreaViewportState = ScrollAreaRootState
+
+export interface ScrollAreaViewportProps extends BaseUIComponentProps<ScrollAreaViewportState> {}
+
+defineOptions({
+  name: 'ScrollAreaViewport',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaViewportProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const {
+  viewportRef,
+  scrollbarYRef,
+  scrollbarXRef,
+  thumbYRef,
+  thumbXRef,
+  cornerRef,
+  cornerSize,
+  setCornerSize,
+  setThumbSize,
+  rootId,
+  setHiddenState,
+  hiddenState,
+  setHasMeasuredScrollbar,
+  handleScroll,
+  setHovering,
+  setOverflowEdges,
+  overflowEdges,
+  overflowEdgeThreshold,
+  scrollingX,
+  scrollingY,
+} = useScrollAreaRootContext()
+
+const direction = useDirection()
+
+let programmaticScroll = true
+const lastMeasuredViewportMetrics: [number, number, number, number] = [Number.NaN, Number.NaN, Number.NaN, Number.NaN]
+
+let scrollEndTimeoutId: ReturnType<typeof setTimeout> | undefined
+let waitForAnimationsTimeoutId: ReturnType<typeof setTimeout> | undefined
+let resizeObserver: ResizeObserver | undefined
+
+let scrollAreaOverflowVarsRegistered = false
+
+function removeCSSVariableInheritance() {
+  if (scrollAreaOverflowVarsRegistered)
+    return
+
+  const isWebKit = typeof navigator !== 'undefined' && /AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
+  if (isWebKit)
+    return
+
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    const vars = [
+      ScrollAreaViewportCssVars.scrollAreaOverflowXStart,
+      ScrollAreaViewportCssVars.scrollAreaOverflowXEnd,
+      ScrollAreaViewportCssVars.scrollAreaOverflowYStart,
+      ScrollAreaViewportCssVars.scrollAreaOverflowYEnd,
+    ]
+    for (const name of vars) {
+      try {
+        CSS.registerProperty({ name, syntax: '<length>', inherits: false, initialValue: '0px' })
+      }
+      catch { /* already registered */ }
+    }
+  }
+
+  scrollAreaOverflowVarsRegistered = true
+}
+
+function computeThumbPosition() {
+  const viewportEl = viewportRef.value
+  const scrollbarYEl = scrollbarYRef.value
+  const scrollbarXEl = scrollbarXRef.value
+  const thumbYEl = thumbYRef.value
+  const thumbXEl = thumbXRef.value
+  const cornerEl = cornerRef.value
+
+  if (!viewportEl)
+    return
+
+  const scrollableContentHeight = viewportEl.scrollHeight
+  const scrollableContentWidth = viewportEl.scrollWidth
+  const viewportHeight = viewportEl.clientHeight
+  const viewportWidth = viewportEl.clientWidth
+  const scrollTop = viewportEl.scrollTop
+  const scrollLeft = viewportEl.scrollLeft
+  const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0])
+  lastMeasuredViewportMetrics[0] = viewportHeight
+  lastMeasuredViewportMetrics[1] = scrollableContentHeight
+  lastMeasuredViewportMetrics[2] = viewportWidth
+  lastMeasuredViewportMetrics[3] = scrollableContentWidth
+
+  if (isFirstMeasurement) {
+    setHasMeasuredScrollbar(true)
+  }
+
+  if (scrollableContentHeight === 0 || scrollableContentWidth === 0)
+    return
+
+  const nextHiddenState = getHiddenState(viewportEl)
+  const scrollbarYHidden = nextHiddenState.y
+  const scrollbarXHidden = nextHiddenState.x
+  const ratioX = viewportWidth / scrollableContentWidth
+  const ratioY = viewportHeight / scrollableContentHeight
+  const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth)
+  const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight)
+
+  let scrollLeftFromStart = 0
+  let scrollLeftFromEnd = 0
+  if (!scrollbarXHidden) {
+    let rawScrollLeftFromStart = 0
+    if (direction.value === 'rtl') {
+      rawScrollLeftFromStart = scrollLeft < 0 ? -scrollLeft : maxScrollLeft - scrollLeft
+    }
+    else {
+      rawScrollLeftFromStart = scrollLeft
+    }
+    rawScrollLeftFromStart = clamp(rawScrollLeftFromStart, 0, maxScrollLeft)
+    scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft)
+    scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart
+  }
+
+  const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0
+  const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0
+  const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0
+  const nextWidth = scrollbarXHidden ? 0 : viewportWidth
+  const nextHeight = scrollbarYHidden ? 0 : viewportHeight
+
+  let nextCornerWidth = 0
+  let nextCornerHeight = 0
+  if (!scrollbarXHidden && !scrollbarYHidden) {
+    nextCornerWidth = scrollbarYEl?.offsetWidth || 0
+    nextCornerHeight = scrollbarXEl?.offsetHeight || 0
+  }
+
+  const cornerNotYetSized = cornerSize.value.width === 0 && cornerSize.value.height === 0
+  const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0
+  const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0
+
+  const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x')
+  const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y')
+  const thumbXOffset = getOffset(thumbXEl, 'margin', 'x')
+  const thumbYOffset = getOffset(thumbYEl, 'margin', 'y')
+
+  const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset
+  const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset
+
+  const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth
+  const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight
+
+  const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX)
+  const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY)
+
+  setThumbSize({ width: clampedNextWidth, height: clampedNextHeight })
+
+  if (scrollbarYEl && thumbYEl) {
+    const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset
+    const scrollRangeY = scrollableContentHeight - viewportHeight
+    const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY
+    const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY))
+    thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`
+  }
+
+  if (scrollbarXEl && thumbXEl) {
+    const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset
+    const scrollRangeX = scrollableContentWidth - viewportWidth
+    const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeftFromStart / scrollRangeX
+    const thumbOffsetX = direction.value === 'rtl'
+      ? -clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX)
+      : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX)
+    thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`
+  }
+
+  const overflowMetricsPx: Array<[string, number]> = [
+    [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd],
+  ]
+
+  for (const [cssVar, value] of overflowMetricsPx) {
+    viewportEl.style.setProperty(cssVar, `${value}px`)
+  }
+
+  if (cornerEl) {
+    if (scrollbarXHidden || scrollbarYHidden) {
+      setCornerSize({ width: 0, height: 0 })
+    }
+    else {
+      setCornerSize({ width: nextCornerWidth, height: nextCornerHeight })
+    }
+  }
+
+  setHiddenState(mergeHiddenState(hiddenState.value, nextHiddenState))
+
+  const threshold = overflowEdgeThreshold.value
+  const nextOverflowEdges = {
+    xStart: !scrollbarXHidden && scrollLeftFromStart > threshold.xStart,
+    xEnd: !scrollbarXHidden && scrollLeftFromEnd > threshold.xEnd,
+    yStart: !scrollbarYHidden && scrollTopFromStart > threshold.yStart,
+    yEnd: !scrollbarYHidden && scrollTopFromEnd > threshold.yEnd,
+  }
+
+  const prev = overflowEdges.value
+  if (
+    prev.xStart !== nextOverflowEdges.xStart
+    || prev.xEnd !== nextOverflowEdges.xEnd
+    || prev.yStart !== nextOverflowEdges.yStart
+    || prev.yEnd !== nextOverflowEdges.yEnd
+  ) {
+    setOverflowEdges(nextOverflowEdges)
+  }
+}
+
+function handleUserInteraction() {
+  programmaticScroll = false
+}
+
+function onScroll() {
+  if (!viewportRef.value)
+    return
+
+  computeThumbPosition()
+
+  if (!programmaticScroll) {
+    handleScroll({
+      x: viewportRef.value.scrollLeft,
+      y: viewportRef.value.scrollTop,
+    })
+  }
+
+  clearTimeout(scrollEndTimeoutId)
+  scrollEndTimeoutId = setTimeout(() => {
+    programmaticScroll = true
+  }, 100)
+}
+
+const viewportState = computed<ScrollAreaViewportState>(() => ({
+  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',
+    ...(rootId ? { 'data-id': `${rootId}-viewport` } : {}),
+    tabindex: hiddenState.value.x && hiddenState.value.y ? -1 : 0,
+    class: styleDisableScrollbar.className,
+    style: { overflow: 'scroll' },
+    onScroll,
+    onWheel: handleUserInteraction,
+    onTouchmove: handleUserInteraction,
+    onPointermove: handleUserInteraction,
+    onPointerenter: handleUserInteraction,
+    onKeydown: handleUserInteraction,
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: viewportState,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: viewportRef,
+})
+
+onMounted(() => {
+  removeCSSVariableInheritance()
+
+  if (viewportRef.value?.matches(':hover')) {
+    setHovering(true)
+  }
+
+  queueMicrotask(computeThumbPosition)
+
+  const viewport = viewportRef.value
+  if (typeof ResizeObserver !== 'undefined' && viewport) {
+    let hasInitialized = false
+    resizeObserver = new ResizeObserver(() => {
+      if (!hasInitialized) {
+        hasInitialized = true
+        if (
+          lastMeasuredViewportMetrics[0] === viewport.clientHeight
+          && lastMeasuredViewportMetrics[1] === viewport.scrollHeight
+          && lastMeasuredViewportMetrics[2] === viewport.clientWidth
+          && lastMeasuredViewportMetrics[3] === viewport.scrollWidth
+        ) {
+          return
+        }
+      }
+      computeThumbPosition()
+    })
+    resizeObserver.observe(viewport)
+
+    waitForAnimationsTimeoutId = setTimeout(() => {
+      const animations = viewport.getAnimations({ subtree: true })
+      if (animations.length === 0)
+        return
+      Promise.allSettled(animations.map(a => a.finished))
+        .then(computeThumbPosition)
+    }, 0)
+  }
+})
+
+watch([hiddenState, direction], () => {
+  queueMicrotask(computeThumbPosition)
+})
+
+watch(overflowEdgeThreshold, computeThumbPosition)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  clearTimeout(scrollEndTimeoutId)
+  clearTimeout(waitForAnimationsTimeoutId)
+})
+
+provide(scrollAreaViewportContextKey, { computeThumbPosition })
+
+function getHiddenState(viewport: HTMLElement): HiddenState {
+  const y = viewport.clientHeight >= viewport.scrollHeight
+  const x = viewport.clientWidth >= viewport.scrollWidth
+  return { y, x, corner: y || x }
+}
+
+function mergeHiddenState(prevState: HiddenState, nextState: HiddenState): HiddenState {
+  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
+    return prevState
+  }
+  return nextState
+}
+</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/viewport/ScrollAreaViewportContext.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue'
+import { inject } from 'vue'
+
+export interface ScrollAreaViewportContext {
+  computeThumbPosition: () => void
+}
+
+export const scrollAreaViewportContextKey = Symbol(
+  'ScrollAreaViewportContext',
+) as InjectionKey<ScrollAreaViewportContext>
+
+export function useScrollAreaViewportContext(): ScrollAreaViewportContext {
+  const context = inject(scrollAreaViewportContextKey)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: ScrollAreaViewportContext is missing. ScrollArea.Content must be placed within <ScrollAreaViewport>.',
+    )
+  }
+  return context
+}

package/src/scroll-area/viewport/ScrollAreaViewportCssVars.ts

@@ -0,0 +1,6 @@
+export enum ScrollAreaViewportCssVars {
+  scrollAreaOverflowXStart = '--scroll-area-overflow-x-start',
+  scrollAreaOverflowXEnd = '--scroll-area-overflow-x-end',
+  scrollAreaOverflowYStart = '--scroll-area-overflow-y-start',
+  scrollAreaOverflowYEnd = '--scroll-area-overflow-y-end',
+}

package/src/scroll-area/viewport/ScrollAreaViewportDataAttributes.ts

@@ -0,0 +1,9 @@
+export enum ScrollAreaViewportDataAttributes {
+  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/separator/Separator.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, Orientation } from '../utils/types'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../utils/useRenderElement'
+
+export interface SeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation
+}
+
+export interface SeparatorProps extends BaseUIComponentProps<SeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation
+}
+
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
+ */
+defineOptions({
+  name: 'Separator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  as: 'div',
+  orientation: 'horizontal',
+})
+
+const attrs = useAttrs()
+
+const state = computed<SeparatorState>(() => ({
+  orientation: props.orientation,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({
+    ...attrs,
+    'role': 'separator',
+    'aria-orientation': props.orientation,
+  })),
+  defaultTagName: 'div',
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/separator/SeparatorDataAttributes.ts

@@ -0,0 +1,7 @@
+export enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}

package/src/separator/index.ts

@@ -0,0 +1,3 @@
+export { default as Separator } from './Separator.vue'
+export type { SeparatorProps, SeparatorState } from './Separator.vue'
+export { SeparatorDataAttributes } from './SeparatorDataAttributes'