fix(slider ramp): correct handle and ramp vertical alignment (#3154)

* fix(slider ramp): correct handle and ramp vertical alignment

* fix(slider ramp): correct handle and ramp vertical alignment

* fix(slider ramp): restore ramp margin

.changeset/rude-rivers-crash.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/slider": minor
+---
+
+This applies a flex layout to the spectrum slider controls to consistently align the enclosed handle and ramp, while also removing the margins that might otherwise interfere with alignment. This aims to resolve the issues with the calc-based approach that exhibited variations in vertical alignment.

components/slider/index.css

@@ -116,6 +116,10 @@
 	min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
 
 	user-select: none;
+
+	&:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) {
+		margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
+	}
 }
 
 .spectrum-Slider--sideLabel {
@@ -152,6 +156,11 @@
 	position: relative;
 	z-index: auto;
 
+	&:not(:has(.spectrum-Slider-ticks)) {
+		display: flex;
+		align-items: center;
+	}
+
 	/* These calculations prevent the track from spilling outside of the control */
 	inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
 	margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
@@ -284,7 +293,6 @@
 }
 
 .spectrum-Slider-ramp {
-	margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
 	block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
 
 	position: absolute;
@@ -412,6 +420,7 @@
 	&:lang(ko) {
 		line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
 	}
+
 }
 
 .spectrum-Slider-label {

components/slider/metadata/metadata.json

@@ -27,6 +27,7 @@
     ".spectrum-Slider--tick .spectrum-Slider-handle",
     ".spectrum-Slider--tick .spectrum-Slider-tickLabel",
     ".spectrum-Slider-controls",
+    ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))",
     ".spectrum-Slider-fill",
     ".spectrum-Slider-fill--right",
     ".spectrum-Slider-fill:before",
@@ -89,6 +90,7 @@
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range).js-focus-within .spectrum-Slider-controls[focus-within]",
+    ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
     "[dir=\"rtl\"] .spectrum-Slider",
     "[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before"
   ],