chore: replace wcstudio links with stackblitz (#5499)

* chore: replace wcstudio links with stackblitz

* chore: update readme to include stackblitz

Author: TarunAdobe

README.md

@@ -86,6 +86,26 @@ In the case that you'd like to serve and test a static build of the documentatio
 yarn docs:build
 ```
 
+## Using Stackblitz for reproductions
+
+We provide Stackblitz demos for all our components to help you quickly test, experiment, and create reproductions. These interactive environments are perfect for:
+
+- **Bug reports**: Create a minimal reproduction of issues you encounter
+- **Experiment**: Test and experiment with components in a live environment to understand their features and behavior
+
+### Finding component demos
+
+Each component's README includes a "Try it on Stackblitz" badge that links to a pre-configured demo environment. You can also find links to all component demos in our [documentation site](https://opensource.adobe.com/spectrum-web-components/).
+
+### Creating reproductions
+
+When reporting bugs or requesting features:
+
+1. **Start with the component demo**: Click the Stackblitz badge in the relevant component's README
+2. **Fork the demo**: Click "Fork" in Stackblitz to create your own copy
+3. **Reproduce the issue**: Modify the code to demonstrate the problem or desired behavior
+4. **Share the link**: Include the Stackblitz URL in your GitHub issue
+
 ## Spectrum CSS and Icons
 
 While we've moved away from using Spectrum CSS for component styling, we still maintain a dependency on Spectrum CSS for icons. We aim to keep the icon packages as current as possible to track the Spectrum design system closely.

packages/accordion/README.md

@@ -6,7 +6,7 @@ The `<sp-accordion>` element contains a list of items that can be expanded or co
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/accordion?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/accordion)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/accordion?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/accordion)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Muvuvbd79YCP9tcdtnsW/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-gbdet9lz)
 
 ```bash
 yarn add @spectrum-web-components/accordion

packages/accordion/accordion-item.md

@@ -6,7 +6,6 @@ The `<sp-accordion-item>` element represents a single item in an `<sp-accordion>
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/accordion?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/accordion)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/accordion?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/accordion)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Muvuvbd79YCP9tcdtnsW/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/accordion

packages/action-bar/README.md

@@ -6,7 +6,7 @@ A `<sp-action-bar>` delivers a floating action bar that is a convenient way to d
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-bar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-bar)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-bar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-bar)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Tqvpr5Yolj9drzPab26O/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-d7tebfzk)
 
 ```
 yarn add @spectrum-web-components/action-bar

packages/action-button/README.md

@@ -6,7 +6,7 @@ An `<sp-action-button>` represents an action a user can take.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/mOF1zUEjLJzODGXFYaIU/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-alf1ticu)
 
 ```bash
 yarn add @spectrum-web-components/action-button
@@ -133,7 +133,7 @@ fulfill the accessibility contract of the button.
     <sp-action-button label="Edit">
         <sp-icon-edit slot="icon"></sp-icon-edit>
     </sp-action-button>
-    <sp-action-button label="Edit"> hold-affordance>
+    <sp-action-button label="Edit" hold-affordance>
         <sp-icon-edit slot="icon"></sp-icon-edit>
     </sp-action-button>
 </sp-action-group>
@@ -358,7 +358,13 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
             <sp-action-button label="Edit" quiet disabled selected>
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
-            <sp-action-button label="Edit" quiet disabled selected hold-affordance>
+            <sp-action-button
+                label="Edit"
+                quiet
+                disabled
+                selected
+                hold-affordance
+            >
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
         </sp-action-group>
@@ -440,7 +446,13 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
             <sp-action-button label="Edit" emphasized disabled selected>
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
-            <sp-action-button label="Edit" emphasized disabled selected hold-affordance>
+            <sp-action-button
+                label="Edit"
+                emphasized
+                disabled
+                selected
+                hold-affordance
+            >
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
         </sp-action-group>
@@ -484,7 +496,13 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
             <sp-action-button label="Edit" emphasized quiet selected>
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
-            <sp-action-button label="Edit" emphasized quiet selected hold-affordance>
+            <sp-action-button
+                label="Edit"
+                emphasized
+                quiet
+                selected
+                hold-affordance
+            >
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
         </sp-action-group>
@@ -501,7 +519,13 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
             <sp-action-button label="Edit" emphasized quiet disabled>
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
-            <sp-action-button label="Edit" emphasized quiet disabled hold-affordance>
+            <sp-action-button
+                label="Edit"
+                emphasized
+                quiet
+                disabled
+                hold-affordance
+            >
                 <sp-icon-edit slot="icon"></sp-icon-edit>
             </sp-action-button>
         </sp-action-group>

packages/action-group/README.md

@@ -6,7 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-group)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-group)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/ty5ezK85zgVE5vuZfMem/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-xskzaswz)
 
 ```
 yarn add @spectrum-web-components/action-group

