@angular/material 16.2.0-next.0 → 16.2.0-next.1

package/schematics/ng-update/index_bundled.js

@@ -454,9 +454,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;
@@ -464,9 +464,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;
@@ -474,9 +474,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;
@@ -484,9 +484,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;
@@ -494,9 +494,9 @@ var require_css_selectors = __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;
@@ -504,9 +504,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;
@@ -514,9 +514,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;
@@ -524,9 +524,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;
@@ -534,9 +534,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;
@@ -544,9 +544,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;
@@ -554,9 +554,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();
@@ -573,9 +573,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;
@@ -595,7 +595,7 @@ var require_upgrade_data = __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, {
   updateToV16: () => updateToV16

package/select/_select-theme.scss

@@ -1,66 +1,32 @@
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/menu-surface' as mdc-menu-surface;
-@use '@material/list/evolution-mixins' as mdc-list;
-@use '@material/typography' as mdc-typography;
+@use 'sass:map';
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
+@use '../core/tokens/m2/mat/select' as tokens-mat-select;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
 
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
-
-
-// Gets the color to use for some text that is highlighted while a select has focus.
-@function _get-mdc-focused-text-color($palette) {
-  @return rgba(mdc-theme-color.prop-value($palette), 0.87);
-}
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  @include mdc-helpers.using-mdc-theme($config) {
-    $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
-
-    .mat-mdc-select-value {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    }
-
-    .mat-mdc-select-placeholder {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    }
-
-    .mat-mdc-select-disabled .mat-mdc-select-value {
-      color: $disabled-color;
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-select.$prefix,
+      tokens-mat-select.get-color-tokens($config));
 
-    .mat-mdc-select-arrow {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
+    .mat-mdc-form-field.mat-accent {
+      $accent: map.get($config, accent);
+      $accent-config: map.merge($config, (primary: $accent));
+      @include token-utils.create-token-values(tokens-mat-select.$prefix,
+        tokens-mat-select.get-color-tokens($accent-config));
     }
 
-    .mat-mdc-form-field {
-      &.mat-focused {
-        &.mat-primary .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(primary);
-        }
-
-        &.mat-accent .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(secondary);
-        }
-
-        &.mat-warn .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(error);
-        }
-      }
-
-      .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow {
-        color: _get-mdc-focused-text-color(error);
-      }
-
-      .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
-        color: $disabled-color;
-      }
+    .mat-mdc-form-field.mat-warn {
+      $warn: map.get($config, warn);
+      $warn-config: map.merge($config, (primary: $warn));
+      @include token-utils.create-token-values(tokens-mat-select.$prefix,
+        tokens-mat-select.get-color-tokens($warn-config));
     }
   }
 }
@@ -68,16 +34,10 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-typography-styles-query);
 
-    .mat-mdc-select-panel {
-      @include mdc-list.list-base(mdc-helpers.$mdc-typography-styles-query);
-    }
-
-    .mat-mdc-select {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-select.$prefix,
+      tokens-mat-select.get-typography-tokens($config));
   }
 }
 
