From fe12a3cd4855c0c976116dfebc1df556e76a6593 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 3 Sep 2025 13:18:12 -0400
Subject: [PATCH 1/5] feat(badge): s2 styling and render brought in

---
 .../core/components/badge/Badge.base.ts       |  36 +-
 .../progress-circle/ProgressCircle.base.ts    |  23 +-
 .../packages/swc/components/badge/Badge.ts    |  46 +-
 .../packages/swc/components/badge/badge.css   | 673 +++++++++++----
 .../progress-circle/ProgressCircle.ts         |  81 +-
 .../progress-circle/progress-circle.css       | 791 ++----------------
 .../stories/progress-circle.stories.ts        |  35 +-
 7 files changed, 756 insertions(+), 929 deletions(-)

diff --git a/second-gen/packages/core/components/badge/Badge.base.ts b/second-gen/packages/core/components/badge/Badge.base.ts
index d360ada0387..946cc7beb85 100644
--- a/second-gen/packages/core/components/badge/Badge.base.ts
+++ b/second-gen/packages/core/components/badge/Badge.base.ts
@@ -37,6 +37,11 @@ export const BADGE_VARIANTS = [
     'green',
     'cyan',
     'blue',
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
 ] as const;
 export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 export const FIXED_VALUES = [
@@ -49,8 +54,11 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 
 /**
  * @element sp-badge-base
- * @slot - The text label to display in the badge.
- * @slot icon - The icon to display in the badge.
+ * @property {BadgeVariant} variant - The variant of the badge.
+ * @property {boolean} subtle - Whether the badge is subtle.
+ * @property {boolean} outline - Whether the badge is outlined.
+ * @property {FixedValues} fixed - The fixed position of the badge.
+ * @property {string[]} customStyles - The custom styles of the badge.
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
@@ -61,26 +69,14 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public variant: BadgeVariant = 'informative';
 
-    @property({ reflect: true })
-    public get fixed(): FixedValues | undefined {
-        return this._fixed;
-    }
+    @property({ type: Boolean, reflect: true })
+    public subtle: boolean = false;
 
-    public set fixed(fixed: FixedValues | undefined) {
-        if (fixed === this.fixed) {
-            return;
-        }
-        const oldValue = this.fixed;
-        this._fixed = fixed;
-        if (fixed) {
-            this.setAttribute('fixed', fixed);
-        } else {
-            this.removeAttribute('fixed');
-        }
-        this.requestUpdate('fixed', oldValue);
-    }
+    @property({ type: Boolean, reflect: true })
+    public outline: boolean = false;
 
-    private _fixed?: FixedValues;
+    @property({ type: String, reflect: true })
+    public fixed?: FixedValues;
 
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;
diff --git a/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts b/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
index a8aea763660..5c0b514af03 100644
--- a/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
+++ b/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
@@ -34,10 +34,11 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
 
     /**
      * Static color variant for use on different backgrounds.
-     * When set to 'white', the component uses white styling for dark backgrounds.
+     * When set to 'white', the component uses white styling for images with a dark tinted background.
+     * When set to 'black', the component uses black styling for images with a light tinted background.
      */
     @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
+    public staticColor?: 'white' | 'black';
 
     /**
      * Progress value from 0 to 100.
@@ -46,6 +47,24 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
     @property({ type: Number })
     public progress = 0;
 
+    /**
+     * Stroke width for the progress circle.
+     */
+    @property({ type: Number, reflect: false })
+    public get strokeWidth(): number {
+        return this._strokeWidth;
+    }
+
+    public set strokeWidth(customWidth: unknown) {
+        if (customWidth && customWidth instanceof Number) {
+            this._strokeWidth = customWidth as number;
+        }
+
+        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
+    }
+
+    private _strokeWidth: number = 2;
+
     @query('slot')
     private slotEl!: HTMLSlotElement;
 
diff --git a/second-gen/packages/swc/components/badge/Badge.ts b/second-gen/packages/swc/components/badge/Badge.ts
index 950baf098d0..e85910b4b3b 100644
--- a/second-gen/packages/swc/components/badge/Badge.ts
+++ b/second-gen/packages/swc/components/badge/Badge.ts
@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, nothing, TemplateResult } from 'lit';
+import { CSSResultArray, html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
 
 import { BadgeBase } from '@swc/core/components/badge';
 
@@ -28,7 +30,7 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * @since 1.0.0
  * @status stable
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
- * @figma https://www.figma.com/design/...
+ * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
@@ -52,16 +54,36 @@ export class Badge extends BadgeBase {
 
     protected override render(): TemplateResult {
         return html`
-            ${this.hasIcon
-                ? html`
-                      <slot
-                          name="icon"
-                          ?icon-only=${!this.slotHasContent}
-                      ></slot>
-                  `
-                : nothing}
-            <div class="label">
-                <slot></slot>
+            <div
+                class=${classMap({
+                    ['spectrum-Badge']: true,
+                    [`spectrum-Badge--size${this.size?.toUpperCase()}`]:
+                        typeof this.size !== 'undefined',
+                    [`spectrum-Badge--${this.variant}`]:
+                        typeof this.variant !== 'undefined',
+                    [`spectrum-Badge--subtle`]: this.subtle,
+                    [`spectrum-Badge--outline`]: this.outline,
+                    [`spectrum-Badge--fixed-${this.fixed}`]:
+                        typeof this.fixed !== 'undefined',
+                })}
+            >
+                ${when(
+                    this.hasIcon,
+                    () => html`
+                        <div
+                            class=${classMap({
+                                [`spectrum-Badge-icon`]: true,
+                                [`spectrum-Badge-icon--no-label`]:
+                                    !this.slotHasContent,
+                            })}
+                        >
+                            <slot name="icon"></slot>
+                        </div>
+                    `
+                )}
+                <div class="spectrum-Badge-label">
+                    <slot></slot>
+                </div>
             </div>
         `;
     }
diff --git a/second-gen/packages/swc/components/badge/badge.css b/second-gen/packages/swc/components/badge/badge.css
index 4c7871aa0bc..30bfc7b4f95 100644
--- a/second-gen/packages/swc/components/badge/badge.css
+++ b/second-gen/packages/swc/components/badge/badge.css
@@ -1,8 +1,9 @@
-/**
- * Copyright 2025 Adobe. All rights reserved.
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
  *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
@@ -11,9 +12,18 @@
  */
 
 :host {
-    --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
+    display: inline-flex;
+}
+
+.spectrum-Badge {
+    --spectrum-badge-border-width: var(
+        --mod-badge-border-width,
+        var(--spectrum-border-width-200)
+    );
+    --spectrum-badge-border-color: transparent;
     --spectrum-badge-line-height: var(--spectrum-line-height-100);
     --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
+    --spectrum-badge-font-weight: var(--spectrum-medium-font-weight);
     --spectrum-badge-label-icon-color: var(--spectrum-white);
     --spectrum-badge-background-color-default: var(
         --spectrum-neutral-subdued-background-color-default
@@ -75,6 +85,122 @@
     --spectrum-badge-background-color-magenta: var(
         --spectrum-magenta-background-color-default
     );
+    --spectrum-badge-background-color-pink: var(
+        --spectrum-pink-background-color-default
+    );
+    --spectrum-badge-background-color-turquoise: var(
+        --spectrum-turquoise-background-color-default
+    );
+    --spectrum-badge-background-color-brown: var(
+        --spectrum-brown-background-color-default
+    );
+    --spectrum-badge-background-color-cinnamon: var(
+        --spectrum-cinnamon-background-color-default
+    );
+    --spectrum-badge-background-color-silver: var(
+        --spectrum-silver-background-color-default
+    );
+    --spectrum-badge-subtle-label-icon-color: var(--spectrum-gray-1000);
+    --spectrum-badge-subtle-background-color-default: var(
+        --spectrum-neutral-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-accent: var(
+        --spectrum-accent-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-informative: var(
+        --spectrum-informative-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-negative: var(
+        --spectrum-negative-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-positive: var(
+        --spectrum-positive-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-notice: var(
+        --spectrum-notice-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-gray: var(
+        --spectrum-gray-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-red: var(
+        --spectrum-red-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-orange: var(
+        --spectrum-orange-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-yellow: var(
+        --spectrum-yellow-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-chartreuse: var(
+        --spectrum-chartreuse-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-celery: var(
+        --spectrum-celery-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-green: var(
+        --spectrum-green-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-seafoam: var(
+        --spectrum-seafoam-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-cyan: var(
+        --spectrum-cyan-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-blue: var(
+        --spectrum-blue-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-indigo: var(
+        --spectrum-indigo-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-purple: var(
+        --spectrum-purple-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-fuchsia: var(
+        --spectrum-fuchsia-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-magenta: var(
+        --spectrum-magenta-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-pink: var(
+        --spectrum-pink-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-turquoise: var(
+        --spectrum-turquoise-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-brown: var(
+        --spectrum-brown-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-cinnamon: var(
+        --spectrum-cinnamon-subtle-background-color-default
+    );
+    --spectrum-badge-subtle-background-color-silver: var(
+        --spectrum-silver-subtle-background-color-default
+    );
+    --spectrum-badge-outline-label-icon-color: var(--spectrum-gray-1000);
+    --spectrum-badge-outline-background-color: var(
+        --spectrum-background-layer-2-color
+    );
+    --spectrum-badge-outline-border-color-neutral: var(
+        --spectrum-neutral-visual-color
+    );
+    --spectrum-badge-outline-border-color-accent: var(
+        --spectrum-accent-visual-color
+    );
+    --spectrum-badge-outline-border-color-informative: var(
+        --spectrum-informative-visual-color
+    );
+    --spectrum-badge-outline-border-color-negative: var(
+        --spectrum-negative-visual-color
+    );
+    --spectrum-badge-outline-border-color-notice: var(
+        --spectrum-notice-visual-color
+    );
+    --spectrum-badge-outline-border-color-positive: var(
+        --spectrum-positive-visual-color
+    );
+    --spectrum-badge-corner-radius: var(
+        --spectrum-corner-radius-medium-size-medium
+    );
     --spectrum-badge-height: var(--spectrum-component-height-100);
     --spectrum-badge-font-size: var(--spectrum-font-size-100);
     --spectrum-badge-label-spacing-vertical-top: var(
@@ -100,29 +226,18 @@
     --highcontrast-badge-border-color: CanvasText;
 }
 
-:host([variant='celery']),
-:host([variant='chartreuse']),
-:host([variant='orange']),
-:host([variant='yellow']) {
+.spectrum-Badge--celery,
+.spectrum-Badge--chartreuse,
+.spectrum-Badge--notice,
+.spectrum-Badge--orange,
+.spectrum-Badge--yellow {
     --spectrum-badge-label-icon-color: var(--spectrum-black);
 }
 
-:host([variant='blue']),
-:host([variant='cyan']),
-:host([variant='fuchsia']),
-:host([variant='gray']),
-:host([variant='green']),
-:host([variant='indigo']),
-:host([variant='magenta']),
-:host([variant='purple']),
-:host([variant='red']),
-:host([variant='seafoam']) {
-    --spectrum-badge-label-icon-color: var(
-        --spectrum-badge-label-icon-color-primary
+.spectrum-Badge--sizeS {
+    --spectrum-badge-corner-radius: var(
+        --spectrum-corner-radius-medium-size-small
     );
-}
-
-:host([size='s']) {
     --spectrum-badge-height: var(--spectrum-component-height-75);
     --spectrum-badge-font-size: var(--spectrum-font-size-75);
     --spectrum-badge-label-spacing-vertical-top: var(
@@ -147,7 +262,10 @@
     );
 }
 
-:host([size='l']) {
+.spectrum-Badge--sizeL {
+    --spectrum-badge-corner-radius: var(
+        --spectrum-corner-radius-medium-size-large
+    );
     --spectrum-badge-height: var(--spectrum-component-height-100);
     --spectrum-badge-font-size: var(--spectrum-font-size-200);
     --spectrum-badge-label-spacing-vertical-top: var(
@@ -172,7 +290,10 @@
     );
 }
 
-:host([size='xl']) {
+.spectrum-Badge--sizeXL {
+    --spectrum-badge-corner-radius: var(
+        --spectrum-corner-radius-medium-size-extra-large
+    );
     --spectrum-badge-height: var(--spectrum-component-height-100);
     --spectrum-badge-font-size: var(--spectrum-font-size-300);
     --spectrum-badge-label-spacing-vertical-top: var(
@@ -198,234 +319,521 @@
 }
 
 @media (forced-colors: active) {
-    :host {
+    .spectrum-Badge {
         border-color: var(--highcontrast-badge-border-color);
     }
 }
 
-:host {
+.spectrum-Badge {
     min-block-size: var(--mod-badge-height, var(--spectrum-badge-height));
     inline-size: auto;
+    display: inline-flex;
     vertical-align: middle;
+    position: relative;
     cursor: default;
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
+    border: var(--spectrum-badge-border-width) solid
+        var(--mod-badge-border-color, var(--spectrum-badge-border-color));
     border-radius: var(
         --mod-badge-corner-radius,
         var(--spectrum-badge-corner-radius)
     );
+    background: var(
+        --mod-badge-background-color-default,
+        var(--spectrum-badge-background-color-default)
+    );
     color: var(
         --mod-badge-label-icon-color,
         var(--spectrum-badge-label-icon-color)
     );
-    border: 1px solid #0000;
-    display: inline-flex;
-    position: relative;
+    background-origin: border-box;
+    align-self: start;
 }
 
-:host,
-:host([variant='neutral']) {
+.spectrum-Badge--neutral {
     background: var(
         --mod-badge-background-color-default,
         var(--spectrum-badge-background-color-default)
     );
 }
 
-:host([variant='accent']) {
+.spectrum-Badge--accent {
     background: var(
         --mod-badge-background-color-accent,
         var(--spectrum-badge-background-color-accent)
     );
 }
 
-:host([variant='informative']) {
+.spectrum-Badge--informative {
     background: var(
         --mod-badge-background-color-informative,
         var(--spectrum-badge-background-color-informative)
     );
 }
 
-:host([variant='negative']) {
+.spectrum-Badge--negative {
     background: var(
         --mod-badge-background-color-negative,
         var(--spectrum-badge-background-color-negative)
     );
 }
 
-:host([variant='positive']) {
+.spectrum-Badge--positive {
     background: var(
         --mod-badge-background-color-positive,
         var(--spectrum-badge-background-color-positive)
     );
 }
 
-:host([variant='notice']) {
+.spectrum-Badge--notice {
     background: var(
         --mod-badge-background-color-notice,
         var(--spectrum-badge-background-color-notice)
     );
 }
 
-:host([variant='gray']) {
+.spectrum-Badge--gray {
     background: var(
         --mod-badge-background-color-gray,
         var(--spectrum-badge-background-color-gray)
     );
 }
 
-:host([variant='red']) {
+.spectrum-Badge--red {
     background: var(
         --mod-badge-background-color-red,
         var(--spectrum-badge-background-color-red)
     );
 }
 
-:host([variant='orange']) {
+.spectrum-Badge--orange {
     background: var(
         --mod-badge-background-color-orange,
         var(--spectrum-badge-background-color-orange)
     );
 }
 
-:host([variant='yellow']) {
+.spectrum-Badge--yellow {
     background: var(
         --mod-badge-background-color-yellow,
         var(--spectrum-badge-background-color-yellow)
     );
 }
 
-:host([variant='chartreuse']) {
+.spectrum-Badge--chartreuse {
     background: var(
         --mod-badge-background-color-chartreuse,
         var(--spectrum-badge-background-color-chartreuse)
     );
 }
 
-:host([variant='celery']) {
+.spectrum-Badge--celery {
     background: var(
         --mod-badge-background-color-celery,
         var(--spectrum-badge-background-color-celery)
     );
 }
 
-:host([variant='green']) {
+.spectrum-Badge--green {
     background: var(
         --mod-badge-background-color-green,
         var(--spectrum-badge-background-color-green)
     );
 }
 
-:host([variant='seafoam']) {
+.spectrum-Badge--seafoam {
     background: var(
         --mod-badge-background-color-seafoam,
         var(--spectrum-badge-background-color-seafoam)
     );
 }
 
-:host([variant='cyan']) {
+.spectrum-Badge--cyan {
     background: var(
         --mod-badge-background-color-cyan,
         var(--spectrum-badge-background-color-cyan)
     );
 }
 
-:host([variant='blue']) {
+.spectrum-Badge--blue {
     background: var(
         --mod-badge-background-color-blue,
         var(--spectrum-badge-background-color-blue)
     );
 }
 
-:host([variant='indigo']) {
+.spectrum-Badge--indigo {
     background: var(
         --mod-badge-background-color-indigo,
         var(--spectrum-badge-background-color-indigo)
     );
 }
 
-:host([variant='purple']) {
+.spectrum-Badge--purple {
     background: var(
         --mod-badge-background-color-purple,
         var(--spectrum-badge-background-color-purple)
     );
 }
 
-:host([variant='fuchsia']) {
+.spectrum-Badge--fuchsia {
     background: var(
         --mod-badge-background-color-fuchsia,
         var(--spectrum-badge-background-color-fuchsia)
     );
 }
 
-:host([variant='magenta']) {
+.spectrum-Badge--magenta {
     background: var(
         --mod-badge-background-color-magenta,
         var(--spectrum-badge-background-color-magenta)
     );
 }
 
-:host([fixed='inline-start']) {
+.spectrum-Badge--pink {
+    background: var(
+        --mod-badge-background-color-pink,
+        var(--spectrum-badge-background-color-pink)
+    );
+}
+
+.spectrum-Badge--turquoise {
+    background: var(
+        --mod-badge-background-color-turquoise,
+        var(--spectrum-badge-background-color-turquoise)
+    );
+}
+
+.spectrum-Badge--brown {
+    background: var(
+        --mod-badge-background-color-brown,
+        var(--spectrum-badge-background-color-brown)
+    );
+}
+
+.spectrum-Badge--cinnamon {
+    background: var(
+        --mod-badge-background-color-cinnamon,
+        var(--spectrum-badge-background-color-cinnamon)
+    );
+}
+
+.spectrum-Badge--silver {
+    background: var(
+        --mod-badge-background-color-silver,
+        var(--spectrum-badge-background-color-silver)
+    );
+}
+
+.spectrum-Badge--subtle {
+    color: var(
+        --mod-badge-subtle-label-icon-color,
+        var(--spectrum-badge-subtle-label-icon-color)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--neutral {
+    background: var(
+        --mod-badge-subtle-background-color-default,
+        var(--spectrum-badge-subtle-background-color-default)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--accent {
+    background: var(
+        --mod-badge-subtle-background-color-accent,
+        var(--spectrum-badge-subtle-background-color-accent)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--informative {
+    background: var(
+        --mod-badge-subtle-background-color-informative,
+        var(--spectrum-badge-subtle-background-color-informative)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--negative {
+    background: var(
+        --mod-badge-subtle-background-color-negative,
+        var(--spectrum-badge-subtle-background-color-negative)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--positive {
+    background: var(
+        --mod-badge-subtle-background-color-positive,
+        var(--spectrum-badge-subtle-background-color-positive)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--notice {
+    background: var(
+        --mod-badge-subtle-background-color-notice,
+        var(--spectrum-badge-subtle-background-color-notice)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--gray {
+    background: var(
+        --mod-badge-subtle-background-color-gray,
+        var(--spectrum-badge-subtle-background-color-gray)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--red {
+    background: var(
+        --mod-badge-subtle-background-color-red,
+        var(--spectrum-badge-subtle-background-color-red)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--orange {
+    background: var(
+        --mod-badge-subtle-background-color-orange,
+        var(--spectrum-badge-subtle-background-color-orange)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--yellow {
+    background: var(
+        --mod-badge-subtle-background-color-yellow,
+        var(--spectrum-badge-subtle-background-color-yellow)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--chartreuse {
+    background: var(
+        --mod-badge-subtle-background-color-chartreuse,
+        var(--spectrum-badge-subtle-background-color-chartreuse)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--celery {
+    background: var(
+        --mod-badge-subtle-background-color-celery,
+        var(--spectrum-badge-subtle-background-color-celery)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--green {
+    background: var(
+        --mod-badge-subtle-background-color-green,
+        var(--spectrum-badge-subtle-background-color-green)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--seafoam {
+    background: var(
+        --mod-badge-subtle-background-color-seafoam,
+        var(--spectrum-badge-subtle-background-color-seafoam)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--cyan {
+    background: var(
+        --mod-badge-subtle-background-color-cyan,
+        var(--spectrum-badge-subtle-background-color-cyan)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--blue {
+    background: var(
+        --mod-badge-subtle-background-color-blue,
+        var(--spectrum-badge-subtle-background-color-blue)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--indigo {
+    background: var(
+        --mod-badge-subtle-background-color-indigo,
+        var(--spectrum-badge-subtle-background-color-indigo)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--purple {
+    background: var(
+        --mod-badge-subtle-background-color-purple,
+        var(--spectrum-badge-subtle-background-color-purple)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--fuchsia {
+    background: var(
+        --mod-badge-subtle-background-color-fuchsia,
+        var(--spectrum-badge-subtle-background-color-fuchsia)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--magenta {
+    background: var(
+        --mod-badge-subtle-background-color-magenta,
+        var(--spectrum-badge-subtle-background-color-magenta)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--pink {
+    background: var(
+        --mod-badge-subtle-background-color-pink,
+        var(--spectrum-badge-subtle-background-color-pink)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--turquoise {
+    background: var(
+        --mod-badge-subtle-background-color-turquoise,
+        var(--spectrum-badge-subtle-background-color-turquoise)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--brown {
+    background: var(
+        --mod-badge-subtle-background-color-brown,
+        var(--spectrum-badge-subtle-background-color-brown)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--cinnamon {
+    background: var(
+        --mod-badge-subtle-background-color-cinnamon,
+        var(--spectrum-badge-subtle-background-color-cinnamon)
+    );
+}
+
+.spectrum-Badge--subtle.spectrum-Badge--silver {
+    background: var(
+        --mod-badge-subtle-background-color-silver,
+        var(--spectrum-badge-subtle-background-color-silver)
+    );
+}
+
+.spectrum-Badge--outline:is(
+        .spectrum-Badge--neutral,
+        .spectrum-Badge--accent,
+        .spectrum-Badge--informative,
+        .spectrum-Badge--negative,
+        .spectrum-Badge--positive,
+        .spectrum-Badge--notice
+    ) {
+    background: var(
+        --mod-badge-outline-background-color-default,
+        var(--spectrum-badge-outline-background-color)
+    );
+    color: var(
+        --mod-badge-outline-label-icon-color,
+        var(--spectrum-badge-outline-label-icon-color)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--neutral {
+    border-color: var(
+        --mod-badge-outline-border-color-neutral,
+        var(--spectrum-badge-outline-border-color-neutral)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--accent {
+    border-color: var(
+        --mod-badge-outline-border-color-accent,
+        var(--spectrum-badge-outline-border-color-accent)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--informative {
+    border-color: var(
+        --mod-badge-outline-border-color-informative,
+        var(--spectrum-badge-outline-border-color-informative)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--negative {
+    border-color: var(
+        --mod-badge-outline-border-color-negative,
+        var(--spectrum-badge-outline-border-color-negative)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--positive {
+    border-color: var(
+        --mod-badge-outline-border-color-positive,
+        var(--spectrum-badge-outline-border-color-positive)
+    );
+}
+
+.spectrum-Badge--outline.spectrum-Badge--notice {
+    border-color: var(
+        --mod-badge-outline-border-color-notice,
+        var(--spectrum-badge-outline-border-color-notice)
+    );
+}
+
+.spectrum-Badge--fixed-inline-start {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 }
 
-:host([fixed='inline-end']) {
+.spectrum-Badge--fixed-inline-end {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
 }
 
-:host([fixed='block-start']) {
+.spectrum-Badge--fixed-block-start {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
 }
 
-:host([fixed='block-end']) {
-    border-end-end-radius: 0;
+.spectrum-Badge--fixed-block-end {
     border-end-start-radius: 0;
+    border-end-end-radius: 0;
 }
 
-.label {
+.spectrum-Badge-label {
     font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size));
+    font-weight: var(--spectrum-badge-font-weight);
     line-height: var(
         --mod-badge-line-height,
         var(--spectrum-badge-line-height)
     );
-    color: var(
-        --mod-badge-label-icon-color,
-        var(--spectrum-badge-label-icon-color)
-    );
-    padding-block-start: var(
-        --mod-badge-label-spacing-vertical-top,
-        var(--spectrum-badge-label-spacing-vertical-top)
-    );
-    padding-block-end: var(
-        --mod-badge-label-spacing-vertical-bottom,
-        var(--spectrum-badge-label-spacing-vertical-bottom)
+    padding-inline-end: calc(
+        var(
+                --mod-badge-label-spacing-horizontal,
+                var(--spectrum-badge-label-spacing-horizontal)
+            ) -
+            var(--spectrum-badge-border-width)
     );
     padding-inline-start: var(
         --mod-badge-label-spacing-horizontal,
         var(--spectrum-badge-label-spacing-horizontal)
     );
-    padding-inline-end: var(
-        --mod-badge-label-spacing-horizontal,
-        var(--spectrum-badge-label-spacing-horizontal)
+    padding-block-start: calc(
+        var(
+                --mod-badge-label-spacing-vertical-top,
+                var(--spectrum-badge-label-spacing-vertical-top)
+            ) -
+            var(--spectrum-badge-border-width)
+    );
+    padding-block-end: calc(
+        var(
+                --mod-badge-label-spacing-vertical-bottom,
+                var(--spectrum-badge-label-spacing-vertical-bottom)
+            ) -
+            var(--spectrum-badge-border-width)
     );
 }
 
-.label:lang(ja),
-.label:lang(ko),
-.label:lang(zh) {
+.spectrum-Badge-label:lang(ja),
+.spectrum-Badge-label:lang(ko),
+.spectrum-Badge-label:lang(zh) {
     line-height: var(
         --mod-badge-line-height-cjk,
         var(--spectrum-badge-line-height-cjk)
     );
 }
 
-[name='icon'] + .label {
+.spectrum-Badge-icon + .spectrum-Badge-label {
     padding-inline-start: 0;
 }
 
-::slotted([slot='icon']) {
+.spectrum-Badge-icon {
     block-size: var(
         --mod-badge-workflow-icon-size,
         var(--spectrum-badge-workflow-icon-size)
@@ -439,87 +847,52 @@
             --mod-badge-workflow-icon-size,
             var(--spectrum-badge-workflow-icon-size)
         );
-    color: var(
-        --mod-badge-label-icon-color,
-        var(--spectrum-badge-label-icon-color)
-    );
-    padding-block-start: var(
-        --mod-badge-icon-spacing-vertical-top,
-        var(--spectrum-badge-icon-spacing-vertical-top)
-    );
-    padding-block-end: var(
-        --mod-badge-icon-spacing-vertical-top,
-        var(--spectrum-badge-icon-spacing-vertical-top)
-    );
-    padding-inline-start: var(
-        --mod-badge-icon-spacing-horizontal,
-        var(--spectrum-badge-icon-spacing-horizontal)
+    margin-inline-start: calc(
+        var(
+                --mod-badge-icon-spacing-horizontal,
+                var(--spectrum-badge-icon-spacing-horizontal)
+            ) -
+            var(--spectrum-badge-border-width)
     );
-    padding-inline-end: var(
+    margin-inline-end: var(
         --mod-badge-icon-text-spacing,
         var(--spectrum-badge-icon-text-spacing)
     );
-}
-
-[icon-only]::slotted(*) {
-    padding-inline-start: var(
-        --mod-badge-icon-only-spacing-horizontal,
-        var(--spectrum-badge-icon-only-spacing-horizontal)
+    margin-block-start: calc(
+        var(
+                --mod-badge-icon-spacing-vertical-top,
+                var(--spectrum-badge-icon-spacing-vertical-top)
+            ) -
+            var(--spectrum-badge-border-width)
     );
-    padding-inline-end: var(
-        --mod-badge-icon-only-spacing-horizontal,
-        var(--spectrum-badge-icon-only-spacing-horizontal)
+    margin-block-end: calc(
+        var(
+                --mod-badge-icon-spacing-vertical-top,
+                var(--spectrum-badge-icon-spacing-vertical-top)
+            ) -
+            var(--spectrum-badge-border-width)
     );
 }
 
-/* center align icons and text */
-
-:host {
-    align-items: center;
-}
-
-/* cascade badge's size to its icon */
-
-:host([size='xs']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
-}
-
-:host([size='s']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
-}
-
-:host([size='m']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
-}
-
-:host([size='l']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
-}
-
-:host([size='xl']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
-}
-
-:host([size='xxl']) {
-    --spectrum-icon-size: var(--spectrum-workflow-icon-size-400);
-}
-
-/* don't shrink icons and ensure they're separated from labels */
-
-::slotted([slot='icon']) {
-    flex-shrink: 0;
-}
-
-/* limit badge size to two lines */
-
-.label slot {
-    display: block;
-    max-height: calc(
-        var(--spectrum-badge-line-height) * var(--spectrum-badge-font-size) * 2
+.spectrum-Badge-icon--no-label {
+    margin-inline-start: calc(
+        var(
+                --mod-badge-icon-only-spacing-horizontal,
+                var(--spectrum-badge-icon-only-spacing-horizontal)
+            ) -
+            var(--spectrum-badge-border-width)
+    );
+    margin-inline-end: calc(
+        var(
+                --mod-badge-icon-only-spacing-horizontal,
+                var(--spectrum-badge-icon-only-spacing-horizontal)
+            ) -
+            var(--spectrum-badge-border-width)
     );
-    overflow: hidden;
 }
 
-[icon-only] + .label {
-    display: none;
+.spectrum-Badge,
+.spectrum-Badge-icon,
+.spectrum-Badge-label {
+    box-sizing: border-box;
 }
diff --git a/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
index fcdcdd3d0dc..953b4c4be5d 100644
--- a/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
+++ b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
@@ -11,12 +11,18 @@
  */
 
 import { CSSResultArray, html, TemplateResult } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { ProgressCircleBase } from '@swc/core/components/progress-circle';
 
 import progressCircleStyles from './progress-circle.css';
 
+function capitalize(str?: string): string {
+    if (typeof str !== 'string') {
+        return '';
+    }
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
 /**
  * A progress circle component that visually represents the completion progress of a task.
  * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.
@@ -25,12 +31,7 @@ import progressCircleStyles from './progress-circle.css';
  * @since 2.0.0
  * @status stable
  * @github https://github.com/adobe/spectrum-web-components/tree/main/second-gen/packages/swc/components/progress-circle
- * @figma https://spectrum.figma.com/file/progress-circle
- *
- * @slot - Optional content to display inside the progress circle (e.g., percentage text)
- *
- * @csspart track - The background track of the progress circle
- * @csspart fill - The filled portion of the progress circle
+ * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13061-181
  *
  * @fires progress-change - Dispatched when the progress value changes
  *
@@ -46,29 +47,51 @@ export class ProgressCircle extends ProgressCircleBase {
     }
 
     protected override render(): TemplateResult {
-        const styles = [
-            this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
-            this.makeRotation(
-                -180 + (180 / 50) * Math.max(this.progress - 50, 0)
-            ),
-        ];
-        const masks = ['Mask1', 'Mask2'];
+        // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
+        const radius = `calc(50% - ${this.strokeWidth / 2}px)`;
+
         return html`
-            <slot @slotchange=${this.handleSlotchange}></slot>
-            <div class="track"></div>
-            <div class="fills">
-                ${masks.map(
-                    (mask, index) => html`
-                        <div class="fill${mask}">
-                            <div
-                                class="fillSub${mask}"
-                                style=${ifDefined(styles[index])}
-                            >
-                                <div class="fill"></div>
-                            </div>
-                        </div>
-                    `
-                )}
+            <div
+                class=${classMap({
+                    ['spectrum-ProgressCircle']: true,
+                    [`spectrum-ProgressCircle--indeterminate`]:
+                        this.indeterminate,
+                    [`spectrum-ProgressCircle--static${capitalize(this.staticColor)}`]:
+                        typeof this.staticColor !== 'undefined',
+                    [`spectrum-ProgressCircle--size${this.size?.toUpperCase()}`]:
+                        typeof this.size !== 'undefined',
+                })}
+            >
+                <svg
+                    fill="none"
+                    width="100%"
+                    height="100%"
+                    class="spectrum-outerCircle"
+                >
+                    <circle
+                        class="spectrum-innerCircle"
+                        cx="50%"
+                        cy="50%"
+                        r=${`calc(50% - ${this.strokeWidth / 1}px)`}
+                        stroke-width=${this.strokeWidth}
+                    />
+                    <circle
+                        cx="50%"
+                        cy="50%"
+                        class="spectrum-ProgressCircle-track"
+                        r=${radius}
+                    />
+                    <circle
+                        cx="50%"
+                        cy="50%"
+                        r=${radius}
+                        class="spectrum-ProgressCircle-fill"
+                        pathLength="100"
+                        stroke-dasharray="100 200"
+                        stroke-dashoffset=${100 - this.progress}
+                        stroke-linecap="round"
+                    />
+                </svg>
             </div>
         `;
     }
diff --git a/second-gen/packages/swc/components/progress-circle/progress-circle.css b/second-gen/packages/swc/components/progress-circle/progress-circle.css
index 49625ee608f..7e7fbc4d808 100644
--- a/second-gen/packages/swc/components/progress-circle/progress-circle.css
+++ b/second-gen/packages/swc/components/progress-circle/progress-circle.css
@@ -1,8 +1,9 @@
-/**
+/*!
  * Copyright 2025 Adobe. All rights reserved.
+ *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
  *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
@@ -10,52 +11,36 @@
  * governing permissions and limitations under the License.
  */
 
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-progress-circle-fill-border-color: Highlight;
-        --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+@keyframes spectrum-fills-rotate {
+    0% {
+        transform: rotate(-90deg);
     }
 
-    .track {
-        --spectrum-progress-circle-track-border-style: double;
+    100% {
+        transform: rotate(270deg);
     }
 }
 
-:host {
-    --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
-    --spectrum-progress-circle-fill-border-color: var(
-        --spectrum-accent-content-color-default
-    );
-    --spectrum-progress-circle-track-border-color-over-background: var(
-        --spectrum-transparent-white-300
-    );
-    --spectrum-progress-circle-fill-border-color-over-background: var(
-        --spectrum-transparent-white-900
-    );
-    --spectrum-progress-circle-track-border-style: solid;
+@keyframes spectrum-dashoffset-animation {
+    0%,
+    100% {
+        stroke-dashoffset: 75px;
+    }
 
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    position: var(--mod-progress-circle-position, relative);
-    direction: ltr;
-    display: inline-block;
-    transform: translateZ(0);
+    30% {
+        stroke-dashoffset: 20px;
+    }
 }
 
-:host([size='s']) {
-    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
-    --spectrum-progress-circle-thickness: var(
-        --spectrum-progress-circle-thickness-small
-    );
+:host {
+    display: inline-block;
 }
 
-:host {
+.spectrum-ProgressCircle {
+    --spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
+    --spectrum-progress-circle-fill-border-color: var(
+        --spectrum-accent-content-color-default
+    );
     --spectrum-progress-circle-size: var(
         --spectrum-progress-circle-size-medium
     );
@@ -64,707 +49,95 @@
     );
 }
 
-:host([size='l']) {
-    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+.spectrum-ProgressCircle--sizeS {
+    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
     --spectrum-progress-circle-thickness: var(
-        --spectrum-progress-circle-thickness-large
+        --spectrum-progress-circle-thickness-small
     );
 }
 
-.track {
-    box-sizing: border-box;
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    border-style: var(
-        --mod-progress-circle-track-border-style,
-        var(--spectrum-progress-circle-track-border-style)
-    );
-    border-width: var(
-        --mod-progress-circle-thickness,
-        var(--spectrum-progress-circle-thickness)
-    );
-    border-radius: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    border-color: var(
-        --mod-progress-circle-track-border-color,
-        var(--spectrum-progress-circle-track-border-color)
+.spectrum-ProgressCircle--sizeL {
+    --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+    --spectrum-progress-circle-thickness: var(
+        --spectrum-progress-circle-thickness-large
     );
 }
 
-.fills {
-    inline-size: 100%;
-    block-size: 100%;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
+.spectrum-ProgressCircle {
+    display: inline-block;
+    inline-size: var(--spectrum-progress-circle-size);
+    block-size: var(--spectrum-progress-circle-size);
+    position: var(--mod-progress-circle-position, relative);
+    direction: ltr;
+    transform: translateZ(0);
 }
 
-.fill {
-    box-sizing: border-box;
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    border-style: solid;
-    border-width: var(
-        --mod-progress-circle-thickness,
-        var(--spectrum-progress-circle-thickness)
+.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
+    --spectrum-progress-circle-track-border-color: var(
+        --spectrum-static-white-track-color
     );
-    border-radius: var(
-        --mod-progress-circle-size,
-        var(--spectrum-progress-circle-size)
-    );
-    border-color: var(
-        --highcontrast-progress-circle-fill-border-color,
-        var(
-            --mod-progress-circle-fill-border-color,
-            var(--spectrum-progress-circle-fill-border-color)
-        )
+    --spectrum-progress-circle-fill-border-color: var(
+        --spectrum-static-white-track-indicator-color
     );
 }
 
-:host([static-color='white']) .track {
-    border-color: var(
-        --mod-progress-circle-track-border-color-over-background,
-        var(--spectrum-progress-circle-track-border-color-over-background)
+.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack {
+    --spectrum-progress-circle-track-border-color: var(
+        --spectrum-static-black-track-color
     );
-}
-
-:host([static-color='white']) .fill {
-    border-color: var(
-        --highcontrast-progress-circle-fill-border-color-over-background,
-        var(
-            --mod-progress-circle-fill-border-color-over-background,
-            var(--spectrum-progress-circle-fill-border-color-over-background)
-        )
+    --spectrum-progress-circle-fill-border-color: var(
+        --spectrum-static-black-track-indicator-color
     );
 }
 
-.fillMask1,
-.fillMask2 {
-    inline-size: 50%;
-    block-size: 100%;
-    transform-origin: 100%;
-    position: absolute;
-    overflow: hidden;
-    transform: rotate(180deg);
-}
-
-.fillSubMask1,
-.fillSubMask2 {
-    inline-size: 100%;
-    block-size: 100%;
-    transform-origin: 100%;
-    overflow: hidden;
-    transform: rotate(-180deg);
+.spectrum-ProgressCircle-fill,
+.spectrum-ProgressCircle-track {
+    box-sizing: border-box;
+    inline-size: var(--spectrum-progress-circle-size);
+    block-size: var(--spectrum-progress-circle-size);
 }
 
-.fillMask2 {
-    transform: rotate(0);
+.spectrum-ProgressCircle-track {
+    stroke-width: var(--spectrum-progress-circle-thickness);
+    stroke: var(
+        --highcontrast-progress-circle-track-color,
+        var(--spectrum-progress-circle-track-border-color)
+    );
 }
 
-:host([indeterminate]) .fills {
-    will-change: transform;
+.spectrum-ProgressCircle-fill {
+    stroke-width: var(--spectrum-progress-circle-thickness);
+    stroke: var(
+        --highcontrast-progress-circle-fill-border-color,
+        var(--spectrum-progress-circle-fill-border-color)
+    );
+    transform: rotate(-90deg);
     transform-origin: center;
-    animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite
-        spectrum-fills-rotate;
-    transform: translateZ(0);
-}
-
-:host([indeterminate]) .fillSubMask1 {
-    will-change: transform;
-    animation: 1s linear infinite spectrum-fill-mask-1;
-    transform: translateZ(0);
 }
 
-:host([indeterminate]) .fillSubMask2 {
+.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill {
     will-change: transform;
-    animation: 1s linear infinite spectrum-fill-mask-2;
-    transform: translateZ(0);
-}
-
-.fill-submask-2 {
-    animation: 1s linear infinite spectrum-fill-mask-2;
-}
-
-@keyframes spectrum-fill-mask-1 {
-    0% {
-        transform: rotate(90deg);
-    }
-
-    1.69% {
-        transform: rotate(72.3deg);
-    }
-
-    3.39% {
-        transform: rotate(55.5deg);
-    }
-
-    5.08% {
-        transform: rotate(40.3deg);
-    }
-
-    6.78% {
-        transform: rotate(25deg);
-    }
-
-    8.47% {
-        transform: rotate(10.6deg);
-    }
-
-    10.17% {
-        transform: rotate(0);
-    }
-
-    11.86% {
-        transform: rotate(0);
-    }
-
-    13.56% {
-        transform: rotate(0);
-    }
-
-    15.25% {
-        transform: rotate(0);
-    }
-
-    16.95% {
-        transform: rotate(0);
-    }
-
-    18.64% {
-        transform: rotate(0);
-    }
-
-    20.34% {
-        transform: rotate(0);
-    }
-
-    22.03% {
-        transform: rotate(0);
-    }
-
-    23.73% {
-        transform: rotate(0);
-    }
-
-    25.42% {
-        transform: rotate(0);
-    }
-
-    27.12% {
-        transform: rotate(0);
-    }
-
-    28.81% {
-        transform: rotate(0);
-    }
-
-    30.51% {
-        transform: rotate(0);
-    }
-
-    32.2% {
-        transform: rotate(0);
-    }
-
-    33.9% {
-        transform: rotate(0);
-    }
-
-    35.59% {
-        transform: rotate(0);
-    }
-
-    37.29% {
-        transform: rotate(0);
-    }
-
-    38.98% {
-        transform: rotate(0);
-    }
-
-    40.68% {
-        transform: rotate(0);
-    }
-
-    42.37% {
-        transform: rotate(5.3deg);
-    }
-
-    44.07% {
-        transform: rotate(13.4deg);
-    }
-
-    45.76% {
-        transform: rotate(20.6deg);
-    }
-
-    47.46% {
-        transform: rotate(29deg);
-    }
-
-    49.15% {
-        transform: rotate(36.5deg);
-    }
-
-    50.85% {
-        transform: rotate(42.6deg);
-    }
-
-    52.54% {
-        transform: rotate(48.8deg);
-    }
-
-    54.24% {
-        transform: rotate(54.2deg);
-    }
-
-    55.93% {
-        transform: rotate(59.4deg);
-    }
-
-    57.63% {
-        transform: rotate(63.2deg);
-    }
-
-    59.32% {
-        transform: rotate(67.2deg);
-    }
-
-    61.02% {
-        transform: rotate(70.8deg);
-    }
-
-    62.71% {
-        transform: rotate(73.8deg);
-    }
-
-    64.41% {
-        transform: rotate(76.2deg);
-    }
-
-    66.1% {
-        transform: rotate(78.7deg);
-    }
-
-    67.8% {
-        transform: rotate(80.6deg);
-    }
-
-    69.49% {
-        transform: rotate(82.6deg);
-    }
-
-    71.19% {
-        transform: rotate(83.7deg);
-    }
-
-    72.88% {
-        transform: rotate(85deg);
-    }
-
-    74.58% {
-        transform: rotate(86.3deg);
-    }
-
-    76.27% {
-        transform: rotate(87deg);
-    }
-
-    77.97% {
-        transform: rotate(87.7deg);
-    }
-
-    79.66% {
-        transform: rotate(88.3deg);
-    }
-
-    81.36% {
-        transform: rotate(88.6deg);
-    }
-
-    83.05% {
-        transform: rotate(89.2deg);
-    }
-
-    84.75% {
-        transform: rotate(89.2deg);
-    }
-
-    86.44% {
-        transform: rotate(89.5deg);
-    }
-
-    88.14% {
-        transform: rotate(89.9deg);
-    }
-
-    89.83% {
-        transform: rotate(89.7deg);
-    }
-
-    91.53% {
-        transform: rotate(90.1deg);
-    }
-
-    93.22% {
-        transform: rotate(90.2deg);
-    }
-
-    94.92% {
-        transform: rotate(90.1deg);
-    }
-
-    96.61% {
-        transform: rotate(90deg);
-    }
-
-    98.31% {
-        transform: rotate(89.8deg);
-    }
-
-    100% {
-        transform: rotate(90deg);
-    }
+    animation:
+        spectrum-fills-rotate 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite,
+        spectrum-dashoffset-animation 1s cubic-bezier(0.25, 0.1, 0.25, 1.3)
+            infinite;
+    transform-origin: center;
 }
 
-@keyframes spectrum-fill-mask-2 {
-    0% {
-        transform: rotate(180deg);
-    }
-
-    1.69% {
-        transform: rotate(180deg);
-    }
-
-    3.39% {
-        transform: rotate(180deg);
-    }
-
-    5.08% {
-        transform: rotate(180deg);
-    }
-
-    6.78% {
-        transform: rotate(180deg);
-    }
-
-    8.47% {
-        transform: rotate(180deg);
-    }
-
-    10.17% {
-        transform: rotate(179.2deg);
-    }
-
-    11.86% {
-        transform: rotate(164deg);
-    }
-
-    13.56% {
-        transform: rotate(151.8deg);
-    }
-
-    15.25% {
-        transform: rotate(140.8deg);
-    }
-
-    16.95% {
-        transform: rotate(130.3deg);
-    }
-
-    18.64% {
-        transform: rotate(120.4deg);
-    }
-
-    20.34% {
-        transform: rotate(110.8deg);
-    }
-
-    22.03% {
-        transform: rotate(101.6deg);
-    }
-
-    23.73% {
-        transform: rotate(93.5deg);
-    }
-
-    25.42% {
-        transform: rotate(85.4deg);
-    }
-
-    27.12% {
-        transform: rotate(78.1deg);
-    }
-
-    28.81% {
-        transform: rotate(71.2deg);
-    }
-
-    30.51% {
-        transform: rotate(89.1deg);
-    }
-
-    32.2% {
-        transform: rotate(105.5deg);
-    }
-
-    33.9% {
-        transform: rotate(121.3deg);
-    }
-
-    35.59% {
-        transform: rotate(135.5deg);
-    }
-
-    37.29% {
-        transform: rotate(148.4deg);
-    }
-
-    38.98% {
-        transform: rotate(161deg);
-    }
-
-    40.68% {
-        transform: rotate(173.5deg);
-    }
-
-    42.37% {
-        transform: rotate(180deg);
-    }
-
-    44.07% {
-        transform: rotate(180deg);
-    }
-
-    45.76% {
-        transform: rotate(180deg);
-    }
-
-    47.46% {
-        transform: rotate(180deg);
-    }
-
-    49.15% {
-        transform: rotate(180deg);
-    }
-
-    50.85% {
-        transform: rotate(180deg);
-    }
-
-    52.54% {
-        transform: rotate(180deg);
-    }
-
-    54.24% {
-        transform: rotate(180deg);
-    }
-
-    55.93% {
-        transform: rotate(180deg);
-    }
-
-    57.63% {
-        transform: rotate(180deg);
-    }
-
-    59.32% {
-        transform: rotate(180deg);
-    }
-
-    61.02% {
-        transform: rotate(180deg);
-    }
-
-    62.71% {
-        transform: rotate(180deg);
-    }
-
-    64.41% {
-        transform: rotate(180deg);
-    }
-
-    66.1% {
-        transform: rotate(180deg);
-    }
-
-    67.8% {
-        transform: rotate(180deg);
-    }
-
-    69.49% {
-        transform: rotate(180deg);
-    }
-
-    71.19% {
-        transform: rotate(180deg);
-    }
-
-    72.88% {
-        transform: rotate(180deg);
-    }
-
-    74.58% {
-        transform: rotate(180deg);
-    }
-
-    76.27% {
-        transform: rotate(180deg);
-    }
-
-    77.97% {
-        transform: rotate(180deg);
-    }
-
-    79.66% {
-        transform: rotate(180deg);
-    }
-
-    81.36% {
-        transform: rotate(180deg);
-    }
-
-    83.05% {
-        transform: rotate(180deg);
-    }
-
-    84.75% {
-        transform: rotate(180deg);
-    }
-
-    86.44% {
-        transform: rotate(180deg);
-    }
-
-    88.14% {
-        transform: rotate(180deg);
-    }
-
-    89.83% {
-        transform: rotate(180deg);
-    }
-
-    91.53% {
-        transform: rotate(180deg);
-    }
-
-    93.22% {
-        transform: rotate(180deg);
-    }
-
-    94.92% {
-        transform: rotate(180deg);
-    }
-
-    96.61% {
-        transform: rotate(180deg);
-    }
-
-    98.31% {
-        transform: rotate(180deg);
-    }
-
-    100% {
-        transform: rotate(180deg);
+@media (forced-colors: active) {
+    .spectrum-ProgressCircle {
+        --highcontrast-progress-circle-fill-border-color: Highlight;
+        --highcontrast-progress-circle-track-color: Background;
     }
-}
 
-@keyframes spectrum-fills-rotate {
-    0% {
-        transform: rotate(-90deg);
+    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
+        .spectrum-innerCircle {
+        stroke: CanvasText;
     }
 
-    100% {
-        transform: rotate(270deg);
+    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
+        .spectrum-outerCircle {
+        border: 1px solid CanvasText;
+        border-radius: 50%;
     }
 }
-
-:host {
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-
-    --spectrum-progress-circle-size: inherit;
-    --spectrum-progresscircle-m-over-background-track-fill-color: var(
-        --spectrum-alias-track-fill-color-overbackground
-    );
-    --_spectrum-progress-circle-size: var(
-        --spectrum-progress-circle-size,
-        var(--spectrum-progress-circle-size-medium)
-    );
-}
-
-:host([size='s']) {
-    --_spectrum-progress-circle-size: var(
-        --spectrum-progress-circle-size,
-        var(--spectrum-progress-circle-size-small)
-    );
-}
-
-:host([size='l']) {
-    --_spectrum-progress-circle-size: var(
-        --spectrum-progress-circle-size,
-        var(--spectrum-progress-circle-size-large)
-    );
-}
-
-slot {
-    display: none;
-}
-
-.track {
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-    border-radius: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-}
-
-.fill {
-    block-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-    border-radius: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-    inline-size: var(
-        --mod-progress-circle-size,
-        var(--_spectrum-progress-circle-size)
-    );
-}
-
-/* stylelint-disable */
-:host([indeterminate]) .fills,
-:host([indeterminate]) .fillSubMask1,
-:host([indeterminate]) .fillSubMask2 {
-    animation-duration: var(--spectrum-animation-duration-2000);
-}
-/* stylelint-enable */
diff --git a/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
index 085d5261a78..a6dec357c9c 100644
--- a/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
+++ b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
@@ -139,7 +139,7 @@ export const Indeterminate: Story = {
 export const StaticWhite: Story = {
     render: () => html`
         <div
-            style="background-color: rgba(0,0,0,0.4); padding: 24px; display: flex; gap: 24px; align-items: center;"
+            style="background: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); padding: 24px; display: flex; gap: 24px; align-items: center;"
         >
             <swc-progress-circle
                 .progress=${60}
@@ -163,6 +163,33 @@ export const StaticWhite: Story = {
     `,
 };
 
+export const StaticBlack: Story = {
+    render: () => html`
+        <div
+            style="background: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); padding: 24px; display: flex; gap: 24px; align-items: center;"
+        >
+            <swc-progress-circle
+                .progress=${60}
+                static-color="black"
+                size="s"
+                label="Loading on dark background"
+            ></swc-progress-circle>
+            <swc-progress-circle
+                .progress=${60}
+                static-color="black"
+                size="m"
+                label="Loading on dark background"
+            ></swc-progress-circle>
+            <swc-progress-circle
+                .progress=${60}
+                static-color="black"
+                size="l"
+                label="Loading on dark background"
+            ></swc-progress-circle>
+        </div>
+    `,
+};
+
 export const IndeterminateStaticWhite: Story = {
     render: () => html`
         <div
@@ -189,9 +216,3 @@ export const IndeterminateStaticWhite: Story = {
         </div>
     `,
 };
-
-export const WithSlottedContent: Story = {
-    render: () => html`
-        <swc-progress-circle .progress=${45}> Loading... </swc-progress-circle>
-    `,
-};

From e89e30268a301d978e95f4f85ccb3969e93b2506 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 3 Sep 2025 14:43:48 -0400
Subject: [PATCH 2/5] fix(badge,progress-circle): remove modifiers

---
 .../packages/swc/components/badge/badge.css   | 397 ++++--------------
 .../progress-circle/progress-circle.css       |   2 +-
 2 files changed, 82 insertions(+), 317 deletions(-)

diff --git a/second-gen/packages/swc/components/badge/badge.css b/second-gen/packages/swc/components/badge/badge.css
index 30bfc7b4f95..2a4997ba46e 100644
--- a/second-gen/packages/swc/components/badge/badge.css
+++ b/second-gen/packages/swc/components/badge/badge.css
@@ -16,10 +16,7 @@
 }
 
 .spectrum-Badge {
-    --spectrum-badge-border-width: var(
-        --mod-badge-border-width,
-        var(--spectrum-border-width-200)
-    );
+    --spectrum-badge-border-width: var(--spectrum-border-width-200);
     --spectrum-badge-border-color: transparent;
     --spectrum-badge-line-height: var(--spectrum-line-height-100);
     --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
@@ -325,385 +322,223 @@
 }
 
 .spectrum-Badge {
-    min-block-size: var(--mod-badge-height, var(--spectrum-badge-height));
+    min-block-size: var(--spectrum-badge-height);
     inline-size: auto;
     display: inline-flex;
     vertical-align: middle;
     position: relative;
     cursor: default;
     border: var(--spectrum-badge-border-width) solid
-        var(--mod-badge-border-color, var(--spectrum-badge-border-color));
-    border-radius: var(
-        --mod-badge-corner-radius,
-        var(--spectrum-badge-corner-radius)
-    );
-    background: var(
-        --mod-badge-background-color-default,
-        var(--spectrum-badge-background-color-default)
-    );
-    color: var(
-        --mod-badge-label-icon-color,
-        var(--spectrum-badge-label-icon-color)
-    );
+        var(--spectrum-badge-border-color);
+    border-radius: var(--spectrum-badge-corner-radius);
+    background: var(--spectrum-badge-background-color-default);
+    color: var(--spectrum-badge-label-icon-color);
     background-origin: border-box;
     align-self: start;
 }
 
 .spectrum-Badge--neutral {
-    background: var(
-        --mod-badge-background-color-default,
-        var(--spectrum-badge-background-color-default)
-    );
+    background: var(--spectrum-badge-background-color-default);
 }
 
 .spectrum-Badge--accent {
-    background: var(
-        --mod-badge-background-color-accent,
-        var(--spectrum-badge-background-color-accent)
-    );
+    background: var(--spectrum-badge-background-color-accent);
 }
 
 .spectrum-Badge--informative {
-    background: var(
-        --mod-badge-background-color-informative,
-        var(--spectrum-badge-background-color-informative)
-    );
+    background: var(--spectrum-badge-background-color-informative);
 }
 
 .spectrum-Badge--negative {
-    background: var(
-        --mod-badge-background-color-negative,
-        var(--spectrum-badge-background-color-negative)
-    );
+    background: var(--spectrum-badge-background-color-negative);
 }
 
 .spectrum-Badge--positive {
-    background: var(
-        --mod-badge-background-color-positive,
-        var(--spectrum-badge-background-color-positive)
-    );
+    background: var(--spectrum-badge-background-color-positive);
 }
 
 .spectrum-Badge--notice {
-    background: var(
-        --mod-badge-background-color-notice,
-        var(--spectrum-badge-background-color-notice)
-    );
+    background: var(--spectrum-badge-background-color-notice);
 }
 
 .spectrum-Badge--gray {
-    background: var(
-        --mod-badge-background-color-gray,
-        var(--spectrum-badge-background-color-gray)
-    );
+    background: var(--spectrum-badge-background-color-gray);
 }
 
 .spectrum-Badge--red {
-    background: var(
-        --mod-badge-background-color-red,
-        var(--spectrum-badge-background-color-red)
-    );
+    background: var(--spectrum-badge-background-color-red);
 }
 
 .spectrum-Badge--orange {
-    background: var(
-        --mod-badge-background-color-orange,
-        var(--spectrum-badge-background-color-orange)
-    );
+    background: var(--spectrum-badge-background-color-orange);
 }
 
 .spectrum-Badge--yellow {
-    background: var(
-        --mod-badge-background-color-yellow,
-        var(--spectrum-badge-background-color-yellow)
-    );
+    background: var(--spectrum-badge-background-color-yellow);
 }
 
 .spectrum-Badge--chartreuse {
-    background: var(
-        --mod-badge-background-color-chartreuse,
-        var(--spectrum-badge-background-color-chartreuse)
-    );
+    background: var(--spectrum-badge-background-color-chartreuse);
 }
 
 .spectrum-Badge--celery {
-    background: var(
-        --mod-badge-background-color-celery,
-        var(--spectrum-badge-background-color-celery)
-    );
+    background: var(--spectrum-badge-background-color-celery);
 }
 
 .spectrum-Badge--green {
-    background: var(
-        --mod-badge-background-color-green,
-        var(--spectrum-badge-background-color-green)
-    );
+    background: var(--spectrum-badge-background-color-green);
 }
 
 .spectrum-Badge--seafoam {
-    background: var(
-        --mod-badge-background-color-seafoam,
-        var(--spectrum-badge-background-color-seafoam)
-    );
+    background: var(--spectrum-badge-background-color-seafoam);
 }
 
 .spectrum-Badge--cyan {
-    background: var(
-        --mod-badge-background-color-cyan,
-        var(--spectrum-badge-background-color-cyan)
-    );
+    background: var(--spectrum-badge-background-color-cyan);
 }
 
 .spectrum-Badge--blue {
-    background: var(
-        --mod-badge-background-color-blue,
-        var(--spectrum-badge-background-color-blue)
-    );
+    background: var(--spectrum-badge-background-color-blue);
 }
 
 .spectrum-Badge--indigo {
-    background: var(
-        --mod-badge-background-color-indigo,
-        var(--spectrum-badge-background-color-indigo)
-    );
+    background: var(--spectrum-badge-background-color-indigo);
 }
 
 .spectrum-Badge--purple {
-    background: var(
-        --mod-badge-background-color-purple,
-        var(--spectrum-badge-background-color-purple)
-    );
+    background: var(--spectrum-badge-background-color-purple);
 }
 
 .spectrum-Badge--fuchsia {
-    background: var(
-        --mod-badge-background-color-fuchsia,
-        var(--spectrum-badge-background-color-fuchsia)
-    );
+    background: var(--spectrum-badge-background-color-fuchsia);
 }
 
 .spectrum-Badge--magenta {
-    background: var(
-        --mod-badge-background-color-magenta,
-        var(--spectrum-badge-background-color-magenta)
-    );
+    background: var(--spectrum-badge-background-color-magenta);
 }
 
 .spectrum-Badge--pink {
-    background: var(
-        --mod-badge-background-color-pink,
-        var(--spectrum-badge-background-color-pink)
-    );
+    background: var(--spectrum-badge-background-color-pink);
 }
 
 .spectrum-Badge--turquoise {
-    background: var(
-        --mod-badge-background-color-turquoise,
-        var(--spectrum-badge-background-color-turquoise)
-    );
+    background: var(--spectrum-badge-background-color-turquoise);
 }
 
 .spectrum-Badge--brown {
-    background: var(
-        --mod-badge-background-color-brown,
-        var(--spectrum-badge-background-color-brown)
-    );
+    background: var(--spectrum-badge-background-color-brown);
 }
 
 .spectrum-Badge--cinnamon {
-    background: var(
-        --mod-badge-background-color-cinnamon,
-        var(--spectrum-badge-background-color-cinnamon)
-    );
+    background: var(--spectrum-badge-background-color-cinnamon);
 }
 
 .spectrum-Badge--silver {
-    background: var(
-        --mod-badge-background-color-silver,
-        var(--spectrum-badge-background-color-silver)
-    );
+    background: var(--spectrum-badge-background-color-silver);
 }
 
 .spectrum-Badge--subtle {
-    color: var(
-        --mod-badge-subtle-label-icon-color,
-        var(--spectrum-badge-subtle-label-icon-color)
-    );
+    color: var(--spectrum-badge-subtle-label-icon-color);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--neutral {
-    background: var(
-        --mod-badge-subtle-background-color-default,
-        var(--spectrum-badge-subtle-background-color-default)
-    );
+    background: var(--spectrum-badge-subtle-background-color-default);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--accent {
-    background: var(
-        --mod-badge-subtle-background-color-accent,
-        var(--spectrum-badge-subtle-background-color-accent)
-    );
+    background: var(--spectrum-badge-subtle-background-color-accent);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--informative {
-    background: var(
-        --mod-badge-subtle-background-color-informative,
-        var(--spectrum-badge-subtle-background-color-informative)
-    );
+    background: var(--spectrum-badge-subtle-background-color-informative);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--negative {
-    background: var(
-        --mod-badge-subtle-background-color-negative,
-        var(--spectrum-badge-subtle-background-color-negative)
-    );
+    background: var(--spectrum-badge-subtle-background-color-negative);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--positive {
-    background: var(
-        --mod-badge-subtle-background-color-positive,
-        var(--spectrum-badge-subtle-background-color-positive)
-    );
+    background: var(--spectrum-badge-subtle-background-color-positive);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--notice {
-    background: var(
-        --mod-badge-subtle-background-color-notice,
-        var(--spectrum-badge-subtle-background-color-notice)
-    );
+    background: var(--spectrum-badge-subtle-background-color-notice);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--gray {
-    background: var(
-        --mod-badge-subtle-background-color-gray,
-        var(--spectrum-badge-subtle-background-color-gray)
-    );
+    background: var(--spectrum-badge-subtle-background-color-gray);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--red {
-    background: var(
-        --mod-badge-subtle-background-color-red,
-        var(--spectrum-badge-subtle-background-color-red)
-    );
+    background: var(--spectrum-badge-subtle-background-color-red);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--orange {
-    background: var(
-        --mod-badge-subtle-background-color-orange,
-        var(--spectrum-badge-subtle-background-color-orange)
-    );
+    background: var(--spectrum-badge-subtle-background-color-orange);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--yellow {
-    background: var(
-        --mod-badge-subtle-background-color-yellow,
-        var(--spectrum-badge-subtle-background-color-yellow)
-    );
+    background: var(--spectrum-badge-subtle-background-color-yellow);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--chartreuse {
-    background: var(
-        --mod-badge-subtle-background-color-chartreuse,
-        var(--spectrum-badge-subtle-background-color-chartreuse)
-    );
+    background: var(--spectrum-badge-subtle-background-color-chartreuse);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--celery {
-    background: var(
-        --mod-badge-subtle-background-color-celery,
-        var(--spectrum-badge-subtle-background-color-celery)
-    );
+    background: var(--spectrum-badge-subtle-background-color-celery);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--green {
-    background: var(
-        --mod-badge-subtle-background-color-green,
-        var(--spectrum-badge-subtle-background-color-green)
-    );
+    background: var(--spectrum-badge-subtle-background-color-green);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--seafoam {
-    background: var(
-        --mod-badge-subtle-background-color-seafoam,
-        var(--spectrum-badge-subtle-background-color-seafoam)
-    );
+    background: var(--spectrum-badge-subtle-background-color-seafoam);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--cyan {
-    background: var(
-        --mod-badge-subtle-background-color-cyan,
-        var(--spectrum-badge-subtle-background-color-cyan)
-    );
+    background: var(--spectrum-badge-subtle-background-color-cyan);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--blue {
-    background: var(
-        --mod-badge-subtle-background-color-blue,
-        var(--spectrum-badge-subtle-background-color-blue)
-    );
+    background: var(--spectrum-badge-subtle-background-color-blue);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--indigo {
-    background: var(
-        --mod-badge-subtle-background-color-indigo,
-        var(--spectrum-badge-subtle-background-color-indigo)
-    );
+    background: var(--spectrum-badge-subtle-background-color-indigo);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--purple {
-    background: var(
-        --mod-badge-subtle-background-color-purple,
-        var(--spectrum-badge-subtle-background-color-purple)
-    );
+    background: var(--spectrum-badge-subtle-background-color-purple);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--fuchsia {
-    background: var(
-        --mod-badge-subtle-background-color-fuchsia,
-        var(--spectrum-badge-subtle-background-color-fuchsia)
-    );
+    background: var(--spectrum-badge-subtle-background-color-fuchsia);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--magenta {
-    background: var(
-        --mod-badge-subtle-background-color-magenta,
-        var(--spectrum-badge-subtle-background-color-magenta)
-    );
+    background: var(--spectrum-badge-subtle-background-color-magenta);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--pink {
-    background: var(
-        --mod-badge-subtle-background-color-pink,
-        var(--spectrum-badge-subtle-background-color-pink)
-    );
+    background: var(--spectrum-badge-subtle-background-color-pink);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--turquoise {
-    background: var(
-        --mod-badge-subtle-background-color-turquoise,
-        var(--spectrum-badge-subtle-background-color-turquoise)
-    );
+    background: var(--spectrum-badge-subtle-background-color-turquoise);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--brown {
-    background: var(
-        --mod-badge-subtle-background-color-brown,
-        var(--spectrum-badge-subtle-background-color-brown)
-    );
+    background: var(--spectrum-badge-subtle-background-color-brown);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--cinnamon {
-    background: var(
-        --mod-badge-subtle-background-color-cinnamon,
-        var(--spectrum-badge-subtle-background-color-cinnamon)
-    );
+    background: var(--spectrum-badge-subtle-background-color-cinnamon);
 }
 
 .spectrum-Badge--subtle.spectrum-Badge--silver {
-    background: var(
-        --mod-badge-subtle-background-color-silver,
-        var(--spectrum-badge-subtle-background-color-silver)
-    );
+    background: var(--spectrum-badge-subtle-background-color-silver);
 }
 
 .spectrum-Badge--outline:is(
@@ -714,56 +549,32 @@
         .spectrum-Badge--positive,
         .spectrum-Badge--notice
     ) {
-    background: var(
-        --mod-badge-outline-background-color-default,
-        var(--spectrum-badge-outline-background-color)
-    );
-    color: var(
-        --mod-badge-outline-label-icon-color,
-        var(--spectrum-badge-outline-label-icon-color)
-    );
+    background: var(--spectrum-badge-outline-background-color);
+    color: var(--spectrum-badge-outline-label-icon-color);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--neutral {
-    border-color: var(
-        --mod-badge-outline-border-color-neutral,
-        var(--spectrum-badge-outline-border-color-neutral)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-neutral);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--accent {
-    border-color: var(
-        --mod-badge-outline-border-color-accent,
-        var(--spectrum-badge-outline-border-color-accent)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-accent);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--informative {
-    border-color: var(
-        --mod-badge-outline-border-color-informative,
-        var(--spectrum-badge-outline-border-color-informative)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-informative);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--negative {
-    border-color: var(
-        --mod-badge-outline-border-color-negative,
-        var(--spectrum-badge-outline-border-color-negative)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-negative);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--positive {
-    border-color: var(
-        --mod-badge-outline-border-color-positive,
-        var(--spectrum-badge-outline-border-color-positive)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-positive);
 }
 
 .spectrum-Badge--outline.spectrum-Badge--notice {
-    border-color: var(
-        --mod-badge-outline-border-color-notice,
-        var(--spectrum-badge-outline-border-color-notice)
-    );
+    border-color: var(--spectrum-badge-outline-border-color-notice);
 }
 
 .spectrum-Badge--fixed-inline-start {
@@ -787,35 +598,20 @@
 }
 
 .spectrum-Badge-label {
-    font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size));
+    font-size: var(--spectrum-badge-font-size);
     font-weight: var(--spectrum-badge-font-weight);
-    line-height: var(
-        --mod-badge-line-height,
-        var(--spectrum-badge-line-height)
-    );
+    line-height: var(--spectrum-badge-line-height);
     padding-inline-end: calc(
-        var(
-                --mod-badge-label-spacing-horizontal,
-                var(--spectrum-badge-label-spacing-horizontal)
-            ) -
+        var(--spectrum-badge-label-spacing-horizontal) -
             var(--spectrum-badge-border-width)
     );
-    padding-inline-start: var(
-        --mod-badge-label-spacing-horizontal,
-        var(--spectrum-badge-label-spacing-horizontal)
-    );
+    padding-inline-start: var(--spectrum-badge-label-spacing-horizontal);
     padding-block-start: calc(
-        var(
-                --mod-badge-label-spacing-vertical-top,
-                var(--spectrum-badge-label-spacing-vertical-top)
-            ) -
+        var(--spectrum-badge-label-spacing-vertical-top) -
             var(--spectrum-badge-border-width)
     );
     padding-block-end: calc(
-        var(
-                --mod-badge-label-spacing-vertical-bottom,
-                var(--spectrum-badge-label-spacing-vertical-bottom)
-            ) -
+        var(--spectrum-badge-label-spacing-vertical-bottom) -
             var(--spectrum-badge-border-width)
     );
 }
@@ -823,10 +619,7 @@
 .spectrum-Badge-label:lang(ja),
 .spectrum-Badge-label:lang(ko),
 .spectrum-Badge-label:lang(zh) {
-    line-height: var(
-        --mod-badge-line-height-cjk,
-        var(--spectrum-badge-line-height-cjk)
-    );
+    line-height: var(--spectrum-badge-line-height-cjk);
 }
 
 .spectrum-Badge-icon + .spectrum-Badge-label {
@@ -834,59 +627,31 @@
 }
 
 .spectrum-Badge-icon {
-    block-size: var(
-        --mod-badge-workflow-icon-size,
-        var(--spectrum-badge-workflow-icon-size)
-    );
-    inline-size: var(
-        --mod-badge-workflow-icon-size,
-        var(--spectrum-badge-workflow-icon-size)
-    );
-    flex: 0 0
-        var(
-            --mod-badge-workflow-icon-size,
-            var(--spectrum-badge-workflow-icon-size)
-        );
+    block-size: var(--spectrum-badge-workflow-icon-size);
+    inline-size: var(--spectrum-badge-workflow-icon-size);
+    flex: 0 0 var(--spectrum-badge-workflow-icon-size);
     margin-inline-start: calc(
-        var(
-                --mod-badge-icon-spacing-horizontal,
-                var(--spectrum-badge-icon-spacing-horizontal)
-            ) -
+        var(--spectrum-badge-icon-spacing-horizontal) -
             var(--spectrum-badge-border-width)
     );
-    margin-inline-end: var(
-        --mod-badge-icon-text-spacing,
-        var(--spectrum-badge-icon-text-spacing)
-    );
+    margin-inline-end: var(--spectrum-badge-icon-text-spacing);
     margin-block-start: calc(
-        var(
-                --mod-badge-icon-spacing-vertical-top,
-                var(--spectrum-badge-icon-spacing-vertical-top)
-            ) -
+        var(--spectrum-badge-icon-spacing-vertical-top) -
             var(--spectrum-badge-border-width)
     );
     margin-block-end: calc(
-        var(
-                --mod-badge-icon-spacing-vertical-top,
-                var(--spectrum-badge-icon-spacing-vertical-top)
-            ) -
+        var(--spectrum-badge-icon-spacing-vertical-top) -
             var(--spectrum-badge-border-width)
     );
 }
 
 .spectrum-Badge-icon--no-label {
     margin-inline-start: calc(
-        var(
-                --mod-badge-icon-only-spacing-horizontal,
-                var(--spectrum-badge-icon-only-spacing-horizontal)
-            ) -
+        var(--spectrum-badge-icon-only-spacing-horizontal) -
             var(--spectrum-badge-border-width)
     );
     margin-inline-end: calc(
-        var(
-                --mod-badge-icon-only-spacing-horizontal,
-                var(--spectrum-badge-icon-only-spacing-horizontal)
-            ) -
+        var(--spectrum-badge-icon-only-spacing-horizontal) -
             var(--spectrum-badge-border-width)
     );
 }
diff --git a/second-gen/packages/swc/components/progress-circle/progress-circle.css b/second-gen/packages/swc/components/progress-circle/progress-circle.css
index 7e7fbc4d808..aa1b1184287 100644
--- a/second-gen/packages/swc/components/progress-circle/progress-circle.css
+++ b/second-gen/packages/swc/components/progress-circle/progress-circle.css
@@ -67,7 +67,7 @@
     display: inline-block;
     inline-size: var(--spectrum-progress-circle-size);
     block-size: var(--spectrum-progress-circle-size);
-    position: var(--mod-progress-circle-position, relative);
+    position: relative;
     direction: ltr;
     transform: translateZ(0);
 }

From e1d2421661f2f2f0b35e57e5f0b3a9999c224935 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 3 Sep 2025 15:02:13 -0400
Subject: [PATCH 3/5] fix(badge): separate S1/S2 API in alternate approach

---
 .../core/components/badge/Badge.base.ts       | 23 +++-----
 .../packages/swc/components/badge/Badge.ts    | 41 ++++++++++++-
 .../components/badge/stories/badge.stories.ts | 59 ++++++++++++++++++-
 3 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/second-gen/packages/core/components/badge/Badge.base.ts b/second-gen/packages/core/components/badge/Badge.base.ts
index 946cc7beb85..f35c6eb646e 100644
--- a/second-gen/packages/core/components/badge/Badge.base.ts
+++ b/second-gen/packages/core/components/badge/Badge.base.ts
@@ -16,13 +16,16 @@ import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
 import { ObserveSlotPresence } from '@swc/core/shared/observe-slot-presence';
 import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';
 
-export const BADGE_VARIANTS = [
+export const BADGE_VARIANTS_SEMANTIC = [
     'accent',
     'neutral',
     'informative',
     'positive',
     'negative',
     'notice',
+] as const;
+
+export const BADGE_VARIANTS_COLOR = [
     'fuchsia',
     'indigo',
     'magenta',
@@ -37,11 +40,11 @@ export const BADGE_VARIANTS = [
     'green',
     'cyan',
     'blue',
-    'pink',
-    'turquoise',
-    'brown',
-    'cinnamon',
-    'silver',
+] as const;
+
+export const BADGE_VARIANTS = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR,
 ] as const;
 export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 export const FIXED_VALUES = [
@@ -55,8 +58,6 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 /**
  * @element sp-badge-base
  * @property {BadgeVariant} variant - The variant of the badge.
- * @property {boolean} subtle - Whether the badge is subtle.
- * @property {boolean} outline - Whether the badge is outlined.
  * @property {FixedValues} fixed - The fixed position of the badge.
  * @property {string[]} customStyles - The custom styles of the badge.
  */
@@ -69,12 +70,6 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public variant: BadgeVariant = 'informative';
 
-    @property({ type: Boolean, reflect: true })
-    public subtle: boolean = false;
-
-    @property({ type: Boolean, reflect: true })
-    public outline: boolean = false;
-
     @property({ type: String, reflect: true })
     public fixed?: FixedValues;
 
diff --git a/second-gen/packages/swc/components/badge/Badge.ts b/second-gen/packages/swc/components/badge/Badge.ts
index e85910b4b3b..f7f49903153 100644
--- a/second-gen/packages/swc/components/badge/Badge.ts
+++ b/second-gen/packages/swc/components/badge/Badge.ts
@@ -11,16 +11,39 @@
  */
 
 import { CSSResultArray, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 
-import { BadgeBase } from '@swc/core/components/badge';
+import {
+    BADGE_VARIANTS_COLOR as BADGE_VARIANTS_COLOR_BASE,
+    BADGE_VARIANTS_SEMANTIC,
+    BadgeBase,
+} from '@swc/core/components/badge';
+
+export const BADGE_VARIANTS_COLOR = [
+    ...BADGE_VARIANTS_COLOR_BASE,
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
+] as const;
+
+export const BADGE_VARIANTS = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR,
+] as const;
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 
 import styles from './badge.css';
 
 // Export types and values to avoid breaking changes
-export { BADGE_VARIANTS, FIXED_VALUES } from '@swc/core/components/badge';
-export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
+export {
+    BADGE_VARIANTS_SEMANTIC,
+    FIXED_VALUES,
+} from '@swc/core/components/badge';
+export type { FixedValues } from '@swc/core/components/badge';
 
 /**
  * A badge component that displays short, descriptive information about an element.
@@ -32,6 +55,12 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
  * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
  *
+ * @property {BadgeVariant} variant - The variant of the badge.
+ * @property {boolean} subtle - Whether the badge is subtle.
+ * @property {boolean} outline - Whether the badge is outlined.
+ * @property {FixedValues} fixed - The fixed position of the badge.
+ * @property {string[]} customStyles - The custom styles of the badge.
+ *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  *
@@ -48,6 +77,12 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * </swc-badge>
  */
 export class Badge extends BadgeBase {
+    @property({ type: Boolean, reflect: true })
+    public subtle: boolean = false;
+
+    @property({ type: Boolean, reflect: true })
+    public outline: boolean = false;
+
     public static override get styles(): CSSResultArray {
         return [styles];
     }
diff --git a/second-gen/packages/swc/components/badge/stories/badge.stories.ts b/second-gen/packages/swc/components/badge/stories/badge.stories.ts
index 814880f8a9e..2eee6bc6d86 100644
--- a/second-gen/packages/swc/components/badge/stories/badge.stories.ts
+++ b/second-gen/packages/swc/components/badge/stories/badge.stories.ts
@@ -13,7 +13,12 @@
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { BADGE_VARIANTS, FIXED_VALUES } from '@swc/components/badge';
+import {
+    BADGE_VARIANTS,
+    BADGE_VARIANTS_COLOR,
+    BADGE_VARIANTS_SEMANTIC,
+    FIXED_VALUES,
+} from '@swc/components/badge';
 
 import '@swc/components/badge';
 
@@ -33,9 +38,17 @@ const meta: Meta = {
             control: { type: 'select' },
             options: ['s', 'm', 'l', 'xl'],
         },
+        subtle: {
+            control: { type: 'boolean' },
+        },
+        outline: {
+            control: { type: 'boolean' },
+        },
     },
     args: {
         variant: 'informative',
+        subtle: false,
+        outline: false,
     },
 };
 
@@ -57,10 +70,22 @@ export const Default: Story = {
     `,
 };
 
-export const Variants: Story = {
+export const SemanticVariants: Story = {
     render: () => html`
         <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS.map(
+            ${BADGE_VARIANTS_SEMANTIC.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}">${variant}</swc-badge>
+                `
+            )}
+        </div>
+    `,
+};
+
+export const ColorVariants: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS_COLOR.map(
                 (variant) => html`
                     <swc-badge variant="${variant}">${variant}</swc-badge>
                 `
@@ -88,3 +113,31 @@ export const WithIcon: Story = {
         </swc-badge>
     `,
 };
+
+export const Subtle: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}" subtle>
+                        ${variant}
+                    </swc-badge>
+                `
+            )}
+        </div>
+    `,
+};
+
+export const Outline: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS_SEMANTIC.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}" outline>
+                        ${variant}
+                    </swc-badge>
+                `
+            )}
+        </div>
+    `,
+};

From b52e52afb3e79836470910843dce550cdf772bc4 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 3 Sep 2025 16:25:15 -0400
Subject: [PATCH 4/5] chore: adding docs notes and todos to 2nd gen

---
 .../core/components/badge/Badge.base.ts       |   9 +-
 .../packages/swc/components/badge/Badge.ts    |  33 +-
 .../components/badge/stories/badge.stories.ts | 257 +++++---
 yarn.lock                                     | 548 ++++++++++++++++--
 4 files changed, 717 insertions(+), 130 deletions(-)

diff --git a/second-gen/packages/core/components/badge/Badge.base.ts b/second-gen/packages/core/components/badge/Badge.base.ts
index f35c6eb646e..4a9f272dc15 100644
--- a/second-gen/packages/core/components/badge/Badge.base.ts
+++ b/second-gen/packages/core/components/badge/Badge.base.ts
@@ -57,9 +57,9 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 
 /**
  * @element sp-badge-base
- * @property {BadgeVariant} variant - The variant of the badge.
- * @property {FixedValues} fixed - The fixed position of the badge.
- * @property {string[]} customStyles - The custom styles of the badge.
+ * @attribute {ElementSize} size - The size of the badge.
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
@@ -73,6 +73,9 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public fixed?: FixedValues;
 
+    /**
+     * @internal Used for rendering gap when the badge has an icon.
+     */
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;
     }
diff --git a/second-gen/packages/swc/components/badge/Badge.ts b/second-gen/packages/swc/components/badge/Badge.ts
index f7f49903153..359eef1a9b2 100644
--- a/second-gen/packages/swc/components/badge/Badge.ts
+++ b/second-gen/packages/swc/components/badge/Badge.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, TemplateResult } from 'lit';
+import { CSSResultArray, html, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
@@ -55,18 +55,14 @@ export type { FixedValues } from '@swc/core/components/badge';
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
  * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
  *
- * @property {BadgeVariant} variant - The variant of the badge.
- * @property {boolean} subtle - Whether the badge is subtle.
- * @property {boolean} outline - Whether the badge is outlined.
- * @property {FixedValues} fixed - The fixed position of the badge.
- * @property {string[]} customStyles - The custom styles of the badge.
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {boolean} subtle - Whether the badge is subtle.
+ * @attribute {boolean} outline - Whether the badge is outlined.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  *
- * @csspart label - The text content area of the badge
- * @csspart icon - The icon area of the badge (when present)
- *
  * @example
  * <swc-badge variant="positive">New</swc-badge>
  *
@@ -122,4 +118,23 @@ export class Badge extends BadgeBase {
             </div>
         `;
     }
+
+    protected override update(changedProperties: PropertyValues): void {
+        super.update(changedProperties);
+        if (window.__swc?.DEBUG) {
+            if (
+                this.outline &&
+                !BADGE_VARIANTS_SEMANTIC.includes(this.variant)
+            ) {
+                window.__swc.warn(
+                    this,
+                    `<${this.localName}> element only supports the outline styling if the variant is a semantic color variant.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
+                    {
+                        issues: [...BADGE_VARIANTS_SEMANTIC],
+                    }
+                );
+            }
+        }
+    }
 }
diff --git a/second-gen/packages/swc/components/badge/stories/badge.stories.ts b/second-gen/packages/swc/components/badge/stories/badge.stories.ts
index 2eee6bc6d86..bb6cc5b129d 100644
--- a/second-gen/packages/swc/components/badge/stories/badge.stories.ts
+++ b/second-gen/packages/swc/components/badge/stories/badge.stories.ts
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import { html } from 'lit';
+import { html, nothing, TemplateResult } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 import {
@@ -22,122 +23,220 @@ import {
 
 import '@swc/components/badge';
 
+/** @todo Pull this up into a utility function for all components to leverage */
+function capitalize(str?: string): string {
+    if (typeof str !== 'string') {
+        return '';
+    }
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/** @todo Pull this up into a decorator for all stories to leverage */
+const CONTAINER = (content: TemplateResult<1>[]) =>
+    html`<div
+        style=${styleMap({
+            display: 'flex',
+            gap: 'var(--spectrum-spacing-200)',
+            'flex-wrap': 'wrap',
+            'justify-content': 'center',
+            // Used 80ch because that's generally considered the maximum readable width for text in a web page.
+            'max-inline-size': '80ch',
+        })}
+    >
+        ${content}
+    </div>`;
+
+/**
+ * Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention. There are two additional styles - subtle fill and outline - in addition to the default, bold fill style.
+ *
+ * Because outline and subtle fill styles draw a similar level of attention, choose only one to use consistently within a single product. Bold fill can be paired with either style, and is reserved for high-attention badging only.
+ */
 const meta: Meta = {
     title: 'Components/Badge',
     component: 'swc-badge',
     argTypes: {
-        variant: {
-            control: { type: 'select' },
-            options: BADGE_VARIANTS,
-        },
-        fixed: {
-            control: { type: 'select' },
-            options: [undefined, ...FIXED_VALUES],
-        },
         size: {
+            name: 'Size',
             control: { type: 'select' },
             options: ['s', 'm', 'l', 'xl'],
         },
+        variant: {
+            name: 'Variant',
+            control: { type: 'select' },
+            options: BADGE_VARIANTS,
+        },
         subtle: {
+            name: 'Subtle',
             control: { type: 'boolean' },
         },
         outline: {
+            name: 'Outline',
             control: { type: 'boolean' },
         },
+        fixed: {
+            name: 'Fixed',
+            control: { type: 'select' },
+            options: [...FIXED_VALUES],
+        },
+        label: {
+            name: 'Label',
+            control: { type: 'text' },
+            table: { category: 'Slots' },
+        },
+        icon: {
+            name: 'Icon',
+            control: { type: 'text' },
+            table: { category: 'Slots' },
+        },
     },
     args: {
+        label: 'Badge',
+        // updating this to make the options more readable as a demo
+        size: 'l',
         variant: 'informative',
         subtle: false,
         outline: false,
     },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551',
+        },
+    },
+    tags: ['migrated'],
 };
 
 export default meta;
 type Story = StoryObj;
+type StoryArgs = StoryObj['args'];
+
+/**
+ * @param args - The arguments for the badge as sourced from the storybook args.
+ * @returns A lightweight template for to render a single badge with bindings to the args.
+ * @todo could also surface a knob to select an icon from our icon library and use that instead of the string.
+ * @todo is there stronger typing we can use for the args?
+ */
+const BASE_TEMPLATE = (args: StoryArgs = {}) => html`
+    <swc-badge
+        variant="${args.variant}"
+        size="${args.size || 'm'}"
+        .fixed=${args.fixed}
+        .subtle=${args.subtle}
+        .outline=${args.outline}
+    >
+        ${args.icon ? html`<span slot="icon">${args.icon}</span>` : nothing}
+        ${args.label}
+    </swc-badge>
+`;
 
+/**
+ * Badges can contain label, icon, or label and icon. Text wrapping is also included when a `max-inline-size` is applied to the badge.
+ */
 export const Default: Story = {
     args: {
-        variant: 'informative',
+        size: 'm',
     },
-    render: (args) => html`
-        <swc-badge
-            variant="${args.variant}"
-            size="${args.size || 'm'}"
-            .fixed=${args.fixed}
-        >
-            Badge
-        </swc-badge>
-    `,
+    render: BASE_TEMPLATE,
 };
 
-export const SemanticVariants: Story = {
-    render: () => html`
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS_SEMANTIC.map(
-                (variant) => html`
-                    <swc-badge variant="${variant}">${variant}</swc-badge>
-                `
-            )}
-        </div>
-    `,
+/**
+ * Badges can be rendered with or without an icon. Icons can be passed to the component using the `icon` slot and can be sourced from either the Spectrum icon library or a custom icon library as needed.
+ */
+export const WithIcon: Story = {
+    args: {
+        icon: '✓',
+    },
+    render: BASE_TEMPLATE,
+    // Removes the story from the side navigation while keeping in the docs view
+    tags: ['!dev'],
 };
 
-export const ColorVariants: Story = {
-    render: () => html`
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS_COLOR.map(
-                (variant) => html`
-                    <swc-badge variant="${variant}">${variant}</swc-badge>
-                `
-            )}
-        </div>
-    `,
+/**
+ * Semantic variants allow you to render the badge with a descriptive name that maps to a design-system-aligned color. This is the preferred way to assign color to a badge because it will align more consistently with other components in your UI with the same meaning.
+ */
+export const SemanticVariants: Story = {
+    render: (args) =>
+        CONTAINER(
+            BADGE_VARIANTS_SEMANTIC.map((variant) =>
+                BASE_TEMPLATE({
+                    ...args,
+                    variant,
+                    label: capitalize(variant),
+                })
+            )
+        ),
+    tags: ['!dev'],
 };
 
-export const Sizes: Story = {
-    render: () => html`
-        <div style="display: flex; gap: 8px; align-items: center;">
-            <swc-badge size="s">Small</swc-badge>
-            <swc-badge size="m">Medium</swc-badge>
-            <swc-badge size="l">Large</swc-badge>
-            <swc-badge size="xl">Extra Large</swc-badge>
-        </div>
-    `,
+/**
+ * The `outline` style is only valid for semantic color variants.
+ */
+export const Outline: Story = {
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: BADGE_VARIANTS_SEMANTIC,
+        },
+    },
+    render: (args) =>
+        CONTAINER(
+            BADGE_VARIANTS_SEMANTIC.map((variant) =>
+                BASE_TEMPLATE({
+                    ...args,
+                    variant,
+                    label: capitalize(variant),
+                    outline: true,
+                })
+            )
+        ),
+    tags: ['!dev'],
 };
 
-export const WithIcon: Story = {
-    render: () => html`
-        <swc-badge variant="positive">
-            <span slot="icon">✓</span>
-            With icon
-        </swc-badge>
-    `,
+/**
+ * Color variants are available for the badge component and provide a more granular access to the full color palette in the design system.
+ */
+export const ColorVariants: Story = {
+    render: (args) =>
+        CONTAINER(
+            BADGE_VARIANTS_COLOR.map((variant) =>
+                BASE_TEMPLATE({
+                    ...args,
+                    variant,
+                    label: capitalize(variant),
+                })
+            )
+        ),
+    tags: ['!dev'],
 };
 
-export const Subtle: Story = {
-    render: () => html`
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS.map(
-                (variant) => html`
-                    <swc-badge variant="${variant}" subtle>
-                        ${variant}
-                    </swc-badge>
-                `
-            )}
-        </div>
-    `,
+export const Sizes: Story = {
+    render: (args) =>
+        CONTAINER(
+            ['s', 'm', 'l', 'xl'].map((size) =>
+                BASE_TEMPLATE({
+                    ...args,
+                    size,
+                    label: capitalize(size),
+                })
+            )
+        ),
+    tags: ['!dev'],
 };
 
-export const Outline: Story = {
-    render: () => html`
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS_SEMANTIC.map(
-                (variant) => html`
-                    <swc-badge variant="${variant}" outline>
-                        ${variant}
-                    </swc-badge>
-                `
-            )}
-        </div>
-    `,
+/**
+ * The `subtle` style is available for all variants. It is useful when you want to reduce the visual prominence of the badge while still mapping to the design system color palette.
+ */
+export const Subtle: Story = {
+    render: (args) =>
+        CONTAINER(
+            BADGE_VARIANTS.map((variant) =>
+                BASE_TEMPLATE({
+                    ...args,
+                    variant,
+                    label: capitalize(variant),
+                    subtle: true,
+                })
+            )
+        ),
+    tags: ['!dev'],
 };
diff --git a/yarn.lock b/yarn.lock
index fad10cd9eb8..bcedb60376d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -611,7 +611,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4, @babel/parser@npm:^7.4.5":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.4.5":
+  version: 7.28.3
+  resolution: "@babel/parser@npm:7.28.3"
+  dependencies:
+    "@babel/types": "npm:^7.28.2"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/1f41eb82623b0ca0f94521b57f4790c6c457cd922b8e2597985b36bdec24114a9ccf54640286a760ceb60f11fe9102d192bf60477aee77f5d45f1029b9b72729
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.25.4, @babel/parser@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/parser@npm:7.28.4"
   dependencies:
@@ -1633,13 +1644,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0":
   version: 7.28.4
   resolution: "@babel/runtime@npm:7.28.4"
   checksum: 10c0/792ce7af9750fb9b93879cc9d1db175701c4689da890e6ced242ea0207c9da411ccf16dc04e689cc01158b28d7898c40d75598f4559109f761c12ce01e959bf7
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.5.5":
+  version: 7.26.9
+  resolution: "@babel/runtime@npm:7.26.9"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10c0/e8517131110a6ec3a7360881438b85060e49824e007f4a64b5dfa9192cf2bb5c01e84bfc109f02d822c7edb0db926928dd6b991e3ee460b483fb0fac43152d9b
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.5, @babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2, @babel/template@npm:^7.3.3":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
@@ -1651,7 +1671,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.4.5":
+  version: 7.28.3
+  resolution: "@babel/traverse@npm:7.28.3"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.28.3"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.2"
+    debug: "npm:^4.3.1"
+  checksum: 10c0/26e95b29a46925b7b41255e03185b7e65b2c4987e14bbee7bbf95867fb19c69181f301bbe1c7b201d4fe0cce6aa0cbea0282dad74b3a0fef3d9058f6c76fdcb3
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
@@ -1666,7 +1701,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+  version: 7.28.2
+  resolution: "@babel/types@npm:7.28.2"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/24b11c9368e7e2c291fe3c1bcd1ed66f6593a3975f479cbb9dd7b8c8d8eab8a962b0d2fca616c043396ce82500ac7d23d594fbbbd013828182c01596370a0b10
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/types@npm:7.28.4"
   dependencies:
@@ -3917,7 +3962,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28, @jridgewell/trace-mapping@npm:^0.3.30":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28":
+  version: 0.3.30
+  resolution: "@jridgewell/trace-mapping@npm:0.3.30"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10c0/3a1516c10f44613b9ba27c37a02ff8f410893776b2b3dad20a391b51b884dd60f97bbb56936d65d2ff8fe978510a0000266654ab8426bdb9ceb5fb4585b19e23
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.30":
   version: 0.3.31
   resolution: "@jridgewell/trace-mapping@npm:0.3.31"
   dependencies:
@@ -4809,6 +4864,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.49.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.52.2"
@@ -4823,6 +4885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm64@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.49.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-android-arm64@npm:4.52.2"
@@ -4837,6 +4906,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-arm64@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.49.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-darwin-arm64@npm:4.52.2"
@@ -4851,6 +4927,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-darwin-x64@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.49.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-darwin-x64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-darwin-x64@npm:4.52.2"
@@ -4865,6 +4948,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-arm64@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.49.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-freebsd-arm64@npm:4.52.2"
@@ -4879,6 +4969,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-freebsd-x64@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.49.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-freebsd-x64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-freebsd-x64@npm:4.52.2"
@@ -4893,6 +4990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.49.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.52.2"
@@ -4907,6 +5011,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm-musleabihf@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.49.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm-musleabihf@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.52.2"
@@ -4921,6 +5032,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.52.2"
@@ -4935,6 +5053,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-arm64-musl@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.49.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-arm64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.52.2"
@@ -4963,6 +5088,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=loong64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-ppc64-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-ppc64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.52.2"
@@ -4977,6 +5116,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.52.2"
@@ -4991,6 +5137,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-riscv64-musl@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.49.0"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-riscv64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.52.2"
@@ -5005,6 +5158,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-s390x-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-s390x-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.52.2"
@@ -5019,6 +5179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-gnu@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.49.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.52.2"
@@ -5033,6 +5200,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-linux-x64-musl@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.49.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.52.2"
@@ -5061,6 +5235,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-arm64-msvc@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.49.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-arm64-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.52.2"
@@ -5075,6 +5256,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-ia32-msvc@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.49.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-ia32-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.52.2"
@@ -5103,6 +5291,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-win32-x64-msvc@npm:4.49.0":
+  version: 4.49.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.49.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-win32-x64-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.52.2"
@@ -10016,7 +10211,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.11.0, ajv@npm:^8.6.0, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.6.0, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -10028,27 +10223,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:~8.12.0":
-  version: 8.12.0
-  resolution: "ajv@npm:8.12.0"
+"ajv@npm:^8.11.0, ajv@npm:~8.13.0":
+  version: 8.13.0
+  resolution: "ajv@npm:8.13.0"
   dependencies:
-    fast-deep-equal: "npm:^3.1.1"
+    fast-deep-equal: "npm:^3.1.3"
     json-schema-traverse: "npm:^1.0.0"
     require-from-string: "npm:^2.0.2"
-    uri-js: "npm:^4.2.2"
-  checksum: 10c0/ac4f72adf727ee425e049bc9d8b31d4a57e1c90da8d28bcd23d60781b12fcd6fc3d68db5df16994c57b78b94eed7988f5a6b482fd376dc5b084125e20a0a622e
+    uri-js: "npm:^4.4.1"
+  checksum: 10c0/14c6497b6f72843986d7344175a1aa0e2c35b1e7f7475e55bc582cddb765fca7e6bf950f465dc7846f817776d9541b706f4b5b3fbedd8dfdeb5fce6f22864264
   languageName: node
   linkType: hard
 
-"ajv@npm:~8.13.0":
-  version: 8.13.0
-  resolution: "ajv@npm:8.13.0"
+"ajv@npm:~8.12.0":
+  version: 8.12.0
+  resolution: "ajv@npm:8.12.0"
   dependencies:
-    fast-deep-equal: "npm:^3.1.3"
+    fast-deep-equal: "npm:^3.1.1"
     json-schema-traverse: "npm:^1.0.0"
     require-from-string: "npm:^2.0.2"
-    uri-js: "npm:^4.4.1"
-  checksum: 10c0/14c6497b6f72843986d7344175a1aa0e2c35b1e7f7475e55bc582cddb765fca7e6bf950f465dc7846f817776d9541b706f4b5b3fbedd8dfdeb5fce6f22864264
+    uri-js: "npm:^4.2.2"
+  checksum: 10c0/ac4f72adf727ee425e049bc9d8b31d4a57e1c90da8d28bcd23d60781b12fcd6fc3d68db5df16994c57b78b94eed7988f5a6b482fd376dc5b084125e20a0a622e
   languageName: node
   linkType: hard
 
@@ -10593,7 +10788,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.12.0, axios@npm:^1.6.1":
+"axios@npm:^1.12.0":
   version: 1.12.2
   resolution: "axios@npm:1.12.2"
   dependencies:
@@ -10604,6 +10799,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.1":
+  version: 1.11.0
+  resolution: "axios@npm:1.11.0"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
+    form-data: "npm:^4.0.4"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10c0/5de273d33d43058610e4d252f0963cc4f10714da0bfe872e8ef2cbc23c2c999acc300fd357b6bce0fc84a2ca9bd45740fa6bb28199ce2c1266c8b1a393f2b36e
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^2.2.0":
   version: 2.2.0
   resolution: "axobject-query@npm:2.2.0"
@@ -11067,7 +11273,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.16.5, browserslist@npm:^4.21.4, browserslist@npm:^4.24.0, browserslist@npm:^4.24.4, browserslist@npm:^4.25.1, browserslist@npm:^4.25.3, browserslist@npm:^4.26.0":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.16.5, browserslist@npm:^4.21.4, browserslist@npm:^4.24.0, browserslist@npm:^4.25.1, browserslist@npm:^4.25.3":
+  version: 4.25.3
+  resolution: "browserslist@npm:4.25.3"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001735"
+    electron-to-chromium: "npm:^1.5.204"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/cefbbf962b7c0f0d77e952a4b4b37469db7f7f02bc2be7297810ac3cf086660f48daf78d00f7aad8a11b682f88b0ee0022594165ead749e9e4158a0aa49cd161
+  languageName: node
+  linkType: hard
+
+"browserslist@npm:^4.24.4":
+  version: 4.25.4
+  resolution: "browserslist@npm:4.25.4"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001737"
+    electron-to-chromium: "npm:^1.5.211"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/2b105948990dc2fc0bc2536b4889aadfa15d637e1d857a121611a704cdf539a68f575a391f6bf8b7ff19db36cee1b7834565571f35a7ea691051d2e7fb4f2eb1
+  languageName: node
+  linkType: hard
+
+"browserslist@npm:^4.26.0":
   version: 4.26.2
   resolution: "browserslist@npm:4.26.2"
   dependencies:
@@ -11366,10 +11600,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001702":
-  version: 1.0.30001746
-  resolution: "caniuse-lite@npm:1.0.30001746"
-  checksum: 10c0/e656a9dc811be2316e3b6dbd3bf25d0e32dbce645b1284821b4ec93fb81dc3e3f73b9473e2f66c921b620ea8b25ebbae9ee70c3d13dad85f8dd69d6bb2c91d46
+"caniuse-lite@npm:^1.0.30001702, caniuse-lite@npm:^1.0.30001737":
+  version: 1.0.30001739
+  resolution: "caniuse-lite@npm:1.0.30001739"
+  checksum: 10c0/a61ca5a53c428769059421a23311a7a812bdb6586e34dcad6189bd61bcdea58ffe2fe7f3c22a829e8978eba5316b6599aee88b9ea23677d8d5298865df4f4ad8
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001735":
+  version: 1.0.30001737
+  resolution: "caniuse-lite@npm:1.0.30001737"
+  checksum: 10c0/9d9cfe3b46fe670d171cee10c5c1b0fb641946fd5d6bea26149f804003d53d82ade7ef5a4a640fb3a0eaec47c7839b57e06a6ddae4f0ad2cd58e1187d31997ce
   languageName: node
   linkType: hard
 
@@ -11465,13 +11706,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.1, chalk@npm:^5.1.2, chalk@npm:^5.2.0, chalk@npm:^5.3.0":
+"chalk@npm:^5.0.1, chalk@npm:^5.1.2, chalk@npm:^5.2.0":
   version: 5.6.2
   resolution: "chalk@npm:5.6.2"
   checksum: 10c0/99a4b0f0e7991796b1e7e3f52dceb9137cae2a9dfc8fc0784a550dc4c558e15ab32ed70b14b21b52beb2679b4892b41a0aa44249bcb996f01e125d58477c6976
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
+  languageName: node
+  linkType: hard
+
 "change-case@npm:^5.4.4":
   version: 5.4.4
   resolution: "change-case@npm:5.4.4"
@@ -11698,13 +11946,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0, ci-info@npm:^3.7.0":
+"ci-info@npm:^3.2.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
   checksum: 10c0/6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a
   languageName: node
   linkType: hard
 
+"ci-info@npm:^3.7.0":
+  version: 3.8.0
+  resolution: "ci-info@npm:3.8.0"
+  checksum: 10c0/0d3052193b58356372b34ab40d2668c3e62f1006d5ca33726d1d3c423853b19a85508eadde7f5908496fb41448f465263bf61c1ee58b7832cb6a924537e3863a
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^4.0.0":
   version: 4.3.0
   resolution: "ci-info@npm:4.3.0"
@@ -12471,7 +12726,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -12482,6 +12737,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-spawn@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "cross-spawn@npm:7.0.3"
+  dependencies:
+    path-key: "npm:^3.1.0"
+    shebang-command: "npm:^2.0.0"
+    which: "npm:^2.0.1"
+  checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750
+  languageName: node
+  linkType: hard
+
 "crypt@npm:0.0.2":
   version: 0.0.2
   resolution: "crypt@npm:0.0.2"
@@ -12650,13 +12916,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
+"css-what@npm:^6.0.1":
   version: 6.2.2
   resolution: "css-what@npm:6.2.2"
   checksum: 10c0/91e24c26fb977b4ccef30d7007d2668c1c10ac0154cc3f42f7304410e9594fb772aea4f30c832d2993b132ca8d99338050866476210316345ec2e7d47b248a56
   languageName: node
   linkType: hard
 
+"css-what@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "css-what@npm:6.1.0"
+  checksum: 10c0/a09f5a6b14ba8dcf57ae9a59474722e80f20406c53a61e9aedb0eedc693b135113ffe2983f4efc4b5065ae639442e9ae88df24941ef159c218b231011d733746
+  languageName: node
+  linkType: hard
+
 "css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
@@ -13706,6 +13979,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.204":
+  version: 1.5.209
+  resolution: "electron-to-chromium@npm:1.5.209"
+  checksum: 10c0/ec857aeecf85769310889926d55cf4032f93b213733e68b4bc48eab72e42e190f9f1a2694c8c175435cbd111dfdee420e1e1ffe5b2bd46b2f33324580e938f2c
+  languageName: node
+  linkType: hard
+
+"electron-to-chromium@npm:^1.5.211":
+  version: 1.5.211
+  resolution: "electron-to-chromium@npm:1.5.211"
+  checksum: 10c0/587536f2e319b7484cd4c9e83484f461ee06672c588c84bf4d4b6a6b5d00fbdb621d4ca418a68125a86db95d373b890b47de2fb5a0f52592cc8aebc263623e6e
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.5.218":
   version: 1.5.223
   resolution: "electron-to-chromium@npm:1.5.223"
@@ -13727,13 +14014,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^10.2.1, emoji-regex@npm:^10.3.0":
+"emoji-regex@npm:^10.2.1":
   version: 10.5.0
   resolution: "emoji-regex@npm:10.5.0"
   checksum: 10c0/17cf84335a461fc23bf90575122ace2902630dc760e53299474cd3b0b5e4cfbc6c0223a389a766817538e5d20bf0f36c67b753f27c9e705056af510b8777e312
   languageName: node
   linkType: hard
 
+"emoji-regex@npm:^10.3.0":
+  version: 10.3.0
+  resolution: "emoji-regex@npm:10.3.0"
+  checksum: 10c0/b4838e8dcdceb44cf47f59abe352c25ff4fe7857acaf5fb51097c427f6f75b44d052eb907a7a3b86f86bc4eae3a93f5c2b7460abe79c407307e6212d65c91163
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -15294,7 +15588,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.3.3, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
+"fast-glob@npm:3.3.3, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.2, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -15307,6 +15601,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.2.9":
+  version: 3.3.2
+  resolution: "fast-glob@npm:3.3.2"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.4"
+  checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -15880,7 +16187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:11.3.2, fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:~11.3.0":
+"fs-extra@npm:11.3.2":
   version: 11.3.2
   resolution: "fs-extra@npm:11.3.2"
   dependencies:
@@ -15902,6 +16209,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:~11.3.0":
+  version: 11.3.1
+  resolution: "fs-extra@npm:11.3.1"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10c0/61e5b7285b1ca72c68dfe1058b2514294a922683afac2a80aa90540f9bd85370763d675e3b408ef500077d355956fece3bd24b546790e261c3d3015967e2b2d9
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -17397,13 +17715,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.0, ignore@npm:^5.1.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+"ignore@npm:^5.0.0, ignore@npm:^5.1.4, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.2.0":
+  version: 5.3.1
+  resolution: "ignore@npm:5.3.1"
+  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^7.0.3, ignore@npm:^7.0.5":
   version: 7.0.5
   resolution: "ignore@npm:7.0.5"
@@ -17418,7 +17743,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.2.1":
   version: 3.3.1
   resolution: "import-fresh@npm:3.3.1"
   dependencies:
@@ -17428,6 +17753,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"import-fresh@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "import-fresh@npm:3.3.0"
+  dependencies:
+    parent-module: "npm:^1.0.0"
+    resolve-from: "npm:^4.0.0"
+  checksum: 10c0/7f882953aa6b740d1f0e384d0547158bc86efbf2eea0f1483b8900a6f65c5a5123c2cf09b0d542cc419d0b98a759ecaeb394237e97ea427f2da221dc3cd80cc3
+  languageName: node
+  linkType: hard
+
 "import-lazy@npm:^4.0.0, import-lazy@npm:~4.0.0":
   version: 4.0.0
   resolution: "import-lazy@npm:4.0.0"
@@ -19281,7 +19616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-eslint-parser@npm:2.4.1, jsonc-eslint-parser@npm:^2.4.0":
+"jsonc-eslint-parser@npm:2.4.1":
   version: 2.4.1
   resolution: "jsonc-eslint-parser@npm:2.4.1"
   dependencies:
@@ -19293,6 +19628,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonc-eslint-parser@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "jsonc-eslint-parser@npm:2.4.0"
+  dependencies:
+    acorn: "npm:^8.5.0"
+    eslint-visitor-keys: "npm:^3.0.0"
+    espree: "npm:^9.0.0"
+    semver: "npm:^7.3.5"
+  checksum: 10c0/1bef9f4f12122824e1d13ef651b7a8d16cbf6995bfd08fabb81df34ff0cf57f5c1c822dd5ee7aece0575fb1351538c8c5ce86f9b94d8f41bcd3bbe2773b62db3
+  languageName: node
+  linkType: hard
+
 "jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
   version: 3.3.1
   resolution: "jsonc-parser@npm:3.3.1"
@@ -22618,6 +22965,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.19":
+  version: 2.0.19
+  resolution: "node-releases@npm:2.0.19"
+  checksum: 10c0/52a0dbd25ccf545892670d1551690fe0facb6a471e15f2cfa1b20142a5b255b3aa254af5f59d6ecb69c2bec7390bc643c43aa63b13bf5e64b6075952e716b1aa
+  languageName: node
+  linkType: hard
+
 "node-releases@npm:^2.0.21":
   version: 2.0.21
   resolution: "node-releases@npm:2.0.21"
@@ -23754,13 +24108,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
+"picocolors@npm:1.1.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "picocolors@npm:1.0.1"
+  checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -25517,13 +25878,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"quansync@npm:^0.2.11, quansync@npm:^0.2.7":
+"quansync@npm:^0.2.11":
   version: 0.2.11
   resolution: "quansync@npm:0.2.11"
   checksum: 10c0/cb9a1f8ebce074069f2f6a78578873ffedd9de9f6aa212039b44c0870955c04a71c3b1311b5d97f8ac2f2ec476de202d0a5c01160cb12bc0a11b7ef36d22ef56
   languageName: node
   linkType: hard
 
+"quansync@npm:^0.2.7":
+  version: 0.2.8
+  resolution: "quansync@npm:0.2.8"
+  checksum: 10c0/7dae50c11dab2f94ae841183dd79a920a085e01961f9aeb594dd4793ad7b2e6e39ae106051c91f7175c5897de98800cfd52fe6836e32670c3c220fad2ec4598d
+  languageName: node
+  linkType: hard
+
 "query-string@npm:^7.1.0":
   version: 7.1.3
   resolution: "query-string@npm:7.1.3"
@@ -26608,7 +26976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:4.52.2, rollup@npm:^4.4.0, rollup@npm:^4.4.1":
+"rollup@npm:4.52.2":
   version: 4.52.2
   resolution: "rollup@npm:4.52.2"
   dependencies:
@@ -26703,6 +27071,81 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.4.0, rollup@npm:^4.4.1":
+  version: 4.49.0
+  resolution: "rollup@npm:4.49.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.49.0"
+    "@rollup/rollup-android-arm64": "npm:4.49.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.49.0"
+    "@rollup/rollup-darwin-x64": "npm:4.49.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.49.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.49.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.49.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.49.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.49.0"
+    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-ppc64-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.49.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.49.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.49.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.49.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.49.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.49.0"
+    "@types/estree": "npm:1.0.8"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-freebsd-arm64":
+      optional: true
+    "@rollup/rollup-freebsd-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-loongarch64-gnu":
+      optional: true
+    "@rollup/rollup-linux-ppc64-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-musl":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10c0/ca950eb0fb550c40e0a06e9bb4f17c3b7097a3684152327569d9b20891e704ea8b20764b26d54442fc1eb00615923a191bb928087a7e23e5fa8c3c00e06680e4
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^4.43.0":
   version: 4.52.3
   resolution: "rollup@npm:4.52.3"
@@ -27051,7 +27494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.7.2":
+"semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.4, semver@npm:^7.6.2, semver@npm:^7.7.2":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
   bin:
@@ -27060,6 +27503,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.3":
+  version: 7.6.0
+  resolution: "semver@npm:7.6.0"
+  dependencies:
+    lru-cache: "npm:^6.0.0"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/fbfe717094ace0aa8d6332d7ef5ce727259815bd8d8815700853f4faf23aacbd7192522f0dc5af6df52ef4fa85a355ebd2f5d39f554bd028200d6cf481ab9b53
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.6.0":
+  version: 7.6.2
+  resolution: "semver@npm:7.6.2"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
+  languageName: node
+  linkType: hard
+
 "semver@npm:~7.5.4":
   version: 7.5.4
   resolution: "semver@npm:7.5.4"
@@ -31380,7 +31843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.0.0, yaml@npm:^2.2.2, yaml@npm:^2.8.1":
+"yaml@npm:^2.0.0, yaml@npm:^2.8.1":
   version: 2.8.1
   resolution: "yaml@npm:2.8.1"
   bin:
@@ -31389,6 +31852,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.2.2":
+  version: 2.3.4
+  resolution: "yaml@npm:2.3.4"
+  checksum: 10c0/cf03b68f8fef5e8516b0f0b54edaf2459f1648317fc6210391cf606d247e678b449382f4bd01f77392538429e306c7cba8ff46ff6b37cac4de9a76aff33bd9e1
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^18.1.2":
   version: 18.1.3
   resolution: "yargs-parser@npm:18.1.3"

From 5b47c1c72b6cf433a10c7fd3a5e508c6a7d96cbd Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Fri, 19 Sep 2025 11:32:26 -0400
Subject: [PATCH 5/5] chore: remove progress-circle into separate PR

---
 .../progress-circle/ProgressCircle.base.ts    |  23 +-
 .../progress-circle/ProgressCircle.ts         |  81 +-
 .../progress-circle/progress-circle.css       | 791 ++++++++++++++++--
 .../stories/progress-circle.stories.ts        |  35 +-
 yarn.lock                                     | 548 +-----------
 5 files changed, 786 insertions(+), 692 deletions(-)

diff --git a/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts b/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
index 5c0b514af03..a8aea763660 100644
--- a/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
+++ b/second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts
@@ -34,11 +34,10 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
 
     /**
      * Static color variant for use on different backgrounds.
-     * When set to 'white', the component uses white styling for images with a dark tinted background.
-     * When set to 'black', the component uses black styling for images with a light tinted background.
+     * When set to 'white', the component uses white styling for dark backgrounds.
      */
     @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white' | 'black';
+    public staticColor?: 'white';
 
     /**
      * Progress value from 0 to 100.
@@ -47,24 +46,6 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
     @property({ type: Number })
     public progress = 0;
 
-    /**
-     * Stroke width for the progress circle.
-     */
-    @property({ type: Number, reflect: false })
-    public get strokeWidth(): number {
-        return this._strokeWidth;
-    }
-
-    public set strokeWidth(customWidth: unknown) {
-        if (customWidth && customWidth instanceof Number) {
-            this._strokeWidth = customWidth as number;
-        }
-
-        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
-    }
-
-    private _strokeWidth: number = 2;
-
     @query('slot')
     private slotEl!: HTMLSlotElement;
 
diff --git a/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
index 953b4c4be5d..fcdcdd3d0dc 100644
--- a/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
+++ b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts
@@ -11,18 +11,12 @@
  */
 
 import { CSSResultArray, html, TemplateResult } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { ProgressCircleBase } from '@swc/core/components/progress-circle';
 
 import progressCircleStyles from './progress-circle.css';
 
-function capitalize(str?: string): string {
-    if (typeof str !== 'string') {
-        return '';
-    }
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
 /**
  * A progress circle component that visually represents the completion progress of a task.
  * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.
@@ -31,7 +25,12 @@ function capitalize(str?: string): string {
  * @since 2.0.0
  * @status stable
  * @github https://github.com/adobe/spectrum-web-components/tree/main/second-gen/packages/swc/components/progress-circle
- * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13061-181
+ * @figma https://spectrum.figma.com/file/progress-circle
+ *
+ * @slot - Optional content to display inside the progress circle (e.g., percentage text)
+ *
+ * @csspart track - The background track of the progress circle
+ * @csspart fill - The filled portion of the progress circle
  *
  * @fires progress-change - Dispatched when the progress value changes
  *
@@ -47,51 +46,29 @@ export class ProgressCircle extends ProgressCircleBase {
     }
 
     protected override render(): TemplateResult {
-        // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
-        const radius = `calc(50% - ${this.strokeWidth / 2}px)`;
-
+        const styles = [
+            this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
+            this.makeRotation(
+                -180 + (180 / 50) * Math.max(this.progress - 50, 0)
+            ),
+        ];
+        const masks = ['Mask1', 'Mask2'];
         return html`
-            <div
-                class=${classMap({
-                    ['spectrum-ProgressCircle']: true,
-                    [`spectrum-ProgressCircle--indeterminate`]:
-                        this.indeterminate,
-                    [`spectrum-ProgressCircle--static${capitalize(this.staticColor)}`]:
-                        typeof this.staticColor !== 'undefined',
-                    [`spectrum-ProgressCircle--size${this.size?.toUpperCase()}`]:
-                        typeof this.size !== 'undefined',
-                })}
-            >
-                <svg
-                    fill="none"
-                    width="100%"
-                    height="100%"
-                    class="spectrum-outerCircle"
-                >
-                    <circle
-                        class="spectrum-innerCircle"
-                        cx="50%"
-                        cy="50%"
-                        r=${`calc(50% - ${this.strokeWidth / 1}px)`}
-                        stroke-width=${this.strokeWidth}
-                    />
-                    <circle
-                        cx="50%"
-                        cy="50%"
-                        class="spectrum-ProgressCircle-track"
-                        r=${radius}
-                    />
-                    <circle
-                        cx="50%"
-                        cy="50%"
-                        r=${radius}
-                        class="spectrum-ProgressCircle-fill"
-                        pathLength="100"
-                        stroke-dasharray="100 200"
-                        stroke-dashoffset=${100 - this.progress}
-                        stroke-linecap="round"
-                    />
-                </svg>
+            <slot @slotchange=${this.handleSlotchange}></slot>
+            <div class="track"></div>
+            <div class="fills">
+                ${masks.map(
+                    (mask, index) => html`
+                        <div class="fill${mask}">
+                            <div
+                                class="fillSub${mask}"
+                                style=${ifDefined(styles[index])}
+                            >
+                                <div class="fill"></div>
+                            </div>
+                        </div>
+                    `
+                )}
             </div>
         `;
     }
diff --git a/second-gen/packages/swc/components/progress-circle/progress-circle.css b/second-gen/packages/swc/components/progress-circle/progress-circle.css
index aa1b1184287..49625ee608f 100644
--- a/second-gen/packages/swc/components/progress-circle/progress-circle.css
+++ b/second-gen/packages/swc/components/progress-circle/progress-circle.css
@@ -1,9 +1,8 @@
-/*!
+/**
  * Copyright 2025 Adobe. All rights reserved.
- *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
@@ -11,133 +10,761 @@
  * governing permissions and limitations under the License.
  */
 
-@keyframes spectrum-fills-rotate {
-    0% {
-        transform: rotate(-90deg);
-    }
-
-    100% {
-        transform: rotate(270deg);
-    }
-}
-
-@keyframes spectrum-dashoffset-animation {
-    0%,
-    100% {
-        stroke-dashoffset: 75px;
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-progress-circle-fill-border-color: Highlight;
+        --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
     }
 
-    30% {
-        stroke-dashoffset: 20px;
+    .track {
+        --spectrum-progress-circle-track-border-style: double;
     }
 }
 
 :host {
-    display: inline-block;
-}
-
-.spectrum-ProgressCircle {
-    --spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
+    --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
     --spectrum-progress-circle-fill-border-color: var(
         --spectrum-accent-content-color-default
     );
-    --spectrum-progress-circle-size: var(
-        --spectrum-progress-circle-size-medium
+    --spectrum-progress-circle-track-border-color-over-background: var(
+        --spectrum-transparent-white-300
     );
-    --spectrum-progress-circle-thickness: var(
-        --spectrum-progress-circle-thickness-medium
+    --spectrum-progress-circle-fill-border-color-over-background: var(
+        --spectrum-transparent-white-900
+    );
+    --spectrum-progress-circle-track-border-style: solid;
+
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
     );
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    position: var(--mod-progress-circle-position, relative);
+    direction: ltr;
+    display: inline-block;
+    transform: translateZ(0);
 }
 
-.spectrum-ProgressCircle--sizeS {
+:host([size='s']) {
     --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
     --spectrum-progress-circle-thickness: var(
         --spectrum-progress-circle-thickness-small
     );
 }
 
-.spectrum-ProgressCircle--sizeL {
+:host {
+    --spectrum-progress-circle-size: var(
+        --spectrum-progress-circle-size-medium
+    );
+    --spectrum-progress-circle-thickness: var(
+        --spectrum-progress-circle-thickness-medium
+    );
+}
+
+:host([size='l']) {
     --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
     --spectrum-progress-circle-thickness: var(
         --spectrum-progress-circle-thickness-large
     );
 }
 
-.spectrum-ProgressCircle {
-    display: inline-block;
-    inline-size: var(--spectrum-progress-circle-size);
-    block-size: var(--spectrum-progress-circle-size);
-    position: relative;
-    direction: ltr;
-    transform: translateZ(0);
+.track {
+    box-sizing: border-box;
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    border-style: var(
+        --mod-progress-circle-track-border-style,
+        var(--spectrum-progress-circle-track-border-style)
+    );
+    border-width: var(
+        --mod-progress-circle-thickness,
+        var(--spectrum-progress-circle-thickness)
+    );
+    border-radius: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    border-color: var(
+        --mod-progress-circle-track-border-color,
+        var(--spectrum-progress-circle-track-border-color)
+    );
+}
+
+.fills {
+    inline-size: 100%;
+    block-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 }
 
-.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
-    --spectrum-progress-circle-track-border-color: var(
-        --spectrum-static-white-track-color
+.fill {
+    box-sizing: border-box;
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
     );
-    --spectrum-progress-circle-fill-border-color: var(
-        --spectrum-static-white-track-indicator-color
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    border-style: solid;
+    border-width: var(
+        --mod-progress-circle-thickness,
+        var(--spectrum-progress-circle-thickness)
+    );
+    border-radius: var(
+        --mod-progress-circle-size,
+        var(--spectrum-progress-circle-size)
+    );
+    border-color: var(
+        --highcontrast-progress-circle-fill-border-color,
+        var(
+            --mod-progress-circle-fill-border-color,
+            var(--spectrum-progress-circle-fill-border-color)
+        )
     );
 }
 
-.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack {
-    --spectrum-progress-circle-track-border-color: var(
-        --spectrum-static-black-track-color
+:host([static-color='white']) .track {
+    border-color: var(
+        --mod-progress-circle-track-border-color-over-background,
+        var(--spectrum-progress-circle-track-border-color-over-background)
     );
-    --spectrum-progress-circle-fill-border-color: var(
-        --spectrum-static-black-track-indicator-color
+}
+
+:host([static-color='white']) .fill {
+    border-color: var(
+        --highcontrast-progress-circle-fill-border-color-over-background,
+        var(
+            --mod-progress-circle-fill-border-color-over-background,
+            var(--spectrum-progress-circle-fill-border-color-over-background)
+        )
     );
 }
 
-.spectrum-ProgressCircle-fill,
-.spectrum-ProgressCircle-track {
-    box-sizing: border-box;
-    inline-size: var(--spectrum-progress-circle-size);
-    block-size: var(--spectrum-progress-circle-size);
+.fillMask1,
+.fillMask2 {
+    inline-size: 50%;
+    block-size: 100%;
+    transform-origin: 100%;
+    position: absolute;
+    overflow: hidden;
+    transform: rotate(180deg);
 }
 
-.spectrum-ProgressCircle-track {
-    stroke-width: var(--spectrum-progress-circle-thickness);
-    stroke: var(
-        --highcontrast-progress-circle-track-color,
-        var(--spectrum-progress-circle-track-border-color)
-    );
+.fillSubMask1,
+.fillSubMask2 {
+    inline-size: 100%;
+    block-size: 100%;
+    transform-origin: 100%;
+    overflow: hidden;
+    transform: rotate(-180deg);
 }
 
-.spectrum-ProgressCircle-fill {
-    stroke-width: var(--spectrum-progress-circle-thickness);
-    stroke: var(
-        --highcontrast-progress-circle-fill-border-color,
-        var(--spectrum-progress-circle-fill-border-color)
-    );
-    transform: rotate(-90deg);
-    transform-origin: center;
+.fillMask2 {
+    transform: rotate(0);
 }
 
-.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill {
+:host([indeterminate]) .fills {
     will-change: transform;
-    animation:
-        spectrum-fills-rotate 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite,
-        spectrum-dashoffset-animation 1s cubic-bezier(0.25, 0.1, 0.25, 1.3)
-            infinite;
     transform-origin: center;
+    animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite
+        spectrum-fills-rotate;
+    transform: translateZ(0);
 }
 
-@media (forced-colors: active) {
-    .spectrum-ProgressCircle {
-        --highcontrast-progress-circle-fill-border-color: Highlight;
-        --highcontrast-progress-circle-track-color: Background;
+:host([indeterminate]) .fillSubMask1 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-1;
+    transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask2 {
+    will-change: transform;
+    animation: 1s linear infinite spectrum-fill-mask-2;
+    transform: translateZ(0);
+}
+
+.fill-submask-2 {
+    animation: 1s linear infinite spectrum-fill-mask-2;
+}
+
+@keyframes spectrum-fill-mask-1 {
+    0% {
+        transform: rotate(90deg);
+    }
+
+    1.69% {
+        transform: rotate(72.3deg);
+    }
+
+    3.39% {
+        transform: rotate(55.5deg);
+    }
+
+    5.08% {
+        transform: rotate(40.3deg);
+    }
+
+    6.78% {
+        transform: rotate(25deg);
+    }
+
+    8.47% {
+        transform: rotate(10.6deg);
+    }
+
+    10.17% {
+        transform: rotate(0);
+    }
+
+    11.86% {
+        transform: rotate(0);
+    }
+
+    13.56% {
+        transform: rotate(0);
+    }
+
+    15.25% {
+        transform: rotate(0);
+    }
+
+    16.95% {
+        transform: rotate(0);
+    }
+
+    18.64% {
+        transform: rotate(0);
+    }
+
+    20.34% {
+        transform: rotate(0);
+    }
+
+    22.03% {
+        transform: rotate(0);
+    }
+
+    23.73% {
+        transform: rotate(0);
+    }
+
+    25.42% {
+        transform: rotate(0);
+    }
+
+    27.12% {
+        transform: rotate(0);
+    }
+
+    28.81% {
+        transform: rotate(0);
+    }
+
+    30.51% {
+        transform: rotate(0);
+    }
+
+    32.2% {
+        transform: rotate(0);
+    }
+
+    33.9% {
+        transform: rotate(0);
+    }
+
+    35.59% {
+        transform: rotate(0);
+    }
+
+    37.29% {
+        transform: rotate(0);
+    }
+
+    38.98% {
+        transform: rotate(0);
+    }
+
+    40.68% {
+        transform: rotate(0);
+    }
+
+    42.37% {
+        transform: rotate(5.3deg);
+    }
+
+    44.07% {
+        transform: rotate(13.4deg);
+    }
+
+    45.76% {
+        transform: rotate(20.6deg);
+    }
+
+    47.46% {
+        transform: rotate(29deg);
+    }
+
+    49.15% {
+        transform: rotate(36.5deg);
+    }
+
+    50.85% {
+        transform: rotate(42.6deg);
+    }
+
+    52.54% {
+        transform: rotate(48.8deg);
+    }
+
+    54.24% {
+        transform: rotate(54.2deg);
+    }
+
+    55.93% {
+        transform: rotate(59.4deg);
+    }
+
+    57.63% {
+        transform: rotate(63.2deg);
+    }
+
+    59.32% {
+        transform: rotate(67.2deg);
+    }
+
+    61.02% {
+        transform: rotate(70.8deg);
+    }
+
+    62.71% {
+        transform: rotate(73.8deg);
+    }
+
+    64.41% {
+        transform: rotate(76.2deg);
+    }
+
+    66.1% {
+        transform: rotate(78.7deg);
+    }
+
+    67.8% {
+        transform: rotate(80.6deg);
+    }
+
+    69.49% {
+        transform: rotate(82.6deg);
+    }
+
+    71.19% {
+        transform: rotate(83.7deg);
+    }
+
+    72.88% {
+        transform: rotate(85deg);
+    }
+
+    74.58% {
+        transform: rotate(86.3deg);
+    }
+
+    76.27% {
+        transform: rotate(87deg);
+    }
+
+    77.97% {
+        transform: rotate(87.7deg);
+    }
+
+    79.66% {
+        transform: rotate(88.3deg);
+    }
+
+    81.36% {
+        transform: rotate(88.6deg);
+    }
+
+    83.05% {
+        transform: rotate(89.2deg);
+    }
+
+    84.75% {
+        transform: rotate(89.2deg);
+    }
+
+    86.44% {
+        transform: rotate(89.5deg);
+    }
+
+    88.14% {
+        transform: rotate(89.9deg);
+    }
+
+    89.83% {
+        transform: rotate(89.7deg);
+    }
+
+    91.53% {
+        transform: rotate(90.1deg);
     }
 
-    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
-        .spectrum-innerCircle {
-        stroke: CanvasText;
+    93.22% {
+        transform: rotate(90.2deg);
     }
 
-    .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
-        .spectrum-outerCircle {
-        border: 1px solid CanvasText;
-        border-radius: 50%;
+    94.92% {
+        transform: rotate(90.1deg);
     }
+
+    96.61% {
+        transform: rotate(90deg);
+    }
+
+    98.31% {
+        transform: rotate(89.8deg);
+    }
+
+    100% {
+        transform: rotate(90deg);
+    }
+}
+
+@keyframes spectrum-fill-mask-2 {
+    0% {
+        transform: rotate(180deg);
+    }
+
+    1.69% {
+        transform: rotate(180deg);
+    }
+
+    3.39% {
+        transform: rotate(180deg);
+    }
+
+    5.08% {
+        transform: rotate(180deg);
+    }
+
+    6.78% {
+        transform: rotate(180deg);
+    }
+
+    8.47% {
+        transform: rotate(180deg);
+    }
+
+    10.17% {
+        transform: rotate(179.2deg);
+    }
+
+    11.86% {
+        transform: rotate(164deg);
+    }
+
+    13.56% {
+        transform: rotate(151.8deg);
+    }
+
+    15.25% {
+        transform: rotate(140.8deg);
+    }
+
+    16.95% {
+        transform: rotate(130.3deg);
+    }
+
+    18.64% {
+        transform: rotate(120.4deg);
+    }
+
+    20.34% {
+        transform: rotate(110.8deg);
+    }
+
+    22.03% {
+        transform: rotate(101.6deg);
+    }
+
+    23.73% {
+        transform: rotate(93.5deg);
+    }
+
+    25.42% {
+        transform: rotate(85.4deg);
+    }
+
+    27.12% {
+        transform: rotate(78.1deg);
+    }
+
+    28.81% {
+        transform: rotate(71.2deg);
+    }
+
+    30.51% {
+        transform: rotate(89.1deg);
+    }
+
+    32.2% {
+        transform: rotate(105.5deg);
+    }
+
+    33.9% {
+        transform: rotate(121.3deg);
+    }
+
+    35.59% {
+        transform: rotate(135.5deg);
+    }
+
+    37.29% {
+        transform: rotate(148.4deg);
+    }
+
+    38.98% {
+        transform: rotate(161deg);
+    }
+
+    40.68% {
+        transform: rotate(173.5deg);
+    }
+
+    42.37% {
+        transform: rotate(180deg);
+    }
+
+    44.07% {
+        transform: rotate(180deg);
+    }
+
+    45.76% {
+        transform: rotate(180deg);
+    }
+
+    47.46% {
+        transform: rotate(180deg);
+    }
+
+    49.15% {
+        transform: rotate(180deg);
+    }
+
+    50.85% {
+        transform: rotate(180deg);
+    }
+
+    52.54% {
+        transform: rotate(180deg);
+    }
+
+    54.24% {
+        transform: rotate(180deg);
+    }
+
+    55.93% {
+        transform: rotate(180deg);
+    }
+
+    57.63% {
+        transform: rotate(180deg);
+    }
+
+    59.32% {
+        transform: rotate(180deg);
+    }
+
+    61.02% {
+        transform: rotate(180deg);
+    }
+
+    62.71% {
+        transform: rotate(180deg);
+    }
+
+    64.41% {
+        transform: rotate(180deg);
+    }
+
+    66.1% {
+        transform: rotate(180deg);
+    }
+
+    67.8% {
+        transform: rotate(180deg);
+    }
+
+    69.49% {
+        transform: rotate(180deg);
+    }
+
+    71.19% {
+        transform: rotate(180deg);
+    }
+
+    72.88% {
+        transform: rotate(180deg);
+    }
+
+    74.58% {
+        transform: rotate(180deg);
+    }
+
+    76.27% {
+        transform: rotate(180deg);
+    }
+
+    77.97% {
+        transform: rotate(180deg);
+    }
+
+    79.66% {
+        transform: rotate(180deg);
+    }
+
+    81.36% {
+        transform: rotate(180deg);
+    }
+
+    83.05% {
+        transform: rotate(180deg);
+    }
+
+    84.75% {
+        transform: rotate(180deg);
+    }
+
+    86.44% {
+        transform: rotate(180deg);
+    }
+
+    88.14% {
+        transform: rotate(180deg);
+    }
+
+    89.83% {
+        transform: rotate(180deg);
+    }
+
+    91.53% {
+        transform: rotate(180deg);
+    }
+
+    93.22% {
+        transform: rotate(180deg);
+    }
+
+    94.92% {
+        transform: rotate(180deg);
+    }
+
+    96.61% {
+        transform: rotate(180deg);
+    }
+
+    98.31% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes spectrum-fills-rotate {
+    0% {
+        transform: rotate(-90deg);
+    }
+
+    100% {
+        transform: rotate(270deg);
+    }
+}
+
+:host {
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+
+    --spectrum-progress-circle-size: inherit;
+    --spectrum-progresscircle-m-over-background-track-fill-color: var(
+        --spectrum-alias-track-fill-color-overbackground
+    );
+    --_spectrum-progress-circle-size: var(
+        --spectrum-progress-circle-size,
+        var(--spectrum-progress-circle-size-medium)
+    );
+}
+
+:host([size='s']) {
+    --_spectrum-progress-circle-size: var(
+        --spectrum-progress-circle-size,
+        var(--spectrum-progress-circle-size-small)
+    );
+}
+
+:host([size='l']) {
+    --_spectrum-progress-circle-size: var(
+        --spectrum-progress-circle-size,
+        var(--spectrum-progress-circle-size-large)
+    );
+}
+
+slot {
+    display: none;
+}
+
+.track {
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+    border-radius: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+}
+
+.fill {
+    block-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+    border-radius: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+    inline-size: var(
+        --mod-progress-circle-size,
+        var(--_spectrum-progress-circle-size)
+    );
+}
+
+/* stylelint-disable */
+:host([indeterminate]) .fills,
+:host([indeterminate]) .fillSubMask1,
+:host([indeterminate]) .fillSubMask2 {
+    animation-duration: var(--spectrum-animation-duration-2000);
 }
+/* stylelint-enable */
diff --git a/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
index a6dec357c9c..085d5261a78 100644
--- a/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
+++ b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
@@ -139,7 +139,7 @@ export const Indeterminate: Story = {
 export const StaticWhite: Story = {
     render: () => html`
         <div
-            style="background: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); padding: 24px; display: flex; gap: 24px; align-items: center;"
+            style="background-color: rgba(0,0,0,0.4); padding: 24px; display: flex; gap: 24px; align-items: center;"
         >
             <swc-progress-circle
                 .progress=${60}
@@ -163,33 +163,6 @@ export const StaticWhite: Story = {
     `,
 };
 
-export const StaticBlack: Story = {
-    render: () => html`
-        <div
-            style="background: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); padding: 24px; display: flex; gap: 24px; align-items: center;"
-        >
-            <swc-progress-circle
-                .progress=${60}
-                static-color="black"
-                size="s"
-                label="Loading on dark background"
-            ></swc-progress-circle>
-            <swc-progress-circle
-                .progress=${60}
-                static-color="black"
-                size="m"
-                label="Loading on dark background"
-            ></swc-progress-circle>
-            <swc-progress-circle
-                .progress=${60}
-                static-color="black"
-                size="l"
-                label="Loading on dark background"
-            ></swc-progress-circle>
-        </div>
-    `,
-};
-
 export const IndeterminateStaticWhite: Story = {
     render: () => html`
         <div
@@ -216,3 +189,9 @@ export const IndeterminateStaticWhite: Story = {
         </div>
     `,
 };
+
+export const WithSlottedContent: Story = {
+    render: () => html`
+        <swc-progress-circle .progress=${45}> Loading... </swc-progress-circle>
+    `,
+};
diff --git a/yarn.lock b/yarn.lock
index bcedb60376d..fad10cd9eb8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -611,18 +611,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.4.5":
-  version: 7.28.3
-  resolution: "@babel/parser@npm:7.28.3"
-  dependencies:
-    "@babel/types": "npm:^7.28.2"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/1f41eb82623b0ca0f94521b57f4790c6c457cd922b8e2597985b36bdec24114a9ccf54640286a760ceb60f11fe9102d192bf60477aee77f5d45f1029b9b72729
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.25.4, @babel/parser@npm:^7.28.4":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4, @babel/parser@npm:^7.4.5":
   version: 7.28.4
   resolution: "@babel/parser@npm:7.28.4"
   dependencies:
@@ -1644,22 +1633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5":
   version: 7.28.4
   resolution: "@babel/runtime@npm:7.28.4"
   checksum: 10c0/792ce7af9750fb9b93879cc9d1db175701c4689da890e6ced242ea0207c9da411ccf16dc04e689cc01158b28d7898c40d75598f4559109f761c12ce01e959bf7
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.5.5":
-  version: 7.26.9
-  resolution: "@babel/runtime@npm:7.26.9"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/e8517131110a6ec3a7360881438b85060e49824e007f4a64b5dfa9192cf2bb5c01e84bfc109f02d822c7edb0db926928dd6b991e3ee460b483fb0fac43152d9b
-  languageName: node
-  linkType: hard
-
 "@babel/template@npm:^7.22.5, @babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2, @babel/template@npm:^7.3.3":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
@@ -1671,22 +1651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.4.5":
-  version: 7.28.3
-  resolution: "@babel/traverse@npm:7.28.3"
-  dependencies:
-    "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.28.3"
-    "@babel/helper-globals": "npm:^7.28.0"
-    "@babel/parser": "npm:^7.28.3"
-    "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.28.2"
-    debug: "npm:^4.3.1"
-  checksum: 10c0/26e95b29a46925b7b41255e03185b7e65b2c4987e14bbee7bbf95867fb19c69181f301bbe1c7b201d4fe0cce6aa0cbea0282dad74b3a0fef3d9058f6c76fdcb3
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.28.4":
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.4.5":
   version: 7.28.4
   resolution: "@babel/traverse@npm:7.28.4"
   dependencies:
@@ -1701,17 +1666,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.28.2
-  resolution: "@babel/types@npm:7.28.2"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.27.1"
-  checksum: 10c0/24b11c9368e7e2c291fe3c1bcd1ed66f6593a3975f479cbb9dd7b8c8d8eab8a962b0d2fca616c043396ce82500ac7d23d594fbbbd013828182c01596370a0b10
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.25.4, @babel/types@npm:^7.28.4":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.28.4
   resolution: "@babel/types@npm:7.28.4"
   dependencies:
@@ -3962,17 +3917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28":
-  version: 0.3.30
-  resolution: "@jridgewell/trace-mapping@npm:0.3.30"
-  dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10c0/3a1516c10f44613b9ba27c37a02ff8f410893776b2b3dad20a391b51b884dd60f97bbb56936d65d2ff8fe978510a0000266654ab8426bdb9ceb5fb4585b19e23
-  languageName: node
-  linkType: hard
-
-"@jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.30":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28, @jridgewell/trace-mapping@npm:^0.3.30":
   version: 0.3.31
   resolution: "@jridgewell/trace-mapping@npm:0.3.31"
   dependencies:
@@ -4864,13 +4809,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.49.0"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-android-arm-eabi@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.52.2"
@@ -4885,13 +4823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-android-arm64@npm:4.49.0"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-android-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-android-arm64@npm:4.52.2"
@@ -4906,13 +4837,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.49.0"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-darwin-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-darwin-arm64@npm:4.52.2"
@@ -4927,13 +4851,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-darwin-x64@npm:4.49.0"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-darwin-x64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-darwin-x64@npm:4.52.2"
@@ -4948,13 +4865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.49.0"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-freebsd-arm64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-freebsd-arm64@npm:4.52.2"
@@ -4969,13 +4879,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.49.0"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-freebsd-x64@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-freebsd-x64@npm:4.52.2"
@@ -4990,13 +4893,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.49.0"
-  conditions: os=linux & cpu=arm & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-arm-gnueabihf@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.52.2"
@@ -5011,13 +4907,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.49.0"
-  conditions: os=linux & cpu=arm & libc=musl
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-arm-musleabihf@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.52.2"
@@ -5032,13 +4921,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-arm64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.52.2"
@@ -5053,13 +4935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.49.0"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-arm64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-arm64-musl@npm:4.52.2"
@@ -5088,20 +4963,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=loong64 & libc=glibc
-  languageName: node
-  linkType: hard
-
-"@rollup/rollup-linux-ppc64-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=ppc64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-ppc64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.52.2"
@@ -5116,13 +4977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=riscv64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-riscv64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.52.2"
@@ -5137,13 +4991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-musl@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.49.0"
-  conditions: os=linux & cpu=riscv64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-riscv64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.52.2"
@@ -5158,13 +5005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=s390x & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-s390x-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.52.2"
@@ -5179,13 +5019,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.49.0"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-x64-gnu@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.52.2"
@@ -5200,13 +5033,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.49.0"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-linux-x64-musl@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-linux-x64-musl@npm:4.52.2"
@@ -5235,13 +5061,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.49.0"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-win32-arm64-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.52.2"
@@ -5256,13 +5075,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.49.0"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-win32-ia32-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.52.2"
@@ -5291,13 +5103,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.49.0":
-  version: 4.49.0
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.49.0"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-win32-x64-msvc@npm:4.52.2":
   version: 4.52.2
   resolution: "@rollup/rollup-win32-x64-msvc@npm:4.52.2"
@@ -10211,7 +10016,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.6.0, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.11.0, ajv@npm:^8.6.0, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -10223,18 +10028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.11.0, ajv@npm:~8.13.0":
-  version: 8.13.0
-  resolution: "ajv@npm:8.13.0"
-  dependencies:
-    fast-deep-equal: "npm:^3.1.3"
-    json-schema-traverse: "npm:^1.0.0"
-    require-from-string: "npm:^2.0.2"
-    uri-js: "npm:^4.4.1"
-  checksum: 10c0/14c6497b6f72843986d7344175a1aa0e2c35b1e7f7475e55bc582cddb765fca7e6bf950f465dc7846f817776d9541b706f4b5b3fbedd8dfdeb5fce6f22864264
-  languageName: node
-  linkType: hard
-
 "ajv@npm:~8.12.0":
   version: 8.12.0
   resolution: "ajv@npm:8.12.0"
@@ -10247,6 +10040,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:~8.13.0":
+  version: 8.13.0
+  resolution: "ajv@npm:8.13.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+    uri-js: "npm:^4.4.1"
+  checksum: 10c0/14c6497b6f72843986d7344175a1aa0e2c35b1e7f7475e55bc582cddb765fca7e6bf950f465dc7846f817776d9541b706f4b5b3fbedd8dfdeb5fce6f22864264
+  languageName: node
+  linkType: hard
+
 "alex@npm:11.0.1":
   version: 11.0.1
   resolution: "alex@npm:11.0.1"
@@ -10788,7 +10593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.12.0":
+"axios@npm:^1.12.0, axios@npm:^1.6.1":
   version: 1.12.2
   resolution: "axios@npm:1.12.2"
   dependencies:
@@ -10799,17 +10604,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.6.1":
-  version: 1.11.0
-  resolution: "axios@npm:1.11.0"
-  dependencies:
-    follow-redirects: "npm:^1.15.6"
-    form-data: "npm:^4.0.4"
-    proxy-from-env: "npm:^1.1.0"
-  checksum: 10c0/5de273d33d43058610e4d252f0963cc4f10714da0bfe872e8ef2cbc23c2c999acc300fd357b6bce0fc84a2ca9bd45740fa6bb28199ce2c1266c8b1a393f2b36e
-  languageName: node
-  linkType: hard
-
 "axobject-query@npm:^2.2.0":
   version: 2.2.0
   resolution: "axobject-query@npm:2.2.0"
@@ -11273,35 +11067,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.16.5, browserslist@npm:^4.21.4, browserslist@npm:^4.24.0, browserslist@npm:^4.25.1, browserslist@npm:^4.25.3":
-  version: 4.25.3
-  resolution: "browserslist@npm:4.25.3"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001735"
-    electron-to-chromium: "npm:^1.5.204"
-    node-releases: "npm:^2.0.19"
-    update-browserslist-db: "npm:^1.1.3"
-  bin:
-    browserslist: cli.js
-  checksum: 10c0/cefbbf962b7c0f0d77e952a4b4b37469db7f7f02bc2be7297810ac3cf086660f48daf78d00f7aad8a11b682f88b0ee0022594165ead749e9e4158a0aa49cd161
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.24.4":
-  version: 4.25.4
-  resolution: "browserslist@npm:4.25.4"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001737"
-    electron-to-chromium: "npm:^1.5.211"
-    node-releases: "npm:^2.0.19"
-    update-browserslist-db: "npm:^1.1.3"
-  bin:
-    browserslist: cli.js
-  checksum: 10c0/2b105948990dc2fc0bc2536b4889aadfa15d637e1d857a121611a704cdf539a68f575a391f6bf8b7ff19db36cee1b7834565571f35a7ea691051d2e7fb4f2eb1
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.26.0":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.16.5, browserslist@npm:^4.21.4, browserslist@npm:^4.24.0, browserslist@npm:^4.24.4, browserslist@npm:^4.25.1, browserslist@npm:^4.25.3, browserslist@npm:^4.26.0":
   version: 4.26.2
   resolution: "browserslist@npm:4.26.2"
   dependencies:
@@ -11600,17 +11366,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001702, caniuse-lite@npm:^1.0.30001737":
-  version: 1.0.30001739
-  resolution: "caniuse-lite@npm:1.0.30001739"
-  checksum: 10c0/a61ca5a53c428769059421a23311a7a812bdb6586e34dcad6189bd61bcdea58ffe2fe7f3c22a829e8978eba5316b6599aee88b9ea23677d8d5298865df4f4ad8
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001735":
-  version: 1.0.30001737
-  resolution: "caniuse-lite@npm:1.0.30001737"
-  checksum: 10c0/9d9cfe3b46fe670d171cee10c5c1b0fb641946fd5d6bea26149f804003d53d82ade7ef5a4a640fb3a0eaec47c7839b57e06a6ddae4f0ad2cd58e1187d31997ce
+"caniuse-lite@npm:^1.0.30001702":
+  version: 1.0.30001746
+  resolution: "caniuse-lite@npm:1.0.30001746"
+  checksum: 10c0/e656a9dc811be2316e3b6dbd3bf25d0e32dbce645b1284821b4ec93fb81dc3e3f73b9473e2f66c921b620ea8b25ebbae9ee70c3d13dad85f8dd69d6bb2c91d46
   languageName: node
   linkType: hard
 
@@ -11706,20 +11465,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.1, chalk@npm:^5.1.2, chalk@npm:^5.2.0":
+"chalk@npm:^5.0.1, chalk@npm:^5.1.2, chalk@npm:^5.2.0, chalk@npm:^5.3.0":
   version: 5.6.2
   resolution: "chalk@npm:5.6.2"
   checksum: 10c0/99a4b0f0e7991796b1e7e3f52dceb9137cae2a9dfc8fc0784a550dc4c558e15ab32ed70b14b21b52beb2679b4892b41a0aa44249bcb996f01e125d58477c6976
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "chalk@npm:5.3.0"
-  checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
-  languageName: node
-  linkType: hard
-
 "change-case@npm:^5.4.4":
   version: 5.4.4
   resolution: "change-case@npm:5.4.4"
@@ -11946,20 +11698,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0":
+"ci-info@npm:^3.2.0, ci-info@npm:^3.7.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
   checksum: 10c0/6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.7.0":
-  version: 3.8.0
-  resolution: "ci-info@npm:3.8.0"
-  checksum: 10c0/0d3052193b58356372b34ab40d2668c3e62f1006d5ca33726d1d3c423853b19a85508eadde7f5908496fb41448f465263bf61c1ee58b7832cb6a924537e3863a
-  languageName: node
-  linkType: hard
-
 "ci-info@npm:^4.0.0":
   version: 4.3.0
   resolution: "ci-info@npm:4.3.0"
@@ -12726,7 +12471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -12737,17 +12482,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.3":
-  version: 7.0.3
-  resolution: "cross-spawn@npm:7.0.3"
-  dependencies:
-    path-key: "npm:^3.1.0"
-    shebang-command: "npm:^2.0.0"
-    which: "npm:^2.0.1"
-  checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750
-  languageName: node
-  linkType: hard
-
 "crypt@npm:0.0.2":
   version: 0.0.2
   resolution: "crypt@npm:0.0.2"
@@ -12916,20 +12650,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.0.1":
+"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.2.2
   resolution: "css-what@npm:6.2.2"
   checksum: 10c0/91e24c26fb977b4ccef30d7007d2668c1c10ac0154cc3f42f7304410e9594fb772aea4f30c832d2993b132ca8d99338050866476210316345ec2e7d47b248a56
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "css-what@npm:6.1.0"
-  checksum: 10c0/a09f5a6b14ba8dcf57ae9a59474722e80f20406c53a61e9aedb0eedc693b135113ffe2983f4efc4b5065ae639442e9ae88df24941ef159c218b231011d733746
-  languageName: node
-  linkType: hard
-
 "css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
@@ -13979,20 +13706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.5.204":
-  version: 1.5.209
-  resolution: "electron-to-chromium@npm:1.5.209"
-  checksum: 10c0/ec857aeecf85769310889926d55cf4032f93b213733e68b4bc48eab72e42e190f9f1a2694c8c175435cbd111dfdee420e1e1ffe5b2bd46b2f33324580e938f2c
-  languageName: node
-  linkType: hard
-
-"electron-to-chromium@npm:^1.5.211":
-  version: 1.5.211
-  resolution: "electron-to-chromium@npm:1.5.211"
-  checksum: 10c0/587536f2e319b7484cd4c9e83484f461ee06672c588c84bf4d4b6a6b5d00fbdb621d4ca418a68125a86db95d373b890b47de2fb5a0f52592cc8aebc263623e6e
-  languageName: node
-  linkType: hard
-
 "electron-to-chromium@npm:^1.5.218":
   version: 1.5.223
   resolution: "electron-to-chromium@npm:1.5.223"
@@ -14014,20 +13727,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^10.2.1":
+"emoji-regex@npm:^10.2.1, emoji-regex@npm:^10.3.0":
   version: 10.5.0
   resolution: "emoji-regex@npm:10.5.0"
   checksum: 10c0/17cf84335a461fc23bf90575122ace2902630dc760e53299474cd3b0b5e4cfbc6c0223a389a766817538e5d20bf0f36c67b753f27c9e705056af510b8777e312
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^10.3.0":
-  version: 10.3.0
-  resolution: "emoji-regex@npm:10.3.0"
-  checksum: 10c0/b4838e8dcdceb44cf47f59abe352c25ff4fe7857acaf5fb51097c427f6f75b44d052eb907a7a3b86f86bc4eae3a93f5c2b7460abe79c407307e6212d65c91163
-  languageName: node
-  linkType: hard
-
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -15588,7 +15294,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.3.3, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.2, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
+"fast-glob@npm:3.3.3, fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -15601,19 +15307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
-  version: 3.3.2
-  resolution: "fast-glob@npm:3.3.2"
-  dependencies:
-    "@nodelib/fs.stat": "npm:^2.0.2"
-    "@nodelib/fs.walk": "npm:^1.2.3"
-    glob-parent: "npm:^5.1.2"
-    merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845
-  languageName: node
-  linkType: hard
-
 "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -16187,7 +15880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:11.3.2":
+"fs-extra@npm:11.3.2, fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:~11.3.0":
   version: 11.3.2
   resolution: "fs-extra@npm:11.3.2"
   dependencies:
@@ -16209,17 +15902,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:~11.3.0":
-  version: 11.3.1
-  resolution: "fs-extra@npm:11.3.1"
-  dependencies:
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^2.0.0"
-  checksum: 10c0/61e5b7285b1ca72c68dfe1058b2514294a922683afac2a80aa90540f9bd85370763d675e3b408ef500077d355956fece3bd24b546790e261c3d3015967e2b2d9
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -17715,20 +17397,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.0, ignore@npm:^5.1.4, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+"ignore@npm:^5.0.0, ignore@npm:^5.1.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.2.0":
-  version: 5.3.1
-  resolution: "ignore@npm:5.3.1"
-  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
-  languageName: node
-  linkType: hard
-
 "ignore@npm:^7.0.3, ignore@npm:^7.0.5":
   version: 7.0.5
   resolution: "ignore@npm:7.0.5"
@@ -17743,7 +17418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.2.1":
+"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.1
   resolution: "import-fresh@npm:3.3.1"
   dependencies:
@@ -17753,16 +17428,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "import-fresh@npm:3.3.0"
-  dependencies:
-    parent-module: "npm:^1.0.0"
-    resolve-from: "npm:^4.0.0"
-  checksum: 10c0/7f882953aa6b740d1f0e384d0547158bc86efbf2eea0f1483b8900a6f65c5a5123c2cf09b0d542cc419d0b98a759ecaeb394237e97ea427f2da221dc3cd80cc3
-  languageName: node
-  linkType: hard
-
 "import-lazy@npm:^4.0.0, import-lazy@npm:~4.0.0":
   version: 4.0.0
   resolution: "import-lazy@npm:4.0.0"
@@ -19616,7 +19281,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-eslint-parser@npm:2.4.1":
+"jsonc-eslint-parser@npm:2.4.1, jsonc-eslint-parser@npm:^2.4.0":
   version: 2.4.1
   resolution: "jsonc-eslint-parser@npm:2.4.1"
   dependencies:
@@ -19628,18 +19293,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-eslint-parser@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "jsonc-eslint-parser@npm:2.4.0"
-  dependencies:
-    acorn: "npm:^8.5.0"
-    eslint-visitor-keys: "npm:^3.0.0"
-    espree: "npm:^9.0.0"
-    semver: "npm:^7.3.5"
-  checksum: 10c0/1bef9f4f12122824e1d13ef651b7a8d16cbf6995bfd08fabb81df34ff0cf57f5c1c822dd5ee7aece0575fb1351538c8c5ce86f9b94d8f41bcd3bbe2773b62db3
-  languageName: node
-  linkType: hard
-
 "jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
   version: 3.3.1
   resolution: "jsonc-parser@npm:3.3.1"
@@ -22965,13 +22618,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.19":
-  version: 2.0.19
-  resolution: "node-releases@npm:2.0.19"
-  checksum: 10c0/52a0dbd25ccf545892670d1551690fe0facb6a471e15f2cfa1b20142a5b255b3aa254af5f59d6ecb69c2bec7390bc643c43aa63b13bf5e64b6075952e716b1aa
-  languageName: node
-  linkType: hard
-
 "node-releases@npm:^2.0.21":
   version: 2.0.21
   resolution: "node-releases@npm:2.0.21"
@@ -24108,20 +23754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:1.1.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
+"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "picocolors@npm:1.0.1"
-  checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
-  languageName: node
-  linkType: hard
-
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -25878,20 +25517,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"quansync@npm:^0.2.11":
+"quansync@npm:^0.2.11, quansync@npm:^0.2.7":
   version: 0.2.11
   resolution: "quansync@npm:0.2.11"
   checksum: 10c0/cb9a1f8ebce074069f2f6a78578873ffedd9de9f6aa212039b44c0870955c04a71c3b1311b5d97f8ac2f2ec476de202d0a5c01160cb12bc0a11b7ef36d22ef56
   languageName: node
   linkType: hard
 
-"quansync@npm:^0.2.7":
-  version: 0.2.8
-  resolution: "quansync@npm:0.2.8"
-  checksum: 10c0/7dae50c11dab2f94ae841183dd79a920a085e01961f9aeb594dd4793ad7b2e6e39ae106051c91f7175c5897de98800cfd52fe6836e32670c3c220fad2ec4598d
-  languageName: node
-  linkType: hard
-
 "query-string@npm:^7.1.0":
   version: 7.1.3
   resolution: "query-string@npm:7.1.3"
@@ -26976,7 +26608,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:4.52.2":
+"rollup@npm:4.52.2, rollup@npm:^4.4.0, rollup@npm:^4.4.1":
   version: 4.52.2
   resolution: "rollup@npm:4.52.2"
   dependencies:
@@ -27071,81 +26703,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.4.0, rollup@npm:^4.4.1":
-  version: 4.49.0
-  resolution: "rollup@npm:4.49.0"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.49.0"
-    "@rollup/rollup-android-arm64": "npm:4.49.0"
-    "@rollup/rollup-darwin-arm64": "npm:4.49.0"
-    "@rollup/rollup-darwin-x64": "npm:4.49.0"
-    "@rollup/rollup-freebsd-arm64": "npm:4.49.0"
-    "@rollup/rollup-freebsd-x64": "npm:4.49.0"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.49.0"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.49.0"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.49.0"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-ppc64-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-riscv64-musl": "npm:4.49.0"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.49.0"
-    "@rollup/rollup-linux-x64-musl": "npm:4.49.0"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.49.0"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.49.0"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.49.0"
-    "@types/estree": "npm:1.0.8"
-    fsevents: "npm:~2.3.2"
-  dependenciesMeta:
-    "@rollup/rollup-android-arm-eabi":
-      optional: true
-    "@rollup/rollup-android-arm64":
-      optional: true
-    "@rollup/rollup-darwin-arm64":
-      optional: true
-    "@rollup/rollup-darwin-x64":
-      optional: true
-    "@rollup/rollup-freebsd-arm64":
-      optional: true
-    "@rollup/rollup-freebsd-x64":
-      optional: true
-    "@rollup/rollup-linux-arm-gnueabihf":
-      optional: true
-    "@rollup/rollup-linux-arm-musleabihf":
-      optional: true
-    "@rollup/rollup-linux-arm64-gnu":
-      optional: true
-    "@rollup/rollup-linux-arm64-musl":
-      optional: true
-    "@rollup/rollup-linux-loongarch64-gnu":
-      optional: true
-    "@rollup/rollup-linux-ppc64-gnu":
-      optional: true
-    "@rollup/rollup-linux-riscv64-gnu":
-      optional: true
-    "@rollup/rollup-linux-riscv64-musl":
-      optional: true
-    "@rollup/rollup-linux-s390x-gnu":
-      optional: true
-    "@rollup/rollup-linux-x64-gnu":
-      optional: true
-    "@rollup/rollup-linux-x64-musl":
-      optional: true
-    "@rollup/rollup-win32-arm64-msvc":
-      optional: true
-    "@rollup/rollup-win32-ia32-msvc":
-      optional: true
-    "@rollup/rollup-win32-x64-msvc":
-      optional: true
-    fsevents:
-      optional: true
-  bin:
-    rollup: dist/bin/rollup
-  checksum: 10c0/ca950eb0fb550c40e0a06e9bb4f17c3b7097a3684152327569d9b20891e704ea8b20764b26d54442fc1eb00615923a191bb928087a7e23e5fa8c3c00e06680e4
-  languageName: node
-  linkType: hard
-
 "rollup@npm:^4.43.0":
   version: 4.52.3
   resolution: "rollup@npm:4.52.3"
@@ -27494,7 +27051,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.4, semver@npm:^7.6.2, semver@npm:^7.7.2":
+"semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.7.2":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
   bin:
@@ -27503,26 +27060,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.5.3":
-  version: 7.6.0
-  resolution: "semver@npm:7.6.0"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/fbfe717094ace0aa8d6332d7ef5ce727259815bd8d8815700853f4faf23aacbd7192522f0dc5af6df52ef4fa85a355ebd2f5d39f554bd028200d6cf481ab9b53
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.6.0":
-  version: 7.6.2
-  resolution: "semver@npm:7.6.2"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
-  languageName: node
-  linkType: hard
-
 "semver@npm:~7.5.4":
   version: 7.5.4
   resolution: "semver@npm:7.5.4"
@@ -31843,7 +31380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.0.0, yaml@npm:^2.8.1":
+"yaml@npm:^2.0.0, yaml@npm:^2.2.2, yaml@npm:^2.8.1":
   version: 2.8.1
   resolution: "yaml@npm:2.8.1"
   bin:
@@ -31852,13 +31389,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.2.2":
-  version: 2.3.4
-  resolution: "yaml@npm:2.3.4"
-  checksum: 10c0/cf03b68f8fef5e8516b0f0b54edaf2459f1648317fc6210391cf606d247e678b449382f4bd01f77392538429e306c7cba8ff46ff6b37cac4de9a76aff33bd9e1
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:^18.1.2":
   version: 18.1.3
   resolution: "yargs-parser@npm:18.1.3"