From 53869586ca5e6b663f2aa304605ad366d633ab86 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 8 Sep 2025 09:24:10 +0200
Subject: [PATCH] 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.
---
 src/material/slider/_m2-slider.scss | 1 +
 src/material/slider/_m3-slider.scss | 7 +++++--
 src/material/slider/slider.scss     | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss
index bdb16a22ed1b..c378cec27be8 100644
--- a/src/material/slider/_m2-slider.scss
+++ b/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),
diff --git a/src/material/slider/_m3-slider.scss b/src/material/slider/_m3-slider.scss
index 5bb89b21e8d7..b6b882310a98 100644
--- a/src/material/slider/_m3-slider.scss
+++ b/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),
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 6f2888d041e6..952f722af0c2 100644
--- a/src/material/slider/slider.scss
+++ b/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