From cd9779c0e97fd7e4791c2a0ab89cff7cb82ada82 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 24 Jul 2024 10:38:17 -0400
Subject: [PATCH 01/14] fix(progressbar): support for gradients

background-color is now background property
---
 components/progressbar/index.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 9402114323f..fefc85b09cf 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -179,14 +179,14 @@
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		border-radius: var(--spectrum-progressbar-corner-radius);
 
-		background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
+		background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
 	}
 
 	.spectrum-ProgressBar-fill {
 		border: none;
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		transition: width 1s;
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
 	}
 }
 
@@ -226,7 +226,7 @@
 .spectrum-ProgressBar.spectrum-ProgressBar--staticWhite {
 	.spectrum-ProgressBar-fill {
 		color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-		background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
+		background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
 	}
 
 	.spectrum-ProgressBar-label,
@@ -235,7 +235,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background-color: var(--spectrum-progressbar-track-color-white);
+		background: var(--mod-progressbar-track-color-white, var(--spectrum-progressbar-track-color-white));
 	}
 }
 

From 9ed16821d3743bd1e75db81a55e6b0fc4877c9c3 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 24 Jul 2024 12:31:18 -0400
Subject: [PATCH 02/14] docs(progressbar): add trackFill and progressBarFill

both argTypes are disabled in the controls, but allow for --mod
properties to be defined for gradients.
---
 .../stories/progressbar.stories.js            |   2 +
 components/progressbar/stories/template.js    | 146 +++++++++++++++++-
 2 files changed, 146 insertions(+), 2 deletions(-)

diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 4272149d886..efff704f614 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -57,6 +57,8 @@ export default {
 			control: { type: "range", min: 0, max: 100,},
 			if: { arg: "isIndeterminate", truthy: false },
 		},
