@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/forms/_slider.scss

@@ -3,17 +3,17 @@
 // Sliders.
 //
 // Anatomy is the HTML. An <input type="range"> is the control. A wrapping
-// .slider is the host (.range and .range-field are the older names).
-// The plugin is Expressive.Slider; Expressive.Range is kept as an alias.
+// .slider is the host, or a <label> wrapping the input.
+// The plugin is Expressive.Slider.
 //
 // Variants (M3 Expressive):
 //   standard   default. Active from the start to the handle.
 //   .centered  active grows from the midpoint to the handle.
-//   dual       two inputs in one .range; active is between the handles.
+//   dual       two inputs in one .slider; active is between the handles.
 //
 // Orientation: horizontal (default) or .vertical.
 // Size on the host: default XS, .s / .small, .m / .medium, .l / .large, .xl.
-// Optional: a leading <i> (inset icon), .stops (discrete ticks), value
+// Optional: a leading icon (inset), .stops (discrete ticks), value
 // label (JS .thumb).
 //
 // Tokens follow https://m3.material.io/components/sliders/specs
@@ -32,7 +32,7 @@
 // M3 calls this component "Slider", so `.slider` is the name. It was the image
 // slideshow's host before 0.8.0. The slideshow is gone in 0.8.0, so the class
 // belongs to this component and nothing else.
