add custom property for progress bar shadows

src/components/progress-bar/progress-bar.component.ts

@@ -24,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-color - The color of the indicator.
  * @cssproperty --label-color - The color of the label.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
  */
 export default class WaProgressBar extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/progress-bar/progress-bar.styles.ts

@@ -9,6 +9,7 @@ export default css`
     --track-color: var(--wa-color-neutral-fill-highlight);
     --indicator-color: var(--wa-color-brand-spot);
     --label-color: var(--wa-color-brand-text-on-spot);
+    --box-shadow: none;
 
     display: block;
   }
@@ -18,7 +19,7 @@ export default css`
     background-color: var(--track-color);
     height: var(--height);
     border-radius: var(--wa-corners-pill);
-    box-shadow: var(--wa-shadow-inset);
+    box-shadow: var(--box-shadow);
     overflow: hidden;
   }
 

src/themes/depth_2_chunky.css

@@ -90,3 +90,9 @@ wa-textarea {
   }
 }
 /* #endregion */
+
+/* #region Progress bar */
+wa-progress-bar {
+  --box-shadow: var(--wa-shadow-inset);
+}
+/* #endregion */

src/themes/depth_3_punchy.css

@@ -75,3 +75,9 @@ wa-switch {
     inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
 }
 /* #endregion */
+
+/* #region Progress bar */
+wa-progress-bar {
+  --box-shadow: var(--wa-shadow-inset);
+}
+/* #endregion */

src/themes/depth_4_glossy.css

@@ -266,3 +266,9 @@ wa-switch {
     inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
 }
 /* #endregion */
+
+/* #region Progress bar */
+wa-progress-bar {
+  --box-shadow: var(--wa-shadow-inset);
+}
+/* #endregion */