docs: progress linear

Author: gioboa

apps/docs/content/_components/progresslinear.md

@@ -14,37 +14,27 @@
 
 <Showcase showcase-name="ProgressLinear/ProgressLinearSizes" style="min-height:300px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressLinear/ProgressLinearSizes.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressLinear/ProgressLinearSizes.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressLinear/ProgressLinearSizes/index.tsx
-::
 
 </Showcase>
 
 ### Customizing colors
 
-By default, `SfProgressLinear` uses `primary-700` as the color of the bar (customizable by setting text color) and `neutral-300` as its background. You can change these values in your [Tailwind configuration](https://tailwindcss.com/docs/configuration#theme) or override them for a single element using [`important modifier`](https://tailwindcss.com/docs/configuration#important-modifier).
+By default, `SfProgressLinear` uses `primary-700` as the color of the bar (customizable by setting text color) and `neutral-300` as its background.
+
+<!--
+You can change these values in your [Tailwind configuration](https://tailwindcss.com/docs/configuration#theme) or override them for a single element using [`important modifier`](https://tailwindcss.com/docs/configuration#important-modifier).
+ -->
 
+<!--
 ::tip
 Learn more about [overriding default styles](/customization/overriding-default-styles) in Storefront UI.
 ::
+ -->
 
 <Showcase showcase-name="ProgressLinear/ProgressLinearColors">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressLinear/ProgressLinearColors.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressLinear/ProgressLinearColors.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressLinear/ProgressLinearColors/index.tsx
-::
 
 </Showcase>
 
@@ -54,60 +44,33 @@ Learn more about [overriding default styles](/customization/overriding-default-s
 
 <Showcase showcase-name="ProgressLinear/ProgressLinearLabel">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressLinear/ProgressLinearLabel.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressLinear/ProgressLinearLabel.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressLinear/ProgressLinearLabel/index.tsx
-::
 
 </Showcase>
 
+<!--
 ## Accessibility notes
 
 ProgressLinear uses native [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) HTMLElement] to [allow screen readers treat it as an indicator of [progress status](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role).
+ -->
 
 ## Playground
 
-<Generate />
+<Generate class="playground" />
 
 #tab-2
 
 ## Props
 
-::vue-only
-| Prop name | Type | Default value | Possible values |
-|-----------------------|----------------------------|---------------|---------------------------------------- |
-| `value` | `number` | `0` | |
-| `size` | `SfProgressLinearSize | SfProgressSize` | `'base'` | `'minimal'`,`'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress linear'` | |
-::
-::react-only
-| Prop name | Type | Default value | Possible values |
-|-----------------------|----------------------------|---------------|---------------------------------------- |
-| `value` | `number` | `0` | |
-| `size` | `SfProgressLinearSize | SfProgressSize` | `'base'` | `'minimal'`,`'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress linear'` | |
-| `className` | `string` | | | |
-::
-::qwik-only
-| Prop name | Type | Default value | Possible values |
-|-----------------------|----------------------------|---------------|---------------------------------------- |
-| `value` | `number` | `0` | |
-| `size` | `SfProgressLinearSize | SfProgressSize` | `'base'` | `'minimal'`,`'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress linear'` | |
-| `className` | `string` | | | |
-::
+| Prop name    | Type             | Default value        | Possible values                                              |
+| ------------ | ---------------- | -------------------- | ------------------------------------------------------------ |
+| `class?`     | `string`         |                      |                                                              |
+| `value?`     | `number`         | `0`                  |                                                              |
+| `size?`      | `SfProgressSize` | `'base'`             | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
+| `ariaLabel?` | `string`         | `'Progress element'` |
 
-#tab-3
-::vue-only
-<<<../../../../packages/sfui/frameworks/vue/components/SfProgressLinear/SfProgressLinear.vue
-::
-::react-only
-<<<../../../../packages/sfui/frameworks/react/components/SfProgressLinear/SfProgressLinear.tsx
-::
+## Slots
 
-::
+| Slot name | Description     |
+| --------- | --------------- |
+| `default` | Slotted content |