docs: progerss circular

Author: gioboa

apps/docs/content/_components/progresscircular.md

@@ -14,124 +14,67 @@
 
 <Showcase showcase-name="ProgressCircular/ProgressCircularSizes" style="min-height:320px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressCircular/ProgressCircularSizes.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressCircular/ProgressCircularSizes.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressCircular/ProgressCircularSizes/index.tsx
-::
 
 </Showcase>
 
 ### Customizing colors
 
-By default, `SfProgressCircular` uses `primary-700` as the shape color (customizable by setting text color) and `neutral-300` for the background ring. 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, `SfProgressCircular` uses `primary-700` as the shape color (customizable by setting text color) and `neutral-300` for the background ring.
 
+<!--
+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="ProgressCircular/ProgressCircularColors">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressCircular/ProgressCircularColors.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressCircular/ProgressCircularColors.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressCircular/ProgressCircularColors/index.tsx
-::
 
 </Showcase>
 
 ### With floating label
 
-::vue-only
-You can add text to the center of the Progress Circle by providing content to the component via the `default` slot.
-::
-::react-only
-You can add text to the center of the Progress Circle by providing content to the component via the `children`.
-::
-::qwik-only
 You can add text to the center of the Progress Circle by providing content to the component via the `Slot`.
-::
 
 ::warning
 `SfProgressCircular` is built using an `svg`, so your content must be SVG-compatible.
 ::
 
 <Showcase showcase-name="ProgressCircular/ProgressCircularFloatingLabel">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/ProgressCircular/ProgressCircularFloatingLabel.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/ProgressCircular/ProgressCircularFloatingLabel.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx
-::
 
 </Showcase>
 
+<!--
 ## Accessibility notes
 
 This component sets the `role="progressbar"` 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` | `SfProgressSize` | `'base'` | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress element'` |  
-::
-::react-only
-| Prop name | Type | Default value | Possible values |
-|-----------------------|----------------------------|---------------|----------------------------------------|
-| `value` | `number` | `0` | |
-| `size` | `SfProgressSize` | `'base'` | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress element'` |  
-| `className` | `string` | | |
-| `children` | `ReactNode` | | Default slotted content |
-::
-::qwik-only
-| Prop name | Type | Default value | Possible values |
-|-----------------------|----------------------------|---------------|----------------------------------------|
-| `value` | `number` | `0` | |
-| `size` | `SfProgressSize` | `'base'` | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
-| `ariaLabel` | `string` | `'Progress element'` |  
-| `className` | `string` | | |
-| `children` | `ReactNode` | | Default slotted content |
-::
-
-::vue-only
+| 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'` |
 
 ## Slots
 
-| Slot name | Description                     |
-| --------- | ------------------------------- |
-| `default` | adds content within svg element |
-
-::
-
-#tab-3
-::vue-only
-<<<../../../../packages/sfui/frameworks/vue/components/SfProgressCircular/SfProgressCircular.vue
-::
-::react-only
-<<<../../../../packages/sfui/frameworks/react/components/SfProgressCircular/SfProgressCircular.tsx
-::
-
-::
+| Slot name | Description     |
+| --------- | --------------- |
+| `default` | Slotted content |