+		trackFill: { table: { disable: true } },
+		progressBarFill: { table: { disable: true } },
 		staticColor: {
 			name: "Static color",
 			type: { name: "string" },
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index dcc615dbea7..f5c33e45e3c 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -15,6 +15,8 @@ export const Template = ({
 	customWidth,
 	isIndeterminate = false,
 	label,
+	trackFill,
+	progressBarFill,
 	value,
 	customStyles = {},
 	size = "m",
@@ -48,8 +50,148 @@ export const Template = ({
 				label: isIndeterminate || typeof value === "undefined" ? "" : `${value}%`,
 				customClasses: [`${rootClass}-percentage`],
 			}, context)}
-			<div class="${rootClass}-track">
-				<div class="${rootClass}-fill" style="width: ${value}%;"></div>
+
+			<div
+				class="${rootClass}-track"
+				style="--mod-progressbar-track-color: ${ifDefined(trackFill)}">
+				<div
+					class="${rootClass}-fill"
+					style=
+						"width: ${value}%;
+						${progressBarFill !== undefined
+							? `--mod-progressbar-fill-color: ${progressBarFill}` 
+							: undefined}"
+				></div>
+			</div>
+		</div>
+`;
+
+const Sizes = (args, context) => html`
+  ${["s", "m", "l", "xl"].map((size) => html`
+    <div>
+			${Typography({
+				semantics: "heading",
+				size: "xs",
+				content: [
+					{
+						xxs: "Extra-extra-small",
+						xs: "Extra-small",
+						s: "Small",
+						m: "Medium",
+						l: "Large",
+						xl: "Extra-large",
+						xxl: "Extra-extra-large",
+					}[size],
+				],
+				customClasses: ["chromatic-ignore"],
+			}, context)}
+			${Template({ ...args, size }, context)}
+		</div>
+  `)}
+`;
+
+export const ProgressBarGroup = (args, context) => html`
+	<div style=${styleMap({
+		"display": window.isChromatic() ? "none" : "contents"
+	})}>
+		${Template(args, context)}
+	</div>
+	<div style=${styleMap({
+		"display": window.isChromatic() ? "flex" : "none",
+		"flex-direction": "column",
+		"align-items": "flex-start",
+		"gap": "32px",
+	})}>
+		<div style=${styleMap({
+			"display": window.isChromatic() ? "flex" : "none",
+			"flex-direction": "column",
+			"align-items": "flex-start",
+			"gap": "32px",
+			"border": "1px solid var(--spectrum-gray-200)",
+			"border-radius": "4px",
+			"padding": "12px",
+		})}>
+			${Template(args, context)}
+			<div>
+				${Typography({
+					semantics: "heading",
+					size: "xs",
+					content: ["Side label"],
+					customClasses: ["chromatic-ignore"],
+				}, context)}
+				${Template({
+					...args,
+					labelPosition: "side",
+				}, context)}
+			</div>
+			<div>
+				${Typography({
+					semantics: "heading",
+					size: "xs",
+					content: ["Custom width"],
+					customClasses: ["chromatic-ignore"],
+				}, context)}
+				${Template({
+					...args,
+					customWidth: "225px",
+				}, context)}
+			</div>
+			<div>
+				${Typography({
+					semantics: "heading",
+					size: "xs",
+					content: ["Indeterminate"],
+					customClasses: ["chromatic-ignore"],
+				}, context)}
+				${Template({
+					...args,
+					indeterminate: "indeterminate",
+				}, context)}
+			</div>
+		</div>
+		<div>
+			${Typography({
+				semantics: "heading",
+				size: "s",
+				content: ["Sizing"],
+				customClasses: ["chromatic-ignore"],
+			}, context)}
+			<div style=${styleMap({
+				"display": window.isChromatic() ? "flex" : "none",
+				"flex-direction": "column",
+				"align-items": "flex-start",
+				"gap": "32px",
+				"border": "1px solid var(--spectrum-gray-200)",
+				"border-radius": "4px",
+				"padding": "12px",
+			})}>
+				${Sizes(args, context)}
+			</div>
+		</div>
+		<!-- The gradient story below supports linear-gradients used by Express. Adding trackFill or progressBarFill args
+		 to any template will set the --mod-progressbar-track-color or --mod-progressbar-fill-color custom properties. -->
+		 <div>
+			${Typography({
+				semantics: "heading",
+				size: "s",
+				content: ["Gradient support"],
+				customClasses: ["chromatic-ignore"],
+			}, context)}
+			<div style=${styleMap({
+				"display": window.isChromatic() ? "flex" : "none",
+				"flex-direction": "column",
+				"align-items": "flex-start",
+				"gap": "32px",
+				"border": "1px solid var(--spectrum-gray-200)",
+				"border-radius": "4px",
+				"padding": "12px",
+			})}>
+				${Template({
+					...args,
+					trackFill: "linear-gradient(to right, hotpink, orange)",
+					progressBarFill: "linear-gradient(to left, teal, purple)",
+				}, context)}
 			</div>
 		</div>
+	</div>
 `;

From 735582ac3d90ae14882d5b943809ad9894b246e2 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 24 Jul 2024 10:39:05 -0400
Subject: [PATCH 03/14] fix(meter): support for gradients

background-color is now background property
---
 components/progressbar/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index fefc85b09cf..8ed87674510 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -117,15 +117,15 @@
 	}
 
 	&.is-positive .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
 	}
 
 	&.is-notice .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
 	}
 
 	&.is-negative .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
 	}
 }
 

From 660dc581207724bc2c672dfd77a66681652377fb Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 24 Jul 2024 13:19:31 -0400
Subject: [PATCH 04/14] docs(meter): add gradient example to chromatic preview

---
 .../progressbar/stories/meter.template.js     | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index b79fc5cc255..36e1f098e49 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -17,3 +17,74 @@ export const Template = ({
 	size,
 	...item,
 }, context);
+
+export const MeterGroup = (args, context) => html`
+	<div style=${styleMap({
+		"display": window.isChromatic() ? "none" : "contents"
+	})}>
+		${Template(args, context)}
+	</div>
+	<div style=${styleMap({
+		"display": window.isChromatic() ? "flex" : "none",
+		"flex-direction": "column",
+		"align-items": "flex-start",
+		"gap": "32px",
+	})}>
+		${[{},
+		{
+			heading: "Large",
+			size: "l",
+		},
+		{
+			heading: "Positive",
+			fill: "positive",
+		},
+		{
+			heading: "Negative",
+			fill: "negative",
+		},
+		{
+			heading: "Notice",
+			fill: "notice",
+		},
+		{
+			heading: "Text overflow",
+			fill: "notice",
+			label: "Storage space remaining for XYZ user"
+		}].map(({ heading, ...item }) => html`
+			<div>
+				${Typography({
+					semantics: "heading",
+					size: "xs",
+					content: [heading],
+				}, context)}
+				${Template({
+					...args,
+					...item,
+				}, context)}
+			</div>
+		`)}
+
+		<!-- The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. -->
+		 <div>
+			${Typography({
+				semantics: "heading",
+				size: "s",
+				content: ["Gradient support"],
+				customClasses: ["chromatic-ignore"],
+			}, context)}
+			<div style=${styleMap({
+				"display": window.isChromatic() ? "flex" : "none",
+				"flex-direction": "column",
+				"align-items": "flex-start",
+				"gap": "32px",
+			})}>
+				${Template({
+					...args,
+					trackFill: "linear-gradient(to right, hotpink, orange)",
+					progressBarFill: "linear-gradient(to left, teal, purple)",
+				}, context)}
+			</div>
+		</div>
+	</div>
+`;

From 6da16dcbebcf44ea0c14b145e91c28fed717e88e Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Thu, 25 Jul 2024 10:45:48 -0400
Subject: [PATCH 05/14] chore(progressbar): create changeset

---
 .changeset/bright-zoos-grab.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/bright-zoos-grab.md

diff --git a/.changeset/bright-zoos-grab.md b/.changeset/bright-zoos-grab.md
new file mode 100644
index 00000000000..030c2558803
--- /dev/null
+++ b/.changeset/bright-zoos-grab.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/progressbar": patch
+---
+
+Reverts the `background-color` property to `background` to support the use of CSS gradients. Gradient support stories were added to the meter and progress bar components within their Chromatic testing previews to ensure that we continue to support gradients by covering them in our visual regression tests.

From d6d24900b839d467831b5aba4e8c54e4318bd71e Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Fri, 26 Jul 2024 14:48:04 -0400
Subject: [PATCH 06/14] fix(progressbar): enforce staticWhite track color

this removes the previously created mod property that could override the
staticWhite background-color, which is in contradiction to how the CSS
should behave.
---
 components/progressbar/index.css           | 2 +-
 components/progressbar/stories/template.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 8ed87674510..b732479537a 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -235,7 +235,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background: var(--mod-progressbar-track-color-white, var(--spectrum-progressbar-track-color-white));
+		background-color: var(--spectrum-progressbar-track-color-white);
 	}
 }
 
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index f5c33e45e3c..5ccfc1150ea 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -53,7 +53,8 @@ export const Template = ({
 
 			<div
 				class="${rootClass}-track"
-				style="--mod-progressbar-track-color: ${ifDefined(trackFill)}">
+				style="--mod-progressbar-track-color: ${staticColor !== "white" ? ifDefined(trackFill) : undefined}"
+			>
 				<div
 					class="${rootClass}-fill"
 					style=

From a4526156e4b7847fbb8914358cc96d3467f013cc Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Tue, 6 Aug 2024 11:37:43 -0400
Subject: [PATCH 07/14] fix(progressbar,meter): use background property for
 static white track

---
 components/progressbar/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index b732479537a..d7eb060eb8c 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -235,7 +235,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background-color: var(--spectrum-progressbar-track-color-white);
+		background: var(--spectrum-progressbar-track-color-white);
 	}
 }
 

From ab523e0a7f7e738adff00adf77f06b6bb9a801dc Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Mon, 5 Aug 2024 13:36:08 -0400
Subject: [PATCH 08/14] docs(meter,progressbar): remove html comment in favor
 for JSdoc comment

---
 components/progressbar/stories/meter.template.js | 3 +--
 components/progressbar/stories/template.js       | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index 36e1f098e49..aa5fb65f4d5 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -18,6 +18,7 @@ export const Template = ({
 	...item,
 }, context);
 
+/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. */
 export const MeterGroup = (args, context) => html`
 	<div style=${styleMap({
 		"display": window.isChromatic() ? "none" : "contents"
@@ -64,8 +65,6 @@ export const MeterGroup = (args, context) => html`
 				}, context)}
 			</div>
 		`)}
-
-		<!-- The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. -->
 		 <div>
 			${Typography({
 				semantics: "heading",
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 5ccfc1150ea..97de19f2169 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -91,6 +91,7 @@ const Sizes = (args, context) => html`
   `)}
 `;
 
+/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. */
 export const ProgressBarGroup = (args, context) => html`
 	<div style=${styleMap({
 		"display": window.isChromatic() ? "none" : "contents"
@@ -169,8 +170,6 @@ export const ProgressBarGroup = (args, context) => html`
 				${Sizes(args, context)}
 			</div>
 		</div>
-		<!-- The gradient story below supports linear-gradients used by Express. Adding trackFill or progressBarFill args
-		 to any template will set the --mod-progressbar-track-color or --mod-progressbar-fill-color custom properties. -->
 		 <div>
 			${Typography({
 				semantics: "heading",

From ab465c82673b3e5073b557257c36dcd0e636fa5a Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Tue, 6 Aug 2024 11:39:31 -0400
Subject: [PATCH 09/14] chore(progressbar,meter): use customStyles instead of
 new controls

- also uses existing map function to display gradient story
---
 .../progressbar/stories/meter.template.js     | 29 ++++++-------------
 .../stories/progressbar.stories.js            |  2 --
 components/progressbar/stories/template.js    | 15 ++++------
 3 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index aa5fb65f4d5..c1b95800c7a 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -4,6 +4,7 @@ import "../index.css";
 
 export const Template = ({
 	customClasses = [],
+	customStyles = {},
 	fill,
 	size = "s",
 	...item
@@ -15,6 +16,7 @@ export const Template = ({
 		typeof fill !== "undefined" ? `is-${fill}` : null,
 	].filter(Boolean),
 	size,
+	customStyles,
 	...item,
 }, context);
 
@@ -52,6 +54,13 @@ export const MeterGroup = (args, context) => html`
 			heading: "Text overflow",
 			fill: "notice",
 			label: "Storage space remaining for XYZ user"
+		},
+		{
+			heading: "Gradient support", 
+			customStyles: {
+				"--mod-progressbar-fill-color": "linear-gradient(to left, teal, purple)",
+				"--mod-progressbar-track-color": "linear-gradient(to right, hotpink, orange)",
+			}
 		}].map(({ heading, ...item }) => html`
 			<div>
 				${Typography({
@@ -65,25 +74,5 @@ export const MeterGroup = (args, context) => html`
 				}, context)}
 			</div>
 		`)}
-		 <div>
-			${Typography({
-				semantics: "heading",
-				size: "s",
-				content: ["Gradient support"],
-				customClasses: ["chromatic-ignore"],
-			}, context)}
-			<div style=${styleMap({
-				"display": window.isChromatic() ? "flex" : "none",
-				"flex-direction": "column",
-				"align-items": "flex-start",
-				"gap": "32px",
-			})}>
-				${Template({
-					...args,
-					trackFill: "linear-gradient(to right, hotpink, orange)",
-					progressBarFill: "linear-gradient(to left, teal, purple)",
-				}, context)}
-			</div>
-		</div>
 	</div>
 `;
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index efff704f614..4272149d886 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -57,8 +57,6 @@ export default {
 			control: { type: "range", min: 0, max: 100,},
 			if: { arg: "isIndeterminate", truthy: false },
 		},
-		trackFill: { table: { disable: true } },
-		progressBarFill: { table: { disable: true } },
 		staticColor: {
 			name: "Static color",
 			type: { name: "string" },
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 97de19f2169..8636eacb71d 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -15,8 +15,6 @@ export const Template = ({
 	customWidth,
 	isIndeterminate = false,
 	label,
-	trackFill,
-	progressBarFill,
 	value,
 	customStyles = {},
 	size = "m",
@@ -53,15 +51,10 @@ export const Template = ({
 
 			<div
 				class="${rootClass}-track"
-				style="--mod-progressbar-track-color: ${staticColor !== "white" ? ifDefined(trackFill) : undefined}"
 			>
 				<div
 					class="${rootClass}-fill"
-					style=
-						"width: ${value}%;
-						${progressBarFill !== undefined
-							? `--mod-progressbar-fill-color: ${progressBarFill}` 
-							: undefined}"
+					style="width: ${value}%"
 				></div>
 			</div>
 		</div>
@@ -188,8 +181,10 @@ export const ProgressBarGroup = (args, context) => html`
 			})}>
 				${Template({
 					...args,
-					trackFill: "linear-gradient(to right, hotpink, orange)",
-					progressBarFill: "linear-gradient(to left, teal, purple)",
+					customStyles: {
+						"--mod-progressbar-fill-color": "linear-gradient(to left, teal, purple)",
+						"--mod-progressbar-track-color": "linear-gradient(to right, hotpink, orange)",
+					},
 				}, context)}
 			</div>
 		</div>

From d2545fd78d4210a767a64ed97f525dfe45adc650 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt
 <69602589+marissahuysentruyt@users.noreply.github.com>
Date: Tue, 13 Aug 2024 11:22:03 -0400
Subject: [PATCH 10/14] chore(progressbar): use styleMap and inline-size for
 width

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
---
 components/progressbar/stories/template.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 8636eacb71d..35e36ee4047 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -54,7 +54,7 @@ export const Template = ({
 			>
 				<div
 					class="${rootClass}-fill"
-					style="width: ${value}%"
+					style=${styleMap({ "inline-size": `${value}%` })}
 				></div>
 			</div>
 		</div>

From 5b21db004b2c379527804c50bfcbcc839e29aac0 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 14 Aug 2024 09:20:46 -0400
Subject: [PATCH 11/14] chore(meter,progressbar): revert customStyles to
 separate args

instead of setting the full mod custom property within customStyles
(i.e. customStyles: {"--mod-progressbar-fill-color": "linear-gradient(to
left, teal, purple)"}), revert back to separate arguments (i.e. trackFill
and progressBarFill). This way we can update naming or the format in one
place
---
 components/progressbar/stories/meter.template.js   |  6 ++----
 .../progressbar/stories/progressbar.stories.js     |  2 ++
 components/progressbar/stories/template.js         | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index c1b95800c7a..1f774fa2892 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -57,10 +57,8 @@ export const MeterGroup = (args, context) => html`
 		},
 		{
 			heading: "Gradient support", 
-			customStyles: {
-				"--mod-progressbar-fill-color": "linear-gradient(to left, teal, purple)",
-				"--mod-progressbar-track-color": "linear-gradient(to right, hotpink, orange)",
-			}
+			trackFill: "linear-gradient(to right, hotpink, orange)",
+			progressBarFill: "linear-gradient(to left, teal, purple)",
 		}].map(({ heading, ...item }) => html`
 			<div>
 				${Typography({
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 4272149d886..f9f07f74d27 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -57,6 +57,8 @@ export default {
 			control: { type: "range", min: 0, max: 100,},
 			if: { arg: "isIndeterminate", truthy: false },
 		},
+		trackFill: { table: { disable: true }},
+		progressBarFill: { table: { disable: true }},
 		staticColor: {
 			name: "Static color",
 			type: { name: "string" },
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 35e36ee4047..99507b28dbd 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -16,6 +16,8 @@ export const Template = ({
 	isIndeterminate = false,
 	label,
 	value,
+	trackFill,
+	progressBarFill,
 	customStyles = {},
 	size = "m",
 } = {}, context = {}) => html`
@@ -31,6 +33,8 @@ export const Template = ({
 			style=${styleMap({
 				"width": customWidth,
 				...customStyles,
+				"--mod-progressbar-track-color": trackFill !== undefined ? trackFill : undefined,
+				"--mod-progressbar-fill-color": progressBarFill !== undefined ? progressBarFill : undefined,
 			})}
 			value=${ifDefined(value ? `${value}%` : undefined)}
 			aria-valuenow=${ifDefined(value ? `${value}%` : undefined)}
@@ -49,9 +53,7 @@ export const Template = ({
 				customClasses: [`${rootClass}-percentage`],
 			}, context)}
 
-			<div
-				class="${rootClass}-track"
-			>
+			<div class="${rootClass}-track">
 				<div
 					class="${rootClass}-fill"
 					style=${styleMap({ "inline-size": `${value}%` })}
@@ -181,10 +183,8 @@ export const ProgressBarGroup = (args, context) => html`
 			})}>
 				${Template({
 					...args,
-					customStyles: {
-						"--mod-progressbar-fill-color": "linear-gradient(to left, teal, purple)",
-						"--mod-progressbar-track-color": "linear-gradient(to right, hotpink, orange)",
-					},
+					trackFill: "linear-gradient(to right, hotpink, orange)",
+					progressBarFill: "linear-gradient(to left, teal, purple)",
 				}, context)}
 			</div>
 		</div>

From d9318ee6ca6af23e75a01c66a3a01541342cfb28 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Mon, 19 Aug 2024 17:22:13 -0400
Subject: [PATCH 12/14] docs(meter,progressbar): rebase fixes

---
 .../progressbar/stories/meter.template.js     |  57 --------
 components/progressbar/stories/meter.test.js  |   8 ++
 .../progressbar/stories/progressbar.test.js   |  10 +-
 components/progressbar/stories/template.js    | 133 +-----------------
 4 files changed, 19 insertions(+), 189 deletions(-)

diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index 1f774fa2892..b79fc5cc255 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -4,7 +4,6 @@ import "../index.css";
 
 export const Template = ({
 	customClasses = [],
-	customStyles = {},
 	fill,
 	size = "s",
 	...item
@@ -16,61 +15,5 @@ export const Template = ({
 		typeof fill !== "undefined" ? `is-${fill}` : null,
 	].filter(Boolean),
 	size,
-	customStyles,
 	...item,
 }, context);
-
-/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. */
-export const MeterGroup = (args, context) => html`
-	<div style=${styleMap({
-		"display": window.isChromatic() ? "none" : "contents"
-	})}>
-		${Template(args, context)}
-	</div>
-	<div style=${styleMap({
-		"display": window.isChromatic() ? "flex" : "none",
-		"flex-direction": "column",
-		"align-items": "flex-start",
-		"gap": "32px",
-	})}>
-		${[{},
-		{
-			heading: "Large",
-			size: "l",
-		},
-		{
-			heading: "Positive",
-			fill: "positive",
-		},
-		{
-			heading: "Negative",
-			fill: "negative",
-		},
-		{
-			heading: "Notice",
-			fill: "notice",
-		},
-		{
-			heading: "Text overflow",
-			fill: "notice",
-			label: "Storage space remaining for XYZ user"
-		},
-		{
-			heading: "Gradient support", 
-			trackFill: "linear-gradient(to right, hotpink, orange)",
-			progressBarFill: "linear-gradient(to left, teal, purple)",
-		}].map(({ heading, ...item }) => html`
-			<div>
-				${Typography({
-					semantics: "heading",
-					size: "xs",
-					content: [heading],
-				}, context)}
-				${Template({
-					...args,
-					...item,
-				}, context)}
-			</div>
-		`)}
-	</div>
-`;
diff --git a/components/progressbar/stories/meter.test.js b/components/progressbar/stories/meter.test.js
index e86c5810277..74d08548fa6 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/progressbar/stories/meter.test.js
@@ -20,5 +20,13 @@ export const MeterGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
+		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
+		*/
+		{
+			testHeading: "Gradient support", 
+			trackFill: "linear-gradient(to right, hotpink, orange)",
+			progressBarFill: "linear-gradient(to left, teal, purple)",
+		}
 	],
 });
diff --git a/components/progressbar/stories/progressbar.test.js b/components/progressbar/stories/progressbar.test.js
index 657777e609d..aad8b120026 100644
--- a/components/progressbar/stories/progressbar.test.js
+++ b/components/progressbar/stories/progressbar.test.js
@@ -15,11 +15,19 @@ export const ProgressBarGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
+		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
+		*/
+		{
+			testHeading: "Gradient support",
+			trackFill: "linear-gradient(to right, hotpink, orange)",
+			progressBarFill: "linear-gradient(to left, teal, purple)",
+		},
 	],
 	stateData: [
 		{
 			testHeading: "Indeterminate",
-			indeterminate: true,
+			isIndeterminate: true,
 			value: undefined,
 		}
 	],
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 99507b28dbd..dd1176168ab 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -33,8 +33,8 @@ export const Template = ({
 			style=${styleMap({
 				"width": customWidth,
 				...customStyles,
-				"--mod-progressbar-track-color": trackFill !== undefined ? trackFill : undefined,
-				"--mod-progressbar-fill-color": progressBarFill !== undefined ? progressBarFill : undefined,
+				"--mod-progressbar-track-color": trackFill ? trackFill : undefined,
+				"--mod-progressbar-fill-color": progressBarFill ? progressBarFill : undefined,
 			})}
 			value=${ifDefined(value ? `${value}%` : undefined)}
 			aria-valuenow=${ifDefined(value ? `${value}%` : undefined)}
@@ -61,132 +61,3 @@ export const Template = ({
 			</div>
 		</div>
 `;
-
-const Sizes = (args, context) => html`
-  ${["s", "m", "l", "xl"].map((size) => html`
-    <div>
-			${Typography({
-				semantics: "heading",
-				size: "xs",
-				content: [
-					{
-						xxs: "Extra-extra-small",
-						xs: "Extra-small",
-						s: "Small",
-						m: "Medium",
-						l: "Large",
-						xl: "Extra-large",
-						xxl: "Extra-extra-large",
-					}[size],
-				],
-				customClasses: ["chromatic-ignore"],
-			}, context)}
-			${Template({ ...args, size }, context)}
-		</div>
-  `)}
-`;
-
-/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. */
-export const ProgressBarGroup = (args, context) => html`
-	<div style=${styleMap({
-		"display": window.isChromatic() ? "none" : "contents"
-	})}>
-		${Template(args, context)}
-	</div>
-	<div style=${styleMap({
-		"display": window.isChromatic() ? "flex" : "none",
-		"flex-direction": "column",
-		"align-items": "flex-start",
-		"gap": "32px",
-	})}>
-		<div style=${styleMap({
-			"display": window.isChromatic() ? "flex" : "none",
-			"flex-direction": "column",
-			"align-items": "flex-start",
-			"gap": "32px",
-			"border": "1px solid var(--spectrum-gray-200)",
-			"border-radius": "4px",
-			"padding": "12px",
-		})}>
-			${Template(args, context)}
-			<div>
-				${Typography({
-					semantics: "heading",
-					size: "xs",
-					content: ["Side label"],
-					customClasses: ["chromatic-ignore"],
-				}, context)}
-				${Template({
-					...args,
-					labelPosition: "side",
-				}, context)}
-			</div>
-			<div>
-				${Typography({
-					semantics: "heading",
-					size: "xs",
-					content: ["Custom width"],
-					customClasses: ["chromatic-ignore"],
-				}, context)}
-				${Template({
-					...args,
-					customWidth: "225px",
-				}, context)}
-			</div>
-			<div>
-				${Typography({
-					semantics: "heading",
-					size: "xs",
-					content: ["Indeterminate"],
-					customClasses: ["chromatic-ignore"],
-				}, context)}
-				${Template({
-					...args,
-					indeterminate: "indeterminate",
-				}, context)}
-			</div>
-		</div>
-		<div>
-			${Typography({
-				semantics: "heading",
-				size: "s",
-				content: ["Sizing"],
-				customClasses: ["chromatic-ignore"],
-			}, context)}
-			<div style=${styleMap({
-				"display": window.isChromatic() ? "flex" : "none",
-				"flex-direction": "column",
-				"align-items": "flex-start",
-				"gap": "32px",
-				"border": "1px solid var(--spectrum-gray-200)",
-				"border-radius": "4px",
-				"padding": "12px",
-			})}>
-				${Sizes(args, context)}
-			</div>
-		</div>
-		 <div>
-			${Typography({
-				semantics: "heading",
-				size: "s",
-				content: ["Gradient support"],
-				customClasses: ["chromatic-ignore"],
-			}, context)}
-			<div style=${styleMap({
-				"display": window.isChromatic() ? "flex" : "none",
-				"flex-direction": "column",
-				"align-items": "flex-start",
-				"gap": "32px",
-				"border": "1px solid var(--spectrum-gray-200)",
-				"border-radius": "4px",
-				"padding": "12px",
-			})}>
-				${Template({
-					...args,
-					trackFill: "linear-gradient(to right, hotpink, orange)",
-					progressBarFill: "linear-gradient(to left, teal, purple)",
-				}, context)}
-			</div>
-		</div>
-	</div>
-`;

From 502b5413b55b4b59becd54d00a32c2e8bb8aa2e8 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Mon, 19 Aug 2024 17:24:32 -0400
Subject: [PATCH 13/14] chore(meter): import meter.template instead of progress
 bar template

---
 components/progressbar/stories/meter.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/progressbar/stories/meter.test.js b/components/progressbar/stories/meter.test.js
index 74d08548fa6..32808ae31fd 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/progressbar/stories/meter.test.js
@@ -1,5 +1,5 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./template.js";
+import { Template } from "./meter.template.js";
 
 export const MeterGroup = Variants({
 	Template,

From bafdfd090d965a4c1fd5e77c6887c96da7e0d2b3 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Fri, 23 Aug 2024 09:19:08 -0400
Subject: [PATCH 14/14] chore(progressbar): shorten trackFill and
 progressBarFill assignments

---
 components/progressbar/stories/template.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index dd1176168ab..a7f36ce4dca 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -33,8 +33,8 @@ export const Template = ({
 			style=${styleMap({
 				"width": customWidth,
 				...customStyles,
-				"--mod-progressbar-track-color": trackFill ? trackFill : undefined,
-				"--mod-progressbar-fill-color": progressBarFill ? progressBarFill : undefined,
+				"--mod-progressbar-track-color": trackFill,
+				"--mod-progressbar-fill-color": progressBarFill,
 			})}
 			value=${ifDefined(value ? `${value}%` : undefined)}
 			aria-valuenow=${ifDefined(value ? `${value}%` : undefined)}