chore(docs): update misc web component Storybook docs (carbon-design-system#19223)

* chore(docs): update slider wc sb docs

* chore(docs): update structured list wc sb docs

* chore(docs): remove skip-to-content story and docs

---------

Co-authored-by: Nikhil Tomar <[email protected]>

Author: 2 people

packages/react/src/components/Slider/Slider.mdx

@@ -18,8 +18,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
   - [Overview](#overview)
   - [Controlled Slider](#controlled-slider)
   - [Skeleton](#skeleton)
-  - [Slider With Customer](#slider-with-customer)
-  - [Slider With Hidden Inputs](#slider-with-customer)
+  - [Slider With Custom Value](#slider-with-custom-value)
+  - [Slider With Hidden Inputs](#slider-with-hidden-inputs)
   - [Two Handle Skeleton](#two-handle-skeleton)
   - [Two Handle Slider](#two-handle-slider)
   - [Two Handle Slider With Hidden Inputs](#two-handle-slider-with-hidden-inputs)
@@ -65,14 +65,15 @@ increase or decrease the value by moving the handle along a horizontal track.
   ]}
 />
 
-## Slider With Customer
+## Slider With Custom Value
 
 <Canvas
   of={SliderStories.SliderWithCustomValueLabel}
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(SliderStories.SliderWithCustomValueLabel),
+      onClick: () =>
+        stackblitzPrefillConfig(SliderStories.SliderWithCustomValueLabel),
     },
   ]}
 />
@@ -84,7 +85,8 @@ increase or decrease the value by moving the handle along a horizontal track.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(SliderStories.SliderWithHiddenInputs),
+      onClick: () =>
+        stackblitzPrefillConfig(SliderStories.SliderWithHiddenInputs),
     },
   ]}
 />
@@ -135,7 +137,8 @@ keys to `onChange` function prop that is passed to the component.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(SliderStories.TwoHandleSliderWithHiddenInputs),
+      onClick: () =>
+        stackblitzPrefillConfig(SliderStories.TwoHandleSliderWithHiddenInputs),
     },
   ]}
 />

packages/web-components/src/components/skip-to-content/skip-to-content-story.scss

@@ -1,74 +1,59 @@
-import { ArgTypes, Meta, Markdown } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as SliderStories from './slider.stories';
 
 <Meta of={SliderStories} />
 
 # Slider
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/slider)
-> example implementation.
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/slider)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/slider/usage)
+&nbsp;|&nbsp;
+[Accessibility](https://www.carbondesignsystem.com/components/slider/accessibility)
 
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/slider)
+## Table of Contents
 
-Sliders provide a visual indication of adjustable content, where the user can
-move the handle along a horizontal track to increase or decrease the value.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/slider/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['slider'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
+- [Overview](#overview)
+- [Controlled Slider](#controlled-slider)
+- [Skeleton](#skeleton)
+- [Slider With Customer](#slider-with-customer)
+- [Slider With Hidden Inputs](#slider-with-customer)
+- [Two Handle Skeleton](#two-handle-skeleton)
+- [Two Handle Slider](#two-handle-slider)
+- [Two Handle Slider With Hidden Inputs](#two-handle-slider-with-hidden-inputs)
+- [Component API](#component-api)
+- [Feedback](#feedback)
 
-### HTML
+## Overview
 
-```html
-<cds-slider
-  label-text="Slider"
-  max="100"
-  min="0"
-  step="1"
-  value="50"></cds-slider>
-```
+Sliders provide a visual indication of adjustable content, where the user can
+increase or decrease the value by moving the handle along a horizontal track.
 
-## With input box
+<Canvas of={SliderStories.Default} />
 
-To include an input box, place `<cds-slider-input>` within `<cds-slider>`.
+## Controlled Slider
 
-```html
-<cds-slider label-text="Slider" max="100" min="0" step="1" value="50">
-  <cds-slider-input aria-label="Slider value" type="number"></cds-slider-input>
-</cds-slider>
-```
+<Canvas of={SliderStories.ControlledSlider} />
 
 ## Skeleton
 
-For the skeleton variation, utilize `<cds-slider-skeleton>`.
-
-```html
-<cds-slider-skeleton></cds-slider-skeleton>
-```
+<Canvas of={SliderStories.Skeleton} />
 
-## `<cds-slider>` attributes, properties and events
+## Component API
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-slider disabled>`) and `false` means not setting the attribute (e.g.
-`<cds-slider>` without `disabled` attribute).
+## `cds-slider`
 
 <ArgTypes of="cds-slider" />
 
-## `<cds-slider-input>` attributes, properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-slider-input invalid>`) and `false` means not setting the attribute (e.g.
-`<cds-slider-input>` without `invalid` attribute).
+## `cds-slider-input`
 
 <ArgTypes of="cds-slider-input" />
+
+<Markdown>{`${cdnJs({ components: ['slider'] })}`}</Markdown>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/slider/slider.mdx).

packages/web-components/src/components/skip-to-content/skip-to-content.mdx

@@ -12,7 +12,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/slider';
 @use '@carbon/styles/scss/layout' as *;
 
-:host(#{$prefix}-slider) {
+:host(#{$prefix}-slider),
+:host(#{$prefix}-slider-skeleton) {
   outline: none;
   @include emit-layout-tokens();
 
@@ -53,3 +54,9 @@ $css--plex: true !default;
     background-color: transparent;
   }
 }
+
+:host(#{$prefix}-slider-skeleton) {
+  .#{$prefix}--slider__thumb {
+    inset-inline-start: 50%;
+  }
+}

packages/web-components/src/components/skip-to-content/skip-to-content.stories.ts

@@ -146,10 +146,8 @@ export const ControlledSlider = {
     let value = 87;
     function onClick() {
       value = Math.round(Math.random() * 100);
-      const sliders = document.getElementsByTagName('cds-slider');
-      for (const slider of sliders) {
-        slider.setAttribute('value', `${value}`);
-      }
+      const slider = document.querySelector('cds-slider[controlled]');
+      slider?.setAttribute('value', `${value}`);
 
       const headers = document.getElementsByClassName('slider-headers');
       for (const header of headers) {
@@ -159,7 +157,12 @@ export const ControlledSlider = {
     return html`
       <button type="button" @click="${onClick}">randomize value</button>
       <cds-form-item>
-        <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
+        <cds-slider
+          controlled
+          max="100"
+          min="0"
+          step="1"
+          value="${ifDefined(value)}">
           <cds-slider-input
             aria-label="Slider value"
             type="number"></cds-slider-input>
@@ -232,7 +235,9 @@ export const Skeleton = {
     },
   },
   render: () => html`
-    <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
+    <cds-form-item
+      ><cds-slider-skeleton><cds-slider></cds-slider></cds-slider-skeleton
+    ></cds-form-item>
   `,
 };