fix(material/slider): fix value indicator bubble for m3

Author: wagnermaciel

src/material-experimental/theming/_custom-tokens.scss

@@ -510,6 +510,13 @@
 @function slider($systems, $exclude-hardcoded) {
   @return (
     value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
+    value-indicator-padding: _hardcode(0, $exclude-hardcoded),
+    value-indicator-width: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-height: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-caret-display: _hardcode(none, $exclude-hardcoded),
+    value-indicator-border-radius: _hardcode(50% 50% 50% 0, $exclude-hardcoded),
+    value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
+    value-indicator-container-transform: _hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded),
   );
 }
 

src/material/core/tokens/m2/mat/_slider.scss

@@ -8,7 +8,15 @@ $prefix: (mat, slider);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    value-indicator-width: auto,
+    value-indicator-height: 32px,
+    value-indicator-caret-display: visible,
+    value-indicator-border-radius: 4px,
+    value-indicator-padding: 0 12px,
+    value-indicator-text-transform: none,
+    value-indicator-container-transform: translateX(-50%)
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -17,14 +25,14 @@ $prefix: (mat, slider);
 
   @return (
     // Opacity of value indicator text container
-    value-indicator-opacity: if($is-dark, 0.9, 0.6),
+    value-indicator-opacity: if($is-dark, 0.9, 0.6)
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return ();
- }
+}
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
@@ -35,9 +43,9 @@ $prefix: (mat, slider);
 // This is used to create token slots.
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+    get-unthemable-tokens(),
+    get-color-tokens(token-utils.$placeholder-color-config),
+    get-typography-tokens(token-utils.$placeholder-typography-config),
+    get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/slider/_slider-theme.scss

@@ -15,6 +15,8 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
+      $mat-tokens: tokens-mat-slider.get-unthemable-tokens();
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-tokens);
       @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
     }
   }

src/material/slider/slider.scss

@@ -94,13 +94,26 @@ $mat-slider-horizontal-margin: 8px !default;
     }
 
     // Add slots for custom Angular Material slider tokens.
-    @include token-utils.use-tokens(
-      m2-mat-slider.$prefix,
-      m2-mat-slider.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-mat-slider.$prefix, m2-mat-slider.get-token-slots()) {
+      .mdc-slider__value-indicator-container {
+        @include token-utils.create-token-slot(transform, value-indicator-container-transform);
+      }
+
       .mdc-slider__value-indicator {
-        // There's no token to control this opacity so we have to do it ourselves.
+        @include token-utils.create-token-slot(width, value-indicator-width);
+        @include token-utils.create-token-slot(height, value-indicator-height);
+        @include token-utils.create-token-slot(padding, value-indicator-padding);
         @include token-utils.create-token-slot(opacity, value-indicator-opacity);
+        @include token-utils.create-token-slot(border-radius, value-indicator-border-radius);
+
+        &::before {
+          @include token-utils.create-token-slot(display, value-indicator-caret-display);
+        }
+      }
+
+      .mdc-slider__value-indicator-text {
+        @include token-utils.create-token-slot(width, value-indicator-width);
+        @include token-utils.create-token-slot(transform, value-indicator-text-transform);
       }
     }
 
@@ -141,6 +154,10 @@ $mat-slider-horizontal-margin: 8px !default;
     .mdc-slider__value-indicator {
       word-break: normal;
     }
+
+    .mdc-slider__value-indicator-text {
+      text-align: center;
+    }
   }
   // In the MDC slider the focus indicator is inside the thumb.
   .mdc-slider__thumb--focused .mat-mdc-focus-indicator::before {