fix(slider): offset variant border radius bug fix (#3611)

* feat(slider): offset variant border radius bug fix

* feat(slider): fix range slider

Author: aramos-adobe

.changeset/rude-jokes-judge.md

@@ -0,0 +1,9 @@
+---
+"@spectrum-css/slider": minor
+---
+
+# Slider: offset variant track fix
+
+The border radius styles were not being applied to the second instance of the `spectrum-Slider-track` when the offset variant is activated. The reason for this bug is because when the `offset` is selected, the template structure changes as `spectrum-Slider-fill` gets added to the slider.
+
+Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue.

components/slider/dist/metadata.json

@@ -62,6 +62,7 @@
     ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle",
     ".spectrum-Slider-track",
     ".spectrum-Slider-track ~ .spectrum-Slider-track",
+    ".spectrum-Slider-track ~ .spectrum-Slider-track:before",
     ".spectrum-Slider-track:before",
     ".spectrum-Slider-track:first-of-type:before",
     ".spectrum-Slider-track:last-of-type:before",

components/slider/index.css

@@ -537,6 +537,12 @@
 	&::before {
 		background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
 	}
+
+	/* Styles below are applied to the sibling spectrum-Slider-track when filled-offset variant is activated */
+	& ~ .spectrum-Slider-track::before {
+		border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+		border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+	}
 }
 
 /* All variants other than filled-offset get a new track color for highcontrast mode */
@@ -621,6 +627,8 @@
 	.spectrum-Slider-track {
 		&:not(:first-of-type, :last-of-type)::before {
 			background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+			border-start-end-radius: 0;
+			border-end-end-radius: 0;
 		}
 	}
 }