packages/action-menu/README.md

@@ -6,7 +6,7 @@ An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-men
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-menu?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-menu)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-menu?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-menu)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/EYQn9T6wOnieZbv4xnPj/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-xdvowrpw)
 
 ```
 yarn add @spectrum-web-components/action-menu
@@ -280,8 +280,8 @@ On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By def
 
 Usage Guidance:
 
--   Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
--   Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
+- Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
+- Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
 
 To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
 

packages/asset/README.md

@@ -6,7 +6,7 @@ Use an `<sp-asset>` element to visually represent a file, folder or image in you
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/asset?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/asset)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/asset?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/asset)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/CdMbDDjxdnvVyMlGrrJj/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-wgsurfi9)
 
 ```
 yarn add @spectrum-web-components/asset

packages/avatar/README.md

@@ -6,7 +6,7 @@ An `<sp-avatar>` is a great way to feature a visual representation of a user.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/avatar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/avatar)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/avatar)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/i3gAnjAfQVC43ypsIyw8/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-swzc3ix8)
 
 ```
 yarn add @spectrum-web-components/avatar

packages/badge/README.md

@@ -6,7 +6,6 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/badge?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/badge)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/badge?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://studio.webcomponents.dev/edit/qxPsOTrGAPB92LzPfk4P/src/index.ts?p=stories)
 
 ```
 yarn add @spectrum-web-components/badge

packages/breadcrumbs/README.md

@@ -4,7 +4,6 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/breadcrumbs)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/breadcrumbs)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/JsuqWBLZTpGVAkZuHTPA/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/breadcrumbs

packages/breadcrumbs/breadcrumb-item.md

@@ -6,7 +6,6 @@ For use within an `<sp-breadcrumbs>` element, an `<sp-breadcrumb-item>` represen
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/breadcrumbs)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/breadcrumbs)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/JsuqWBLZTpGVAkZuHTPA/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/breadcrumbs

packages/button-group/README.md

@@ -6,7 +6,6 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button-group)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button-group)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/button-group

packages/button/README.md

@@ -9,7 +9,7 @@ loudness for various attention-getting needs.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-rgg7nx1d)
 
 ```zsh
 yarn add @spectrum-web-components/button

packages/button/clear-button.md

@@ -6,7 +6,6 @@ An `<sp-clear-button>` is a special extension of the `ButtonBase` class that inc
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
 
 ```zsh
 yarn add @spectrum-web-components/button

packages/button/close-button.md

@@ -6,7 +6,6 @@ An `<sp-close-button>` is a special extension of the `ButtonBase` class that inc
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
 
 ```zsh
 yarn add @spectrum-web-components/button

packages/card/README.md

@@ -9,7 +9,7 @@ image/caption pairs.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/card?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/card)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/card?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/card)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/0lwluuJO4nR1daE9dyRw/src/index.stories.js)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-gk9u4xqr)
 
 ```
 yarn add @spectrum-web-components/card

packages/checkbox/README.md

@@ -10,7 +10,7 @@ instead of selecting.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/checkbox?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/checkbox)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/checkbox?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/checkbox)
-[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/jeIGAXHMUrTp6hGMquoD/src/index.ts)
+[![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-31hvwr2m)
 
 ```bash
 yarn add @spectrum-web-components/checkbox
@@ -246,7 +246,7 @@ Screen readers interpret checkboxes by announcing their role, label, current sta
 
 When focused, a screen reader will announce:
 
--   The label (text provided inside the or associated with it)
--   The state: "checked", "not checked", or "partially checked" (when indeterminate is set)
--   The role: "checkbox"
--   If the checkbox is marked as invalid, it may also announce "invalid entry" depending on the screen reader.
+- The label (text provided inside the or associated with it)
+- The state: "checked", "not checked", or "partially checked" (when indeterminate is set)
+- The role: "checkbox"
+- If the checkbox is marked as invalid, it may also announce "invalid entry" depending on the screen reader.