-$_host: ".slider, .range, .range-field, label:has(> [type='range'])";
+$_host: ".slider, label:has(> [type='range'])";
 
 :is(#{$_host}),
 input[type="range"] {
@@ -43,7 +43,7 @@ input[type="range"] {
   --md-comp-slider-gap: 6px;
   --md-comp-slider-stop-size: 2px;
   --md-comp-slider-stop-inset: 8px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
   --md-comp-slider-active-track-color: var(--md-sys-color-primary);
   --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
   --md-comp-slider-handle-color: var(--md-sys-color-primary);
@@ -78,28 +78,28 @@ input[type="range"] {
 :is(#{$_host}).medium,
 :is(#{$_host}).m [type="range"],
 :is(#{$_host}).medium [type="range"] {
-  --md-comp-slider-track-height: 40px;
-  --md-comp-slider-handle-height: 52px;
+  --md-comp-slider-track-height: #{rem(40px)};
+  --md-comp-slider-handle-height: #{rem(52px)};
   --md-comp-slider-stop-inset: 12px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
 }
 
 :is(#{$_host}).l,
 :is(#{$_host}).large,
 :is(#{$_host}).l [type="range"],
 :is(#{$_host}).large [type="range"] {
-  --md-comp-slider-track-height: 56px;
-  --md-comp-slider-handle-height: 68px;
+  --md-comp-slider-track-height: #{rem(56px)};
+  --md-comp-slider-handle-height: #{rem(68px)};
   --md-comp-slider-stop-inset: 16px;
-  --md-comp-slider-icon-size: 24px;
+  --md-comp-slider-icon-size: #{rem(24px)};
 }
 
 :is(#{$_host}).xl,
 :is(#{$_host}).xl [type="range"] {
-  --md-comp-slider-track-height: 96px;
-  --md-comp-slider-handle-height: 108px;
+  --md-comp-slider-track-height: #{rem(96px)};
+  --md-comp-slider-handle-height: #{rem(108px)};
   --md-comp-slider-stop-inset: 28px;
-  --md-comp-slider-icon-size: 32px;
+  --md-comp-slider-icon-size: #{rem(32px)};
 }
 
 :is(#{$_host}):dir(rtl),
@@ -177,327 +177,112 @@ input[type="range"] {
   margin: 0 8px;
 }
 
-// Gap around the handle so the tracks do not run under it.
-@mixin range-track-fill {
-  background-image:
-    radial-gradient(
-      circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end),
-      var(--md-comp-slider-stop-color) 99%,
-      transparent
-    ),
-    linear-gradient(
-      var(--md-comp-slider-gradient),
-      var(--md-comp-slider-active-track-color)
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-inactive-track-color)
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        )
-    );
+// A stop dot at one end of the track.
+@function _stop($at) {
+  @return radial-gradient(
+    circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-#{$at}),
+    var(--md-comp-slider-stop-color) 99%,
+    transparent
+  );
 }
 
-@mixin range-track-fill-centered {
-  background-image:
-    radial-gradient(
-      circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start),
-      var(--md-comp-slider-stop-color) 99%,
-      transparent
-    ),
-    radial-gradient(
-      circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end),
-      var(--md-comp-slider-stop-color) 99%,
-      transparent
-    ),
-    linear-gradient(
-      var(--md-comp-slider-gradient),
-      var(--md-comp-slider-inactive-track-color)
-        max(
-          0%,
-          calc(
-            min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        max(
-          0%,
-          calc(
-            min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        min(
-          100%,
-          calc(
-            min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-active-track-color)
-        min(
-          100%,
-          calc(
-            min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-active-track-color)
-        max(
-          0%,
-          calc(
-            max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        max(
-          0%,
-          calc(
-            max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        min(
-          100%,
-          calc(
-            max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-inactive-track-color)
-        min(
-          100%,
-          calc(
-            max(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        )
-    );
+// Four color stops: $before up to the handle, a gap around it, $after from there.
+// $pos must stay a plain Sass value; interpolating it keeps the inner calc().
+@function _handle-gap($before, $pos, $after) {
+  $start: max(0%, calc($pos - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2));
+  $end: min(100%, calc($pos + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2));
+  @return $before $start, transparent $start, transparent $end, $after $end;
 }
 
-@mixin range-track-fill-dual {
-  background-image:
-    radial-gradient(
-      circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-start),
-      var(--md-comp-slider-stop-color) 99%,
-      transparent
-    ),
-    radial-gradient(
-      circle var(--md-comp-slider-stop-size) at var(--md-comp-slider-stop-at-end),
-      var(--md-comp-slider-stop-color) 99%,
-      transparent
-    ),
-    linear-gradient(
-      var(--md-comp-slider-gradient),
-      var(--md-comp-slider-inactive-track-color)
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-active-track-color)
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-active-track-color)
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        max(
-          0%,
-          calc(
-            var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) - var(--md-comp-slider-gap) -
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      transparent
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        ),
-      var(--md-comp-slider-inactive-track-color)
-        min(
-          100%,
-          calc(
-            var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)) + var(--md-comp-slider-gap) +
-              var(--md-comp-slider-handle-width) / 2
-          )
-        )
-    );
-}
+$_active: var(--md-comp-slider-active-track-color);
+$_inactive: var(--md-comp-slider-inactive-track-color);
+$_active-pos: var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction));
 
-@mixin range-track {
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--md-comp-slider-track-height);
-  border: none;
-  border-radius: calc(var(--md-comp-slider-track-height) / 2);
-  background-color: transparent;
-}
+// One set of rules per engine: a browser drops a whole rule with a pseudo-element
+// it does not know, so the two cannot share a selector list.
+@each $track, $thumb in ("::-webkit-slider-runnable-track" "::-webkit-slider-thumb", "::-moz-range-track" "::-moz-range-thumb") {
+  $webkit: $thumb == "::-webkit-slider-thumb";
 
-@mixin range-track-vertical {
-  width: var(--md-comp-slider-track-height);
-  height: 100%;
-}
-
-@mixin range-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  border: none;
-  width: var(--md-comp-slider-handle-width);
-  height: var(--md-comp-slider-handle-height);
-  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
-  background: var(--md-comp-slider-handle-color);
-  box-shadow: none;
-  cursor: grab;
-  transition: box-shadow 0.2s ease, width 0.15s ease, height 0.15s ease;
-}
-
-@mixin range-thumb-vertical {
-  width: var(--md-comp-slider-handle-height);
-  height: var(--md-comp-slider-handle-width);
-  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  @include range-track;
-  @include range-track-fill;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  @include range-thumb;
-  margin-top: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
-}
-
-input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
-  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
-}
-
-input[type="range"]:focus-visible:not(:disabled)::-webkit-slider-thumb {
-  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
-}
-
-input[type="range"]:active:not(:disabled)::-webkit-slider-thumb {
-  width: var(--md-comp-slider-handle-width-pressed);
-}
-
-:is(#{$_host}).centered [type="range"]::-webkit-slider-runnable-track {
-  @include range-track-fill-centered;
-}
-
-:is(#{$_host}).vertical > [type="range"]::-webkit-slider-runnable-track {
-  @include range-track-vertical;
-  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
-}
-
-:is(#{$_host}).vertical > [type="range"]::-webkit-slider-thumb {
-  @include range-thumb-vertical;
-  margin-top: 0;
-  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
-}
-
-:is(#{$_host}).vertical > [type="range"]:active:not(:disabled)::-webkit-slider-thumb {
-  width: var(--md-comp-slider-handle-height);
-  height: var(--md-comp-slider-handle-width-pressed);
-}
-
-input[type="range"]::-moz-range-track {
-  @include range-track;
-  @include range-track-fill;
-}
+  input[type="range"]#{$track} {
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--md-comp-slider-track-height);
+    border: none;
+    border-radius: calc(var(--md-comp-slider-track-height) / 2);
+    background-color: transparent;
+    // Gap around the handle so the tracks do not run under it.
+    background-image:
+      _stop(end),
+      linear-gradient(var(--md-comp-slider-gradient), _handle-gap($_active, $_active-pos, $_inactive));
+  }
 
-input[type="range"]::-moz-range-thumb {
-  @include range-thumb;
-}
+  input[type="range"]#{$thumb} {
+    appearance: none;
+    box-sizing: border-box;
+    border: none;
+    width: var(--md-comp-slider-handle-width);
+    height: var(--md-comp-slider-handle-height);
+    border-radius: calc(var(--md-comp-slider-handle-width) / 2);
+    background: var(--md-comp-slider-handle-color);
+    box-shadow: none;
+    cursor: grab;
+    transition: box-shadow var(--md-sys-motion-duration-short4) ease, width var(--md-sys-motion-duration-short3) ease, height var(--md-sys-motion-duration-short3) ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    @if $webkit {
+      margin-top: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
+    }
+  }
 
-input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
-  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
-}
+  input[type="range"]:hover:not(:disabled)#{$thumb} {
+    box-shadow: 0 0 0 18px state-layer(var(--md-comp-slider-handle-color), "hover");
+  }
 
-input[type="range"]:focus-visible:not(:disabled)::-moz-range-thumb {
-  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
-}
+  // The tint alone was about 1.1:1 against the surface, so the handle also
+  // takes the shared focus ring.
+  input[type="range"]:focus-visible:not(:disabled)#{$thumb} {
+    box-shadow: 0 0 0 18px state-layer(var(--md-comp-slider-handle-color), "focus");
+    @include focus-ring;
+  }
 
-input[type="range"]:active:not(:disabled)::-moz-range-thumb {
-  width: var(--md-comp-slider-handle-width-pressed);
-}
+  input[type="range"]:active:not(:disabled)#{$thumb} {
+    width: var(--md-comp-slider-handle-width-pressed);
+  }
 
-:is(#{$_host}).centered [type="range"]::-moz-range-track {
-  @include range-track-fill-centered;
-}
+  :is(#{$_host}).centered [type="range"]#{$track} {
+    background-image:
+      _stop(start),
+      _stop(end),
+      linear-gradient(
+        var(--md-comp-slider-gradient),
+        _handle-gap($_inactive, min(50%, $_active-pos), $_active),
+        _handle-gap($_active, max(50%, $_active-pos), $_inactive)
+      );
+  }
 
-:is(#{$_host}).vertical > [type="range"]::-moz-range-track {
-  @include range-track-vertical;
-  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
-}
+  :is(#{$_host}).vertical > [type="range"]#{$track} {
+    width: var(--md-comp-slider-track-height);
+    height: 100%;
+    margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
+  }
 
-:is(#{$_host}).vertical > [type="range"]::-moz-range-thumb {
-  @include range-thumb-vertical;
-  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
-}
+  :is(#{$_host}).vertical > [type="range"]#{$thumb} {
+    width: var(--md-comp-slider-handle-height);
+    height: var(--md-comp-slider-handle-width);
+    border-radius: calc(var(--md-comp-slider-handle-width) / 2);
+    @if $webkit {
+      margin-top: 0;
+    }
+    margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
+  }
 
-:is(#{$_host}).vertical > [type="range"]:active:not(:disabled)::-moz-range-thumb {
-  width: var(--md-comp-slider-handle-height);
-  height: var(--md-comp-slider-handle-width-pressed);
+  :is(#{$_host}).vertical > [type="range"]:active:not(:disabled)#{$thumb} {
+    width: var(--md-comp-slider-handle-height);
+    height: var(--md-comp-slider-handle-width-pressed);
+  }
 }
 
 // Dual-handle range. Two inputs share one host; the host paints the track.
@@ -513,7 +298,14 @@ input[type="range"]:active:not(:disabled)::-moz-range-thumb {
     height: var(--md-comp-slider-track-height);
     border-radius: calc(var(--md-comp-slider-track-height) / 2);
     pointer-events: none;
-    @include range-track-fill-dual;
+    background-image:
+      _stop(start),
+      _stop(end),
+      linear-gradient(
+        var(--md-comp-slider-gradient),
+        _handle-gap($_inactive, var(--md-comp-slider-start-position, var(--md-comp-slider-start-fraction)), $_active),
+        _handle-gap($_active, var(--md-comp-slider-end-position, var(--md-comp-slider-end-fraction)), $_inactive)
+      );
   }
 
   > [type="range"]:first-of-type {
@@ -614,7 +406,7 @@ input[type="range"]:active:not(:disabled)::-moz-range-thumb {
   pointer-events: none;
   background: radial-gradient(
       circle var(--md-comp-slider-stop-size) at var(--_dot) 50%,
-      var(--md-sys-color-on-primary) 99%,
+      var(--_stop, var(--md-sys-color-on-primary)) 99%,
       transparent
     )
     0 0 / var(--md-comp-slider-stop-spacing, 0px) 100% repeat-x;
@@ -652,18 +444,22 @@ input[type="range"] + .thumb {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
-  height: 40px;
+  min-width: rem(40px);
+  height: rem(40px);
   padding: 0 12px;
   border: none;
-  border-radius: 20px;
+  border-radius: var(--md-sys-shape-corner-large-increased);
   background-color: var(--md-sys-color-inverse-surface);
   color: var(--md-sys-color-inverse-on-surface);
   pointer-events: none;
   opacity: 0;
   transform: translate(-50%, calc(-100% - 4px)) scale(0.9);
   transform-origin: center bottom;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity var(--md-sys-motion-duration-short3) ease, transform var(--md-sys-motion-duration-short3) ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
   @include typescale("body-small");
 
   .value {
@@ -687,12 +483,21 @@ input[type="range"] + .thumb {
   }
 }
 
+// GrayText is the disabled color here, so the inactive track is CanvasText
+// and a disabled slider is GrayText throughout. The stops are a gradient,
+// which forced colors drop unless the layer opts out.
 @media (forced-colors: active) {
   :is(#{$_host}), input[type="range"] {
     --md-comp-slider-active-track-color: Highlight;
-    --md-comp-slider-inactive-track-color: GrayText;
+    --md-comp-slider-inactive-track-color: CanvasText;
     --md-comp-slider-handle-color: CanvasText;
-    --md-comp-slider-stop-color: CanvasText;
+    --md-comp-slider-stop-color: Canvas;
+  }
+
+  :is(#{$_host}):has(> [type="range"]:disabled),
+  input[type="range"]:disabled {
+    --md-comp-slider-active-track-color: GrayText;
+    --md-comp-slider-inactive-track-color: GrayText;
   }
 
   input[type="range"],
@@ -700,6 +505,11 @@ input[type="range"] + .thumb {
     forced-color-adjust: none;
   }
 
+  :is(#{$_host}).stops::after {
+    --_stop: HighlightText;
+    forced-color-adjust: none;
+  }
+
   input[type="range"]:focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 4px;