docs(Slider): improve barrel JSDoc and hoist SFC imports

Author: johnleider

packages/0/src/components/Slider/SliderHiddenInput.vue

@@ -7,6 +7,12 @@
  */
 
 <script lang="ts">
+  // Components
+  import { useSliderRoot } from './SliderRoot.vue'
+
+  // Utilities
+  import { toRef, toValue } from 'vue'
+
   export interface SliderHiddenInputProps {
     /** Namespace for context injection from parent Slider.Root */
     namespace?: string
@@ -28,12 +34,6 @@
 </script>
 
 <script setup lang="ts">
-  // Components
-  import { useSliderRoot } from './SliderRoot.vue'
-
-  // Utilities
-  import { toRef, toValue } from 'vue'
-
   defineOptions({ name: 'SliderHiddenInput' })
 
   const {

packages/0/src/components/Slider/SliderRange.vue

@@ -16,6 +16,9 @@
   import { Atom } from '#v0/components/Atom'
   import { useSliderRoot } from './SliderRoot.vue'
 
+  // Utilities
+  import { toRef, toValue, useAttrs } from 'vue'
+
   // Types
   import type { AtomProps } from '#v0/components/Atom'
 
@@ -39,9 +42,6 @@
 </script>
 
 <script setup lang="ts">
-  // Utilities
-  import { toRef, toValue, useAttrs } from 'vue'
-
   defineOptions({ name: 'SliderRange', inheritAttrs: false })
 
   const attrs = useAttrs()

packages/0/src/components/Slider/SliderRoot.vue

@@ -11,10 +11,19 @@
 <script lang="ts">
   // Components
   import { Atom } from '#v0/components/Atom'
+  import SliderHiddenInput from './SliderHiddenInput.vue'
 
   // Foundational
   import { createContext } from '#v0/composables/createContext'
 
+  // Composables
+  import { createSlider } from '#v0/composables/createSlider'
+  import { useDocumentEventListener } from '#v0/composables/useEventListener'
+  import { useToggleScope } from '#v0/composables/useToggleScope'
+
+  // Utilities
+  import { shallowRef, toRef, toValue, useAttrs, useId, watch } from 'vue'
+
   // Types
   import type { AtomProps } from '#v0/components/Atom'
   import type { SliderContext } from '#v0/composables/createSlider'
@@ -90,17 +99,6 @@
 </script>
 
 <script setup lang="ts">
-  // Components
-  import SliderHiddenInput from './SliderHiddenInput.vue'
-
-  // Composables
-  import { createSlider } from '#v0/composables/createSlider'
-  import { useDocumentEventListener } from '#v0/composables/useEventListener'
-  import { useToggleScope } from '#v0/composables/useToggleScope'
-
-  // Utilities
-  import { shallowRef, toRef, toValue, useAttrs, useId, watch } from 'vue'
-
   defineOptions({ name: 'SliderRoot', inheritAttrs: false })
 
   const attrs = useAttrs()

packages/0/src/components/Slider/SliderThumb.vue

@@ -12,6 +12,9 @@
   import { Atom } from '#v0/components/Atom'
   import { useSliderRoot } from './SliderRoot.vue'
 
+  // Utilities
+  import { onUnmounted, toRef, toValue, useAttrs } from 'vue'
+
   // Types
   import type { AtomProps } from '#v0/components/Atom'
 
@@ -59,9 +62,6 @@
 </script>
 
 <script setup lang="ts">
-  // Utilities
-  import { onUnmounted, toRef, toValue, useAttrs } from 'vue'
-
   defineOptions({ name: 'SliderThumb', inheritAttrs: false })
 
   const attrs = useAttrs()

packages/0/src/components/Slider/SliderTrack.vue

@@ -12,6 +12,9 @@
   import { Atom } from '#v0/components/Atom'
   import { useSliderRoot } from './SliderRoot.vue'
 
+  // Utilities
+  import { toRef, toValue, useAttrs, useTemplateRef, watchEffect } from 'vue'
+
   // Types
   import type { AtomProps } from '#v0/components/Atom'
 
@@ -31,9 +34,6 @@
 </script>
 
 <script setup lang="ts">
-  // Utilities
-  import { toRef, toValue, useAttrs, useTemplateRef, watchEffect } from 'vue'
-
   defineOptions({ name: 'SliderTrack', inheritAttrs: false })
 
   const attrs = useAttrs()

packages/0/src/components/Slider/index.test.ts

@@ -6,10 +6,6 @@ import { h, nextTick, ref } from 'vue'
 
 import { Slider } from './index'
 
-// ============================================================================
-// Test Helpers
-// ============================================================================
-
 interface MountResult {
   wrapper: ReturnType<typeof mount>
   thumbProps: (index?: number) => any
@@ -73,10 +69,6 @@ function mountSlider (options: {
   }
 }
 
-// ============================================================================
-// Tests
-// ============================================================================
-
 describe('slider', () => {
   describe('rendering', () => {
     it('should render root with horizontal orientation by default', async () => {

packages/0/src/components/Slider/index.ts

@@ -26,10 +26,35 @@ import Track from './SliderTrack.vue'
  * Slider component with sub-components for range input controls.
  *
  * @see https://0.vuetifyjs.com/components/slider
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ *   import { Slider } from '@vuetify/v0'
+ *   import { ref } from 'vue'
+ *
+ *   const value = ref([50])
+ * </script>
+ *
+ * <template>
+ *   <Slider.Root v-model="value" :min="0" :max="100">
+ *     <Slider.Track>
+ *       <Slider.Range />
+ *     </Slider.Track>
+ *     <Slider.Thumb />
+ *   </Slider.Root>
+ * </template>
+ * ```
  */
 export const Slider = {
   /**
-   * Root component for sliders. Creates context and bridges v-model.
+   * Root component for sliders.
+   *
+   * Creates slider context, provides it to child components, and
+   * bridges v-model. Value is always `number[]`: single thumb = `[50]`,
+   * range = `[25, 75]`. Configure min, max, step, and orientation via
+   * props. When `name` prop is provided, automatically renders hidden
+   * inputs for form submission.
    *
    * @see https://0.vuetifyjs.com/components/slider
    *
@@ -54,7 +79,11 @@ export const Slider = {
    */
   Root,
   /**
-   * Track element. Handles click-to-position interaction.
+   * Track element that contains the Range and handles click-to-position.
+   *
+   * On pointerdown, calculates the value from pointer position, snaps
+   * the nearest thumb to that value, and initiates drag. Must contain
+   * Slider.Range as a child.
    *
    * @see https://0.vuetifyjs.com/components/slider#anatomy
    *
@@ -69,6 +98,10 @@ export const Slider = {
   /**
    * Filled region between thumb positions.
    *
+   * For single-thumb sliders, fills from min to the thumb value.
+   * For range sliders, fills between the lowest and highest thumb
+   * values. Must be used within a Slider.Track component.
+   *
    * @see https://0.vuetifyjs.com/components/slider#anatomy
    *
    * @example
@@ -80,7 +113,13 @@ export const Slider = {
    */
   Range,
   /**
-   * Draggable thumb control. Auto-registers with parent Root.
+   * Draggable thumb control with keyboard navigation.
+   *
+   * Auto-registers with parent Root to receive its index. Supports
+   * pointer drag and full keyboard navigation (Arrow, Page, Home/End).
+   * Provides ARIA slider attributes including per-thumb constrained
+   * valuemin/valuemax for multi-thumb sliders. Render multiple Thumbs
+   * for range sliders.
    *
    * @see https://0.vuetifyjs.com/components/slider#anatomy
    *
@@ -91,7 +130,11 @@ export const Slider = {
    */
   Thumb,
   /**
-   * Hidden native input for form submission. Auto-rendered by Root when `name` is set.
+   * Hidden native input for form submission.
+   *
+   * Auto-rendered by Root when `name` prop is provided — one input
+   * per thumb value. Can also be used explicitly for custom form
+   * integration.
    *
    * @see https://0.vuetifyjs.com/components/slider#form-integration
    * @internal