From d436bc3469ee11dea703a5ff6207200b02fb1784 Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 21 Mar 2023 12:11:47 -0400
Subject: [PATCH 01/52] feat(slider!): slider core tokens (CSS-177)

---
 components/slider/gulpfile.js         |   2 +-
 components/slider/index.css           | 555 ++++++++++++++++++--------
 components/slider/metadata/slider.yml | 122 +++++-
 components/slider/package.json        |   8 +-
 components/slider/themes/express.css  |  34 ++
 components/slider/themes/spectrum.css |  36 ++
 6 files changed, 574 insertions(+), 183 deletions(-)
 create mode 100644 components/slider/themes/express.css
 create mode 100644 components/slider/themes/spectrum.css

diff --git a/components/slider/gulpfile.js b/components/slider/gulpfile.js
index 3d2a7fa4e41..a225c256bfc 100644
--- a/components/slider/gulpfile.js
+++ b/components/slider/gulpfile.js
@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');
\ No newline at end of file
diff --git a/components/slider/index.css b/components/slider/index.css
index 231d51ea51f..4a7bc5a9caa 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -10,63 +10,95 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../vars/css/components/spectrum-slider.css";
 
+
+/* missing tokens for variant with Tick, also need t-shirt sizing */
+.spectrum--medium {
+  --spectrum-slider-tick-mark-height: 10px;
+  /* --spectrum-global-dimension-size-125 */
+  --spectrum-slider-tick-mark-width: 2px;
+  /* --spectrum-global-dimension-size-25: */
+  --spectrum-slider-tick-mark-border-radius: 2px;
+  /* --spectrum-global-dimension-size-25 2px for Spectrum,   --spectrum-global-dimension-size-10 1px for Express */
+  --spectrum-slider-ramp-track-height: 16px;
+  /* dimension-size-200 */
+}
+
+.spectrum--large {
+  --spectrum-slider-tick-mark-height: 13px;
+  --spectrum-slider-tick-mark-width: 2px;
+  --spectrum-slider-tick-mark-border-radius: 2px;
+  --spectrum-slider-ramp-track-height: 20px;
+  /* dimension-size-200 */
+}
+
+.spectrum-Slider--sizeS {
+
+  --spectrum-slider-handle-size: var(--mod-slider-handle-size-small, var(--spectrum-slider-handle-size-small));
+  --spectrum-slider-control-height: var(--mod-slider-control-height-small, var(--spectrum-slider-control-height-small));
+  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-small, var(--spectrum-slider-bottom-to-handle-small));
+  --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+}
+
+.spectrum-Slider--sizeM {
+
+  --spectrum-slider-handle-size: var(--mod-slider-handle-size-medium, var(--spectrum-slider-handle-size-medium));
+  --spectrum-slider-control-height: var(--mod-slider-control-height-medium, var(--spectrum-slider-control-height-medium));
+  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-medium, var(--spectrum-slider-bottom-to-handle-medium));
+  --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+}
+
+.spectrum-Slider--sizeL {
+
+  --spectrum-slider-handle-size: var(--mod-slider-handle-size-large, var(--spectrum-slider-handle-size-large));
+  --spectrum-slider-control-height: var(--mod-slider-control-height-large, var(--spectrum-slider-control-height-large));
+  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-large, var(--spectrum-slider-bottom-to-handle-large));
+  --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 2);
+
+
+}
+
+.spectrum-Slider--sizeXL {
+
+  --spectrum-slider-handle-size: var(--mod-slider-handle-size-extra-large, var(--spectrum-slider-handle-size-extra-large));
+  --spectrum-slider-control-height: var(--mod-slider-control-height-extra-large, var(--spectrum-slider-control-height-extra-large));
+  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-extra-large, var(--spectrum-slider-bottom-to-handle-extra-large));
+  --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 4);
+
+}
 .spectrum-Slider {
-  @remapvars {
-    find: --spectrum-slider-m-;
-    replace: --spectrum-slider-;
-  }
-  @remapvars {
-    find: --spectrum-slider-tick-m-;
-    replace: --spectrum-slider-tick-;
-  }
-
-  /* todo: this is 0px in DNA, which seems wrong */
-  --spectrum-slider-label-gap-y: var(--spectrum-global-dimension-size-85);
-
-  --spectrum-slider-controls-margin: calc(
-    var(--spectrum-slider-handle-width) / 2
-  );
-  --spectrum-slider-track-margin-offset: calc(
-    var(--spectrum-slider-controls-margin) * -1
-  );
-
-  --spectrum-slider-handle-margin-top: calc(
-    var(--spectrum-slider-handle-width) / -2
-  );
-  --spectrum-slider-handle-margin-left: calc(
-    var(--spectrum-slider-handle-width) / -2
-  );
-
-  --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
-  --spectrum-slider-track-middle-handleoffset: calc(
-    var(--spectrum-slider-handle-gap) +
-      calc(var(--spectrum-slider-handle-width) / 2)
-  );
-
-  --spectrum-slider-input-top: calc(
-    var(--spectrum-slider-handle-margin-top) / 4
-  );
-  --spectrum-slider-input-left: calc(
-    var(--spectrum-slider-handle-margin-left) / 4
-  );
-
-  --spectrum-slider-color-min-height: auto;
-  --spectrum-slider-color-track-padding: 0;
-  --spectrum-slider-color-track-top: 0;
-  --spectrum-slider-color-track-margin-top: 0;
-  --spectrum-slider-color-track-margin-left: 0;
-  --spectrum-slider-color-track-margin-right: 0;
-  --spectrum-slider-color-handle-top: 50%;
+  --spectrum-slider-cjk-line-height: var(--mod-cjk-line-height-100, var(--spectrum-cjk-line-height-100));
+
+  --spectrum-slider-min-size: var(--mod-spacing-900, var(--spectrum-spacing-900));
+  --spectrum-slider-height-size: var(--mod-component-height-200, var(--spectrum-component-height-200));
+
+  --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
+  --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
+  --spectrum-slider-handle-border-width-down: var(--mod-border-width-200, var(--spectrum-border-width-200));
+  --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
+  --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
+  --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
+  --spectrum-slider-track-middle-handleoffset: calc(var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)) + calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2));
+   --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))  / -2 / 4);
+
+
+  /* aka 80px */
+  /* colors */
+  --spectrum-slider-track-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
+  --spectrum-slider-track-fill-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
+  --spectrum-slider-handle-border-color-disabled: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
+  --spectrum-slider-label-text-color: var(--highcontrast-neutral-content-color-default, var(--mod-neutral-content-color-default, var(--spectrum-neutral-content-color-default)));
+  --spectrum-slider-label-text-color-disabled: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
+
+  --spectrum-slider-ramp-handle-border-color-active: var(--highcontrast-gray-100, , var(--mod-gray-100, var(--spectrum-gray-100)));
+
+
+  /* values */
+  --spectrum-slider-input-left: calc(var(--mod-slider-handle-margin-left, var(--spectrum-slider-handle-margin-left)) / 4);
+  --spectrum-slider-track-handleoffset: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
 
   --spectrum-slider-ramp-margin-top: 0;
   --spectrum-slider-range-track-reset: 0;
-  --spectrum-slider-label-margin-bottom: -3px;
-  --spectrum-slider-label-gap-x: var(--spectrum-alias-item-control-gap-m);
-  --spectrum-slider-label-text-line-height: var(
-    --spectrum-global-font-line-height-small
-  );
 }
 
 .spectrum-Slider {
@@ -75,8 +107,8 @@ governing permissions and limitations under the License.
   /* Don't let z-index'd child elements float above other things on the page */
   z-index: 1;
   display: block;
-  min-block-size: var(--spectrum-slider-height);
-  min-inline-size: var(--spectrum-slider-min-width);
+  min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
+  min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
 
   user-select: none;
 }
@@ -89,25 +121,25 @@ governing permissions and limitations under the License.
   z-index: auto;
 
   /* These calculations prevent the track from spilling outside of the control */
-  inline-size: calc(100% - calc(var(--spectrum-slider-controls-margin) * 2));
-  margin-inline-start: var(--spectrum-slider-controls-margin);
-  min-block-size: var(--spectrum-slider-height);
+  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));
+  min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
 
   vertical-align: top;
 }
 
 .spectrum-Slider-track,
 .spectrum-Slider-fill {
-  block-size: var(--spectrum-slider-track-height);
+  block-size: var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness));
   box-sizing: border-box;
 
   position: absolute;
   z-index: 1;
-  inset-block-start: calc(var(--spectrum-slider-height) / 2);
+  inset-block-start: calc(var(--mod-slider-height-size, var(--spectrum-slider-height-size))/ 2);
   inset-inline-start: 0;
   inset-inline-end: auto;
 
-  margin-block-start: calc(var(--spectrum-slider-track-height) / -2);
+  margin-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / -2);
 
   pointer-events: none;
 }
@@ -115,8 +147,8 @@ governing permissions and limitations under the License.
 .spectrum-Slider-track,
 .spectrum-Slider-fill {
   padding-block: 0;
-  padding-inline: 0 var(--spectrum-slider-track-handleoffset);
-  margin-inline-start: var(--spectrum-slider-track-margin-offset);
+  padding-inline: 0 var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
+  margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 
   &:before {
     content: "";
@@ -133,9 +165,8 @@ governing permissions and limitations under the License.
 .spectrum-Slider-track {
   &:first-of-type {
     &:before {
-      border-start-start-radius: var(--spectrum-slider-track-border-radius);
-      border-end-start-radius: var(--spectrum-slider-track-border-radius);
-      border-start-end-radius: 0;
+      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
   }
@@ -144,38 +175,43 @@ governing permissions and limitations under the License.
     &:before {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
-      border-start-end-radius: var(--spectrum-slider-track-border-radius);
-      border-end-end-radius: var(--spectrum-slider-track-border-radius);
+      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
     }
   }
 }
 
-.spectrum-Slider-track ~ .spectrum-Slider-track {
+.spectrum-Slider-track~.spectrum-Slider-track {
   inset-inline-start: auto;
-  inset-inline-end: var(--spectrum-slider-range-track-reset);
+  inset-inline-end: var(--mod-slider-range-track-reset,  var(--spectrum-slider-range-track-reset));
   padding-block: 0;
-  padding-inline: var(--spectrum-slider-track-handleoffset) 0;
-  margin-inline-start: var(--spectrum-slider-range-track-reset);
-  margin-inline-end: var(--spectrum-slider-track-margin-offset);
+  padding-inline: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)) 0;
+  margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+  margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+}
+
+
+/* over-write for Range, without the LTR RTL post-css hack */
+.spectrum-Slider--range {
+  .spectrum-Slider-track~.spectrum-Slider-track {
+    padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
+    inset-inline-start: auto;
+    inset-inline-end: auto;
+    margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+
+  }
+
 }
 
 .spectrum-Slider-fill {
   margin-inline-start: 0;
   padding-block: 0;
-  padding-inline: calc(
-      var(--spectrum-slider-controls-margin) +
-        var(--spectrum-slider-track-handleoffset)
-    )
-    0;
+  padding-inline: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))) 0;
 }
 
 .spectrum-Slider-fill--right {
   padding-block: 0;
-  padding-inline: 0
-    calc(
-      var(--spectrum-slider-controls-margin) +
-        var(--spectrum-slider-track-handleoffset)
-    );
+  padding-inline: 0 calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
 }
 
 .spectrum-Slider--range {
@@ -192,35 +228,28 @@ governing permissions and limitations under the License.
     }
 
     &:first-of-type {
-      padding-inline: 0 var(--spectrum-slider-track-handleoffset);
-      inset-inline-start: var(--spectrum-slider-range-track-reset);
+      padding-inline: 0 var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+      inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
       inset-inline-end: auto;
-      margin-inline-start: var(--spectrum-slider-track-margin-offset);
+      margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
       &:before {
-        border-start-start-radius: var(--spectrum-slider-m-track-border-radius);
-        border-end-start-radius: var(--spectrum-slider-m-track-border-radius);
+        border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+        border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
         border-start-end-radius: 0;
         border-end-end-radius: 0;
       }
     }
 
-    /* Force specificity otherwise the ~ rules above override */
-    &:dir(ltr),
-    &:dir(rtl) {
-      padding-inline: var(--spectrum-slider-track-middle-handleoffset)
-        var(--spectrum-slider-track-middle-handleoffset);
-      inset-inline-start: auto;
-      inset-inline-end: auto;
-      margin-inline: var(--spectrum-slider-range-track-reset);
-    }
     &:last-of-type {
-      padding-inline: var(--spectrum-slider-track-handleoffset) 0;
+      padding-inline: ar(--spectrum-slider-track-handleoffset) 0;
       inset-inline-start: auto;
-      inset-inline-end: var(--spectrum-slider-range-track-reset);
-      margin-inline-end: var(--spectrum-slider-track-margin-offset);
+      inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+      margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
       &:before {
-        border-start-end-radius: var(--spectrum-slider-m-track-border-radius);
-        border-end-end-radius: var(--spectrum-slider-m-track-border-radius);
+        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));
         border-start-start-radius: 0;
         border-end-start-radius: 0;
       }
@@ -229,13 +258,13 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider-ramp {
-  margin-block-start: var(--spectrum-slider-ramp-margin-top);
-  block-size: var(--spectrum-slider-ramp-track-height);
+  margin-block-start: var(--spectrum-slider-ramp-margin-top, var(--spectrum-slider-ramp-margin-top));
+  block-size: var(--spectrum-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
 
   position: absolute;
-  inset-inline-start: var(--spectrum-slider-track-margin-offset);
-  inset-inline-end: var(--spectrum-slider-track-margin-offset);
-  inset-block-start: calc(var(--spectrum-slider-ramp-track-height) / 2);
+  inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+  inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+  inset-block-start: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
 
   svg {
     inline-size: 100%;
@@ -244,36 +273,43 @@ governing permissions and limitations under the License.
     /* Flip the ramp automatically for RTL */
     transform: logical rotate(0deg);
   }
+
+  &+.spectrum-Slider-handle {
+    margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 -5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
+  }
+
 }
 
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
-  inset-block-start: calc(var(--spectrum-slider-height) / 2);
+  inset-block-start: calc(var(--mod-slider-height-size, var(--spectrum-slider-height-size)) / 2);
+  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75))  + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
   z-index: 2;
 
   display: inline-block;
   box-sizing: border-box;
 
-  inline-size: var(--spectrum-slider-handle-width);
-  block-size: var(--spectrum-slider-handle-height);
 
-  margin-block: var(--spectrum-slider-handle-margin-top) 0;
-  margin-inline: calc(var(--spectrum-slider-handle-width) / -2) 0;
+  inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+  block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+
 
-  border-width: var(--spectrum-slider-handle-border-size);
+  margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
+  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
+  border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   border-style: solid;
 
-  border-radius: var(--spectrum-slider-handle-border-radius);
+  border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
 
-  transition: border-width var(--spectrum-slider-animation-duration) ease-in-out;
+  transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
 
   outline: none;
 
   &:active,
   &.is-focused,
   &.is-dragged {
-    border-width: var(--spectrum-slider-handle-border-size);
+    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   }
 
   &:active,
@@ -290,13 +326,12 @@ governing permissions and limitations under the License.
     left: 50%;
     top: 50%;
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100)
-        ease-out,
-      width var(--spectrum-global-animation-duration-100) ease-out,
-      height var(--spectrum-global-animation-duration-100) ease-out;
+    transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+      width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+      height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
 
-    width: var(--spectrum-slider-handle-width);
-    height: var(--spectrum-slider-handle-height);
+    width: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    height: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
     transform: translate(-50%, -50%);
 
@@ -305,14 +340,8 @@ governing permissions and limitations under the License.
 
   &.is-focused {
     &:before {
-      width: calc(
-        var(--spectrum-slider-handle-width) +
-          var(--spectrum-alias-focus-ring-gap) * 2
-      );
-      height: calc(
-        var(--spectrum-slider-handle-height) +
-          var(--spectrum-alias-focus-ring-gap) * 2
-      );
+      width: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+      height: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
     }
   }
 }
@@ -321,12 +350,13 @@ governing permissions and limitations under the License.
   /*  Remove the margin for input in Firefox and Safari. */
   margin: 0;
 
-  inline-size: var(--spectrum-slider-handle-width);
-  block-size: var(--spectrum-slider-handle-height);
+  inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+  block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
   padding: 0;
   position: absolute;
