fix(material/slider): incorrect indicator transform origin in M3

Fixes that the slider's value indicator was transitioning in from the right in M3. It's because the indicator is rotated in order to render out the M3 shape.

Fixes #31827.

Author: crisbeto

src/material/slider/_m2-slider.scss

@@ -28,6 +28,7 @@
       slider-with-tick-marks-container-shape: 50%,
       slider-with-tick-marks-container-size: 2px,
       slider-with-tick-marks-inactive-container-opacity: 0.6,
+      slider-value-indicator-transform-origin: bottom,
     ),
     color: map.merge(private-get-color-palette-color-tokens($theme, primary), (
       slider-disabled-active-track-color: map.get($system, on-surface),

src/material/slider/_m3-slider.scss

@@ -7,6 +7,8 @@
 /// @param {String} $color-variant The color variant to use for the component
 @function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
   $system: m3-utils.get-system($theme);
+  $indicator-size: 28px;
+
   @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   }
@@ -15,8 +17,8 @@
     base: (
       slider-value-indicator-opacity: 1,
       slider-value-indicator-padding: 0,
-      slider-value-indicator-width: 28px,
-      slider-value-indicator-height: 28px,
+      slider-value-indicator-width: $indicator-size,
+      slider-value-indicator-height: $indicator-size,
       slider-value-indicator-caret-display: none,
       slider-value-indicator-border-radius: 50% 50% 50% 0,
       slider-value-indicator-text-transform: rotate(45deg),
@@ -29,6 +31,7 @@
       slider-with-tick-marks-active-container-opacity: 0.38,
       slider-with-tick-marks-container-size: 2px,
       slider-with-tick-marks-inactive-container-opacity: 0.38,
+      slider-value-indicator-transform-origin: 0 $indicator-size,
     ),
     color: (
       slider-active-track-color: map.get($system, primary),

src/material/slider/slider.scss

@@ -104,7 +104,7 @@ $fallbacks: m3-slider.get-tokens();
   display: flex;
   align-items: center;
   transform: scale(0);
-  transform-origin: bottom;
+  transform-origin: token-utils.slot(slider-value-indicator-transform-origin, $fallbacks);
   transition: transform 100ms cubic-bezier(0.4, 0, 1, 1);
 
   // Stop parent word-break from altering