adobe · caseyisonit · Dec 3, 2025 · Dec 3, 2025 · Dec 4, 2025 · Dec 5, 2025
@@ -1,3 +1,6 @@
 {
-    "recommendations": ["runem.lit-plugin"]
+    "recommendations": [
+        "runem.lit-plugin",
+        "bierner.jsdoc-markdown-highlighting"
+    ]
 }
@@ -0,0 +1,9 @@
+# Installing local extensions in Cursor
+
+The extensions in this directory are not available in Cursor but are in VSCode. The `vsix` file can be uploaded to Cursor locally to install the extension for usage.
-The extensions in this directory are not available in Cursor but are in VSCode. The `vsix` file can be uploaded to Cursor locally to install the extension for usage.
+The extensions in this directory are not available in Cursor but are in VSCode. The `vsix` file can be imported into Cursor.
-The extensions in this directory are not available in Cursor but are in VSCode. The `vsix` file can be uploaded to Cursor locally to install the extension for usage.
+The extensions in this directory are not available in Cursor but are in VSCode. The `vsix` file can be imported into Cursor.
+
+The following steps will get you started:
+
+1. Go to cursor, hit Cmd + Shift + P
+2. Search for “Extensions: Install from VSIX…”
+3. Select the extension file from this directory and download
-3. Select the extension file from this directory and download
+3. Select the extension file from this directory
-3. Select the extension file from this directory and download
+3. Select the extension file from this directory
@@ -90,6 +90,7 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
      * Accessible label for the progress circle.
      *
      * Used to provide context about what is loading or progressing.
+     * @required for accessibility
      */
     @property({ type: String })
     public label = '';

@@ -9,6 +9,5 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
 // Generated by genversion.
 export const version = '1.10.0';
@@ -7,25 +7,56 @@ import {
     ArgTypes,
     Description,
     Subtitle,
+    useOf,
 } from '@storybook/addon-docs/blocks';
-import { SpectrumDocs } from './blocks/SpectrumDocs';
-import { SpectrumStories } from './blocks/SpectrumStories';
+import {
+    GettingStarted,
+    SpectrumDocs,
+    SpectrumStories,
+    StaticPrimaryStory,
+} from './blocks';
 import '@spectrum-web-components/tabs/sp-tabs.js';
 import '@spectrum-web-components/tabs/sp-tab.js';
 import '@spectrum-web-components/tabs/sp-tab-panel.js';
 
+export const checkIsSingleStory = () => {
+    const resolvedOf = useOf('meta', ['meta']);
+    const { stories } = resolvedOf.csfFile;
+    const visibleStories = Object.values(stories).filter((story) =>
+        story.tags?.includes('autodocs' || 'dev')
+    );
+    return visibleStories.length === 1;
+};
+
+export const SingleStoryDescription = () => {
+    const isSingleStory = checkIsSingleStory();
+
+    return (isSingleStory ? <Description of="story" /> : null)
+
+}
+
+export const AdvancedExamplesStories = () => {
+    const isSingleStory = checkIsSingleStory();
+
+    return (isSingleStory ? null : <Stories includePrimary={false} />)
+
+}
+
 <Meta isTemplate />
 
 <Title />
 <Subtitle />
-<Primary />
-
+<Description />
+<SingleStoryDescription />
+<StaticPrimaryStory />
+<GettingStarted />
 <SpectrumDocs tag="usage" />
 
 ## API
 
 <Primary />
 <Controls />