-  inset-block-start: var(--spectrum-slider-input-top);
-  inset-inline-start: var(--spectrum-slider-input-left);
+
+  inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
+  inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
   overflow: hidden;
   opacity: 0.000001;
   cursor: default;
@@ -345,11 +375,18 @@ governing permissions and limitations under the License.
 
   inline-size: auto;
 
-  padding-block-start: var(--spectrum-fieldlabel-m-padding-top);
+  padding-block-start: var(--mod-component-top-to-text-75, var(--spectrum-component-top-to-text-75));
+  font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+  margin-block-end: var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75));
+
+  line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
-  font-size: var(--spectrum-slider-label-text-size);
-  line-height: var(--spectrum-slider-label-text-line-height);
-  margin-block-end: var(--spectrum-slider-label-margin-bottom);
+  /* international support */
+  &:lang(ja),
+  &:lang(zh),
+  &:lang(ko) {
+    line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
+  }
 }
 
 .spectrum-Slider-label {
@@ -366,39 +403,35 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider-value {
-  margin-inline-start: var(--spectrum-slider-label-gap-x);
+  margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
 }
 
+/* Slider misses core-tokens for tick */
 .spectrum-Slider-ticks {
   display: flex;
   justify-content: space-between;
 
   z-index: 0;
 
-  margin: 0 var(--spectrum-slider-track-margin-offset);
-  margin-block-start: calc(
-    var(--spectrum-slider-tick-mark-height) +
-    1px
-  );
+  margin: 0 var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+  margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) -2px);
 }
 
 .spectrum-Slider-tick {
   position: relative;
 
-  inline-size: var(--spectrum-slider-tick-mark-width);
+  inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
 
   &:after {
     display: block;
     position: absolute;
     inset-block-start: 0;
-    inset-inline-start: calc(
-      50% - calc(var(--spectrum-slider-tick-mark-width) / 2)
-    );
+    inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
     content: "";
-    inline-size: var(--spectrum-slider-tick-mark-width);
-    block-size: var(--spectrum-slider-tick-mark-height);
+    inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+    block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
 
-    border-radius: var(--spectrum-slider-tick-mark-border-radius);
+    border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
   }
 
   .spectrum-Slider-tickLabel {
@@ -406,12 +439,12 @@ governing permissions and limitations under the License.
     align-items: center;
     justify-content: center;
 
-    margin-block: calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height)) 0;
-    margin-inline: calc(var(--spectrum-slider-label-gap-x) * -1)
-      calc(var(--spectrum-slider-label-gap-x) * -1);
+    margin-block: calc(var(--mod-text-to-visual-75, var(--spectrum-text-to-visual-75)) + var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height))) 0;
+
+    margin-inline: calc(var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start))) * -1) calc(var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)) * -1);
 
-    font-size: var(--spectrum-slider-label-text-size);
-    line-height: var(--spectrum-slider-label-text-line-height);
+    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
   }
 
   &:first-of-type,
@@ -425,7 +458,8 @@ governing permissions and limitations under the License.
 
   &:first-of-type {
     /* fix off-by-one alignment */
-    inset-inline-start: calc(var(--spectrum-slider-tick-mark-width) / -2);
+    inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+
     .spectrum-Slider-tickLabel {
       inset-inline-start: 0;
     }
@@ -433,7 +467,8 @@ governing permissions and limitations under the License.
 
   &:last-of-type {
     /* fix off-by-one alignment */
-    inset-inline-end: calc(var(--spectrum-slider-tick-mark-width) / -2);
+    inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+
     .spectrum-Slider-tickLabel {
       inset-inline-end: 0;
     }
@@ -455,17 +490,215 @@ governing permissions and limitations under the License.
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  width: calc(100% + var(--spectrum-slider-handle-width));
+  width: calc(100% + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)));
 
   position: absolute;
-  top: calc(var(--spectrum-slider-track-height) / 2 - 1px);
+  top: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
 
-  margin-left: calc(var(--spectrum-slider-handle-width) / 2 * -1);
+  margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)))/ 2 * -1);
 }
 
 .spectrum-Slider-trackContainer {
-  height: var(--spectrum-slider-height);
+  height: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
+  height: var(--mod-component-height-200, var(--spectrum-component-height-200));
 
   /* stop edges from peeking out */
   overflow: hidden;
 }
+
+
+.spectrum-Slider-track {
+  &::before {
+    background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+  }
+}
+
+
+.spectrum-Slider-labelContainer {
+  color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
+}
+
+
+.spectrum-Slider--filled {
+  .spectrum-Slider-track:first-child {
+    &::before {
+      background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+    }
+  }
+}
+
+.spectrum-Slider-fill {
+  &::before {
+    background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+  }
+}
+
+.spectrum-Slider-ramp {
+  path {
+    fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
+  }
+}
+
+.spectrum-Slider-handle {
+  border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
+  background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+
+  &:hover {
+    border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
+  }
+
+  &.is-focused {
+    border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
+
+    &:before {
+      box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
+    }
+  }
+
+  &:active,
+  &.is-dragged {
+    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+  }
+}
+
+
+.spectrum-Slider--ramp {
+  .spectrum-Slider-handle {
+    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+  }
+}
+
+.spectrum-Slider-input {
+  background: transparent;
+}
+
+.spectrum-Slider-tick {
+  &:after {
+    background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
+  }
+}
+
+.spectrum-Slider-handle {
+  &.is-dragged {
+    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down), var(--spectrum-slider-handle-border-color-down)));
+    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color), var(--spectrum-slider-handle-background-color)));
+  }
+}
+
+
+.spectrum-Slider--range {
+  .spectrum-Slider-track {
+    &:not(:first-of-type):not(:last-of-type) {
+      &:before {
+        background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color), var(--spectrum-slider-track-fill-color)));
+      }
+    }
+  }
+}
+
+
+.spectrum-Slider {
+  &.is-disabled {
+    .spectrum-Slider-labelContainer {
+      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+    }
+
+    .spectrum-Slider-handle {
+      border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
+      background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+
+      &:hover,
+      &:active {
+        border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
+        background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
+      }
+    }
+
+    .spectrum-Slider-track {
+      &::before {
+        background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+      }
+    }
+
+    &.spectrum-Slider--filled {
+      .spectrum-Slider-track:first-child {
+        &::before {
+          background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+        }
+      }
+    }
+
+    .spectrum-Slider-fill {
+      &::before {
+        background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+      }
+    }
+
+    .spectrum-Slider-ramp {
+      path {
+        fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
+      }
+    }
+
+    .spectrum-Slider-tick {
+      &:after {
+        background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
+      }
+    }
+
+    &.spectrum-Slider--range {
+      .spectrum-Slider-track {
+        &:not(:first-of-type):not(:last-of-type) {
+          &:before {
+            background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@media (forced-colors: active) {
+  .spectrum-Slider {
+    .spectrum-Slider-handle {
+      &:before {
+        forced-color-adjust: none;
+      }
+    }
+
+    --spectrum-slider-track-color: ButtonText;
+    --spectrum-slider-track-fill-color: ButtonText;
+    --spectrum-slider-ramp-track-color: ButtonText;
+    --spectrum-slider-ramp-track-color-disabled: GrayText;
+
+    --spectrum-slider-handle-background-color: ButtonFace;
+    --spectrum-slider-handle-background-color-disabled: GrayText;
+    --spectrum-slider-handle-border-color: ButtonText;
+    --spectrum-slider-handle-disabled-background-color: GrayText;
+
+    --spectrum-slider-tick-mark-color: ButtonText;
+    --spectrum-slider-tick-mark-color-disabled: GrayText;
+
+    --spectrum-slider-handle-border-color-hover: Highlight;
+    --spectrum-slider-handle-border-color-down: Highlight;
+    --spectrum-slider-handle-border-color-key-focus: Highlight;
+    --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
+
+    --spectrum-slider-track-color-disabled: GrayText;
+    --spectrum-slider-track-fill-color-disabled: GrayText;
+
+    --spectrum-slider-handle-border-color-disabled: GrayText;
+
+    --spectrum-slider-label-text-color: CanvasText;
+    --spectrum-slider-label-text-color-disabled: GrayText;
+
+    --spectrum-slider-ramp-handle-border-color-active: ButtonText;
+
+    .spectrum-Slider--ramp {
+      .spectrum-Slider-handle {
+        forced-color-adjust: none;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index 47bd6bce5cf..e4117c50ade 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -16,7 +16,7 @@ examples:
   - id: slider
     name: Standard
     markup: |
-      <div class="spectrum-Slider">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
         <div class="spectrum-Slider-controls">
           <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -25,7 +25,7 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
-      <div class="spectrum-Slider is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-controls">
           <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -34,10 +34,98 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
+  - id: slider-sizes
+    name: Sizes
+    markup: |
+      <div class="spectrum-Examples">
+        <div class="spectrum-Examples-item" style="width: 200px">
+          <div class="spectrum-Slider spectrum-Slider--sizeS">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+          <div class="spectrum-Slider is-disabled spectrum-Slider--sizeS">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="spectrum-Examples-item" style="width: 200px">
+          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+          <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled  spectrum-Slider--sizeM">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="spectrum-Examples-item" style="width: 200px">
+          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeL">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+          <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled  spectrum-Slider--sizeL">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="spectrum-Examples-item" style="width: 200px">
+          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeXL">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+          <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled spectrum-Slider--sizeXL">
+            <div class="spectrum-Slider-controls">
+              <div class="spectrum-Slider-track"></div>
+              <div class="spectrum-Slider-handle" style="left: 40%;">
+                <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
+              </div>
+              <div class="spectrum-Slider-track"></div>
+            </div>
+          </div>
+        </div>
+      </div>
   - id: slider
     name: With Label
     markup: |
-      <div class="spectrum-Slider">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
@@ -50,7 +138,7 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
-      <div class="spectrum-Slider is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-9" for="spectrum-Slider-input-9">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-9">14</div>
@@ -67,7 +155,7 @@ examples:
     name: Filled
     description: With fill.
     markup: |
-      <div class="spectrum-Slider spectrum-Slider--filled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--filled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-6" for="spectrum-Slider-input-6">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-6">14</div>
@@ -80,7 +168,7 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
-      <div class="spectrum-Slider is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-7" for="spectrum-Slider-input-7">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-7">14</div>
@@ -97,7 +185,7 @@ examples:
     name: Filled-Offset
     description: With fill and offset.
     markup: |
-      <div class="spectrum-Slider">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-18" for="spectrum-Slider-input-18">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-18">14</div>
@@ -111,7 +199,7 @@ examples:
           <div class="spectrum-Slider-fill" style="left: 20%; width: 30%"></div>
         </div>
       </div>
-      <div class="spectrum-Slider">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
@@ -125,7 +213,7 @@ examples:
           <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
         </div>
       </div>
-      <div class="spectrum-Slider is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
@@ -143,7 +231,7 @@ examples:
     name: Range
     description: A range slider with two handles.
     markup: |
-      <div class="spectrum-Slider spectrum-Slider--range" role="group" aria-labelledby="spectrum-Slider-label-4">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--range" role="group" aria-labelledby="spectrum-Slider-label-4">
         <div class="spectrum-Slider-labelContainer" role="presentation">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-4" for="spectrum-Slider-input-4-0">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-4">14 - 48</div>
@@ -161,7 +249,7 @@ examples:
         </div>
       </div>
 
-      <div class="spectrum-Slider spectrum-Slider--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-5">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-5">
         <div class="spectrum-Slider-labelContainer" role="presentation">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-5" for="spectrum-Slider-input-5-0">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-5">14 - 48</div>
@@ -182,7 +270,7 @@ examples:
     name: Tick
     description: Spectrum tick slider
     markup: |
-      <div class="spectrum-Slider spectrum-Slider--tick">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-14" for="spectrum-Slider-input-14">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
@@ -203,7 +291,7 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
-      <div class="spectrum-Slider spectrum-Slider--tick is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-15" for="spectrum-Slider-input-15">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
@@ -228,7 +316,7 @@ examples:
     name: Tick with Labels
     description: Spectrum tick slider with labels
     markup: |
-      <div class="spectrum-Slider">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
@@ -261,7 +349,7 @@ examples:
           <div class="spectrum-Slider-track"></div>
         </div>
       </div>
-      <div class="spectrum-Slider is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
@@ -297,7 +385,7 @@ examples:
   - id: slider-ramp
     name: Ramp
     markup: |
-      <div class="spectrum-Slider spectrum-Slider--ramp">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--ramp">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-10" for="spectrum-Slider-input-10">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-10">14</div>
@@ -313,7 +401,7 @@ examples:
           </div>
         </div>
       </div>
-      <div class="spectrum-Slider spectrum-Slider--ramp is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--ramp is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-11" for="spectrum-Slider-input-11">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-11">14</div>
diff --git a/components/slider/package.json b/components/slider/package.json
index 4b1a2c62d8c..ba1b9b60c7c 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "3.1.17",
+  "version": "4.0.0-beta.0",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",
@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/tokens": "^4.0.0"
   },
   "devDependencies": {
-    "@spectrum-css/component-builder": "^4.0.3",
-    "@spectrum-css/vars": "^8.0.5",
+    "@spectrum-css/component-builder-simple": "^2.0.0",
+    "@spectrum-css/tokens": "^4.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
new file mode 100644
index 00000000000..7c64e14a36d
--- /dev/null
+++ b/components/slider/themes/express.css
@@ -0,0 +1,34 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: express) {
+    .spectrum-Slider {
+
+        --spectrum-slider-margin-top-offset: -6px;
+        --spectrum-slider-track-color: var(--spectrum-gray-200);
+        --spectrum-slider-track-fill-color: var(--spectrum-gray-600);
+        --spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
+        --spectrum-slider-ramp-track-color-disabled:  var(--spectrum-gray-200);
+
+        --spectrum-slider-handle-background-color: var(--spectrum-gray-50);
+        --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50);
+        --spectrum-slider-handle-border-color: var(--spectrum-gray-800);
+        --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
+
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
+
+        --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900);
+        --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
+        --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900);
+        --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+    }
+}
\ No newline at end of file
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
new file mode 100644
index 00000000000..aa58eecaf79
--- /dev/null
+++ b/components/slider/themes/spectrum.css
@@ -0,0 +1,36 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: spectrum) {
+    .spectrum-Slider {
+
+
+        --spectrum-slider-margin-top-offset: 0px;
+
+        --spectrum-slider-track-color: var(--spectrum-gray-300);
+        --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+        --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+        --spectrum-slider-ramp-track-color-disabled:  var(--spectrum-gray-200);
+
+        --spectrum-slider-handle-background-color: transparent;
+        --spectrum-slider-handle-background-color-disabled: transparent;
+        --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+        --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
+
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-400);
+        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-400);
+
+        --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+        --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+        --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+        --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+    }
+}
\ No newline at end of file

From 0d6ba9092c9193487700228a4f81e337f5467f69 Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 28 Nov 2022 12:34:25 -0500
Subject: [PATCH 02/52] chore(slider): manual version bump for beta release

---
 components/slider/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/slider/package.json b/components/slider/package.json
index ba1b9b60c7c..95a51ab5481 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",

From d04cbec900e26c12055a67498e4591e0646b3b06 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 28 Nov 2022 23:18:08 -0500
Subject: [PATCH 03/52] feat: pr feedback around soft-coding

---
 components/slider/index.css | 43 +++++++++++++++----------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 4a7bc5a9caa..8d8fa7619d6 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -33,39 +33,37 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider--sizeS {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-small, var(--spectrum-slider-handle-size-small));
   --spectrum-slider-control-height: var(--mod-slider-control-height-small, var(--spectrum-slider-control-height-small));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-small, var(--spectrum-slider-bottom-to-handle-small));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-small, var(--spectrum-slider-handle-border-width-down-small));
 }
 
 .spectrum-Slider--sizeM {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-medium, var(--spectrum-slider-handle-size-medium));
   --spectrum-slider-control-height: var(--mod-slider-control-height-medium, var(--spectrum-slider-control-height-medium));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-medium, var(--spectrum-slider-bottom-to-handle-medium));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-medium, var(--spectrum-slider-handle-border-width-down-medium));
 }
 
 .spectrum-Slider--sizeL {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-large, var(--spectrum-slider-handle-size-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-large, var(--spectrum-slider-control-height-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-large, var(--spectrum-slider-bottom-to-handle-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 2);
-
-
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-large, var(--spectrum-slider-handle-border-width-down-large));
 }
 
 .spectrum-Slider--sizeXL {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-extra-large, var(--spectrum-slider-handle-size-extra-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-extra-large, var(--spectrum-slider-control-height-extra-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-extra-large, var(--spectrum-slider-bottom-to-handle-extra-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 4);
-
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-extra-large, var(--spectrum-slider-handle-border-width-down-extra-large));
 }
+
 .spectrum-Slider {
   --spectrum-slider-cjk-line-height: var(--mod-cjk-line-height-100, var(--spectrum-cjk-line-height-100));
 
@@ -74,12 +72,12 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
   --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width-down: var(--mod-border-width-200, var(--spectrum-border-width-200));
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
   --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
   --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
   --spectrum-slider-track-middle-handleoffset: calc(var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)) + calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2));