@@ -98,6 +58,11 @@
       transform: none;
     }
   }
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-select.$prefix,
+      tokens-mat-select.get-density-tokens($density-scale));
+  }
 }
 
 @mixin theme($theme-or-color-config) {

package/select/index.d.ts

@@ -119,7 +119,7 @@ export declare class MatSelect extends _MatSelectBase<MatSelectChange> implement
     _syncParentProperties(): void;
     protected _skipPredicate: (option: MatOption) => boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false, never>;
 }
 
 /**
@@ -435,7 +435,7 @@ export declare abstract class _MatSelectBase<C> extends _MatSelectMixinBase impl
      */
     get shouldLabelFloat(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatSelectBase<any>, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSelectBase<any>, never, never, { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableOptionCentering": { "alias": "disableOptionCentering"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSelectBase<any>, never, never, { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableOptionCentering": { "alias": "disableOptionCentering"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
 /** Change event object that is emitted when the select value has changed. */
@@ -501,7 +501,7 @@ export declare class MatSelectModule {
  */
 export declare class MatSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, false, never>;
 }
 
 export { }

package/sidenav/index.d.ts

@@ -207,7 +207,7 @@ export declare class MatDrawer implements AfterViewInit, AfterContentChecked, On
      */
     private _updatePositionInParent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawer, [null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawer, "mat-drawer", ["matDrawer"], { "position": { "alias": "position"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "openedStart": "openedStart"; "_closedStream": "closed"; "closedStart": "closedStart"; "onPositionChanged": "positionChanged"; }, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawer, "mat-drawer", ["matDrawer"], { "position": { "alias": "position"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "openedStart": "openedStart"; "_closedStream": "closed"; "closedStart": "closedStart"; "onPositionChanged": "positionChanged"; }, never, ["*"], false, never>;
 }
 
 /**
@@ -329,7 +329,7 @@ export declare class MatDrawerContainer implements AfterContentInit, DoCheck, On
     private _canHaveBackdrop;
     private _isDrawerOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContainer, [{ optional: true; }, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContainer, "mat-drawer-container", ["matDrawerContainer"], { "autosize": { "alias": "autosize"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, { "backdropClick": "backdropClick"; }, ["_content", "_allDrawers"], ["mat-drawer", "mat-drawer-content", "*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContainer, "mat-drawer-container", ["matDrawerContainer"], { "autosize": { "alias": "autosize"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, { "backdropClick": "backdropClick"; }, ["_content", "_allDrawers"], ["mat-drawer", "mat-drawer-content", "*"], false, never>;
 }
 
 export declare class MatDrawerContent extends CdkScrollable implements AfterContentInit {
@@ -338,7 +338,7 @@ export declare class MatDrawerContent extends CdkScrollable implements AfterCont
     constructor(_changeDetectorRef: ChangeDetectorRef, _container: MatDrawerContainer, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContent, "mat-drawer-content", never, {}, {}, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContent, "mat-drawer-content", never, {}, {}, never, ["*"], false, never>;
 }
 
 /** Drawer and SideNav display modes. */
@@ -367,20 +367,20 @@ export declare class MatSidenav extends MatDrawer {
     set fixedBottomGap(value: NumberInput);
     private _fixedBottomGap;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenav, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenav, "mat-sidenav", ["matSidenav"], { "fixedInViewport": { "alias": "fixedInViewport"; "required": false; }; "fixedTopGap": { "alias": "fixedTopGap"; "required": false; }; "fixedBottomGap": { "alias": "fixedBottomGap"; "required": false; }; }, {}, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenav, "mat-sidenav", ["matSidenav"], { "fixedInViewport": { "alias": "fixedInViewport"; "required": false; }; "fixedTopGap": { "alias": "fixedTopGap"; "required": false; }; "fixedBottomGap": { "alias": "fixedBottomGap"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 export declare class MatSidenavContainer extends MatDrawerContainer {
     _allDrawers: QueryList<MatSidenav>;
     _content: MatSidenavContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContainer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContainer, "mat-sidenav-container", ["matSidenavContainer"], {}, {}, ["_content", "_allDrawers"], ["mat-sidenav", "mat-sidenav-content", "*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContainer, "mat-sidenav-container", ["matSidenavContainer"], {}, {}, ["_content", "_allDrawers"], ["mat-sidenav", "mat-sidenav-content", "*"], false, never>;
 }
 
 export declare class MatSidenavContent extends MatDrawerContent {
     constructor(changeDetectorRef: ChangeDetectorRef, container: MatSidenavContainer, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContent, "mat-sidenav-content", never, {}, {}, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContent, "mat-sidenav-content", never, {}, {}, never, ["*"], false, never>;
 }
 
 export declare class MatSidenavModule {

package/slide-toggle/_slide-toggle-theme.scss

@@ -1,73 +1,12 @@
 @use 'sass:map';
-@use 'sass:color';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
-@use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
 @use '../core/theming/theming';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
-
-
-// Generates all color mapping for the properties that only change based on the theme.
-@function _get-theme-base-map($is-dark) {
-  $on-surface: if($is-dark, mdc-color-palette.$grey-100, mdc-color-palette.$grey-800);
-  $hairline: if($is-dark, mdc-color-palette.$grey-700, mdc-color-palette.$grey-300);
-  $on-surface-variant: if($is-dark, mdc-color-palette.$grey-500, mdc-color-palette.$grey-700);
-  $on-surface-state-content: if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900);
-  $disabled-handle-color: if($is-dark, #000, mdc-color-palette.$grey-800);
-  $icon-color: if($is-dark, mdc-color-palette.$grey-900, #fff);
-
-  @return (
-    disabled-selected-handle-color: $disabled-handle-color,
-    disabled-unselected-handle-color: $disabled-handle-color,
-
-    disabled-selected-track-color: $on-surface,
-    disabled-unselected-track-color: $on-surface,
-    unselected-focus-state-layer-color: $on-surface,
-    unselected-pressed-state-layer-color: $on-surface,
-    unselected-hover-state-layer-color: $on-surface,
-
-    unselected-focus-track-color: $hairline,
-    unselected-hover-track-color: $hairline,
-    unselected-pressed-track-color: $hairline,
-    unselected-track-color: $hairline,
-
-    unselected-focus-handle-color: $on-surface-state-content,
-    unselected-hover-handle-color: $on-surface-state-content,
-    unselected-pressed-handle-color: $on-surface-state-content,
-
-    handle-surface-color: surface,
-    unselected-handle-color: $on-surface-variant,
-
-    selected-icon-color: $icon-color,
-    disabled-selected-icon-color: $icon-color,
-    disabled-unselected-icon-color: $icon-color,
-    unselected-icon-color: $icon-color,
-  );
-}
-
-// Generates the mapping for the properties that change based on the slide toggle color.
-@function _get-theme-color-map($color-palette, $is-dark) {
-  $primary: theming.get-color-from-palette($color-palette, if($is-dark, 300, 600));
-  $state-content: theming.get-color-from-palette($color-palette, if($is-dark, 200, 900));
-  $inverse: theming.get-color-from-palette($color-palette, if($is-dark, 600, 300));
-
-  @return (
-    selected-focus-state-layer-color: $primary,
-    selected-handle-color: $primary,
-    selected-hover-state-layer-color: $primary,
-    selected-pressed-state-layer-color: $primary,
-
-    selected-focus-handle-color: $state-content,
-    selected-hover-handle-color: $state-content,
-    selected-pressed-handle-color: $state-content,
-
-    selected-focus-track-color: $inverse,
-    selected-hover-track-color: $inverse,
-    selected-pressed-track-color: $inverse,
-    selected-track-color: $inverse,
-  );
-}
+@use '../core/tokens/m2/mdc/switch' as m2-mdc-switch;
+@use '../core/tokens/m2/mat/slide-toggle' as m2-mat-slide-toggle;
+@use '../core/tokens/token-utils';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -77,28 +16,32 @@
   $is-dark: map.get($config, is-dark);
   $foreground: map.get($config, foreground);
 
+  $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($config);
+
   @include mdc-helpers.using-mdc-theme($config) {
-    // MDC's switch doesn't support a `color` property. We add support
-    // for it by adding a CSS class for accent and warn style.
+    // Add values for MDC slide toggles tokens
     .mat-mdc-slide-toggle {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-switch-theme.theme(_get-theme-base-map($is-dark));
+      @include mdc-switch-theme.theme($mdc-switch-color-tokens);
 
       // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
       .mdc-switch--disabled + label {
         color: theming.get-color-from-palette($foreground, disabled-text);
       }
 
-      &.mat-primary {
-        @include mdc-switch-theme.theme(_get-theme-color-map($primary, $is-dark));
-      }
-
+      // Change the color palette related tokens to accent or warn if applicable
       &.mat-accent {
-        @include mdc-switch-theme.theme(_get-theme-color-map($accent, $is-dark));
+        @include mdc-switch-theme.theme(m2-mdc-switch.private-get-color-palette-color-tokens(
+          map.get($config, accent),
+          map.get($config, is-dark)
+        ));
       }
 
       &.mat-warn {
-        @include mdc-switch-theme.theme(_get-theme-color-map($warn, $is-dark));
+        @include mdc-switch-theme.theme(m2-mdc-switch.private-get-color-palette-color-tokens(
+          map.get($config, warn),
+          map.get($config, is-dark)
+        ));
       }
     }
   }
@@ -107,8 +50,17 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
+  $mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($config);
+  $mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($config);
+
+  //Add values for MDC slide toggle tokens
+  .mat-mdc-slide-toggle {
     @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+    @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
+    @include token-utils.create-token-values(
+      m2-mat-slide-toggle.$prefix,
+      $mat-slide-toggle-typography-tokens
+    );
   }
 }
 
@@ -138,4 +90,3 @@
     }
   }
 }
-

package/slide-toggle/index.d.ts

@@ -65,7 +65,7 @@ export declare class MatSlideToggle extends _MatSlideToggleBase<MatSlideToggleCh
     protected _createChangeEvent(isChecked: boolean): MatSlideToggleChange;
     _getAriaLabelledBy(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 export declare abstract class _MatSlideToggleBase<T> extends _MatSlideToggleMixinBase implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple {
@@ -101,6 +101,10 @@ export declare abstract class _MatSlideToggleBase<T> extends _MatSlideToggleMixi
     /** Whether the slide-toggle element is checked or not. */
     get checked(): boolean;
     set checked(value: BooleanInput);
+    /** Whether to hide the icon inside of the slide toggle. */
+    get hideIcon(): boolean;
+    set hideIcon(value: BooleanInput);
+    private _hideIcon;
     /** An event will be dispatched each time the slide-toggle changes its value. */
     readonly change: EventEmitter<T>;
     /**
@@ -129,7 +133,7 @@ export declare abstract class _MatSlideToggleBase<T> extends _MatSlideToggleMixi
      */
     protected _emitChangeEvent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatSlideToggleBase<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase<any>, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase<any>, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never>;
 }
 
 /** Change event object emitted by a slide toggle. */
@@ -151,6 +155,8 @@ export declare interface MatSlideToggleDefaultOptions {
     disableToggleValue?: boolean;
     /** Default color for slide toggles. */
     color?: ThemePalette;
+    /** Whether to hide the icon inside the slide toggle. */
+    hideIcon?: boolean;
 }
 
 /** @docs-private */
@@ -176,7 +182,7 @@ export declare class MatSlideToggleModule {
  */
 export declare class MatSlideToggleRequiredValidator extends CheckboxRequiredValidator {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggleRequiredValidator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSlideToggleRequiredValidator, "mat-slide-toggle[required][formControlName],             mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]", never, {}, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSlideToggleRequiredValidator, "mat-slide-toggle[required][formControlName],             mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]", never, {}, {}, never, never, false, never>;
 }
 
 /** This module is used by both original and MDC-based slide-toggle implementations. */

package/slider/index.d.ts

@@ -207,7 +207,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getThumb(thumbPosition: _MatThumb): _MatSliderVisualThumb;
     _setTransition(withAnimation: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "discrete": { "alias": "discrete"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, {}, ["_input", "_inputs"], ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "discrete": { "alias": "discrete"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, {}, ["_input", "_inputs"], ["*"], false, never>;
 }
 
 declare interface _MatSlider {
@@ -343,7 +343,7 @@ export declare class MatSliderRangeThumb extends MatSliderThumb implements _MatS
      */
     writeValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderRangeThumb, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderRangeThumb, "input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderRangeThumb"], {}, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderRangeThumb, "input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderRangeThumb"], {}, {}, never, never, false, never>;
 }
 
 declare interface _MatSliderRangeThumb extends _MatSliderThumb {
@@ -529,7 +529,7 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     focus(): void;
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderThumb, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb]", ["matSliderThumb"], { "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderThumb, "input[matSliderThumb]", ["matSliderThumb"], { "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, never, never, false, never>;
 }
 
 declare interface _MatSliderThumb {
@@ -659,7 +659,7 @@ export declare class MatSliderVisualThumb implements _MatSliderVisualThumb, Afte
     _isShowingAnyRipple(): boolean;
     private _isSliderThumbHovered;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderVisualThumb, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": { "alias": "discrete"; "required": false; }; "thumbPosition": { "alias": "thumbPosition"; "required": false; }; "valueIndicatorText": { "alias": "valueIndicatorText"; "required": false; }; }, {}, never, never, false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": { "alias": "discrete"; "required": false; }; "thumbPosition": { "alias": "thumbPosition"; "required": false; }; "valueIndicatorText": { "alias": "valueIndicatorText"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare interface _MatSliderVisualThumb {