@angular/material 18.1.0-next.2 → 18.1.0-next.4

package/radio/_radio-common.scss

@@ -0,0 +1,238 @@
+@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
+@use '../core/tokens/token-utils';
+
+$_icon-size: 20px;
+
+@function _enter-transition($name) {
+  @return $name 90ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+@function _exit-transition($name) {
+  @return $name 90ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+// Structural styles for a radio button. Shared with the selection list.
+@mixin radio-structure($is-interactive) {
+  $tokens: tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots();
+
+  .mdc-radio {
+    display: inline-block;
+    position: relative;
+    flex: 0 0 auto;
+    box-sizing: content-box;
+    width: $_icon-size;
+    height: $_icon-size;
+    cursor: pointer;
+
+    // This is something we inherited from MDC, but it shouldn't be necessary.
+    // Removing it will likely lead to screenshot diffs.
+    will-change: opacity, transform, border-color, color;
+
+    @include token-utils.use-tokens($tokens...) {
+      $size-token: var(#{token-utils.get-token-variable(state-layer-size)});
+      padding: calc((#{$size-token} - #{$_icon-size}) / 2);
+    }
+
+    @if ($is-interactive) {
+      // MDC's hover indication comes from their ripple which we don't use.
+      &:hover .mdc-radio__native-control:not([disabled]):not(:focus) {
+        & ~ .mdc-radio__background::before {
+          opacity: 0.04;
+          transform: scale(1);
+        }
+      }
+
+      &:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {
+        .mdc-radio__outer-circle {
+          @include token-utils.use-tokens($tokens...) {
+            @include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
+          }
+        }
+      }
+
+      &:hover .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
+        .mdc-radio__outer-circle,
+        .mdc-radio__inner-circle {
+          @include token-utils.use-tokens($tokens...) {
+            @include token-utils.create-token-slot(border-color, selected-hover-icon-color);
+          }
+        }
+      }
+
+      &:active .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {
+        .mdc-radio__outer-circle {
+          @include token-utils.use-tokens($tokens...) {
+            @include token-utils.create-token-slot(border-color, unselected-pressed-icon-color);
+          }
+        }
+      }
+
+      &:active .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
+        .mdc-radio__outer-circle,
+        .mdc-radio__inner-circle {
+          @include token-utils.use-tokens($tokens...) {
+            @include token-utils.create-token-slot(border-color, selected-pressed-icon-color);
+          }
+        }
+      }
+    }
+  }
+
+  .mdc-radio__background {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    width: $_icon-size;
+    height: $_icon-size;
+
+    &::before {
+      position: absolute;
+      transform: scale(0, 0);
+      border-radius: 50%;
+      opacity: 0;
+      pointer-events: none;
+      content: '';
+      transition: _exit-transition(opacity), _exit-transition(transform);
+
+      @include token-utils.use-tokens($tokens...) {
+        $size-token: var(#{token-utils.get-token-variable(state-layer-size)});
+        $offset: calc(-1 * (#{$size-token} - #{$_icon-size}) / 2);
+        width: $size-token;
+        height: $size-token;
+        top: $offset;
+        left: $offset;
+      }
+    }
+  }
+
+  .mdc-radio__outer-circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+    transition: _exit-transition(border-color);
+  }
+
+  .mdc-radio__inner-circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    transform: scale(0, 0);
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+    transition: _exit-transition(transform), _exit-transition(border-color);
+  }
+
+  .mdc-radio__native-control {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    cursor: inherit;
+    z-index: 1;
+
+    @include token-utils.use-tokens($tokens...) {
+      @include token-utils.create-token-slot(width, state-layer-size);
+      @include token-utils.create-token-slot(height, state-layer-size);
+    }
+
+    &:checked, &:disabled {
+      + .mdc-radio__background {
+        transition: _enter-transition(opacity), _enter-transition(transform);
+
+        .mdc-radio__outer-circle {
+          transition: _enter-transition(border-color);
+        }
+
+        .mdc-radio__inner-circle {
+          transition: _enter-transition(transform), _enter-transition(border-color);
+        }
+      }
+    }
+
+    @if ($is-interactive) {
+      &:focus + .mdc-radio__background::before {
+        transform: scale(1);
+        opacity: 0.12;
+        transition: _enter-transition(opacity), _enter-transition(transform);
+      }
+    }
+
+    &:disabled {
+      @include token-utils.use-tokens($tokens...) {
+        &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+          @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
+          @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);
+        }
+
+        + .mdc-radio__background {
+          cursor: default;
+
+          .mdc-radio__inner-circle,
+          .mdc-radio__outer-circle {
+            @include token-utils.create-token-slot(border-color, disabled-selected-icon-color);
+            @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);
+          }
+        }
+      }
+    }
+
+    &:enabled {
+      @include token-utils.use-tokens($tokens...) {
+        &:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
+          @include token-utils.create-token-slot(border-color, unselected-icon-color);
+        }
+
+        &:checked + .mdc-radio__background {
+          .mdc-radio__outer-circle,
+          .mdc-radio__inner-circle {
+            @include token-utils.create-token-slot(border-color, selected-icon-color);
+          }
+        }
+
+        @if ($is-interactive) {
+          &:focus:checked + .mdc-radio__background {
+            .mdc-radio__inner-circle,
+            .mdc-radio__outer-circle {
+              @include token-utils.create-token-slot(border-color, selected-focus-icon-color);
+            }
+          }
+        }
+      }
+    }
+
+    &:checked + .mdc-radio__background .mdc-radio__inner-circle {
+      transform: scale(0.5);
+      transition: _enter-transition(transform), _enter-transition(border-color);
+    }
+  }
+
+  .mdc-radio--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+// Conditionally disables the animations of the radio button.
+@mixin radio-noop-animations() {
+  &._mat-animation-noopable {
+    .mdc-radio__background::before,
+    .mdc-radio__outer-circle,
+    .mdc-radio__inner-circle {
+      // Needs to be `!important`, because MDC's selectors are really specific.
+      transition: none !important;
+    }
+  }
+}

package/radio/_radio-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,11 +15,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-unthemable-tokens());
     }
   }
 }
