chore(colorwheel): fix inset borders + improve comments

Author: cdransf

components/colorwheel/dist/metadata.json

@@ -7,7 +7,6 @@
     ".spectrum-ColorWheel-colorarea-container",
     ".spectrum-ColorWheel-handle",
     ".spectrum-ColorWheel-inner",
-    ".spectrum-ColorWheel-inner:before",
     ".spectrum-ColorWheel-slider",
     ".spectrum-ColorWheel-wheel",
     ".spectrum-ColorWheel-wheel.is-disabled",
@@ -16,6 +15,7 @@
     ".spectrum-ColorWheel.is-disabled:before",
     ".spectrum-ColorWheel.is-dragged",
     ".spectrum-ColorWheel.is-focused",
+    ".spectrum-ColorWheel:after",
     ".spectrum-ColorWheel:before",
     "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
   ],

components/colorwheel/index.css

@@ -41,7 +41,11 @@
 	user-select: none;
 	cursor: default;
 
-	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the exterior edge of the colorwheel. The size is reduced and positioning adjusted to create the border effect. */
+	/**
+	 * Color wheel exterior border
+	 * - Calcs for `inline-size` and `block-size` subtract 4 times the component's border width
+	 * (to account for the inset width of the exterior border) from the component's width.
+	 */
 	&::before {
 		inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
 		block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
@@ -56,6 +60,22 @@
 		z-index: 1;
 	}
 
+	/**
+	 * Color wheel interior border
+	 * - Calcs for `inset` 2 times the component's border width from the
+	 * track width (to account for the inset width of the interior border)
+	 */
+	&::after {
+		inset: calc(var(--spectrum-colorwheel-track-width) - (calc(2 * var(--spectrum-colorwheel-border-width))));
+		content: "";
+		position: absolute;
+		border-width: var(--spectrum-colorwheel-border-width);
+		border-style: solid;
+		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-radius: 100%;
+		z-index: 1;
+	}
+
 	&.is-focused {
 		z-index: 2;
 	}
@@ -85,20 +105,6 @@
 	inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	margin: auto;
-
-	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the interior edge of the colorwheel. The size is increased and positioning adjusted to create the border effect. */
-	&::before {
-		inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
-		block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
-		inset: calc(-1 * var(--spectrum-colorwheel-border-width));
-		content: "";
-		position: absolute;
-		border-width: var(--spectrum-colorwheel-border-width);
-		border-style: solid;
-		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
-		border-radius: 100%;
-		z-index: 1;
-	}
 }
 
 .spectrum-ColorWheel-colorarea-container {