new docs structure for slider

apps/docs/content/_data/components.json

@@ -263,8 +263,14 @@
 	},
 	{
 		"title": "Slider",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/slider/README.md"
+		"description": "Allows users to choose from a range of values along a horizontal or vertical line",
+		"variations": "./libs/components/src/lib/slider/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/slider/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/slider/README.md",
+		"accessibility": "./libs/components/src/lib/slider/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/slider/USE-CASES.md",
+		"hideUseCases": "true"
 	},
 	{
 		"title": "Tabs",
@@ -370,7 +376,8 @@
 		"hideGuidelines": "true",
 		"code": "./libs/components/src/lib/range-slider/README.md",
 		"accessibility": "./libs/components/src/lib/range-slider/ACCESSIBILITY.md",
-		"useCases": "./libs/components/src/lib/range-slider/USE-CASES.md"
+		"useCases": "./libs/components/src/lib/range-slider/USE-CASES.md",
+		"status": "alpha"
 	},
 	{
 		"title": "Split Button",

libs/components/src/lib/range-slider/README.md

@@ -34,7 +34,7 @@ registerRangeSlider('your-prefix');
 	import { VRangeSlider } from '@vonage/vivid-vue';
 </script>
 <template>
-	<VRangeSlider appearance="filled" label="Click me" />
+	<VRangeSlider />
 </template>
 ```
 
@@ -168,6 +168,7 @@ Use this to configure the [`pin`](/variation/#pin) string.
 | **aria-start-label** | `string`                                | Aria label for the start thumb                                       |
 | **aria-end-label**   | `string`                                | Aria label for the end thumb                                         |
 | **connotation**      | _Enum_:<br/>`accent`<br/>`cta`          | The connotation of the component                                     |
+| **disabled**         | `boolean`                               | Sets the element's disabled state                                    |
 | **end**              | `string`                                | The current end value of the element.                                |
 | **markers**          | `boolean`                               | Display markers on/off                                               |
 | **max**              | `number`                                | The maximum value of the range.                                      |

libs/components/src/lib/slider/ACCESSIBILITY.md

@@ -0,0 +1,9 @@
+## Implementation
+
+The slider has a `role` of `slider`, which needs an accessible label. You must provide it using `aria-label`.
+
+Vivid automatically sets the `aria-valuetext` attribute on the slider. The attribute is read by assistive technology. You can control its format using the `valueTextFormatter` property for a more human-readable value.
+
+## Resources
+
+- [Vivid Tabs: Manual accessibility test](https://docs.google.com/spreadsheets/d/15J0sHxVUlmjv7HwT2b0gGNJFP_vsjAByzgRP_4oWYKk/edit?gid=1175911860#gid=1175911860)

libs/components/src/lib/slider/README.md

@@ -1,23 +1,58 @@
-# Slider
+## Usage
 
-Represents a slider custom element.
+<vwc-tabs>
+<vwc-tab label="Web component"></vwc-tab>
+<vwc-tab-panel>
 
 ```js
-<script type="module">import '@vonage/vivid/slider';</script>
+import '@vonage/vivid/slider';
+```
+
+or, if you need to use a unique prefix:
+
+```js
+import { registerSlider } from '@vonage/vivid';
+
+registerSlider('your-prefix');
 ```
 
 ```html preview
-<vwc-slider></vwc-slider>
+<script type="module">
+	import { registerSlider } from '@vonage/vivid';
+	registerSlider('your-prefix');
+</script>
+
+<your-prefix-slider></your-prefix-slider>
 ```
 
-## Members
+</vwc-tab-panel>
+<vwc-tab label="Vue"></vwc-tab>
+<vwc-tab-panel>
 
-### Min
+```html
+<script setup lang="ts">
+	import { VSlider } from '@vonage/vivid-vue';
+</script>
+<template>
+	<VSlider />
+</template>
+```
 
-Use `min` to set the lowest value allowed for the slider.
+</vwc-tab-panel>
+</vwc-tabs>
 
-- Type: `number`
-- Default: `0`
+## Value
+
+Set the `value` attribute to set the value of the slider.
+
+```html preview blocks
+<vwc-slider value="3"></vwc-slider>
+```
+
+## Min
+
+Use the `min` attribute to set the lowest value allowed for the Slider.  
+The default value of `min` is `0`.
 
 ```html preview blocks
 <div>
@@ -36,12 +71,10 @@ Use `min` to set the lowest value allowed for the slider.
 </script>
 ```
 
-### Max
+## Max
 
-Use `max` to set the greatest value allowed for the slider.
-
-- Type: `number`
-- Default: `10`
+Use the `max` attribute to set the highest value allowed for the Slider.  
+The default value `max` of is `0`.
 
 ```html preview blocks
 <div>
@@ -60,12 +93,10 @@ Use `max` to set the greatest value allowed for the slider.
 </script>
 ```
 
-### Step
-
-Use `step` to set determine the granularity with which values can be incremented/decremented.
+## Step
 
-- Type: `number`
-- Default: `1`
+Use the `step` attribute sets the granularity with which values can be incremented/decremented.  
+The default value `step` of is `1`.
 
 ```html preview blocks
 <div>
@@ -84,78 +115,32 @@ Use `step` to set determine the granularity with which values can be incremented
 </script>
 ```
 
-### Orientation
+## Value Text Formatter
 
-When used vertically, the slider fills the height of its container.
-
-- Type: `'horizontal'` | `'vertical'`
-- Default: `'horizontal'`
-
-```html preview center 300px
-<vwc-slider orientation="vertical"></vwc-slider>
-```
-
-### Markers
-
-Toggles markers display.  
-Markers are set according to the value of step (1 by default).
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview blocks
-<vwc-slider markers></vwc-slider>
-```
+Use the `valueTextFormatter` to generates a string for the Slider's "aria-valuetext" attribute based on the current value.  
+Use this to configure the [`pin`](/variation/#pin) string.
 
-### Connotation
+## API Reference
 
-- Type: `'accent'` | `'cta'`
-- Default: `'accent'`
+### Properties
 
-```html preview blocks
-<vwc-slider connotation="cta"></vwc-slider>
-```
-
-### Pin
-
-Toggles display the value through a tooltip. Use the `valueTextFormatter` member to customize the format of the value.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview
-<vwc-slider pin></vwc-slider>
-<vwc-slider orientation="vertical" style="height: 200px" pin></vwc-slider>
-<script>
-	for (const slider of document.querySelectorAll('vwc-slider')) {
-		slider.valueTextFormatter = (value) => `${value} units`;
-	}
-</script>
-```
-
-### Disabled
-
-Toggle the `disabled` member to disable/enable the slider.
-
-- Type: `boolean`
-- Default: `false`
-
-```html preview blocks
-<vwc-slider disabled></vwc-slider>
-```
-
-### Value
-
-Use `value` to set the value of the slider.
+<div class="table-wrapper">
 
-- Type: `string`
-- Default: `5`
+| Name            | Type                                    | Description                                                          |
+| --------------- | --------------------------------------- | -------------------------------------------------------------------- |
+| **connotation** | _Enum_:<br/>`accent`<br/>`cta`          | The connotation of the component                                     |
+| **disabled**    | \_`boolean`                             | Sets the element's disabled state                                    |
+| **markers**     | `boolean`                               | Display markers on/off                                               |
+| **max**         | `number`                                | The maximum value of the range.                                      |
+| **min**         | `number`                                | The minimum value of the range.                                      |
+| **orientation** | _Enum_:<br/>`horizontal`<br/>`vertical` | The orientation of the slider.                                       |
+| **pin**         | `boolean`                               | Show current values on the thumbs.                                   |
+| **step**        | `number`                                | Value to increment or decrement via arrow keys, mouse click or drag. |
+| **value**       | `number`                                | Set the value attribute to set the value of the slider.              |
 
-```html preview blocks
-<vwc-slider value="3"></vwc-slider>
-```
+</div>
 
-## Events
+### Events
 
 <div class="table-wrapper">
 
@@ -164,9 +149,3 @@ Use `value` to set the value of the slider.
 | `change` | `CustomEvent<undefined>` | Yes     | Yes      | Fires a custom 'change' event when the slider value changes |
 
 </div>
-
-## Accessibility
-
-The slider has a `role` of `slider`, which needs an accessible label. You must provide it using `aria-label`.
-
-Vivid automatically sets the `aria-valuetext` attribute on the slider. The attribute is read by assistive technology. You can control its format using the `valueTextFormatter` property for a more human-readable value.

libs/components/src/lib/slider/VARIATIONS.md

@@ -0,0 +1,54 @@
+## Connotation
+
+Use the `connotation` attribute on Slider to control the Slider track.  
+Below is an example of cta connotation.
+
+```html preview blocks>
+<vwc-slider connotation="cta"></vwc-slider>
+```
+
+## Markers
+
+Use `markers` attribute to add tick marks on the slider.  
+The markers are set by the value of [`step`](./code/#step).
+
+```html preview blocks
+<vwc-slider markers></vwc-slider>
+```
+
+## Orientation
+
+The `orientation` attribute controls which axis the Slider is aligned.  
+Below is an example of vertical alignment.
+
+<vwc-note connotation="information" icon="info-line">
+<p>When used vertically, the Slider fits the height of its container.</p>
+</vwc-note>
+
+```html preview center 300px
+<vwc-slider orientation="vertical"></vwc-slider>
+```
+
+## Pin
+
+Use `pin` attribute to display a tooltip on the Slider knob.  
+Use the [`valueTextFormatter`](/code/#value-text-formatter) member to customize the format of the value.
+
+```html preview
+<vwc-slider pin></vwc-slider>
+<vwc-slider orientation="vertical" style="height: 200px" pin></vwc-slider>
+
+<script>
+	for (const slider of document.querySelectorAll('vwc-slider')) {
+		slider.valueTextFormatter = (value) => `${value} units`;
+	}
+</script>
+```
+
+## Disabled
+
+The `disabled` attribute disables the Slider.
+
+```html preview blocks
+<vwc-slider disabled></vwc-slider>
+```