feat(site): add TimeSlider, VolumeSlider, Popover API references (#685)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/core/src/core/index.ts

@@ -24,14 +24,17 @@ export * from './ui/seek-button/seek-button-data-attrs';
 export * from './ui/slider/slider-core';
 export * from './ui/slider/slider-css-vars';
 export * from './ui/slider/slider-data-attrs';
-export * from './ui/slider/time-slider-core';
-export * from './ui/slider/time-slider-data-attrs';
-export * from './ui/slider/volume-slider-core';
 export * from './ui/thumbnail/thumbnail-core';
 export * from './ui/thumbnail/thumbnail-data-attrs';
 export * from './ui/thumbnail/thumbnail-media-fragment';
 export * from './ui/thumbnail/types';
 export * from './ui/time/time-core';
 export * from './ui/time/time-data-attrs';
+export * from './ui/time-slider/time-slider-core';
+export * from './ui/time-slider/time-slider-css-vars';
+export * from './ui/time-slider/time-slider-data-attrs';
 export * from './ui/transition';
 export * from './ui/types';
+export * from './ui/volume-slider/volume-slider-core';
+export * from './ui/volume-slider/volume-slider-css-vars';
+export * from './ui/volume-slider/volume-slider-data-attrs';

packages/core/src/core/ui/time-slider/tests/time-slider-core.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import type { MediaBufferState, MediaTimeState } from '../../../media/state';
-import type { SliderInteraction } from '../slider-core';
+import type { SliderInteraction } from '../../slider/slider-core';
 import { TimeSliderCore } from '../time-slider-core';
 
 type TimeSliderMedia = MediaTimeState & MediaBufferState;

packages/core/src/core/ui/time-slider/time-slider-core.ts

@@ -4,7 +4,7 @@ import { formatTimeAsPhrase } from '@videojs/utils/time';
 import type { NonNullableObject } from '@videojs/utils/types';
 
 import type { MediaBufferState, MediaTimeState } from '../../media/state';
-import { type SliderBaseProps, SliderCore, type SliderInteraction, type SliderState } from './slider-core';
+import { type SliderBaseProps, SliderCore, type SliderInteraction, type SliderState } from '../slider/slider-core';
 
 export interface TimeSliderProps extends SliderBaseProps {
   /** Trailing-edge throttle (ms) for seek requests during drag. */

packages/core/src/core/ui/time-slider/time-slider-css-vars.ts

@@ -0,0 +1,11 @@
+// Values from SliderCSSVars — duplicated because the api-docs-builder extracts
+// JSDoc from the object literal, so we need component-specific descriptions here.
+/** CSS custom property names for time slider visual state. */
+export const TimeSliderCSSVars = {
+  /** Fill level percentage (0–100), representing current playback position. */
+  fill: '--media-slider-fill',
+  /** Pointer position percentage (0–100), tracking the cursor along the slider. */
+  pointer: '--media-slider-pointer',
+  /** Buffer level percentage (0–100), indicating how much media has been buffered. */
+  buffer: '--media-slider-buffer',
+} as const;

packages/core/src/core/ui/time-slider/time-slider-data-attrs.ts

@@ -1,5 +1,5 @@
+import { SliderDataAttrs } from '../slider/slider-data-attrs';
 import type { StateAttrMap } from '../types';
-import { SliderDataAttrs } from './slider-data-attrs';
 import type { TimeSliderState } from './time-slider-core';
 
 export const TimeSliderDataAttrs = {

packages/core/src/core/ui/volume-slider/tests/volume-slider-core.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import type { MediaVolumeState } from '../../../media/state';
-import type { SliderInteraction } from '../slider-core';
+import type { SliderInteraction } from '../../slider/slider-core';
 import { VolumeSliderCore } from '../volume-slider-core';
 
 function createInteraction(overrides: Partial<SliderInteraction> = {}): SliderInteraction {

packages/core/src/core/ui/volume-slider/volume-slider-core.ts

@@ -2,7 +2,7 @@ import { defaults } from '@videojs/utils/object';
 import type { NonNullableObject } from '@videojs/utils/types';
 
 import type { MediaVolumeState } from '../../media/state';
-import { type SliderBaseProps, SliderCore, type SliderInteraction, type SliderState } from './slider-core';
+import { type SliderBaseProps, SliderCore, type SliderInteraction, type SliderState } from '../slider/slider-core';
 
 export interface VolumeSliderProps extends SliderBaseProps {}
 

packages/core/src/core/ui/volume-slider/volume-slider-css-vars.ts

@@ -0,0 +1,9 @@
+// Values from SliderCSSVars — duplicated because the api-docs-builder extracts
+// JSDoc from the object literal, so we need component-specific descriptions here.
+/** CSS custom property names for volume slider visual state. */
+export const VolumeSliderCSSVars = {
+  /** Fill level percentage (0–100), representing the current volume level. */
+  fill: '--media-slider-fill',
+  /** Pointer position percentage (0–100), tracking the cursor along the slider. */
+  pointer: '--media-slider-pointer',
+} as const;

packages/core/src/core/ui/volume-slider/volume-slider-data-attrs.ts

@@ -0,0 +1,7 @@
+import { SliderDataAttrs } from '../slider/slider-data-attrs';
+import type { StateAttrMap } from '../types';
+import type { VolumeSliderState } from './volume-slider-core';
+
+export const VolumeSliderDataAttrs = {
+  ...SliderDataAttrs,
+} as const satisfies StateAttrMap<VolumeSliderState>;

packages/core/src/dom/tests/test-helpers.ts

@@ -1,5 +1,5 @@
 import type { SliderState } from '../../core/ui/slider/slider-core';
-import type { TimeSliderState } from '../../core/ui/slider/time-slider-core';
+import type { TimeSliderState } from '../../core/ui/time-slider/time-slider-core';
 
 // ---------------------------------------------------------------------------
 // Mock Video

packages/core/src/dom/ui/slider-css-vars.ts

@@ -1,6 +1,6 @@
 import type { SliderState } from '../../core/ui/slider/slider-core';
 import { SliderCSSVars } from '../../core/ui/slider/slider-css-vars';
-import type { TimeSliderState } from '../../core/ui/slider/time-slider-core';
+import type { TimeSliderState } from '../../core/ui/time-slider/time-slider-core';
 
 export function getSliderCSSVars(state: SliderState): Record<string, string> {
   return {