@@ -36,27 +34,24 @@
   } @else {
     .mat-mdc-radio-button {
       &.mat-primary {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme, primary)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme, primary));
       }
 
       &.mat-accent {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme));
       }
 
       &.mat-warn {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme, warn)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme, warn));
       }
     }
   }
@@ -69,11 +64,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-typography-tokens($theme));
     }
   }
 }
@@ -87,11 +81,10 @@
     $density-scale: inspection.get-theme-density($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-density-tokens($theme));
     }
   }
 }
@@ -142,6 +135,6 @@
   );
   $mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
   $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
-  @include mdc-radio-theme.theme($mdc-radio-tokens);
+  @include token-utils.create-token-values(tokens-mdc-radio.$prefix, $mdc-radio-tokens);
   @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
 }

package/radio/index.d.ts

@@ -85,7 +85,13 @@ export declare class MatRadioButton implements OnInit, AfterViewInit, DoCheck, O
     /** Whether the radio button is required. */
     get required(): boolean;
     set required(value: boolean);
-    /** Theme color of the radio button. */
+    /**
+     * Theme color of the radio button. 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.
+     */
     get color(): ThemePalette;
     set color(newValue: ThemePalette);
     private _color;
@@ -166,6 +172,13 @@ export declare class MatRadioChange {
 }
 
 export declare interface MatRadioDefaultOptions {
+    /**
+     * Theme color of the radio button. 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;
 }
 
@@ -205,7 +218,13 @@ export declare class MatRadioGroup implements AfterContentInit, OnDestroy, Contr
     readonly change: EventEmitter<MatRadioChange>;
     /** Child radio buttons. */
     _radios: QueryList<MatRadioButton>;
-    /** Theme color for all of the radio buttons in the group. */
+    /**
+     * Theme color of the radio buttons in the group. 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;
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
     get name(): string;

package/schematics/ng-add/index.js

@@ -19,7 +19,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~18.1.0-next.2`;
+const fallbackMaterialVersionRange = `~18.1.0-next.4`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.

package/schematics/ng-add/index.mjs

@@ -19,7 +19,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~18.1.0-next.2`;
+const fallbackMaterialVersionRange = `~18.1.0-next.4`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.

package/schematics/ng-generate/m3-theme/index_bundled.js

@@ -50,7 +50,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
 var m3_theme_exports = {};
 __export(m3_theme_exports, {
   default: () => m3_theme_default,
@@ -2513,7 +2513,7 @@ function customColor(source, color) {
   };
 }
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
 var HUE_TONES = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
 var NEUTRAL_HUES = /* @__PURE__ */ new Map([
   [4, { prev: 0, next: 10 }],

package/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-elevation-z2">
   <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">

package/schematics/ng-update/index_bundled.js

@@ -605,9 +605,9 @@ var require_tslib = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js
 var require_attribute_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.attributeSelectors = void 0;
@@ -615,9 +615,9 @@ var require_attribute_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js
 var require_class_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.classNames = void 0;
@@ -625,9 +625,9 @@ var require_class_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js
 var require_constructor_checks = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.constructorChecks = void 0;
@@ -635,9 +635,9 @@ var require_constructor_checks = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js
 var require_css_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.cssSelectors = void 0;
@@ -645,9 +645,9 @@ var require_css_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js
 var require_css_tokens = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-tokens.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.cssTokens = void 0;
@@ -688,9 +688,9 @@ var require_css_tokens = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js
 var require_element_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.elementSelectors = void 0;
@@ -698,9 +698,9 @@ var require_element_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js
 var require_input_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.inputNames = void 0;
@@ -708,9 +708,9 @@ var require_input_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js
 var require_method_call_checks = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.methodCallChecks = void 0;
@@ -718,9 +718,9 @@ var require_method_call_checks = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js
 var require_output_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.outputNames = void 0;
@@ -728,9 +728,9 @@ var require_output_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js
 var require_property_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.propertyNames = void 0;
@@ -738,9 +738,9 @@ var require_property_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js
 var require_symbol_removal = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.symbolRemoval = void 0;
@@ -748,9 +748,9 @@ var require_symbol_removal = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/index.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js
 var require_data = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/index.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     var tslib_1 = require_tslib();
@@ -768,9 +768,9 @@ var require_data = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js
 var require_upgrade_data = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.materialUpgradeData = void 0;
@@ -791,9 +791,9 @@ var require_upgrade_data = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js
 var require_migration = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/migration.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.migrateM2ThemingApiUsages = migrateM2ThemingApiUsages;
@@ -968,9 +968,9 @@ var require_migration = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js
 var require_m2_theming_v18 = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/m2-theming-v18/index.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.M2ThemingMigration = void 0;
@@ -1002,7 +1002,7 @@ var require_m2_theming_v18 = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/index.mjs
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/index.mjs
 var ng_update_exports = {};
 __export(ng_update_exports, {
   updateToV18: () => updateToV18

package/sidenav/index.d.ts

@@ -145,6 +145,7 @@ export declare class MatDrawer implements AfterViewInit, AfterContentChecked, On
      */
     readonly _modeChanged: Subject<void>;
     private _injector;
+    private _changeDetectorRef;
     constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _interactivityChecker: InteractivityChecker, _doc: any, _container?: MatDrawerContainer | undefined);
     /**
      * Focuses the provided element. If the element is not focusable, it will add a tabIndex

package/slide-toggle/index.d.ts

@@ -89,7 +89,13 @@ export declare class MatSlideToggle implements OnDestroy, AfterContentInit, OnCh
     ariaDescribedby: string;
     /** Whether the slide-toggle is required. */
     required: boolean;
-    /** Palette color of slide toggle. */
+    /**
+     * Theme color of the slide toggle. 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;
     /** Whether the slide toggle is disabled. */
     disabled: boolean;
@@ -164,7 +170,13 @@ export declare class MatSlideToggleChange {
 export declare interface MatSlideToggleDefaultOptions {
     /** Whether toggle action triggers value changes in slide toggle. */
     disableToggleValue?: boolean;
-    /** Default color for slide toggles. */
+    /**
+     * Default theme color of the slide toggle. 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;
     /** Whether to hide the icon inside the slide toggle. */
     hideIcon?: boolean;

package/slider/index.d.ts

@@ -80,7 +80,13 @@ export declare class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     get min(): number;
     set min(v: number);
     private _min;
-    /** Palette color of the slider. */
+    /**
+     * Theme color of the slider. 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;
     /** Whether ripples are disabled in the slider. */
     disableRipple: boolean;