docs(meter): let meter use its rootclass in storybook

Meter's Storybook template was using the rootClass for progress bar,
rather than its own rootClass. It was set up this way because of the
way the two components are housed together, and meter primarily just
uses ProgressBar, with some added classes.

This value not being unique made it difficult to compare and match up
the value of rootClass in the packageJson spectrum data to the actual
rootClass defined in the story files default args.

components/progressbar/stories/meter.stories.js

@@ -1,10 +1,10 @@
-import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Sizes } from "@spectrum-css/preview/decorators";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
+import { FillGroup, Template } from "./meter.template.js";
 import { MeterGroup } from "./meter.test.js";
 import { default as ProgressBar } from "./progressbar.stories";
-import { FillGroup, Template } from "./meter.template.js";
 
 /**
  * The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
@@ -35,6 +35,7 @@ export default {
 	},
 	args: {
 		...ProgressBar.args,
+		rootClass: "spectrum-Meter",
 		size: "l",
 		label: "Storage space",
 	},

components/progressbar/stories/meter.template.js

@@ -1,22 +1,32 @@
 import { Container } from "@spectrum-css/preview/decorators";
-import { Template as ProgressBar } from "./template.js";
 import { html } from "lit";
+import { capitalize } from "lodash-es";
+import { Template as ProgressBar } from "./template.js";
 
 import "../index.css";
 
 export const Template = ({
 	customClasses = [],
 	fill,
 	size = "s",
+	rootClass = "spectrum-Meter",
+	staticColor,
 	...item
 } = {}, context = {}) => ProgressBar({
 	customClasses: [
-		...customClasses,
-		"spectrum-Meter",
-		typeof size !== "undefined" ? `spectrum-Meter--size${size.toUpperCase()}` : null,
+		rootClass,
+		typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
 		typeof fill !== "undefined" ? `is-${fill}` : null,
+		/*
+		 * The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
+		 * `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
+		 * colors when looking at the element using its `rootClass` in our decorators.
+		 */
+		typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
+		...customClasses,
 	].filter(Boolean),
 	size,
+	staticColor,
 	...item,
 }, context);