chore(progress-bar): add deprecation warning for over-background

Author: cdransf

.changeset/easy-jobs-brush.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/progress-bar': patch
+---
+
+**Added**: Deprecation warning for the over-background attribute.

packages/progress-bar/README.md

@@ -1,12 +1,3 @@
-<sp-alert-banner open variant="info">
-    <div class="spectrum-InLineAlert-header">
-        <span>Deprecated</span>
-    </div>
-    <div class="spectrum-InLineAlert-content">
-        The <code>over-background</code> attribute has been deprecated and will be removed in a future release. Use <code>static-color="white"</code> instead.
-    </div>
-</sp-alert-banner>
-
 ## Overview
 
 An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a blue fill that shows the progress.
@@ -151,7 +142,7 @@ A progress bar can be either determinate or indeterminate as signified by `[inde
 The above `sp-progress-bar` also leverages the `aria-label` attribute in place of the `label` attribute in ensure that the element is labelled correctly without that label appearing visibly in the UI.
 
 </sp-tab-panel>
-<sp-tab value="side-label">Side Label</sp-tab>
+<sp-tab value="side-label">Side label</sp-tab>
 <sp-tab-panel value="side-label">
 
 A progress bar can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean `[side-label]` attribute to define where this content should appear.

packages/progress-bar/package.json

@@ -71,6 +71,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
+    "deprecationNotice": "The over-background attribute has been deprecated and will be removed in a future release. Use static-color='white' instead.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js"

packages/progress-bar/src/ProgressBar.ts

@@ -146,6 +146,15 @@ export class ProgressBar extends SizedMixin(
         }
 
         if (window.__swc.DEBUG) {
+            if (changes.has('over-background')) {
+                window.__swc.warn(
+                    this,
+                    `The "over-background" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#variants',
+                    { level: 'deprecation' }
+                );
+            }
+
             if (
                 !this.label &&
                 !this.getAttribute('aria-label') &&