-   --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))  / -2 / 4);
+  --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 / 4);
 
 
   /* aka 80px */
@@ -125,6 +123,7 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
   min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
 
+  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   vertical-align: top;
 }
 
@@ -142,10 +141,7 @@ governing permissions and limitations under the License.
   margin-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / -2);
 
   pointer-events: none;
-}
 
-.spectrum-Slider-track,
-.spectrum-Slider-fill {
   padding-block: 0;
   padding-inline: 0 var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
   margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
@@ -166,15 +162,12 @@ governing permissions and limitations under the License.
   &:first-of-type {
     &:before {
       border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) border-start-end-radius: 0;
-      border-end-end-radius: 0;
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) 0;
     }
   }
 
   &:last-of-type {
     &:before {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
       border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
       border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
     }
@@ -183,7 +176,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-track~.spectrum-Slider-track {
   inset-inline-start: auto;
-  inset-inline-end: var(--mod-slider-range-track-reset,  var(--spectrum-slider-range-track-reset));
+  inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
   padding-block: 0;
   padding-inline: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)) 0;
   margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -220,13 +213,6 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Slider-track {
-    &:before {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-
     &:first-of-type {
       padding-inline: 0 var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
       inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -238,6 +224,11 @@ governing permissions and limitations under the License.
         border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
         border-start-end-radius: 0;
         border-end-end-radius: 0;
+
+        /* border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+        border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+        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)); */
       }
     }
 
@@ -284,7 +275,7 @@ governing permissions and limitations under the License.
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: calc(var(--mod-slider-height-size, var(--spectrum-slider-height-size)) / 2);
-  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75))  + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
+  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75)) + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
   z-index: 2;
 
   display: inline-block;
@@ -701,4 +692,4 @@ governing permissions and limitations under the License.
       }
     }
   }
-}
\ No newline at end of file
+}

From 0150cf9a9c5fa5af58598baabb7752ec33fdd60a Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 29 Nov 2022 19:18:53 -0500
Subject: [PATCH 04/52] feat: setting border radii an var correction

---
 components/slider/index.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 8d8fa7619d6..e3135f1229c 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -151,6 +151,7 @@ governing permissions and limitations under the License.
     display: block;
     block-size: 100%;
 
+    /* reset all border radii */
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     border-start-end-radius: 0;
@@ -162,14 +163,14 @@ governing permissions and limitations under the License.
   &:first-of-type {
     &:before {
       border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) 0;
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
     }
   }
 
   &:last-of-type {
     &:before {
-      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      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));
     }
   }
 }
@@ -233,7 +234,7 @@ governing permissions and limitations under the License.
     }
 
     &:last-of-type {
-      padding-inline: ar(--spectrum-slider-track-handleoffset) 0;
+      padding-inline: var(--spectrum-slider-track-handleoffset) 0;
       inset-inline-start: auto;
       inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
       margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));

From b70587b1f57e4654bcab08dab41df46e8e59a74d Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 29 Nov 2022 20:01:10 -0500
Subject: [PATCH 05/52] feat: upping core vars to 5.0.0

---
 components/slider/package.json | 4 ++--
 yarn.lock                      | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/slider/package.json b/components/slider/package.json
index 95a51ab5481..a2fd2ad944e 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/tokens": "^4.0.0"
+    "@spectrum-css/tokens": "^5.0.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^2.0.0",
-    "@spectrum-css/tokens": "^4.0.0",
+    "@spectrum-css/tokens": "^5.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
diff --git a/yarn.lock b/yarn.lock
index a6a1c481051..14d1c6afd36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3353,6 +3353,11 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
+"@spectrum-css/tokens@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-5.0.0.tgz#d9edd70eacd2a5f430c772487d68562b7b7b0a72"
+  integrity sha512-S4qF7y8Gpl0IoGvFgqeFc8CRG8pK19FPVM8IE1/0hOON8dIV02UXivuOxXpa2piorIsTEgV58SQc8acIZGgGxw==
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"

From 4ad39491bbcb8256fe4fdf338203a40ef85bb1e6 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 29 Nov 2022 20:09:07 -0500
Subject: [PATCH 06/52] feat: core-tokens 5.0.0 line-height fix

---
 components/slider/index.css | 2 +-
 yarn.lock                   | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index e3135f1229c..fa98509b76a 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -65,7 +65,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider {
-  --spectrum-slider-cjk-line-height: var(--mod-cjk-line-height-100, var(--spectrum-cjk-line-height-100));
+  --spectrum-slider-cjk-line-height: var(--mod-line-height-cjk-100, var(--spectrum-line-height-cjk-100));
 
   --spectrum-slider-min-size: var(--mod-spacing-900, var(--spectrum-spacing-900));
   --spectrum-slider-height-size: var(--mod-component-height-200, var(--spectrum-component-height-200));
diff --git a/yarn.lock b/yarn.lock
index 14d1c6afd36..a6a1c481051 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3353,11 +3353,6 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@spectrum-css/tokens@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-5.0.0.tgz#d9edd70eacd2a5f430c772487d68562b7b7b0a72"
-  integrity sha512-S4qF7y8Gpl0IoGvFgqeFc8CRG8pK19FPVM8IE1/0hOON8dIV02UXivuOxXpa2piorIsTEgV58SQc8acIZGgGxw==
-
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"

From c5cd1261c828d70f8898476107264f2f8f58f8cd Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 5 Dec 2022 21:25:03 -0700
Subject: [PATCH 07/52] feat: addressing PR feedback

---
 components/slider/index.css           | 56 +++++++++++++++------------
 components/slider/themes/express.css  |  2 +-
 components/slider/themes/spectrum.css |  4 +-
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index fa98509b76a..7d3698d33e0 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -33,37 +33,39 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider--sizeS {
+
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-small, var(--spectrum-slider-handle-size-small));
   --spectrum-slider-control-height: var(--mod-slider-control-height-small, var(--spectrum-slider-control-height-small));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-small, var(--spectrum-slider-bottom-to-handle-small));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-small, var(--spectrum-slider-handle-border-width-down-small));
 }
 
 .spectrum-Slider--sizeM {
+
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-medium, var(--spectrum-slider-handle-size-medium));
   --spectrum-slider-control-height: var(--mod-slider-control-height-medium, var(--spectrum-slider-control-height-medium));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-medium, var(--spectrum-slider-bottom-to-handle-medium));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-medium, var(--spectrum-slider-handle-border-width-down-medium));
 }
 
 .spectrum-Slider--sizeL {
+
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-large, var(--spectrum-slider-handle-size-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-large, var(--spectrum-slider-control-height-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-large, var(--spectrum-slider-bottom-to-handle-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 2);
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-large, var(--spectrum-slider-handle-border-width-down-large));
+
+
 }
 
 .spectrum-Slider--sizeXL {
+
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-extra-large, var(--spectrum-slider-handle-size-extra-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-extra-large, var(--spectrum-slider-control-height-extra-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-extra-large, var(--spectrum-slider-bottom-to-handle-extra-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 4);
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-extra-large, var(--spectrum-slider-handle-border-width-down-extra-large));
-}
 
+}
 .spectrum-Slider {
   --spectrum-slider-cjk-line-height: var(--mod-line-height-cjk-100, var(--spectrum-line-height-cjk-100));
 
@@ -72,15 +74,15 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
   --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+  --spectrum-slider-handle-border-width-down: var(--mod-border-width-200, var(--spectrum-border-width-200));
   --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
   --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
   --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
   --spectrum-slider-track-middle-handleoffset: calc(var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)) + calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2));
-  --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 / 4);
+   --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))  / -2 / 4);
+
 
 
-  /* aka 80px */
   /* colors */
   --spectrum-slider-track-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
   --spectrum-slider-track-fill-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
@@ -123,7 +125,6 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
   min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
 
-  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   vertical-align: top;
 }
 
@@ -141,7 +142,10 @@ governing permissions and limitations under the License.
   margin-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / -2);
 
   pointer-events: none;
+}
 
+.spectrum-Slider-track,
+.spectrum-Slider-fill {
   padding-block: 0;
   padding-inline: 0 var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
   margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
@@ -151,7 +155,6 @@ governing permissions and limitations under the License.
     display: block;
     block-size: 100%;
 
-    /* reset all border radii */
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     border-start-end-radius: 0;
@@ -163,21 +166,24 @@ governing permissions and limitations under the License.
   &:first-of-type {
     &:before {
       border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
   }
 
   &:last-of-type {
     &: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));
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
     }
   }
 }
 
 .spectrum-Slider-track~.spectrum-Slider-track {
   inset-inline-start: auto;
-  inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+  inset-inline-end: var(--mod-slider-range-track-reset,  var(--spectrum-slider-range-track-reset));
   padding-block: 0;
   padding-inline: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)) 0;
   margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -214,6 +220,13 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Slider-track {
+    &:before {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
     &:first-of-type {
       padding-inline: 0 var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
       inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -225,16 +238,11 @@ governing permissions and limitations under the License.
         border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
         border-start-end-radius: 0;
         border-end-end-radius: 0;
-
-        /* border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-        border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-        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)); */
       }
     }
 
     &:last-of-type {
-      padding-inline: var(--spectrum-slider-track-handleoffset) 0;
+      padding-inline: ar(--spectrum-slider-track-handleoffset) 0;
       inset-inline-start: auto;
       inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
       margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
@@ -267,7 +275,7 @@ governing permissions and limitations under the License.
   }
 
   &+.spectrum-Slider-handle {
-    margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 -5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
+    margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 - 5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
   }
 
 }
@@ -275,8 +283,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
-  inset-block-start: calc(var(--mod-slider-height-size, var(--spectrum-slider-height-size)) / 2);
-  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75)) + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
+  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75))  + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
   z-index: 2;
 
   display: inline-block;
@@ -288,7 +295,7 @@ governing permissions and limitations under the License.
 
 
   margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
-  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
+  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2) 0;
   border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   border-style: solid;
 
@@ -411,7 +418,6 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-tick {
   position: relative;
-
   inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
 
   &:after {
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index 7c64e14a36d..9114b736f22 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -23,7 +23,7 @@ governing permissions and limitations under the License.
         --spectrum-slider-handle-border-color: var(--spectrum-gray-800);
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
 
-        --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
         --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
 
         --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900);
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index aa58eecaf79..c8b1011baf1 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -25,8 +25,8 @@ governing permissions and limitations under the License.
         --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
 
-        --spectrum-slider-tick-mark-color: var(--spectrum-gray-400);
-        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-400);
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-500);
+        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-600);
 
         --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
         --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);

From 35960c9bcd094223a6ff105c02ce7fba45b4e9f8 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 7 Dec 2022 00:13:50 -0700
Subject: [PATCH 08/52] feat: adjusting high contrast mode colors

---
 components/slider/index.css           | 38 +++++++++++++++++++++++----
 components/slider/themes/spectrum.css |  4 +--
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 7d3698d33e0..1147896d552 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -84,6 +84,8 @@ governing permissions and limitations under the License.
 
 
   /* colors */
+  --spectrum-slider-track-fill-color: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+
   --spectrum-slider-track-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
   --spectrum-slider-track-fill-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
   --spectrum-slider-handle-border-color-disabled: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
@@ -295,7 +297,9 @@ governing permissions and limitations under the License.
 
 
   margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
-  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2) 0;
+
+
+  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
   border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   border-style: solid;
 
@@ -521,6 +525,10 @@ governing permissions and limitations under the License.
   .spectrum-Slider-track:first-child {
     &::before {
       background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+      @media (forced-colors: active) {
+        forced-color-adjust: none;
+        background: ButtonText;
+      }
     }
   }
 }
@@ -528,6 +536,11 @@ governing permissions and limitations under the License.
 .spectrum-Slider-fill {
   &::before {
     background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background: ButtonText;
+    }
   }
 }
 
@@ -563,11 +576,16 @@ governing permissions and limitations under the License.
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+
+    @media (forced-colors: active) {
+      background: ButtonFace;
+    }
   }
 }
 
 .spectrum-Slider-input {
   background: transparent;
+  
 }
 
 .spectrum-Slider-tick {
@@ -618,6 +636,7 @@ governing permissions and limitations under the License.
       }
     }
 
+
     &.spectrum-Slider--filled {
       .spectrum-Slider-track:first-child {
         &::before {
@@ -665,8 +684,19 @@ governing permissions and limitations under the License.
       }
     }
 
-    --spectrum-slider-track-color: ButtonText;
-    --spectrum-slider-track-fill-color: ButtonText;
+    .spectrum-Slider-track {
+      &:before {
+        forced-color-adjust: none;
+        background-color: ButtonText;
+      }
+    }
+
+    --spectrum-slider-track-color: GrayText;
+    --spectrum-slider-track-fill-color: GrayText;
+
+    --spectrum-slider-track-color-disabled: GrayText;
+    --spectrum-slider-track-fill-color-disabled: GrayText;
+
     --spectrum-slider-ramp-track-color: ButtonText;
     --spectrum-slider-ramp-track-color-disabled: GrayText;
 
@@ -683,8 +713,6 @@ governing permissions and limitations under the License.
     --spectrum-slider-handle-border-color-key-focus: Highlight;
     --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
 
-    --spectrum-slider-track-color-disabled: GrayText;
-    --spectrum-slider-track-fill-color-disabled: GrayText;
 
     --spectrum-slider-handle-border-color-disabled: GrayText;
 
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index c8b1011baf1..f0edeae1d1c 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -25,8 +25,8 @@ governing permissions and limitations under the License.
         --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
 
-        --spectrum-slider-tick-mark-color: var(--spectrum-gray-500);
-        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-600);
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-200);
 
         --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
         --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);

From 9dd3b193f050bb4de6909d652b8e4d9ba7beb877 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 7 Dec 2022 01:04:41 -0700
Subject: [PATCH 09/52] feat: rounding corners

---
 components/slider/index.css | 58 ++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 1147896d552..fc141b95616 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -33,39 +33,37 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider--sizeS {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-small, var(--spectrum-slider-handle-size-small));
   --spectrum-slider-control-height: var(--mod-slider-control-height-small, var(--spectrum-slider-control-height-small));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-small, var(--spectrum-slider-bottom-to-handle-small));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-small, var(--spectrum-slider-handle-border-width-down-small));
 }
 
 .spectrum-Slider--sizeM {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-medium, var(--spectrum-slider-handle-size-medium));
   --spectrum-slider-control-height: var(--mod-slider-control-height-medium, var(--spectrum-slider-control-height-medium));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-medium, var(--spectrum-slider-bottom-to-handle-medium));
   --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-medium, var(--spectrum-slider-handle-border-width-down-medium));
 }
 
 .spectrum-Slider--sizeL {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-large, var(--spectrum-slider-handle-size-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-large, var(--spectrum-slider-control-height-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-large, var(--spectrum-slider-bottom-to-handle-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 2);
-
-
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-large, var(--spectrum-slider-handle-border-width-down-large));
 }
 
 .spectrum-Slider--sizeXL {
-
   --spectrum-slider-handle-size: var(--mod-slider-handle-size-extra-large, var(--spectrum-slider-handle-size-extra-large));
   --spectrum-slider-control-height: var(--mod-slider-control-height-extra-large, var(--spectrum-slider-control-height-extra-large));
   --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-extra-large, var(--spectrum-slider-bottom-to-handle-extra-large));
   --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 4);
-
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-extra-large, var(--spectrum-slider-handle-border-width-down-extra-large));
 }
+
 .spectrum-Slider {
   --spectrum-slider-cjk-line-height: var(--mod-line-height-cjk-100, var(--spectrum-line-height-cjk-100));
 
@@ -74,18 +72,16 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
   --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width-down: var(--mod-border-width-200, var(--spectrum-border-width-200));
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
   --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
   --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
   --spectrum-slider-track-middle-handleoffset: calc(var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)) + calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2));
-   --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))  / -2 / 4);
-
+  --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 / 4);
 
 
+  /* aka 80px */
   /* colors */