+<AdvancedExamplesStories />
-## API
-
-<Primary />
-<Controls />
-<AdvancedExamplesStories />
+<AdvancedExamplesStories />
+
+## API
+
+<Primary />
+<Controls />
-## API
-
-<Primary />
-<Controls />
-<AdvancedExamplesStories />
+<AdvancedExamplesStories />
+
+## API
+
+<Primary />
+<Controls />
 
 ## Feedback
 

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Page not found</title>
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1"
+        />
+        <link
+            rel="icon"
+            type="image/svg+xml"
+            href="https://opensource.adobe.com/spectrum-css/favicon.svg"
+        />
+        <!-- This preconnect opens the connection for typekit to more quickly load fonts -->
+        <link rel="preconnect" href="https://use.typekit.net" crossorigin />
+        <!-- This is the script that attempts to pre-load the typekit fonts -->
+        <script
+            src="https://use.typekit.net/rok6rmo.js"
+            id="typekit"
+            type="text/javascript"
+            async
+        ></script>
+
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                block-size: 100vh;
+                background-color: rgb(253, 253, 253);
+            }
+
+            header {
+                max-width: 1000px;
+                margin: auto;
+                padding-block-start: 4rem;
+            }
+
+            main {
+                color: rgb(34, 34, 34);
+                display: flex;
+                padding-inline: 20px;
+                padding-block: 1rem 4rem;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 60px;
+                max-width: 1000px;
+                margin: auto;
+            }
+
+            img {
+                max-inline-size: 100%;
+                margin-block: -20px 20px;
+            }
+
+            h1,
+            h2,
+            p {
+                --spectrum-sans-font-family-stack:
+                    'Adobe Clean', adobe-clean, 'Nunito Sans', -apple-system,
+                    '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont,
+                    'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+                -webkit-font-smoothing: antialiased;
+                font-family: var(--spectrum-sans-font-family-stack);
+            }
+
+            h1 {
+                font-weight: 400;
+                font-size: 24px;
+                margin-block-end: 8px;
+            }
+
+            h2 {
+                font-size: 48px;
+                margin-block-end: 8px;
+                padding-block-end: 4px;
+            }
+
+            p {
+                font-size: 18px;
+                line-height: 24px;
+                margin-block: 16px;
+            }
+
+            .spectrum-logo {
+                display: block;
+            }
+
+            svg {
+                block-size: auto;
+                inline-size: 100%;
+                max-inline-size: 170px;
+                max-block-size: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <header>
+            <a
+                class="spectrum-logo"
+                href="https://opensource.adobe.com/spectrum-css/"
+                aria-label="Spectrum CSS"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    class="spectrum-Site-logo spectrum-Icon spectrum-Icon--sizeXL"
+                    version="1.1"
+                    id="Layer_1"
+                    x="0"
+                    y="0"
+                    viewBox="0 0 190 26"
+                    focusable="false"
+                    aria-hidden="true"
+                    aria-label="Adobe logo"
+                    xml:space="preserve"
+                >
+                    <g style="fill: #fa0f00">
+                        <polygon points="19,0 30,0 30,26" />
+                        <polygon points="11.1,0 0,0 0,26" />
+                        <polygon
+                            points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8"
+                        />
+                    </g>
+                    <text
+                        x="38"
+                        y="20"
+                        style="
+                            color: rgb(0, 0, 0);
+                            font-size: 22px;
+                            font-family:
+                                adobe-clean,
+                                'Source Sans Pro',
+                                -apple-system,
+                                BlinkMacSystemFont,
+                                'Segoe UI',
+                                Roboto,
+                                Ubuntu,
+                                'Trebuchet MS',
+                                'Lucida Grande',
+                                sans-serif;
+                            font-weight: 700;
+                            height: 28px;
+                            line-height: 28.6px;
+                        "
+                    >
+                        Spectrum CSS
+                    </text>
+                </svg>
+            </a>
+        </header>
+        <main>
+            <h1>404: Page not found</h1>
+            <section>
+                <img
+                    src="https://opensource.adobe.com/spectrum-css/spectrum_illustration_2x.png"
+                    alt="An abstract illustrated image with a whimsical color palette"
+                />
+                <h2>It's not you. It's us.</h2>
+                <p>
+                    We've made a lot of improvements to the Spectrum CSS
+                    documentation site, including consolidating all of the
+                    documentation and moving it to a single location within
+                    Storybook.
+                </p>
+                <p>
+                    If you're looking for information on Spectrum CSS
+                    components, let's get you back to
+                    <a href="https://opensource.adobe.com/spectrum-css/"
+                        >our landing page</a
+                    >. From there, experiment with all of our components to your
+                    heart's content!
-                <h2>It's not you. It's us.</h2>
-                <p>
-                    We've made a lot of improvements to the Spectrum CSS
-                    documentation site, including consolidating all of the
-                    documentation and moving it to a single location within
-                    Storybook.
-                </p>
-                <p>
-                    If you're looking for information on Spectrum CSS
-                    components, let's get you back to
-                    <a href="https://opensource.adobe.com/spectrum-css/"
-                        >our landing page</a
-                    >. From there, experiment with all of our components to your
-                    heart's content!
+                <h2>It's not you. It's us.</h2>
+                <p>
+                    We've made a lot of improvements to the Spectrum Web Components
+                    documentation site, including consolidating all of the
+                    documentation and moving it to a single location within
+                    Storybook.
+                </p>
+                <p>
+                    If you're looking for information on Spectrum Spectrum Web Components
+                    components, let's get you back to
+                    <a href="https://opensource.adobe.com/spectrum-web-components/"
+                        >our landing page</a
+                    >. From there, experiment with all of our components to your
+                    heart's content!
-                <h2>It's not you. It's us.</h2>
-                <p>
-                    We've made a lot of improvements to the Spectrum CSS
-                    documentation site, including consolidating all of the
-                    documentation and moving it to a single location within
-                    Storybook.
-                </p>
-                <p>
-                    If you're looking for information on Spectrum CSS
-                    components, let's get you back to
-                    <a href="https://opensource.adobe.com/spectrum-css/"
-                        >our landing page</a
-                    >. From there, experiment with all of our components to your
-                    heart's content!
+                <h2>It's not you. It's us.</h2>
+                <p>
+                    We've made a lot of improvements to the Spectrum Web Components
+                    documentation site, including consolidating all of the
+                    documentation and moving it to a single location within
+                    Storybook.
+                </p>
+                <p>
+                    If you're looking for information on Spectrum Spectrum Web Components
+                    components, let's get you back to
+                    <a href="https://opensource.adobe.com/spectrum-web-components/"
+                        >our landing page</a
+                    >. From there, experiment with all of our components to your
+                    heart's content!
+                </p>
+            </section>
+        </main>
+    </body>
+</html>