chore(swatch+swatchgroup): add hovered hover + keyboard focus controls for add swatch

Author: cdransf

components/swatch/dist/metadata.json

@@ -95,6 +95,7 @@
     "--spectrum-swatch-icon-border-color",
     "--spectrum-swatch-icon-color",
     "--spectrum-swatch-inner-border-color-selected",
+    "--spectrum-swatch-rectangle-width-multiplier",
     "--spectrum-swatch-size",
     "--spectrum-swatch-size-extra-small",
     "--spectrum-swatch-size-large",

components/swatch/index.css

@@ -311,7 +311,7 @@
 }
 
 .spectrum-Swatch--rectangle {
-	inline-size: calc(var(--spectrum-swatch-size) * var(--spectrun-swatch-rectangle-width-multiplier));
+	inline-size: calc(var(--spectrum-swatch-size) * var(--spectrum-swatch-rectangle-width-multiplier));
 }
 
 /* Variant: Rounding - Full */

components/swatch/stories/swatch.test.js

@@ -36,6 +36,16 @@ export const Swatches = (args, context) => {
 				...args,
 				isAddSwatch: true,
 			}, context),
+			Template({
+				...args,
+				isAddSwatch: true,
+				isHover: true,
+			}, context),
+			Template({
+				...args,
+				isAddSwatch: true,
+				isKeyboardFocus: true,
+			}, context),
 			Template({
 				...args,
 				swatchColor: undefined,