@angular/material 18.0.1 → 18.0.3

package/_index.scss

@@ -127,7 +127,7 @@
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
   slider-density, slider-base, slider-overrides;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
-  snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides;
+  snack-bar-typography, snack-bar-density, snack-bar-base, snack-bar-overrides;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
   sort-base, sort-overrides;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,

package/badge/index.d.ts

@@ -25,7 +25,10 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _ariaDescriber;
     private _renderer;
     private _animationMode?;
-    /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
+    /**
+     * The color of the badge. Can be `primary`, `accent`, or `warn`.
+     * Not recommended in M3, for more information see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     */
     get color(): ThemePalette;
     set color(value: ThemePalette);
     private _color;

package/checkbox/_checkbox-common.scss

@@ -0,0 +1,523 @@
+@use 'sass:math';
+@use '@angular/cdk';
+@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
+@use '../core/tokens/token-utils';
+
+$_path-length: 29.7833385;
+$_transition-duration: 90ms;
+$_icon-size: 18px;
+$_mark-stroke-size: math.div(2, 15) * $_icon-size;
+$_indeterminate-checked-curve: cubic-bezier(0.14, 0, 0, 1);
+$_indeterminate-change-duration: 500ms;
+$_enter-curve: cubic-bezier(0, 0, 0.2, 1);
+$_exit-curve: cubic-bezier(0.4, 0, 0.6, 1);
+$_fallback-size: 40px;
+
+// Structural styles for a checkbox. Shared with the selection list.
+@mixin checkbox-structure($include-state-layer-styles) {
+  $prefix: tokens-mdc-checkbox.$prefix;
+  $slots: tokens-mdc-checkbox.get-token-slots();
+
+  .mdc-checkbox {
+    display: inline-block;
+    position: relative;
+    flex: 0 0 $_icon-size;
+    box-sizing: content-box;
+    width: $_icon-size;
+    height: $_icon-size;
+    line-height: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    vertical-align: bottom;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      $layer-size: token-utils.get-token-variable(state-layer-size);
+      padding: calc((var(#{$layer-size}, #{$_fallback-size}) - #{$_icon-size}) / 2);
+      margin: calc((var(#{$layer-size}, #{$_fallback-size}) -
+        var(#{$layer-size}, #{$_fallback-size})) / 2);
+
+      @if ($include-state-layer-styles) {
+        @include _state-layer-styles;
+      }
+    }
+
+    // These styles have to be nested in order to override overly-broad
+    // user selectors like `input[type='checkbox']`.
+    .mdc-checkbox__native-control {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      cursor: inherit;
+
+      @include token-utils.use-tokens($prefix, $slots) {
+        $layer-size: token-utils.get-token-variable(state-layer-size);
+        $offset: calc((var(#{$layer-size}, #{$_fallback-size}) -
+          var(#{$layer-size}, #{$_fallback-size})) / 2);
+        width: var(#{$layer-size}, #{$_fallback-size});
+        height: var(#{$layer-size}, #{$_fallback-size});
+        top: $offset;
+        right: $offset;
+        left: $offset;
+      }
+    }
+  }
+
+  .mdc-checkbox--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .mdc-checkbox__background {
+    display: inline-flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $_icon-size;
+    height: $_icon-size;
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background-color: transparent;
+    pointer-events: none;
+    will-change: background-color, border-color;
+    transition: background-color $_transition-duration $_exit-curve,
+                border-color $_transition-duration $_exit-curve;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      $layer-size: token-utils.get-token-variable(state-layer-size);
+      $offset: calc((var(#{$layer-size}, $_fallback-size) - #{$_icon-size}) / 2);
+
+      @include token-utils.create-token-slot(border-color, unselected-icon-color);
+      top: $offset;
+      left: $offset;
+    }
+  }
+
+  // These can't be under `.mdc-checkbox__background` because
+  // the selectors will break when the mixin is nested.
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-icon-color);
+    }
+
+    .mdc-checkbox--disabled .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
+    }
+
+    .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(background-color, disabled-selected-icon-color);
+      border-color: transparent;
+    }
+
+    .mdc-checkbox:hover .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background,
+    .mdc-checkbox:hover
+      .mdc-checkbox__native-control:not(:indeterminate) ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
+      background-color: transparent;
+    }
+
+    .mdc-checkbox:hover .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox:hover .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-hover-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-hover-icon-color);
+    }
+
+    // Note: this must be more specific than the hover styles above.
+    // Double :focus is added for increased specificity.
+    .mdc-checkbox__native-control:focus:focus:not(:checked) ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:focus:focus:not(:indeterminate) ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
+    }
+
+    .mdc-checkbox__native-control:focus:focus:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:focus:focus:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-focus-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-focus-icon-color);
+    }
+  }
+
+  .mdc-checkbox__checkmark {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    transition: opacity $_transition-duration * 2 $_exit-curve;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      // Always apply the color since the element becomes `opacity: 0`
+      // when unchecked. This makes the animation look better.
+      @include token-utils.create-token-slot(color, selected-checkmark-color);
+    }
+  }
+
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox--disabled .mdc-checkbox__checkmark {
+      @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
+    }
+  }
+
+  .mdc-checkbox__checkmark-path {
+    transition: stroke-dashoffset $_transition-duration * 2 $_exit-curve;
+    stroke: currentColor;
+    stroke-width: $_mark-stroke-size * 1.3;
+    stroke-dashoffset: $_path-length;
+    stroke-dasharray: $_path-length;
+  }
+
+  .mdc-checkbox__mixedmark {
+    width: 100%;
+    height: 0;
+    transform: scaleX(0) rotate(0deg);
+    border-width: math.div(math.floor($_mark-stroke-size), 2);
+    border-style: solid;
+    opacity: 0;
+    transition: opacity $_transition-duration $_exit-curve,
+                transform $_transition-duration $_exit-curve;
+
+    @include cdk.high-contrast(active, off) {
+      margin: 0 1px;
+    }
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      // Always apply the color since the element becomes `opacity: 0`
+      // when unchecked. This makes the animation look better.
+      @include token-utils.create-token-slot(border-color, selected-checkmark-color);
+    }
+  }
+
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox--disabled .mdc-checkbox__mixedmark {
+      @include token-utils.create-token-slot(border-color, disabled-selected-checkmark-color);
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-checked,
+  .mdc-checkbox--anim-unchecked-indeterminate,
+  .mdc-checkbox--anim-checked-unchecked,
+  .mdc-checkbox--anim-indeterminate-unchecked {
+    .mdc-checkbox__background {
+      animation-duration: $_transition-duration * 2;
+      animation-timing-function: linear;
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-checked {
+    .mdc-checkbox__checkmark-path {
+      animation: mdc-checkbox-unchecked-checked-checkmark-path
+        $_transition-duration * 2 linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-indeterminate {
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-unchecked-indeterminate-mixedmark $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-checked-unchecked {
+    .mdc-checkbox__checkmark-path {
+      animation: mdc-checkbox-checked-unchecked-checkmark-path $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-checked-indeterminate {
+    .mdc-checkbox__checkmark {
+      animation: mdc-checkbox-checked-indeterminate-checkmark $_transition-duration linear;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-checked-indeterminate-mixedmark $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-indeterminate-checked {
+    .mdc-checkbox__checkmark {
+      animation: mdc-checkbox-indeterminate-checked-checkmark
+        $_indeterminate-change-duration linear;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-indeterminate-checked-mixedmark
+        $_indeterminate-change-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-indeterminate-unchecked {
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-indeterminate-unchecked-mixedmark
+        $_indeterminate-change-duration * 0.6 linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    transition: border-color $_transition-duration $_enter-curve,
+                background-color $_transition-duration $_enter-curve;
+
+    .mdc-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
+    .mdc-checkbox__checkmark {
+      transition: opacity $_transition-duration * 2 $_enter-curve,
+                  transform $_transition-duration * 2 $_enter-curve;
+      opacity: 1;
+    }
+
+    .mdc-checkbox__mixedmark {
+      transform: scaleX(1) rotate(-45deg);
+    }
+  }
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    .mdc-checkbox__checkmark {
+      transform: rotate(45deg);
+      opacity: 0;
+      transition: opacity $_transition-duration $_exit-curve,
+                  transform $_transition-duration $_exit-curve;
+    }
+
+    .mdc-checkbox__mixedmark {
+      transform: scaleX(1) rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-unchecked-checked-checkmark-path {
+    0%, 50% {
+      stroke-dashoffset: $_path-length;
+    }
+
+    50% {
+      animation-timing-function: $_enter-curve;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {
+    0%, 68.2% {
+      transform: scaleX(0);
+    }
+
+    68.2% {
+      animation-timing-function: cubic-bezier(0, 0, 0, 1);
+    }
+
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-unchecked-checkmark-path {
+    from {
+      animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+      opacity: 1;
+      stroke-dashoffset: 0;
+    }
+
+    to {
+      opacity: 0;
+      stroke-dashoffset: $_path-length * -1;
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-indeterminate-checkmark {
+    from {
+      animation-timing-function: $_enter-curve;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-checked-checkmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-curve;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(360deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-indeterminate-mixedmark {
+    from {
+      animation-timing-function: $_enter-curve;
+      transform: rotate(-45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-curve;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(315deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
+    0% {
+      animation-timing-function: linear;
+      transform: scaleX(1);
+      opacity: 1;
+    }
+
+    32.8%, 100% {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+  }
+}
+
+// Conditionally disables the animations of the checkbox.
+@mixin checkbox-noop-animations() {
+  &._mat-animation-noopable .mdc-checkbox {
+    *, *::before {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}
+
+@mixin _state-layer-styles() {
+  // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
+  // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
+  &:hover {
+    .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-hover-state-layer-color
+      );
+    }
+
+    .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-hover-state-layer-color
+      );
+    }
+  }
+
+  .mdc-checkbox__native-control:focus {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-focus-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-focus-state-layer-color
+      );
+    }
+  }
+
+  &:active .mdc-checkbox__native-control {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-pressed-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-pressed-state-layer-color
+      );
+    }
+  }
+
+  &:hover .mdc-checkbox__native-control:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-hover-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-hover-state-layer-color
+      );
+    }
+  }
+
+  .mdc-checkbox__native-control:focus:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-focus-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-focus-state-layer-color
+      );
+    }
+  }
+
+  &:active .mdc-checkbox__native-control:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-pressed-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-pressed-state-layer-color
+      );
+    }
+  }
+}

package/checkbox/_checkbox-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,7 +15,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-unthemable-tokens()
@@ -35,7 +37,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-color-tokens($theme)
@@ -44,11 +49,15 @@
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
 
       &.mat-warn {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
     }
   }
@@ -61,7 +70,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-typography-tokens($theme)
@@ -79,7 +91,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-density-tokens($theme)
@@ -140,6 +155,6 @@
   // Don't pass $options here, since the mdc-checkbox doesn't support color options,
   // only the mdc-checkbox does.
   $mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
-  @include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
+  @include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
 }

package/checkbox/index.d.ts

@@ -109,7 +109,11 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     _labelElement: ElementRef<HTMLInputElement>;
     /** Tabindex for the checkbox. */
     tabIndex: number;
-    /** Palette color of the checkbox. */
+    /**
+     * Palette color of the checkbox. This API is supported in M2 themes only, it has no effect in M3
+     * themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color: string | undefined;
     /**
      * Reference to the MatRipple instance of the checkbox.
@@ -211,7 +215,11 @@ export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indetermi
 
 /** Default `mat-checkbox` options that can be overridden. */
 export declare interface MatCheckboxDefaultOptions {
-    /** Default theme color palette to be used for checkboxes. */
+    /**
+     * Default theme color palette to be used for checkboxes. This API is supported in M2 themes
+     * only, it has no effect in M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color?: ThemePalette;
     /** Default checkbox click action for checkboxes. */
     clickAction?: MatCheckboxClickAction;

package/chips/index.d.ts

@@ -184,7 +184,11 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     get value(): any;
     set value(value: any);
     protected _value: any;
-    /** Theme color palette of the chip. */
+    /**
+     * Theme color palette of the chip. This API is supported in M2 themes only, it has no effect in
+     * M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color?: string | null;
     /**
      * Determines whether or not the chip displays the remove styling and emits (removed) events.

package/core/m2/_typography.scss

@@ -48,7 +48,7 @@
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.m2-define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',

package/core/ripple/_ripple.scss

@@ -47,5 +47,11 @@
     @include cdk.high-contrast(active, off) {
       display: none;
     }
+
+    // Hide ripples inside cloned drag&drop elements since they won't go away.
+    .cdk-drag-preview &,
+    .cdk-drag-placeholder & {
+      display: none;
+    }
   }
 }

package/core/style/_vendor-prefixes.scss

@@ -43,4 +43,9 @@
   -webkit-clip-path: $value;
   clip-path: $value;
 }
+
+@mixin smooth-font {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
 // stylelint-enable