-  --spectrum-slider-track-fill-color: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-
   --spectrum-slider-track-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
   --spectrum-slider-track-fill-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
   --spectrum-slider-handle-border-color-disabled: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
@@ -127,6 +123,7 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
   min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
 
+  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   vertical-align: top;
 }
 
@@ -144,10 +141,7 @@ governing permissions and limitations under the License.
   margin-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / -2);
 
   pointer-events: none;
-}
 
-.spectrum-Slider-track,
-.spectrum-Slider-fill {
   padding-block: 0;
   padding-inline: 0 var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
   margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
@@ -157,6 +151,7 @@ governing permissions and limitations under the License.
     display: block;
     block-size: 100%;
 
+    /* reset all border radii */
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     border-start-end-radius: 0;
@@ -168,24 +163,21 @@ governing permissions and limitations under the License.
   &:first-of-type {
     &:before {
       border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius))) border-start-end-radius: 0;
-      border-end-end-radius: 0;
+      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
     }
   }
 
   &:last-of-type {
     &:before {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+      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));
     }
   }
 }
 
 .spectrum-Slider-track~.spectrum-Slider-track {
   inset-inline-start: auto;
-  inset-inline-end: var(--mod-slider-range-track-reset,  var(--spectrum-slider-range-track-reset));
+  inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
   padding-block: 0;
   padding-inline: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)) 0;
   margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -222,13 +214,6 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Slider-track {
-    &:before {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-
     &:first-of-type {
       padding-inline: 0 var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
       inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
@@ -244,7 +229,7 @@ governing permissions and limitations under the License.
     }
 
     &:last-of-type {
-      padding-inline: ar(--spectrum-slider-track-handleoffset) 0;
+      padding-inline: var(--spectrum-slider-track-handleoffset) 0;
       inset-inline-start: auto;
       inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
       margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
@@ -285,7 +270,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
-  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75))  + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
+  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75)) + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
   z-index: 2;
 
   display: inline-block;
@@ -297,8 +282,6 @@ governing permissions and limitations under the License.
 
 
   margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
-
-
   margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
   border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   border-style: solid;
@@ -422,6 +405,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-tick {
   position: relative;
+
   inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
 
   &:after {
@@ -536,7 +520,6 @@ governing permissions and limitations under the License.
 .spectrum-Slider-fill {
   &::before {
     background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-
     @media (forced-colors: active) {
       forced-color-adjust: none;
       background: ButtonText;
@@ -576,7 +559,6 @@ governing permissions and limitations under the License.
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
-
     @media (forced-colors: active) {
       background: ButtonFace;
     }
@@ -585,7 +567,6 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-input {
   background: transparent;
-  
 }
 
 .spectrum-Slider-tick {
@@ -636,7 +617,6 @@ governing permissions and limitations under the License.
       }
     }
 
-
     &.spectrum-Slider--filled {
       .spectrum-Slider-track:first-child {
         &::before {
@@ -697,6 +677,8 @@ governing permissions and limitations under the License.
     --spectrum-slider-track-color-disabled: GrayText;
     --spectrum-slider-track-fill-color-disabled: GrayText;
 
+    --spectrum-slider-track-color: ButtonText;
+    --spectrum-slider-track-fill-color: ButtonText;
     --spectrum-slider-ramp-track-color: ButtonText;
     --spectrum-slider-ramp-track-color-disabled: GrayText;
 
@@ -713,6 +695,8 @@ governing permissions and limitations under the License.
     --spectrum-slider-handle-border-color-key-focus: Highlight;
     --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
 
+    --spectrum-slider-track-color-disabled: GrayText;
+    --spectrum-slider-track-fill-color-disabled: GrayText;
 
     --spectrum-slider-handle-border-color-disabled: GrayText;
 

From 467d01a34f2b758090ddb3380ab34c8be18c67fb Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 8 Dec 2022 15:37:58 -0700
Subject: [PATCH 10/52] feat: high contrast slider tick

---
 components/slider/index.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/slider/index.css b/components/slider/index.css
index fc141b95616..e47857fa1af 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -559,8 +559,10 @@ governing permissions and limitations under the License.
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+
     @media (forced-colors: active) {
       background: ButtonFace;
+      background: red;
     }
   }
 }
@@ -572,6 +574,12 @@ governing permissions and limitations under the License.
 .spectrum-Slider-tick {
   &:after {
     background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background: ButtonText;
+    }
+    
   }
 }
 

From 33fcc6781b460d9773411ea8806896a0957ea170 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 8 Dec 2022 15:51:08 -0700
Subject: [PATCH 11/52] feat: minor test removal

---
 components/slider/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index e47857fa1af..cefb1f3d024 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -562,7 +562,6 @@ governing permissions and limitations under the License.
 
     @media (forced-colors: active) {
       background: ButtonFace;
-      background: red;
     }
   }
 }

From 80e5c930aecefa4cbb53c2c43fa80c2f1c0dc5ab Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 8 Dec 2022 16:08:32 -0700
Subject: [PATCH 12/52] feat: border rings for slider

---
 components/slider/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index cefb1f3d024..50117ecb789 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -88,7 +88,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-label-text-color: var(--highcontrast-neutral-content-color-default, var(--mod-neutral-content-color-default, var(--spectrum-neutral-content-color-default)));
   --spectrum-slider-label-text-color-disabled: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
 
-  --spectrum-slider-ramp-handle-border-color-active: var(--highcontrast-gray-100, , var(--mod-gray-100, var(--spectrum-gray-100)));
+  --spectrum-slider-ramp-handle-border-color-active: var(--highcontrast-gray-100, var(--mod-gray-100, var(--spectrum-gray-100)));
 
 
   /* values */
@@ -559,6 +559,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active var(--mod-ectrum-slider-ramp-handle-border-color-active var(--spectrum-slider-ramp-handle-border-color-active)));
 
     @media (forced-colors: active) {
       background: ButtonFace;

From f82fc6a51bbdf80c7098acb5095807684ba9d51c Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 8 Dec 2022 20:10:11 -0700
Subject: [PATCH 13/52] feat: correct border token for down + ramp high
 contrast color

---
 components/slider/index.css | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 50117ecb789..35edcb36256 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -72,7 +72,8 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
   --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+  --spectrum-slider-handle-border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
   --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
   --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
@@ -283,7 +284,7 @@ governing permissions and limitations under the License.
 
   margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
   margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
-  border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
+  border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
   border-style: solid;
 
   border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
@@ -295,7 +296,7 @@ governing permissions and limitations under the License.
   &:active,
   &.is-focused,
   &.is-dragged {
-    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+    border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
   }
 
   &:active,
@@ -530,6 +531,11 @@ governing permissions and limitations under the License.
 .spectrum-Slider-ramp {
   path {
     fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      fill: ButtonText;
+    }
   }
 }
 
@@ -558,11 +564,13 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
-    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
-    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active var(--mod-ectrum-slider-ramp-handle-border-color-active var(--spectrum-slider-ramp-handle-border-color-active)));
+    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
 
     @media (forced-colors: active) {
-      background: ButtonFace;
+      forced-color-adjust: none;
+      box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
+      border-color: ButtonText;
+      background-color: ButtonFace;
     }
   }
 }
@@ -640,8 +648,21 @@ governing permissions and limitations under the License.
     }
 
     .spectrum-Slider-ramp {
+      @media (forced-colors: active) {
+      & + .spectrum-Slider-handle {
+          forced-color-adjust: none;
+          fill: ButtonFace;
+          background-color: ButtonFace;
+        }
+      }
+
       path {
         fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
+
+        @media (forced-colors: active) {
+          forced-color-adjust: none;
+          fill: GrayText;
+        }
       }
     }
 

From 4598f5f4f3de1290d6ec3eaa26871194957dea6d Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 14 Dec 2022 12:47:18 -0700
Subject: [PATCH 14/52] feat:  make tick slider handles align to ticks (follow
 up on #1289)

---
 components/slider/index.css           |  7 ++--
 components/slider/metadata/slider.yml | 51 +++++++++++++++++----------
 site/resources/js/enhancement.js      |  9 +++--
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 35edcb36256..6fb37a0f1c5 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -477,17 +477,18 @@ governing permissions and limitations under the License.
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  width: calc(100% + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)));
+  /* width: calc(100% + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))); */
+  width: calc(100% + var(--spectrum-slider-handle-size));
 
   position: absolute;
   top: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
 
-  margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)))/ 2 * -1);
+  /* margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)))/ 2 * -1); */
+  margin-left: calc(var(--spectrum-slider-handle-size) / 2 * -1);
 }
 
 .spectrum-Slider-trackContainer {
   height: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
-  height: var(--mod-component-height-200, var(--spectrum-component-height-200));
 
   /* stop edges from peeking out */
   overflow: hidden;
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index e4117c50ade..8d6069e50a8 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -276,19 +276,22 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
-            <div class="spectrum-Slider-tick"></div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 75%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
       <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick is-disabled">
@@ -297,19 +300,22 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
-            <div class="spectrum-Slider-tick"></div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-15">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 75%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
   - id: slider-tick
@@ -322,7 +328,6 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick">
               <div class="spectrum-Slider-tickLabel">0</div>
@@ -343,19 +348,24 @@ examples:
               <div class="spectrum-Slider-tickLabel">100</div>
             </div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 40%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
+
       <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick">
               <div class="spectrum-Slider-tickLabel">0</div>
@@ -376,10 +386,15 @@ examples:
               <div class="spectrum-Slider-tickLabel">100</div>
             </div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-13">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 40%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
   - id: slider-ramp
diff --git a/site/resources/js/enhancement.js b/site/resources/js/enhancement.js
index 6f044ed4d51..134c6689d83 100644
--- a/site/resources/js/enhancement.js
+++ b/site/resources/js/enhancement.js
@@ -558,7 +558,7 @@ function makeDoubleSlider(slider) {
     var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft;
 
     var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
-    var percent = (x / sliderOffsetWidth) * 100;
+    var percent = Math.round((x / sliderOffsetWidth) * 100);
 
     if (isRTL()) {
       percent = 100 - percent;
@@ -624,6 +624,7 @@ function makeSlider(slider) {
   var handles = slider.querySelectorAll('.spectrum-Slider-handle');
   var handle = handles[0];
   var isColor = slider.classList.contains('spectrum-Slider--color');
+  var value = slider.querySelector('.spectrum-Slider-value');
   var fill = slider.querySelector('.spectrum-Slider-fill');
 
   if (handles.length > 1) {
@@ -655,12 +656,16 @@ function makeSlider(slider) {
     var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft;
 
     var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
-    var percent = (x / sliderOffsetWidth) * 100;
+    var percent = Math.round((x / sliderOffsetWidth) * 100);
 
     if (isRTL()) {
       percent = 100 - percent;
     }
 
+    if (value) {
+      value.innerText = percent;
+    }
+
     if (leftTrack && rightTrack && !isColor) {
       leftTrack.style.width = percent + '%';
       rightTrack.style.width = (100 - percent) + '%';

From 8d4ddb4b9052c2122fe732c1e0579e47ec71b0ae Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 20 Dec 2022 22:31:06 +0100
Subject: [PATCH 15/52] feat: slider tick position

---
 components/slider/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 6fb37a0f1c5..c207b1fa19c 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -193,7 +193,7 @@ governing permissions and limitations under the License.
     inset-inline-start: auto;
     inset-inline-end: auto;
     margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-
+                             
   }
 
 }
@@ -277,7 +277,6 @@ governing permissions and limitations under the License.
   display: inline-block;
   box-sizing: border-box;
 
-
   inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
   block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
@@ -401,7 +400,8 @@ governing permissions and limitations under the License.
   z-index: 0;
 
   margin: 0 var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-  margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) -2px);
+  margin-block-start: calc(var(--spectrum-slider-height-size) / 2 - var(--spectrum-slider-tick-mark-height) / 2);
+
 }
 
 .spectrum-Slider-tick {

From 093e0c5c3e87d07f4a5987ab835e63d053fa3a0c Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 11 Jan 2023 18:31:40 +0100
Subject: [PATCH 16/52] feat: border-width down change (follow up on #1154)

---
 components/slider/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index c207b1fa19c..e7a84aba6c3 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -22,6 +22,8 @@ governing permissions and limitations under the License.
   /* --spectrum-global-dimension-size-25 2px for Spectrum,   --spectrum-global-dimension-size-10 1px for Express */
   --spectrum-slider-ramp-track-height: 16px;
   /* dimension-size-200 */
+
+  
 }
 
 .spectrum--large {
@@ -29,7 +31,6 @@ governing permissions and limitations under the License.
   --spectrum-slider-tick-mark-width: 2px;
   --spectrum-slider-tick-mark-border-radius: 2px;
   --spectrum-slider-ramp-track-height: 20px;
-  /* dimension-size-200 */
 }
 
 .spectrum-Slider--sizeS {
@@ -265,7 +266,6 @@ governing permissions and limitations under the License.
   &+.spectrum-Slider-handle {
     margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 - 5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
   }
-
 }
 
 .spectrum-Slider-handle {
@@ -295,7 +295,7 @@ governing permissions and limitations under the License.
   &:active,
   &.is-focused,
   &.is-dragged {
-    border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
+    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   }
 
   &:active,

From 1a321e8654a1d68fa72ccd80e25d0df898c3f26b Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 11 Jan 2023 22:58:37 +0100
Subject: [PATCH 17/52] feat: fill color for handle, variant ramp and ticks
 (from #1154)

---
 components/slider/index.css           | 11 ++++++++++-
 components/slider/themes/express.css  |  2 ++
 components/slider/themes/spectrum.css |  2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index e7a84aba6c3..c1cca14c808 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -392,7 +392,7 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
 }
 
-/* Slider misses core-tokens for tick */
+/* Slider misses core-tokens for tick variant */
 .spectrum-Slider-ticks {
   display: flex;
   justify-content: space-between;
@@ -402,6 +402,12 @@ governing permissions and limitations under the License.
   margin: 0 var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
   margin-block-start: calc(var(--spectrum-slider-height-size) / 2 - var(--spectrum-slider-tick-mark-height) / 2);
 
+  /* missing core-token for handle fill-color */
+  &~.spectrum-Slider-handleContainer {
+    .spectrum-Slider-handle {
+      background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
+    }
+  }
 }
 
 .spectrum-Slider-tick {
@@ -567,6 +573,9 @@ governing permissions and limitations under the License.
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
 
+    /* currently in tokens v5.0.0 the background-color for the handle are not yet defined */
+    background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
+
     @media (forced-colors: active) {
       forced-color-adjust: none;
       box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index 9114b736f22..d9fbf76ac65 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -20,6 +20,8 @@ governing permissions and limitations under the License.
 
         --spectrum-slider-handle-background-color: var(--spectrum-gray-50);
         --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50);
+        --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50);
+        --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50);
         --spectrum-slider-handle-border-color: var(--spectrum-gray-800);
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
 
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index f0edeae1d1c..8d6fee36375 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -22,6 +22,8 @@ governing permissions and limitations under the License.
 
         --spectrum-slider-handle-background-color: transparent;
         --spectrum-slider-handle-background-color-disabled: transparent;
+        --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
+        --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
         --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
 

From c8410f6ef1050d572e18c6b5645e72b1dd8cf65a Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 12 Jan 2023 19:51:43 +0100
Subject: [PATCH 18/52] feat: border-width adjustment for handle-down

---
 components/slider/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index c1cca14c808..145ece2f77a 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -73,7 +73,6 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
   --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   --spectrum-slider-handle-border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
   --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
   --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);

From 4bb2b81500fd1440bb8ae9b19fe4c984d85b4795 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 12 Jan 2023 20:00:48 +0100
Subject: [PATCH 19/52] feat: removing commented out width calculations

---
 components/slider/index.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 145ece2f77a..c3c83b6b078 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -482,13 +482,11 @@ governing permissions and limitations under the License.
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  /* width: calc(100% + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))); */
   width: calc(100% + var(--spectrum-slider-handle-size));
 
   position: absolute;
   top: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
 
-  /* margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)))/ 2 * -1); */
   margin-left: calc(var(--spectrum-slider-handle-size) / 2 * -1);
 }
 

From 05e271cd9a1a6a7c02e44bdfe3f245a3d9336e9f Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 23 Jan 2023 13:39:01 -0700
Subject: [PATCH 20/52] feat: widths, top, height in sizes and starts

---
 components/slider/index.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index c3c83b6b078..99b913bf185 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -482,16 +482,17 @@ governing permissions and limitations under the License.
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  width: calc(100% + var(--spectrum-slider-handle-size));
+  inline-size: calc(100% + var(--spectrum-slider-handle-size));
 
   position: absolute;
-  top: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
+  inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
 
-  margin-left: calc(var(--spectrum-slider-handle-size) / 2 * -1);
+  /* margin-left: calc(var(--spectrum-slider-handle-size) / 2 * -1); */
+  margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
 }
 
 .spectrum-Slider-trackContainer {
-  height: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
+  block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
 
   /* stop edges from peeking out */
   overflow: hidden;

From 12fe7fcd328ef82a575b94d038c4af3a0fe0aebf Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 23 Jan 2023 14:05:34 -0700
Subject: [PATCH 21/52] feat: sizing widths and heights, including animations

---
 components/slider/index.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 99b913bf185..f4584522e7f 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -312,11 +312,11 @@ governing permissions and limitations under the License.
     top: 50%;
 
     transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-      width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-      height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
+      inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+      block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
 
-    width: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    height: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
     transform: translate(-50%, -50%);
 
@@ -325,8 +325,8 @@ governing permissions and limitations under the License.
 
   &.is-focused {
     &:before {
-      width: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-      height: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+      inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+      block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
     }
   }
 }

From eadc91c2ef62d5e1d8779b1879ef09da4737f20e Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 24 Jan 2023 16:30:59 -0700
Subject: [PATCH 22/52] feat: remove double-mods and contrast mods

---
 components/slider/index.css | 82 ++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index f4584522e7f..1c6ac361ec1 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -22,8 +22,6 @@ governing permissions and limitations under the License.
   /* --spectrum-global-dimension-size-25 2px for Spectrum,   --spectrum-global-dimension-size-10 1px for Express */
   --spectrum-slider-ramp-track-height: 16px;
   /* dimension-size-200 */
-
-  
 }
 
 .spectrum--large {
@@ -34,67 +32,67 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider--sizeS {
-  --spectrum-slider-handle-size: var(--mod-slider-handle-size-small, var(--spectrum-slider-handle-size-small));
-  --spectrum-slider-control-height: var(--mod-slider-control-height-small, var(--spectrum-slider-control-height-small));
-  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-small, var(--spectrum-slider-bottom-to-handle-small));
-  --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-small, var(--spectrum-slider-handle-border-width-down-small));
+  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+  --spectrum-slider-control-height: var(--spectrum-slider-control-height-small);
+  --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-small);
+  --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
 }
 
 .spectrum-Slider--sizeM {
-  --spectrum-slider-handle-size: var(--mod-slider-handle-size-medium, var(--spectrum-slider-handle-size-medium));
-  --spectrum-slider-control-height: var(--mod-slider-control-height-medium, var(--spectrum-slider-control-height-medium));
-  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-medium, var(--spectrum-slider-bottom-to-handle-medium));
-  --spectrum-slider-handle-border-radius: var(--mod-corner-radius-200, var(--spectrum-corner-radius-200));
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-medium, var(--spectrum-slider-handle-border-width-down-medium));
+  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+  --spectrum-slider-control-height: var(--spectrum-slider-control-height-medium);
+  --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-medium);
+  --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
 }
 
 .spectrum-Slider--sizeL {
-  --spectrum-slider-handle-size: var(--mod-slider-handle-size-large, var(--spectrum-slider-handle-size-large));
-  --spectrum-slider-control-height: var(--mod-slider-control-height-large, var(--spectrum-slider-control-height-large));
-  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-large, var(--spectrum-slider-bottom-to-handle-large));
-  --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 2);
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-large, var(--spectrum-slider-handle-border-width-down-large));
+  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+  --spectrum-slider-control-height: var(--spectrum-slider-control-height-large);
+  --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-large);
+  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200))* 2);
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
 }
 
 .spectrum-Slider--sizeXL {
-  --spectrum-slider-handle-size: var(--mod-slider-handle-size-extra-large, var(--spectrum-slider-handle-size-extra-large));
-  --spectrum-slider-control-height: var(--mod-slider-control-height-extra-large, var(--spectrum-slider-control-height-extra-large));
-  --spectrum-slider-bottom-to-handle: var(--mod-slider-bottom-to-handle-extra-large, var(--spectrum-slider-bottom-to-handle-extra-large));
-  --spectrum-slider-handle-border-radius: calc(var(--mod-corner-radius-200, var(--spectrum-corner-radius-200)) * 4);
-  --spectrum-slider-handle-border-width-down: var(--mod-slider-handle-border-width-down-extra-large, var(--spectrum-slider-handle-border-width-down-extra-large));
+  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+  --spectrum-slider-control-height: var(--spectrum-slider-control-height-extra-large);
+  --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-extra-large);
+  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
 }
 
 .spectrum-Slider {
-  --spectrum-slider-cjk-line-height: var(--mod-line-height-cjk-100, var(--spectrum-line-height-cjk-100));
+  --spectrum-slider-cjk-line-height: var(--spectrum-line-height-cjk-100);
 
-  --spectrum-slider-min-size: var(--mod-spacing-900, var(--spectrum-spacing-900));
-  --spectrum-slider-height-size: var(--mod-component-height-200, var(--spectrum-component-height-200));
+  --spectrum-slider-min-size: var(--spectrum-spacing-900);
+  --spectrum-slider-height-size: var(--spectrum-component-height-200);
 
-  --spectrum-slider-track-corner-radius: var(--mod-corner-radius-75, var(--spectrum-corner-radius-75));
-  --spectrum-slider-label-margin-start: var(--mod-spacing-300, var(--spectrum-spacing-300));
-  --spectrum-slider-handle-border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
-  --spectrum-slider-handle-margin-left: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2);
-  --spectrum-slider-controls-margin: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
-  --spectrum-slider-track-margin-offset: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * -1);
-  --spectrum-slider-track-middle-handleoffset: calc(var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)) + calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2));
-  --spectrum-slider-input-top-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 / 4);
+  --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+  --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+  --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+  --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
+  --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
+  --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
+  --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
+  --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
 
 
   /* aka 80px */
   /* colors */
-  --spectrum-slider-track-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
-  --spectrum-slider-track-fill-color-disabled: var(--highcontrast-disabled-background-color, var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)));
-  --spectrum-slider-handle-border-color-disabled: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
-  --spectrum-slider-label-text-color: var(--highcontrast-neutral-content-color-default, var(--mod-neutral-content-color-default, var(--spectrum-neutral-content-color-default)));
-  --spectrum-slider-label-text-color-disabled: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)));
+  --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+  --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
+  --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
+  --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
+  --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
 
-  --spectrum-slider-ramp-handle-border-color-active: var(--highcontrast-gray-100, var(--mod-gray-100, var(--spectrum-gray-100)));
+  --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
 
 
   /* values */
-  --spectrum-slider-input-left: calc(var(--mod-slider-handle-margin-left, var(--spectrum-slider-handle-margin-left)) / 4);
-  --spectrum-slider-track-handleoffset: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
+  --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
+  --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
 
   --spectrum-slider-ramp-margin-top: 0;
   --spectrum-slider-range-track-reset: 0;
@@ -193,9 +191,7 @@ governing permissions and limitations under the License.
     inset-inline-start: auto;
     inset-inline-end: auto;
     margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-                             
   }
-
 }
 
 .spectrum-Slider-fill {

From fe5b0e7014bdbfd86f30bd1c5605d5ca7b205c2e Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 24 Jan 2023 17:39:00 -0700
Subject: [PATCH 23/52] feat: use t-shirt sized handle size, move ramp forced
 colors bottom, HNY 2023

---
 components/slider/index.css           | 37 ++++++++++++---------------
 components/slider/package.json        |  2 +-
 components/slider/themes/express.css  |  2 +-
 components/slider/themes/spectrum.css |  2 +-
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 1c6ac361ec1..7375c117744 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -77,7 +77,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
   --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
   --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
-
+  --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
 
   /* aka 80px */
   /* colors */
@@ -121,14 +121,14 @@ governing permissions and limitations under the License.
   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));
   min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
-
+  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
   margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   vertical-align: top;
 }
 
 .spectrum-Slider-track,
 .spectrum-Slider-fill {
-  block-size: var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness));
+  block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
   box-sizing: border-box;
 
   position: absolute;
@@ -220,8 +220,6 @@ governing permissions and limitations under the License.
       &:before {
         border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
         border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
       }
     }
 
@@ -234,8 +232,6 @@ governing permissions and limitations under the License.
       &: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));
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
       }
     }
   }
@@ -569,13 +565,6 @@ governing permissions and limitations under the License.
 
     /* currently in tokens v5.0.0 the background-color for the handle are not yet defined */
     background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
-
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
-      border-color: ButtonText;
-      background-color: ButtonFace;
-    }
   }
 }
 
@@ -586,12 +575,10 @@ governing permissions and limitations under the License.
 .spectrum-Slider-tick {
   &:after {
     background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
-
     @media (forced-colors: active) {
       forced-color-adjust: none;
       background: ButtonText;
     }
-    
   }
 }
 
@@ -690,6 +677,15 @@ governing permissions and limitations under the License.
 
 
 @media (forced-colors: active) {
+  .spectrum-Slider--ramp {
+    .spectrum-Slider-handle {
+      forced-color-adjust: none;
+        box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
+        border-color: ButtonText;
+        background-color: ButtonFace;
+    }
+  }
+
   .spectrum-Slider {
     .spectrum-Slider-handle {
       &:before {
@@ -704,6 +700,7 @@ governing permissions and limitations under the License.
       }
     }
 
+
     --spectrum-slider-track-color: GrayText;
     --spectrum-slider-track-fill-color: GrayText;
 
@@ -738,10 +735,8 @@ governing permissions and limitations under the License.
 
     --spectrum-slider-ramp-handle-border-color-active: ButtonText;
 
-    .spectrum-Slider--ramp {
-      .spectrum-Slider-handle {
-        forced-color-adjust: none;
-      }
-    }
+
+
+
   }
 }
diff --git a/components/slider/package.json b/components/slider/package.json
index a2fd2ad944e..bff11c75210 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -18,7 +18,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/tokens": "^5.0.0"
+    "@spectrum-css/tokens": "^6.2.2"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^2.0.0",
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index d9fbf76ac65..0a78a4aa03d 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index 8d6fee36375..a0b7405b682 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 Adobe. All rights reserved.
+Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

From 5d869461c5a03d7623d4097b25168b58abd9d332 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 25 Jan 2023 15:20:57 -0700
Subject: [PATCH 24/52] feat: high contrast feedback

---
 components/slider/index.css | 39 ++++++++++---------------------------
 1 file changed, 10 insertions(+), 29 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 7375c117744..cec1bfebaff 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -494,6 +494,10 @@ governing permissions and limitations under the License.
 .spectrum-Slider-track {
   &::before {
     background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+
+    @media (forced-colors: active) {
+      background-color: ButtonText;
+    }
   }
 }
 
@@ -508,7 +512,6 @@ governing permissions and limitations under the License.
     &::before {
       background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
       @media (forced-colors: active) {
-        forced-color-adjust: none;
         background: ButtonText;
       }
     }
@@ -519,7 +522,6 @@ governing permissions and limitations under the License.
   &::before {
     background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
     @media (forced-colors: active) {
-      forced-color-adjust: none;
       background: ButtonText;
     }
   }
@@ -530,7 +532,6 @@ governing permissions and limitations under the License.
     fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
 
     @media (forced-colors: active) {
-      forced-color-adjust: none;
       fill: ButtonText;
     }
   }
@@ -565,6 +566,12 @@ governing permissions and limitations under the License.
 
     /* currently in tokens v5.0.0 the background-color for the handle are not yet defined */
     background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
+
+    @media (forced-colors: active) {
+      box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
+      border-color: ButtonText;
+      background-color: ButtonFace;
+    }
   }
 }
 
@@ -576,7 +583,6 @@ governing permissions and limitations under the License.
   &:after {
     background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
     @media (forced-colors: active) {
-      forced-color-adjust: none;
       background: ButtonText;
     }
   }
@@ -641,7 +647,6 @@ governing permissions and limitations under the License.
     .spectrum-Slider-ramp {
       @media (forced-colors: active) {
       & + .spectrum-Slider-handle {
-          forced-color-adjust: none;
           fill: ButtonFace;
           background-color: ButtonFace;
         }
@@ -651,7 +656,6 @@ governing permissions and limitations under the License.
         fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
 
         @media (forced-colors: active) {
-          forced-color-adjust: none;
           fill: GrayText;
         }
       }
@@ -677,28 +681,8 @@ governing permissions and limitations under the License.
 
 
 @media (forced-colors: active) {
-  .spectrum-Slider--ramp {
-    .spectrum-Slider-handle {
-      forced-color-adjust: none;
-        box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
-        border-color: ButtonText;
-        background-color: ButtonFace;
-    }
-  }
 
   .spectrum-Slider {
-    .spectrum-Slider-handle {
-      &:before {
-        forced-color-adjust: none;
-      }
-    }
-
-    .spectrum-Slider-track {
-      &:before {
-        forced-color-adjust: none;
-        background-color: ButtonText;
-      }
-    }
 
 
     --spectrum-slider-track-color: GrayText;
@@ -735,8 +719,5 @@ governing permissions and limitations under the License.
 
     --spectrum-slider-ramp-handle-border-color-active: ButtonText;
 
-
-
-
   }
 }

From 6009b95ade333fe986af88e4cf10a54fd3d587e4 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Wed, 25 Jan 2023 16:23:29 -0700
Subject: [PATCH 25/52] feat: custom vars for ticks

---
 components/slider/index.css | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index cec1bfebaff..3cb389216b5 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -12,24 +12,7 @@ governing permissions and limitations under the License.
 
 
 
-/* missing tokens for variant with Tick, also need t-shirt sizing */
-.spectrum--medium {
-  --spectrum-slider-tick-mark-height: 10px;
-  /* --spectrum-global-dimension-size-125 */
-  --spectrum-slider-tick-mark-width: 2px;
-  /* --spectrum-global-dimension-size-25: */
-  --spectrum-slider-tick-mark-border-radius: 2px;
-  /* --spectrum-global-dimension-size-25 2px for Spectrum,   --spectrum-global-dimension-size-10 1px for Express */
-  --spectrum-slider-ramp-track-height: 16px;
-  /* dimension-size-200 */
-}
 
-.spectrum--large {
-  --spectrum-slider-tick-mark-height: 13px;
-  --spectrum-slider-tick-mark-width: 2px;
-  --spectrum-slider-tick-mark-border-radius: 2px;
-  --spectrum-slider-ramp-track-height: 20px;
-}
 
 .spectrum-Slider--sizeS {
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
@@ -78,6 +61,8 @@ governing permissions and limitations under the License.
   --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
   --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
   --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
+  --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
+  --spectrum-slider-tick-mark-border-radius: 2px;
 
   /* aka 80px */
   /* colors */
@@ -568,6 +553,8 @@ governing permissions and limitations under the License.
     background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
 
     @media (forced-colors: active) {
+      /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
+      forced-color-adjust: none;
       box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
       border-color: ButtonText;
       background-color: ButtonFace;
@@ -683,8 +670,6 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
 
   .spectrum-Slider {
-
-
     --spectrum-slider-track-color: GrayText;
     --spectrum-slider-track-fill-color: GrayText;
 

From dd8b6ed1b787c48af773c751c99eed7aaeaab742 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 26 Jan 2023 13:58:02 -0700
Subject: [PATCH 26/52] feat: t-shirt size default

---
 components/slider/index.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 3cb389216b5..ef4ff1d59f0 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -11,7 +11,14 @@ governing permissions and limitations under the License.
 */
 
 
-
+.spectrum-Slider {
+  /* default sizing, matches t-shirt size M */
+  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+  --spectrum-slider-control-height: var(--spectrum-slider-control-height-medium);
+  --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-medium);
+  --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+}
 
 
 .spectrum-Slider--sizeS {

From b3ecbac52f53ce0ac59b705600b6743039c20025 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 26 Jan 2023 21:39:08 -0700
Subject: [PATCH 27/52] feat: correct 32px height

---
 components/slider/index.css           | 28 +++++++++++++++++++--------
 components/slider/metadata/slider.yml |  4 ++--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index ef4ff1d59f0..eea5adab092 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -41,7 +41,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
   --spectrum-slider-control-height: var(--spectrum-slider-control-height-large);
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-large);
-  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200))* 2);
+  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
 }
 
@@ -57,7 +57,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-cjk-line-height: var(--spectrum-line-height-cjk-100);
 
   --spectrum-slider-min-size: var(--spectrum-spacing-900);
-  --spectrum-slider-height-size: var(--spectrum-component-height-200);
+  --spectrum-slider-height-size: var(--spectrum-component-height-100);
 
   --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
   --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
@@ -114,10 +114,14 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
   min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
   block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   vertical-align: top;
 }
 
+/* Sliders with ticks + tick mark labels require more space */
+.spectrum-Slider--tick {
+  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
+}
+
 .spectrum-Slider-track,
 .spectrum-Slider-fill {
   block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
@@ -246,15 +250,17 @@ governing permissions and limitations under the License.
     transform: logical rotate(0deg);
   }
 
-  &+.spectrum-Slider-handle {
+  /* &+.spectrum-Slider-handle {
     margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 - 5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
-  }
+  } */
 }
 
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
-  inset-block-start: calc(var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75)) + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2);
+
+
+
   z-index: 2;
 
   display: inline-block;
@@ -263,8 +269,14 @@ governing permissions and limitations under the License.
   inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
   block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
+  
+  inset-block-start: calc(
+    var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-bottom-to-handle)
+    + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))
+  );
+  margin-block: 0;
+
 
-  margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
   margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
   border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
   border-style: solid;
@@ -382,7 +394,7 @@ governing permissions and limitations under the License.
 
   z-index: 0;
 
-  margin: 0 var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+  margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)) ;
   margin-block-start: calc(var(--spectrum-slider-height-size) / 2 - var(--spectrum-slider-tick-mark-height) / 2);
 
   /* missing core-token for handle fill-color */
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index 8d6069e50a8..68ed9294864 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -322,7 +322,7 @@ examples:
     name: Tick with Labels
     description: Spectrum tick slider with labels
     markup: |
-      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12">Slider Label</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
@@ -360,7 +360,7 @@ examples:
         </div>
       </div>
 
-      <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
+      <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick is-disabled">
         <div class="spectrum-Slider-labelContainer">
           <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>

From da4d4acdaab77a5955731a4e88fb363a2242b2f0 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 26 Jan 2023 22:12:41 -0700
Subject: [PATCH 28/52] feat: high-contrast mode simplifications

---
 components/slider/index.css | 43 ++++++++++++-------------------------
 1 file changed, 14 insertions(+), 29 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index eea5adab092..f78eba145ea 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -249,10 +249,6 @@ governing permissions and limitations under the License.
     /* Flip the ramp automatically for RTL */
     transform: logical rotate(0deg);
   }
-
-  /* &+.spectrum-Slider-handle {
-    margin-block: calc(var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle)) * -1 - 5px + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))) 0;
-  } */
 }
 
 .spectrum-Slider-handle {
@@ -498,10 +494,6 @@ governing permissions and limitations under the License.
 .spectrum-Slider-track {
   &::before {
     background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
-
-    @media (forced-colors: active) {
-      background-color: ButtonText;
-    }
   }
 }
 
@@ -515,9 +507,6 @@ governing permissions and limitations under the License.
   .spectrum-Slider-track:first-child {
     &::before {
       background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-      @media (forced-colors: active) {
-        background: ButtonText;
-      }
     }
   }
 }
@@ -525,19 +514,12 @@ governing permissions and limitations under the License.
 .spectrum-Slider-fill {
   &::before {
     background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-    @media (forced-colors: active) {
-      background: ButtonText;
-    }
   }
 }
 
 .spectrum-Slider-ramp {
   path {
     fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
-
-    @media (forced-colors: active) {
-      fill: ButtonText;
-    }
   }
 }
 
@@ -588,9 +570,6 @@ governing permissions and limitations under the License.
 .spectrum-Slider-tick {
   &:after {
     background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
-    @media (forced-colors: active) {
-      background: ButtonText;
-    }
   }
 }
 
@@ -651,19 +630,16 @@ governing permissions and limitations under the License.
     }
 
     .spectrum-Slider-ramp {
+      /* Slider handle turns transparent in high contrast mode for ramp */
       @media (forced-colors: active) {
-      & + .spectrum-Slider-handle {
-          fill: ButtonFace;
-          background-color: ButtonFace;
-        }
+        & + .spectrum-Slider-handle {
+            fill: ButtonFace;
+            background-color: ButtonFace;
+          }
       }
 
       path {
         fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
-
-        @media (forced-colors: active) {
-          fill: GrayText;
-        }
       }
     }
 
@@ -695,6 +671,15 @@ governing permissions and limitations under the License.
     --spectrum-slider-track-color-disabled: GrayText;
     --spectrum-slider-track-fill-color-disabled: GrayText;
 
+    /*  over-writes */
+    --highcontrast-slider-track-color: ButtonText;
+    --highcontrast-slider-track-fill-color: ButtonText;
+    --highcontrast-slider-track-fill-color: ButtonText;
+    --highcontrast-slider-ramp-track-color: ButtonText;
+    --highcontrast-slider-ramp-track-color-disabled: GrayText;
+    --highcontrast-slider-tick-mark-color: ButtonText;
+
+
     --spectrum-slider-track-color: ButtonText;
     --spectrum-slider-track-fill-color: ButtonText;
     --spectrum-slider-ramp-track-color: ButtonText;

From 99d2a75611c253d16e460386991c2e0b6d84b47b Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 30 Jan 2023 14:59:44 -0700
Subject: [PATCH 29/52] feat: slider control height now 16px

---
 components/slider/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index f78eba145ea..6f288f5d54c 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -112,7 +112,7 @@ governing permissions and limitations under the License.
   /* 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));
-  min-block-size: var(--mod-slider-height-size, var(--spectrum-slider-height-size));
+  min-block-size: ar(--mod-slider-control-height, var(--spectrum-slider-control-height));
   block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
   vertical-align: top;
 }

From 6832d1df4bf505f10f7f3f2f417720454477a614 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Mon, 30 Jan 2023 16:35:47 -0700
Subject: [PATCH 30/52] feat: adding margin to the bottom of handle

---
 components/slider/index.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 6f288f5d54c..0c1f00d4dfd 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -112,7 +112,7 @@ governing permissions and limitations under the License.
   /* 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));
-  min-block-size: ar(--mod-slider-control-height, var(--spectrum-slider-control-height));
+  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
   vertical-align: top;
 }
@@ -255,8 +255,6 @@ governing permissions and limitations under the License.
   position: absolute;
   inset-inline-start: 0;
 
-
-
   z-index: 2;
 
   display: inline-block;
@@ -272,7 +270,7 @@ governing permissions and limitations under the License.
   );
   margin-block: 0;
 
-
+  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
   border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
   border-style: solid;

From 9028ffea2b8b8ce6ade72d89baaa1bde2ecfa11e Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Tue, 31 Jan 2023 15:31:38 -0700
Subject: [PATCH 31/52] feat: more control spacing for tick-variant

---
 components/slider/index.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 0c1f00d4dfd..8133bd035f7 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -119,7 +119,9 @@ governing permissions and limitations under the License.
 
 /* Sliders with ticks + tick mark labels require more space */
 .spectrum-Slider--tick {
-  margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
+  margin-block-end: calc(2 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)));
+  .spectrum-Slider-controls {
+  }
 }
 
 .spectrum-Slider-track,
@@ -455,6 +457,10 @@ governing permissions and limitations under the License.
       inset-inline-end: 0;
     }
   }
+
+
+
+  
 }
 
 

From 15e2d830de266e74471a832db899b2410e20d6b8 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 2 Feb 2023 11:59:32 -0800
Subject: [PATCH 32/52] feat: cjk rename

---
 components/slider/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 8133bd035f7..bfb59dacec1 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -54,7 +54,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider {
-  --spectrum-slider-cjk-line-height: var(--spectrum-line-height-cjk-100);
+  --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
 
   --spectrum-slider-min-size: var(--spectrum-spacing-900);
   --spectrum-slider-height-size: var(--spectrum-component-height-100);
@@ -114,6 +114,7 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
   margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
   block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
   vertical-align: top;
 }
 

From cc0ff5cb4c00e55fd8be714009f71d7b545f8ecf Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Thu, 2 Feb 2023 14:05:44 -0800
Subject: [PATCH 33/52] feat: updated label margin

---
 components/slider/index.css                   | 19 +++++++++++++------
 .../custom-spectrum/custom-large-vars.css     |  1 +
 .../custom-spectrum/custom-medium-vars.css    |  1 +
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index bfb59dacec1..28f140e1fc8 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -113,16 +113,19 @@ governing permissions and limitations under the License.
   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));
   margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
-  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+
+  /* At the moment of February 2023 we need to double the control-height size to 32px to ensure the correct height.
+    An update to the tokens in the works to reflect this change. */
+  block-size: calc(2 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)));
+  /* block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); */
   vertical-align: top;
 }
 
-/* Sliders with ticks + tick mark labels require more space */
+/* Sliders with ticks + tick mark labels require more margin-block-end.
+ As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants, 
+ using control-height here instead.  */
 .spectrum-Slider--tick {
-  margin-block-end: calc(2 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)));
-  .spectrum-Slider-controls {
-  }
+  margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
 }
 
 .spectrum-Slider-track,
@@ -357,6 +360,10 @@ governing permissions and limitations under the License.
   font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
   margin-block-end: var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75));
 
+ /* February 2023: custom scaled tokens for label margin block end 
+  that will be replaced with an updated token for Slider component-bottom-to-text-75 */
+
+  margin-block-end: var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end));
   line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
   /* international support */
diff --git a/components/tokens/custom-spectrum/custom-large-vars.css b/components/tokens/custom-spectrum/custom-large-vars.css
index 35dd58824e5..74f9306d2a1 100644
--- a/components/tokens/custom-spectrum/custom-large-vars.css
+++ b/components/tokens/custom-spectrum/custom-large-vars.css
@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-tick-mark-height: 13px;
   --spectrum-slider-ramp-track-height: 20px;
+  --spectrum-slider-label-margin-block-end: 10px;
 
   --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
   --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
diff --git a/components/tokens/custom-spectrum/custom-medium-vars.css b/components/tokens/custom-spectrum/custom-medium-vars.css
index cb418cd153d..07ff9999213 100644
--- a/components/tokens/custom-spectrum/custom-medium-vars.css
+++ b/components/tokens/custom-spectrum/custom-medium-vars.css
@@ -45,4 +45,5 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-checkmark-width-extra-large: 14px;
 
   --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+  --spectrum-slider-label-margin-block-end: 8px;
 }

From c260f78e12f75e8c472ab984b58ca9b7d08b28e8 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Fri, 3 Feb 2023 12:24:09 -0800
Subject: [PATCH 34/52] feat: slider label block-end margins via design update

---
 components/slider/index.css                   | 28 +++++++++++++------
 .../custom-spectrum/custom-large-vars.css     |  4 +++
 .../custom-spectrum/custom-medium-vars.css    |  4 +++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 28f140e1fc8..a6950056e7e 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -27,6 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-small);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-small);
 }
 
 .spectrum-Slider--sizeM {
@@ -35,6 +36,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-medium);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-medium);
 }
 
 .spectrum-Slider--sizeL {
@@ -43,6 +45,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-large);
 }
 
 .spectrum-Slider--sizeXL {
@@ -51,6 +54,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-extra-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-extra-large);
 }
 
 .spectrum-Slider {
@@ -353,18 +357,27 @@ governing permissions and limitations under the License.
 .spectrum-Slider-labelContainer {
   display: flex;
   position: relative;
-
   inline-size: auto;
 
   padding-block-start: var(--mod-component-top-to-text-75, var(--spectrum-component-top-to-text-75));
   font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
-  margin-block-end: var(--mod-component-bottom-to-text-75, var(--spectrum-component-bottom-to-text-75));
+  line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
- /* February 2023: custom scaled tokens for label margin block end 
-  that will be replaced with an updated token for Slider component-bottom-to-text-75 */
+  /* margin between label and slider controls are based on the baseline of the label,
+    calculating the pixel difference for an accurate margin end */
+  --slider-label-baseline-margin: calc(
+    var(--spectrum-line-height-100) *  var(--spectrum-font-size-75)
+    - var(--spectrum-font-size-75)
+  );
+
+ /* February 2023: custom t-shirt sized token slider-label-margin-block-end for label margin block end 
+  that will be replaced with updated tokens for Slider component-bottom-to-text-75 */
+  margin-block-end: 
+    calc(
+       -1 * var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end)) 
+       - var(--mod-label-baseline-margin, var(--slider-label-baseline-margin))
+    );
 
-  margin-block-end: var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end));
-  line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
   /* international support */
   &:lang(ja),
@@ -465,9 +478,6 @@ governing permissions and limitations under the License.
       inset-inline-end: 0;
     }
   }
-
-
-
   
 }
 
diff --git a/components/tokens/custom-spectrum/custom-large-vars.css b/components/tokens/custom-spectrum/custom-large-vars.css
index 74f9306d2a1..b90713444d4 100644
--- a/components/tokens/custom-spectrum/custom-large-vars.css
+++ b/components/tokens/custom-spectrum/custom-large-vars.css
@@ -46,4 +46,8 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-checkmark-width-extra-large: 16px;
 
   --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+  --spectrum-slider-label-margin-block-end-small: -6px;
+  --spectrum-slider-label-margin-block-end-medium: -10px;
+  --spectrum-slider-label-margin-block-end-large: -14px;
+  --spectrum-slider-label-margin-block-end-extra-large: -17px;
 }
diff --git a/components/tokens/custom-spectrum/custom-medium-vars.css b/components/tokens/custom-spectrum/custom-medium-vars.css
index 07ff9999213..b4d4c619765 100644
--- a/components/tokens/custom-spectrum/custom-medium-vars.css
+++ b/components/tokens/custom-spectrum/custom-medium-vars.css
@@ -46,4 +46,8 @@ governing permissions and limitations under the License.
 
   --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
   --spectrum-slider-label-margin-block-end: 8px;
+  --spectrum-slider-label-margin-block-end-small: -5px;
+  --spectrum-slider-label-margin-block-end-medium: -8px;
+  --spectrum-slider-label-margin-block-end-large: -11px;
+  --spectrum-slider-label-margin-block-end-extra-large: -14px;
 }

From 7255a46d1bfc5a4dbf3ee90b0c30931429998cc9 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Fri, 3 Feb 2023 12:26:23 -0800
Subject: [PATCH 35/52] feat: 80px removal

---
 components/slider/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index a6950056e7e..60b78ac7134 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -75,7 +75,6 @@ governing permissions and limitations under the License.
   --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
   --spectrum-slider-tick-mark-border-radius: 2px;
 
-  /* aka 80px */
   /* colors */
   --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
   --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);

From 11f4b996d63e09369d915971f74fe979ad710b86 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Fri, 3 Feb 2023 15:17:37 -0800
Subject: [PATCH 36/52] feat: disabled tick-mark colors use disabled
 background-color token.

---
 components/slider/index.css           | 2 +-
 components/slider/themes/express.css  | 1 -
 components/slider/themes/spectrum.css | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 60b78ac7134..638ef26c987 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -81,7 +81,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
   --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
   --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
-
+  --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
   --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
 
 
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
index 0a78a4aa03d..e9f0f0c6523 100644
--- a/components/slider/themes/express.css
+++ b/components/slider/themes/express.css
@@ -26,7 +26,6 @@ governing permissions and limitations under the License.
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
 
         --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
-        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
 
         --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900);
         --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index a0b7405b682..e8ac8b4500a 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -28,7 +28,6 @@ governing permissions and limitations under the License.
         --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
 
         --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
-        --spectrum-slider-tick-mark-color-disabled: var(--spectrum-gray-200);
 
         --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
         --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);

From 55696eb974877a84f5b2f9f9de7a1b60320cfb0c Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt <bschmidt@adobe.com>
Date: Fri, 3 Feb 2023 20:04:19 -0800
Subject: [PATCH 37/52] feat: setting slider tick marks and label

---
 components/slider/index.css | 47 ++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 638ef26c987..5790571371b 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -403,6 +403,17 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
 }
 
+
+/* setting tick marks in relation to label */
+
+.spectrum-Slider-controls:has(.spectrum-Slider-ticks) {
+  margin-block-start:
+    calc(
+      var(--spectrum-text-to-visual-75)
+      - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+      - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+    );
+}
 /* Slider misses core-tokens for tick variant */
 .spectrum-Slider-ticks {
   display: flex;
@@ -410,8 +421,7 @@ governing permissions and limitations under the License.
 
   z-index: 0;
 
-  margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)) ;
-  margin-block-start: calc(var(--spectrum-slider-height-size) / 2 - var(--spectrum-slider-tick-mark-height) / 2);
+  margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 
   /* missing core-token for handle fill-color */
   &~.spectrum-Slider-handleContainer {
@@ -420,12 +430,36 @@ governing permissions and limitations under the License.
     }
   }
 }
+ 
+/* setting tick mark labels below track */
+.spectrum-Slider-tick:has(.spectrum-Slider-tickLabel) {
+  top: calc(
+    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+    - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+  ); 
+
+  .spectrum-Slider-tickLabel {
+    margin-block-start: 
+      calc(
+        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+        + var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+        + var(--spectrum-text-to-visual-75)
+      )
+    }
+  } 
 
 .spectrum-Slider-tick {
   position: relative;
 
   inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
 
+  /* tick marks are centered half based on slider track thickness and tick height  */
+  top: calc(
+    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+    - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+    ); 
+
+
   &:after {
     display: block;
     position: absolute;
@@ -442,10 +476,7 @@ governing permissions and limitations under the License.
     display: flex;
     align-items: center;
     justify-content: center;
-
-    margin-block: calc(var(--mod-text-to-visual-75, var(--spectrum-text-to-visual-75)) + var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height))) 0;
-
-    margin-inline: calc(var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start))) * -1) calc(var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)) * -1);
+  
 
     font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
     line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
@@ -477,7 +508,6 @@ governing permissions and limitations under the License.
       inset-inline-end: 0;
     }
   }
-  
 }
 
 
@@ -498,9 +528,8 @@ governing permissions and limitations under the License.
   inline-size: calc(100% + var(--spectrum-slider-handle-size));
 
   position: absolute;
-  inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - 1px);
+  inset-block-start: 0;
 
-  /* margin-left: calc(var(--spectrum-slider-handle-size) / 2 * -1); */
   margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
 }
 

From 8529c61ba7f0e33feed4071af85009f502dd34e6 Mon Sep 17 00:00:00 2001
From: Monet Fort <monet@heysparkbox.com>
Date: Mon, 6 Feb 2023 09:29:06 -0600
Subject: [PATCH 38/52] fix(slider): disabled tick label color

---
 components/slider/index.css | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 5790571371b..b9d242332e0 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -125,7 +125,7 @@ governing permissions and limitations under the License.
 }
 
 /* Sliders with ticks + tick mark labels require more margin-block-end.
- As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants, 
+ As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants,
  using control-height here instead.  */
 .spectrum-Slider--tick {
   margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
@@ -272,7 +272,7 @@ governing permissions and limitations under the License.
   inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
   block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
-  
+
   inset-block-start: calc(
     var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-bottom-to-handle)
     + var(--mod-slider-margin-top-offset, var(--spectrum-slider-margin-top-offset))
@@ -369,11 +369,11 @@ governing permissions and limitations under the License.
     - var(--spectrum-font-size-75)
   );
 
- /* February 2023: custom t-shirt sized token slider-label-margin-block-end for label margin block end 
+ /* February 2023: custom t-shirt sized token slider-label-margin-block-end for label margin block end
   that will be replaced with updated tokens for Slider component-bottom-to-text-75 */
-  margin-block-end: 
+  margin-block-end:
     calc(
-       -1 * var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end)) 
+       -1 * var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end))
        - var(--mod-label-baseline-margin, var(--slider-label-baseline-margin))
     );
 
@@ -410,7 +410,7 @@ governing permissions and limitations under the License.
   margin-block-start:
     calc(
       var(--spectrum-text-to-visual-75)
-      - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+      - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
       - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
     );
 }
@@ -430,23 +430,23 @@ governing permissions and limitations under the License.
     }
   }
 }
- 
+
 /* setting tick mark labels below track */
 .spectrum-Slider-tick:has(.spectrum-Slider-tickLabel) {
   top: calc(
-    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
     - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-  ); 
+  );
 
   .spectrum-Slider-tickLabel {
-    margin-block-start: 
+    margin-block-start:
       calc(
-        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
         + var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
         + var(--spectrum-text-to-visual-75)
       )
     }
-  } 
+  }
 
 .spectrum-Slider-tick {
   position: relative;
@@ -455,9 +455,9 @@ governing permissions and limitations under the License.
 
   /* tick marks are centered half based on slider track thickness and tick height  */
   top: calc(
-    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 
+    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
     - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-    ); 
+    );
 
 
   &:after {
@@ -476,7 +476,7 @@ governing permissions and limitations under the License.
     display: flex;
     align-items: center;
     justify-content: center;
-  
+
 
     font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
     line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
@@ -519,6 +519,10 @@ governing permissions and limitations under the License.
       cursor: default;
       pointer-events: none;
     }
+
+    .spectrum-Slider-tickLabel {
+      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+    }
   }
 }
 

From a6155a7b1a9522577b75320cc23cef3f7a462816 Mon Sep 17 00:00:00 2001
From: Monet Fort <monet@heysparkbox.com>
Date: Mon, 6 Feb 2023 14:38:47 -0600
Subject: [PATCH 39/52] fix(slider): refactor without :has

---
 components/slider/index.css | 42 ++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index b9d242332e0..8270b10b5cc 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -405,15 +405,26 @@ governing permissions and limitations under the License.
 
 
 /* setting tick marks in relation to label */
+.spectrum-Slider--tick {
+  .spectrum-Slider-controls {
+    margin-block-start:
+      calc(
+        var(--spectrum-text-to-visual-75)
+        - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
+        - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+      );
+  }
 
-.spectrum-Slider-controls:has(.spectrum-Slider-ticks) {
-  margin-block-start:
-    calc(
-      var(--spectrum-text-to-visual-75)
-      - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
-      - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-    );
+  .spectrum-Slider-tickLabel {
+    margin-block-start:
+      calc(
+        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
+        + var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
+        + var(--spectrum-text-to-visual-75)
+      );
+  }
 }
+
 /* Slider misses core-tokens for tick variant */
 .spectrum-Slider-ticks {
   display: flex;
@@ -431,23 +442,6 @@ governing permissions and limitations under the License.
   }
 }
 
-/* setting tick mark labels below track */
-.spectrum-Slider-tick:has(.spectrum-Slider-tickLabel) {
-  top: calc(
-    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
-    - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-  );
-
-  .spectrum-Slider-tickLabel {
-    margin-block-start:
-      calc(
-        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
-        + var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-        + var(--spectrum-text-to-visual-75)
-      )
-    }
-  }
-
 .spectrum-Slider-tick {
   position: relative;
 

From 5daf11652aaec770d9de20459df3e9b080c9ccab Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 6 Feb 2023 15:54:11 -0500
Subject: [PATCH 40/52] chore(slider): use latest tokens dependency

---
 components/slider/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/slider/package.json b/components/slider/package.json
index bff11c75210..e4c1f0c8f49 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/tokens": "^6.2.2"
+    "@spectrum-css/tokens": "^7.0.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^2.0.0",
-    "@spectrum-css/tokens": "^5.0.0",
+    "@spectrum-css/tokens": "^7.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

From eb377275a52171ae00b0e7962a1085dc660c3a43 Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 6 Feb 2023 16:00:56 -0500
Subject: [PATCH 41/52] chore(slider): manual version bump for beta release

---
 components/slider/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/slider/package.json b/components/slider/package.json
index e4c1f0c8f49..a8487f4a9f3 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",

From 3f544c04a090840a5d098a8421492e2c7b8bea0f Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 6 Feb 2023 16:19:59 -0500
Subject: [PATCH 42/52] fix(slider): resolve malformed CSS

---
 components/slider/index.css    | 1 -
 components/slider/package.json | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 8270b10b5cc..78c13d8a86f 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -249,7 +249,6 @@ governing permissions and limitations under the License.
   position: absolute;
   inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
   inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-  inset-block-start: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
 
   svg {
     inline-size: 100%;
diff --git a/components/slider/package.json b/components/slider/package.json
index a8487f4a9f3..c7dac030124 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",

From f16b83812e10e734ad3efae212a4c1bcd8f24518 Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 6 Feb 2023 17:15:44 -0500
Subject: [PATCH 43/52] fix(slider): resolve malformed syntax

---
 components/slider/index.css    | 6 +++---
 components/slider/package.json | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 78c13d8a86f..2087368c991 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -622,8 +622,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider-handle {
   &.is-dragged {
-    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down), var(--spectrum-slider-handle-border-color-down)));
-    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color), var(--spectrum-slider-handle-background-color)));
+    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
   }
 }
 
@@ -632,7 +632,7 @@ governing permissions and limitations under the License.
   .spectrum-Slider-track {
     &:not(:first-of-type):not(:last-of-type) {
       &:before {
-        background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color), var(--spectrum-slider-track-fill-color)));
+        background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
       }
     }
   }
diff --git a/components/slider/package.json b/components/slider/package.json
index c7dac030124..8ae3e8b8e85 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.4",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",

From 7a54cda5fad21ff32cac25ef79872f79445032d1 Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 21 Mar 2023 11:54:42 -0400
Subject: [PATCH 44/52] style(slider): add cursor pointer

---
 components/slider/index.css | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 2087368c991..3be163dbc82 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -108,9 +108,9 @@ governing permissions and limitations under the License.
 .spectrum-Slider-controls {
   display: inline-block;
   box-sizing: border-box;
-
   position: relative;
   z-index: auto;
+  cursor: pointer;
 
   /* 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);
@@ -262,7 +262,6 @@ governing permissions and limitations under the License.
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
-
   z-index: 2;
 
   display: inline-block;
@@ -503,22 +502,6 @@ governing permissions and limitations under the License.
   }
 }
 
-
-.spectrum-Slider {
-  &.is-disabled {
-    cursor: default;
-
-    .spectrum-Slider-handle {
-      cursor: default;
-      pointer-events: none;
-    }
-
-    .spectrum-Slider-tickLabel {
-      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-    }
-  }
-}
-
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
@@ -641,11 +624,22 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider {
   &.is-disabled {
+
+    .spectrum-Slider-controls {
+      cursor: default;
+    }
+
+    .spectrum-Slider-tickLabel {
+      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+    }
+
     .spectrum-Slider-labelContainer {
       color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
     }
 
     .spectrum-Slider-handle {
+      cursor: default;
+      pointer-events: none;
       border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
       background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
 

From 4e90e304d6398a5f472201e491bf7c233e605d39 Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 21 Mar 2023 11:58:46 -0400
Subject: [PATCH 45/52] chore(slider): remove unneeded classes and add headings
 to docs

---
 components/slider/metadata/slider.yml | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index 68ed9294864..e25a3c4b3da 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -39,6 +39,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item" style="width: 200px">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeS">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
@@ -60,7 +61,8 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item" style="width: 200px">
-          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeM">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
+          <div class="spectrum-Slider spectrum-Slider--sizeM">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -81,7 +83,8 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item" style="width: 200px">
-          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeL">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
+          <div class="spectrum-Slider spectrum-Slider--sizeL">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -90,7 +93,7 @@ examples:
               <div class="spectrum-Slider-track"></div>
             </div>
           </div>
-          <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled  spectrum-Slider--sizeL">
+          <div class="spectrum-Slider is-disabled spectrum-Slider--sizeL">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -102,7 +105,8 @@ examples:
         </div>
         
         <div class="spectrum-Examples-item" style="width: 200px">
-          <div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--sizeXL">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
+          <div class="spectrum-Slider spectrum-Slider--sizeXL">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -111,7 +115,7 @@ examples:
               <div class="spectrum-Slider-track"></div>
             </div>
           </div>
-          <div class="spectrum-Slider spectrum-Slider--sizeM is-disabled spectrum-Slider--sizeXL">
+          <div class="spectrum-Slider is-disabled spectrum-Slider--sizeXL">
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">

From 3e9f54973482ede39100f811095f2db92007a49f Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 21 Mar 2023 14:27:49 -0400
Subject: [PATCH 46/52] feat: update tokens package and added new tokens for
 bottom-to-text

---
 components/slider/index.css    |  47 ++++----
 components/slider/package.json |   4 +-
 components/slider/skin.css     | 206 ---------------------------------
 3 files changed, 26 insertions(+), 231 deletions(-)
 delete mode 100644 components/slider/skin.css

diff --git a/components/slider/index.css b/components/slider/index.css
index 3be163dbc82..6666df8975c 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -27,7 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-small);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-small);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-75);
 }
 
 .spectrum-Slider--sizeM {
@@ -36,7 +36,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-medium);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-medium);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-75);
 }
 
 .spectrum-Slider--sizeL {
@@ -45,7 +45,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-large);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-100);
 }
 
 .spectrum-Slider--sizeXL {
@@ -54,7 +54,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-extra-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-slider-label-margin-block-end-extra-large);
+  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-200);
 }
 
 .spectrum-Slider {
@@ -108,19 +108,16 @@ governing permissions and limitations under the License.
 .spectrum-Slider-controls {
   display: inline-block;
   box-sizing: border-box;
+  cursor: pointer;
   position: relative;
   z-index: auto;
-  cursor: pointer;
 
   /* 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));
   margin-block-end: var(--mod-slider-bottom-to-handle, var(--spectrum-slider-bottom-to-handle));
 
-  /* At the moment of February 2023 we need to double the control-height size to 32px to ensure the correct height.
-    An update to the tokens in the works to reflect this change. */
-  block-size: calc(2 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)));
-  /* block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); */
+  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
   vertical-align: top;
 }
 
@@ -262,6 +259,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider-handle {
   position: absolute;
   inset-inline-start: 0;
+
   z-index: 2;
 
   display: inline-block;
@@ -367,11 +365,9 @@ governing permissions and limitations under the License.
     - var(--spectrum-font-size-75)
   );
 
- /* February 2023: custom t-shirt sized token slider-label-margin-block-end for label margin block end
-  that will be replaced with updated tokens for Slider component-bottom-to-text-75 */
   margin-block-end:
     calc(
-       -1 * var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end))
+       var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end))
        - var(--mod-label-baseline-margin, var(--slider-label-baseline-margin))
     );
 
@@ -502,6 +498,22 @@ governing permissions and limitations under the License.
   }
 }
 
+
+.spectrum-Slider {
+  &.is-disabled {
+    cursor: default;
+
+    .spectrum-Slider-handle {
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .spectrum-Slider-tickLabel {
+      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+    }
+  }
+}
+
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
@@ -624,22 +636,11 @@ governing permissions and limitations under the License.
 
 .spectrum-Slider {
   &.is-disabled {
-
-    .spectrum-Slider-controls {
-      cursor: default;
-    }
-
-    .spectrum-Slider-tickLabel {
-      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-    }
-
     .spectrum-Slider-labelContainer {
       color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
     }
 
     .spectrum-Slider-handle {
-      cursor: default;
-      pointer-events: none;
       border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
       background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
 
diff --git a/components/slider/package.json b/components/slider/package.json
index 8ae3e8b8e85..a4b71367d1b 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/tokens": "^7.0.0"
+    "@spectrum-css/tokens": "^7.6.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^2.0.0",
-    "@spectrum-css/tokens": "^7.0.0",
+    "@spectrum-css/tokens": "^7.6.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
diff --git a/components/slider/skin.css b/components/slider/skin.css
deleted file mode 100644
index c9eb701cbbf..00000000000
--- a/components/slider/skin.css
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-.spectrum-Slider {
-  --spectrum-slider-m-focus-ring-size: var(
-    --spectrum-alias-focus-ring-size
-  );
-
-  /* todo: remove when fixed */
-  --spectrum-slider-m-handle-border-color-key-focus: var(
-    --spectrum-global-color-gray-800
-  );
-  --spectrum-slider-m-handle-focus-ring-color-key-focus: var(
-    --spectrum-alias-focus-color
-  );
-  --spectrum-slider-m-label-text-color: var(--spectrum-alias-label-text-color);
-
-  --spectrum-slider-m-label-text-color-disabled: var(--spectrum-alias-text-color-disabled);
-}
-
-.spectrum-Slider-track {
-  &::before {
-    background: var(--spectrum-slider-m-track-color);
-  }
-}
-
-.spectrum-Slider-labelContainer {
-  color: var(--spectrum-slider-m-label-text-color);
-}
-
-.spectrum-Slider--filled {
-  .spectrum-Slider-track:first-child {
-    &::before {
-      background: var(--spectrum-slider-m-track-fill-color);
-    }
-  }
-}
-
-.spectrum-Slider-fill {
-  &::before {
-    background: var(--spectrum-slider-m-track-fill-color);
-  }
-}
-
-.spectrum-Slider-ramp {
-  path {
-    fill: var(--spectrum-slider-m-track-color);
-  }
-}
-
-.spectrum-Slider-handle {
-  border-color: var(--spectrum-slider-m-handle-border-color);
-  background: var(--spectrum-slider-m-handle-background-color);
-
-  &:hover {
-    border-color: var(--spectrum-slider-m-handle-border-color-hover);
-  }
-
-  &.is-focused {
-    border-color: var(--spectrum-slider-m-handle-border-color-key-focus);
-
-    &:before {
-      box-shadow: 0 0 0 var(--spectrum-slider-m-focus-ring-size)
-        var(--spectrum-slider-m-handle-focus-ring-color-key-focus);
-    }
-  }
-
-  &:active,
-  &.is-dragged {
-    border-color: var(--spectrum-slider-m-handle-border-color-down);
-  }
-}
-
-
-.spectrum-Slider--ramp {
-  .spectrum-Slider-handle {
-    /* We can't draw this one correctly without this hack : ( */
-    box-shadow: 0 0 0 var(--spectrum-slider-m-handle-gap) var(--spectrum-alias-background-color-default);
-  }
-}
-
-.spectrum-Slider-input {
-  background: transparent;
-}
-
-.spectrum-Slider-tick {
-  &:after {
-    background-color: var(--spectrum-slider-m-tick-mark-color);
-  }
-}
-
-
-.spectrum-Slider-handle {
-  &.is-dragged {
-    border-color: var(--spectrum-slider-m-handle-border-color-down);
-    background: var(--spectrum-slider-m-handle-background-color);
-  }
-}
-
-.spectrum-Slider--range {
-  .spectrum-Slider-track {
-    &:not(:first-of-type):not(:last-of-type) {
-      &:before {
-        background: var(--spectrum-slider-m-track-fill-color);
-      }
-    }
-  }
-}
-
-
-.spectrum-Slider {
-  &.is-disabled {
-    .spectrum-Slider-labelContainer {
-      color: var(--spectrum-slider-m-label-text-color-disabled);
-    }
-
-    .spectrum-Slider-handle {
-      border-color: var(--spectrum-slider-m-handle-border-color-disabled);
-      background: var(--spectrum-alias-background-color-default);
-
-      &:hover,
-      &:active {
-        border-color: var(--spectrum-slider-m-handle-border-color-disabled);
-        background: var(--spectrum-slider-m-handle-background-color);
-      }
-    }
-    .spectrum-Slider-track {
-      &::before {
-        background: var(--spectrum-slider-m-track-color-disabled);
-      }
-    }
-    &.spectrum-Slider--filled {
-      .spectrum-Slider-track:first-child {
-        &::before {
-          background: var(--spectrum-slider-m-track-fill-color-disabled);
-        }
-      }
-    }
-    .spectrum-Slider-fill {
-      &::before {
-        background: var(--spectrum-slider-m-track-fill-color-disabled);
-      }
-    }
-
-    .spectrum-Slider-ramp {
-      path {
-        fill: var(--spectrum-slider-ramp-track-color-disabled);
-      }
-    }
-
-
-    &.spectrum-Slider--range {
-      .spectrum-Slider-track {
-        &:not(:first-of-type):not(:last-of-type) {
-          &:before {
-            background: var(--spectrum-slider-m-track-fill-color-disabled);
-          }
-        }
-      }
-    }
-  }
-}
-@media (forced-colors: active) {
-  .spectrum-Slider {
-    .spectrum-Slider-handle {
-      &:before {
-        forced-color-adjust: none;
-      }
-    }
-    --spectrum-slider-m-handle-border-color-key-focus: Highlight;
-    --spectrum-alias-background-color-default: ButtonFace;
-    --spectrum-alias-focus-color: ButtonText;
-    --spectrum-alias-label-text-color: CanvasText;
-    --spectrum-alias-text-color-disabled: GrayText;
-    --spectrum-slider-m-handle-background-color: ButtonFace;
-    --spectrum-slider-m-handle-border-color: ButtonText;
-    --spectrum-slider-m-handle-border-color-disabled: GrayText;
-    --spectrum-slider-m-handle-border-color-down: Highlight;
-    --spectrum-slider-m-handle-border-color-hover: Highlight;
-    --spectrum-slider-m-handle-border-color-key-focus: Highlight;
-    --spectrum-slider-m-handle-focus-ring-color-key-focus: ButtonText;
-    --spectrum-slider-m-label-text-color: CanvasText;
-    --spectrum-slider-m-label-text-color-disabled: GrayText;
-    --spectrum-slider-m-tick-mark-color: ButtonText;
-    --spectrum-slider-m-track-color: ButtonText;
-    --spectrum-slider-m-track-color-disabled: GrayText;
-    --spectrum-slider-m-track-fill-color: ButtonText;
-    --spectrum-slider-m-track-fill-color-disabled: GrayText;
-    --spectrum-slider-ramp-track-color-disabled: GrayText;
-  }
-  .spectrum-Slider--ramp {
-    .spectrum-Slider-handle {
-      /* We can't draw this one correctly without this hack : ( */
-      forced-color-adjust: none;
-    }
-  }
-}

From 1b389744520806a1cd52f0778b317acbec0bd1ff Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 21 Mar 2023 15:20:43 -0400
Subject: [PATCH 47/52] refactor(slider): adding in updated tokens and label
 sizing to docs

---
 components/slider/index.css           | 29 ++++++++++++++++-----------
 components/slider/metadata/slider.yml |  8 ++++++++
 components/slider/package.json        |  2 ++
 components/slider/stories/template.js |  9 ++++-----
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index 6666df8975c..7671139be10 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -22,39 +22,47 @@ governing permissions and limitations under the License.
 
 
 .spectrum-Slider--sizeS {
+  --spectrum-slider-font-size: var(--spectrum-font-size-75);
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
   --spectrum-slider-control-height: var(--spectrum-slider-control-height-small);
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-small);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-slider-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 }
 
 .spectrum-Slider--sizeM {
+  --spectrum-slider-font-size: var(--spectrum-font-size-75);
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
   --spectrum-slider-control-height: var(--spectrum-slider-control-height-medium);
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-medium);
   --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-slider-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
 }
 
 .spectrum-Slider--sizeL {
+  --spectrum-slider-font-size: var(--spectrum-font-size-100);
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
   --spectrum-slider-control-height: var(--spectrum-slider-control-height-large);
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-100);
+  --spectrum-slider-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
 }
 
 .spectrum-Slider--sizeXL {
+  --spectrum-slider-font-size: var(--spectrum-font-size-200);
   --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
   --spectrum-slider-control-height: var(--spectrum-slider-control-height-extra-large);
   --spectrum-slider-bottom-to-handle: var(--spectrum-slider-bottom-to-handle-extra-large);
   --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
   --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
-  --spectrum-slider-label-margin-block-end: var(--spectrum-component-bottom-to-text-200);
+  --spectrum-slider-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
 }
 
 .spectrum-Slider {
@@ -355,21 +363,18 @@ governing permissions and limitations under the License.
   inline-size: auto;
 
   padding-block-start: var(--mod-component-top-to-text-75, var(--spectrum-component-top-to-text-75));
-  font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+  font-size: var(--mod-spectrum-slider-font-size, var(--spectrum-slider-font-size));
   line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
   /* margin between label and slider controls are based on the baseline of the label,
     calculating the pixel difference for an accurate margin end */
-  --slider-label-baseline-margin: calc(
+  /* --slider-label-baseline-margin: calc(
     var(--spectrum-line-height-100) *  var(--spectrum-font-size-75)
     - var(--spectrum-font-size-75)
-  );
+  ); */
 
-  margin-block-end:
-    calc(
-       var(--mod-spectrum-slider-label-margin-block-end, var(--spectrum-slider-label-margin-block-end))
-       - var(--mod-label-baseline-margin, var(--slider-label-baseline-margin))
-    );
+  margin-block-start: var(--mod-spectrum-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
+  margin-block-end: var(--mod-spectrum-slider-label-bottom-to-text, var(--spectrum-slider-label-bottom-to-text));
 
 
   /* international support */
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index e25a3c4b3da..fe8e3e92956 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -85,6 +85,10 @@ examples:
         <div class="spectrum-Examples-item" style="width: 200px">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeL">
+            <div class="spectrum-Slider-labelContainer">
+              <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
+              <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
+            </div>
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -107,6 +111,10 @@ examples:
         <div class="spectrum-Examples-item" style="width: 200px">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeXL">
+            <div class="spectrum-Slider-labelContainer">
+              <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
+              <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
+            </div>
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
diff --git a/components/slider/package.json b/components/slider/package.json
index a4b71367d1b..29e8d51d97f 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -18,10 +18,12 @@
     "build": "gulp"
   },
   "peerDependencies": {
+    "@spectrum-css/stepper": "^4.0.1",
     "@spectrum-css/tokens": "^7.6.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^2.0.0",
+    "@spectrum-css/stepper": "^4.0.1",
     "@spectrum-css/tokens": "^7.6.0",
     "gulp": "^4.0.0"
   },
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index d55f89e2dc8..f46c022e06b 100644
--- a/components/slider/stories/template.js
+++ b/components/slider/stories/template.js
@@ -6,7 +6,6 @@ import { ifDefined } from "lit-html/directives/if-defined.js";
 import { useArgs, useGlobals } from "@storybook/client-api";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
   rootClass = "spectrum-Slider",
@@ -16,7 +15,7 @@ export const Template = ({
   step = 2,
   values = [],
   variant,
-  fillColor,
+  fillColor = "rgb(213, 213, 213)",
   showTicks = false,
   isDisabled = false,
   isFocused = false,
@@ -107,10 +106,10 @@ export const Template = ({
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
       })}
       id=${ifDefined(id)}
-      style=${ifDefined(styleMap({
+      style=${styleMap({
         maxWidth: `var(--spectrum-global-dimension-size-3000)`,
-        ['--spectrum-slider-m-track-fill-color']: fillColor,
-      }))}
+        ['--spectrum-slider-track-color']: fillColor,
+      })}
       role=${ifDefined(values.length > 1 ? "group" : undefined)}
       aria-labelledby=${ifDefined(label && id ? `${id}-label` : undefined)}>
 

From 22f22d81ccef186a445b88281e131a2ea6d01ceb Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Wed, 22 Mar 2023 12:12:13 -0400
Subject: [PATCH 48/52] feat(slider): add gradient story

---
 components/slider/index.css                 | 3 +++
 components/slider/metadata/slider.yml       | 8 ++++++++
 components/slider/stories/slider.stories.js | 9 +++++++++
 components/slider/stories/template.js       | 2 ++
 4 files changed, 22 insertions(+)

diff --git a/components/slider/index.css b/components/slider/index.css
index 7671139be10..cea6df464cf 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -638,6 +638,9 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Slider .spectrum-Stepper {
+  margin-block-start: calc(-1 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2)
+}
 
 .spectrum-Slider {
   &.is-disabled {
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index fe8e3e92956..527cab7c6f7 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -41,6 +41,10 @@ examples:
         <div class="spectrum-Examples-item" style="width: 200px">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeS">
+            <div class="spectrum-Slider-labelContainer">
+              <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
+              <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
+            </div>
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
@@ -63,6 +67,10 @@ examples:
         <div class="spectrum-Examples-item" style="width: 200px">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeM">
+            <div class="spectrum-Slider-labelContainer">
+              <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
+              <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
+            </div>
             <div class="spectrum-Slider-controls">
               <div class="spectrum-Slider-track"></div>
               <div class="spectrum-Slider-handle" style="left: 40%;">
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 2835ecb3dd1..7dda06f7fc7 100644
--- a/components/slider/stories/slider.stories.js
+++ b/components/slider/stories/slider.stories.js
@@ -159,3 +159,12 @@ Disabled.args = {
   ...Default.args,
   isDisabled: true,
 };
+
+export const Gradient = Template.bind({});
+Gradient.args = {
+  ...Default.args,
+  style: {
+    "--spectrum-slider-track-color": "linear-gradient(to right, red, green 100%)",
+    "--spectrum-slider-track-color-rtl": "linear-gradient(to left, red, green 100%)"
+  }
+}
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index f46c022e06b..ff888394a3d 100644
--- a/components/slider/stories/template.js
+++ b/components/slider/stories/template.js
@@ -20,6 +20,7 @@ export const Template = ({
   isDisabled = false,
   isFocused = false,
   customClasses = [],
+  style = {},
   id,
   // ...globals
 }) => {
@@ -51,6 +52,7 @@ export const Template = ({
         style=${ifDefined(styleMap({
           [rtl ? 'right' : 'left']: position ? `${position}%` : undefined,
           width: width ? `${width}%` : undefined,
+          ...style
         }))}
       ></div>`;
   };

From d0f00a0e0e27ebe25662fe4187d38bf7641272cc Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Wed, 22 Mar 2023 14:37:18 -0400
Subject: [PATCH 49/52] docs(slider): added range variant instructions for
 three handles

---
 components/slider/metadata/slider.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index 527cab7c6f7..e1d7b0b151b 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -12,6 +12,9 @@ sections:
 
       ### Use class `is-dragged` instead of `u-isGrabbing`
       On `spectrum-Slider-handle` when dragging, use `is-dragged` instead of `u-isGrabbing`.
+
+      ### Three Handles is included in the `range` variant
+      When using a slider with three handles, classify it as a `range` variant to apply correct styling
 examples:
   - id: slider
     name: Standard

From 4df58aebd8a0ad0cfb453faf35750c4eae1680be Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Wed, 22 Mar 2023 14:58:45 -0400
Subject: [PATCH 50/52] chore(slider): add todos for tokens still needed

---
 components/slider/index.css | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index cea6df464cf..e2715769a42 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -129,7 +129,7 @@ governing permissions and limitations under the License.
   vertical-align: top;
 }
 
-/* Sliders with ticks + tick mark labels require more margin-block-end.
+/* TODO: Sliders with ticks + tick mark labels require more margin-block-end.
  As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants,
  using control-height here instead.  */
 .spectrum-Slider--tick {
@@ -366,13 +366,6 @@ governing permissions and limitations under the License.
   font-size: var(--mod-spectrum-slider-font-size, var(--spectrum-slider-font-size));
   line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
-  /* margin between label and slider controls are based on the baseline of the label,
-    calculating the pixel difference for an accurate margin end */
-  /* --slider-label-baseline-margin: calc(
-    var(--spectrum-line-height-100) *  var(--spectrum-font-size-75)
-    - var(--spectrum-font-size-75)
-  ); */
-
   margin-block-start: var(--mod-spectrum-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
   margin-block-end: var(--mod-spectrum-slider-label-bottom-to-text, var(--spectrum-slider-label-bottom-to-text));
 
@@ -424,7 +417,7 @@ governing permissions and limitations under the License.
   }
 }
 
-/* Slider misses core-tokens for tick variant */
+/* TODO: missing core-tokens for tick variant */
 .spectrum-Slider-ticks {
   display: flex;
   justify-content: space-between;
@@ -433,7 +426,7 @@ governing permissions and limitations under the License.
 
   margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 
-  /* missing core-token for handle fill-color */
+  /* TODO: missing core-token for handle fill-color */
   &~.spectrum-Slider-handleContainer {
     .spectrum-Slider-handle {
       background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
@@ -597,7 +590,7 @@ governing permissions and limitations under the License.
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
 
-    /* currently in tokens v5.0.0 the background-color for the handle are not yet defined */
+    /* TODO: currently in tokens v5.0.0 the background-color for the handle are not yet defined */
     background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
 
     @media (forced-colors: active) {

From 96521a4d3412a2547b9e30a6b1ecf163542c4b9f Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Mon, 27 Mar 2023 11:27:19 -0400
Subject: [PATCH 51/52] chore(slider): manual prerelease bump

---
 components/slider/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/slider/package.json b/components/slider/package.json
index 29e8d51d97f..62f3f3a7c67 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.5",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",

From e1460a50e7fee272132f0318d3fa8b1c93fd5049 Mon Sep 17 00:00:00 2001
From: Megan Logsdon <megan@heysparkbox.com>
Date: Tue, 28 Mar 2023 15:15:23 -0400
Subject: [PATCH 52/52] fix(slider): remove unneeded css

---
 components/slider/index.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/slider/index.css b/components/slider/index.css
index e2715769a42..f5d74ecaf9b 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -631,10 +631,6 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Slider .spectrum-Stepper {
-  margin-block-start: calc(-1 * var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2)
-}
-
 .spectrum-Slider {
   &.is-disabled {
     .spectrum-Slider-labelContainer {