diff --git a/.changeset/some-memes-own.md b/.changeset/some-memes-own.md
new file mode 100644
index 0000000000..fb72e666af
--- /dev/null
+++ b/.changeset/some-memes-own.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Removed all descriptions from the screenshot tests.
diff --git a/packages/docs/src/stories/components/accordion-group.test.stories.ts b/packages/docs/src/stories/components/accordion-group.test.stories.ts
index 3e212adc69..117a12f562 100644
--- a/packages/docs/src/stories/components/accordion-group.test.stories.ts
+++ b/packages/docs/src/stories/components/accordion-group.test.stories.ts
@@ -22,10 +22,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Vertical stack of sd-accordions.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -33,10 +29,6 @@ export const Default = {
   }
 };
 
-/**
- * Set 'close-others' to only have one accordion open.
- */
-
 export const CloseOthers = {
   name: 'One accordion open at a time',
   render: (args: any) => {
@@ -50,10 +42,6 @@ export const CloseOthers = {
   }
 };
 
-/**
- * Part of sd-accordion-group
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -76,10 +64,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-accordions inside a group are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -94,10 +78,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Accordion group can be used with background options of white, neutral-100 and primary-100.
- */
-
 export const Samples = {
   name: 'Samples',
   render: () => {
diff --git a/packages/docs/src/stories/components/accordion.test.stories.ts b/packages/docs/src/stories/components/accordion.test.stories.ts
index 42bb39554b..abd4e2911c 100644
--- a/packages/docs/src/stories/components/accordion.test.stories.ts
+++ b/packages/docs/src/stories/components/accordion.test.stories.ts
@@ -37,9 +37,6 @@ export const Default = {
   }
 };
 
-/**
- * An accordion item can either be collapsed or open.
- */
 export const States = {
   name: 'States',
   render: (args: any) => {
@@ -53,9 +50,6 @@ export const States = {
   }
 };
 
-/**
- * The summary can have multiple lines.
- */
 export const SummaryLength = {
   name: 'Summary Length',
   render: (args: any) => {
@@ -80,17 +74,6 @@ export const SummaryLength = {
   }
 };
 
-/**
- * Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively.
- * To disable the animation, override the rotate property on the summary-icon part as shown below:
- *
- * ```
- * sd-accordion.custom-icons::part(summary-icon) {
- *   rotate: none;
- * }
- * ```
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -156,10 +139,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-accordions are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/badge.test.stories.ts b/packages/docs/src/stories/components/badge.test.stories.ts
index 522729f1aa..5b3a87fdc8 100644
--- a/packages/docs/src/stories/components/badge.test.stories.ts
+++ b/packages/docs/src/stories/components/badge.test.stories.ts
@@ -29,10 +29,6 @@ export default {
   argTypes
 };
 
-/**
- * This shows the badge in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -40,10 +36,6 @@ export const Default = {
   }
 };
 
-/**
- * The badge in all possible combinations of `variant` and `size`.
- */
-
 export const VariantAndSize = {
   name: 'Variant × Size',
   render: (args: any) => {
@@ -57,10 +49,6 @@ export const VariantAndSize = {
   }
 };
 
-/**
- * The badge in all possible combinations of `variant` and `inverted`.
- */
-
 export const VariantAndInverted = {
   name: 'Variant × Inverted',
   render: (args: any) => {
@@ -80,11 +68,6 @@ export const VariantAndInverted = {
   }
 };
 
-/**
- * Use the `default` slot to add content to the badge.
- *
- * If you add icons to the slot, please make sure to account for accessibility by providing an alt-text.
- */
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -108,10 +91,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base` and `content` part selectors to customize the badge.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/brandshape.test.stories.ts b/packages/docs/src/stories/components/brandshape.test.stories.ts
index 9fac9309a9..c50986f9f8 100644
--- a/packages/docs/src/stories/components/brandshape.test.stories.ts
+++ b/packages/docs/src/stories/components/brandshape.test.stories.ts
@@ -75,9 +75,6 @@ const increaseColumnWidth = (): ConstantDefinition => {
   };
 };
 
-/**
- * Default: This shows sd-brandshape in its default state.
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -85,9 +82,6 @@ export const Default = {
   }
 };
 
-/**
- *  The different shapes of the brandshape.
- */
 export const Shapes = {
   name: 'Shapes',
   render: (args: any) => {
@@ -105,9 +99,6 @@ export const Shapes = {
   }
 };
 
-/**
- *  The different variants of the brandshape.
- */
 export const Variants = {
   name: 'Variants',
   render: (args: any) => {
@@ -153,9 +144,6 @@ export const Variants = {
   }
 };
 
-/**
- * The different breakpoints of the brandshape.
- */
 export const Breakpoints = {
   name: 'Breakpoints',
   render: (args: any) => {
@@ -185,9 +173,6 @@ export const Breakpoints = {
   }
 };
 
-/**
- * Use the `base`, `content`, `shape-top`, `shape-middle` or `shape-bottom` part selectors to customize the brandshape.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -210,9 +195,6 @@ export const Parts = {
   }
 };
 
-/**
- * When using the 'image' variant, use the transform property to adjust the image position. In this example, the image is moved up and skewed to fit the brandshape.
- */
 export const Sample = {
   name: 'Sample: Positioning Image Variant',
   render: () => {
diff --git a/packages/docs/src/stories/components/carousel-item.test.stories.ts b/packages/docs/src/stories/components/carousel-item.test.stories.ts
index 1e22a4bcaf..709c5b6756 100644
--- a/packages/docs/src/stories/components/carousel-item.test.stories.ts
+++ b/packages/docs/src/stories/components/carousel-item.test.stories.ts
@@ -19,10 +19,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * This shows sd-carousel-item in its default state.
- */
-
 export const Default = {
   render: (args: any) => {
     return generateTemplate({
diff --git a/packages/docs/src/stories/components/carousel.test.stories.ts b/packages/docs/src/stories/components/carousel.test.stories.ts
index e1e34ba9dc..5a0c909fbe 100644
--- a/packages/docs/src/stories/components/carousel.test.stories.ts
+++ b/packages/docs/src/stories/components/carousel.test.stories.ts
@@ -43,11 +43,6 @@ export default {
     `
   ]
 };
-
-/**
- * This shows sd-carousel in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -57,10 +52,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `variant` attribute to select the pagination format.
- */
-
 export const Variant = {
   name: 'Variant',
   render: (args: any) => {
@@ -73,10 +64,6 @@ export const Variant = {
   }
 };
 
-/**
- * Use the `inverted` attribute when displayed on primary background.
- */
-
 export const Inverted = {
   name: 'Inverted',
   render: (args: any) => {
@@ -107,10 +94,6 @@ export const Inverted = {
   }
 };
 
-/**
- * Use the `loop` attribute to enable/disable the looping of your slides.
- */
-
 export const Loop = {
   name: 'Loop',
   render: (args: any) => {
@@ -123,10 +106,6 @@ export const Loop = {
   }
 };
 
-/**
- * Use the `slides-per-page` attribute to set the number of slides that would be shown at a given time.
- */
-
 export const SlidesPerPage = {
   name: 'Slides Per Page',
   render: (args: any) => {
@@ -140,13 +119,6 @@ export const SlidesPerPage = {
   }
 };
 
-/**
- * Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>
- * <b>Note:</b><br>
- * <li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>
- * <li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>
- */
-
 export const SlidesPerMove = {
   name: 'Slides Per Move',
   render: (args: any) => {
@@ -210,10 +182,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-carousel are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -228,10 +196,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Use the `autoplay` attribute to toggle autoplay.
- */
-
 export const Autoplay = {
   name: 'Autoplay',
   render: (args: any) => {
@@ -248,10 +212,6 @@ export const Autoplay = {
   }
 };
 
-/**
- * Use the `fade` attribute to toggle fade effect.
- */
-
 export const Fade = {
   name: 'Fade',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/checkbox-group.test.stories.ts b/packages/docs/src/stories/components/checkbox-group.test.stories.ts
index 3a6121c644..fdd08d892d 100644
--- a/packages/docs/src/stories/components/checkbox-group.test.stories.ts
+++ b/packages/docs/src/stories/components/checkbox-group.test.stories.ts
@@ -39,10 +39,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-checkbox-group in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -50,10 +46,6 @@ export const Default = {
   }
 };
 
-/**
- * The sd-checkbox in all possible combinations of `orientation` and `size`.
- */
-
 export const Orientation = {
   name: 'Orientation',
   render: (args: any) => {
@@ -67,10 +59,6 @@ export const Orientation = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input checkbox. Clicks will be suppressed until the disabled state is removed
- */
-
 export const Disabled = {
   name: 'Disabled x Size',
   render: (args: any) => {
@@ -102,9 +90,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the `form-control`, `form-control-label` and `form-control-input` part selectors to customize the checkbox-group.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -127,9 +112,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-checkbox-group is fully accessibile via keyboard.
- */
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/checkbox.test.stories.ts b/packages/docs/src/stories/components/checkbox.test.stories.ts
index f272d7dfa9..da2c9d1b8c 100644
--- a/packages/docs/src/stories/components/checkbox.test.stories.ts
+++ b/packages/docs/src/stories/components/checkbox.test.stories.ts
@@ -31,10 +31,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-checkbox in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -42,10 +38,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input checkbox. Clicks will be suppressed until the disabled state is removed
- */
-
 export const DisabledAndSize = {
   name: 'Disabled × Size',
   render: (args: any) => {
@@ -70,10 +62,6 @@ export const DisabledAndSize = {
   }
 };
 
-/**
- * Use the `size` attribute to change the size of the input checkbox. This attribute affects the font-size within the element, while the element itself remains the same size.
- */
-
 export const Size = {
   name: 'Size',
   render: (args: any) => {
@@ -106,10 +94,6 @@ export const MultipleLines = {
   }
 };
 
-/**
- * Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
- */
-
 export const Required = {
   name: 'Required',
   render: (args: any) => {
@@ -171,10 +155,6 @@ export const Indeterminate = {
   }
 };
 
-/**
- * Test invalid state inside a form.
- */
-
 export const Invalid = {
   name: 'Invalid',
   render: (args: any) => {
@@ -218,9 +198,6 @@ export const IndeterminateInvalid = {
   }
 };
 
-/**
- * Use the `base`, `control--unchecked`, `control--checked`, `checked` and `label` part selectors to customize the checkbox.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -275,12 +252,6 @@ const checkboxTemplate = (part: string) => {
   }
 };
 
-/**
- * 1. You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- * 2. Set an empty string to clear the custom validity and make the input valid.
- * 3. To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
- */
-
 export const setCustomValidity = {
   name: 'setCustomValidity',
   parameters: {
diff --git a/packages/docs/src/stories/components/combobox.test.stories.ts b/packages/docs/src/stories/components/combobox.test.stories.ts
index de266e073f..85a2d59e27 100644
--- a/packages/docs/src/stories/components/combobox.test.stories.ts
+++ b/packages/docs/src/stories/components/combobox.test.stories.ts
@@ -114,9 +114,6 @@ export default {
   }
 };
 
-/**
- * This shows sd-combobox in its default state.
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -124,10 +121,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `label` attribute to give the combobox an accessible label. For labels that contain HTML, use the `label` slot instead.
- */
-
 export const Labels = {
   name: 'Label',
   args: {
@@ -138,9 +131,6 @@ export const Labels = {
   }
 };
 
-/**
- * Use the `floating-label` attribute to enable a floating label on the combobox.
- */
 export const FloatingLabel = {
   name: 'Floating Label',
   args: {
@@ -168,13 +158,6 @@ export const FloatingLabel = {
   }
 };
 
-/**
- * Use the `size` attribute to change the size. It will cascade to slotted `sd-option` elements:
- * - `lg` (default)
- * - `md`
- * - `sm`
- */
-
 export const SizeMultiple = {
   name: 'Size x Multiple',
   parameters: {
@@ -228,10 +211,6 @@ export const SizeMultiple = {
   }
 };
 
-/**
- * To allow multiple options to be selected, use the `multiple` attribute. It’s a good practice to use `clearable` when this option is enabled. To use the checkbox with tags variant, set the `useTags` variant to `true`.  To set multiple values at once, set value to a space-delimited list of values.  The preferred placement of the combobox’s listbox can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`.
- */
-
 export const DisabledMultiple = {
   name: 'Disabled x Multiple',
   parameters: {
@@ -297,10 +276,6 @@ export const DisabledMultiple = {
   }
 };
 
-/**
- * `sd-combobox` with valid and invalid styles.
- */
-
 export const ValidInvalid = {
   name: 'Valid x Invalid',
   parameters: {
@@ -389,9 +364,6 @@ export const ValidInvalid = {
   }
 };
 
-/**
- * This shows sd-combobox has the borders visible even when there is limited vertical space.
- */
 export const BorderVisibility = {
   name: 'Border visibility',
   render: () => {
@@ -426,9 +398,6 @@ export const BorderVisibility = {
   }
 };
 
-/**
- * Shows available slots. The `label` and `help-text` slots will overwrite their corresponding attributes.
- */
 export const Slots = {
   name: 'Slots',
   parameters: {
@@ -475,23 +444,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `form-control`,
- `form-control-label`,
- `form-control-input`,
- `form-control-help-text`,
- `combobox`,
- `display-input`,
- `listbox`,
- `tags`,
- `tag`,
- `tag__base`,
- `tag__content`,
- `tag__removable-indicator`,
- `clear-button`, and
- `expand-icon` part selectors to customize the combobox component.
- */
-
 const partsArr = [
   'form-control',
   'form-control-label',
@@ -579,9 +531,6 @@ export const Parts = {
   }
 };
 
-/**
- * The focus attribute provides feedback to the users, informing them that the combobox component is ready for use.
- */
 export const Focus = {
   name: 'Focus',
   play: ({ canvasElement }: { canvasElement: HTMLElement }) => {
@@ -611,10 +560,6 @@ export const Focus = {
   `
 };
 
-/**
- * Per default the combobox will indicate an error state when the input is invalid. Use the `style-on-valid` attribute to indicate a valid state as well.
- */
-
 export const StyleOnValid = {
   name: 'Style on valid',
   parameters: {
@@ -710,9 +655,6 @@ export const Tags = {
   `
 };
 
-/**
- * A simple suggestions list shows the user a filtered list.
- */
 export const SimpleSuggests = {
   name: 'Simple suggests',
   render: (args: { 'open-attr'?: string }) => {
@@ -734,9 +676,6 @@ export const SimpleSuggests = {
   }
 };
 
-/**
- * A message is shown if no results are found.
- */
 export const NotFoundMessage = {
   name: 'Not found message',
   render: (args: { 'open-attr'?: string }) => {
@@ -758,11 +697,6 @@ export const NotFoundMessage = {
   }
 };
 
-/**
- * The filtered options shown in the list can be customized by passing a function to the getOption property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getOption() function will be called for each option. The first argument is an element and the second argument is the query string.
- * Remember that the options are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.
- * Note: Be sure you trust the content you are outputting! Passing unsanitized user input to getOption() can result in XSS vulnerabilities.
- */
 export const HighlightQuery = {
   name: 'Highlight Query',
   render: () => {
@@ -797,10 +731,6 @@ export const HighlightQuery = {
   }
 };
 
-/**
- * `sd-combobox` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   parameters: {
@@ -872,10 +802,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Use `<sd-optgroup>` to group listbox items visually.
- */
-
 export const SampleGroupingOptions = {
   name: 'Sample: Grouping options and sizes',
   render: (args: any) => {
@@ -902,10 +828,6 @@ export const SampleGroupingOptions = {
   }
 };
 
-/**
- * Demonstrates the form behavior with validation styles when the `required` attribute is set to `true`.
- */
-
 export const SampleForm = {
   name: 'Sample: Form',
   parameters: {
@@ -1029,10 +951,6 @@ export const SampleForm = {
   }
 };
 
-/**
- * Demonstrates a form containing all existing Solid form elements.
- */
-
 export const SolidForm = {
   name: 'Sample: Solid form',
   parameters: {
@@ -1088,12 +1006,6 @@ export const SolidForm = {
   }
 };
 
-/**
- * 1. You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- * 2. Set an empty string to clear the custom validity and make the input valid.
- * 3. To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
- */
-
 export const setCustomValidity = {
   name: 'Set custom validity',
   parameters: {
diff --git a/packages/docs/src/stories/components/datepicker.test.stories.ts b/packages/docs/src/stories/components/datepicker.test.stories.ts
index 2f171ba05b..fa8bb00979 100644
--- a/packages/docs/src/stories/components/datepicker.test.stories.ts
+++ b/packages/docs/src/stories/components/datepicker.test.stories.ts
@@ -46,9 +46,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `label` attribute to give the datepicker an accessible label. For labels that contain HTML, use the `label` slot instead.
- */
 export const Labels = {
   name: 'Label',
   args: {
@@ -59,9 +56,6 @@ export const Labels = {
   }
 };
 
-/**
- * Use the `floating-label` attribute to enable a floating label on the datepicker.
- */
 export const FloatingLabel = {
   name: 'Floating Label',
   args: {
diff --git a/packages/docs/src/stories/components/dialog.test.stories.ts b/packages/docs/src/stories/components/dialog.test.stories.ts
index 6db150af55..18d9aa8f6b 100644
--- a/packages/docs/src/stories/components/dialog.test.stories.ts
+++ b/packages/docs/src/stories/components/dialog.test.stories.ts
@@ -7,10 +7,6 @@ const { overrideArgs } = storybookHelpers('sd-dialog');
 const { argTypes, parameters } = storybookDefaults('sd-dialog');
 const { generateTemplate } = storybookTemplate('sd-dialog');
 
-/**
- * **Disclaimer** : Input-based controls for `sd-dialog` are unavailable on this Docs page due to a [Storybook bug](https://github.com/solid-design-system/solid/issues/702). Please use the individual feature stories to access these controls.
- */
-
 export default {
   title: 'Components/sd-dialog/Screenshots: sd-dialog',
   tags: ['!autodocs'],
@@ -41,10 +37,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-dialog in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -56,10 +48,6 @@ export const Default = {
   }
 };
 
-/**
- * This shows sd-dialog without a close button. However, you should always include a close button to comply with ARIA principles. If the close button is omitted, the close action has to be applied to one button in the footer slot.
- */
-
 export const NoCloseButton = {
   name: 'No Close Button',
   render: (args: any) => {
@@ -89,10 +77,6 @@ export const NoCloseButton = {
   }
 };
 
-/**
- * This shows sd-dialog’s height will never exceed that of the viewport. As such, sd-dialogs will not scroll with the page ensuring the contents are always accessible to the user. It is recomended to use `sd-scrollable` with an enabled shadow property for scrolling content in the `default` slot.
- */
-
 export const Scrolling = {
   name: 'Scrolling',
   render: (args: any) => {
@@ -111,24 +95,6 @@ export const Scrolling = {
   }
 };
 
-/**
- *  This sample displays `sd-dialog` with two `sd-button` components in the footer slot. When incorporating multiple `sd-buttons`, it is recommended to use distinct button variants for clarity and consistency in user interactions.
- *
- * You can use the CSS part `sd-dialog::part(footer)` to customize button layout based on your requirements. For instance, you may opt for columns instead of rows for mobile devices, and so on. To achieve that we used the additional style:
- *
- * ```css
- *
- *   @media (max-width: 414px) {
-          sd-dialog::part(footer){
-            flex-direction: column;
- *   }
- * }
-
- * ```
- *
- *
- */
-
 export const ExtendedFooter = {
   name: 'Sample: Extended Footer',
   render: () => {
@@ -156,10 +122,6 @@ export const ExtendedFooter = {
   }
 };
 
-/**
- *  This sample displays `sd-dialog` with smaller headline sizes using the <span> tag instead of headings (eg: h2, h3, etc.).
- */
-
 export const SmallHeadline = {
   name: 'Sample: Small Headline',
   render: () => {
@@ -178,10 +140,6 @@ export const SmallHeadline = {
   }
 };
 
-/**
- * sd-dialog is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/divider.test.stories.ts b/packages/docs/src/stories/components/divider.test.stories.ts
index 579ebf9c6a..017462d717 100644
--- a/packages/docs/src/stories/components/divider.test.stories.ts
+++ b/packages/docs/src/stories/components/divider.test.stories.ts
@@ -45,9 +45,6 @@ export default {
     `
   ]
 };
-/**
- * This shows sd-divider in its default state.
- */
 
 export const Default = {
   name: 'Default',
@@ -56,10 +53,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the orientation attribute to set the axis of a divider.
- */
-
 export const Orientation = {
   name: 'Orientation',
   render: (args: any) => {
@@ -72,10 +65,6 @@ export const Orientation = {
   }
 };
 
-/**
- * Use the inverted attribute to make a divider with inverted colors.
- */
-
 export const Inverted = {
   name: 'Inverted',
   render: (args: any) => {
@@ -94,10 +83,6 @@ export const Inverted = {
   }
 };
 
-/**
- * You can set the component's size with `width` (horizontal) or `height` (vertical) via CSS or inline-styles.
- */
-
 export const Sizes = {
   name: 'Sizes',
   render: (args: any) => {
@@ -131,10 +116,6 @@ export const Sizes = {
   }
 };
 
-/**
- * Use the `main` part selector to customize the divider.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/drawer.test.stories.ts b/packages/docs/src/stories/components/drawer.test.stories.ts
index bf44b9be0a..f7fa7e4617 100644
--- a/packages/docs/src/stories/components/drawer.test.stories.ts
+++ b/packages/docs/src/stories/components/drawer.test.stories.ts
@@ -52,9 +52,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-drawer in its default state.
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -66,9 +63,6 @@ export const Default = {
   }
 };
 
-/**
- * Drawer with a tertiary button in the header. In case there's a requirement not to have left-padding in the header, as it's the case with the tertiary button in the `header` slot, you can override the `sd-drawer::part(header)` selector by applying a `left-padding: 0;` style.
- */
 export const ButtonInHeader = {
   name: 'Button in Header',
   render: (args: any) => {
@@ -92,9 +86,6 @@ export const ButtonInHeader = {
   }
 };
 
-/**
- * If you do not need a header, you can remove it by applying the `no-header` attribute.
- */
 export const NoHeader = {
   name: 'No Header',
   render: (args: any) => {
@@ -113,9 +104,6 @@ export const NoHeader = {
   }
 };
 
-/**
- * If you do not need a footer, you can remove it by omitting the footer slot.
- */
 export const NoFooter = {
   name: 'No Footer',
   render: (args: any) => {
@@ -134,9 +122,6 @@ export const NoFooter = {
   }
 };
 
-/**
- * In case it is neccessary the padding in header, body and footer can be removed by overriding the `sd-drawer::part(header)`, `sd-drawer::part(body)`,`sd-drawer::part(footer)` selectors by applying a `left-padding: 0;` style, or adjusted with other values that fit the requirements.
- */
 export const Padding = {
   name: 'Padding',
   render: (args: any) => {
@@ -177,9 +162,6 @@ export const Padding = {
   }
 };
 
-/**
- * The drawer placement can be start or end.
- */
 export const Placement = {
   name: 'Placement',
   render: (args: any) => {
@@ -208,9 +190,6 @@ export const Placement = {
   }
 };
 
-/**
- *By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the autofocus attribute to it
- */
 export const Autofocus = {
   name: 'Autofocus',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/dropdown.test.stories.ts b/packages/docs/src/stories/components/dropdown.test.stories.ts
index 22ef58717a..539e0efe38 100644
--- a/packages/docs/src/stories/components/dropdown.test.stories.ts
+++ b/packages/docs/src/stories/components/dropdown.test.stories.ts
@@ -86,10 +86,6 @@ export default {
   ] as unknown
 };
 
-/**
- * Default: This shows sd-dropdown in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -106,10 +102,6 @@ export const Default = {
   }
 };
 
-/**
- * For round triggers (like e. g. default `sd-buttons`), set the `rounded` attribute. This sets a rounding on the dropdown and automatically adds a minimal distance of 1px between the trigger and the panel.
- */
-
 export const Rounded = {
   name: 'Rounded',
   render: (args: any) =>
@@ -129,11 +121,6 @@ export const Rounded = {
     })
 };
 
-/**
- * The dropdown automatically adjusts its size to fit the screen. The content gets scrollable then. To disable this behavior, set the `no-auto-size` attribute.
- * Note: `no-flip` is activated here.
- */
-
 export const NoAutoSize = {
   name: 'No Auto Size',
   render: (args: any) =>
@@ -161,10 +148,6 @@ export const NoAutoSize = {
     })
 };
 
-/**
- * The dropdown automatically flips its position to stay most visible in the viewport. To disable this behavior, set the `no-flip` attribute.
- */
-
 export const NoFlip = {
   name: 'No Flip',
   render: (args: any) =>
@@ -184,11 +167,6 @@ export const NoFlip = {
     })
 };
 
-/**
- * The preferred placement of the dropdown can be set with the `placement` attribute.
- * Note that the actual position may vary to ensure the panel remains in the viewport.
- */
-
 export const Placement = {
   name: 'Placement',
   render: (args: any) => {
@@ -221,11 +199,6 @@ export const Placement = {
   }
 };
 
-/**
- * The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
- * Have in mind, that the default distance depends on whether the dropdown is rounded or not.
- */
-
 export const Distance = {
   name: 'Distance',
   render: (args: any) => {
@@ -258,10 +231,6 @@ export const Distance = {
   }
 };
 
-/**
- * The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
- */
-
 export const Skidding = {
   name: 'Skidding',
   render: (args: any) => {
@@ -283,10 +252,6 @@ export const Skidding = {
   }
 };
 
-/**
- * Use the `default` slot to place the content of the dropdown.
- * Use the `trigger` slot to place a trigger like e. g. a button.
- */
 export const Slots = {
   name: 'Slots',
   decorators: [
@@ -322,10 +287,6 @@ export const Slots = {
   }
 };
 
-/**
- * sd-dropdowns and their content are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/expandable.test.stories.ts b/packages/docs/src/stories/components/expandable.test.stories.ts
index 483b8bf9ef..2843576edd 100644
--- a/packages/docs/src/stories/components/expandable.test.stories.ts
+++ b/packages/docs/src/stories/components/expandable.test.stories.ts
@@ -26,9 +26,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Used to show a brief summary and expands to show additional content
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -38,9 +35,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the inverted attribute to make an expandable with inverted colors.
- */
 export const Inverted = {
   name: 'Inverted',
   render: (args: any) => {
@@ -73,9 +67,6 @@ export const Inverted = {
   }
 };
 
-/**
- * Use the `default`, `toggle-open` and `toggle-closed` slots to add content to the expandable.
- */
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -105,9 +96,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base`, `content`, `toggle`, `toggle-icon`, `summary` and `details` parts to style the expandable.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -129,10 +117,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-expandable is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -146,11 +130,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Expandable can be used with background options of white, neutral-100 and primary-100. When using these options, use the `--gradient-color-start` and `--gradient-color-end` CSS variables to align the gradient colors.
- *
- * The inverted attribute can be used when the background is primary. The default slot can be used with 2 variants for alternate expandable experiences: lead text and paragraph.
- */
 export const Samples = {
   name: 'Samples',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/flipcard.test.stories.ts b/packages/docs/src/stories/components/flipcard.test.stories.ts
index af175e0f09..382d00c649 100644
--- a/packages/docs/src/stories/components/flipcard.test.stories.ts
+++ b/packages/docs/src/stories/components/flipcard.test.stories.ts
@@ -42,9 +42,6 @@ export default {
   argTypes,
   parameters: { ...parameters, controls: { disable: true } }
 };
-/**
- * This shows sd-flipcard in its default state.
- */
 
 export const Default = {
   name: 'Default',
@@ -67,10 +64,6 @@ export const Default = {
   }
 };
 
-/**
- * The sd-flipcard can be displayed in several ways using the `front-variant` and `back-variant` attributes. This example shows the usage `front-variant` attribute.
- */
-
 export const Variants = {
   name: 'Variants',
   render: (args: any) =>
@@ -116,10 +109,6 @@ export const Variants = {
     })
 };
 
-/**
- * Use the `flip-direction` attribute to determine the direction of the flipcard. There are two options: `horizontal` and `vertical`.
- */
-
 export const flipDirection = {
   name: 'Flip Direction',
   render: (args: any) =>
@@ -151,9 +140,6 @@ export const flipDirection = {
     })
 };
 
-/**
- * Use the `front`, `back`, `front-media` and `back-media` slots to add content to the flipcard.
- */
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -207,9 +193,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base`, `front`, `back`, `front-button`, `back-button`,  `front-interactive-container`, `back-interactive-container`, `front-slot-container`, `back-slot-container`, `front-media`, `back-media`, `front-secondary-gradient` and `back-secondary-gradient` parts to style the flipcard.
- */
 export const Parts = {
   name: 'Parts',
   parameters: {
@@ -289,10 +272,6 @@ export const Parts = {
   }
 };
 
-/**
- * `sd-flipcard` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -324,10 +303,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Here is a sample of the `sd-flipcard` with custom content in the `front` and `back` slots. The activation is set to `click-only` in order allow the user to click on links/buttons inside the flipcard.
- */
-
 export const Sample = {
   name: 'Sample: Custom Content',
   render: () => {
@@ -361,10 +336,6 @@ export const Sample = {
   }
 };
 
-/**
- * You can set a custom aspect ratio (eg: 16:9) for the `sd-flipcard` using plain CSS.
- */
-
 export const AspectRatio = {
   name: 'Sample: Aspect Ratio',
   render: () => {
diff --git a/packages/docs/src/stories/components/header.test.stories.ts b/packages/docs/src/stories/components/header.test.stories.ts
index 0a46e6b8ee..66cb0a1a9b 100644
--- a/packages/docs/src/stories/components/header.test.stories.ts
+++ b/packages/docs/src/stories/components/header.test.stories.ts
@@ -68,10 +68,6 @@ export default {
   ] as unknown
 };
 
-/**
- * Default: This shows sd-header in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/input.test.stories.ts b/packages/docs/src/stories/components/input.test.stories.ts
index ea58adf8ed..51eafbd0e9 100644
--- a/packages/docs/src/stories/components/input.test.stories.ts
+++ b/packages/docs/src/stories/components/input.test.stories.ts
@@ -65,10 +65,6 @@ export default {
   }
 };
 
-/**
- * This shows sd-input in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -76,10 +72,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
- */
-
 export const Labels = {
   name: 'Label',
   args: overrideArgs([{ type: 'attribute', name: 'label', value: 'Label' }]),
@@ -94,9 +86,6 @@ export const Labels = {
   }
 };
 
-/**
- * Use the `floating-label` attribute to enable a floating label on the input.
- */
 export const FloatingLabel = {
   name: 'Floating Label',
   args: {
@@ -124,10 +113,6 @@ export const FloatingLabel = {
   }
 };
 
-/**
- * Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
- */
-
 export const HelpText = {
   name: 'Help Text',
   args: overrideArgs([
@@ -157,10 +142,6 @@ export const HelpText = {
   }
 };
 
-/**
- * Use the `placeholder` attribute to add a placeholder.
- */
-
 export const Placeholders = {
   name: 'Placeholders',
   args: overrideArgs([{ type: 'attribute', name: 'placeholder', value: 'Type something' }]),
@@ -187,10 +168,6 @@ export const Placeholders = {
   }
 };
 
-/**
- * Add the `clearable` attribute to add a clear button when the input has content.
- */
-
 export const Clearable = {
   name: 'Clearable',
   args: overrideArgs([{ type: 'attribute', name: 'clearable', value: true }]),
@@ -217,10 +194,6 @@ export const Clearable = {
   }
 };
 
-/**
- * Add the `password-toggle` attribute to add a toggle button that will show the password when activated. Only works with `type="password"`.
- */
-
 export const TogglePassword = {
   name: 'Toggle password',
   args: overrideArgs([{ type: 'attribute', name: 'type', value: 'password' }]),
@@ -255,10 +228,6 @@ export const TogglePassword = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input. All interaction is disabled and no events will be fired.
- */
-
 export const Disabled = {
   name: 'Disabled',
   args: overrideArgs([
@@ -293,10 +262,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the readonly attribute to render an input as readonly.  Interaction is enabled, but the input cannot be edited.  Events will be fired.
- */
-
 export const Readonly = {
   name: 'Readonly',
   args: overrideArgs([
@@ -331,10 +296,6 @@ export const Readonly = {
   }
 };
 
-/**
- * This shows sd-input in its various sizes.
- */
-
 export const Sizes = {
   name: 'Sizes',
   args: overrideArgs([
@@ -376,10 +337,6 @@ export const Sizes = {
   }
 };
 
-/**
- * Per default the input will indicate an error state when the input is invalid. Use the `style-on-valid` attribute to indicate a valid state as well.
- */
-
 export const StyleOnValid = {
   name: 'Style on valid',
   args: overrideArgs([
@@ -433,10 +390,6 @@ export const StyleOnValid = {
   }
 };
 
-/**
- * Demonstrates the allowed input types.
- */
-
 export const Types = {
   name: 'Types',
   render: (args: any) => {
@@ -714,10 +667,6 @@ export const Types = {
   }
 };
 
-/**
- * Demonstrates the various validation options extended from the native input element in addition to error and success styles.
- */
-
 export const Validation = {
   name: 'Validation',
   render: (args: any) => {
@@ -997,10 +946,6 @@ export const Validation = {
   }
 };
 
-/**
- * Shows available slots. The `label` and `help-text` slots will overwrite their corresponding attributes.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -1047,10 +992,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `form-control`, `form-control-label`, `form-control-input`, `form-control-help-text`, `base`, `border`, `input`, `left`, `clear-button`, and `right` part selectors to customize the input.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -1099,12 +1040,6 @@ export const Parts = {
   }
 };
 
-/**
- * 1. You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- * 2. Set an empty string to clear the custom validity and make the input valid.
- * 3. To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
- */
-
 export const setCustomValidity = {
   name: 'setCustomValidity',
   parameters: {
@@ -1160,10 +1095,6 @@ export const setCustomValidity = {
   }
 };
 
-/**
- * `sd-input` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/loader.test.stories.ts b/packages/docs/src/stories/components/loader.test.stories.ts
index d1ba91a9b7..05766667e0 100644
--- a/packages/docs/src/stories/components/loader.test.stories.ts
+++ b/packages/docs/src/stories/components/loader.test.stories.ts
@@ -27,10 +27,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-loader in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -38,10 +34,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `color` attribute to change the color of the loader and correspond (currentColor) with the parents color.
- */
-
 export const Variants = {
   name: 'Variants',
   render: (args: any) => {
@@ -63,10 +55,6 @@ export const Variants = {
   }
 };
 
-/**
- * Use the font-size in css to scale the loader.
- */
-
 export const Size = {
   name: 'Size',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/map-marker.test.stories.ts b/packages/docs/src/stories/components/map-marker.test.stories.ts
index 1fed0f2cea..e528af6aa1 100644
--- a/packages/docs/src/stories/components/map-marker.test.stories.ts
+++ b/packages/docs/src/stories/components/map-marker.test.stories.ts
@@ -27,10 +27,6 @@ export default {
   argTypes
 };
 
-/**
- * This shows the badge in its default state and variant.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -38,9 +34,6 @@ export const Default = {
   }
 };
 
-/**
- * The marker in its 'Cluster' variant in all possible states.
- */
 export const VariantCluster = {
   name: 'Variant Cluster',
   render: (args: any) => {
@@ -70,9 +63,6 @@ export const VariantCluster = {
   }
 };
 
-/**
- * The marker in its 'Main' variant in all possible states.
- */
 export const VariantMain = {
   name: 'Variant Main',
   render: (args: any) => {
@@ -97,9 +87,6 @@ export const VariantMain = {
   }
 };
 
-/**
- * The marker in its 'Place' variant in all possible states.
- */
 export const VariantPlace = {
   name: 'Variant Place',
   render: (args: any) => {
@@ -124,9 +111,6 @@ export const VariantPlace = {
   }
 };
 
-/**
- * Use the 'default' slot to add content to the marker.
- */
 export const Slots = {
   name: 'Slots',
   render: () => {
@@ -150,9 +134,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the '--map-marker-scaling' css variable to scale the marker to your needs.
- */
 export const Scale = {
   name: 'Scale',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/navigation-item.test.stories.ts b/packages/docs/src/stories/components/navigation-item.test.stories.ts
index 9fa632aecc..e945de363f 100644
--- a/packages/docs/src/stories/components/navigation-item.test.stories.ts
+++ b/packages/docs/src/stories/components/navigation-item.test.stories.ts
@@ -45,10 +45,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * The `sd-navigation-item` in its default state as a horizontally oriented button.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -56,10 +52,6 @@ export const Default = {
   }
 };
 
-/**
- * The `sd-navigation-item` in the current state and different variants
- */
-
 export const Current = {
   name: 'Variant x Current',
   render: (args: any) =>
@@ -72,10 +64,6 @@ export const Current = {
     })
 };
 
-/**
- * There are 3 variants determined by the `href` and `vertical` properties in addition to the `children` slot.  Each variant has 3 size options to define text size.
- */
-
 export const Variants = {
   name: 'Variant × Size',
   render: (args: any) => {
@@ -122,10 +110,6 @@ export const Variants = {
   }
 };
 
-/**
- * The navigation element when `disabled` is true.
- */
-
 export const Disabled = {
   name: 'Disabled',
   render: (args: any) => {
@@ -163,11 +147,6 @@ export const Disabled = {
   }
 };
 
-/**
- * When `vertical` is false, `sd-navigation-item` will render as a `<button>` or link `<a>` if given an `href`.
- * Horizontal variants have a reduced API and ignore the excluded properties.
- */
-
 export const VerticalAndCurrent = {
   name: 'Vertical × Current',
   render: (args: any) => {
@@ -183,10 +162,6 @@ export const VerticalAndCurrent = {
   }
 };
 
-/**
- * `href` can be used to create a link.
- */
-
 export const VerticalAndLink = {
   name: 'Vertical × Link',
   render: (args: any) => {
@@ -202,10 +177,6 @@ export const VerticalAndLink = {
   }
 };
 
-/**
- * Displays chevron property behaviors.  Vertical Button / Link variants show right facing chevron dependent on property.  Accordion variant always show up / down chevron to reflect open state.
- */
-
 export const Chevron = {
   name: 'Chevron',
   render: (args: any) => {
@@ -273,10 +244,6 @@ export const Separated = {
   }
 };
 
-/**
- * When `indented` is true, padding is added to the left side.  When `relaxed` is true, padding is added to both sides.
- */
-
 export const IndentedRelaxed = {
   name: 'Indented × Relaxed',
   render: (args: any) => {
@@ -298,10 +265,6 @@ export const IndentedRelaxed = {
   }
 };
 
-/**
- * Shows available slots.  `description`is only used when `vertical`is true.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -350,10 +313,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base`, `content`, `chevron`, and `description` part selectors to customize the navigation item.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -423,10 +382,6 @@ export const Parts = {
   }
 };
 
-/**
- * `sd-navigation-item` is fully accessibile via keyboard in all variants. Tab through the story to try each variant.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/notification.test.stories.ts b/packages/docs/src/stories/components/notification.test.stories.ts
index dffe34c1d2..778c947162 100644
--- a/packages/docs/src/stories/components/notification.test.stories.ts
+++ b/packages/docs/src/stories/components/notification.test.stories.ts
@@ -46,10 +46,6 @@ export default {
   ]
 };
 
-/**
- * This shows sd-notification in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -59,10 +55,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `variant` attribute to change the theme of the notification.
- */
-
 export const Variants = {
   name: 'Variants',
   render: (args: any) => {
@@ -76,10 +68,6 @@ export const Variants = {
   }
 };
 
-/**
- * Use the `closable` attribute to toggle a close button.
- */
-
 export const Closable = {
   name: 'Closable',
   render: (args: any) => {
@@ -93,10 +81,6 @@ export const Closable = {
   }
 };
 
-/**
- * Use the `duration` attribute to set the duration (in milliseconds) of the notification.
- */
-
 export const Duration = {
   name: 'Duration',
   render: (args: any) => {
@@ -110,10 +94,6 @@ export const Duration = {
   }
 };
 
-/**
- * Use the `duration-indicator` attribute to enable an animation that visualizes the duration of a notification.
- */
-
 export const DurationIndicator = {
   name: 'Duration Indicator',
   render: (args: any) => {
@@ -130,9 +110,6 @@ export const DurationIndicator = {
   }
 };
 
-/**
- * Display a toast notification at the top-right of the screen by using the `toast` method. Click on the **Show code** button to see the JavaScript code responsible for generating the toast notification. The default position is `top-right`.
- */
 export const ToastNotification = {
   name: 'Toast Notification (Default)',
   render: (_args: Record<string, any>) => {
@@ -199,9 +176,6 @@ export const ToastNotification = {
   }
 };
 
-/**
- * Display a toast notification positioned at the bottom-center of the screen by setting the `toastStack` attribute to `bottom-center`. Click on the **Show code** button to see the JavaScript code responsible for generating the toast notification.
- */
 export const ToastBottomCenter = {
   name: 'Toast Notification (Bottom Center)',
   render: (_args: Record<string, any>) => {
@@ -271,10 +245,6 @@ export const ToastBottomCenter = {
   }
 };
 
-/**
- * Use the `base`, `icon`, `content`, `message`, `duration-indicator__elapsed`, `duration-indicator__total` and `close-button`, part selectors to customize the notification.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -310,10 +280,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-notifications are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/optgroup.test.stories.ts b/packages/docs/src/stories/components/optgroup.test.stories.ts
index ae1d3ef3ba..ea52ecd303 100644
--- a/packages/docs/src/stories/components/optgroup.test.stories.ts
+++ b/packages/docs/src/stories/components/optgroup.test.stories.ts
@@ -42,10 +42,6 @@ export default {
   }
 };
 
-/**
- * Use <sd-optgroup> to group listbox items visually.
- */
-
 export const Default = {
   name: 'Default',
   parameters: {
@@ -66,10 +62,6 @@ export const Default = {
   `
 };
 
-/**
- * Use the disabled attribute in the <syn-optgroup> to disable the Section and prevent it from being selected.
- */
-
 export const Disabled = {
   name: 'Disabled',
   render: () => html`
@@ -85,9 +77,6 @@ export const Disabled = {
   `
 };
 
-/**
- * Shows available slots. The `label` and `help-text` slots will overwrite their corresponding attributes.
- */
 export const Slots = {
   name: 'Slots',
   parameters: {
@@ -127,23 +116,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `form-control`,
- `form-control-label`,
- `form-control-input`,
- `form-control-help-text`,
- `combobox`,
- `display-input`,
- `listbox`,
- `tags`,
- `tag`,
- `tag__base`,
- `tag__content`,
- `tag__removable-indicator`,
- `clear-button`, and
- `expand-icon` part selectors to customize the combobox component.
- */
-
 const partsArr = ['base', 'label-container', 'divider', 'options'];
 
 export const Parts = {
diff --git a/packages/docs/src/stories/components/option.test.stories.ts b/packages/docs/src/stories/components/option.test.stories.ts
index 8d776c8f34..793ff77389 100644
--- a/packages/docs/src/stories/components/option.test.stories.ts
+++ b/packages/docs/src/stories/components/option.test.stories.ts
@@ -12,10 +12,6 @@ const { generateTemplate } = storybookTemplate('sd-option');
 const { overrideArgs } = storybookHelpers('sd-option');
 const { generateScreenshotStory } = storybookUtilities;
 
-/**
- * Options define the selectable items within various form controls such as `sd-select`
- */
-
 export default {
   title: 'Components/sd-option/Screenshots: sd-option',
   tags: ['!autodocs'],
@@ -38,10 +34,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-option in its default state.
- */
-
 export const Default = {
   name: 'Default',
   args: overrideArgs({ type: 'slot', name: 'default', value: 'Option' }),
@@ -52,10 +44,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `disabled` attribute to disable an option. Clicks will be suppressed until the disabled state is removed. Use the `checkbox` attribute to prefix a styled checkbox. Enabled automatically when using `sd-select` with attribute `checklist` set to `true`.
- */
-
 export const DisabledCheckbox = {
   name: 'Disabled x Checkbox',
   render: (args: any) => {
@@ -78,10 +66,6 @@ export const DisabledCheckbox = {
   }
 };
 
-/**
- * Use the `size` attribute to change a select’s size. This will be inherited automatically from the `size` attribute of the parent `sd-select`.
- */
-
 export const SizeCheckbox = {
   name: 'Size x Checkbox',
   render: (args: any) => {
@@ -103,10 +87,6 @@ export const SizeCheckbox = {
   }
 };
 
-/**
- * Shows available slots.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -150,10 +130,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base`, `label`, `left`, `right` part selectors to customize the option.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/quickfact.test.stories.ts b/packages/docs/src/stories/components/quickfact.test.stories.ts
index c9bd05b8bf..0f61e64ecf 100644
--- a/packages/docs/src/stories/components/quickfact.test.stories.ts
+++ b/packages/docs/src/stories/components/quickfact.test.stories.ts
@@ -18,12 +18,6 @@ const { overrideArgs } = storybookHelpers('sd-quickfact');
 const { generateTemplate } = storybookTemplate('sd-quickfact');
 const { generateScreenshotStory } = storybookUtilities;
 
-/**
- *
- *  **Disclaimer:** Due to a bug with Storybook Controls, the `expandable` attribute controls might not behave as expected. Please refresh the page if you wish to reset the controls.
- *
- *  You can follow this issue here: https://github.com/storybookjs/storybook/issues/28634
- */
 export default {
   title: 'Components/sd-quickfact/Screenshots: sd-quickfact',
   tags: ['!autodocs'],
@@ -62,9 +56,6 @@ export const Default = {
   }
 };
 
-/**
- * A quickfact item can either be collapsed or open.
- */
 export const States = {
   name: 'States',
   render: (args: any) => {
@@ -81,9 +72,6 @@ export const States = {
   }
 };
 
-/**
- * A quickfact item can either be collapsed or open.
- */
 export const Expandable = {
   name: 'Expandable',
   render: (args: any) => {
@@ -97,11 +85,6 @@ export const Expandable = {
   }
 };
 
-/**
- * This shows sd-quickfact in a mobile view. **Please navigate to the `Mobile` story** (you are now on the `Docs` page) to accurately view this behavior.
-
- */
-
 export const Mobile = {
   name: 'Mobile',
   render: (args: any) => {
@@ -120,9 +103,6 @@ export const Mobile = {
   }
 };
 
-/**
- * The summary can have multiple lines.
- */
 export const SummaryLength = {
   name: 'Summary Length',
   render: (args: any) => {
@@ -150,17 +130,6 @@ export const SummaryLength = {
   }
 };
 
-/**
- * Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively.
- * To disable the animation, override the rotate property on the summary-icon part as shown below:
- *
- * ```
- * sd-quickfact.custom-icons::part(summary-icon) {
- *   rotate: none;
- * }
- * ```
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -228,10 +197,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-quickfacts are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -247,9 +212,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * This is a sample of how to group sd-quickfacts in a grid layout. Additional JavaScript is used to enable closing all other quickfacts when one is opened and to equalize the height of all summaries in a row. Open the "Show code" section to see the detailed implementation.
- */
 export const Sample = {
   name: 'Sample: Grouping',
   parameters: { ...parameters, docs: { story: { inline: false, height: '800px' } } },
diff --git a/packages/docs/src/stories/components/radio-button.test.stories.ts b/packages/docs/src/stories/components/radio-button.test.stories.ts
index dd356a4604..efa9216ae6 100644
--- a/packages/docs/src/stories/components/radio-button.test.stories.ts
+++ b/packages/docs/src/stories/components/radio-button.test.stories.ts
@@ -12,10 +12,6 @@ const { overrideArgs } = storybookHelpers('sd-radio-button');
 const { generateTemplate } = storybookTemplate('sd-radio-button');
 const { generateScreenshotStory } = storybookUtilities;
 
-/**
- * The `sd-radio-button` is a type of a radio-group-item similar to `sd-radio` which can be slotted insde of an `sd-radio-group`.  Radio button provides a button-style control for users to select one option from a group. Unlike `sd-radio`, `sd-radio-button` does not have an invalid state and should always have a pre-selected option (default value).
- */
-
 export default {
   title: 'Components/sd-radio-button/Screenshots: sd-radio-button',
   tags: ['!autodocs'],
@@ -36,10 +32,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-radio-button in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -47,10 +39,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `size` attribute to change the size of the input radio. This attribute affects the font-size within the element, while the element itself remains the same size.
- */
-
 export const Size = {
   name: 'Size',
   render: (args: any) => {
@@ -63,10 +51,6 @@ export const Size = {
   }
 };
 
-/**
- * Use the show-label attribute to show the label of the radio button.
- */
-
 export const LabelAndSize = {
   name: 'Label × Size',
   render: (args: any) => {
@@ -84,10 +68,6 @@ export const LabelAndSize = {
   }
 };
 
-/**
- * Label only
- */
-
 export const LabelOnly = {
   name: 'Label only',
   render: (args: any) => {
@@ -112,10 +92,6 @@ export const LabelOnly = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input radio. Clicks will be suppressed until the disabled state is removed. `Checked` is an "internal" attribute but is shown here as an example of all possible combinations.
- */
-
 export const DisabledAndChecked = {
   name: 'Disabled × Checked',
   render: () => {
@@ -142,9 +118,6 @@ export const DisabledAndChecked = {
   }
 };
 
-/**
- * Use the `base`, `button`, `button--checked`, `icon` and `label` part selectors to customize the radio-button.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/radio-group.test.stories.ts b/packages/docs/src/stories/components/radio-group.test.stories.ts
index 20605f201a..e29c4afa68 100644
--- a/packages/docs/src/stories/components/radio-group.test.stories.ts
+++ b/packages/docs/src/stories/components/radio-group.test.stories.ts
@@ -43,10 +43,6 @@ export default {
   argTypes
 };
 
-/**
- * Default: This shows sd-radio-group in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -54,10 +50,6 @@ export const Default = {
   }
 };
 
-/**
- * The sd-radio in all possible combinations of `orientation` and `size`.
- */
-
 export const Orientation = {
   name: 'Orientation',
   render: (args: any) => {
@@ -71,10 +63,6 @@ export const Orientation = {
   }
 };
 
-/**
- * Use the disabled attribute to disable a input radio. Clicks will be suppressed until the disabled state is removed
- */
-
 export const Disabled = {
   name: 'Disabled x Size',
   render: (args: any) => {
@@ -106,10 +94,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the `invalid` attribute to mark the element is not in a format or a value the application will accept.
- */
-
 export const Invalid = {
   name: 'Invalid',
   render: (args: any) => {
@@ -139,9 +123,6 @@ export const Invalid = {
   }
 };
 
-/**
- * Use the `form-control`, `form-control-label` and `form-control-input` part selectors to customize the radio-group.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -164,9 +145,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-radio-group are fully accessibile via keyboard.
- */
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -186,10 +164,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * This shows `sd-radio-group` using multiple `sd-radio-buttons` in it's default state.
- */
-
 export const RadioButtons = {
   name: 'Radio Buttons',
   render: (args: any) => {
@@ -212,10 +186,6 @@ export const RadioButtons = {
   }
 };
 
-/**
- * `sd-radio-group` with multiple `sd-radio-buttons` is fully accessibile via keyboard.
- */
-
 export const MouselessWithRadioButtons = {
   name: 'Mouseless with Radio Buttons',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/select.test.stories.ts b/packages/docs/src/stories/components/select.test.stories.ts
index 0e37f229be..efba3077f2 100644
--- a/packages/docs/src/stories/components/select.test.stories.ts
+++ b/packages/docs/src/stories/components/select.test.stories.ts
@@ -92,10 +92,6 @@ export default {
   }
 };
 
-/**
- * This shows sd-select in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -103,9 +99,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `label` attribute to give the combobox an accessible label. For labels that contain HTML, use the `label` slot instead.
- */
 export const Labels = {
   name: 'Label',
   args: {
@@ -116,9 +109,6 @@ export const Labels = {
   }
 };
 
-/**
- * Use the `floating-label` attribute to enable a floating label on the combobox.
- */
 export const FloatingLabel = {
   name: 'Floating Label',
   args: {
@@ -144,10 +134,6 @@ export const FloatingLabel = {
   }
 };
 
-/**
- * Use the `size` attribute to change a select’s size. It will cascade to slotted `sd-option` elements.
- */
-
 export const SizeMultiple = {
   name: 'Size x Multiple',
   render: (args: { open?: string }) => {
@@ -211,10 +197,6 @@ export const SizeMultiple = {
   }
 };
 
-/**
- * To allow multiple options to be selected, use the `multiple` attribute. It’s a good practice to use `clearable` when this option is enabled. To use the checkbox with tags variant, set the `useTags` variant to `true`.  To set multiple values at once, set value to a space-delimited list of values.  The preferred placement of the select’s listbox can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`.
- */
-
 export const DisabledMultiple = {
   name: 'Disabled x Multiple',
   render: (args: { 'open-attr'?: string }) => {
@@ -289,10 +271,6 @@ export const DisabledMultiple = {
   }
 };
 
-/**
- * `sd-select` with valid and invalid styles.
- */
-
 export const ValidInvalid = {
   name: 'Valid x Invalid',
   render: (args: { 'open-attr'?: string }) => {
@@ -372,10 +350,6 @@ export const ValidInvalid = {
   }
 };
 
-/**
- * This shows sd-select has the borders visible even when there is limited vertical space.
- */
-
 export const BorderVisibility = {
   name: 'Border visibility',
   render: () => {
@@ -392,10 +366,6 @@ export const BorderVisibility = {
   }
 };
 
-/**
- * Shows available slots. The `label` and `help-text` slots will overwrite their corresponding attributes.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: { 'open-attr'?: string }) => {
@@ -436,23 +406,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `form-control`,
-  `form-control-label`,
-  `form-control-input`,
-  `form-control-help-text`,
-  `combobox`,
-  `display-input`,
-  `listbox`,
-  `tags`,
-  `tag`,
-  `tag__base`,
-  `tag__content`,
-  `tag__removable-indicator`,
-  `clear-button`, and
-  `expand-icon` part selectors to customize the select component.
- */
-
 const partsArr = [
   'form-control',
   'form-control-label',
@@ -502,10 +455,6 @@ export const Parts = {
   }
 };
 
-/**
- * Per default the select will indicate an error state when the input is invalid. Use the `style-on-valid` attribute to indicate a valid state as well.
- */
-
 export const StyleOnValid = {
   name: 'Style on valid',
   render: (args: { 'open-attr'?: string }) => {
@@ -566,10 +515,6 @@ export const StyleOnValid = {
   }
 };
 
-/**
- * `sd-select` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: { 'open-attr'?: string }) => {
@@ -638,10 +583,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Use `<sl-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won’t be announced by most assistive devices.
- */
-
 export const SampleGroupingOptions = {
   name: 'Sample: Grouping options',
   render: (args: any) => {
@@ -661,10 +602,6 @@ export const SampleGroupingOptions = {
   }
 };
 
-/**
- * Demonstrates the form behavior with validation styles when the `required` attribute is set to `true`.
- */
-
 export const SampleForm = {
   name: 'Sample: Form',
   render: (args: { 'open-attr'?: string }) => {
@@ -778,12 +715,6 @@ export const SampleForm = {
   }
 };
 
-/**
- * 1. You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- * 2. Set an empty string to clear the custom validity and make the input valid.
- * 3. To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
- */
-
 export const setCustomValidity = {
   name: 'setCustomValidity',
   parameters: {
@@ -845,10 +776,6 @@ export const setCustomValidity = {
   }
 };
 
-/**
- * Demonstrates a form containing all existing Solid form elements.
- */
-
 export const SolidForm = {
   name: 'Sample: Solid form',
   render: () => {
diff --git a/packages/docs/src/stories/components/skeleton.test.stories.ts b/packages/docs/src/stories/components/skeleton.test.stories.ts
index 9db37e2eb5..2af248c743 100644
--- a/packages/docs/src/stories/components/skeleton.test.stories.ts
+++ b/packages/docs/src/stories/components/skeleton.test.stories.ts
@@ -37,9 +37,6 @@ export default {
   ]
 };
 
-/**
- * This shows the skeleton in its default state.
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -47,9 +44,6 @@ export const Default = {
   }
 };
 
-/**
- * The skeleton in all possible `variant` values.
- */
 export const Variant = {
   name: 'Variant',
   render: (args: any) => {
@@ -63,9 +57,6 @@ export const Variant = {
   }
 };
 
-/**
- * The skeleton wrapping various content types to show dimension adaptation.
- */
 export const WrappingContent = {
   name: 'Wrapping Content',
   render: () => html`
diff --git a/packages/docs/src/stories/components/spinner.test.stories.ts b/packages/docs/src/stories/components/spinner.test.stories.ts
index 5f02a433f2..b8e63a35ee 100644
--- a/packages/docs/src/stories/components/spinner.test.stories.ts
+++ b/packages/docs/src/stories/components/spinner.test.stories.ts
@@ -15,10 +15,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-spinner in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -26,10 +22,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `color` attribute to change the color of the spinner and correspond (currentColor) with the parents color.
- */
-
 export const Variants = {
   name: 'Variants',
   render: (args: any) => {
@@ -48,10 +40,6 @@ export const Variants = {
   }
 };
 
-/**
- * Use the font-size in css to scale the spinner.
- */
-
 export const Size = {
   name: 'Size',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/step-group.test.stories.ts b/packages/docs/src/stories/components/step-group.test.stories.ts
index e9266c2137..f5d903a857 100644
--- a/packages/docs/src/stories/components/step-group.test.stories.ts
+++ b/packages/docs/src/stories/components/step-group.test.stories.ts
@@ -57,10 +57,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-step-group in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -68,10 +64,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the orientation attribute to set the axis of a step-group.
- */
-
 export const Orientation = {
   name: 'Orientation',
   render: (args: any) => {
@@ -108,10 +100,6 @@ export const Orientation = {
   ]
 };
 
-/**
- * Use the not-interactive attribute to create a non-interactive step group.
- */
-
 export const notInteractive = {
   name: 'Not Interactive X Size',
   render: (args: any) => {
@@ -163,9 +151,6 @@ export const notInteractive = {
   ]
 };
 
-/**
- * Use the 'base' and 'body' parts to style the step-group.
- */
 export const Parts = {
   name: 'Parts',
   render: () => {
@@ -213,10 +198,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-steps are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -235,10 +216,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * This sample shows how to set the active step programmatically.
- */
-
 export const SetActiveStep = {
   name: 'Sample: Set Active Step',
   render: () => {
@@ -278,11 +255,6 @@ export const SetActiveStep = {
   }
 };
 
-/**
- * This sample shows how to use the not-interactive attribute with content icons. The border-radius of an sd-step is larger when the not-interactive attribute is set to `true`.
- * The size of the icon is recommended to be 48px for the 'lg' size and 32px for the 'sm' size. The size can be set using font-size.
- */
-
 export const SampleNotInteractive = {
   name: 'Sample: Not Interactive',
   render: () => {
@@ -336,11 +308,6 @@ export const SampleNotInteractive = {
   }
 };
 
-/**
- * This sample shows how to manually manage step states by setting active-step to -1.
- * States are controlled manually on the sd-step elements.
- */
-
 export const ManualStateManagement = {
   name: 'Manual Step State Management',
   render: () => {
diff --git a/packages/docs/src/stories/components/switch.test.stories.ts b/packages/docs/src/stories/components/switch.test.stories.ts
index fb06297e0e..940876a8e7 100644
--- a/packages/docs/src/stories/components/switch.test.stories.ts
+++ b/packages/docs/src/stories/components/switch.test.stories.ts
@@ -28,10 +28,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-switch in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -39,10 +35,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input switch. Clicks will be suppressed until the disabled state is removed
- */
-
 export const Disabled = {
   name: 'Disabled',
   render: (args: any) => {
@@ -60,10 +52,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
- */
-
 export const Required = {
   name: 'Required',
   render: (args: any) => {
@@ -76,10 +64,6 @@ export const Required = {
   }
 };
 
-/**
- * Use the checked attribute to activate the switch.
- */
-
 export const Checked = {
   name: 'Checked',
   render: (args: any) => {
@@ -97,10 +81,6 @@ export const Checked = {
   }
 };
 
-/**
- * Test checked and disabled states.
- */
-
 export const CheckedAndDisabled = {
   name: 'Checked and Disabled',
   render: (args: any) => {
@@ -114,9 +94,6 @@ export const CheckedAndDisabled = {
   }
 };
 
-/**
- * Test invalid state inside a form.
- */
 export const Invalid = {
   name: 'Invalid',
   render: (args: any) => {
@@ -148,10 +125,6 @@ export const Invalid = {
   }
 };
 
-/**
- * Use the `base`, `control--unchecked`, `control--checked`, `checked` and `label` part selectors to customize the switch.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/tab-group.test.stories.ts b/packages/docs/src/stories/components/tab-group.test.stories.ts
index abefd5b828..54bded6a31 100644
--- a/packages/docs/src/stories/components/tab-group.test.stories.ts
+++ b/packages/docs/src/stories/components/tab-group.test.stories.ts
@@ -63,10 +63,6 @@ export default {
   ]
 };
 
-/**
- * Default: This shows sd-tab-group in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -74,9 +70,6 @@ export const Default = {
   }
 };
 
-/**
- * The sd-tab-group shows an alternative style when tabs are of the `container` variant.
- */
 export const TabVariants = {
   name: 'Tab Variants',
   render: (args: any) => {
@@ -99,10 +92,6 @@ export const TabVariants = {
   }
 };
 
-/**
- * The sd-tab-group becomes scrollable when there are more tabs than horizontal space allows.
- */
-
 export const Scrollable = {
   name: 'Scrollable',
   render: (args: any) => {
@@ -171,10 +160,6 @@ export const Parts = {
   }
 };
 
-/**
- * `sd-tab-group` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   args: overrideArgs({
@@ -195,18 +180,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * As an option, users can justify the `sd-tab-group` to the center. To implement this sample, adjust the `tabs` CSS part as follows:
- *
- * ```css
- *
- *   sd-tab-group::part(tabs) {
-          justify-content: center;
-        }
-
-  * ```
- */
-
 export const SampleCentered = {
   name: 'Sample: Centered',
   parameters: { ...parameters, docs: { story: { inline: false, height: '550px' } } },
@@ -249,27 +222,6 @@ export const SampleCentered = {
   }
 };
 
-/**
- * As an option, users can remove the line separating the tablist and the `sd-panel`. To implement this sample, apply the following adjustments to the `separation`, `base`, `scroll-button--start` and `scroll-button--end` CSS parts:
- *
- * ```css
- *
- * sd-tab-group::part(separation) {
-          display: none;
-        }
-
-        sd-tab-group::part(scroll-button--start),
-        sd-tab-group::part(scroll-button--end) {
-          border-bottom: none;
-        }
-
-         sd-tab::part(bottom-border) {
-          border-bottom: none;
-        }
-
-  * ```
- */
-
 export const SampleNoLine = {
   name: 'Sample: No Line',
   parameters: { ...parameters, docs: { story: { inline: false, height: '250px' } } },
@@ -301,16 +253,6 @@ export const SampleNoLine = {
   }
 };
 
-/**
- * Text can be bolded according to the users needs. To implement this sample, adjust the `base` CSS part as follows:
- *
- * ```css
-        sd-tab::part(base) {
-          font-weight: bold;
-        }
- * ```
- */
-
 export const SampleBold = {
   name: 'Sample: Bold',
   parameters: { ...parameters, docs: { story: { inline: false, height: '550px' } } },
@@ -356,10 +298,6 @@ export const SampleBold = {
   }
 };
 
-/**
- * Users can set-up buttons to open a specific tab from outside the `sd-tab-group`.
- */
-
 export const SampleDeepLink = {
   name: 'Sample: Deep Link',
   render: () => {
diff --git a/packages/docs/src/stories/components/tab-panel.test.stories.ts b/packages/docs/src/stories/components/tab-panel.test.stories.ts
index 347a680eb1..5ba5cb6a81 100644
--- a/packages/docs/src/stories/components/tab-panel.test.stories.ts
+++ b/packages/docs/src/stories/components/tab-panel.test.stories.ts
@@ -30,10 +30,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-tab-panel in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/tab.test.stories.ts b/packages/docs/src/stories/components/tab.test.stories.ts
index d804b4223d..b42f24c7dc 100644
--- a/packages/docs/src/stories/components/tab.test.stories.ts
+++ b/packages/docs/src/stories/components/tab.test.stories.ts
@@ -40,10 +40,6 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-tab in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -51,10 +47,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the variant attribute to alternate between the `default` and `container` styles.
- */
-
 export const ContainerActive = {
   name: 'Container x Active',
   render: (args: any) => {
@@ -69,10 +61,6 @@ export const ContainerActive = {
   }
 };
 
-/**
- * Use the `disabled` attribute to toggle the disabled state.
- */
-
 export const Disabled = {
   name: 'Disabled',
   parameters: { controls: { exclude: ['disabled'] } },
@@ -124,9 +112,6 @@ export const Parts = {
     `;
   }
 };
-/**
- * Use the `left` slot to optionally include an element (eg. icon) positioned to the left of the label.
- */
 
 export const Sample = {
   name: 'Sample: Icon',
diff --git a/packages/docs/src/stories/components/tag.test.stories.ts b/packages/docs/src/stories/components/tag.test.stories.ts
index a72dbcf80d..d2ebae0401 100644
--- a/packages/docs/src/stories/components/tag.test.stories.ts
+++ b/packages/docs/src/stories/components/tag.test.stories.ts
@@ -23,10 +23,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Default: This shows sd-tag in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -34,10 +30,6 @@ export const Default = {
   }
 };
 
-/**
- * The tag in all possible combinations of `selected` and `size`.
- */
-
 export const selectedAndSize = {
   name: 'Selected × Size',
   render: (args: any) => {
@@ -51,10 +43,6 @@ export const selectedAndSize = {
   }
 };
 
-/**
- * The tag in all possible combinations of `removable` and `size`.
- */
-
 export const removableAndSize = {
   name: 'Removable × Size',
   render: (args: any) => {
@@ -87,13 +75,6 @@ export const iconLeft = {
     });
   }
 };
-/**
- * Use the `disabled` attribute to disable a tag. Clicks will be suppressed until the disabled state is removed.
- *
- * __Hint:__ If the href attribute is set i.e. the tag is rendered as a link (`<a>`),
- * the disabled attribute is ignored, as links may not be disabled.
- * To disable the tag in this case the href attribute has to be removed as well.
- */
 
 export const Disabled = {
   name: 'Disabled',
@@ -137,13 +118,6 @@ export const RemovableAndSelectedAndToggleable = {
   }
 };
 
-/**
- * Use the `default` slot to add content to the tag.
- * Use the `removable-indicator` slot to change the removability indicator.
- *
- * If you add icons to the slot, please make sure to account for accessibility by providing an alt-text.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -177,10 +151,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base`, `content` and `removable-indicator` part selectors to customize the button.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -218,10 +188,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-tags are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/teaser-media.test.stories.ts b/packages/docs/src/stories/components/teaser-media.test.stories.ts
index 335c01c1ff..fe6f5231cf 100644
--- a/packages/docs/src/stories/components/teaser-media.test.stories.ts
+++ b/packages/docs/src/stories/components/teaser-media.test.stories.ts
@@ -37,10 +37,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * This shows sd-teaser-media in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -48,10 +44,6 @@ export const Default = {
   }
 };
 
-/**
- * Teaser-Media in all possible `variant`.
- */
-
 export const Variant = {
   name: 'Variant',
   render: (args: any) => {
@@ -96,9 +88,6 @@ export const Variant = {
   }
 };
 
-/**
- * Use the 'default', 'media', 'meta', 'expandable' and 'headline' slots to add content to the teaser. Please make sure to use semantically correct headline tags for the `headline` slot to provide accessible content.
- */
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/teaser.test.stories.ts b/packages/docs/src/stories/components/teaser.test.stories.ts
index 11a723d90b..48032533e8 100644
--- a/packages/docs/src/stories/components/teaser.test.stories.ts
+++ b/packages/docs/src/stories/components/teaser.test.stories.ts
@@ -40,10 +40,6 @@ export default {
   }
 };
 
-/**
- * This shows sd-teaser in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -176,10 +172,6 @@ export const NoMeta = {
   }
 };
 
-/**
- * Teaser with different `media` and `content` distribution values. In case there's a requirement to have a fixed value for the `media`, you can override the `sd-teaser::part(media)` selector by applying a `flex-shrink: 0;` style. Same can be done for the `content` part.
- */
-
 export const DistributionRatio = {
   name: 'Media and Content Distribution',
   render: (args: any) => {
@@ -223,10 +215,6 @@ export const DistributionRatio = {
   }
 };
 
-/**
- * Breakpoint where the teaser switches from `vertical` to `horizontal`, `0` is always `horizontal`, `9999` is always `vertical`. When responsive, teaser changes its orientation from `horizontal` to `vertical` at a component's width of 448px.
- */
-
 export const Breakpoint = {
   name: 'Breakpoint',
   render: (args: any) => {
@@ -251,10 +239,6 @@ export const Breakpoint = {
   }
 };
 
-/**
- * Different `headline` sizes. It is also possible to use `sd-link` inside the `<h>` tag in the headline slot.
- */
-
 export const Headline = {
   name: 'Headline',
   render: (args: any) => {
@@ -334,10 +318,6 @@ export const ReversedLayoutAndOrientation = {
   }
 };
 
-/**
- * Use the 'default', 'media', 'meta' and 'headline' slots to add content to the teaser. Please use h1-h6 tags for the headline slot.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/textarea.test.stories.ts b/packages/docs/src/stories/components/textarea.test.stories.ts
index 7fd713b4e2..0892990c8f 100644
--- a/packages/docs/src/stories/components/textarea.test.stories.ts
+++ b/packages/docs/src/stories/components/textarea.test.stories.ts
@@ -32,9 +32,6 @@ export default {
   }
 };
 
-/**
- * This shows sd-textarea in its default state.
- */
 export const Default = {
   name: 'Default',
   args: overrideArgs([
@@ -47,9 +44,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
- */
 export const Labels = {
   name: 'Label',
   args: {
@@ -60,9 +54,6 @@ export const Labels = {
   }
 };
 
-/**
- * Use the `floating-label` attribute to enable a floating label on the textarea.
- */
 export const FloatingLabel = {
   name: 'Floating Label',
   args: {
@@ -90,10 +81,6 @@ export const FloatingLabel = {
   }
 };
 
-/**
- * Use the `placeholder` attribute to add a placeholder.
- */
-
 export const Placeholders = {
   name: 'Placeholders',
   args: overrideArgs([
@@ -124,9 +111,6 @@ export const Placeholders = {
   }
 };
 
-/**
- * Use the disabled attribute to disable a textarea. All interaction is disabled and no events will be fired.
- */
 export const Disabled = {
   name: 'Disabled',
   args: overrideArgs([
@@ -162,9 +146,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the readonly attribute to render a textarea as readonly.  Interaction is enabled, but the textarea cannot be edited.  Events will be fired.
- */
 export const Readonly = {
   name: 'Readonly',
   args: overrideArgs([
@@ -200,10 +181,6 @@ export const Readonly = {
   }
 };
 
-/**
- * This shows sd-textarea in its various sizes.
- */
-
 export const Sizes = {
   name: 'Sizes',
   args: overrideArgs([
@@ -239,10 +216,6 @@ export const Sizes = {
   }
 };
 
-/**
- * Per default the input will indicate an error state when the input is invalid. Use the `style-on-valid` attribute to opt-in the automatic indication of a valid state as well.
- */
-
 export const StyleOnValid = {
   name: 'Style on valid',
   args: overrideArgs([
@@ -296,10 +269,6 @@ export const StyleOnValid = {
   }
 };
 
-/**
- * Demonstrates the various validation options extended from the native textarea element in addition to error and success styles.
- */
-
 export const Validation = {
   name: 'Validation',
   render: (args: any) => {
@@ -478,12 +447,6 @@ export const Validation = {
   }
 };
 
-/**
- * 1. You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- * 2. Set an empty string to clear the custom validity and make the input valid.
- * 3. To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
- */
-
 export const setCustomValidity = {
   name: 'setCustomValidity',
   parameters: {
@@ -578,9 +541,6 @@ export const Scrollable = {
   }
 };
 
-/**
- * This shows sd-textarea takes the full height of the parent container.
- */
 export const ResponsiveHeight = {
   name: 'Responsive Height',
   args: overrideArgs([
@@ -593,10 +553,6 @@ export const ResponsiveHeight = {
   }
 };
 
-/**
- * Shows available slots. The `label` and `help-text` slots will overwrite their corresponding attributes.
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -631,10 +587,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `form-control`, `form-control-label`, `form-control-input`, `form-control-help-text`, `base`, `border`, and `textarea` part selectors to customize the input.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -669,10 +621,6 @@ export const Parts = {
   }
 };
 
-/**
- * `sd-textarea` is fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   args: overrideArgs([
diff --git a/packages/docs/src/stories/components/tooltip.test.stories.ts b/packages/docs/src/stories/components/tooltip.test.stories.ts
index 419dafa87a..79eb0c5809 100644
--- a/packages/docs/src/stories/components/tooltip.test.stories.ts
+++ b/packages/docs/src/stories/components/tooltip.test.stories.ts
@@ -56,10 +56,6 @@ export default {
   ] as unknown
 };
 
-/**
- * Default: This shows sd-tooltip in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
diff --git a/packages/docs/src/stories/components/video.test.stories.ts b/packages/docs/src/stories/components/video.test.stories.ts
index dab1815c62..a5ee61574b 100644
--- a/packages/docs/src/stories/components/video.test.stories.ts
+++ b/packages/docs/src/stories/components/video.test.stories.ts
@@ -36,10 +36,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * The `sd-video` component can be used to wrap external video elements in order to provide basic styling for Union Investment.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -55,10 +51,6 @@ export const Default = {
   }
 };
 
-/**
- * Utility script used in next 2 stories. You can use similar logic to wire up video elements in your project.
- */
-
 const videoElementScript = html`<script>
   /**
    * Handles setting up event listeners and defining behaviors for video elements.
@@ -152,11 +144,6 @@ const videoElementScript = html`<script>
   window.onhashchange = runScriptOnPathChange;
 </script>`;
 
-/**
- * Use in combination with a viewer component (e. g. from Moving Image) or a bare `<video>`-Tag. <br/>
- * Here we wrap a `video` element that includes setting an image to the `poster` slot.
- */
-
 export const VideoElement = {
   name: 'Video Element',
   render: (args: any) => {
@@ -172,10 +159,6 @@ export const VideoElement = {
   }
 };
 
-/**
- * Duplicates the previous story with default focus on the play button.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {